* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #020b14; color: #f4fbff; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { display: grid; place-items: center; padding: 18px; }
.game-shell { width: min(1120px, 100%); display: grid; gap: 12px; }
.game-top { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.game-top span { color: #21c7a8; font-weight: 900; text-transform: uppercase; font-size: .78rem; }
.game-top h1 { margin: 3px 0 0; line-height: 1; font-size: clamp(2rem, 6vw, 4rem); }
.game-top a { color: #f5b84b; font-weight: 900; text-decoration: none; }
canvas { width: 100%; aspect-ratio: 16 / 9; border: 2px solid rgba(244,251,255,.18); border-radius: 14px; background: #071827; box-shadow: 0 22px 60px rgba(0,0,0,.36); }
.hud { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px; border: 1px solid rgba(244,251,255,.14); border-radius: 12px; background: rgba(255,255,255,.05); }
.hud p { margin: 0; color: #a9c2d5; }
button { min-height: 44px; border: 0; border-radius: 10px; padding: 0 16px; color: #061826; background: #f5b84b; font: inherit; font-weight: 900; cursor: pointer; }
.touch { display: none; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.touch button { background: #21c7a8; }
@media (hover: none), (max-width: 760px) { .touch { display: grid; } .game-top { align-items: start; flex-direction: column; } }