[hidden] { display: none !important; }
.update-banner { position: sticky; top: 0; z-index: 50; flex: 0 0 auto; width: min(100%, 720px); margin: 0 auto; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: max(10px, env(safe-area-inset-top)) 12px 10px; border: 1px solid #b68c39; border-left: 5px solid #ffd166; background: #1e252c; color: #ffe09b; box-shadow: 0 5px 18px #0008; }
.update-banner strong { font: 700 11px/1.4 monospace; letter-spacing: 1px; }
.update-banner p { margin: 4px 0 0; color: #d1dae2; font: 10px/1.5 monospace; }
.update-banner button { flex: 0 0 auto; margin-left: auto; min-height: 44px; padding: 10px; color: #171106; background: #ffd166; border: 1px solid #ffe19a; border-bottom: 4px solid #947028; font: 800 11px monospace; }
.update-banner button:disabled { color: #bac3c9; background: #303942; border-color: #63717b; cursor: not-allowed; }
body:has(.update-banner:not([hidden])) { display: flex; flex-direction: column; }
body:has(.update-banner:not([hidden])) #viewport-container { width: 100%; flex: 1 1 auto; min-height: 0; height: auto; }
.home-screen { width: min(100% - 32px, 720px); margin: auto; padding: 36px clamp(18px, 5vw, 48px); border: 1px solid #51575c; border-top: 5px solid var(--hazard-amber); background: linear-gradient(130deg, #252a31, #101419 70%); box-shadow: 0 20px 70px #0009; }
.home-identity .eyebrow { color: #b0bdc8; font-size: 10px; letter-spacing: 1.7px; }
.home-identity h1 { font: 900 clamp(54px, 11vw, 94px)/.88 Impact, 'Arial Narrow', sans-serif; letter-spacing: 1px; margin: 28px 0 22px; color: #e8e9e1; }
.home-identity h1 span { color: var(--hazard-amber); }
.home-identity p { color: #b7c2cc; font-size: 14px; line-height: 1.7; }
.home-status { color: #d1dae2; font-size: 11px; line-height: 1.6; min-height: 2.7em; margin-top: 28px; }
.home-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.home-links .secondary-button { margin: 0; font-size: 10px; }
.home-links .secondary-button:last-child { grid-column: 1 / -1; }
.home-footnote { color: #a3b0bf; font-size: 10px; line-height: 1.6; margin: 24px 0 0; }
.home-screen button:disabled { opacity: .5; }
.help-button { color: #ffe09b; background: #2f2a1e; border: 1px solid #7c673a; min-height: 38px; padding: 8px; font-size: 10px; white-space: nowrap; }
.combat-instruction { margin: 6px 0 10px; font-size: 10px; line-height: 1.55; color: #d4c59c; }
.clock-label { color: #ffb0a5; font-size: 9px; letter-spacing: .7px; margin: 0 0 8px; }
.intent-panel > div:first-of-type { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; font-weight: 700; }
.intent-panel .intent-track { display: block; }
.intent-panel strong { white-space: nowrap; font-size: 12px; }
.stagger-window { font-size: 8px; line-height: 1.5; }
.audio-settings { margin: 22px 0; padding: 14px; border: 1px solid #465260; background: #141920; }
.audio-settings h3 { color: #ffe09b; font-size: 12px; letter-spacing: 1px; margin: 0 0 5px; }
.volume-label { display: flex; justify-content: space-between; color: #c9d4df; font-size: 10px; margin: 20px 0 8px; gap: 8px; }
.volume-label output { color: #ffcf67; font-weight: 700; }
.audio-settings input[type=range] { width: 100%; height: 30px; accent-color: var(--hazard-amber); cursor: pointer; }
.audio-settings select { width: 100%; min-height: 44px; color: #eef2f5; background: #222b35; border: 1px solid #5e6f80; padding: 8px; font-size: 12px; }
.audio-settings .secondary-button { font-size: 9px; }
.system-dialog .save-actions button { color: #e8edf2; }
.system-dialog .save-actions .primary-button { background: #ffd166; color: #171106; border-color: #ffe19a; }
.tutorial-dialog { max-width: 510px; }
.tutorial-dialog .modal-copy { color: #d1d9e2; font-size: 13px; line-height: 1.7; }
.tutorial-dialog .save-actions { align-items: stretch; }
.tutorial-dialog .save-actions button { margin-top: 0; }
.tutorial-practice, .tutorial-clock { border: 1px solid #635332; background: #171b20; padding: 14px; margin: 16px 0; }
.tutorial-practice h3, .tutorial-clock p { font-size: 11px; letter-spacing: 1px; color: #ffe09b; }
.tutorial-practice p { color: #ffd166; font: 12px/1.6 monospace; }
.tutorial-practice small { display: block; margin-top: 14px; color: #c2ccd7; line-height: 1.6; font-size: 11px; }
.tutorial-practice button:disabled { background: #302d24; color: #c3b187; border-color: #675b40; cursor: not-allowed; }
.tutorial-clock-bar { height: 48px; border: 1px solid #9e5146; background: #322025; position: relative; }
.tutorial-clock-fill { position: absolute; inset: 0 32% 0 0; background: #bb544b; }
.tutorial-clock-window { position: absolute; inset: 0 0 0 78%; display: grid; place-content: center; border-left: 2px dashed #ffe09b; background: #5d4c24; color: #ffe09b; font-size: 8px; text-align: center; padding: 3px; }
@media (max-width: 420px) { .home-screen { width: calc(100% - 20px); padding: 24px 18px; margin: 16px auto; } .home-identity h1 { font-size: 64px; } .home-identity p { font-size: 12px; } .system-controls { gap: 4px; } .help-button { font-size: 9px; min-height: 44px; padding: 5px; } .brand h1 { font-size: 27px; } .tutorial-dialog .modal-copy { font-size: 12px; } }
@media (max-height: 780px) { body:has(#home-screen:not([hidden])) { height: auto; min-height: 100dvh; overflow-y: auto; } }
/* Let short screens scroll whole panels instead of hiding the last map row. */
#viewport-container > .telemetry, #viewport-container > .action-dock { flex: 0 0 auto; }
#viewport-container > .staging { flex: 0 0 auto; min-height: 0; }
#viewport-container .stage-bay { min-height: 326px; flex: 0 0 326px; }
#viewport-container .stage-bay[data-mode=combat] { min-height: 284px; flex-basis: 284px; }
#viewport-container:has(.stage-bay[data-mode=combat]) .loadout-open { display: none; }
body:has(#home-screen:not([hidden])) { overflow-y: auto; }
body:has(#home-screen:not([hidden])) .outer-mark { display: none; }
.home-screen { margin: clamp(16px, 5vh, 52px) auto; }
#home-continue[hidden] + #home-new { color: #171106; background: var(--hazard-amber); border-color: #e0ab37; border-bottom-color: #8b630a; }
/* Keep the enemy clock and all four actions together on a normal phone. */
@media (min-height: 780px) and (max-height: 899px) {
  #viewport-container:has(.stage-bay[data-mode=combat]) .telemetry { min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  #viewport-container:has(.stage-bay[data-mode=combat]) .identity-row { margin-bottom: 5px; }
  #viewport-container .stage-bay[data-mode=combat] { min-height: 264px; flex-basis: 264px; }
  #viewport-container:has(.stage-bay[data-mode=combat]) .signal-panel { min-height: 38px; padding: 5px; }
  #viewport-container:has(.stage-bay[data-mode=combat]) .protocol { padding: 7px 8px; min-height: 72px; }
  #viewport-container:has(.stage-bay[data-mode=combat]) .protocol-name { margin: 3px 0; }
  #viewport-container:has(.stage-bay[data-mode=combat]) .protocol-state { margin-top: 3px; padding: 3px; }
}
@media (min-height: 780px) and (max-height: 899px) {
  #viewport-container:has(.stage-bay[data-mode=combat]) .player-cutaway { width: 62px; height: 74px; bottom: 14px; }
  #viewport-container:has(.stage-bay[data-mode=combat]) .player-cutaway > div { height: 60px; }
}