/* OP: Next Mission — briefing (loadout), phase interstitials (mission cut) and quiz. BUNK OPS · Season 01 (W3).
   Rules: only transform + opacity animate (plus one-shot SVG tick draws); chamfers live on non-focusable layers;
   the quiz is QUIET (no particles, no XP pops, at most the HUD .hot loop); briefing and phase cards run 0 loops.
   iOS Safari 15 safe: no :has, @property, color-mix, nesting, container queries; svh only behind @supports. */

/* ================================================================ BRIEFING · choose your loadout */
.brief { --bk: var(--signal); padding-bottom: 22px; }
.brief .panel-head { margin-bottom: 16px; }
.brief .panel-head > :first-child { min-width: 0; white-space: nowrap; }
@media (max-width: 399px) {
  .brief .panel-head { letter-spacing: .16em; }
  .brief .kc-l { display: none; }
}
.brief .panel-head .kit-count { /* 2 loadout slots that fill as you pick */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--dim);
  letter-spacing: .2em;
}
.kit-count i { display: block; width: 14px; height: 6px; margin-left: 2px; background: var(--steel); transform: skewX(-20deg); }
.kit-count[data-n="1"] i:first-of-type, .kit-count[data-n="2"] i { background: var(--signal); }
.brief .panel-head .kit-count[data-n="2"] { color: var(--intel); }
.kit-count[data-n="2"] i { background: var(--intel); }

.brief-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  grid-template-areas: "h m" "b b";
  align-items: center;
  column-gap: 12px;
  margin: 0 0 6px;
}
.brief-h {
  grid-area: h;
  margin: 0;
  font-size: var(--t-h2);
  line-height: .9;
  color: var(--bone);
}
.brief-h span { display: block; color: var(--signal); }
.brief-mascot { grid-area: m; position: relative; width: 64px; height: 64px; }
.brief-mascot::before { /* soft signal glow plate behind the mascot (static) */
  content: '';
  position: absolute;
  inset: -14px;
  background: var(--glow-signal);
  opacity: .35;
}
.brief-mascot img { position: relative; width: 64px; height: 64px; transform: scale(1.12); }
.brief-bubble {
  grid-area: b;
  justify-self: end;
  position: relative;
  max-width: 100%;
  margin: 10px 0 0;
  padding: 7px 12px 8px;
  background: var(--bone);
  color: var(--ink);
  font: 600 var(--t-small)/1.3 var(--f-body);
  border-radius: 2px;
  animation: br-bubble var(--d-ui) var(--e-impact) 220ms both;
  transform-origin: calc(100% - 26px) 0;
}
.brief-bubble::before { /* tail up to the mascot */
  content: '';
  position: absolute;
  top: -6px;
  right: 26px;
  width: 12px;
  height: 12px;
  background: var(--bone);
  transform: rotate(45deg);
}
@keyframes br-bubble { from { opacity: 0; transform: scale(.7); } }
.brief-sub { margin: 14px 0 20px; color: var(--dust); font-size: 16px; line-height: 1.5; max-width: 34em; }

.kit-group { margin: 0 0 18px; }
.kit-lbl {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font: 600 var(--t-label)/1.2 var(--f-hud);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dust);
}
.kit-lbl i {
  font-style: normal;
  padding: 3px 5px 2px;
  border: 1px solid var(--line-3);
  color: var(--bone);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.kit-lbl::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.brief .choice-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.brief .choice-cards.svcs > .kit:last-child:nth-child(odd) { grid-column: 1 / -1; } /* Home Team spans both */

/* loadout tile (button: no clip-path; brackets on ::before, sheen inside .kit-fx) */
.kit {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  min-height: 84px;
  padding: 12px 14px 13px;
  background: linear-gradient(180deg, rgba(237, 230, 211, .035), rgba(237, 230, 211, 0) 55%), var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  color: var(--bone);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--d-tap) var(--e-out);
}
.kit.st { min-height: 132px; padding-top: 14px; }
.kit:active { transform: scale(.985); }
.kit b {
  display: block;
  font: 700 16px/1.15 var(--f-hud);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.kit.st b { margin-top: 4px; font-size: 18px; }
.kit-sub { display: block; font-size: var(--t-small); line-height: 1.35; color: var(--dust); }
.kit-ic { display: block; color: var(--dust); line-height: 0; }
.kit-ic .ic { width: 32px; height: 32px; }
.kit.st .kit-ic .ic { width: 40px; height: 40px; }
.kit-ic .em { font-size: 28px; line-height: 1; }
.kit::before { /* .bk4 signal brackets, 4px outside the tile */
  content: '';
  position: absolute;
  inset: -4px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(var(--signal), var(--signal)) top left / 14px 2px no-repeat,
    linear-gradient(var(--signal), var(--signal)) top left / 2px 14px no-repeat,
    linear-gradient(var(--signal), var(--signal)) top right / 14px 2px no-repeat,
    linear-gradient(var(--signal), var(--signal)) top right / 2px 14px no-repeat,
    linear-gradient(var(--signal), var(--signal)) bottom left / 14px 2px no-repeat,
    linear-gradient(var(--signal), var(--signal)) bottom left / 2px 14px no-repeat,
    linear-gradient(var(--signal), var(--signal)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--signal), var(--signal)) bottom right / 2px 14px no-repeat;
}
.kit-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.kit-fx::after { /* one-shot light sweep on pick */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 70%;
  background: var(--sheen);
  transform: translateX(-120%);
}
.kit-tag {
  position: absolute;
  top: 9px;
  right: 9px;
  display: none;
  padding: 3px 6px 2px;
  background: var(--signal);
  color: var(--ink);
  font: 700 var(--t-micro)/1.1 var(--f-hud);
  letter-spacing: .16em;
  text-transform: uppercase;
}
@media (hover: hover) {
  .kit:hover { border-color: var(--line-3); }
  .kit:hover .kit-ic { color: var(--bone); }
}
.kit[aria-pressed="true"] {
  border-color: rgba(240, 86, 29, .6);
  background: linear-gradient(rgba(240, 86, 29, .10), rgba(240, 86, 29, .10)), linear-gradient(180deg, rgba(237, 230, 211, .035), rgba(237, 230, 211, 0) 55%), var(--panel);
}
.kit[aria-pressed="true"] .kit-ic { color: var(--signal); }
.kit[aria-pressed="true"] .kit-tag { display: block; animation: fx-slide-r var(--d-micro) var(--e-out) both; }
.kit[aria-pressed="true"]::before { opacity: 1; animation: kit-bk var(--d-micro) var(--e-impact) both; }
.kit.hit .kit-fx::after { animation: fx-sheen 380ms var(--e-out) 1; }
@keyframes kit-bk { from { opacity: 0; transform: scale(1.07); } }

.kit-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  font: 400 13px/1.45 var(--f-body);
  color: var(--dust);
}
.kit-hint .ic { width: 14px; height: 14px; margin-top: 2px; color: var(--intel); }

/* mission route (desktop only): the five ops this loadout deploys on, linked by a route line */
.brief-ops { display: none; }
.bo-h {
  display: block;
  margin: 0 0 10px;
  font: 600 var(--t-label)/1.3 var(--f-hud);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--intel);
}
.brief-ops ol { position: relative; display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.brief-ops ol::before { /* the route line between the patches */
  content: '';
  position: absolute;
  left: 19.5px;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: repeating-linear-gradient(180deg, var(--line-3) 0 4px, rgba(0, 0, 0, 0) 4px 8px);
}
.brief-ops li {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  animation: ph-txt 240ms var(--e-out) both;
}
.brief-ops li:nth-child(1) { animation-delay: 140ms; }
.brief-ops li:nth-child(2) { animation-delay: 190ms; }
.brief-ops li:nth-child(3) { animation-delay: 240ms; }
.brief-ops li:nth-child(4) { animation-delay: 290ms; }
.brief-ops li:nth-child(5) { animation-delay: 340ms; }
.bo-art { position: relative; width: 40px; height: 40px; }
.bo-art img { width: 40px; height: 40px; filter: grayscale(.85) brightness(.75); opacity: .8; }
.brief-ops li:first-child .bo-art img { filter: none; opacity: 1; }
.brief-ops li:first-child .bo-art::after { /* first deployment: signal ring */
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid var(--signal);
  border-radius: 50%;
}
.bo-t { min-width: 0; }
.bo-t b { display: block; font: 700 14px/1.2 var(--f-hud); letter-spacing: .08em; text-transform: uppercase; color: var(--bone); }
.brief-ops li:first-child .bo-t b { color: var(--signal-text); }
.bo-t i { display: block; font: 400 13px/1.35 var(--f-body); color: var(--dust); }
.bo-n { font: 600 var(--t-label)/1 var(--f-hud); letter-spacing: .14em; color: var(--dim); font-variant-numeric: tabular-nums; }
.bo-f {
  margin: 12px 0 0;
  padding: 10px 0 0;
  border-top: 1px dashed var(--line-2);
  font: 600 var(--t-label)/1.3 var(--f-hud);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dust);
}
.bo-f b { color: var(--bone); font-weight: 700; }

/* desktop: a two-column command sheet (identity + route left, kit right) so DEPLOY sits above the fold */
@media (min-width: 1024px) {
  .brief {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: 44px;
    margin-left: calc(50% - min(480px, 50vw - 32px));
    margin-right: calc(50% - min(480px, 50vw - 32px));
    padding: 22px 28px 28px;
  }
  .brief > .panel-head { grid-column: 1 / -1; grid-row: 1; margin-bottom: 18px; }
  .brief > .brief-top { grid-column: 1; grid-row: 2; }
  .brief > .brief-sub { grid-column: 1; grid-row: 3; margin: 12px 0 18px; }
  .brief > .brief-ops { display: block; grid-column: 1; grid-row: 4 / 6; align-self: end; }
  .brief > .kg-st { display: flex; flex-direction: column; grid-column: 2; grid-row: 2 / 4; margin-bottom: 22px; }
  .brief > .kg-st > .choice-cards { flex: 1 1 auto; }
  .brief > .kg-svc { grid-column: 2; grid-row: 4; margin-bottom: 0; }
  .brief > #begin { grid-column: 2; grid-row: 5; align-self: end; }
  .brief .choice-cards.svcs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brief .choice-cards.svcs > .kit:last-child:nth-child(odd) { grid-column: auto / span 2; }
  .brief + .q-nav {
    margin-left: calc(50% - min(480px, 50vw - 32px));
    margin-right: calc(50% - min(480px, 50vw - 32px));
  }
}

/* #begin: hazard-dim bar while disabled (label from data-off), flips to orange DEPLOY once both picks are in */
#begin { margin-top: 22px; }
#begin:disabled:not(.busy) { color: transparent; }
#begin:disabled:not(.busy)::after {
  content: attr(data-off);
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  width: 100%;
  background: none;
  transform: none;
  color: var(--dust);
  font: 700 15px/1 var(--f-hud);
  letter-spacing: .16em;
  text-transform: uppercase;
}
#begin:disabled:not(.busy)::before { background: var(--hazard-dim), var(--raised); box-shadow: inset 0 0 0 1px var(--line-2); }
#begin.arm { animation: br-flip 220ms var(--e-out) both; }
@keyframes br-flip { from { opacity: .4; transform: perspective(600px) rotateX(90deg); } }
#begin.busy { color: var(--ink); }
#begin.busy::before { background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 45%), var(--signal); }
#begin.busy::after { /* moving ink stripes while the questions load (stops when .busy goes) */
  display: block;
  left: 0;
  width: 200%;
  opacity: .14;
  background: repeating-linear-gradient(-45deg, var(--ink) 0 8px, rgba(10, 13, 11, 0) 8px 16px);
  transform: none;
  animation: fx-hazard 600ms linear infinite;
}

/* ================================================================ PHASE INTERSTITIAL · mission cut */
/* per-op identity (Tekong blue, Posting olive, Book-Out rust, Countdown purple, Next Mission orange): a hue for the
   tinted art and an AA-safe light ink (>= 7:1 on --void) for 'OP', the top rule and the objective labels */
.ph-cine, .q-rail { --ph-hue: 0deg; --ph-ink: var(--dust); }
.ph-cine[data-ph="1"], .q-rail[data-ph="1"] { --ph-hue: 170deg; --ph-ink: #8EC3DC; }
.ph-cine[data-ph="2"], .q-rail[data-ph="2"] { --ph-hue: 20deg; --ph-ink: #CDBB7E; }
.ph-cine[data-ph="3"], .q-rail[data-ph="3"] { --ph-hue: -10deg; --ph-ink: #E39C82; }
.ph-cine[data-ph="4"], .q-rail[data-ph="4"] { --ph-hue: 230deg; --ph-ink: #B9A3EA; }
.ph-cine[data-ph="5"], .q-rail[data-ph="5"] { --ph-hue: -5deg; --ph-ink: var(--signal-text); }

.ph-cine {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* #go sits just above the bottom letterbox bar on a phone */
  min-height: calc(100vh - var(--topbar-h) - var(--safe-t) - 20px - 8vh);
  padding: 4px 0 8px;
}
@supports (height: 100svh) {
  .ph-cine { min-height: calc(100svh - var(--topbar-h) - var(--safe-t) - 20px - 8svh); }
}
.ph-art { /* full-bleed art layer (html clips overflow-x), so the watermark never shows a hard edge mid-screen */
  position: absolute;
  top: -20px;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.ph-art::before { /* the op's colour loads into the HUD edge: a 3px rule under the topbar */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--scene), var(--ph-ink) 50%, var(--scene));
  opacity: .85;
  transform-origin: 50% 50%;
  animation: fx-bar 520ms var(--e-gauge) 120ms both;
}
.ph-glow {
  position: absolute;
  left: 50%;
  top: 12%;
  width: 150%;
  height: 70%;
  margin-left: -75%;
  background: radial-gradient(closest-side, var(--scene), rgba(0, 0, 0, 0));
  opacity: .5;
}
.ph-mark { /* the objective: this op's mission patch, watermarked behind the title (earned on the next card) */
  position: absolute;
  left: calc(50% - 14vw);
  top: 30%;
  width: min(86vw, 420px);
  height: auto;
  opacity: .2;
  filter: grayscale(1) sepia(.7) hue-rotate(var(--ph-hue)) saturate(1.6) contrast(1.1);
  animation: ph-mark 900ms var(--e-out) 80ms both;
}
@keyframes ph-mark { from { opacity: 0; transform: scale(1.12) rotate(-6deg); } }
.ph-cine > :not(.ph-art) { position: relative; }

/* (a) mission complete row */
.ph-earned {
  --bk: var(--confirm);
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 12px 0 18px;
  padding: 14px 14px 10px 10px;
  background: linear-gradient(90deg, rgba(74, 222, 128, .07), rgba(74, 222, 128, 0) 70%), rgba(13, 18, 16, .78);
  border: 1px solid rgba(74, 222, 128, .22);
  animation: ph-row 280ms var(--e-out) 60ms both;
}
@keyframes ph-row { from { opacity: 0; transform: translateX(-16px); } }
.ph-patch { position: relative; width: 72px; height: 72px; }
.ph-patch::before { /* static confirm glow behind the patch */
  content: '';
  position: absolute;
  inset: -16px;
  background: radial-gradient(closest-side, rgba(74, 222, 128, .38), rgba(74, 222, 128, 0));
  animation: ph-glow-in 300ms var(--e-out) 160ms both;
}
@keyframes ph-glow-in { from { opacity: 0; } to { opacity: 1; } }
.ph-patch img { position: relative; width: 72px; height: 72px; animation: fx-pop var(--d-pop) var(--e-impact) 120ms both; }
.ph-patch::after { /* impact ring */
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid var(--confirm);
  border-radius: 50%;
  opacity: 0;
  animation: fx-ring 600ms var(--e-out) 140ms both;
}
.ph-earned-t { min-width: 0; }
.ph-complete {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 14px/1.2 var(--f-hud);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--confirm);
  animation: ph-txt 240ms var(--e-out) 200ms both;
}
.ph-complete .ic { flex: none; }
.ph-complete .ic { width: 16px; height: 16px; stroke-width: 2.5; }
.ph-done { margin: 2px 0 5px; font-size: 15px; line-height: 1.35; color: var(--bone); animation: ph-txt 240ms var(--e-out) 260ms both; }
@keyframes ph-txt { from { opacity: 0; transform: translateX(-8px); } }
.ph-bonus {
  font: 700 14px/1.2 var(--f-hud);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tier-rare);
  animation: ph-txt 200ms var(--e-out) 200ms both;
}
.ph-num { display: inline-grid; font-weight: 700; font-variant-numeric: tabular-nums; }
.ph-num i { grid-area: 1 / 1; font-style: normal; text-align: right; }
.ph-num .fin { visibility: hidden; }
.fx-done .ph-num .cnt { visibility: hidden; }
.fx-done .ph-num .fin { visibility: visible; }

.ph-lvl {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  color: var(--ink);
  font: 700 var(--t-label)/1 var(--f-hud);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: fx-slide-r var(--d-micro) var(--e-out) 500ms both;
}
.ph-lvl::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--intel); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }
.ph-file { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 2px 0 18px; }
.ph-file .kicker { margin: 0; color: var(--dust); animation: ph-txt 240ms var(--e-out) 120ms both; }
.ph-file .ph-lvl { animation-delay: 160ms; }

/* (b) + (c) mission count and chevrons */
.ph-which { display: grid; gap: 10px; justify-items: start; margin: 0 0 14px; }
.ph-which .which { animation: ph-txt 240ms var(--e-out) 180ms both; }
.ph-which .phase-dots { animation: ph-txt 240ms var(--e-out) 220ms both; }
/* LVL chip: a level-up stamp on the mission-complete box's top border (no extra row) */
.ph-earned { position: relative; }
.ph-earned > .ph-lvl { position: absolute; top: -12px; right: 12px; z-index: 3; }
.ph-which .which {
  font: 600 var(--t-hud)/1.2 var(--f-hud);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--intel);
  font-variant-numeric: tabular-nums;
}
.ph-cine .phase-dots { display: flex; gap: 6px; padding: 0 4px; }
.ph-cine .phase-dots i { position: relative; display: block; width: 36px; height: 8px; overflow: hidden; background: var(--steel); transform: skewX(-20deg); }
.ph-cine .phase-dots i.done { background: var(--bone); }
.ph-cine .phase-dots i.just { background: var(--steel); }
.ph-cine .phase-dots i.just::after { /* the op you just cleared charges up */
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bone);
  transform-origin: 0 50%;
  animation: fx-bar 360ms var(--e-gauge) 300ms both;
}
.ph-cine .phase-dots i.on { background: var(--signal); animation: ph-pulse 520ms ease-in-out 500ms 3 alternate; }
@keyframes ph-pulse { from { opacity: 1; } to { opacity: .35; } }

/* (d) title: OP (dust) / name (bone), each line rises out of its mask, then one glitch at 420ms */
.ph-title {
  margin: 0 0 14px;
  font-size: var(--t-phase);
  line-height: .9;
  letter-spacing: .005em;
  text-wrap: balance;
}
.ph-title .ln { display: block; overflow: hidden; padding: .07em 0 .02em; margin: -.07em 0 -.02em; }
.ph-title .ln > span { display: block; animation: ph-rise 300ms var(--e-out) 90ms both; }
.ph-title .l1 { color: var(--ph-ink); }
.ph-title .l2 { color: var(--bone); }
.ph-title .l2 > span { animation-delay: 150ms; }
@keyframes ph-rise { from { transform: translateY(108%); } }

/* (e) lede: the typed copy runs on an aria-hidden twin stacked over the real text (no reflow) */
.ph-sub {
  display: grid;
  margin: 0 0 20px;
  max-width: 30em;
  font-size: 18px;
  line-height: 1.45;
  color: var(--bone);
}
.ph-sub > span { grid-area: 1 / 1; }
.ph-sub .fin { opacity: 0; }
.ph-sub .ty { visibility: hidden; }
.typing .ph-sub .ty { visibility: visible; }
.typed .ph-sub .fin { opacity: 1; }
.typed .ph-sub .ty { visibility: hidden; }

/* mission brief strip: what this op costs and pays (questions, time, patch) */
.ph-brief {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  margin: 0 0 16px;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  animation: fx-fade-up var(--d-ui) var(--e-out) 900ms both;
}
.ph-brief > div { min-width: 0; padding: 9px 14px 10px 0; }
.ph-brief > div + div { padding-left: 12px; border-left: 1px solid var(--line); }
.ph-brief > div:last-child { padding-right: 0; }
.ph-brief dt {
  margin: 0 0 4px;
  font: 600 var(--t-micro)/1.2 var(--f-hud);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dust);
  white-space: nowrap;
}
.ph-brief dd {
  margin: 0;
  font: 400 var(--t-num-s)/1 var(--f-display);
  font-synthesis: none;
  text-transform: uppercase;
  color: var(--bone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph-brief .rw dd { color: var(--tier-rare); }

/* (f) + (g) foot: intel above #go; margin-top:auto keeps #go anchored while intel arrives */
.ph-foot { margin-top: auto; }
/* #go docks to the bottom edge when the card is taller than the screen (short phones, browser chrome, late intel) */
.ph-cine > .ph-cta {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 0 calc(-1 * var(--gutter));
  padding: 12px var(--gutter) calc(8px + var(--safe-b));
}
.ph-cine.stuck > .ph-cta { background: linear-gradient(rgba(7, 9, 10, 0), rgba(7, 9, 10, .92) 14px); }
.ph-end { display: block; height: 1px; }

/* the objective: this op's patch, still locked (tinted like the watermark). Phone: phase 1 only, where it fills the
   space above the brief strip. Desktop (>= 1100): the framed right column on every card. */
.ph-obj { display: none; }
.ph-cine[data-ph="1"] .ph-obj {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: auto 0 16px;
  padding: 12px 14px 12px 12px;
  background: linear-gradient(90deg, rgba(13, 18, 16, .9), rgba(13, 18, 16, .55));
  border: 1px dashed var(--line-3);
  animation: fx-fade-up var(--d-ui) var(--e-out) 820ms both;
}
.ph-cine[data-ph="1"] .ph-foot { margin-top: 0; }
.ph-obj-art { position: relative; isolation: isolate; width: 76px; height: 76px; }
.ph-obj-art img {
  width: 100%;
  height: 100%;
  filter: grayscale(1) sepia(.6) hue-rotate(var(--ph-hue)) saturate(1.4) brightness(.8);
  opacity: .62;
}
.ph-lock {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--void);
  border: 1px solid var(--ph-ink);
  color: var(--ph-ink);
  border-radius: 50%;
  animation: fx-pop var(--d-pop) var(--e-impact) 1040ms both;
}
.ph-lock .ic { width: 16px; height: 16px; }
.ph-obj-t { min-width: 0; }
.ph-obj-k {
  display: block;
  font: 600 var(--t-micro)/1.2 var(--f-hud);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ph-ink);
}
.ph-obj-t b { display: block; margin: 4px 0 3px; font: 700 16px/1.2 var(--f-hud); letter-spacing: .05em; text-transform: uppercase; color: var(--bone); }
.ph-obj-s { display: block; font-size: var(--t-small); line-height: 1.35; color: var(--dust); }
.intel {
  --bk: var(--intel);
  --bk-size: 12px;
  position: relative;
  margin: 0 0 16px;
  padding: 12px 14px 13px;
  background: linear-gradient(180deg, rgba(94, 230, 208, .06), rgba(94, 230, 208, 0) 60%), var(--night);
  border: 1px solid rgba(94, 230, 208, .55);
}
.intel.bk4::before { inset: -4px; }
.intel.incoming { animation: ph-intel 260ms var(--e-out) both; transform-origin: 50% 0; }
@keyframes ph-intel { from { opacity: 0; transform: scaleY(.3); } }
.intel-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font: 700 var(--t-label)/1.2 var(--f-hud);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--intel);
}
.intel-h .ic { width: 16px; height: 16px; }
.intel-b { position: relative; margin: 0; font: 500 16px/1.45 var(--f-body); color: var(--bone); }
.intel-b .fin { opacity: 0; }
.intel-b .scr { position: absolute; inset: 0; overflow: hidden; color: var(--intel); font-family: var(--f-hud); font-weight: 600; }
.intel.decoded .intel-b .fin { opacity: 1; }
.intel.decoded .intel-b .scr { display: none; }

/* ================================================================ QUIZ · shell */
.q-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 20px;
  margin: 0 0 12px;
}
.q-meta .op {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font: 700 var(--t-hud)/1.2 var(--f-hud);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone);
  white-space: nowrap;
}
.op-pip { /* phase colour diamond */
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--scene);
  box-shadow: 0 0 0 1px var(--line-3);
  transform: rotate(45deg);
}
.q-meta .q-n {
  flex: none;
  font: 600 var(--t-hud)/1.2 var(--f-hud);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dust);
  font-variant-numeric: tabular-nums;
}
.q-meta .q-n b { color: var(--bone); font-weight: 700; }

/* question panel: chamfer (16px top-right) on the non-focusable .q-bg; .bk signal brackets from base */
.q-card.panel {
  position: relative;
  isolation: isolate;
  padding: 20px 18px 20px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.q-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--line-2);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.q-bg::before {
  content: '';
  position: absolute;
  inset: 1px;
  background: linear-gradient(180deg, rgba(237, 230, 211, .03), rgba(237, 230, 211, 0) 120px), var(--grad-panel);
  clip-path: polygon(0 0, calc(100% - 15.6px) 0, 100% 15.6px, 100% 100%, 0 100%);
}
.q-wash { /* calm phase-colour wash at the top of the card (static) */
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  height: 140px;
  background: linear-gradient(180deg, var(--scene), rgba(0, 0, 0, 0));
  opacity: .14;
}
.q-bg::after { /* signal accent along the chamfer edge (half of it is clipped away: ~1.5px shows) */
  content: '';
  position: absolute;
  top: -1px;
  left: calc(100% - 16px);
  width: 23px;
  height: 3px;
  background: var(--signal);
  transform-origin: 0 50%;
  transform: rotate(45deg);
}
.q-card::after { /* LOCK IN confirm flash */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--confirm);
  opacity: 0;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.q-card.flash::after { animation: q-flash 200ms ease-out 1; }
@keyframes q-flash { 0% { opacity: 0; } 35% { opacity: .12; } 100% { opacity: 0; } }

.q-scene {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 10px;
  font: 600 var(--t-hud)/1.35 var(--f-hud);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--intel);
}
.q-scene .caret {
  display: inline-block;
  width: 7px;
  height: 12px;
  margin-left: 5px;
  vertical-align: -1px;
  background: var(--intel);
  opacity: 0;
  animation: fx-blink 900ms linear 3;
}
.q-pre { color: var(--tier-rare); }

.q-text {
  margin: 0 0 18px;
  font: 700 var(--t-q)/1.15 var(--f-body);
  font-synthesis: weight;
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--bone);
  text-wrap: pretty;
}

/* ================================================================ QUIZ · option rows */
.opts { display: grid; gap: 10px; }
.opt {
  --oc: var(--signal);
  --ink-c: rgba(240, 86, 29, .17);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--opt-h);
  padding: 14px 14px 14px 12px;
  border: 0;
  background: none;
  color: var(--bone);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: opacity var(--d-micro) var(--e-out), transform var(--d-tap) var(--e-out);
}
.opt:active { transform: scale(.99); }
.opt:disabled { cursor: default; }
.opt-bg { /* border (bg) + fill (::before) + ink + sheen, clipped to the bottom-right chamfer */
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--line-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.opt-bg::before {
  content: '';
  position: absolute;
  inset: 1px;
  background: var(--panel);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9.6px), calc(100% - 9.6px) 100%, 0 100%);
}
.ink {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 260%;
  height: 0;
  padding-bottom: 260%;
  border-radius: 50%;
  background: var(--ink-c);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 260ms var(--e-out);
}
.opt-bg::after { /* one-shot sheen */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  background: var(--sheen);
  transform: translateX(-120%);
}
.opt::before { /* .bk brackets, snap in on press */
  content: '';
  position: absolute;
  inset: -3px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(var(--oc), var(--oc)) top left / 14px 2px no-repeat,
    linear-gradient(var(--oc), var(--oc)) top left / 2px 14px no-repeat,
    linear-gradient(var(--oc), var(--oc)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--oc), var(--oc)) bottom right / 2px 14px no-repeat;
}
.opt .box { /* hotkey cap; the tick replaces the letter when pressed */
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--dust);
  border-radius: 2px;
  background: var(--raised);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .35);
  color: var(--bone);
  font: 700 14px/1 var(--f-hud);
}
.opt .box b { font-weight: 700; }
.opt .box svg { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; overflow: visible; opacity: 0; }
.opt .box path { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 0; }
.opt .t { min-width: 0; font: 600 var(--t-opt)/1.3 var(--f-body); }
.opt .e { font-size: 24px; line-height: 1; text-align: center; }

@media (hover: hover) {
  .opt:not(:disabled):hover .opt-bg { background: var(--line-3); }
  .opt:not(:disabled):hover .box { border-color: var(--bone); }
}

/* pressed: ink from the tap point, brackets, cap -> tick, one sheen; siblings fall back */
.opt[aria-pressed="true"] .opt-bg { background: var(--oc); }
.opt[aria-pressed="true"] .ink { transform: translate(-50%, -50%) scale(1); }
.opt[aria-pressed="true"]::before { opacity: 1; }
.opt[aria-pressed="true"] .box { background: var(--oc); border-color: var(--oc); box-shadow: none; }
.opt[aria-pressed="true"] .box b { opacity: 0; }
.opt[aria-pressed="true"] .box svg { opacity: 1; }
.opt.hit::before { animation: fx-bk-in var(--d-micro) var(--e-impact) both; }
.opt.hit .box path { animation: q-tick 200ms var(--e-out) both; }
.opt.hit .opt-bg::after { animation: fx-sheen 380ms var(--e-out) 60ms 1; }
@keyframes q-tick { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
.opts.answered .opt[aria-pressed="false"]:not(.right) { opacity: .45; }

/* grid perk tiles (6 options) */
.opts.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opts.grid .opt {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 10px;
  min-height: 128px;
  padding: 12px 12px 14px;
}
.opts.grid .opt .e {
  position: relative;
  isolation: isolate;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 28px;
}
.opts.grid .opt .e::before, .opts.grid .opt .e::after { /* outlined hexagon plate */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--line-3);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.opts.grid .opt .e::after { inset: 1.5px; z-index: -1; background: var(--night); }
.opts.grid .opt .box { position: absolute; top: 12px; right: 12px; }
.opts.grid .opt .t { grid-row: 2; align-self: end; font-size: 15.5px; line-height: 1.25; }
.opts.grid .opt-bg::after { /* perk flash: hot orange for ~120ms, then the tinted pressed state */
  left: 0;
  width: 100%;
  background: var(--grad-signal);
  opacity: 0;
  transform: none;
}
.opts.grid .opt.hit .opt-bg::after { animation: q-perk 320ms var(--e-out) 1; }
@keyframes q-perk { 0%, 38% { opacity: .9; } 100% { opacity: 0; } }
.opts.grid .opt[aria-pressed="true"] .e::before { background: var(--signal); }
.opts.grid .opt[aria-pressed="true"] .e::after { background: #2A1A12; }
@media (max-width: 380px) { .opts.grid .opt { min-height: 112px; } }

/* ================================================================ QUIZ · encik transmission */
.tx {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas: "h h" "a q";
  align-items: center;
  gap: 10px 14px;
  margin: -20px -18px 16px;
  padding: 16px 18px 16px;
  background: linear-gradient(100deg, rgba(255, 84, 102, .09), rgba(255, 84, 102, 0) 65%);
  border-bottom: 1px dashed rgba(255, 84, 102, .28);
  animation: tx-in 260ms var(--e-out) both, tx-jit 160ms steps(1, end) 260ms 1;
}
@keyframes tx-in { from { opacity: 0; transform: translateX(-16px); } }
@keyframes tx-jit { 0% { transform: translateX(2px); } 50% { transform: translateX(-2px); } 100% { transform: none; } }
.tx-av {
  grid-area: a;
  --bk: var(--alert);
  --bk-size: 12px;
  position: relative;
  overflow: hidden;
  width: 72px;
  height: 72px;
  background: radial-gradient(closest-side, rgba(255, 84, 102, .22), rgba(255, 84, 102, 0)), var(--night);
  border: 1px solid var(--line-2);
}
.tx-av img { width: 100%; height: 100%; object-fit: cover; }
.tx-av::after { content: ''; position: absolute; inset: 0; background: var(--scanlines); pointer-events: none; } /* art frame only */
.tx-emoji { display: grid; place-items: center; width: 100%; height: 100%; font-size: 36px; line-height: 1; }
.tx-head { grid-area: h; display: flex; align-items: center; gap: 10px; }
.tx-head::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 84, 102, .45), rgba(255, 84, 102, 0)); }
.tx .who {
  font: 700 var(--t-label)/1.2 var(--f-hud);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--alert);
}
.wave { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.wave i { display: block; width: 3px; height: 14px; background: var(--alert); transform: scaleY(.22); animation: tx-wave 150ms ease-in-out 6 alternate; }
.wave i:nth-child(2) { height: 10px; animation-delay: 60ms; }
.wave i:nth-child(3) { animation-delay: 120ms; }
.wave i:nth-child(4) { height: 8px; animation-delay: 30ms; }
.wave i:nth-child(5) { height: 12px; animation-delay: 90ms; }
@keyframes tx-wave { from { transform: scaleY(.22); } to { transform: scaleY(1); } }
.tx .bubble {
  grid-area: q;
  min-width: 0;
  font: 400 clamp(24px, 7vw, 32px)/1 var(--f-display);
  font-synthesis: none;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--bone);
  overflow-wrap: anywhere;
}
.q-encik .q-text { font-size: clamp(20px, 5.4vw, 26px); }

/* ================================================================ QUIZ · slider tactical dial */
.slider-ends { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.slider-ends .end {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 10px 12px 12px;
  background: var(--night);
  border: 1px solid var(--line-2);
  transition: opacity var(--d-micro) var(--e-out);
}
.slider-ends .end-hi { align-items: flex-end; text-align: right; }
.slider-ends .end::before {
  content: '';
  position: absolute;
  inset: -3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--d-micro) var(--e-out);
  background:
    linear-gradient(var(--signal), var(--signal)) top left / 12px 2px no-repeat,
    linear-gradient(var(--signal), var(--signal)) top left / 2px 12px no-repeat,
    linear-gradient(var(--signal), var(--signal)) bottom right / 12px 2px no-repeat,
    linear-gradient(var(--signal), var(--signal)) bottom right / 2px 12px no-repeat;
}
.slider-ends .e { font-size: 30px; line-height: 1; }
.slider-ends .l { font: 600 15px/1.3 var(--f-body); color: var(--bone); }
.slider-ends[data-lean="lo"] .end-hi, .slider-ends[data-lean="hi"] .end-lo { opacity: .55; }
.slider-ends[data-lean="lo"] .end-lo::before, .slider-ends[data-lean="hi"] .end-hi::before { opacity: 1; }

.dial-track { position: relative; padding: 6px 0 0; }
.dial .range::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -8px; }
.dial .range:focus { box-shadow: none; border-color: transparent; }
.slider-ticks { position: relative; height: 26px; margin: 2px 15px 0; font: 600 var(--t-hud)/1 var(--f-hud); color: var(--dust); font-variant-numeric: tabular-nums; }
.slider-ticks span { position: absolute; top: 8px; transform: translateX(-50%); }
.slider-ticks span::before { content: ''; position: absolute; left: 50%; top: -8px; width: 1px; height: 5px; background: var(--line-3); }
.slider-ticks span:nth-child(1) { left: 0; }
.slider-ticks span:nth-child(2) { left: 25%; }
.slider-ticks span:nth-child(3) { left: 50%; }
.slider-ticks span:nth-child(4) { left: 75%; }
.slider-ticks span:nth-child(5) { left: 100%; }
.slider-ticks[data-v="1"] span:nth-child(1), .slider-ticks[data-v="2"] span:nth-child(2), .slider-ticks[data-v="3"] span:nth-child(3),
.slider-ticks[data-v="4"] span:nth-child(4), .slider-ticks[data-v="5"] span:nth-child(5) { color: var(--bone); font-weight: 700; }
.slider-read {
  display: grid;
  place-items: center;
  min-height: 2.3em; /* two lines reserved: LOCK IN never jumps while dragging */
  margin: 10px 0 14px;
  text-align: center;
  font: 400 var(--t-num-s)/1.1 var(--f-display);
  font-synthesis: none;
  text-transform: uppercase;
  color: var(--bone);
  text-wrap: balance;
}
#lock { font-size: var(--t-btn-xl); letter-spacing: .2em; }
#lock > .lk-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--confirm);
  clip-path: var(--chamfer-md);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
#lock.locking > .lk-fill { transform: scaleX(1); transition: transform 220ms var(--e-out); }
#lock.locking::after { display: none; }

/* ================================================================ QUIZ · money INTEL CHECK */
.q-money .q-scene { gap: 2px 12px; }
.opt.right { --oc: var(--confirm); --ink-c: rgba(74, 222, 128, .12); }
.opt.wrong { --oc: var(--alert); --ink-c: rgba(255, 84, 102, .14); animation: fx-shake 260ms var(--e-out) 1; }
.opt.right .opt-bg, .opt.wrong .opt-bg { background: var(--oc); }
.opt.right .opt-bg::before { background: linear-gradient(rgba(74, 222, 128, .12), rgba(74, 222, 128, .12)), var(--panel); }
.opt.right::before { opacity: 1; }
.opt.right .box { background: var(--confirm); border-color: var(--confirm); box-shadow: none; }
.opt.right .box b { opacity: 0; }
.opt.right .box svg { opacity: 1; }
.opt.wrong .box { background: var(--alert); border-color: var(--alert); color: var(--ink); }
.opt.wrong .box b { opacity: 1; }
.opt.wrong .box svg { opacity: 0; }
.q-chip {
  position: absolute;
  top: -10px;
  right: 16px;
  z-index: 3;
  padding: 4px 8px 3px;
  color: var(--ink);
  background: var(--confirm);
  font: 700 var(--t-micro)/1.1 var(--f-hud);
  letter-spacing: .16em;
  text-transform: uppercase;
  animation: q-slam 220ms var(--e-impact) both;
}
.q-chip.no { background: var(--alert); }
@keyframes q-slam { from { opacity: 0; transform: scale(1.4); } }
.q-lah {
  position: absolute;
  top: -11px;
  left: 10px;
  z-index: 3;
  padding: 0 6px;
  background: var(--panel);
  color: var(--confirm);
  font: italic 500 var(--t-small)/1.45 var(--f-body);
  white-space: nowrap;
  animation: q-lah-in 200ms var(--e-out) 120ms both;
}
@keyframes q-lah-in { from { opacity: 0; transform: translateX(-8px); } }

#reveal:empty { display: none; }
.debrief {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  column-gap: 12px;
  margin: 18px 0 0;
  padding: 12px 14px 14px 16px;
  background: var(--night);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--confirm);
  animation: q-debrief 240ms var(--e-out) both;
}
.debrief.no { border-left-color: var(--alert); }
@keyframes q-debrief { from { opacity: 0; transform: translateY(8px); } }
.debrief .db-h {
  grid-column: 1;
  font: 600 var(--t-micro)/1.3 var(--f-hud);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--dust);
}
.debrief b {
  grid-column: 1;
  display: block;
  margin: 4px 0 8px;
  font: 700 16px/1.25 var(--f-hud);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--confirm);
}
.debrief.no b { color: var(--alert); }
.debrief p { grid-column: 1 / -1; margin: 0; font: 400 16px/1.5 var(--f-body); color: var(--bone); }
.debrief .kopi-st { grid-column: 2; grid-row: 1 / span 2; align-self: start; width: 48px; height: 48px; margin-top: -2px; animation: fx-pop var(--d-pop) var(--e-impact) 120ms both; }
#reveal #next { margin-top: 14px; }

/* ================================================================ nav row */
.q-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; margin-top: 14px; }
.q-nav .linkbtn { padding: 0 4px; }
.q-keys { /* keyboard hint: desktop pointers only */
  display: none;
  margin-left: auto;
  font: 600 var(--t-micro)/1 var(--f-hud);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}
.q-keys b { padding: 3px 5px 2px; margin: 0 2px; border: 1px solid var(--line-3); color: var(--dust); font-weight: 700; letter-spacing: .08em; }
.q-keys + .linkbtn { margin-left: 16px; }
@media (hover: hover) and (pointer: fine) { .q-keys { display: inline-block; } }

/* ================================================================ QUIZ · step (question to question)
   render() swaps the whole screen; when it replaces one question with the next, the XP rail, meta row, nav and the
   desktop console stay still and only the card travels (no skew on text). The active rail segment grows from its
   old width (transform only). The 620ms / 450ms advance timings are untouched. */
.screen.q-step, .screen.q-step.back { animation: none; }
.screen.q-step .q-card { animation: q-card-in 240ms var(--e-out) backwards; }
.screen.q-step.back .q-card { animation-name: q-card-back; }
@keyframes q-card-in { from { opacity: 0; transform: translateX(28px); } }
@keyframes q-card-back { from { opacity: 0; transform: translateX(-28px); } }
.screen.q-step .progress i.cur b { transform-origin: 0 50%; animation: q-fill 320ms var(--e-gauge) backwards; }
@keyframes q-fill { from { transform: scaleX(var(--from)); } }

/* reaction line: docked inside the topbar, just left of the HUD chip (ORD IN n rolls down beside it), so it never
   covers the XP rail or the Q counter. Scoped to the quiz scene; the global toast is untouched elsewhere. */
body[data-scene="quiz"] .toast {
  top: calc(var(--safe-t) + 6px);
  right: calc(var(--gutter) + 118px);
  display: flex;
  align-items: center;
  min-height: 44px;
  max-width: min(340px, calc(100vw - var(--gutter) - 118px - 56px));
  padding: 6px 12px 6px 14px;
  font-size: 13px;
  line-height: 1.2;
}
/* phones: the docked line spans logo-to-HUD, so a short reaction never leaves half the brand name peeking out */
@media (max-width: 699px) {
  body[data-scene="quiz"] .toast { left: calc(var(--gutter) + 40px); max-width: none; }
}

/* ================================================================ QUIZ · desktop mission console (>= 1100 x 700)
   The console rail (objective patch charging up, the five ops, what is left) sits left of the question; the HUD
   context lives beside the card instead of 800px away. The rail is static within a phase: no loops, no pops. */
.q-rail { display: none; }
.qr-art {
  --bk: var(--ph-ink);
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: 224px;
  margin: 0 0 16px;
  background: var(--night);
  border: 1px solid var(--line-2);
  overflow: hidden;
}
.qr-art::after { /* scene glow behind the patch (static) */
  content: '';
  position: absolute;
  inset: 6%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--scene), rgba(0, 0, 0, 0));
  opacity: .5;
}
.qr-art img { grid-area: 1 / 1; width: 184px; height: 184px; }
.qr-base { filter: grayscale(1) sepia(.6) hue-rotate(var(--ph-hue)) saturate(1.3) brightness(.7); opacity: .45; }
.qr-fill { clip-path: inset(var(--qr-cut, 100%) 0 0 0); } /* charges bottom-up as the op's questions are cleared */
.qr-lock {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 4px;
  background: var(--void);
  border: 1px solid var(--line-3);
  color: var(--ph-ink);
  font: 700 var(--t-label)/1 var(--f-hud);
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
.qr-lock .ic { width: 14px; height: 14px; }
.qr-k {
  display: block;
  margin: 0 0 6px;
  font: 600 var(--t-label)/1.3 var(--f-hud);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ph-ink);
}
.qr-name {
  display: block;
  margin: 0 0 16px;
  font: 400 40px/.95 var(--f-display);
  font-synthesis: none;
  text-transform: uppercase;
  color: var(--bone);
  text-wrap: balance;
}
.qr-ops { display: grid; gap: 2px; margin: 0 0 14px; padding: 12px 0 0; border-top: 1px solid var(--line); list-style: none; }
.qr-ops li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  padding: 0 8px;
  font: 600 var(--t-hud)/1.2 var(--f-hud);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}
.qr-ops .ic { width: 16px; height: 16px; }
.qr-ops li.done { color: var(--dust); }
.qr-ops li.done .ic { color: var(--confirm); }
.qr-ops li.on { color: var(--bone); background: linear-gradient(90deg, rgba(240, 86, 29, .14), rgba(240, 86, 29, 0)); box-shadow: inset 2px 0 0 var(--signal); }
.qr-ops li.on .ic { color: var(--signal); }
.qr-ops b { font-weight: 700; font-size: var(--t-label); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.qr-ops li.done b { color: var(--dim); font-weight: 600; }
.qr-left {
  margin: 0;
  font: 600 var(--t-hud)/1.3 var(--f-hud);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dust);
}
.qr-left b { color: var(--bone); font-variant-numeric: tabular-nums; }

@media (min-width: 1100px) and (min-height: 700px) {
  .screen.q-screen {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 48px;
    align-items: start;
    margin-left: calc(50% - min(470px, 50vw - 32px));
    margin-right: calc(50% - min(470px, 50vw - 32px));
  }
  .screen.q-screen > .q-rail {
    position: sticky;
    top: calc(var(--topbar-h) + var(--safe-t) + 20px);
    display: block;
    grid-column: 1;
    grid-row: 1 / 5;
  }
  .screen.q-screen > .progress { grid-column: 2; grid-row: 1; }
  .screen.q-screen > .q-meta { grid-column: 2; grid-row: 2; }
  .screen.q-screen > .q-card { grid-column: 2; grid-row: 3; }
  .screen.q-screen > .q-nav { grid-column: 2; grid-row: 4; }
  .screen.q-screen .opts.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ================================================================ PHASE CARD · short phones (<= 760 tall)
   Tighter title, earned row and brief strip so the whole card (and #go) fits a 360x640 visible area. */
@media (max-height: 760px) and (max-width: 1099px) {
  .ph-earned ~ .ph-title { font-size: min(var(--t-phase), 58px); margin-bottom: 8px; }
  .ph-earned { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; margin: 6px 0 12px; padding: 12px 12px 8px 8px; }
  .ph-patch, .ph-patch img { width: 56px; height: 56px; }
  .ph-done { margin-bottom: 3px; font-size: 14px; }
  .ph-file { margin-bottom: 12px; }
  .ph-which { gap: 8px; margin-bottom: 8px; }
  .ph-sub { margin-bottom: 14px; font-size: 17px; }
  .ph-brief { margin-bottom: 10px; }
  .ph-brief dd { font-size: 22px; }
  .ph-brief > div { padding-top: 6px; padding-bottom: 7px; }
  .intel { margin-bottom: 4px; padding: 10px 12px 11px; }
  .intel-h { margin-bottom: 4px; }
  .intel-b { font-size: 15px; }
  .ph-cine[data-ph="1"] .ph-obj { margin-bottom: 12px; padding-top: 10px; padding-bottom: 10px; }
}

/* ================================================================ PHASE CARD · desktop (>= 1100): a two-column mission cut
   Left: earned row, mission count, the op title up to 150px, lede, brief strip, #go. Right: the framed objective
   patch (locked, tinted) and, under it beside #go, the intercepted intel. Everything clears the bottom letterbox. */
@media (min-width: 1100px) {
  .ph-cine {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-rows: repeat(6, auto);
    column-gap: 64px;
    align-content: center;
    margin-left: calc(50% - min(500px, 50vw - 32px));
    margin-right: calc(50% - min(500px, 50vw - 32px));
    padding: 0;
  }
  .ph-cine > .ph-earned, .ph-cine > .ph-file { grid-column: 1; grid-row: 1; margin-top: 8px; }
  .ph-cine > .ph-which { grid-column: 1; grid-row: 2; }
  .ph-cine > .ph-title { grid-column: 1; grid-row: 3; font-size: min(150px, 16vh); }
  .ph-cine > .ph-sub { grid-column: 1; grid-row: 4; }
  .ph-cine > .ph-foot { display: contents; }
  .ph-cine .ph-brief { grid-column: 1; grid-row: 5; align-self: start; }
  .ph-cine > .ph-cta { grid-column: 1; grid-row: 6; margin: 0; padding: 12px 0 0; }
  .ph-cine.stuck > .ph-cta { padding-bottom: 12px; }
  .ph-cine > .ph-end { grid-column: 1; grid-row: 6; align-self: end; }
  .ph-cine .intel { grid-column: 2; grid-row: 4 / 7; align-self: end; margin: 0; }
  .ph-cine .ph-mark { display: none; } /* the framed objective replaces the watermark */
  .ph-cine .ph-glow { left: 62%; top: 4%; width: 90%; height: 90%; margin-left: -45%; }

  .ph-cine .ph-obj,
  .ph-cine[data-ph="1"] .ph-obj {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    text-align: center;
    animation: ph-obj-in 520ms var(--e-out) 120ms both;
  }
  .ph-cine[data-ph="1"] .ph-obj { grid-row: 1 / 7; }
  .ph-obj-art {
    --bk: var(--ph-ink);
    --bk-size: 22px;
    width: 340px;
    height: 340px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    background: rgba(13, 18, 16, .35);
    border: 1px solid var(--line);
  }
  .ph-obj-art::before { /* bk4 frame in the op's ink */
    content: '';
    position: absolute;
    inset: -5px;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(var(--bk), var(--bk)) top left / var(--bk-size) 2px no-repeat,
      linear-gradient(var(--bk), var(--bk)) top left / 2px var(--bk-size) no-repeat,
      linear-gradient(var(--bk), var(--bk)) top right / var(--bk-size) 2px no-repeat,
      linear-gradient(var(--bk), var(--bk)) top right / 2px var(--bk-size) no-repeat,
      linear-gradient(var(--bk), var(--bk)) bottom left / var(--bk-size) 2px no-repeat,
      linear-gradient(var(--bk), var(--bk)) bottom left / 2px var(--bk-size) no-repeat,
      linear-gradient(var(--bk), var(--bk)) bottom right / var(--bk-size) 2px no-repeat,
      linear-gradient(var(--bk), var(--bk)) bottom right / 2px var(--bk-size) no-repeat;
  }
  .ph-obj-art::after { /* scene glow inside the frame (static) */
    content: '';
    position: absolute;
    inset: 2%;
    z-index: -1;
    background: radial-gradient(closest-side, var(--scene), rgba(0, 0, 0, 0));
    opacity: .7;
  }
  .ph-obj-art img { width: 280px; height: 280px; opacity: .5; }
  .ph-lock { left: 50%; right: auto; bottom: -22px; width: 44px; height: 44px; margin-left: -22px; background: var(--void); }
  .ph-lock .ic { width: 20px; height: 20px; }
  .ph-obj-t { padding-top: 14px; }
  .ph-obj-t b { font-size: 18px; }
  .intel { padding: 14px 16px 15px; }
}
/* short desktop windows (1280x720 laptops): a smaller frame, intel tucked under it, a tighter title */
@media (min-width: 1100px) and (max-height: 780px) {
  .ph-cine > .ph-title { font-size: min(150px, 15vh); margin-bottom: 10px; }
  .ph-cine > .ph-earned { margin-bottom: 12px; padding-top: 10px; padding-bottom: 8px; }
  .ph-cine > .ph-which { margin-bottom: 10px; }
  .ph-sub { margin-bottom: 14px; }
  .ph-obj-art { width: 272px; height: 272px; margin-bottom: 14px; }
  .ph-obj-art img { width: 224px; height: 224px; }
  .ph-cine .intel { align-self: start; margin-top: 18px; }
}
@keyframes ph-obj-in { from { opacity: 0; transform: scale(1.06); } }

/* ================================================================ wider screens */
@media (min-width: 600px) {
  .q-card.panel { padding: 24px 24px 24px; }
  .tx { margin: -24px -24px 18px; padding: 18px 24px; }
  .brief-bubble { margin-top: 4px; }
  .ph-mark { left: calc(50% + 40px); top: 18%; width: 460px; }
  .ph-glow { width: 120%; margin-left: -60%; height: 80%; top: 0; }
  .ph-earned { padding: 14px 18px 14px 14px; }
}

/* ================================================================ reduced motion: final states, no letterbox/glitch/typing */
@media (prefers-reduced-motion: reduce) {
  /* a question step only fades the card in; the shell stays put */
  .screen.q-step, .screen.q-step.back { animation: none !important; }
  .screen.q-step .q-card { animation: fx-rm-fade 150ms ease-out backwards !important; }
  .ph-cine .phase-dots i.on { animation: none; }
  .ph-mark, .ph-title .ln > span, .tx, .wave i { animation: none !important; }
  .opt.wrong { animation: none; }
}
html.lowpower .ph-mark { filter: none; opacity: .08; }
html.lowpower .ph-obj-art img, html.lowpower .qr-base { filter: grayscale(1); }