:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #101426; }
* { box-sizing: border-box; }
html, body, #game-shell { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #101426; color: #f5f6ff; touch-action: none; user-select: none; }
#game-shell { display: grid; place-items: center; }
#stage { position: relative; width: min(100%, calc(100vh * 16 / 9)); max-height: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #101426; }
#game-canvas { display: block; width: 100%; height: 100%; outline: none; }
#game-canvas:focus-visible { outline: 3px solid #8cf2d0; outline-offset: -3px; }
button { min-width: 44px; min-height: 44px; border: 1px solid #5b5e9b; border-radius: 6px; background: #252956; color: #f5f6ff; font: inherit; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:hover, button:focus-visible { border-color: #8cf2d0; color: #8cf2d0; outline: none; }
button:active { background: #373d73; transform: translateY(1px); }
#hud { position: absolute; inset: 18px 134px auto 22px; z-index: 3; display: flex; gap: 28px; pointer-events: none; }
#hud div { min-width: 72px; }
#hud span, #hud strong { display: block; letter-spacing: 0; }
#hud span { color: #c7c9f7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; }
#hud strong { margin-top: 2px; color: #f5f6ff; font-size: 20px; line-height: 1; }
#action-controls { position: absolute; top: 16px; right: 18px; z-index: 4; display: flex; gap: 8px; }
#action-controls button { font-size: 13px; }
#shift-controls { position: absolute; right: 24px; bottom: 24px; z-index: 5; display: flex; gap: 10px; }
.direction-button { display: grid; place-items: center; width: 90px; height: 64px; border-color: #8cf2d0; background: #2b3368; }
.direction-button span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.direction-button[data-active="true"] { background: #8cf2d0; color: #101426; }
.panel { position: absolute; inset: 50% auto auto 50%; z-index: 7; width: min(430px, calc(100% - 32px)); transform: translate(-50%, -50%); padding: 24px; border: 1px solid #8cf2d0; border-radius: 8px; background: rgba(16, 20, 38, 0.98); text-align: center; }
.panel.compact { width: min(330px, calc(100% - 32px)); }
.panel[hidden], #toast[hidden], .result-actions button[hidden] { display: none; }
.status-label { margin: 0; color: #8cf2d0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 850; }
.panel h1, .panel h2 { margin: 8px 0; color: #f5f6ff; font-size: 30px; letter-spacing: 0; line-height: 1.1; }
.panel p { margin: 0; color: #d7d8f3; font-size: 14px; line-height: 1.5; }
.panel .controls-copy, .panel .best-result { margin-top: 8px; color: #ffd56e; }
.panel > .primary, .result-actions { margin-top: 20px; }
.panel > .primary { min-width: 174px; padding: 0 16px; }
.result-actions { display: flex; justify-content: center; gap: 10px; }
.result-actions button { min-width: 146px; padding: 0 14px; }
.result-actions #share-result-button { min-width: 44px; padding: 0; font-size: 13px; }
button.primary { border-color: #8cf2d0; background: #8cf2d0; color: #101426; }
#toast { position: absolute; left: 50%; bottom: 26px; z-index: 9; transform: translateX(-50%); padding: 9px 14px; border: 1px solid #ffd56e; border-radius: 5px; background: #252956; color: #f5f6ff; font-size: 12px; font-weight: 800; white-space: nowrap; }
body[data-game-state="ready"] #hud, body[data-game-state="ready"] #action-controls, body[data-game-state="ready"] #shift-controls, body[data-game-state="over"] #action-controls, body[data-game-state="over"] #shift-controls, body[data-game-state="paused"] #action-controls, body[data-game-state="paused"] #shift-controls { visibility: hidden; opacity: 0; pointer-events: none; }
body[data-alert="true"] #energy-value { color: #ff8e9b; }
@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: 44px; } #hud span { font-size: 6px; } #hud strong { font-size: 12px; } #action-controls { top: 8px; right: 8px; gap: 4px; } #action-controls button { font-size: 9px; } #shift-controls { right: 10px; bottom: 10px; gap: 6px; } .direction-button { width: 62px; height: 44px; } .direction-button span { font-size: 7px; } .panel, .panel.compact { width: min(360px, calc(100% - 20px)); padding: 12px; } .status-label { 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: 105px; min-height: 30px; padding: 0 8px; font-size: 9px; } .result-actions #share-result-button { min-width: 32px; padding: 0; font-size: 9px; } #toast { bottom: 8px; padding: 5px 9px; font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }