/* ===========================================================================
   OPERATION QUIET PARADE — ATTENTION SIMULATOR
   Portrait-first, 720x1280, letterboxed, never stretched — same contract as
   rising-sunburn-sim.css, and for the same reason: this is a street seen
   lengthways with a handheld under it, so portrait IS the native aspect and
   there is no rotate gate.

   The one layout rule that matters: the stage is a fixed 720x1280 box scaled
   by JS. Everything inside it is positioned in those units, never in vw/vh, so
   the HUD can never drift off the canvas it is annotating.
   =========================================================================== */

:root {
  --qp-bg: #05080e;
  --qp-panel: #0a1018;
  --qp-line: rgba(120, 190, 230, 0.22);
  --qp-cyan: #5fd8ff;
  --qp-cyan-dim: #2a7d9e;
  --qp-red: #ff4d5e;
  --qp-amber: #ffb347;
  --qp-green: #57e08a;
  --qp-gold: #ffd76a;
  --qp-ink: #dbe8f2;
  --qp-ink-dim: #7d90a3;
  --qp-mono: "Share Tech Mono", ui-monospace, monospace;
  --qp-cond: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior: none;
}

.qp-body {
  background: var(--qp-bg);
  color: var(--qp-ink);
  font-family: var(--qp-cond);
  display: flex;
  flex-direction: column;
  /* Exactly one viewport, never more. The stage is a fixed 720x1280 box that
     gets scaled to fit; if the body were allowed to grow, the browser would
     hand it the full 1280px and the player would be scrolling a game. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.qp-scan {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.022) 0 1px,
    rgba(0, 0, 0, 0) 1px 3px
  );
}

/* ------------------------------------------------------------------- top */

.qp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  flex: none;
  padding: 0.35rem 0.8rem;
  border-bottom: 1px solid var(--qp-line);
  background: rgba(6, 10, 18, 0.92);
  position: relative;
  z-index: 6;
}

.qp-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--qp-ink);
  text-decoration: none;
  font: 700 0.78rem/1 var(--qp-mono);
  letter-spacing: 0.1em;
}
.qp-brand img { display: block; }
.qp-top .main-nav {
  display: flex;
  gap: 0.9rem;
  font: 600 0.78rem/1 var(--qp-cond);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.qp-top .main-nav a { color: var(--qp-ink-dim); text-decoration: none; }
.qp-top .main-nav a:hover,
.qp-top .main-nav a:focus-visible { color: var(--qp-cyan); }

/* ----------------------------------------------------------------- stage */

.qp-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.25rem 0 0.3rem;
}

/* The wrap is the measuring stick: it is whatever height the flex column has
   left over, and it never gets written to. The stage is taken out of flow
   entirely so its untransformed 1280px cannot feed back into that measurement
   — which is exactly the loop that pinned the scale at 1 on desktop. */
.qp-wrap {
  position: relative;
  width: 100%;
  max-width: 100vw;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.qp-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 720px;
  height: 1280px;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  background: #05080e;
  border: 1px solid var(--qp-line);
  overflow: hidden;
}

#qp-canvas {
  display: block;
  width: 720px;
  height: 1280px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
}

/* A hairline that brightens the whole frame the moment her head comes up.
   Redundant with the canvas rule the engine draws, deliberately: this one is
   visible in the letterbox, where the canvas is not. */
.qp-stage.is-looking { box-shadow: inset 0 0 0 2px rgba(95, 216, 255, 0.5); }

/* ------------------------------------------------------------------- HUD */

.qp-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--qp-cond);
}

/* display:flex on a HUD panel silently beats the `hidden` attribute, which is
   how the comms strip and the toast ended up permanently on screen showing
   their placeholder text. One rule, applied to the whole stage, so no future
   panel can reintroduce it. */
.qp-stage [hidden] { display: none !important; }
.qp-hud button { pointer-events: auto; }

.qp-hud-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 10px 14px 8px;
  background: linear-gradient(to bottom, rgba(5, 8, 14, 0.96), rgba(5, 8, 14, 0));
}

.qp-meters { display: flex; gap: 12px; align-items: center; }

.qp-meter {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
}
.qp-meter-label {
  font: 700 15px/1 var(--qp-mono);
  letter-spacing: 0.12em;
  color: var(--qp-ink-dim);
}
.qp-meter-track {
  flex: 1 1 auto;
  height: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--qp-line);
  overflow: hidden;
}
.qp-meter-track i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--qp-cyan);
  transition: width 0.12s linear, background 0.3s ease;
}
.qp-meter-track i.is-amber { background: var(--qp-amber); }
.qp-meter-track i.is-red { background: var(--qp-red); }
.qp-meter-val {
  min-width: 42px;
  text-align: right;
  font: 700 19px/1 var(--qp-mono);
  color: var(--qp-ink);
}

/* Parade is a count, not a bar — the number IS the drama. */
.qp-parade {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 150px;
}
.qp-parade b {
  font: 700 34px/0.9 var(--qp-cond);
  color: var(--qp-gold);
  min-width: 46px;
}
.qp-parade span {
  font: 700 13px/1 var(--qp-mono);
  letter-spacing: 0.12em;
  color: var(--qp-ink-dim);
}

.qp-hud-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.qp-district {
  font: 700 14px/1 var(--qp-mono);
  letter-spacing: 0.14em;
  color: var(--qp-cyan-dim);
  min-width: 108px;
}
.qp-progress-wrap {
  flex: 1 1 auto;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.qp-progress-wrap i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--qp-cyan-dim);
  transition: width 0.2s linear;
}
.qp-pause-btn {
  width: 40px; height: 40px;
  border: 1px solid var(--qp-line);
  background: rgba(10, 16, 24, 0.9);
  color: var(--qp-ink);
  font: 700 16px/1 var(--qp-mono);
  cursor: pointer;
}

/* --------------------------------------------------------- incident bar */

.qp-inc {
  position: absolute;
  top: 92px; left: 20px; right: 20px;
  padding: 10px 14px 12px;
  background: rgba(8, 14, 24, 0.94);
  border: 1px solid var(--qp-line);
  border-left: 4px solid var(--qp-cyan);
  text-align: center;
}
.qp-inc.is-curb { border-left-color: var(--qp-red); }
.qp-inc.is-dossier { border-left-color: var(--qp-gold); }
.qp-inc.is-watcher { border-left-color: #6f8fd8; }
.qp-inc.is-ask { border-left-color: #9fd8ff; }
.qp-inc-kicker {
  margin: 0;
  font: 700 24px/1.05 var(--qp-cond);
  letter-spacing: 0.05em;
  color: var(--qp-ink);
}
.qp-inc-hint {
  margin: 4px 0 8px;
  font: 400 15px/1.2 var(--qp-mono);
  letter-spacing: 0.08em;
  color: var(--qp-ink-dim);
}
.qp-inc-track { height: 5px; background: rgba(255, 255, 255, 0.09); }
.qp-inc-track i {
  display: block; height: 100%; width: 100%;
  background: var(--qp-cyan);
}

/* --------------------------------------------------------- comms + toast */

/* The parade walks at canvas y 510-588, so the two message strips live either
   side of it: comms down over the road, her barks up in the sky under the
   incident bar. Nothing readable is ever allowed to cover the procession —
   watching it grow is the entire game. */
.qp-aria-strip {
  position: absolute;
  left: 16px; right: 16px;
  top: 704px;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: rgba(6, 12, 20, 0.9);
  border: 1px solid rgba(95, 216, 255, 0.28);
}
.qp-aria-face {
  width: 46px; height: 46px;
  object-fit: cover;
  border: 1px solid rgba(95, 216, 255, 0.4);
  flex: none;
}
.qp-aria-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qp-aria-name {
  font: 700 12px/1 var(--qp-mono);
  letter-spacing: 0.18em;
  color: var(--qp-cyan);
}
.qp-aria-line { font: 400 19px/1.15 var(--qp-cond); color: var(--qp-ink); }

.qp-toast {
  position: absolute;
  left: 16px; right: 16px;
  top: 214px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 12px;
  background: rgba(14, 10, 8, 0.9);
  border-left: 3px solid var(--qp-gold);
}
.qp-toast-name {
  font: 700 12px/1 var(--qp-mono);
  letter-spacing: 0.16em;
  color: var(--qp-gold);
}
.qp-toast-line { font: 400 19px/1.15 var(--qp-cond); color: var(--qp-ink); }

/* ------------------------------------------------------------- abilities */
/* Left gutter beside the handheld. The right gutter belongs to LOOK UP and
   nothing else — it is the button you reach for under pressure. */

.qp-ab {
  position: absolute;
  width: 132px;
  padding: 10px 6px 12px;
  background: rgba(8, 14, 24, 0.92);
  border: 1px solid var(--qp-line);
  color: var(--qp-ink-dim);
  cursor: pointer;
  overflow: hidden;
  text-align: center;
}
.qp-ab b {
  display: block;
  font: 700 22px/1 var(--qp-cond);
  letter-spacing: 0.06em;
}
.qp-ab i {
  display: block;
  font: 400 12px/1.15 var(--qp-mono);
  font-style: normal;
  letter-spacing: 0.06em;
  margin-top: 3px;
  opacity: 0.75;
}
.qp-ab .qp-cd {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 0%;
  background: rgba(4, 8, 14, 0.74);
  pointer-events: none;
}
.qp-ab.is-ready { color: var(--qp-ink); border-color: rgba(95, 216, 255, 0.5); }
.qp-ab.is-ready b { color: var(--qp-cyan); }
.qp-ab:disabled { opacity: 0.4; cursor: default; }

#qp-ab-speak { left: 16px; bottom: 300px; }
#qp-ab-speak.is-ready { box-shadow: 0 0 0 1px rgba(95, 216, 255, 0.25), 0 0 22px rgba(95, 216, 255, 0.16); }
#qp-ab-whisper { left: 16px; bottom: 176px; }
#qp-ab-whisper.is-ready b { color: var(--qp-green); }

.qp-look {
  position: absolute;
  right: 16px; bottom: 176px;
  width: 132px; height: 256px;
  background: rgba(8, 14, 24, 0.92);
  border: 1px solid rgba(95, 216, 255, 0.45);
  color: var(--qp-cyan);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 700 26px/1 var(--qp-cond);
  letter-spacing: 0.08em;
}
.qp-look span { font-size: 44px; line-height: 1; }
.qp-look small {
  font: 400 12px/1.2 var(--qp-mono);
  color: var(--qp-ink-dim);
  letter-spacing: 0.06em;
  padding: 0 8px;
  text-align: center;
}
.qp-look:active { background: rgba(20, 46, 62, 0.95); }

/* --------------------------------------------------------------- station */

.qp-station {
  position: absolute;
  left: 40px; right: 40px;
  top: 168px;
  padding: 22px 22px 26px;
  background: rgba(6, 12, 20, 0.97);
  border: 1px solid rgba(95, 216, 255, 0.4);
  text-align: center;
  pointer-events: auto;
  z-index: 4;
}
.qp-station h3 {
  margin: 6px 0 4px;
  font: 700 40px/1 var(--qp-cond);
  letter-spacing: 0.03em;
}
.qp-station p { margin: 0 0 10px; font: 400 19px/1.3 var(--qp-cond); color: var(--qp-ink-dim); }
.qp-cadence {
  position: relative;
  height: 34px;
  margin: 16px 0 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--qp-line);
}
.qp-cadence-window {
  position: absolute;
  top: 0; bottom: 0;
  left: 33%;
  width: 34%;
  background: rgba(87, 224, 138, 0.22);
  border-left: 1px solid rgba(87, 224, 138, 0.6);
  border-right: 1px solid rgba(87, 224, 138, 0.6);
}
.qp-cadence i {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 3px;
  margin-left: -1px;
  background: var(--qp-gold);
}
.qp-station-verdict {
  font: 700 22px/1.2 var(--qp-cond) !important;
  color: var(--qp-gold) !important;
}

/* --------------------------------------------------------------- screens */
/* Title, block brief, pause and the hearing all share one overlay. It scrolls
   internally so a long hearing never grows the stage. */

.qp-screen {
  position: absolute;
  inset: 0;
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(to bottom, rgba(4, 7, 12, 0.96), rgba(4, 7, 12, 0.99));
  padding: 30px 26px 40px;
  z-index: 5;
}
.qp-screen.is-open { display: block; }
.qp-screen.is-brief,
.qp-screen.is-pause { background: rgba(4, 7, 12, 0.9); }

.qp-kicker {
  margin: 0 0 6px;
  font: 400 14px/1.3 var(--qp-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--qp-cyan-dim);
}
.qp-kicker-mid { margin-top: 26px; }

.qp-title {
  margin: 0 0 8px;
  font: 700 60px/0.94 var(--qp-cond);
  letter-spacing: 0.01em;
  color: var(--qp-ink);
}
.qp-tag {
  margin: 0 0 14px;
  font: 400 26px/1.2 var(--qp-cond);
  color: var(--qp-ink-dim);
}
.qp-tag b { color: var(--qp-gold); font-weight: 700; }
.qp-blurb {
  margin: 0 0 18px;
  font: 400 21px/1.35 var(--qp-cond);
  color: var(--qp-ink);
  max-width: 60ch;
}

.qp-how { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.qp-how li {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid var(--qp-cyan-dim);
}
.qp-how b {
  font: 700 14px/1.2 var(--qp-mono);
  letter-spacing: 0.1em;
  color: var(--qp-cyan);
}
.qp-how span { font: 400 19px/1.25 var(--qp-cond); color: var(--qp-ink-dim); }

.qp-loadouts { display: grid; gap: 10px; }
.qp-lo {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 16px 16px;
  background: rgba(10, 16, 24, 0.9);
  border: 1px solid var(--qp-line);
  color: var(--qp-ink);
  cursor: pointer;
  position: relative;
}
.qp-lo:hover, .qp-lo:focus-visible {
  border-color: rgba(95, 216, 255, 0.55);
  background: rgba(16, 28, 40, 0.95);
}
.qp-lo-tag {
  position: absolute;
  top: 12px; right: 14px;
  font: 700 12px/1 var(--qp-mono);
  letter-spacing: 0.14em;
  color: var(--qp-cyan-dim);
}
.qp-lo b { display: block; font: 700 30px/1 var(--qp-cond); letter-spacing: 0.02em; }
.qp-lo i {
  display: block;
  font: 400 15px/1.2 var(--qp-mono);
  font-style: normal;
  color: var(--qp-ink-dim);
  margin: 2px 0 8px;
}
.qp-lo-blurb { display: block; font: 400 19px/1.3 var(--qp-cond); color: var(--qp-ink-dim); }
.qp-lo-stats { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.qp-lo-stats em {
  font: 400 13px/1 var(--qp-mono);
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--qp-cyan);
}

.qp-best {
  margin: 18px 0 0;
  font: 400 15px/1.4 var(--qp-mono);
  letter-spacing: 0.08em;
  color: var(--qp-ink-dim);
}
.qp-legal-sm {
  margin: 14px 0 0;
  font: 400 14px/1.4 var(--qp-cond);
  color: rgba(125, 144, 163, 0.75);
}

/* brief */
.qp-brief { max-width: 620px; margin: 90px auto 0; text-align: center; }
.qp-brief h2 { margin: 0 0 4px; font: 700 46px/1 var(--qp-cond); }
.qp-brief-sub { margin: 0 0 16px; font: 400 19px/1.2 var(--qp-mono); color: var(--qp-cyan-dim); }
.qp-brief-body { margin: 0 auto 20px; font: 400 22px/1.35 var(--qp-cond); color: var(--qp-ink); max-width: 52ch; }
.qp-brief-stats { display: flex; justify-content: center; gap: 26px; margin-bottom: 24px; }
.qp-brief-stats span { display: flex; flex-direction: column; gap: 2px; font: 400 13px/1 var(--qp-mono); letter-spacing: 0.12em; color: var(--qp-ink-dim); }
.qp-brief-stats b { font: 700 38px/1 var(--qp-cond); color: var(--qp-ink); }

.qp-btn {
  display: inline-block;
  padding: 14px 28px;
  background: var(--qp-cyan);
  border: 0;
  color: #04121b;
  font: 700 22px/1 var(--qp-cond);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.qp-btn:hover, .qp-btn:focus-visible { background: #8fe6ff; }
.qp-btn.is-ghost {
  background: transparent;
  border: 1px solid var(--qp-line);
  color: var(--qp-ink);
}
.qp-btn.is-ghost:hover { border-color: var(--qp-cyan); color: var(--qp-cyan); }

/* hearing */
.qp-hearing { max-width: 640px; margin: 0 auto; }
.qp-standing { margin: 0 0 6px; font: 700 50px/0.98 var(--qp-cond); color: var(--qp-gold); }
.qp-standing-note { margin: 0 0 14px; font: 400 21px/1.3 var(--qp-cond); color: var(--qp-ink); }
.qp-reason {
  margin: 0 0 18px;
  font: 400 14px/1.4 var(--qp-mono);
  letter-spacing: 0.06em;
  color: var(--qp-ink-dim);
}
.qp-score {
  font: 700 72px/0.9 var(--qp-cond);
  color: var(--qp-ink);
  margin-bottom: 18px;
}
.qp-score span {
  display: block;
  font: 400 14px/1 var(--qp-mono);
  letter-spacing: 0.16em;
  color: var(--qp-cyan-dim);
  margin-top: 6px;
}
.qp-tally { display: grid; gap: 2px; margin-bottom: 16px; }
.qp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
}
.qp-row span { font: 400 15px/1 var(--qp-mono); letter-spacing: 0.08em; color: var(--qp-ink-dim); }
.qp-row b { font: 700 24px/1 var(--qp-cond); color: var(--qp-ink); }

.qp-cites { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.qp-cites li {
  padding: 9px 12px;
  border-left: 2px solid var(--qp-cyan-dim);
  background: rgba(255, 255, 255, 0.025);
  font: 400 18px/1.3 var(--qp-cond);
  color: var(--qp-ink-dim);
}

.qp-hearing-btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* pause */
.qp-pause { max-width: 560px; margin: 150px auto 0; text-align: center; }
.qp-pause h2 { margin: 0 0 10px; font: 700 42px/1 var(--qp-cond); }
.qp-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  font: 400 20px/1 var(--qp-cond);
  color: var(--qp-ink);
  cursor: pointer;
}
.qp-opt input { width: 22px; height: 22px; accent-color: var(--qp-cyan); }
.qp-pause .qp-hearing-btns { justify-content: center; margin-top: 16px; }

/* ----------------------------------------------------------------- legal */

.qp-legal {
  flex: none;
  max-width: 860px;
  margin: 0.3rem auto 0;
  padding: 0 1rem;
  text-align: center;
  font: 400 0.74rem/1.3 var(--qp-cond);
  color: var(--qp-ink-dim);
}

/* Short desktop windows: the legal line is the first thing to go. It is still
   on the title screen inside the stage, so nothing is actually lost. */
@media (max-height: 900px) {
  .qp-legal { display: none; }
}

/* ------------------------------------------------------------ fullscreen */
/* The honest answer to "it is small on a PC": a portrait game on a landscape
   monitor is height-bound, so hand it the whole screen. 1080p goes from a
   537px-wide stage to 607px, and a tall monitor gains a lot more. */

.qp-full-btn {
  flex: none;
  padding: 0.32rem 0.7rem;
  background: transparent;
  border: 1px solid var(--qp-line);
  color: var(--qp-ink-dim);
  font: 700 0.72rem/1 var(--qp-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.qp-full-btn:hover,
.qp-full-btn:focus-visible { color: var(--qp-cyan); border-color: var(--qp-cyan); }

.qp-wrap:fullscreen { background: var(--qp-bg); padding: 0; }
.qp-wrap:-webkit-full-screen { background: var(--qp-bg); }

/* ----------------------------------------------------- narrow + reduced */

@media (max-width: 480px) {
  .qp-top .main-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .qp-meter-track i,
  .qp-progress-wrap i { transition: none; }
}