:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; background: #08121e; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; touch-action: manipulation; }
button { font: inherit; }
#game-shell { display: grid; min-height: 100vh; min-height: 100svh; place-items: center; background: #08121e; }
#stage { position: relative; width: min(100vw, 177.78vh); width: min(100vw, 177.78svh); height: min(56.25vw, 100vh); height: min(56.25vw, 100svh); overflow: hidden; background: #08121e; }
#game-canvas { display: block; width: 100%; height: 100%; outline: none; }
#hud { position: absolute; top: 22px; left: 24px; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(72px, 1fr)); gap: 8px; width: min(58%, 540px); pointer-events: none; }
#hud div { padding: 8px 10px; border: 1px solid rgba(102, 216, 255, .35); border-radius: 7px; background: rgba(7, 19, 32, .78); box-shadow: 0 10px 28px rgba(0, 0, 0, .2); }
#hud span { display: block; color: #86a8bc; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
#hud strong { display: block; margin-top: 2px; color: #f3fbff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; letter-spacing: .04em; }
#action-controls { position: absolute; top: 22px; right: 24px; z-index: 3; display: flex; gap: 8px; }
#action-controls button, .result-actions button { display: inline-grid; min-width: 42px; min-height: 42px; place-items: center; border: 1px solid rgba(120, 222, 255, .45); border-radius: 7px; background: rgba(7, 19, 32, .86); color: #ddf8ff; cursor: pointer; }
#action-controls button:focus-visible, button:focus-visible { outline: 3px solid #fdd66e; outline-offset: 3px; }
#lane-controls { position: absolute; right: 24px; bottom: 24px; z-index: 3; display: flex; gap: 10px; }
.direction-button { display: grid; width: 70px; height: 58px; place-items: center; border: 1px solid rgba(119, 235, 255, .6); border-radius: 9px; background: rgba(7, 25, 40, .9); color: #e7fbff; font-size: 28px; font-weight: 800; cursor: pointer; transition: transform 120ms ease, background-color 120ms ease; }
.direction-button:hover, .direction-button[data-active="true"] { transform: translateY(-2px); background: #0d4260; }
.panel { position: absolute; top: 50%; left: 50%; z-index: 5; width: min(440px, calc(100% - 48px)); transform: translate(-50%, -50%); padding: 28px; border: 1px solid rgba(102, 216, 255, .62); border-radius: 10px; background: rgba(5, 16, 28, .94); box-shadow: 0 30px 90px rgba(0, 0, 0, .58); text-align: center; }
.panel[hidden], #toast[hidden] { display: none; }
.panel.compact { width: min(310px, calc(100% - 48px)); }
.status-label { margin: 0; color: #79e7ff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 850; letter-spacing: .12em; }
.panel h1, .panel h2 { margin: 9px 0; color: #f4fbff; font-size: 32px; letter-spacing: 0; line-height: 1.1; }
.panel p { color: #b2c8d6; line-height: 1.5; }
.controls-copy { font-size: 13px; }
.primary { min-height: 46px; padding: 0 20px; border: 1px solid #f8d26b; border-radius: 7px; background: #f8d26b; color: #08121e; font-weight: 800; cursor: pointer; }
.best-result { color: #79e7ff !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 20px; }
.result-actions button { min-width: 124px; padding: 0 12px; }
.result-actions button:first-child { min-width: 42px; }
#toast { position: absolute; bottom: 98px; left: 50%; z-index: 7; transform: translateX(-50%); padding: 8px 12px; border: 1px solid rgba(248, 210, 107, .7); border-radius: 999px; background: rgba(5, 16, 28, .92); color: #fff2bb; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 800; white-space: nowrap; }
body[data-game-state="playing"] #start-panel, body[data-game-state="playing"] #result-panel { display: none; }
body[data-game-state="paused"] #hud, body[data-game-state="paused"] #lane-controls { opacity: .34; }
@media (max-width: 700px), (max-height: 500px) {
  #hud { top: 10px; left: 10px; gap: 4px; width: calc(100% - 82px); }
  #hud div { padding: 5px 6px; border-radius: 5px; }
  #hud span { font-size: 7px; }
  #hud strong { font-size: 12px; }
  #action-controls { top: 10px; right: 10px; gap: 5px; }
  #action-controls button { min-width: 29px; min-height: 29px; border-radius: 5px; font-size: 11px; }
  #lane-controls { right: 12px; bottom: 12px; gap: 7px; }
  .direction-button { width: 52px; height: 48px; border-radius: 7px; font-size: 23px; }
  .panel { width: min(330px, calc(100% - 28px)); padding: 18px; }
  .panel h1, .panel h2 { font-size: 24px; }
  .panel p { margin: 8px 0; font-size: 12px; }
  #toast { bottom: 70px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }