:root { --ink: #071b22; --ink-soft: rgba(7, 27, 34, .72); --cream: #fff8e8; --paper: #eadfc8; --mint: #a7f3dc; --coral: #ff735d; --yellow: #ffd478; --line: rgba(255, 248, 232, .28); }
* { box-sizing: border-box; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; touch-action: none; background: #729da1; color: var(--cream); font-family: Inter, Arial, sans-serif; }
canvas { display: block; }
button { appearance: none; -webkit-appearance: none; font: inherit; }
#game { position: fixed; inset: 0; background: #88b4b4; }
#vignette, #speedHaze, #damageFlash, #sunBloom, #grain { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#vignette { background: linear-gradient(to bottom, rgba(5, 19, 24, .08), transparent 25%, transparent 67%, rgba(5, 15, 19, .35)), radial-gradient(ellipse at center, transparent 40%, rgba(4, 18, 23, .05) 68%, rgba(3, 13, 18, .42) 125%); }
#sunBloom { --sun-x: 17%; --sun-y: 24%; opacity: .9; background: radial-gradient(circle at var(--sun-x) var(--sun-y), rgba(255, 247, 214, .52), transparent 2.2%), radial-gradient(circle at var(--sun-x) var(--sun-y), rgba(255, 194, 112, .22), transparent 12%), radial-gradient(circle at var(--sun-x) var(--sun-y), rgba(255, 123, 73, .08), transparent 36%); mix-blend-mode: screen; will-change: opacity; transition: opacity .12s linear; }
#grain { opacity: .075; background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0, rgba(255, 255, 255, .022) 1px, transparent 1px, transparent 4px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .012) 0, rgba(0, 0, 0, .012) 1px, transparent 1px, transparent 5px); }
#speedHaze { opacity: 0; will-change: opacity; background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 4deg, rgba(255, 248, 225, .038) 4.2deg 4.5deg, transparent 4.7deg 9deg); mask-image: radial-gradient(circle, transparent 0 22%, black 78%, transparent 100%); -webkit-mask-image: radial-gradient(circle, transparent 0 22%, black 78%, transparent 100%); transition: opacity .1s linear; }
#damageFlash { opacity: 0; background: radial-gradient(circle, transparent 15%, rgba(255, 55, 50, .75)); transition: opacity .12s; }
/* Low quality removes the two widest dynamic full-screen paints first. */
body[data-render-quality="low"] #speedHaze { display: none; }
body[data-render-quality="low"] #sunBloom { mix-blend-mode: normal; opacity: .28 !important; }
body[data-render-quality="low"] .targetMarker, body[data-render-quality="low"] .supplyMarker, body[data-render-quality="low"] #objectiveMarker { filter: none; }
#hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; color: var(--cream); font-family: "SFMono-Regular", Consolas, monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.panel { position: absolute; width: 226px; padding: 4px 0 4px 16px; border-left: 2px solid var(--coral); filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .2)); }
.panel::before { content: ""; position: absolute; left: -2px; top: 0; width: 58px; height: 1px; background: var(--coral); }
#flightPanel { top: max(28px, env(safe-area-inset-top)); left: max(28px, env(safe-area-inset-left)); }
#telemetryPanel { top: max(28px, env(safe-area-inset-top)); right: max(28px, env(safe-area-inset-right)); padding: 4px 16px 4px 0; border-right: 2px solid var(--mint); border-left: 0; text-align: right; }
#telemetryPanel::before { right: -2px; left: auto; background: var(--mint); }
.label { color: rgba(255, 248, 232, .56); font-size: 9px; font-weight: 700; }
.readout { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 4px 0; }
.value { color: var(--cream); font-family: "Arial Narrow", Inter, sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -.035em; text-shadow: 0 2px 10px rgba(0, 0, 0, .24); }
.unit { color: var(--paper); font-size: 9px; }
.thin { height: 2px; margin: 8px 0 10px; overflow: hidden; background: rgba(255, 248, 232, .15); }
.thin > i { display: block; width: 0; height: 100%; background: var(--coral); box-shadow: 0 0 9px rgba(255, 115, 93, .45); }
#telemetryPanel .thin > i { background: var(--mint); }
.telemetryGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 8px 0 11px; }
.telemetryCell { min-width: 53px; }
.telemetryCell .value { display: block; margin-top: 2px; font-size: 18px; }
#headingReadout { position: absolute; top: max(25px, env(safe-area-inset-top)); left: 50%; min-width: 170px; padding: 4px 20px 7px; transform: translateX(-50%); border-bottom: 1px solid rgba(255, 248, 232, .45); color: rgba(255, 248, 232, .55); font-size: 9px; text-align: center; }
#headingReadout::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 1px; height: 6px; background: var(--coral); }
#heading { margin-left: 5px; color: var(--cream); font-size: 16px; font-weight: 900; }
#centerHud { position: absolute; left: 50%; top: 50%; width: 330px; height: 240px; transform: translate(-50%, -50%); }
#horizonClip { position: absolute; left: 50%; top: 50%; width: 270px; height: 180px; overflow: hidden; transform: translate(-50%, -50%); opacity: .82; }
#horizon { position: absolute; left: -100px; top: 89px; width: 470px; height: 1px; will-change: transform; background: var(--cream); box-shadow: 0 1px 4px rgba(0, 0, 0, .28); }
#horizon::before, #horizon::after { content: ""; position: absolute; top: -7px; width: 86px; height: 13px; border-top: 1px solid var(--cream); }
#horizon::before { right: 260px; transform: rotate(-7deg); }
#horizon::after { left: 260px; transform: rotate(7deg); }
.pitchMark { position: absolute; left: 50%; height: 1px; transform: translateX(-50%); background: rgba(255, 248, 232, .5); }
.pitchMark.small { width: 22px; }
.pitchMark.large { width: 43px; }
#reticle { position: absolute; left: 50%; top: 50%; width: 76px; height: 30px; transform: translate(-50%, -50%); border-bottom: 1px solid var(--cream); }
#reticle::before, #reticle::after { content: ""; position: absolute; bottom: -1px; width: 17px; height: 10px; border-top: 1px solid var(--cream); }
#reticle::before { left: -16px; transform: rotate(22deg); }
#reticle::after { right: -16px; transform: rotate(-22deg); }
#reticleDot { position: absolute; left: 50%; bottom: -3px; width: 6px; height: 6px; transform: translateX(-50%); border: 1px solid var(--coral); border-radius: 50%; background: var(--coral); box-shadow: 0 0 8px rgba(255, 115, 93, .55); }
#warning { position: absolute; left: 50%; top: calc(50% + 90px); transform: translateX(-50%); padding: 7px 12px; color: var(--cream); font-size: 13px; font-weight: 900; letter-spacing: .18em; white-space: nowrap; background: var(--coral); box-shadow: 0 4px 15px rgba(99, 22, 16, .25); opacity: 0; }
#warning.active { opacity: 1; }
#targetLayer { position: absolute; inset: 0; overflow: hidden; }
.targetMarker { --bearing: 0rad; position: absolute; left: 0; top: 0; width: 58px; height: 58px; color: var(--coral); transform: translate3d(-50%, -50%, 0); will-change: transform; filter: drop-shadow(0 2px 4px rgba(7,27,34,.8)); }
.targetBox { position: absolute; inset: 8px; border: 1px solid currentColor; clip-path: polygon(0 0, 31% 0, 31% 2px, 69% 2px, 69% 0, 100% 0, 100% 31%, calc(100% - 2px) 31%, calc(100% - 2px) 69%, 100% 69%, 100% 100%, 69% 100%, 69% calc(100% - 2px), 31% calc(100% - 2px), 31% 100%, 0 100%, 0 69%, 2px 69%, 2px 31%, 0 31%); }
.targetArrow { display: none; position: absolute; left: 18px; top: 22px; width: 24px; height: 14px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%, 27% 50%); transform: rotate(var(--bearing)); }
.targetData { position: absolute; left: 50%; top: 51px; transform: translateX(-50%); padding: 2px 5px; color: currentColor; background: rgba(7,27,34,.7); font-size: 8px; font-weight: 900; letter-spacing: .08em; white-space: nowrap; }
.targetMarker.offscreen .targetBox { display: none; }
.targetMarker.offscreen .targetArrow { display: block; }
.targetMarker.offscreen .targetData { top: 42px; }
.targetMarker.locked { color: var(--yellow); }
.targetMarker.locked .targetBox { inset: 4px; border-width: 2px; }
.supplyMarker { --bearing: 0rad; position: absolute; left: 0; top: 0; width: 54px; height: 54px; color: var(--mint); transform: translate3d(-50%, -50%, 0); will-change: transform; filter: drop-shadow(0 2px 5px rgba(7,27,34,.85)); }
.supplyGlyph { position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; transform: rotate(45deg); border: 2px solid currentColor; background: rgba(7,27,34,.38); }
.supplyGlyph::before, .supplyGlyph::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--yellow); transform: translate(-50%, -50%); }
.supplyGlyph::before { width: 14px; height: 3px; }
.supplyGlyph::after { width: 3px; height: 14px; }
.supplyArrow { display: none; position: absolute; left: 16px; top: 20px; width: 24px; height: 14px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%, 27% 50%); transform: rotate(var(--bearing)); }
.supplyData { position: absolute; left: 50%; top: 49px; transform: translateX(-50%); padding: 2px 5px; color: var(--yellow); background: rgba(7,27,34,.72); font-size: 8px; font-weight: 900; white-space: nowrap; }
.supplyMarker.offscreen .supplyGlyph { display: none; }
.supplyMarker.offscreen .supplyArrow { display: block; }
.supplyMarker.offscreen .supplyData { top: 40px; }
#combatStatus { position: absolute; left: 50%; top: max(72px, calc(env(safe-area-inset-top) + 58px)); transform: translateX(-50%); display: flex; gap: 15px; padding: 6px 13px; color: rgba(255,241,207,.66); background: rgba(7,27,34,.58); font-size: 8px; font-weight: 800; white-space: nowrap; clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%); }
#nuclearStatus[data-armed="true"] { color: var(--yellow); }
#nuclearStatus[data-live="true"] { color: var(--coral); }
#combatStatus b { color: var(--cream); font-size: 10px; }
#lockState { color: var(--coral); }
#lockState.locked { color: var(--yellow); }
#combatHint { position: absolute; left: 50%; top: max(105px, calc(env(safe-area-inset-top) + 91px)); transform: translateX(-50%); padding: 5px 10px; color: var(--mint); background: rgba(7,27,34,.62); font-size: 9px; font-weight: 900; letter-spacing: .1em; white-space: nowrap; }
#combatHint.locked { color: var(--yellow); }
#missionDirector { position: absolute; left: 50%; top: max(84px, calc(env(safe-area-inset-top) + 68px)); width: min(520px, 58vw); transform: translateX(-50%); color: rgba(255,241,207,.4); text-align: center; transition: transform .3s ease, opacity .3s ease; }
#missionDirector.changed { transform: translateX(-50%) translateY(4px); }
#missionDirector::before { content: attr(data-mission-label); display: block; margin-bottom: 5px; color: rgba(167,243,220,.68); font-size: 7px; font-weight: 900; letter-spacing: .25em; }
#missionPhases { display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; border-block: 1px solid rgba(255,241,207,.18); background: linear-gradient(90deg, transparent, rgba(7,27,34,.55) 12%, rgba(7,27,34,.55) 88%, transparent); }
.missionPhase { position: relative; padding: 6px 4px 5px; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.missionPhase + .missionPhase::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1px; transform: translate(-50%, -50%); background: rgba(255,241,207,.2); }
.missionPhase.complete { color: var(--mint); }
.missionPhase.complete::after { content: ""; display: inline-block; width: 4px; height: 4px; margin-left: 5px; transform: rotate(45deg) translateY(-1px); background: var(--mint); }
.missionPhase.active { color: var(--ink); background: var(--yellow); text-shadow: none; clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
#missionBrief { margin-top: 5px; color: var(--cream); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
#objectiveMarker { --bearing: 0rad; position: absolute; left: 0; top: 0; z-index: 2; width: 74px; height: 74px; color: var(--mint); transform: translate3d(-50%, -50%, 0); will-change: transform; filter: drop-shadow(0 2px 5px rgba(7,27,34,.8)); }
#objectiveMarker::before { content: ""; position: absolute; inset: 8px; border: 2px solid currentColor; border-radius: 50%; clip-path: polygon(0 0, 42% 0, 42% 10%, 58% 10%, 58% 0, 100% 0, 100% 42%, 90% 42%, 90% 58%, 100% 58%, 100% 100%, 58% 100%, 58% 90%, 42% 90%, 42% 100%, 0 100%, 0 58%, 10% 58%, 10% 42%, 0 42%); }
#objectiveMarker::after { content: ""; display: none; position: absolute; left: 25px; top: 27px; width: 28px; height: 18px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%, 25% 50%); transform: rotate(var(--bearing)); }
#objectiveMarker.offscreen::before { display: none; }
#objectiveMarker.offscreen::after { display: block; }
#objectiveData { position: absolute; left: 50%; top: 69px; transform: translateX(-50%); padding: 3px 6px; color: var(--mint); background: rgba(7,27,34,.76); font-size: 8px; font-weight: 900; white-space: nowrap; }
#styleStatus { position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%); min-width: 170px; padding: 7px 12px; color: var(--yellow); background: linear-gradient(90deg, transparent, rgba(7,27,34,.7) 20%, rgba(7,27,34,.7) 80%, transparent); border-bottom: 1px solid currentColor; font-size: 9px; font-weight: 900; text-align: center; }
#styleStatus b { color: var(--cream); font-size: 14px; }
#flightState { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); padding-top: 7px; border-top: 1px solid rgba(255, 248, 232, .3); color: rgba(255, 248, 232, .72); font-size: 9px; font-weight: 800; text-align: center; white-space: nowrap; }
#help { position: absolute; left: max(28px, env(safe-area-inset-left)); bottom: max(25px, env(safe-area-inset-bottom)); color: rgba(255, 248, 232, .55); font-size: 9px; line-height: 1.75; }
#help::before { content: "FLIGHT MANUAL  /  01"; display: block; margin-bottom: 7px; color: var(--yellow); font-weight: 900; }
#toast { position: fixed; left: 50%; top: 23%; z-index: 8; transform: translate(-50%, 8px); padding: 8px 13px; color: var(--ink); background: var(--yellow); font: 900 clamp(13px, 2vw, 19px) Consolas, monospace; letter-spacing: .12em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; padding: max(34px, env(safe-area-inset-top)) max(6vw, env(safe-area-inset-right)) max(34px, env(safe-area-inset-bottom)) max(7vw, env(safe-area-inset-left)); overflow: auto; background: linear-gradient(90deg, rgba(5, 22, 28, .96) 0%, rgba(5, 22, 28, .91) 38%, rgba(5, 22, 28, .47) 63%, rgba(5, 22, 28, .1) 100%); }
#overlay.hidden { display: none; }
.card { position: relative; width: min(680px, 92vw); padding-left: 25px; text-align: left; border-left: 3px solid var(--coral); }
.card::before { content: "EXPERIMENTAL FLIGHT PROGRAM"; display: block; margin-bottom: 24px; color: var(--mint); font: 800 10px Consolas, monospace; letter-spacing: .26em; }
.card::after { content: "SS–01"; position: absolute; left: -10px; top: -5px; transform: translateX(-100%) rotate(-90deg); transform-origin: right top; color: rgba(255, 248, 232, .45); font: 700 9px Consolas, monospace; letter-spacing: .2em; }
h1 { margin: 0; color: var(--cream); font-family: "Arial Narrow", Impact, sans-serif; font-size: clamp(58px, 10vw, 126px); font-style: italic; font-weight: 900; line-height: .75; letter-spacing: -.075em; text-transform: uppercase; text-shadow: 8px 10px 0 rgba(255, 115, 93, .18); }
.subtitle { margin: 20px 0 22px; color: var(--yellow); font: 800 11px Consolas, monospace; letter-spacing: .42em; }
#overlayText { max-width: 480px; margin: 0 0 25px; color: rgba(255, 248, 232, .7); font-size: 14px; line-height: 1.7; }
#missionSelect { max-width: 560px; margin: 10px 0 12px; }
.missionSelectHeader { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(167,243,220,.32); color: var(--mint); font: 900 8px Consolas, monospace; letter-spacing: .18em; }
#missionMenuDifficulty { color: rgba(255,241,207,.52); letter-spacing: .08em; }
#missionList { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 7px; }
.missionChoice { min-width: 0; padding: 9px 10px; border: 1px solid rgba(255,241,207,.24); color: rgba(255,241,207,.64); background: rgba(7,27,34,.5); font: 800 8px Consolas, monospace; letter-spacing: .08em; text-align: left; cursor: pointer; }
.missionChoice b { display: block; margin-bottom: 4px; color: var(--cream); font-size: 10px; }
.missionChoice.selected { border-color: var(--yellow); color: var(--ink); background: var(--yellow); box-shadow: 4px 4px 0 rgba(255,115,93,.3); }
.missionChoice.selected b { color: var(--ink); }
.missionMenuTitle { color: var(--yellow); font: italic 900 17px "Arial Narrow", Impact, sans-serif; letter-spacing: .06em; }
.missionMenuSubtitle { margin: 2px 0 6px; color: var(--coral); font: 900 8px Consolas, monospace; letter-spacing: .16em; }
.controls { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 0 18px; max-width: 570px; margin: 20px 0 31px; border-top: 1px solid rgba(255, 248, 232, .18); }
.control { min-height: 59px; padding: 11px 0 8px; border-bottom: 1px solid rgba(255, 248, 232, .18); color: rgba(255, 248, 232, .52); font: 10px Consolas, monospace; }
.control b { display: block; margin-bottom: 5px; color: var(--cream); font-size: 10px; }
#startButton { min-width: 220px; padding: 16px 25px; border: 0; border-radius: 2px; background: var(--coral); color: #fff9e9; font: 900 12px Consolas, monospace; letter-spacing: .19em; cursor: pointer; box-shadow: 7px 7px 0 rgba(255, 212, 120, .22); transition: transform .15s, background .15s, box-shadow .15s; }
#startButton:hover { transform: translate(-2px, -2px); background: #ff8c70; box-shadow: 10px 10px 0 rgba(255, 212, 120, .26); }
#mobileControls { display: none; position: fixed; inset: 0; z-index: 9; pointer-events: none; }
#stickZone { position: absolute; left: 0; bottom: 0; width: 58vw; height: 50vh; pointer-events: auto; touch-action: none; }
#stickBase { position: absolute; left: 92px; bottom: 42px; width: 126px; height: 126px; transform: translate(-50%, 0); border: 1px solid rgba(255, 248, 232, .42); border-radius: 50%; background: rgba(5, 27, 33, .3); box-shadow: inset 0 0 0 9px rgba(255, 248, 232, .035); opacity: .75; }
#stickBase.active { opacity: 1; }
#stickBase::before, #stickBase::after { content: ""; position: absolute; background: rgba(255, 248, 232, .18); }
#stickBase::before { left: 50%; top: 10px; bottom: 10px; width: 1px; }
#stickBase::after { left: 10px; right: 10px; top: 50%; height: 1px; }
#stickKnob { position: absolute; left: 50%; top: 50%; width: 49px; height: 49px; transform: translate(-50%, -50%); border: 2px solid var(--cream); border-radius: 50%; background: var(--coral); box-shadow: 0 5px 15px rgba(20, 20, 20, .25); will-change: transform; }
.mobileButton { position: absolute; min-width: 0; padding: 0; border: 1px solid rgba(255, 248, 232, .48); border-radius: 50%; background: rgba(5, 27, 33, .55); color: var(--cream); font: 800 10px Consolas, monospace; pointer-events: auto; touch-action: none; }
.mobileButton.pressed { color: var(--ink); background: var(--yellow); }
#gunButton { right: max(20px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); width: 84px; height: 84px; color: var(--coral); border-color: var(--coral); }
#missileButton { right: max(31px, env(safe-area-inset-right)); bottom: calc(max(22px, env(safe-area-inset-bottom)) + 98px); width: 60px; height: 60px; color: var(--yellow); border-color: var(--yellow); }
#bombButton { display: none; right: calc(max(20px, env(safe-area-inset-right)) + 82px); bottom: calc(max(22px, env(safe-area-inset-bottom)) + 174px); width: 66px; height: 66px; color: var(--ink); border: 2px solid var(--coral); background: var(--yellow); }
body.nuclear-armed #bombButton { display: block; }
#boostButton { right: calc(max(20px, env(safe-area-inset-right)) + 96px); bottom: max(22px, env(safe-area-inset-bottom)); width: 72px; height: 72px; color: var(--yellow); border-color: var(--yellow); }
#cameraButton { right: calc(max(20px, env(safe-area-inset-right)) + 105px); bottom: calc(max(22px, env(safe-area-inset-bottom)) + 84px); width: 54px; height: 54px; }
#throttleUp, #throttleDown { right: calc(max(20px, env(safe-area-inset-right)) + 174px); width: 50px; height: 50px; font-size: 20px; }
#throttleUp { bottom: calc(max(22px, env(safe-area-inset-bottom)) + 55px); }
#throttleDown { bottom: max(22px, env(safe-area-inset-bottom)); }
#flareButton { right: calc(max(20px, env(safe-area-inset-right)) + 170px); bottom: calc(max(22px, env(safe-area-inset-bottom)) + 118px); width: 58px; height: 58px; color: var(--mint); border-color: var(--mint); }
#posterButton { right: max(22px, env(safe-area-inset-right)); top: max(170px, calc(env(safe-area-inset-top) + 154px)); width: 52px; height: 52px; color: var(--cream); }
#posterPanel { display: none; position: fixed; z-index: 30; inset: 0; pointer-events: none; font: 800 10px Consolas, monospace; letter-spacing: .16em; }
#posterPanel::before, #posterPanel::after { content: ""; position: absolute; left: 4vw; right: 4vw; height: 1px; background: rgba(255,241,207,.6); }
#posterPanel::before { top: 5vh; } #posterPanel::after { bottom: 5vh; }
#posterTitle { position: absolute; left: 5vw; top: calc(5vh + 12px); color: var(--cream); font: italic 900 clamp(26px,5vw,64px) "Arial Narrow", Impact, sans-serif; letter-spacing: -.04em; text-shadow: 5px 5px 0 rgba(255,115,93,.32); }
#posterControls { position: absolute; right: 5vw; bottom: calc(5vh + 13px); display: flex; gap: 8px; pointer-events: auto; }
#posterControls button { padding: 9px 12px; border: 1px solid var(--mint); color: var(--cream); background: rgba(7,27,34,.72); cursor: pointer; }
body.poster-mode #hud, body.poster-mode #mobileControls, body.poster-mode #vignette, body.poster-mode #speedHaze, body.poster-mode #damageFlash { display: none; }
body.poster-mode #posterPanel { display: block; }
body.launch-mode #mobileControls { opacity: 0; visibility: hidden; }
body.launch-mode #help { opacity: .18; }
body.poster-mode[data-poster-frame="cinema"] #posterPanel { box-shadow: inset 0 10vh 0 rgba(7,27,34,.8), inset 0 -10vh 0 rgba(7,27,34,.8); }
#mountingCinematic { position: fixed; inset: 0; z-index: 13; display: none; pointer-events: none; box-shadow: inset 0 9vh 0 rgba(7,27,34,.92), inset 0 -9vh 0 rgba(7,27,34,.92); }
#mountingCinematic::before { content: "FIELD ARMAMENT CREW / SPECIAL ORDNANCE"; position: absolute; left: 7vw; top: 11.5vh; width: min(440px, 62vw); padding-top: 9px; border-top: 2px solid var(--mint); color: var(--yellow); font: 800 10px Consolas, monospace; letter-spacing: .2em; }
#mountingCaption { position: absolute; left: 7vw; bottom: 11.5vh; color: var(--cream); font: italic 900 clamp(17px,2.6vw,34px) "Arial Narrow", Impact, sans-serif; letter-spacing: .1em; }
#mountingProgress { position: absolute; left: 7vw; bottom: 10vh; width: min(430px, 62vw); height: 3px; background: rgba(255,241,207,.2); }
#mountingProgress > i { display: block; width: 0; height: 100%; background: var(--mint); }
body.loading-mode #mountingCinematic { display: block; }
body.loading-mode #hud, body.loading-mode #mobileControls { opacity: 0; visibility: hidden; }
#nuclearCinematic { --flash: 0; position: fixed; inset: 0; z-index: 14; display: none; pointer-events: none; background: rgba(255,241,207,var(--flash)); box-shadow: inset 0 0 0 rgba(7,27,34,0); transition: background .06s linear; }
#nuclearCinematic::before { content: "SPECIAL ORDNANCE / SUNRISE 01"; position: absolute; left: 7vw; top: 11.5vh; padding-top: 9px; width: min(360px, 54vw); border-top: 2px solid var(--coral); color: var(--yellow); font: 800 10px Consolas, monospace; letter-spacing: .24em; }
#nuclearCinematic::after { content: ""; position: absolute; inset: 10vh 4vw; border-inline: 1px solid rgba(255,241,207,.3); }
#nuclearCaption { position: absolute; left: 7vw; bottom: 11vh; padding-left: 18px; border-left: 6px solid var(--coral); color: var(--cream); font: italic 900 clamp(18px,3vw,38px) "Arial Narrow", Impact, sans-serif; letter-spacing: .12em; line-height: 1.05; text-shadow: 4px 4px 0 rgba(7,27,34,.5); white-space: nowrap; }
body.nuclear-cinematic #nuclearCinematic { display: block; box-shadow: inset 0 9vh 0 rgba(7,27,34,.94), inset 0 -9vh 0 rgba(7,27,34,.94); }
body.nuclear-cinematic #hud, body.nuclear-cinematic #mobileControls { display: none; }
@media (pointer: coarse), (max-width: 760px) { #mobileControls { display: block; } #help { display: none; } #flightPanel { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); transform: scale(.76); transform-origin: top left; } #telemetryPanel { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); transform: scale(.76); transform-origin: top right; } #headingReadout { top: max(10px, env(safe-area-inset-top)); transform: translateX(-50%) scale(.82); } #flightState { bottom: 17%; } #overlay { align-items: flex-start; background: rgba(5, 22, 28, .9); } .controls { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 430px) { #flightPanel, #telemetryPanel { transform: scale(.64); } #centerHud { transform: translate(-50%, -50%) scale(.84); } #combatStatus { gap: 7px; padding-inline: 9px; transform: translateX(-50%) scale(.86); } #combatHint { max-width: 88vw; overflow: hidden; text-overflow: ellipsis; transform: translateX(-50%) scale(.88); } .card { padding-left: 18px; } h1 { font-size: clamp(54px, 20vw, 84px); } #stickBase { left: 78px; bottom: 30px; width: 112px; height: 112px; } }
@media (max-height: 540px) { #flightPanel, #telemetryPanel { transform: scale(.62); } #flightState { display: none; } .card::before { margin-bottom: 12px; } .controls { margin: 10px 0 18px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }