:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: #101724; }
body { color: #edf4ff; font-family: Arial, Helvetica, sans-serif; overflow: hidden; user-select: none; -webkit-user-select: none; }
button { font: inherit; }
#game-shell { display: grid; min-height: 100vh; place-items: center; background: #101724; }
#stage { position: relative; width: 100vw; height: 56.25vw; max-width: 960px; max-height: 540px; min-height: 300px; overflow: hidden; background: #101724; }
#stage { width: min(100vw, 960px); height: min(56.25vw, 540px); }
#game-canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: manipulation; }
#hud { position: absolute; z-index: 2; top: 16px; left: 18px; display: flex; gap: 8px; pointer-events: none; }
#hud div { min-width: 68px; padding: 6px 8px; border: 1px solid #344866; background: rgba(11, 18, 32, 0.88); text-align: center; }
#hud span, #hud strong { display: block; }
#hud span { color: #9baec6; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
#hud strong { color: #f2f7ff; font-size: 15px; line-height: 1.25; }
#action-controls { position: absolute; z-index: 4; top: 16px; right: 18px; display: flex; gap: 8px; }
#action-controls button, #rewind-button { min-width: 38px; min-height: 38px; border: 1px solid #485f83; border-radius: 6px; background: #18263d; color: #d9e8ff; cursor: pointer; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; }
#action-controls button:hover, #action-controls button:focus-visible, #rewind-button:hover, #rewind-button:focus-visible { border-color: #77e0ba; background: #233b5c; outline: none; }
#rewind-button[disabled] { border-color: #2b3548; color: #6c778a; cursor: default; }
.panel { position: absolute; z-index: 5; top: 50%; left: 50%; width: 84%; max-width: 500px; transform: translate(-50%, -50%); padding: 28px 32px; border: 1px solid #4f6990; border-radius: 8px; background: #111d31; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.48); text-align: center; }
.panel { width: min(84%, 500px); }
.panel.compact { width: 80%; max-width: 430px; }
.panel.compact { width: min(80%, 430px); }
.panel h1, .panel h2 { margin: 4px 0 12px; color: #f4f8ff; font-size: 34px; letter-spacing: 0; }
.panel h2 { font-size: 28px; }
.panel p { color: #b9c8dd; line-height: 1.5; }
.status-label { margin: 0; color: #78e6bd !important; font-size: 12px; font-weight: 800; letter-spacing: 2px; }
.controls-copy { font-size: 13px; }
.primary, .result-actions button { min-height: 44px; margin-top: 8px; border: 1px solid #77e0ba; border-radius: 6px; background: #77e0ba; color: #09241c; cursor: pointer; font-weight: 800; padding: 10px 18px; }
.primary:hover, .primary:focus-visible { background: #a0f4d0; outline: none; }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.result-actions button:not(.primary) { border-color: #485f83; background: #18263d; color: #d9e8ff; }
.result-actions button:hover, .result-actions button:focus-visible { border-color: #a0f4d0; outline: none; }
.best-result { color: #f4d67b !important; font-weight: 800; }
#touch-controls { position: absolute; z-index: 3; left: 18px; bottom: 16px; display: flex; align-items: center; gap: 9px; }
#rewind-button { min-width: 84px; }
#rewind-note { margin: 0; color: #a7b8d0; font-size: 11px; }
#toast { position: absolute; z-index: 6; bottom: 16px; right: 18px; margin: 0; color: #ffffff; font-size: 13px; }
@media (max-width: 640px) {
  #stage { min-height: 0; }
  #hud { top: 8px; left: 8px; gap: 4px; }
  #hud div { min-width: 50px; padding: 4px 5px; }
  #hud span { font-size: 7px; } #hud strong { font-size: 11px; }
  #action-controls { top: 8px; right: 8px; gap: 4px; }
  #action-controls button { min-width: 32px; min-height: 32px; }
  #touch-controls { left: 8px; bottom: 8px; gap: 5px; }
  #rewind-button { min-width: 68px; min-height: 32px; font-size: 9px; }
  #rewind-note { font-size: 9px; }
  .panel { padding: 20px; }.panel h1 { font-size: 29px; }.panel h2 { font-size: 24px; }.panel p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }