:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #0b1222;
  color: #eef4ff;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: radial-gradient(ellipse at 50% 0, #24365c, transparent 58%), #0b1222; }
.game-shell { width: min(100% - 28px, 540px); margin: 0 auto; padding: 24px 0 36px; }
.heading { text-align: center; }
.home-link { color: #b8c9ed; font-size: .88rem; text-decoration: none; }
.home-link:hover { color: #fff; }
.eyebrow { margin: 22px 0 5px; color: #8ce8e2; font-size: .72rem; font-weight: 800; letter-spacing: .19em; }
h1 { margin: 0; font-size: clamp(2.4rem, 9vw, 3.8rem); line-height: 1; letter-spacing: -.07em; }
h1 span { color: #8ce8e2; }
.tagline { margin: 10px 0 22px; color: #b8c9ed; }
.game-card { overflow: hidden; border: 1px solid #ffffff20; border-radius: 22px; background: #151f36; box-shadow: 0 22px 70px #0005; }
.score-row { display: flex; justify-content: space-between; padding: 14px 20px 10px; color: #b8c9ed; font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.score-row p { margin: 0; }
.score-row strong { margin-left: 5px; color: #fff; font-size: .95rem; letter-spacing: 0; }
canvas { display: block; width: min(100%, 480px); height: auto; margin: 0 auto; background: #101a30; touch-action: none; }
.controls { display: grid; gap: 12px; padding: 14px 18px 18px; text-align: center; }
.controls > p { min-height: 1.4em; margin: 0; color: #c1d0ed; font-size: .9rem; }
.actions { display: flex; justify-content: center; gap: 10px; }
button { min-width: 120px; border: 0; border-radius: 11px; padding: 11px 18px; background: #8ce8e2; color: #122a38; font: inherit; font-weight: 800; cursor: pointer; }
button:hover:not(:disabled) { background: #b1fff7; }
button:disabled { cursor: not-allowed; opacity: .45; }
button:focus-visible, a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hint { color: #93a5c9; font-size: .83rem; line-height: 1.6; text-align: center; }
@media (max-width: 400px) { .score-row { padding-inline: 12px; font-size: .62rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }