:root { color-scheme: dark; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #111427; }
* { box-sizing: border-box; }
html, body, #game-shell { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #111427; color: #f8f8ff; touch-action: manipulation; user-select: none; }
#game-shell { display: grid; place-items: center; }
#stage { position: relative; width: 100vw; height: 56.25vw; max-width: 100vw; max-height: 100vh; overflow: hidden; background: #111427; touch-action: none; }
@media (orientation: landscape) { #stage { width: 177.7778vh; height: 100vh; } }
#game-canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
#game-canvas:focus-visible { outline: 3px solid #7bf0d4; outline-offset: -3px; }
button { min-width: 44px; min-height: 44px; border: 1px solid #4d4b8c; border-radius: 6px; background: #22204a; color: #f8f8ff; font: inherit; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:hover, button:focus-visible { border-color: #7bf0d4; color: #7bf0d4; outline: none; }
button:active { background: #353275; transform: translateY(1px); }
#hud { position: absolute; inset: 18px 136px auto 22px; z-index: 3; display: flex; gap: 26px; pointer-events: none; }
#hud div { min-width: 74px; }
#hud span, #hud strong { display: block; letter-spacing: 0; }
#hud span { color: #bebde3; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; }
#hud strong { margin-top: 2px; color: #f8f8ff; font-size: 20px; line-height: 1; }
#energy-value { color: #ffd27b; }
#action-controls { position: absolute; top: 16px; right: 18px; z-index: 4; display: flex; gap: 8px; }
#action-controls button { font-size: 13px; }
.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 #7bf0d4; border-radius: 8px; background: rgba(17, 20, 39, 0.98); text-align: center; }
.panel.compact { width: min(340px, calc(100% - 32px)); }
.panel[hidden], #toast[hidden], .result-actions button[hidden] { display: none; }
.status-label { margin: 0; color: #7bf0d4; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 850; }
.panel h1, .panel h2 { margin: 8px 0; color: #f8f8ff; font-size: 30px; letter-spacing: 0; line-height: 1.1; }
.panel p { margin: 0; color: #d3d2ed; font-size: 14px; line-height: 1.5; }
.panel .controls-copy, .panel .best-result { margin-top: 8px; color: #ffd27b; }
.panel > .primary, .result-actions { margin-top: 20px; }
.panel > .primary { min-width: 178px; padding: 0 16px; }
.result-actions { display: flex; justify-content: center; gap: 10px; }
.result-actions button { min-width: 138px; padding: 0 14px; }
.result-actions #share-result-button { min-width: 44px; padding: 0; font-size: 13px; }
button.primary, #drop-button { border-color: #7bf0d4; background: #7bf0d4; color: #111427; }
#drop-button { position: absolute; right: 22px; bottom: 20px; z-index: 5; min-width: 152px; min-height: 56px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
#toast { position: absolute; left: 50%; bottom: 24px; z-index: 9; transform: translateX(-50%); margin: 0; padding: 9px 14px; border: 1px solid #ffd27b; border-radius: 5px; background: #2b2b55; color: #f8f8ff; 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"] #drop-button, body[data-game-state="over"] #action-controls, body[data-game-state="over"] #drop-button, body[data-game-state="paused"] #action-controls, body[data-game-state="paused"] #drop-button, body[data-game-state="complete"] #action-controls, body[data-game-state="complete"] #drop-button { visibility: hidden; opacity: 0; pointer-events: none; }
body[data-alert="true"] #energy-value { color: #ff8794; }
@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; }
  .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: 44px; padding: 0 8px; font-size: 9px; }
  .result-actions #share-result-button { min-width: 32px; padding: 0; font-size: 9px; }
  #drop-button { right: 10px; bottom: 9px; min-width: 126px; min-height: 48px; font-size: 10px; }
  #toast { bottom: 6px; 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; } }