:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #0a0912; color: #f7f4ff; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; }
button { font: inherit; letter-spacing: 0; touch-action: manipulation; }
#game-shell { width: 100%; height: 100%; display: grid; place-items: center; }
#stage { position: relative; width: 100vw; height: 56.25vw; max-width: 100vw; max-height: 100vh; overflow: hidden; background: #12101e; }
@media (orientation: landscape) { #stage { width: 177.7778vh; height: 100vh; } }
#game-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: manipulation; }
#hud { position: absolute; z-index: 2; top: 14px; left: 16px; display: flex; gap: 8px; }
#hud[hidden], #actions[hidden], #cipher-controls[hidden], .panel[hidden] { display: none; }
#hud div { min-width: 72px; padding: 7px 9px; border: 1px solid rgba(196, 156, 255, .46); border-radius: 6px; background: rgba(15, 12, 29, .91); }
#hud span, .kicker { display: block; color: #c9aeff; font-size: 9px; font-weight: 800; text-transform: uppercase; }
#hud strong { display: block; margin-top: 2px; color: #fff1a8; font-size: 16px; font-variant-numeric: tabular-nums; }
#actions { position: absolute; z-index: 3; top: 14px; right: 16px; display: flex; gap: 7px; }
.small-button, .panel button, #cipher-controls button { min-height: 40px; border: 1px solid rgba(205, 175, 255, .6); border-radius: 6px; background: rgba(30, 23, 52, .94); color: #f7f4ff; font-weight: 750; cursor: pointer; }
.small-button { min-width: 40px; padding: 0 11px; font-size: 12px; }
.small-button:hover, .small-button:focus-visible, .panel button:hover, .panel button:focus-visible, #cipher-controls button:hover, #cipher-controls button:focus-visible { border-color: #fff1a8; outline: none; }
.small-button:active, .panel button:active, #cipher-controls button:active { transform: scale(.97); }
.panel { position: absolute; z-index: 4; top: 50%; left: 50%; width: min(400px, calc(100% - 32px)); transform: translate(-50%, -50%); padding: 25px; border: 1px solid rgba(205, 175, 255, .62); border-radius: 8px; background: rgba(15, 12, 29, .97); text-align: center; box-shadow: 0 16px 50px rgba(0, 0, 0, .44); }
.panel h1, .panel h2 { margin: 7px 0 0; letter-spacing: 0; line-height: 1; }.panel h1 { color: #fff0a6; font-size: 33px; }.panel h2 { color: #fff0a6; font-size: 28px; }
.panel p:not(.kicker) { margin: 12px 0; color: #d2c9e7; font-size: 14px; line-height: 1.45; }.kicker { color: #bfa6ff; }
.primary-button { min-width: 148px; padding: 0 16px; border-color: #f5cf59 !important; background: #efc94f !important; color: #171121 !important; }
.panel-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }.panel-actions button { padding: 0 13px; }
#cipher-controls { position: absolute; z-index: 3; right: 16px; bottom: 14px; width: 270px; display: grid; gap: 7px; justify-items: stretch; }
#signal-buttons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
#signal-buttons button { min-height: 39px; padding: 0; border-width: 2px; color: #15111e; font-weight: 900; }
#signal-buttons button[data-signal="0"] { background: #72dcff; } #signal-buttons button[data-signal="1"] { background: #f5cb63; } #signal-buttons button[data-signal="2"] { background: #f07fbe; } #signal-buttons button[data-signal="3"] { background: #7de6b9; } #signal-buttons button[data-signal="4"] { background: #a2a1ff; } #signal-buttons button[data-signal="5"] { background: #ff9771; }
.command-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 5px; }.command-row button { min-height: 43px; }.dock-button { border-color: #f5cf59 !important; background: #efc94f !important; color: #171121 !important; font-size: 14px; font-weight: 900 !important; }
#status-copy { min-height: 16px; margin: 0; color: #efe9ff; font-size: 11px; font-weight: 750; text-align: right; }
@media (max-width: 700px), (max-height: 500px) { #hud { top: 9px; left: 9px; gap: 4px; } #hud div { min-width: 55px; padding: 5px 6px; border-radius: 5px; } #hud span { font-size: 7px; } #hud strong { font-size: 12px; } #actions { top: 9px; right: 9px; gap: 5px; } .small-button { min-width: 31px; min-height: 31px; padding: 0 8px; font-size: 10px; } .panel { width: min(330px, calc(100% - 28px)); padding: 18px; } .panel h1 { font-size: 26px; } .panel h2 { font-size: 23px; } .panel p:not(.kicker) { margin: 8px 0; font-size: 12px; } #cipher-controls { right: 9px; bottom: 8px; width: 230px; gap: 4px; } #signal-buttons { gap: 3px; } #signal-buttons button { min-height: 33px; border-radius: 5px; font-size: 11px; } .command-row { gap: 3px; }.command-row button { min-height: 36px; font-size: 11px; } #status-copy { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }