:root {
  --hud: #8be7ff;
  --hud-soft: rgba(139, 231, 255, 0.48);
  --danger: #ff4b36;
  --gold: #ffc94e;
  --ink: #03050b;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #010209; color: #eef7ff; }
body { font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif; }
button { font: inherit; }

.game-shell { position: relative; width: 100vw; height: 100dvh; overflow: hidden; background: #02030a; isolation: isolate; user-select: none; }
.render-stage { position: absolute; inset: 0; z-index: 0; background-color: #02040d; background-image: radial-gradient(circle at 78% 34%, rgba(71, 55, 143, .24), transparent 31%), radial-gradient(circle at 75% 45%, #b8d5e8 0 1px, transparent 1.5px), radial-gradient(circle at 88% 22%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 64% 66%, #7cb8dd 0 1px, transparent 1.5px), radial-gradient(circle at 93% 72%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 56% 16%, #fff 0 1px, transparent 1.5px); }
.render-stage canvas { display: block; width: 100%; height: 100%; }
.space-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 50% 43%, transparent 42%, rgba(0, 0, 0, .28) 70%, rgba(0, 0, 0, .86) 112%), linear-gradient(180deg, rgba(22, 46, 73, .05), rgba(0, 0, 0, .2)); }
.canopy-glass { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .48; mix-blend-mode: screen; background: linear-gradient(112deg, transparent 0 25%, rgba(118, 176, 211, .035) 29%, transparent 34% 62%, rgba(255,255,255,.025) 66%, transparent 69%), radial-gradient(ellipse at 50% 0%, rgba(119, 182, 220, .11), transparent 38%); }

.sound-button { position: absolute; z-index: 20; left: 28px; bottom: 24px; color: rgba(193, 229, 239, .76); background: rgba(7, 18, 28, .54); border: 1px solid rgba(136, 220, 241, .3); padding: 9px 13px; font-size: 10px; font-weight: 800; letter-spacing: .18em; cursor: pointer; backdrop-filter: blur(8px); }
.sound-button:hover { color: white; border-color: var(--hud); }

.quest-vr-button {
  position: absolute !important;
  z-index: 40 !important;
  left: 50% !important;
  right: auto !important;
  bottom: 24px !important;
  top: auto !important;
  width: auto !important;
  min-width: 190px !important;
  height: 46px !important;
  transform: translateX(-50%) !important;
  padding: 0 24px !important;
  border: 1px solid rgba(139, 231, 255, .76) !important;
  border-radius: 4px !important;
  background: rgba(4, 20, 31, .88) !important;
  color: #bcefff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  opacity: 1 !important;
  box-shadow: inset 0 0 18px rgba(82, 205, 245, .12), 0 0 24px rgba(82, 205, 245, .16) !important;
  backdrop-filter: blur(10px);
}
.quest-vr-button:hover { color: #fff !important; border-color: #fff !important; }
.legal-line { position: absolute; z-index: 9; right: 20px; bottom: 16px; color: rgba(255,255,255,.25); font-size: 8px; letter-spacing: .08em; pointer-events: none; }

.mission-screen { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: linear-gradient(90deg, rgba(2,4,12,.94) 0%, rgba(2,4,12,.78) 43%, rgba(2,4,12,.16) 100%), radial-gradient(circle at 68% 42%, transparent, rgba(1,2,7,.72) 80%); }
.mission-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(141,222,255,.08) 3px 4px); mask-image: linear-gradient(90deg, black, transparent 65%); }
.mission-screen.victory { background: linear-gradient(90deg, rgba(3,15,25,.94), rgba(2,13,19,.64) 58%, rgba(2,4,12,.22)); }
.mission-screen.defeat { background: linear-gradient(90deg, rgba(25,4,5,.94), rgba(17,3,4,.68) 58%, rgba(2,4,12,.22)); }
.mission-content { position: relative; width: min(820px, calc(100vw - 64px)); max-height: calc(100dvh - 32px); margin-left: clamp(-120px, -8vw, 0px); padding: 44px 52px 38px; overflow-y: auto; border-left: 2px solid rgba(123,217,246,.63); background: linear-gradient(90deg, rgba(5, 12, 22, .82), rgba(4, 11, 21, .26)); box-shadow: -50px 0 120px rgba(0,0,0,.42); backdrop-filter: blur(8px); }
.eyebrow { margin: 0 0 19px; color: var(--hud); font-size: 10px; font-weight: 800; letter-spacing: .34em; }
.mission-content h1 { display: flex; align-items: baseline; gap: 18px; margin: 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(58px, 8.5vw, 114px); line-height: .82; letter-spacing: -.045em; text-transform: uppercase; color: #f2f4f4; text-shadow: 0 3px 0 #596168, 0 0 35px rgba(181,226,255,.16); }
.mission-content h1 span { align-self: flex-start; margin-top: 3px; padding: 5px 7px; border: 2px solid #f3c84c; color: #f3c84c; font-family: Arial, sans-serif; font-size: clamp(11px, 1.2vw, 17px); line-height: 1; letter-spacing: .09em; text-shadow: none; }
.mission-content h2 { margin: 16px 0 24px; color: #b9c6cb; font-size: clamp(20px, 2.4vw, 34px); font-weight: 300; letter-spacing: .28em; }
.briefing-copy { max-width: 630px; color: #c9d3d9; font-size: 14px; line-height: 1.9; letter-spacing: .04em; }
.mission-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 28px 0; background: rgba(117,213,244,.19); border: 1px solid rgba(117,213,244,.19); }
.mission-grid > div { padding: 13px 16px; background: rgba(4,12,20,.85); }
.mission-grid span { display: block; margin-bottom: 6px; color: rgba(139,231,255,.54); font-size: 8px; letter-spacing: .18em; }
.mission-grid strong { color: #dff8ff; font-size: 12px; letter-spacing: .11em; }
.final-score { width: min(630px, 100%); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin: 18px 0 0; padding: 13px 16px; color: #ffd56a; border: 1px solid rgba(255,203,74,.34); background: linear-gradient(90deg, rgba(48,28,2,.72), rgba(9,20,27,.62)); }
.final-score span { font-size: 8px; font-weight: 800; letter-spacing: .2em; }
.final-score strong { text-align: center; font-size: 27px; font-weight: 300; letter-spacing: .13em; text-shadow: 0 0 16px rgba(255,202,70,.42); }
.final-score b { font-size: 9px; letter-spacing: .15em; }
.score-history { width: min(630px, 100%); margin-top: 20px; border: 1px solid rgba(118,213,240,.2); background: rgba(3,13,22,.7); }
.score-history header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid rgba(118,213,240,.15); color: rgba(139,231,255,.5); font-size: 7px; letter-spacing: .18em; }
.score-history header strong { color: #bcefff; font-size: 8px; }
.score-history ol { list-style: none; margin: 0; padding: 0; }
.score-history li { display: grid; grid-template-columns: 30px 98px 1fr auto; align-items: center; gap: 10px; min-height: 28px; padding: 4px 12px; border-bottom: 1px solid rgba(118,213,240,.08); color: rgba(202,231,239,.6); font-size: 7px; letter-spacing: .1em; }
.score-history li:last-child { border-bottom: 0; }
.score-history li > b { color: #ffc94e; }
.score-history li > strong { color: #e7fbff; font-size: 12px; font-weight: 400; letter-spacing: .13em; }
.score-history time { color: rgba(184,217,227,.38); font-size: 7px; }
.score-history > p { margin: 0; padding: 14px 12px; color: rgba(139,231,255,.4); font-size: 8px; letter-spacing: .14em; }
.launch-button { display: flex; align-items: center; justify-content: space-between; width: min(360px, 100%); margin-top: 30px; padding: 17px 20px; border: 1px solid #e8b737; background: linear-gradient(90deg, #d89c1e, #ffc947); color: #090909; font-size: 12px; font-weight: 900; letter-spacing: .24em; cursor: pointer; box-shadow: 0 0 35px rgba(255,190,52,.18); transition: transform .2s, box-shadow .2s; }
.launch-button:hover { transform: translateX(5px); box-shadow: 0 0 46px rgba(255,190,52,.32); }
.launch-button:disabled { cursor: not-allowed; filter: grayscale(.8); opacity: .5; transform: none; box-shadow: none; }
.launch-button i { font-size: 24px; font-style: normal; }
.graphics-warning { max-width: 630px; margin: 18px 0 0; padding: 10px 13px; border-left: 2px solid #ff5a42; background: rgba(75, 9, 4, .42); color: #ffab9f; font-size: 11px; line-height: 1.7; letter-spacing: .04em; }
.control-strip { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 24px; color: rgba(202,222,229,.55); font-size: 9px; letter-spacing: .1em; }
kbd { padding: 4px 6px; border: 1px solid rgba(135,220,244,.27); background: rgba(11,24,34,.72); color: var(--hud); font: inherit; }

.hud-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; font-variant-numeric: tabular-nums; text-shadow: 0 0 8px rgba(77,204,255,.55); }
.hud-layer::before { content: ""; position: absolute; inset: 15px; border: 1px solid rgba(132,225,250,.12); clip-path: polygon(0 0, 17% 0, 17% 1px, 83% 1px, 83% 0, 100% 0, 100% 23%, calc(100% - 1px) 23%, calc(100% - 1px) 77%, 100% 77%, 100% 100%, 74% 100%, 74% calc(100% - 1px), 26% calc(100% - 1px), 26% 100%, 0 100%, 0 70%, 1px 70%, 1px 30%, 0 30%); }
.hud-top-left, .hud-top-right { position: absolute; top: 30px; display: flex; flex-direction: column; gap: 4px; color: var(--hud-soft); font-size: 9px; letter-spacing: .17em; }
.hud-top-left { left: 34px; }
.hud-top-right { right: 34px; align-items: flex-end; }
.hud-top-left strong, .hud-top-right strong { color: var(--hud); font-size: 11px; }
.hud-kicker { color: rgba(255,202,75,.7); }
.score-readout { color: rgba(170,225,239,.58); font-size: 7px; font-weight: 600; letter-spacing: .11em; }
.score-readout em { color: #ffe081; font-size: 12px; font-style: normal; font-weight: 400; text-shadow: 0 0 10px rgba(255,201,65,.52); }
.objective-bar { position: absolute; left: 50%; top: 26px; transform: translateX(-50%); width: min(440px, 42vw); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 8px 12px; border-top: 1px solid rgba(139,231,255,.45); border-bottom: 1px solid rgba(139,231,255,.16); background: linear-gradient(90deg, transparent, rgba(9,32,44,.42), transparent); color: var(--hud); font-size: 8px; letter-spacing: .13em; }
.objective-bar span { color: var(--gold); }
.objective-bar strong { text-align: center; font-size: 9px; }
.objective-bar b { font-size: 13px; }

.reticle { position: absolute; left: 50%; top: 47%; width: 116px; height: 116px; transform: translate(-50%, -50%); border: 1px solid rgba(141,229,251,.22); border-radius: 50%; transition: width .15s, height .15s, border-color .15s, transform .15s; }
.reticle::before, .reticle::after { content: ""; position: absolute; background: var(--hud); box-shadow: 0 0 8px var(--hud); opacity: .8; }
.reticle::before { left: 50%; top: 17px; bottom: 17px; width: 1px; }
.reticle::after { top: 50%; left: 17px; right: 17px; height: 1px; }
.reticle span { position: absolute; inset: 40px; border: 1px solid var(--hud); transform: rotate(45deg); }
.reticle i { position: absolute; width: 18px; height: 18px; border-color: var(--hud); border-style: solid; }
.reticle-n { top: -3px; left: calc(50% - 9px); border-width: 1px 0 0 1px; transform: rotate(45deg); }
.reticle-e { right: -3px; top: calc(50% - 9px); border-width: 1px 1px 0 0; transform: rotate(45deg); }
.reticle-s { bottom: -3px; left: calc(50% - 9px); border-width: 0 1px 1px 0; transform: rotate(45deg); }
.reticle-w { left: -3px; top: calc(50% - 9px); border-width: 0 0 1px 1px; transform: rotate(45deg); }
.reticle.is-locked { width: 88px; height: 88px; border-color: var(--danger); transform: translate(-50%, -50%) rotate(45deg); color: var(--danger); }
.reticle.is-locked::before, .reticle.is-locked::after { background: var(--danger); box-shadow: 0 0 9px var(--danger); }
.reticle.is-locked span, .reticle.is-locked i { border-color: var(--danger); }
.contact-layer { position: absolute; inset: 0; overflow: hidden; }
.enemy-contact, .capital-contact { position: absolute; width: 42px; height: 42px; transform: translate(-50%, -50%); color: #ff705d; filter: drop-shadow(0 0 5px rgba(255,52,35,.85)); }
.enemy-contact > i, .capital-contact > i { position: absolute; inset: 0; border: 1px solid currentColor; transform: rotate(45deg); }
.enemy-contact > i::before, .enemy-contact > i::after, .capital-contact > i::before, .capital-contact > i::after { content: ""; position: absolute; background: currentColor; }
.enemy-contact > i::before, .capital-contact > i::before { left: 50%; top: -7px; width: 1px; height: 55px; opacity: .45; }
.enemy-contact > i::after, .capital-contact > i::after { top: 50%; left: -7px; width: 55px; height: 1px; opacity: .45; }
.enemy-contact > span, .capital-contact > span { position: absolute; left: 49px; top: 4px; width: max-content; padding: 3px 5px; background: rgba(24,3,2,.62); font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.enemy-contact.at-edge { transform: translate(-50%, -50%) scale(.82); animation: edgePulse .8s ease-in-out infinite alternate; }
@keyframes edgePulse { to { opacity: .42; } }
.capital-contact { width: 74px; height: 54px; color: #ffc94e; filter: drop-shadow(0 0 7px rgba(255,190,44,.65)); }
.capital-contact > i { transform: none; border-width: 1px 0; }
.capital-contact > span { left: 50%; top: -18px; transform: translateX(-50%); }
.warning-flash { position: absolute; left: 50%; top: 59%; transform: translateX(-50%); padding: 7px 15px; border: 1px solid rgba(255,72,48,.5); color: #ff6a55; background: rgba(55,6,4,.46); font-size: 10px; font-weight: 900; letter-spacing: .22em; animation: blink .7s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }

.impact-fx { position: absolute; inset: 0; z-index: 20; overflow: hidden; pointer-events: none; opacity: 0; animation: impactFlash .62s ease-out both; }
.impact-fx.shield { background: radial-gradient(circle at 50% 47%, rgba(214,249,255,.7), rgba(70,195,255,.27) 26%, transparent 62%), linear-gradient(110deg, transparent 12%, rgba(111,224,255,.38) 49%, transparent 72%); box-shadow: inset 0 0 95px rgba(75,201,255,.8); }
.impact-fx.hull { background: radial-gradient(circle at 50% 47%, rgba(255,239,194,.72), rgba(255,82,34,.35) 27%, transparent 64%); box-shadow: inset 0 0 120px rgba(255,34,12,.9); }
.impact-fx::before { content: ""; position: absolute; inset: 7%; border: 2px solid currentColor; border-radius: 50%; opacity: .5; transform: scale(.2); animation: shieldRing .55s ease-out both; }
.impact-fx.shield::before { color: #9aeaff; }
.impact-fx.hull::before { color: #ff6145; border-radius: 4%; }
.impact-fx > i { position: absolute; left: 50%; top: 47%; width: 3px; height: 24vh; transform-origin: 50% 0; background: linear-gradient(#fff, #77dcff 12%, transparent 82%); box-shadow: 0 0 12px #9ceaff; }
.impact-fx.hull > i { background: linear-gradient(#fff6c9, #ff6a31 15%, transparent 82%); box-shadow: 0 0 14px #ff4926; }
.impact-fx > i:nth-child(1) { transform: rotate(24deg); }
.impact-fx > i:nth-child(2) { transform: rotate(111deg); }
.impact-fx > i:nth-child(3) { transform: rotate(203deg); }
.impact-fx > i:nth-child(4) { transform: rotate(302deg); }
@keyframes impactFlash { 0% { opacity: 1; filter: brightness(2.2); } 32% { opacity: .8; } 100% { opacity: 0; filter: brightness(1); } }
@keyframes shieldRing { 0% { transform: scale(.16); opacity: .9; } 100% { transform: scale(1.15); opacity: 0; } }

.near-miss-fx { position: absolute; inset: 0; z-index: 19; overflow: hidden; pointer-events: none; animation: nearMissFade .48s ease-out both; }
.near-miss-fx > i { position: absolute; top: -18%; width: 8px; height: 145%; border-radius: 50%; background: linear-gradient(transparent, rgba(220,255,226,.98) 35%, #52ff72 50%, transparent 68%); box-shadow: 0 0 13px #41ff64, 0 0 34px rgba(55,255,91,.8); transform: rotate(25deg); }
.near-miss-fx > i:first-child { left: 9%; animation: streakLeft .45s cubic-bezier(.18,.72,.2,1) both; }
.near-miss-fx > i:nth-child(2) { right: 12%; animation: streakRight .45s cubic-bezier(.18,.72,.2,1) both; }
.near-miss-fx > span { position: absolute; inset: 0; box-shadow: inset 0 0 70px rgba(58,255,92,.32); }
@keyframes streakLeft { from { transform: translate(-34vw,-30vh) rotate(25deg); } to { transform: translate(38vw,24vh) rotate(25deg); } }
@keyframes streakRight { from { transform: translate(32vw,-30vh) rotate(-24deg); } to { transform: translate(-38vw,24vh) rotate(-24deg); } }
@keyframes nearMissFade { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

.stage-transition { position: absolute; z-index: 18; left: 50%; top: 32%; width: min(680px, 84vw); transform: translate(-50%, -50%); display: grid; gap: 9px; padding: 17px 28px 19px; text-align: center; color: #a8efff; background: linear-gradient(90deg, transparent, rgba(4,25,38,.78) 17% 83%, transparent); border-top: 1px solid rgba(130,231,255,.52); border-bottom: 1px solid rgba(130,231,255,.24); animation: stageSignal 1.8s ease-out both; }
.stage-transition.is-clear { color: #ffe087; border-color: rgba(255,210,91,.58); background: linear-gradient(90deg, transparent, rgba(48,31,4,.78) 17% 83%, transparent); animation-duration: 2.7s; }
.stage-transition span { font-size: 7px; letter-spacing: .42em; opacity: .62; }
.stage-transition strong { font-size: clamp(11px, 1.4vw, 18px); letter-spacing: .16em; }
.stage-transition i { display: block; width: 56%; height: 2px; margin: 3px auto 0; background: currentColor; box-shadow: 0 0 12px currentColor; animation: stageBar 1.3s ease-out both; }
@keyframes stageSignal { 0% { opacity: 0; transform: translate(-50%,-50%) scaleX(.35); } 12%, 78% { opacity: 1; transform: translate(-50%,-50%) scaleX(1); } 100% { opacity: 0; } }
@keyframes stageBar { from { width: 0; } }

.score-pop { position: absolute; z-index: 17; left: 57%; top: 43%; display: flex; flex-direction: column; gap: 2px; color: #ffe88d; filter: drop-shadow(0 0 8px rgba(255,190,55,.7)); animation: scoreRise .9s ease-out both; }
.score-pop strong { font-size: 20px; font-weight: 400; letter-spacing: .08em; }
.score-pop span { color: rgba(213,245,255,.8); font-size: 7px; font-weight: 800; letter-spacing: .14em; }
@keyframes scoreRise { 0% { opacity: 0; transform: translateY(18px) scale(.75); } 18% { opacity: 1; transform: translateY(0) scale(1.08); } 72% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px) scale(.94); } }

.flight-data { position: absolute; top: 44%; display: flex; flex-direction: column; color: var(--hud-soft); font-size: 8px; letter-spacing: .16em; }
.flight-data strong { margin: 3px 0; color: var(--hud); font-size: 21px; font-weight: 300; }
.flight-data small { font-size: 7px; }
.flight-data-left { left: 42px; }
.flight-data-right { right: 42px; align-items: flex-end; }
.flight-data .laser-ready { color: #78ff9f; font-size: 13px; }
.systems-panel { position: absolute; left: 50%; bottom: 42px; width: min(350px, 38vw); transform: translateX(-50%); display: grid; gap: 7px; padding: 10px 13px; background: rgba(3,14,21,.3); border: 1px solid rgba(139,231,255,.12); }
.meter-row { display: grid; grid-template-columns: 52px 1fr 28px; align-items: center; gap: 9px; color: var(--hud); font-size: 8px; letter-spacing: .13em; }
.meter-row > i { height: 4px; background: rgba(101,213,245,.16); overflow: hidden; }
.meter-row > i > b { display: block; height: 100%; background: #67dbff; box-shadow: 0 0 8px #67dbff; transition: width .2s; }
.meter-row.hull > i > b { background: #ffb347; box-shadow: 0 0 8px #ffb347; }
.meter-row > strong { text-align: right; font-size: 9px; }
.capital-meter { position: absolute; left: 50%; top: 78px; width: min(390px, 44vw); transform: translateX(-50%); display: grid; grid-template-columns: auto 1fr 32px; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid rgba(255,198,62,.22); background: rgba(28,16,2,.42); color: #ffc94e; font-size: 7px; letter-spacing: .14em; }
.capital-meter > i { height: 4px; overflow: hidden; background: rgba(255,185,54,.15); }
.capital-meter > i > b { display: block; height: 100%; background: #ffb72d; box-shadow: 0 0 9px #ff9d1d; transition: width .18s; }
.capital-meter > strong { text-align: right; font-size: 8px; }
.radar-ui { position: absolute; right: 42px; bottom: 44px; width: 92px; height: 92px; border: 1px solid rgba(116,238,179,.5); border-radius: 50%; background: repeating-radial-gradient(circle, rgba(51,201,126,.06) 0 1px, transparent 1px 19px); box-shadow: inset 0 0 20px rgba(48,211,133,.08); overflow: hidden; }
.radar-ui::before, .radar-ui::after { content: ""; position: absolute; background: rgba(87,237,158,.28); }
.radar-ui::before { width: 1px; top: 0; bottom: 0; left: 50%; }
.radar-ui::after { height: 1px; left: 0; right: 0; top: 50%; }
.radar-sweep { position: absolute; inset: 0; background: conic-gradient(from 0deg, rgba(76,255,158,.28), transparent 20%); border-radius: 50%; animation: sweep 3s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.radar-ui .blip { position: absolute; width: 5px; height: 5px; transform: translate(-50%, -50%); border-radius: 50%; transition: left .1s linear, top .1s linear; z-index: 2; }
.radar-ui .blip.enemy { background: #ff624f; box-shadow: 0 0 7px #ff3d28; }
.radar-ui .blip.capital { width: 8px; height: 8px; border-radius: 1px; background: #ffc84b; box-shadow: 0 0 8px #ffae28; }
.radar-ui .blip.ally { background: #58d8ff; box-shadow: 0 0 6px #4acbff; }
.radar-player { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-50%, -50%); border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 8px solid #77ffa8; filter: drop-shadow(0 0 4px #65ef98); z-index: 3; }
.radar-ui b { position: absolute; left: 50%; bottom: 5px; width: 100%; transform: translateX(-50%); text-align: center; color: rgba(99,238,165,.55); font-size: 5px; letter-spacing: .05em; }

.touch-controls { display: none; }

@media (max-width: 900px) {
  .mission-content { margin-left: 0; }
  .mission-content h1 { font-size: clamp(54px, 12vw, 92px); }
  .objective-bar { top: 62px; width: min(530px, 72vw); }
  .hud-top-right { top: 105px; }
  .systems-panel { width: min(330px, 48vw); }
}

@media (pointer: coarse), (max-width: 720px) {
  .sound-button { left: 12px; bottom: 12px; }
  .legal-line { display: none; }
  .mission-content { width: calc(100vw - 28px); max-height: calc(100dvh - 24px); margin-left: 0; padding: 28px 23px 24px; }
  .mission-content h1 { display: block; font-size: clamp(54px, 17vw, 92px); }
  .mission-content h1 span { display: table; margin-bottom: 12px; }
  .mission-content h2 { font-size: 18px; letter-spacing: .16em; }
  .mission-grid { grid-template-columns: 1fr; }
  .mission-grid > div { display: flex; justify-content: space-between; align-items: center; }
  .mission-grid span { margin: 0; }
  .score-history li { grid-template-columns: 25px 86px 1fr; gap: 7px; padding-inline: 9px; }
  .score-history time { display: none; }
  .final-score { grid-template-columns: auto 1fr auto; gap: 8px; padding: 10px 11px; }
  .final-score strong { font-size: 20px; }
  .control-strip { display: none; }
  .briefing-copy { font-size: 12px; line-height: 1.7; }
  .launch-button { margin-top: 20px; }
  .objective-bar { top: 60px; width: 82vw; }
  .objective-bar strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hud-top-left { left: 14px; top: 14px; }
  .hud-top-right { right: 14px; top: 102px; }
  .flight-data { top: 37%; }
  .flight-data-left { left: 15px; }.flight-data-right { right: 15px; }
  .radar-ui { right: 14px; bottom: 114px; width: 72px; height: 72px; }
  .systems-panel { bottom: 18px; width: 46vw; padding: 7px 8px; }
  .meter-row { grid-template-columns: 39px 1fr 22px; gap: 5px; font-size: 6px; }
  .reticle { top: 45%; }
  .warning-flash { top: 58%; }
  .stage-transition { top: 28%; width: 92vw; padding: 13px 16px 15px; }
  .stage-transition strong { font-size: 10px; line-height: 1.55; }
  .score-pop { left: 52%; top: 40%; }
  .capital-meter { top: 98px; width: 64vw; }
  .enemy-contact > span { display: none; }
  .capital-contact > span { font-size: 6px; }
  .touch-controls { display: block; pointer-events: auto; }
  .virtual-stick { position: absolute; left: 12px; bottom: 50px; width: 172px; height: 172px; display: grid; place-items: center; touch-action: none; }
  .stick-base { position: relative; width: 116px; height: 116px; border: 1px solid rgba(133,229,250,.33); border-radius: 50%; background: radial-gradient(circle, rgba(47,130,160,.08) 0 31%, transparent 32%), repeating-radial-gradient(circle, transparent 0 22px, rgba(133,229,250,.11) 23px 24px); box-shadow: inset 0 0 28px rgba(62,183,219,.08); }
  .stick-base::before, .stick-base::after { content: ""; position: absolute; background: rgba(133,229,250,.18); }
  .stick-base::before { left: 50%; top: 8px; bottom: 8px; width: 1px; }
  .stick-base::after { top: 50%; left: 8px; right: 8px; height: 1px; }
  .stick-base > i { position: absolute; left: calc(50% - 23px); top: calc(50% - 23px); width: 46px; height: 46px; border: 1px solid rgba(154,237,255,.76); border-radius: 50%; background: rgba(14,54,70,.72); box-shadow: inset 0 0 13px rgba(99,210,241,.22), 0 0 15px rgba(65,197,235,.14); transition: transform .04s linear; }
  .virtual-stick.is-active .stick-base { border-color: rgba(154,237,255,.7); box-shadow: inset 0 0 35px rgba(62,183,219,.14), 0 0 20px rgba(62,183,219,.08); }
  .virtual-stick > span { position: absolute; bottom: 0; color: rgba(147,228,247,.5); font-size: 7px; font-weight: 800; letter-spacing: .18em; }
  .touch-fire { border: 1px solid rgba(133,229,250,.42); background: rgba(5,17,27,.54); color: rgba(167,236,250,.8); backdrop-filter: blur(4px); touch-action: none; }
  .touch-fire { position: absolute; right: 23px; bottom: 64px; width: 82px; height: 82px; border-radius: 50%; color: #ffbaaa; border-color: rgba(255,91,65,.66); font-size: 11px; font-weight: 900; letter-spacing: .16em; box-shadow: inset 0 0 18px rgba(255,48,25,.18), 0 0 18px rgba(255,48,25,.08); }
}

@media (max-height: 610px) and (orientation: landscape) {
  .mission-content { padding-top: 18px; padding-bottom: 16px; transform: none; }
  .mission-content h1 { font-size: 68px; }
  .mission-content h2 { margin: 10px 0 14px; }
  .mission-grid { margin: 15px 0; }
  .launch-button { margin-top: 12px; }
  .briefing-copy { margin: 8px 0; }
  .virtual-stick { bottom: 22px; transform: scale(.82); transform-origin: left bottom; }
  .touch-fire { bottom: 38px; transform: scale(.82); }
}

@media (prefers-reduced-motion: reduce) {
  .radar-sweep, .warning-flash, .impact-fx, .impact-fx::before, .near-miss-fx, .near-miss-fx > i, .stage-transition, .stage-transition i, .score-pop { animation: none; }
}

@media (max-width: 700px) { .quest-vr-button { bottom: 14px !important; min-width: 166px !important; height: 42px !important; font-size: 10px !important; } }