:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: #07131d; }
body { color: #e9f6fb; font-family: Arial, sans-serif; overflow: hidden; }
button { min-height: 44px; border: 1px solid #51d7e8; border-radius: 6px; background: #092633; color: #effdff; cursor: pointer; font: inherit; font-weight: 800; touch-action: manipulation; }
button:hover, button:focus-visible { background: #10475c; border-color: #ffe17c; outline: 2px solid transparent; }
button:focus-visible { outline-color: #ffe17c; }
button.secondary { border-color: #547584; background: #11242e; color: #c9dbe1; }
#game-shell { width: min(100vw, 960px); height: min(56.25vw, 540px); margin: 0 auto; overflow: hidden; position: relative; }
#game-canvas { display: block; width: 100%; height: 100%; background: #07131d; touch-action: manipulation; }
#hud { display: flex; gap: 10px; left: 16px; position: absolute; right: 16px; top: 14px; z-index: 2; }
#hud span { background: rgba(3, 13, 21, .76); border: 1px solid rgba(91, 205, 221, .42); border-radius: 5px; color: #c7edf2; font-size: 12px; font-weight: 800; letter-spacing: .04em; min-height: 28px; padding: 7px 9px; text-transform: uppercase; }
#hud #best-label { margin-left: auto; }
.overlay { align-items: center; background: rgba(3, 13, 21, .82); display: flex; flex-direction: column; inset: 0; justify-content: center; padding: 18px; position: absolute; text-align: center; z-index: 4; }
.overlay[hidden] { display: none; }
.overlay h1, .overlay h2 { font-size: clamp(25px, 4vw, 42px); letter-spacing: 0; margin: 0 0 10px; }
.overlay p { color: #c7dde3; line-height: 1.45; margin: 0; max-width: 430px; }
.eyebrow { color: #58e4b3 !important; font-size: 12px; font-weight: 800; letter-spacing: .12em; margin-bottom: 8px !important; text-transform: uppercase; }
.overlay-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.overlay-actions button, #start-button { min-width: 142px; padding: 9px 14px; }
#start-button { margin-top: 18px; }
#controls { bottom: 12px; display: flex; gap: 8px; justify-content: center; left: 12px; position: absolute; right: 12px; z-index: 3; }
#controls button { min-width: 48px; padding: 7px 12px; }
#pause-button { min-width: 104px !important; }
@media (max-width: 560px) {
  #hud { gap: 5px; left: 8px; right: 8px; top: 8px; }
  #hud span { font-size: 10px; min-height: 25px; padding: 6px; }
  #controls { bottom: 7px; gap: 5px; }
  #controls button { min-height: 42px; min-width: 42px; padding: 6px 9px; }
  #pause-button { min-width: 82px !important; }
  .overlay { padding: 12px; }
  .overlay p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }