:root {
  --bg: #03101b;
  --panel: rgba(6, 20, 33, .96);
  --panel-2: #081a2a;
  --line: #294965;
  --line-bright: #3c6585;
  --text: #eaf2ff;
  --muted: #879bb4;
  --amber: #ffb020;
  --cyan: #31ddfb;
  --green: #4ae9a1;
  --red: #ff6677;
  --font-display: "Rajdhani", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; }
body { margin: 0; min-width: 320px; color: var(--text); background: var(--bg); font-family: var(--font-display); }
button, input { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.arcade-nav {
  min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px clamp(20px, 5vw, 78px); border-bottom: 1px solid rgba(255,176,32,.23);
  background: rgba(3, 17, 28, .97); box-shadow: 0 12px 38px rgba(0,0,0,.22);
}
.arcade-brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font: 700 14px/1 var(--font-mono); letter-spacing: .19em; }
.arcade-brand img { width: 58px; height: 50px; object-fit: contain; filter: drop-shadow(0 0 9px rgba(49,221,251,.2)); }
.arcade-brand strong { color: var(--amber); }
.all-missions { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid rgba(255,176,32,.45); border-radius: 3px; color: var(--amber); text-decoration: none; font: 700 10px/1 var(--font-mono); letter-spacing: .09em; }
.all-missions:hover { background: rgba(255,176,32,.08); }

.app-stage {
  position: relative; min-height: calc(100vh - 82px); padding: clamp(28px, 4vw, 58px) clamp(10px, 3vw, 42px) 72px;
  background:
    radial-gradient(circle at 50% 0, rgba(28,151,188,.18), transparent 34rem),
    linear-gradient(rgba(29,78,102,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,78,102,.13) 1px, transparent 1px),
    linear-gradient(180deg, #061723, #020a11 76%);
  background-size: auto, 72px 72px, 72px 72px, auto;
}
.app { width: min(1720px, 100%); margin: 0 auto; }
.app-header { margin-bottom: 28px; text-align: center; }
.mission-id, .panel-kicker { margin: 0; color: var(--amber); font: 700 10px/1.2 var(--font-mono); letter-spacing: .15em; }
.app-header h1 { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 12px 0 9px; color: var(--cyan); font-size: clamp(30px, 4.3vw, 58px); line-height: 1; letter-spacing: .035em; text-transform: uppercase; }
.brand-hair { width: clamp(24px, 5vw, 86px); height: 1px; background: linear-gradient(90deg, transparent, var(--cyan)); opacity: .48; }
.brand-hair:last-child { transform: scaleX(-1); }
.subtitle { margin: 0; color: var(--muted); font: 700 11px/1.4 var(--font-mono); letter-spacing: .13em; }

.trainer-modes { width: min(760px, 100%); margin: 0 auto 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: #061522; }
.mode-btn { min-height: 58px; padding: 9px; border: 1px solid transparent; background: transparent; color: var(--muted); font: 700 11px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.mode-btn.active { color: #111000; border-color: #ffd372; background: linear-gradient(180deg, #ffd06b, #f3a016); box-shadow: 0 0 18px rgba(255,176,32,.25), inset 0 1px rgba(255,255,255,.42); }

.panel { border: 1px solid var(--line); background: var(--panel); box-shadow: inset 0 0 42px rgba(30,96,125,.04), 0 20px 55px rgba(0,0,0,.23); }
.training-grid { display: grid; grid-template-columns: minmax(520px, 1.42fr) minmax(310px, .82fr) minmax(330px, .86fr); grid-template-areas: "runway controls decision"; gap: 18px; align-items: stretch; }
.control-card { grid-area: controls; padding: 24px; }
.runway-card { grid-area: runway; min-width: 0; padding: 24px; }
.decision-card { grid-area: decision; padding: 24px; }
.training-grid.challenge-mode { grid-template-columns: minmax(520px, 1.4fr) minmax(420px, .9fr); grid-template-areas: "runway controls" "runway decision"; column-gap: 18px; row-gap: 0; align-items: start; }
.challenge-mode .runway-card { align-self: stretch; }
.challenge-mode .control-card { align-self: stretch; padding-bottom: 0; border-bottom: 0; box-shadow: inset 0 0 42px rgba(30,96,125,.04), 0 20px 55px rgba(0,0,0,.23); }
.challenge-mode .decision-card { align-self: stretch; padding-top: 18px; border-top: 0; box-shadow: inset 0 0 42px rgba(30,96,125,.04), 0 20px 55px rgba(0,0,0,.23); }
.challenge-mode .decision-card > .panel-heading { padding-top: 18px; border-top: 1px solid var(--line); }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 7px 0 0; font-size: clamp(24px, 2vw, 32px); line-height: 1.02; }
.secondary-btn { flex: none; min-height: 38px; padding: 0 12px; border: 1px solid #3a5875; background: #0a1b2b; color: var(--muted); font: 700 9px/1 var(--font-mono); letter-spacing: .09em; cursor: pointer; }
.secondary-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.new-btn { flex: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--amber); border-radius: 4px; background: linear-gradient(180deg, #ffd06b, var(--amber)); color: #171000; box-shadow: 0 0 16px rgba(255,176,32,.28); font: 700 9px/1 var(--font-mono); letter-spacing: .08em; cursor: pointer; }
.new-btn::after { content: "\2192"; margin-left: 8px; font-size: .8rem; }
.new-btn:hover { filter: brightness(1.08); box-shadow: 0 0 22px rgba(255,176,32,.4); }
.new-btn:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.control-stack { display: grid; gap: 13px; margin-top: 18px; }
.control-block { min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--line); background: #061522; }
.control-block legend { padding: 0 7px; color: #acbbcd; font: 700 9px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.segmented.two { grid-template-columns: repeat(2, 1fr); }
.segmented button { min-width: 0; min-height: 52px; padding: 8px 5px; border: 1px solid #35526f; background: #091a2a; color: var(--muted); cursor: pointer; }
.segmented button b, .segmented button small { display: block; }
.segmented button b { font: 700 9px/1.15 var(--font-mono); }
.segmented button small { margin-top: 5px; font-size: 11px; line-height: 1.1; }
.segmented button.active { border-color: var(--cyan); color: var(--cyan); background: rgba(49,221,251,.08); box-shadow: inset 3px 0 var(--cyan); }
.control-block.compact { display: grid; gap: 8px; }
.binary-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 55px; padding: 9px 10px; border: 1px solid #243f5a; background: #071827; }
.binary-row span { min-width: 0; }
.binary-row b, .binary-row small { display: block; }
.binary-row b { font-size: 14px; }
.binary-row small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.binary-toggle { flex: none; min-width: 64px; min-height: 34px; border: 1px solid var(--green); background: rgba(74,233,161,.09); color: var(--green); font: 700 9px/1 var(--font-mono); cursor: pointer; }
.binary-toggle.fail { border-color: var(--red); background: rgba(255,102,119,.09); color: var(--red); }
.reference-select { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.reference-select button { min-height: 46px; padding: 7px; border: 1px solid #35526f; background: #091a2a; color: var(--muted); font: 700 8px/1.2 var(--font-mono); cursor: pointer; }
.reference-select button.active { border-color: var(--amber); color: var(--amber); background: rgba(255,176,32,.08); }
.red-bars-control { display: flex; align-items: flex-start; gap: 10px; margin-top: 9px; padding: 10px; border: 1px solid rgba(255,102,119,.45); background: rgba(255,102,119,.05); cursor: pointer; }
.red-bars-control input { margin-top: 3px; accent-color: var(--red); }
.red-bars-control b, .red-bars-control small { display: block; }
.red-bars-control b { color: #ff9aa5; font-size: 13px; }
.red-bars-control small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.2; }

.runway-heading { align-items: center; }
.minimum-badge, .scope-badge { flex: none; padding: 10px 12px; border: 1px solid #32758a; color: var(--cyan); background: rgba(49,221,251,.06); font: 700 9px/1 var(--font-mono); letter-spacing: .08em; }
.runway-view { position: relative; min-height: 540px; margin-top: 18px; overflow: hidden; border: 1px solid #355572; background: linear-gradient(180deg, #091725 0 43%, #07121c 43% 100%); perspective: 620px; isolation: isolate; }
.cloud-layer { position: absolute; z-index: 7; inset: 0; opacity: .54; background: radial-gradient(ellipse at 45% 24%, rgba(207,220,230,.18), transparent 24%), radial-gradient(ellipse at 70% 34%, rgba(188,205,218,.13), transparent 28%), linear-gradient(180deg, rgba(117,136,151,.1), rgba(3,10,16,.24)); transition: opacity .25s; }
.runway-view.visibility-fail .cloud-layer { opacity: .9; backdrop-filter: blur(5px); }
.horizon-glow { position: absolute; z-index: 1; left: 0; right: 0; top: 33%; height: 2px; background: linear-gradient(90deg, transparent, rgba(49,221,251,.45), transparent); box-shadow: 0 0 32px rgba(49,221,251,.3); }
.runway-surface { position: absolute; z-index: 2; left: 13%; right: 13%; bottom: 35%; height: 37%; clip-path: polygon(40% 0,60% 0,100% 100%,0 100%); background: linear-gradient(90deg, #0d141b, #26313b 49%, #0e151c); border-top: 2px solid #71808e; opacity: .72; transition: opacity .2s, filter .2s; }
.runway-surface::before { content: ""; position: absolute; z-index: 7; left: 1%; right: 1%; top: calc(100% - 3px); height: 3px; opacity: .16; background: #f7fbff; box-shadow: 0 0 8px #fff; transition: opacity .2s; }
.runway-number { position: absolute; z-index: 7; left: 50%; top: 65%; transform: translateX(-50%); opacity: .2; color: #f6fbff; font: 700 30px/1 var(--font-mono); letter-spacing: .04em; transition: opacity .2s; }
.runway-centerline { position: absolute; left: 49.45%; width: 1.1%; opacity: .2; background: #e6eef4; transform-origin: top; transition: opacity .2s; }
.runway-centerline.c1 { top: 12%; height: 7%; }.runway-centerline.c2 { top: 29%; height: 9%; }.runway-centerline.c3 { top: 48%; height: 9%; }.runway-centerline.c4 { top: 60%; height: 4%; }
.threshold-markings { position: absolute; z-index: 6; left: 24%; right: 24%; top: 80%; height: 18%; display: flex; justify-content: center; gap: 2.7%; opacity: .16; transition: opacity .2s; }
.threshold-markings i { width: 4.5%; height: 100%; background: #f7fbff; box-shadow: 0 0 4px rgba(255,255,255,.45); }
.tdz-mark { position: absolute; opacity: .16; background: rgba(238,245,250,.95); transition: opacity .2s; }
.tdz-mark.left { clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); }
.tdz-mark.right { clip-path: polygon(0 0, 60% 0, 100% 100%, 0 100%); }
.tdz-mark.left.one, .tdz-mark.right.one { top: 49%; width: 6%; height: 15%; }
.tdz-mark.left.one { left: 36.5%; }.tdz-mark.right.one { right: 36.5%; }
.runway-centerline-lights { position: absolute; z-index: 5; left: 49.6%; top: 7%; width: 2px; height: 68%; opacity: .12; }
.runway-centerline-lights i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; }
.runway-centerline-lights i:nth-child(1) { top: 0; }.runway-centerline-lights i:nth-child(2) { top: 14%; }.runway-centerline-lights i:nth-child(3) { top: 29%; }.runway-centerline-lights i:nth-child(4) { top: 45%; }.runway-centerline-lights i:nth-child(5) { top: 62%; }.runway-centerline-lights i:nth-child(6) { top: 80%; }.runway-centerline-lights i:nth-child(7) { top: 98%; }
.tdz-lights { position: absolute; z-index: 5; inset: 0; opacity: .12; transition: opacity .2s; }
.tdz-lights i { position: absolute; width: 8%; height: 4px; background: repeating-linear-gradient(90deg, #fff 0 3px, transparent 3px 5px); filter: drop-shadow(0 0 3px #fff); }
.tdz-lights .left { transform: translateX(-100%); }.tdz-lights .right { transform: translateX(0); }
.tdz-lights .left.one { left: 45%; top: 31%; }.tdz-lights .right.one { left: 55%; top: 31%; }
.tdz-lights .left.two { left: 43%; top: 43%; }.tdz-lights .right.two { left: 57%; top: 43%; }
.tdz-lights .left.three { left: 41%; top: 55%; }.tdz-lights .right.three { left: 59%; top: 55%; }
.threshold-lights { position: absolute; z-index: 7; left: 13%; right: 13%; top: 64.6%; display: flex; justify-content: space-between; opacity: .14; transition: opacity .2s; }
.threshold-lights i { width: 5px; height: 5px; border-radius: 50%; background: #42f58d; box-shadow: 0 0 8px 2px rgba(66,245,141,.85); }
.approach-lights { position: absolute; z-index: 4; left: 50%; top: 65.5%; bottom: 2%; width: 220px; opacity: .12; transform: translateX(-50%); transition: opacity .2s; }
.approach-lights > i { position: absolute; left: 50%; height: 5px; background: repeating-linear-gradient(90deg, #fff 0 4px, transparent 4px 8px); filter: drop-shadow(0 0 5px #fff); transform: translateX(-50%); }
.approach-lights > i:nth-child(1) { top: 0; width: 28px; }.approach-lights > i:nth-child(2) { top: 13%; width: 34px; }.approach-lights > i:nth-child(3) { top: 27%; width: 42px; }.approach-lights > i:nth-child(4) { top: 43%; width: 51px; }.approach-lights > i:nth-child(5) { top: 61%; width: 60px; }.approach-lights > i:nth-child(6) { top: 80%; width: 70px; }
.als-crossbar { position: absolute; left: 50%; top: 42%; width: 150px; height: 5px; background: repeating-linear-gradient(90deg, #fff 0 4px, transparent 4px 9px); filter: drop-shadow(0 0 5px #fff); transform: translateX(-50%); }
.approach-lights em { position: absolute; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px rgba(255,255,255,.8); transform: translateX(-50%); }
.approach-lights .f1 { top: 58%; }.approach-lights .f2 { top: 71%; }.approach-lights .f3 { top: 84%; }.approach-lights .f4 { top: 97%; }
.red-terminating, .red-side { position: absolute; display: none; height: 5px; background: repeating-linear-gradient(90deg, var(--red) 0 4px, transparent 4px 8px); filter: drop-shadow(0 0 5px var(--red)); }
.red-terminating { left: 50%; top: 20%; width: 104px; transform: translateX(-50%); }
.red-side { width: 42px; }.red-side.left { right: 62%; }.red-side.right { left: 62%; }.red-side.r1 { top: 6%; }.red-side.r2 { top: 13%; }.red-side.r3 { top: 20%; }
.runway-view.red-bars .red-terminating, .runway-view.red-bars .red-side { display: block; }
.edge-lights { position: absolute; z-index: 4; left: 15%; right: 15%; top: 29%; bottom: 35%; opacity: .16; transition: opacity .2s; }
.edge-lights span { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #eefbff; box-shadow: 0 0 9px #dffaff; }
.edge-lights span:nth-child(1) { left: 37%; top: 5%; }.edge-lights span:nth-child(2) { right: 37%; top: 5%; }.edge-lights span:nth-child(3) { left: 26%; top: 28%; }.edge-lights span:nth-child(4) { right: 26%; top: 28%; }.edge-lights span:nth-child(5) { left: 13%; top: 58%; }.edge-lights span:nth-child(6) { right: 13%; top: 58%; }.edge-lights span:nth-child(7) { left: 0; top: 91%; }.edge-lights span:nth-child(8) { right: 0; top: 91%; }
.reil { position: absolute; z-index: 7; left: 18%; right: 18%; top: 63.8%; display: flex; justify-content: space-between; opacity: .12; transition: opacity .2s; }
.reil i { width: 9px; height: 9px; border-radius: 50%; background: white; box-shadow: 0 0 17px 6px white; animation: reil-flash 1.1s steps(1) infinite; }
@keyframes reil-flash { 0%, 45% { opacity: 1; } 46%, 100% { opacity: .28; } }
.vasi { position: absolute; z-index: 7; right: 5%; top: 46%; width: 52px; height: 82px; opacity: .12; transition: opacity .2s; }
.vasi i { position: absolute; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.vasi i:nth-child(1), .vasi i:nth-child(2) { top: 0; color: var(--red); background: var(--red); }.vasi i:nth-child(1) { left: 0; }.vasi i:nth-child(2) { left: 16px; }
.vasi i:nth-child(3), .vasi i:nth-child(4) { top: 58px; color: #fff; background: #fff; }.vasi i:nth-child(3) { left: 12px; }.vasi i:nth-child(4) { left: 32px; }
.reference-callout { position: absolute; z-index: 10; left: 18px; bottom: 18px; max-width: 58%; padding: 10px 12px; border-left: 3px solid var(--amber); background: rgba(3,14,23,.91); }
.reference-callout small, .reference-callout strong { display: block; }.reference-callout small { color: var(--muted); font: 700 7px/1 var(--font-mono); letter-spacing: .1em; }.reference-callout strong { margin-top: 5px; color: var(--amber); font: 700 10px/1.2 var(--font-mono); }
.visibility-mask { position: absolute; z-index: 8; inset: 0; opacity: 0; pointer-events: none; background: rgba(157,172,182,.34); backdrop-filter: blur(5px); transition: opacity .2s; }.runway-view.visibility-fail .visibility-mask { opacity: .72; }
.altitude-tape { position: absolute; z-index: 11; top: 18px; right: 18px; width: 88px; padding: 10px; border: 1px solid #4b6a85; background: rgba(3,14,23,.9); text-align: center; }
.altitude-tape span, .altitude-tape small { display: block; color: var(--muted); font: 700 7px/1 var(--font-mono); letter-spacing: .08em; }.altitude-tape i { display: block; height: 1px; margin: 7px 0; background: #395872; }.altitude-tape b { display: block; color: var(--cyan); font: 700 22px/1 var(--font-mono); }.altitude-tape small { margin-top: 5px; }
.runway-view.ref-als .approach-lights { opacity: 1; }
.runway-view.ref-threshold .runway-surface { opacity: .95; }.runway-view.ref-threshold .runway-surface::before { opacity: 1; }
.runway-view.ref-thresholdMarkings .runway-surface { opacity: .9; }.runway-view.ref-thresholdMarkings .threshold-markings { opacity: 1; }
.runway-view.ref-thresholdLights .threshold-lights { opacity: 1; }
.runway-view.ref-reil .reil { opacity: 1; }
.runway-view.ref-vasi .vasi { opacity: 1; }
.runway-view.ref-tdz .runway-surface { opacity: .9; }.runway-view.ref-tdz .tdz-mark { opacity: 1; }
.runway-view.ref-tdzLights .tdz-lights { opacity: 1; }
.runway-view.ref-runway .runway-surface { opacity: 1; }.runway-view.ref-runway .runway-number, .runway-view.ref-runway .runway-centerline { opacity: 1; }
.runway-view.ref-runwayLights .edge-lights, .runway-view.ref-runwayLights .runway-centerline-lights { opacity: 1; }
.runway-view.ref-none .runway-surface, .runway-view.ref-none .approach-lights, .runway-view.ref-none .threshold-lights, .runway-view.ref-none .edge-lights, .runway-view.ref-none .reil, .runway-view.ref-none .vasi { opacity: .06; }
.condition-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 12px; border: 1px solid var(--line); }
.condition-strip article { min-width: 0; padding: 11px 8px; border-right: 1px solid var(--line); text-align: center; }.condition-strip article:last-child { border-right: 0; }.condition-strip span, .condition-strip strong { display: block; }.condition-strip span { color: var(--muted); font: 700 7px/1 var(--font-mono); letter-spacing: .09em; }.condition-strip strong { margin-top: 6px; color: var(--cyan); font: 700 9px/1.15 var(--font-mono); overflow-wrap: anywhere; }

.decision-light { width: 13px; height: 13px; margin-top: 4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 15px var(--green); }
.decision-light.hold { background: var(--amber); box-shadow: 0 0 15px var(--amber); }.decision-light.missed { background: var(--red); box-shadow: 0 0 15px var(--red); }
.gate-stack { display: grid; gap: 9px; margin-top: 18px; }
.gate-stack article { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; min-height: 72px; padding: 11px; border: 1px solid rgba(74,233,161,.5); background: rgba(74,233,161,.055); }
.gate-stack article > span { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--green); color: var(--green); font: 700 9px/1 var(--font-mono); }
.gate-stack small, .gate-stack strong { display: block; }.gate-stack small { color: var(--muted); font: 700 7px/1.15 var(--font-mono); letter-spacing: .08em; }.gate-stack strong { margin-top: 6px; font: 700 10px/1.25 var(--font-mono); }.gate-stack i { color: var(--green); font: normal 700 8px/1 var(--font-mono); }
.gate-stack article.pending { border-color: #355572; background: rgba(53,85,114,.08); }
.gate-stack article.pending > span { border-color: #58748f; color: #8ea3b8; }
.gate-stack article.pending i { color: #8ea3b8; }
.gate-stack article.fail { border-color: rgba(255,102,119,.58); background: rgba(255,102,119,.065); }.gate-stack article.fail > span { border-color: var(--red); color: var(--red); }.gate-stack article.fail i { color: var(--red); }
.gate-stack article.limit { border-color: rgba(255,176,32,.58); background: rgba(255,176,32,.065); }.gate-stack article.limit > span { border-color: var(--amber); color: var(--amber); }.gate-stack article.limit i { color: var(--amber); }
.decision-result { margin-top: 17px; padding: 18px; border: 1px solid var(--green); border-left-width: 5px; background: linear-gradient(135deg, rgba(74,233,161,.11), rgba(74,233,161,.025)); }
.decision-result.hold { border-color: var(--amber); background: linear-gradient(135deg, rgba(255,176,32,.11), rgba(255,176,32,.025)); }.decision-result.missed { border-color: var(--red); background: linear-gradient(135deg, rgba(255,102,119,.11), rgba(255,102,119,.025)); }
.decision-result small { color: var(--muted); font: 700 8px/1 var(--font-mono); letter-spacing: .1em; }.decision-result strong { display: block; margin-top: 9px; color: var(--green); font: 700 17px/1.25 var(--font-mono); }.decision-result.hold strong { color: var(--amber); }.decision-result.missed strong { color: var(--red); }.decision-result p { margin: 11px 0 0; color: #b6c4d3; line-height: 1.4; }

.scenario-copy { margin-top: 18px; padding: 18px; border: 1px solid #8c621c; background: linear-gradient(135deg, rgba(255,176,32,.1), rgba(255,176,32,.02)); }
.scenario-copy > span { color: var(--amber); font: 700 8px/1 var(--font-mono); letter-spacing: .11em; }.scenario-copy p { margin: 11px 0 0; color: #b8c5d4; line-height: 1.4; }
.challenge-progress { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; border: 1px solid var(--line); }.challenge-progress span { padding: 12px 7px; border-right: 1px solid var(--line); text-align: center; }.challenge-progress span:last-child { border: 0; }.challenge-progress small, .challenge-progress strong { display: block; }.challenge-progress small { color: var(--muted); font: 700 7px/1 var(--font-mono); }.challenge-progress strong { margin-top: 6px; color: var(--cyan); font: 700 13px/1 var(--font-mono); }
.challenge-answer { margin-top: 17px; }.challenge-answer > p { margin: 0 0 10px; color: #b8c6d5; font-weight: 700; }.decision-options { display: grid; gap: 8px; }.challenge-mode .decision-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }.decision-options button { position: relative; min-height: 52px; padding: 8px; overflow: visible; border: 1px solid #385a77; background: #091a2a; color: var(--muted); font: 700 9px/1.2 var(--font-mono); letter-spacing: .04em; cursor: pointer; }.decision-options button.selected { border-color: var(--amber); color: var(--amber); background: rgba(255,176,32,.08); }.decision-options button.correct { border-color: var(--green); background: var(--green); color: #061810; }.decision-options button.incorrect { border-color: var(--red); background: rgba(255,102,119,.22); color: #fff; }
.answer-bubble { position: absolute; z-index: 20; bottom: calc(100% + 11px); left: 50%; min-width: max-content; padding: 7px 11px; border: 1px solid currentColor; border-radius: 999px; background: #07111d; font: 700 11px/1 var(--font-mono); letter-spacing: .09em; pointer-events: none; transform: translate(-50%, 8px) scale(.85); animation: answer-bubble-pop 1.9s ease-out forwards; }
.answer-bubble.correct { color: var(--green); box-shadow: 0 0 18px rgba(74,233,161,.34); }
.answer-bubble.incorrect { color: var(--red); box-shadow: 0 0 18px rgba(255,102,119,.34); }
.answer-bubble::after { content: ""; position: absolute; top: calc(100% - 3px); left: 50%; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; background: #07111d; transform: translateX(-50%) rotate(45deg); }
@keyframes answer-bubble-pop { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.85); } 14%, 72% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -7px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .answer-bubble { animation: none; transform: translate(-50%, 0); } }
.submit-btn { width: 100%; min-height: 54px; margin-top: 10px; border: 1px solid var(--amber); background: linear-gradient(180deg, #ffd06b, var(--amber)); color: #171000; font: 700 10px/1 var(--font-mono); letter-spacing: .09em; cursor: pointer; }.submit-btn:disabled { border-color: #30465c; background: #111d29; color: #52657a; cursor: not-allowed; }
.feedback { margin-top: 10px; padding: 14px; border-left: 4px solid var(--green); background: rgba(74,233,161,.07); }.feedback.wrong { border-color: var(--red); background: rgba(255,102,119,.07); }.feedback strong { display: block; color: var(--green); font: 700 11px/1 var(--font-mono); }.feedback.wrong strong { color: var(--red); }.feedback p { margin: 8px 0 0; color: #b4c3d3; line-height: 1.35; }

.references-panel, .review-panel { margin-top: 20px; padding: clamp(18px, 2.5vw, 32px); }
.references-heading { align-items: center; }
.references-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .7fr); gap: 18px; margin-top: 20px; }
.reference-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }.reference-grid button { min-height: 112px; padding: 13px 10px; border: 1px solid #31516d; background: #071827; text-align: left; cursor: pointer; }.reference-grid button b, .reference-grid button small { display: block; }.reference-grid button b { color: var(--text); font: 700 10px/1.25 var(--font-mono); }.reference-grid button small { margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.25; }.reference-grid button.active { border-color: var(--amber); background: rgba(255,176,32,.075); box-shadow: inset 4px 0 var(--amber); }.reference-grid button.active b { color: var(--amber); }
.reference-detail { padding: 20px; border: 1px solid #8d621c; background: linear-gradient(135deg, rgba(255,176,32,.1), rgba(255,176,32,.02)); }.reference-detail > small { color: var(--amber); font: 700 8px/1 var(--font-mono); letter-spacing: .1em; }.reference-detail > strong { display: block; margin: 12px 0 8px; font-size: 27px; line-height: 1; }.reference-detail > p { min-height: 72px; margin: 0 0 18px; color: #b5c3d2; line-height: 1.4; }.reference-detail > div { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(255,176,32,.25); }.reference-detail span { color: var(--muted); font: 700 8px/1.2 var(--font-mono); }.reference-detail b { font: 700 8px/1.2 var(--font-mono); text-align: right; }.reference-detail b.yes { color: var(--green); }.reference-detail b.conditional { color: var(--amber); }
.reference-rule { display: grid; grid-template-columns: auto 1fr; gap: 17px; align-items: center; margin-top: 16px; padding: 16px; border-left: 4px solid var(--red); background: rgba(255,102,119,.06); }.reference-rule b { color: var(--red); font: 700 10px/1 var(--font-mono); }.reference-rule span { color: #b9c7d6; line-height: 1.35; }

.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }.review-grid article { min-height: 176px; padding: 18px; border: 1px solid var(--line); background: #071725; }.review-grid article > span { color: var(--amber); font: 700 9px/1 var(--font-mono); }.review-grid strong { display: block; margin: 12px 0 8px; font-size: 20px; line-height: 1.1; }.review-grid p { margin: 0; color: var(--muted); line-height: 1.42; }.source-note { margin: 17px 0 0; color: #768ba4; font-size: 13px; line-height: 1.5; }.source-note strong { color: #a7b7ca; font: 700 9px/1 var(--font-mono); letter-spacing: .06em; }.source-note a { color: var(--cyan); }

@media (max-width: 1320px) {
  .training-grid { grid-template-columns: minmax(290px, .8fr) minmax(470px, 1.35fr); grid-template-areas: "runway runway" "controls decision"; }
  .runway-view { min-height: 500px; }
  .reference-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1050px) {
  .training-grid.challenge-mode { grid-template-columns: 1fr; grid-template-areas: "runway" "controls" "decision"; row-gap: 0; }
  .challenge-mode .control-card { margin-top: 12px; }
}

@media (max-width: 820px) {
  .arcade-nav { min-height: 76px; padding: 12px 14px; }.arcade-brand { font-size: 11px; gap: 8px; }.arcade-brand img { width: 47px; height: 42px; }.all-missions { padding: 0 10px; font-size: 8px; }
  .app-stage { padding: 24px 7px 52px; }.app-header h1 { gap: 8px; font-size: clamp(27px, 8vw, 36px); }.subtitle { font-size: 8px; }.brand-hair { width: 20px; }
  .trainer-modes { gap: 4px; padding: 5px; }.mode-btn { min-height: 51px; font-size: 8px; letter-spacing: .06em; }
  .training-grid { grid-template-columns: 1fr; grid-template-areas: "runway" "decision" "controls"; gap: 12px; }
  .control-card, .runway-card, .decision-card { padding: 14px; }.runway-card { position: relative; }.runway-view { min-height: 390px; margin-top: 12px; }.minimum-badge { padding: 8px; font-size: 7px; }
  .panel-heading h2 { font-size: 24px; }.condition-strip { grid-template-columns: repeat(2, 1fr); }.condition-strip article:nth-child(2) { border-right: 0; }.condition-strip article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .decision-card { position: relative; }.gate-stack { grid-template-columns: repeat(3, 1fr); gap: 5px; }.gate-stack article { min-height: 116px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 9px; }.gate-stack article i { margin-top: auto; }.gate-stack strong { font-size: 8px; }
  .references-layout { grid-template-columns: 1fr; }.reference-grid { grid-template-columns: repeat(2, 1fr); }.review-grid { grid-template-columns: 1fr; }.references-heading { align-items: flex-start; }.scope-badge { font-size: 7px; }
}

@media (max-width: 480px) {
  .arcade-brand span { display: none; }.all-missions { font-size: 7px; }.trainer-modes { grid-template-columns: 1fr; }.mode-btn { min-height: 42px; }
  .runway-heading { display: grid; grid-template-columns: 1fr auto; }.runway-view { min-height: 330px; }.reference-callout { left: 10px; bottom: 10px; max-width: 66%; }.altitude-tape { top: 10px; right: 10px; width: 72px; }.altitude-tape b { font-size: 18px; }
  .segmented { grid-template-columns: 1fr; }.segmented.two { grid-template-columns: repeat(2, 1fr); }.reference-select { grid-template-columns: 1fr; }
  .gate-stack { grid-template-columns: 1fr; }.gate-stack article { min-height: 62px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; }.gate-stack article i { margin-top: 0; }
  .reference-grid { grid-template-columns: 1fr; }.reference-grid button { min-height: 82px; }.reference-rule { grid-template-columns: 1fr; }
  .new-btn { padding: 0 9px; font-size: 7px; }.challenge-mode .decision-options { grid-template-columns: 1fr; }
}

/* Keep every readable interface label at or above the app's 11px type floor. */
.all-missions,
.mission-id,
.panel-kicker,
.subtitle,
.mode-btn,
.secondary-btn,
.new-btn,
.control-block legend,
.segmented button b,
.binary-toggle,
.reference-select button,
.minimum-badge,
.scope-badge,
.reference-callout small,
.reference-callout strong,
.altitude-tape span,
.altitude-tape small,
.condition-strip span,
.condition-strip strong,
.gate-stack article > span,
.gate-stack small,
.gate-stack strong,
.gate-stack i,
.decision-result small,
.scenario-copy > span,
.challenge-progress small,
.decision-options button,
.submit-btn,
.reference-grid button b,
.reference-detail > small,
.reference-detail span,
.reference-detail b,
.reference-rule b,
.review-grid article > span,
.source-note strong {
  font-size: 11px;
}

small {
  font-size: max(11px, .8em);
}