:root { color-scheme: dark; --ink:#effff6; --muted:#9cc9b6; --accent:#f9dc5c; font-family:Inter,ui-rounded,"SF Pro Rounded",system-ui,sans-serif; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 15% 10%,#165e63 0,transparent 28rem),radial-gradient(circle at 90% 85%,#4c2b55 0,transparent 32rem),#04171e; }
button { font:inherit; }
.shell { width:min(1060px,calc(100% - 28px)); margin:0 auto; padding:24px 0 20px; }
.topbar,footer { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.eyebrow { margin:0 0 4px; color:var(--accent); font-size:11px; font-weight:900; letter-spacing:.18em; }
h1 { margin:0; font-size:clamp(27px,5vw,48px); line-height:.95; letter-spacing:-.055em; }
h1 span { color:var(--muted); font-weight:500; }
.icon-button,.primary { border:0; border-radius:999px; cursor:pointer; font-weight:850; transition:transform .15s ease,filter .15s ease; }
.icon-button { padding:10px 15px; color:var(--ink); background:#ffffff14; box-shadow:inset 0 0 0 1px #ffffff20; }
.primary { padding:12px 22px; color:#163216; background:var(--accent); box-shadow:0 5px 0 #a57d16; }
.icon-button:hover,.primary:hover { filter:brightness(1.08); transform:translateY(-1px); }
.icon-button:focus-visible,.primary:focus-visible,.game:focus-visible { outline:3px solid white; outline-offset:3px; }
.game-card { margin:24px auto 18px; padding:9px; overflow:hidden; border-radius:28px; background:linear-gradient(135deg,#ffffff30,#ffffff08); box-shadow:0 30px 80px #0008; }
.game { position:relative; width:100%; height:min(68vh,650px); min-height:470px; overflow:hidden; border-radius:20px; background:#4ec0ca; touch-action:manipulation; user-select:none; }
.sky { position:absolute; inset:0 0 20%; background:linear-gradient(#35a8c4 0 62%,#9de2d4 62% 64%,#66cba8 64% 73%,#46a979 73% 100%); }
.sky::after { content:""; position:absolute; inset:58% -240px 0 0; opacity:.55; background:repeating-linear-gradient(135deg,transparent 0 38px,#1d8c6b 39px 54px,transparent 55px 92px); animation:scrollSky 12s linear infinite; }
.cloud { position:absolute; width:120px; height:34px; border-radius:999px; background:#fff7; filter:blur(.2px); }
.cloud::before,.cloud::after { content:""; position:absolute; border-radius:50%; background:inherit; }
.cloud::before { width:48px; height:48px; left:20px; top:-18px; }
.cloud::after { width:66px; height:66px; right:12px; top:-30px; }
.cloud-a { left:15%; top:18%; transform:scale(.65); }
.cloud-b { right:8%; top:31%; transform:scale(.9); opacity:.7; }
.land { position:absolute; z-index:5; inset:80% 0 0; background-color:#d9c877; background-image:repeating-linear-gradient(120deg,#ebdf93 0 18px,#c9b65f 19px 23px,#ddcf7a 24px 42px); border-top:7px solid #62b64e; animation:scrollLand 3s linear infinite; }
.bird { position:absolute; z-index:8; left:22%; top:0; width:51px; height:36px; border:3px solid #713e17; border-radius:56% 60% 48% 52%; background:radial-gradient(circle at 68% 30%,#fff 0 4px,#25150c 5px 7px,transparent 8px),linear-gradient(135deg,#ffe26a 0 48%,#f19c2e 49% 100%); box-shadow:inset -7px -5px 0 #d96a25,0 4px 1px #0004; transform-origin:50% 55%; animation:flap .28s ease-in-out infinite alternate; will-change:transform; }
.bird::before { content:""; position:absolute; left:-10px; top:12px; width:24px; height:16px; border:3px solid #713e17; border-radius:70% 20% 70% 40%; background:#f6bf3d; transform-origin:right center; animation:wing .28s ease-in-out infinite alternate; }
.bird::after { content:""; position:absolute; right:-12px; top:13px; width:14px; height:9px; border:2px solid #8d3c18; border-left:0; border-radius:0 70% 70% 0; background:#ff7438; }
.pipes { position:absolute; inset:0 0 20%; z-index:7; }
.pipe-pair { position:absolute; top:0; bottom:0; width:78px; will-change:transform; }
.pipe-top,.pipe-bottom { position:absolute; left:0; width:78px; background:linear-gradient(90deg,#d4ff7e 0 9%,#79d94c 10% 67%,#439e42 68% 88%,#286a38 89% 100%); border-left:3px solid #d9ff92; border-right:4px solid #245c32; }
.pipe-top { top:0; }
.pipe-bottom { bottom:0; }
.pipe-top::after,.pipe-bottom::before { content:""; position:absolute; left:-7px; width:88px; height:34px; border:3px solid #245c32; border-radius:5px; background:linear-gradient(90deg,#d4ff7e 0 9%,#79d94c 10% 67%,#439e42 68% 88%,#286a38 89% 100%); box-shadow:inset 3px 0 #edffb1; }
.pipe-top::after { bottom:-1px; }
.pipe-bottom::before { top:-1px; }
.score { position:absolute; z-index:12; top:18px; left:50%; transform:translateX(-50%); color:white; font-size:clamp(38px,7vw,68px); font-weight:950; line-height:1; text-shadow:0 4px 0 #0005,2px 0 #102d3c,-2px 0 #102d3c; }
.panel { position:absolute; z-index:20; left:50%; top:48%; width:min(390px,calc(100% - 30px)); padding:23px; transform:translate(-50%,-50%); text-align:center; border:1px solid #ffffff55; border-radius:24px; background:#073640e8; box-shadow:0 20px 55px #08303b88; backdrop-filter:blur(8px); }
.panel[hidden] { display:none; }
.mascot { position:relative; width:132px; height:92px; margin:0 auto 8px; }
.mascot::before,.mascot::after { content:""; position:absolute; top:15px; width:21px; height:62px; border:5px solid #173f3f; border-radius:10px; background:linear-gradient(90deg,#d4ff7e,#62b849 70%,#286a38); }
.mascot::before { left:6px; }.mascot::after { right:6px; }
.mascot span { position:absolute; left:39px; top:30px; width:54px; height:39px; border:3px solid #713e17; border-radius:56% 60% 48% 52%; background:radial-gradient(circle at 68% 30%,#fff 0 4px,#25150c 5px 7px,transparent 8px),linear-gradient(135deg,#ffe26a 0 48%,#f19c2e 49% 100%); box-shadow:inset -7px -5px 0 #d96a25; transform:rotate(-8deg); }
.mascot span::before { content:""; position:absolute; left:-13px; top:14px; width:25px; height:16px; border:3px solid #713e17; border-radius:70% 20% 70% 40%; background:#f6bf3d; }
.mascot span::after { content:""; position:absolute; right:-14px; top:14px; width:14px; height:9px; border:2px solid #8d3c18; border-left:0; border-radius:0 70% 70% 0; background:#ff7438; }
.panel p { color:#d5eee6; }
.panel .hint { margin:17px 0 0; color:var(--muted); font-size:12px; }
kbd { display:inline-block; padding:2px 6px; border:1px solid #ffffff55; border-radius:5px; background:#ffffff15; box-shadow:0 2px 0 #0004; }
.result-panel h2 { margin:3px 0 15px; font-size:31px; }
.results { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.results div { padding:12px; border-radius:14px; background:#ffffff12; }
.results span { display:block; color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
.results strong { display:block; color:var(--accent); font-size:32px; }
footer { color:var(--muted); font-size:12px; }
footer p { margin:0; }
footer span { color:var(--ink); }
.game.is-playing .panel { display:none; }
.game.is-paused .sky,.game.is-paused .land,.game.is-paused .bird { animation-play-state:paused; }
@keyframes scrollSky { to { background-position-x:-276px; } }
@keyframes scrollLand { to { background-position-x:-336px; } }
@keyframes flap { to { margin-top:-2px; } }
@keyframes wing { to { transform:rotate(-24deg); } }
@media (max-width:640px) {
  .shell { width:min(100% - 14px,1060px); padding-top:12px; }
  .topbar { padding:0 7px; }
  h1 span { display:block; margin-top:6px; }
  .game-card { margin-top:14px; border-radius:22px; }
  .game { min-height:500px; height:calc(100vh - 145px); max-height:690px; }
  .pipe-pair { width:62px; }
  .pipe-top,.pipe-bottom { width:62px; background-size:62px 2px; }
  .pipe-top::after,.pipe-bottom::before { width:68px; left:-3px; background-size:68px 32px; height:32px; }
  .bird { left:18%; }
  footer { display:block; padding:0 7px; line-height:1.45; }
  footer p + p { margin-top:4px; }
}
@media (prefers-reduced-motion:reduce) { .sky,.land { animation-duration:30s; } .bird { animation-duration:.7s; } .icon-button,.primary { transition:none; } }