@font-face { font-family: "Nunito"; font-weight: 400; font-display: swap; src: url(fonts/nunito-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Nunito"; font-weight: 400; font-display: swap; src: url(fonts/nunito-vietnamese-400-normal.woff2) format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Nunito"; font-weight: 800; font-display: swap; src: url(fonts/nunito-latin-800-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Nunito"; font-weight: 800; font-display: swap; src: url(fonts/nunito-vietnamese-800-normal.woff2) format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }

:root {
  --sky-top: #2b3a55; --sky-mid: #6b5b7b; --sky-low: #e9a17a;
  --water: #2f5d6b; --water-deep: #1e3d4a; --cream: #fff4e0; --ink: #2a2230; --gold: #ffd27a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  min-height: 100svh; display: flex; flex-direction: column; align-items: center;
  font-family: "Nunito", system-ui, sans-serif; font-weight: 400; color: var(--cream);
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-low) 100%) fixed; background-color: var(--water-deep);
  overflow-x: hidden; text-rendering: optimizeLegibility;
}

.sky { position: absolute; inset: 0 0 auto 0; height: 60vh; pointer-events: none; }
.moon { position: absolute; top: 9%; right: 14%; width: 44px; height: 44px; background: #fff1c9;
  box-shadow: 0 0 0 4px #fff1c933, 0 0 40px 10px #ffe7a855; image-rendering: pixelated;
  clip-path: polygon(25% 0,75% 0,75% 8%,92% 8%,92% 25%,100% 25%,100% 75%,92% 75%,92% 92%,75% 92%,75% 100%,25% 100%,25% 92%,8% 92%,8% 75%,0 75%,0 25%,8% 25%,8% 8%,25% 8%); }
.star { position: absolute; width: 4px; height: 4px; background: #fff7dd; animation: twinkle 3.2s steps(2) infinite; }
.s1 { top: 12%; left: 12%; } .s2 { top: 24%; left: 30%; animation-delay: .8s; } .s3 { top: 8%; left: 58%; animation-delay: 1.6s; }
.s4 { top: 30%; right: 30%; animation-delay: 2.1s; } .s5 { top: 18%; left: 82%; animation-delay: 1.1s; }
@keyframes twinkle { 50% { opacity: .25; } }

main { position: relative; z-index: 1; text-align: center; padding: 12vh 1.25rem 0; max-width: 40rem; }
h1 { font-weight: 800; font-size: clamp(2.75rem, 11vw, 5.5rem); line-height: 1.05; letter-spacing: -.01em;
  color: var(--cream); text-shadow: 0 4px 0 var(--ink), 0 8px 24px #0005; }
.sub { font-weight: 800; font-size: clamp(1.1rem, 4vw, 1.5rem); color: var(--gold); margin-top: .5rem; line-height: 1.5; }
.tagline { font-size: clamp(1rem, 3.4vw, 1.2rem); margin: 1.25rem auto 0; max-width: 28rem; line-height: 1.6; }
.status { margin-top: 1.5rem; }
.status span { display: inline-block; font-weight: 800; color: var(--gold); padding: .5rem .25rem; }
.status { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; align-items: center; }
.play { display: inline-block; font-weight: 800; color: var(--ink); background: var(--gold); text-decoration: none;
  padding: .5rem 1.1rem; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); border-radius: 4px; }
.play:hover { background: #ffe0a0; }
.play:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.play:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.pillars { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.75rem; }
.pillars li { font-size: .95rem; background: #2a223066; border: 2px solid #fff4e033; padding: .4rem .8rem; border-radius: 4px; line-height: 1.5; }

.lang { position: absolute; top: 1rem; right: 1rem; z-index: 2; font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer;
  color: var(--ink); background: var(--cream); border: 3px solid var(--ink); border-radius: 4px; padding: .35rem .8rem; box-shadow: 0 3px 0 var(--ink); }
.lang:hover { background: var(--gold); }
.lang:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.lang:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.pond { position: relative; flex: 1; width: 100%; min-height: 220px; margin-top: 3rem;
  background: linear-gradient(180deg, #f2c08f55 0 3px, var(--water) 3px 40%, var(--water-deep)); }
.bobber { position: absolute; top: 18px; left: 58%; width: 12px; height: 16px; animation: bob 2.6s ease-in-out infinite;
  background: linear-gradient(#e2574c 0 50%, #fff 50% 100%); border: 2px solid var(--ink); border-radius: 3px; }
.bobber::before { content: ""; position: absolute; left: 3px; top: -10px; width: 2px; height: 10px; background: var(--ink); }
.ring { position: absolute; left: 50%; top: 100%; width: 40px; height: 8px; border: 2px solid #ffffff55; border-radius: 50%;
  transform: translate(-50%, -50%); animation: ripple 2.6s ease-out infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }
@keyframes ripple { from { width: 14px; opacity: .9; } to { width: 70px; height: 12px; opacity: 0; } }
.goby { position: absolute; top: 90px; left: -110px; width: 96px; height: auto; image-rendering: pixelated; animation: swim 22s linear -7s infinite; }
@keyframes swim {
  0% { left: -110px; transform: translateY(0); } 25% { transform: translateY(10px); } 50% { transform: translateY(0); }
  75% { transform: translateY(8px); } 100% { left: calc(100% + 110px); transform: translateY(0); }
}
.reeds { position: absolute; left: 6%; top: -44px; width: 26px; height: 60px;
  background: linear-gradient(90deg, #3e6b4a 0 4px, transparent 4px 10px, #4e7d55 10px 14px, transparent 14px 22px, #3e6b4a 22px 26px);
  clip-path: polygon(0 25%, 100% 0, 100% 100%, 0 100%); }

footer { position: relative; width: 100%; background: var(--water-deep); z-index: 1; font-size: .85rem; color: #fff4e0bb; padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); text-align: center; }

@media (max-width: 600px) { .moon { right: auto; left: 10%; top: 6%; width: 32px; height: 32px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .goby { left: 20%; }
}