:root { color-scheme: dark; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #0b1725; }
* { box-sizing: border-box; }
html, body, #game-shell { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #0b1725; color: #eff8ff; touch-action: none; user-select: none; -webkit-user-select: none; }
#game-shell { display: grid; place-items: center; background: #07101a; }
#stage { position: relative; width: min(100vw, 960px); height: min(56.25vw, 540px); overflow: hidden; background: #0b1725; }
@media (orientation: landscape) { #stage { width: min(177.7778vh, 960px); height: min(100vh, 540px); } }
#game-canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
#game-canvas:focus-visible { outline: 3px solid #76e0b4; outline-offset: -3px; }
button { min-width: 44px; min-height: 44px; border: 1px solid rgba(118, 224, 180, .62); border-radius: 6px; background: #163047; color: #eff8ff; font: inherit; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:hover, button:focus-visible { border-color: #a8ffd8; color: #a8ffd8; outline: none; }
button:active { background: #1e4b60; transform: translateY(1px); }
button.primary { border-color: #76e0b4; background: #76e0b4; color: #07151c; }
#hud { position: absolute; inset: 17px 112px auto 21px; z-index: 3; display: flex; gap: 25px; pointer-events: none; }
#hud div { min-width: 66px; }
#hud span, #hud strong { display: block; letter-spacing: 0; }
#hud span { color: #b8d2e2; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; }
#hud strong { margin-top: 2px; color: #f1fbff; font-size: 20px; line-height: 1; }
#energy-value { color: #ffd18d; }
#utility-controls { position: absolute; top: 15px; right: 17px; z-index: 4; display: flex; gap: 8px; }
#utility-controls button { font-size: 13px; }
#lane-controls { position: absolute; right: 22px; bottom: 18px; z-index: 5; display: grid; grid-template-columns: repeat(3, 82px); gap: 7px; }
.lane-button { min-width: 0; width: 82px; height: 52px; border-color: #5dbce6; background: #12334c; }
.lane-button span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }
.lane-button[data-active="true"] { border-color: #a8ffd8; background: #76e0b4; color: #07151c; }
.board-button { grid-column: 1 / 4; width: 100%; min-height: 48px; font-size: 11px; letter-spacing: 0; }
.panel { position: absolute; inset: 50% auto auto 50%; z-index: 7; width: min(440px, calc(100% - 32px)); transform: translate(-50%, -50%); padding: 24px; border: 1px solid #76e0b4; border-radius: 8px; background: rgba(7, 22, 34, .97); text-align: center; }
.panel.compact { width: min(340px, calc(100% - 32px)); }
.panel[hidden], #toast[hidden], .result-actions button[hidden] { display: none; }
.kicker { margin: 0; color: #76e0b4; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 850; }
.panel h1, .panel h2 { margin: 8px 0; color: #f1fbff; font-size: 30px; letter-spacing: 0; line-height: 1.1; }
.panel p { margin: 0; color: #c6dbe7; font-size: 14px; line-height: 1.5; }
.panel .best, .panel #controls-copy { margin-top: 8px; color: #ffd18d; }
.panel > .primary, .result-actions { margin-top: 20px; }
.panel > .primary { min-width: 180px; padding: 0 16px; }
.result-actions { display: flex; justify-content: center; gap: 10px; }
.result-actions button { min-width: 123px; padding: 0 11px; }
.result-actions #share-result-button { min-width: 44px; padding: 0; font-size: 13px; }
#toast { position: absolute; left: 50%; bottom: 22px; z-index: 9; transform: translateX(-50%); margin: 0; padding: 9px 14px; border: 1px solid #ffd18d; border-radius: 5px; background: #17415a; color: #f1fbff; font-size: 12px; font-weight: 800; white-space: nowrap; }
body[data-game-state="ready"] #hud, body[data-game-state="ready"] #utility-controls, body[data-game-state="ready"] #lane-controls, body[data-game-state="over"] #utility-controls, body[data-game-state="over"] #lane-controls, body[data-game-state="paused"] #utility-controls, body[data-game-state="paused"] #lane-controls { visibility: hidden; opacity: 0; pointer-events: none; }
body[data-low-energy="true"] #energy-value { color: #ff8f9b; }
@media (max-width: 700px), (max-height: 390px) {
  button { min-width: 32px; min-height: 32px; border-radius: 4px; }
  #hud { inset: 9px 82px auto 10px; gap: 11px; } #hud div { min-width: 43px; } #hud span { font-size: 6px; } #hud strong { font-size: 12px; }
  #utility-controls { top: 8px; right: 8px; gap: 4px; } #utility-controls button { font-size: 9px; }
  #lane-controls { right: 9px; bottom: 8px; grid-template-columns: repeat(3, 56px); gap: 5px; } .lane-button { width: 56px; height: 47px; } .lane-button span { font-size: 7px; } .board-button { min-height: 42px; font-size: 8px; }
  .panel, .panel.compact { width: min(360px, calc(100% - 20px)); padding: 12px; } .kicker { font-size: 8px; } .panel h1, .panel h2 { margin: 4px 0; font-size: 18px; } .panel p { font-size: 9px; } .panel > .primary, .result-actions { margin-top: 10px; } .panel > .primary, .result-actions button { min-width: 104px; min-height: 44px; padding: 0 8px; font-size: 9px; } .result-actions #share-result-button { min-width: 32px; padding: 0; font-size: 9px; } #toast { bottom: 5px; padding: 5px 9px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }