/* The show's own type (self-hosted woff2, SIL OFL, see fonts/NOTICE): Figtree for the interface, the script and the display headings; Comic Neue Bold for speech balloons and weapon captions. */
@font-face { font-family: "Figtree"; src: url(fonts/figtree/figtree-v1.woff2) format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Comic Neue"; src: url(fonts/comicneue/comicneue-bold-v1.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
/* bōba viewer v4: a small theatre with the house lights on. A dark stage at the top illustrates; the script
   beneath it is the record. System fonts only; no external assets, no gradients.
   Colour policy: red/blue (--a/--b) identify a side on exactly four things: the 3px rule beside a message, the
   2px underline of a nameplate, timeline marks, and the characters' own sprites. Amber (--amber) marks "you can
   act here": wordmark, focus ring, playhead, Start, the "n new" pill, the "to the enemy" tag. --ok is for the
   LIVE pill only; tier colours only on 8px dots. Shadows only on the stage and the open drawer. */
:root {
  --bg: #f6f5f1;
  --surface: #edece7;
  --ink: #1b1b20;
  --muted: #686870;
  --line: #d9d8d2;
  --a: #c8372c;
  --b: #2f5fcf;
  --amber: #b57b00;
  --ok: #26a35b;
  --on-ok: #04140a;
  --on-amber: #15171c;
  --gold: #d4a017;
  --silver: #8f949c;
  --bronze: #b5733f;
  --stage: #0f1118;
  --stage-back: #181b26;
  --stage-floor: #0a0b10;
  --stage-ink: #e6e8f0;
  --stage-bubble: #262a3b;
  --stage-line: #3b4156;
  --stage-mute: #a3a8ba;
  --term-bg: #0c0d10;
  --term-ink: #d6d8de;
  --term-dim: #8b8e9b;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --display: "Figtree", "Arial Black", "Segoe UI Black", system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --comic: "Comic Neue", "Chalkboard SE", "Comic Sans MS", system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --barh: 44px;
  --gut: 24px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121317; --surface: #1b1c22; --ink: #ebebf0; --muted: #9b9da7; --line: #2a2b33;
    --a: #ff6a5c; --b: #6c9fff; --amber: #f2b705; --ok: #46d283;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--sans); }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* type scale: desktop / phone ------------------------------------------------------------------- */
.t-read { font: 400 17px/1.55 var(--sans); }
.t-name { font: 700 15px/1.3 var(--sans); }
.t-meta { font: 500 13px/1.4 var(--sans); color: var(--muted); }
.t-label { font: 700 11px/1.2 var(--sans); text-transform: uppercase; letter-spacing: 0.06em; }
.t-bubble { font: 500 15px/1.35 var(--sans); }
.t-display-s { font: 900 22px/1 var(--display); }
.t-display-m { font: 900 28px/1.1 var(--display); }
.t-display-l { font: 900 40px/1.05 var(--display); }
.t-mono { font: 400 12px/1.5 var(--mono); }
.t-mono-num { font: 500 13px/1.4 var(--mono); font-variant-numeric: tabular-nums; }

/* the bar: --bg with a hairline under it (no black band in light mode) ---------------------------- */
.bar { position: sticky; top: 0; z-index: 30; height: var(--barh); display: flex; align-items: center; gap: 12px; padding: 0 var(--gut); background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.brand { font: 900 22px/1 var(--display); letter-spacing: -0.03em; text-decoration: none; color: var(--amber); }
.pill { flex: none; font: 700 11px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 8px; border-radius: 4px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); }
.pill small { font-weight: 600; letter-spacing: 0; text-transform: none; }
.pill[data-state="live"] { background: var(--ok); border-color: var(--ok); color: var(--on-ok); }
.barnames { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 700 14px var(--sans); }
.barnames i { color: var(--muted); font-style: normal; font-weight: 400; }
.barr { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; }
.act { font: 700 11px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.bscore { font: 700 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.cnt, .clock { font: 500 13px/1.4 var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.clock { color: var(--ink); }
.bar.urgent .clock { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; }
.menubtn { width: 34px; height: 30px; display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; align-items: center; padding: 0; background: none; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.menubtn i { display: block; width: 14px; height: 2px; background: var(--ink); border-radius: 1px; }
.nojs { margin: 0; padding: 10px 16px; background: var(--amber); color: var(--on-amber); font-weight: 600; }

/* the theatre: stage, scrubber, column ------------------------------------------------------------ */
.theatre { max-width: 880px; margin: 0 auto; padding: 16px var(--gut) 0; display: flex; flex-direction: column; height: calc(100svh - var(--barh) - 1px); min-height: 520px; }
.stage { flex: none; display: none; }
body.js.view-arena .stage { display: block; }
.stagewrap { position: relative; margin: 0 auto; border-radius: 12px; overflow: hidden; background: var(--stage); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.stagearea { position: relative; overflow: hidden; }
.stagebg { position: absolute; left: 0; top: 0; z-index: 0; }
.stagecv, .stagefx { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; }
.stagecv { z-index: 2; pointer-events: none; }
.stagefx { z-index: 3; pointer-events: none; }
.stagearea.actchange { animation: actchange 0.9s ease-out; }
@keyframes actchange { 0% { filter: brightness(1); } 35% { filter: brightness(0.35); } 100% { filter: none; } }

/* the paintings: framed props on the back wall. A canvas on warm paper inside a mat and a wood moulding (the moulding is
   a box-shadow ring drawn by the script), a brass picture light above, a brass nameplate below. */
.gframe { position: relative; margin: 30px auto 34px; width: max-content; background: #e6dcc2; border-radius: 1px; }
.placard { position: absolute; z-index: 1; box-sizing: content-box; background: #e6dcc2; border-radius: 1px; cursor: pointer; outline: none; }
.placard canvas, .gframe canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; border-radius: 0; box-shadow: 0 0 0 1px rgba(40, 24, 4, 0.55); }
.placard:focus-visible { outline: 2px solid #f2b705; outline-offset: 10px; }
.placard .beam, .gframe .beam { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; background: radial-gradient(ellipse 70% 55% at 50% -6%, rgba(255, 244, 214, 0.30), rgba(255, 244, 214, 0) 70%), linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(30, 14, 0, 0.16) 100%); }
.placard .lamp, .gframe .lamp { position: absolute; left: 50%; height: 6px; transform: translateX(-50%); border-radius: 3px; background: linear-gradient(180deg, #f3d57a, #b8862c 55%, #7a561a); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), 0 7px 14px rgba(255, 228, 160, 0.35); pointer-events: none; }
.placard .lamp::after, .gframe .lamp::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; margin-left: -1px; background: #8a6420; }
.placard .nplate, .gframe .nplate { position: absolute; left: 50%; transform: translateX(-50%); padding: 0 8px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-family: var(--sans); font-weight: 700; color: #3a2606; background: linear-gradient(180deg, #f1d683, #bf8f33 60%, #94691f); border: 1px solid #5a3f10; border-radius: 2px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); pointer-events: none; }
/* the speech balloon: a comic-book balloon (light face, thick dark outline, a tail at the speaker). It is placed and
   fitted by the script so the speaker's whole line always fits; neutral, never red or blue. */
.bubble { position: absolute; z-index: 4; cursor: pointer; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.5)); --ballon-ink: #14151a; --ballon-face: #fffdf4; }
.bubble .bface { display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 6px 14px; background: var(--ballon-face); color: var(--ballon-ink); border: 3px solid var(--ballon-ink); border-radius: 26px; overflow: hidden; }
.bubble .btxt { margin: 0; text-align: center; font: 700 16px/1.2 var(--comic); white-space: normal; overflow-wrap: anywhere; }
.bubble .btail { position: absolute; bottom: -19px; width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 21px solid var(--ballon-ink); }
.bubble .btail::after { content: ""; position: absolute; left: -7px; top: -21px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 16px solid var(--ballon-face); }
.bubble.mega { --ballon-face: #ffe45c; }
.bubble.mega .bface { padding: 12px 20px; border: 0; border-radius: 0; background: var(--ballon-ink); clip-path: polygon(0.0% 0.0%, 6.2% 7.0%, 12.5% 0.0%, 18.8% 7.0%, 25.0% 0.0%, 31.2% 7.0%, 37.5% 0.0%, 43.8% 7.0%, 50.0% 0.0%, 56.2% 7.0%, 62.5% 0.0%, 68.8% 7.0%, 75.0% 0.0%, 81.2% 7.0%, 87.5% 0.0%, 93.8% 7.0%, 100.0% 0.0%, 93.0% 6.2%, 100.0% 12.5%, 93.0% 18.8%, 100.0% 25.0%, 93.0% 31.2%, 100.0% 37.5%, 93.0% 43.8%, 100.0% 50.0%, 93.0% 56.2%, 100.0% 62.5%, 93.0% 68.8%, 100.0% 75.0%, 93.0% 81.2%, 100.0% 87.5%, 93.0% 93.8%, 100.0% 100.0%, 93.8% 93.0%, 87.5% 100.0%, 81.2% 93.0%, 75.0% 100.0%, 68.8% 93.0%, 62.5% 100.0%, 56.2% 93.0%, 50.0% 100.0%, 43.8% 93.0%, 37.5% 100.0%, 31.2% 93.0%, 25.0% 100.0%, 18.8% 93.0%, 12.5% 100.0%, 6.2% 93.0%, 0.0% 100.0%, 7.0% 93.8%, 0.0% 87.5%, 7.0% 81.2%, 0.0% 75.0%, 7.0% 68.8%, 0.0% 62.5%, 7.0% 56.2%, 0.0% 50.0%, 7.0% 43.8%, 0.0% 37.5%, 7.0% 31.2%, 0.0% 25.0%, 7.0% 18.8%, 0.0% 12.5%, 7.0% 6.2%); }
.bubble.mega .bface .btxt { box-sizing: border-box; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 14px 13%; background: var(--ballon-face); clip-path: polygon(0.0% 3.0%, 6.2% 10.0%, 12.5% 3.0%, 18.8% 10.0%, 25.0% 3.0%, 31.2% 10.0%, 37.5% 3.0%, 43.8% 10.0%, 50.0% 3.0%, 56.2% 10.0%, 62.5% 3.0%, 68.8% 10.0%, 75.0% 3.0%, 81.2% 10.0%, 87.5% 3.0%, 93.8% 10.0%, 97.0% 0.0%, 90.0% 6.2%, 97.0% 12.5%, 90.0% 18.8%, 97.0% 25.0%, 90.0% 31.2%, 97.0% 37.5%, 90.0% 43.8%, 97.0% 50.0%, 90.0% 56.2%, 97.0% 62.5%, 90.0% 68.8%, 97.0% 75.0%, 90.0% 81.2%, 97.0% 87.5%, 90.0% 93.8%, 100.0% 97.0%, 93.8% 90.0%, 87.5% 97.0%, 81.2% 90.0%, 75.0% 97.0%, 68.8% 90.0%, 62.5% 97.0%, 56.2% 90.0%, 50.0% 97.0%, 43.8% 90.0%, 37.5% 97.0%, 31.2% 90.0%, 25.0% 97.0%, 18.8% 90.0%, 12.5% 97.0%, 6.2% 90.0%, 3.0% 100.0%, 10.0% 93.8%, 3.0% 87.5%, 10.0% 81.2%, 3.0% 75.0%, 10.0% 68.8%, 3.0% 62.5%, 10.0% 56.2%, 3.0% 50.0%, 10.0% 43.8%, 3.0% 37.5%, 10.0% 31.2%, 3.0% 25.0%, 10.0% 18.8%, 3.0% 12.5%, 10.0% 6.2%); }
.bubble.mega .bface { position: relative; }
.bubble.bin { animation: bin 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bubble.bout { animation: bout 0.12s ease-in forwards; }
@keyframes bin { from { opacity: 0; transform: translateY(4px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes bout { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(4px); } }

/* the System speaks in one opaque lower third; hidden when empty */
.lthird { position: absolute; z-index: 5; left: 5%; right: 5%; bottom: 3%; max-height: 18%; min-height: 26px; display: flex; align-items: center; justify-content: center; padding: 4px 10px; text-align: center; background: var(--stage-floor); border: 1px solid var(--stage-line); color: var(--stage-ink); font: 600 13px/1.25 var(--sans); overflow: hidden; }
.lthird .lt { min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.lthird b { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; }
.lthird.muted { color: var(--stage-mute); }
.lthird.bin { animation: bin 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
.actmark { position: absolute; z-index: 4; left: 12px; top: 5px; font: 700 11px/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--stage-mute); cursor: pointer; white-space: nowrap; }

/* footlights: the nameplates sit under the picture, not on it */
.footlights { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-height: 38px; padding: 4px 12px 0; background: var(--stage); color: var(--stage-ink); }
.fcol { min-width: 0; max-width: 48%; display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 12px; }
.fcol.cb { align-items: flex-end; text-align: right; }
.fstance { margin-top: 2px; font: 500 11px/1.3 var(--sans); color: var(--stage-mute); overflow-wrap: anywhere; }
.fl { min-width: 0; max-width: 100%; padding: 0 2px; border-bottom: 2px solid var(--a); font: 700 14px/1.4 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.fl.fb { border-bottom-color: var(--b); }

/* the start card (waiting) sits on the stage as an opaque card */
.stagearea .startpanel { position: absolute; z-index: 6; left: 22%; right: 22%; top: 5%; bottom: 5%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 16px; text-align: center; background: var(--stage-bubble); border: 1px solid var(--stage-line); border-radius: 8px; color: var(--stage-ink); overflow: hidden; }
.tonight { margin: 0; font: 700 11px/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--stage-mute); }
.vs { margin: 4px 0 0; font: 900 20px/1.15 var(--display); overflow-wrap: anywhere; }
.premise { margin: 2px 0 6px; max-width: 46ch; font: 400 13px/1.4 var(--sans); color: var(--stage-mute); }
.codeinput { display: block; width: 11ch; max-width: 100%; padding: 6px 4px 6px 0.4em; text-align: center; font: 700 24px/1.2 var(--mono); letter-spacing: 0.4em; color: var(--stage-ink); background: var(--stage); border: 2px solid var(--stage-line); border-radius: 4px; caret-color: var(--amber); }
.codeinput:focus { border-color: var(--amber); outline: 0; }
.codeinput.shake { animation: shake 0.35s linear; }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translate(-4px, 0); } 40% { transform: translate(4px, 0); } 60% { transform: translate(-3px, 0); } 80% { transform: translate(3px, 0); } }
.startbtn { margin: 6px 0 0; padding: 8px 22px; font: 900 15px var(--display); color: var(--on-amber); background: var(--amber); border: 0; border-radius: 4px; cursor: pointer; }
.startbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.startmsg { min-height: 1.3em; margin: 2px 0 0; color: var(--stage-ink); font: 600 13px var(--sans); }
.startnote { margin: 0; color: var(--stage-mute); font: 12px/1.4 var(--sans); }
.theatre:not(.waiting) .startpanel { display: none; }
body:not(.js) .startpanel { position: static; padding: 16px 0; text-align: left; background: none; color: inherit; border: 0; }
body:not(.js) .tonight, body:not(.js) .premise, body:not(.js) .startnote { color: var(--muted); }

/* the result (ended): one strip under the cast, so the characters and the last walls stay in view */
.stagearea .resultcard { position: absolute; z-index: 6; left: 5%; right: 5%; bottom: 3%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 12px; padding: 6px 12px; text-align: center; background: var(--stage-bubble); border: 1px solid var(--stage-line); border-radius: 8px; color: var(--stage-ink); overflow: hidden; }
.resultcard .rtitle { margin: 0; min-width: 0; font: 900 20px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultcard .rsub { margin: 0; font: 500 13px/1.4 var(--sans); color: var(--stage-mute); white-space: nowrap; }
.resultcard .rgoals { display: none; }
.resultcard .racts { display: flex; gap: 14px; align-items: center; margin-left: 8px; }
.rbtn { padding: 6px 14px; background: none; border: 1px solid var(--amber); border-radius: 4px; color: var(--stage-ink); font: 700 13px var(--sans); cursor: pointer; }
.rlink { background: none; border: 0; padding: 0; color: var(--stage-ink); font: 600 13px var(--sans); text-decoration: underline; cursor: pointer; }

/* the scrubber: at rest a 4px line in act segments (24px hit area); it opens in place when touched */
.timeline { flex: none; position: relative; margin-top: 8px; }
.tl-row { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.tl-track { position: relative; flex: 1; height: 8px; min-width: 0; touch-action: none; cursor: pointer; transition: height 0.15s; }
.tl-track::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
.timeline.open .tl-track { height: 56px; }
.tl-track canvas { position: absolute; left: 0; top: -2px; width: 100%; height: 12px; }
.timeline.open .tl-track canvas { top: 0; height: 100%; }
.tl-play { flex: none; width: 24px; height: 24px; padding: 0; background: none; border: 1px solid var(--line); border-radius: 4px; font-size: 11px; line-height: 1; cursor: pointer; }
.tl-live { flex: none; background: none; border: 0; padding: 0 2px; color: var(--amber); font: 700 11px/24px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.tl-label { margin: 2px 0 0; font: 500 12px var(--mono); color: var(--muted); }
.tl-tip { position: absolute; z-index: 20; bottom: 100%; transform: translateX(-50%); max-width: min(420px, 92vw); padding: 5px 9px; background: var(--ink); color: var(--bg); font: 500 12px/1.3 var(--sans); border-radius: 4px; pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the conversation: one centred column of reading text ---------------------------------------------- */
.convowrap { position: relative; flex: 1 1 auto; min-height: 200px; display: flex; }
.convo { flex: 1; width: 100%; max-width: 680px; margin: 8px auto 0; padding: 0 0 48px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.about { margin: 8px 0 0; max-width: 62ch; font: 500 13px/1.5 var(--sans); color: var(--muted); }
.cm { margin: 24px 0 0; padding-left: 16px; border-left: 3px solid var(--line); }
.cm.by-a { border-left-color: var(--a); } .cm.by-b { border-left-color: var(--b); }
.cm.fresh, .grp.fresh, .sysln.fresh { animation: freshfade 0.4s ease-out; }
@keyframes freshfade { from { background: var(--surface); } to { background: transparent; } }
.cmeta { font: 500 13px/1.4 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.cname { display: inline; margin: 0; font: 700 15px/1.3 var(--sans); color: var(--ink); }
.cbody { font: 400 17px/1.55 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 62ch; }
.csubj { font-weight: 600; }
.cm.at, .grp.at, .line.at, .actcard.at, .sysln.at { background: var(--surface); }
.cm.at { border-left-width: 6px; padding-left: 13px; }
.cq { margin: 16px 0 0; font: 500 13px/1.4 var(--sans); color: var(--muted); }
.cend { margin: 24px 0 8px; font: 500 13px/1.4 var(--sans); color: var(--muted); }
.cempty { margin: 18px 0; color: var(--muted); font-size: 14px; }
.sysln { margin: 16px 0 0; font: 500 13px/1.4 var(--sans); color: var(--muted); max-width: 62ch; }
.sysln b { color: var(--ink); font-weight: 700; }
.sysln .tdot { margin-right: 6px; }

.actcard { margin: 32px 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
.actcard h2 { margin: 0; font: 900 28px/1.1 var(--display); letter-spacing: -0.01em; }
.actcard .an { margin: 4px 0 0; font: 700 15px/1.3 var(--sans); }
.actcard .ar { margin: 2px 0 0; font: 500 13px/1.4 var(--sans); color: var(--muted); overflow-wrap: anywhere; }
.rescard { margin: 8px 0 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.rescard h2 { margin: 0 0 4px; font: 700 11px/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rescard p { margin: 4px 0 0; font: 400 15px/1.5 var(--sans); overflow-wrap: anywhere; }
.teach { margin: 0 0 0 15px; font: 500 12px/1.4 var(--sans); color: var(--muted); }

.newpill { position: absolute; right: 8px; bottom: 12px; z-index: 5; padding: 6px 12px; border: 0; border-radius: 4px; background: var(--amber); color: var(--on-amber); font: 700 13px var(--sans); cursor: pointer; }

/* asides: everything between two official messages, folded into one quiet sentence */
.grp { margin: 12px 0 0 15px; }
.gsum { display: flex; align-items: baseline; gap: 6px; width: 100%; padding: 2px 0; background: none; border: 0; text-align: left; font: 500 13px/1.4 var(--sans); color: var(--muted); cursor: pointer; }
.gsum::before { content: "\25B8"; flex: none; font-size: 10px; }
.grp.open .gsum::before { content: "\25BE"; }
.gsum .gt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsum .nmk { color: var(--ink); }
.gsum .enemy { color: var(--amber); font-weight: 700; }
.gbody { margin: 2px 0 6px; padding-left: 12px; border-left: 1px dashed var(--line); }
.grp:not(.open) .gbody { display: none; }
.grp .line { margin: 8px 0; font: 500 13px/1.4 var(--sans); color: var(--muted); white-space: normal; }
.grp .line .ts { font: 12px var(--mono); margin-right: 8px; }
.grp .whisper .hdr { font: 500 13px/1.4 var(--sans); color: var(--muted); }
.grp .whisper .body { margin-top: 2px; font: italic 400 15px/1.5 var(--sans); color: var(--ink); max-width: 62ch; overflow-wrap: anywhere; }
.grp .whisper.enemy { border-left: 2px solid var(--amber); padding-left: 8px; }
.wtag { margin-left: 6px; padding: 0 5px; border: 1px solid var(--amber); border-radius: 4px; color: var(--amber); font: 700 11px var(--sans); }
.grp .k-paint .ops { display: none; padding-left: 14px; font: 12px/1.5 var(--mono); }
.grp .k-paint.open .ops { display: block; }
.grp .k-paint .sumtoggle { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.grp .ops .dropped { color: var(--ink); text-decoration: line-through; }
.grp .ann b { color: var(--ink); }
.tdot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); vertical-align: middle; }
.tdot.t-gold { background: var(--gold); } .tdot.t-silver { background: var(--silver); } .tdot.t-bronze { background: var(--bronze); } .tdot.t-sys { background: transparent; border: 1px solid var(--muted); }
body.no-whispers .grp .whisper { display: none; }

.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; padding: 14px 16px 22px; color: var(--muted); font: 500 13px/1.4 var(--sans); text-align: center; }

/* walls view (and the no-JS fallback): both walls, integer scale, no stage ------------------------ */
.fields { display: none; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
body:not(.js) .fields, body.js.view-fields .fields { display: grid; }
body.js.view-fields .theatre { height: auto; }
body.js.view-fields .convowrap { height: 340px; flex: none; }
.fieldblock { min-width: 0; }
.screen { width: 100%; padding: 8px; background: var(--stage-floor); border: 4px solid var(--stage-floor); display: flex; justify-content: center; }
.glass { position: relative; background: var(--stage); }
body.js .fieldblock .screen { padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, #2e2540, #17121f 78%, #241a1c 78%); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
body.js .fieldblock .glass { background: transparent; }
.field { display: block; width: 320px; height: 320px; image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; background: var(--stage); }
.caption { margin: 8px 0 0; text-align: center; font: 500 13px/1.4 var(--sans); color: var(--muted); }
.ctext { font: 12px var(--mono); }

/* the gallery: one painting at a time, as big as the screen allows, on its own paper */
body.galopen { overflow: hidden; }
.gallery { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 8px 16px 16px; background-color: #0a0704; background-image: radial-gradient(ellipse at 50% 30%, rgba(52, 38, 22, 1), rgba(10, 7, 4, 1) 75%); outline: none; }
.gmain { flex: none; display: flex; flex-direction: column; align-items: center; max-width: 100%; margin-top: 18px; }
.gallery .gframe { margin: 22px auto 30px; }
.gclose { position: fixed; top: 10px; right: 12px; z-index: 2; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; background: rgba(20, 14, 8, 0.7); color: #f4ecd8; font: 400 26px/1 var(--sans); cursor: pointer; }
.gclose:hover { background: rgba(60, 44, 24, 0.9); }
.gcap > * { flex: none; }
.gcap { width: min(640px, 100%); display: flex; flex-direction: column; gap: 4px; color: #efe6d0; text-align: center; }
.gwho { margin: 0; font: 800 17px/1.3 var(--sans); overflow-wrap: anywhere; }
.gmeta { margin: 0; font: 500 13px/1.3 var(--sans); color: #b9ac90; }
.gcmd { margin: 4px 0 0; padding: 8px 10px; max-height: 5.6em; overflow: auto; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.4 var(--mono); color: #e8dfc6; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px; }
.gnavbar { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; }
.gnav { min-width: 104px; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 6px; background: rgba(255, 255, 255, 0.07); color: #f4ecd8; font: 700 14px var(--sans); cursor: pointer; }
.gnav:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
.gnav:disabled { opacity: 0.35; cursor: default; }
.gcount { font: 600 13px var(--sans); color: #b9ac90; min-width: 64px; }
.gallery button:focus-visible, .gallery .gcmd:focus-visible { outline: 2px solid #f2b705; outline-offset: 2px; }
/* the Walls view: the same framed props */
body.js .field.master { display: none; }
.fvframe { margin: 30px auto 36px; }
.convo .wthumb[role="button"], .pthumb[role="button"] { cursor: zoom-in; }

/* the drawer: right side on desktop, a bottom sheet on phones ---------------------------------------- */
.scrim { display: none; }
body.js .scrim { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(8, 10, 16, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
body.js .scrim.on { opacity: 1; pointer-events: auto; }
.drawer { background: var(--bg); color: var(--ink); }
body.js .drawer { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw; display: flex; flex-direction: column; transform: translateX(105%); visibility: hidden; transition: transform 0.22s, visibility 0s 0.22s; box-shadow: 0 0 24px rgba(0, 0, 0, 0.3); border-left: 1px solid var(--line); }
body.js .drawer.open { transform: none; visibility: visible; transition: transform 0.22s; }
body:not(.js) .drawer { max-width: 680px; margin: 24px auto; padding: 0 16px; }
body:not(.js) .dhead, body:not(.js) .scrim, body:not(.js) .viewrow { display: none; }
.dhead { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 8px 0 12px; border-bottom: 1px solid var(--line); }
.dtabs { display: flex; flex: 1; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.dtabs button { flex: none; padding: 10px 8px; background: none; border: 0; border-bottom: 2px solid transparent; font: 700 11px/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); cursor: pointer; white-space: nowrap; }
.dtabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--amber); }
.dclose { flex: none; width: 32px; height: 32px; background: none; border: 0; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
.dbody { flex: 1; overflow-y: auto; padding: 16px 16px 24px; }
body.js .dpanel { display: none; }
body.js .drawer[data-tab="cast"] #pn-cast, body.js .drawer[data-tab="show"] #pn-show,
body.js .drawer[data-tab="machines"] #pn-machines, body.js .drawer[data-tab="console"] #pn-console { display: block; }
.dh { margin: 0 0 12px; font: 700 15px/1.3 var(--sans); }
.drawer .dpanel { font: 400 14px/1.5 var(--sans); }

/* the pinned view row: every tab */
.viewrow { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 16px; border-top: 1px solid var(--line); background: var(--surface); }
.vgroup { display: inline-flex; align-items: center; gap: 6px; }
.vgroup > span { font: 700 11px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.seg button { padding: 4px 8px; background: none; border: 0; font: 600 12px var(--sans); color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* cast: three text styles per card (name / meta / reading) */
.persona { padding: 0 0 16px; margin: 0 0 16px; border-bottom: 1px solid var(--line); }
.phead { display: flex; gap: 12px; align-items: center; }
.crest { position: relative; flex: none; width: 64px; height: 64px; background: var(--term-bg); overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 0; }
.crest canvas { width: 64px; height: 64px; image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; display: block; }
.crest .q { display: none; }
.persona.pending .crest .q { display: block; font: 900 24px var(--display); color: var(--amber); }
.pname { margin: 0; font: 700 15px/1.3 var(--sans); overflow-wrap: anywhere; }
.persona.pending .pname { color: var(--muted); }
.voice { margin: 0; font: italic 500 13px/1.4 var(--sans); color: var(--muted); }
.voice:empty { display: none; }
.pstatus { display: none; margin: 4px 0 0; font: 500 13px/1.4 var(--sans); color: var(--muted); }
.persona.pending .pstatus { display: block; }
.ps-wait { display: none; }
.theatre.waiting ~ .drawer .ps-wait { display: inline; }
.theatre.waiting ~ .drawer .ps-boot { display: none; }
.persona.pending .abody, .persona.pending .score { display: none; }
.abody { margin-top: 12px; }
.abody p { margin: 8px 0 0; font: 400 15px/1.5 var(--sans); overflow-wrap: anywhere; }
.abody .grudge { color: var(--muted); }
.secret { padding: 6px 10px; border-left: 3px solid var(--amber); background: var(--surface); }
.secret .goal { display: none; }
.secret .redact { display: inline-block; padding: 0 8px; background: var(--ink); color: var(--bg); font: 700 10px/1.5 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; user-select: none; }
.secret.open .goal { display: inline; }
.secret.open .redact { display: none; }
.score { margin-top: 8px; font: 500 13px/1.4 var(--sans); color: var(--muted); }
.score b { color: var(--ink); font: 600 13px var(--mono); }
.achrow { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0; background: none; border: 0; cursor: pointer; font: 500 13px var(--sans); color: var(--muted); }
.achv { list-style: none; margin: 4px 0 0; padding: 0; }
.persona:not(.achopen) .achv, .advbox:not(.achopen) .achv { display: none; }
.achv li { display: flex; align-items: center; gap: 8px; padding: 2px 0; min-width: 0; font: 500 13px var(--sans); }
.achv li b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.achv li .ts { flex: none; margin-left: auto; color: var(--muted); font: 12px var(--mono); }
.persona.flash, .advbox.flash { background: var(--surface); }
.advbox { margin-top: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.advhead { display: flex; gap: 10px; align-items: center; }
.chiplogo { flex: none; width: 32px; height: 32px; background: var(--term-bg); display: inline-block; overflow: hidden; border-radius: 0; }
.chiplogo canvas { display: block; width: 32px; height: 32px; image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; }
.chipname { min-width: 0; font: 700 15px/1.3 var(--sans); overflow-wrap: anywhere; }
.advbox.pending .chipname { color: var(--muted); font-weight: 500; }
.chiplight { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.advvoice { margin: 4px 0 0; font: italic 500 13px/1.4 var(--sans); color: var(--muted); }
.advvoice:empty { display: none; }
.advstory { margin: 8px 0 0; font: 400 15px/1.5 var(--sans); overflow-wrap: anywhere; }
.advbox .secret { margin-top: 8px; }
.advcon { margin-top: 8px; padding: 0; background: none; border: 0; color: var(--ink); font: 600 13px var(--sans); text-decoration: underline; cursor: pointer; }
.abadge { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.abn { font: 700 11px var(--mono); color: var(--muted); }

/* show: the act ladder, viewers, the System's log */
.sysfloor { margin: 0; font: 700 15px/1.3 var(--sans); }
.floornote { margin: 2px 0 8px; color: var(--muted); font: 500 13px/1.4 var(--sans); }
.ladder { list-style: none; margin: 8px 0 12px; padding: 0; }
.ladder li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font: 500 14px/1.4 var(--sans); }
.ladder .num { flex: none; width: 2.2em; font: 900 14px var(--display); }
.ladder li.now .nm2 { font-weight: 700; }
.ladder li.now .num { color: var(--amber); }
.ladder .res { margin-left: auto; color: var(--muted); font-size: 13px; }
.sysviewers { margin: 0 0 8px; font: 500 13px/1.4 var(--sans); color: var(--muted); }
.matchach { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.mach { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px 1px 7px; border: 1px solid var(--line); border-radius: 4px; font: 500 13px var(--sans); }
.sysitems { list-style: none; margin: 8px 0; padding: 0; }
.sysitems li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); }
.sysitems .ts { color: var(--muted); font: 12px var(--mono); flex: none; }
.sysitems .slb { color: var(--muted); }
.bronzebox { margin-top: 8px; font: 500 13px var(--sans); }
.bronzebox summary { cursor: pointer; color: var(--muted); }

/* machines: the premise made literal (terminal look is allowed here) */
.mside { margin-bottom: 20px; }
.mrow { margin-bottom: 8px; background: #111319; color: #c9ccd6; font: 12px/1.4 var(--mono); border-radius: 8px; overflow: hidden; }
.mhead { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; background: #15171d; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mname { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mmini { margin-left: auto; color: var(--term-dim); white-space: nowrap; }
.light { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #5d5f6b; }
.mrow[data-lamp="ok"] .light { background: var(--ok); } .mrow[data-lamp="warn"] .light { background: var(--amber); } .mrow[data-lamp="bad"] .light { background: var(--a); }
.mbody { padding: 8px 10px; border-top: 1px solid #23252c; }
.mrow:not(.open) .mbody { display: none; }
.prow { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.gauge { display: grid; grid-template-columns: 2.6em 1fr auto; gap: 2px 8px; align-items: center; margin-top: 4px; }
.gl { color: var(--term-dim); } .gbar { height: 6px; background: #252832; overflow: hidden; } .gbar i { display: block; height: 100%; width: 0; background: #8a8fa0; }
.gv { text-align: right; font-variant-numeric: tabular-nums; }
.spark { grid-column: 2 / -1; height: 14px; } .spark canvas { display: block; width: 100%; height: 100%; background: #171a21; }
.fresh2 { margin-top: 6px; color: var(--term-dim); }
.mrow.stale .fresh2 { color: #ff9a62; }
.mrow.stale .gbar i, .mrow.stale .spark { opacity: 0.35; }
.mgone { display: none; color: var(--term-dim); }
.mrow.gone .prow, .mrow.gone .gauge, .mrow.gone .fresh2, .mrow.gone .verify { display: none; }
.mrow.gone .mgone { display: block; }
.verify { margin-top: 6px; } .verify summary { cursor: pointer; color: #aeb1bd; }
.verify dl { margin: 6px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; }
.verify dt { color: var(--term-dim); } .verify dd { margin: 0; user-select: all; overflow-wrap: anywhere; color: #e6e8ee; }
.v-expl { margin: 6px 0 0; font: 12px/1.45 var(--sans); }
.v-cmd { margin: 4px 0 0; padding: 6px 8px; background: #07080a; color: #b6e08a; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.filespane { padding: 8px 10px; margin-bottom: 8px; background: #111319; color: #c9ccd6; font: 12px/1.4 var(--mono); border-radius: 8px; }
.fh { margin: 0 0 4px; color: var(--term-dim); }
.files { list-style: none; margin: 0; padding: 0; } .files li { display: flex; gap: 10px; padding: 2px 0; }
.files button { font: inherit; color: #8db8ff; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: underline; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files .sz, .fv { color: var(--term-dim); } .fv { margin: 6px 0 0; }
.filebody { margin: 6px 0 0; padding: 8px; max-height: 200px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: #07080a; color: var(--term-ink); font: 12px/1.5 var(--mono); border-radius: 4px; }

/* console: one terminal at a time with a seat switcher */
.seatseg { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.seatseg button { padding: 4px 8px; background: none; border: 1px solid var(--line); border-radius: 4px; font: 600 12px var(--mono); color: var(--muted); cursor: pointer; }
.seatseg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.consolebox { background: var(--term-bg); border-radius: 8px; }
.term { height: calc(100svh - 230px); min-height: 240px; overflow-y: auto; overscroll-behavior: contain; background: var(--term-bg); color: var(--term-ink); border-radius: 8px; padding: 8px 10px; font: 12px/1.5 var(--mono); }
.consolebox[data-filter="a0"] .term .line[data-seat]:not([data-seat="a0"]), .consolebox[data-filter="a1"] .term .line[data-seat]:not([data-seat="a1"]), .consolebox[data-filter="a2"] .term .line[data-seat]:not([data-seat="a2"]),
.consolebox[data-filter="b0"] .term .line[data-seat]:not([data-seat="b0"]), .consolebox[data-filter="b1"] .term .line[data-seat]:not([data-seat="b1"]), .consolebox[data-filter="b2"] .term .line[data-seat]:not([data-seat="b2"]) { display: none; }
body:not(.js) .term { height: 300px; }
.line { margin: 0 0 2px; overflow-wrap: anywhere; white-space: pre-wrap; }
.line .ts { color: #7a7d89; margin-right: 8px; user-select: none; }
.k-sys { color: var(--term-dim); } .k-warn { color: #ff9a62; } .k-intro { font-weight: 600; margin: 6px 0; } .k-end { color: var(--term-dim); font-style: italic; margin-top: 6px; }
.k-paint { color: var(--term-dim); } .sumtoggle { background: none; border: 0; padding: 0; font: inherit; color: var(--term-ink); cursor: pointer; text-align: left; }
.k-paint .ops { display: none; padding-left: 16px; } .k-paint.open .ops { display: block; } .ops .dropped { color: #ff9a62; }
.msg { margin: 8px 0; padding-left: 10px; border-left: 3px solid #3a3d48; font-family: var(--sans); font-size: 13px; line-height: 1.5; }
.msg.out.by-a { border-left-color: var(--a); } .msg.out.by-b { border-left-color: var(--b); } .msg .hdr { font: 11px var(--mono); color: var(--term-dim); } .msg.in { opacity: 0.8; }
.ref { margin-left: 8px; padding: 0 5px; border: 1px solid #3a3d48; color: var(--term-dim); font-size: 11px; cursor: copy; background: none; font-family: inherit; }
.cursor { color: var(--term-ink); animation: blink 1s steps(2, jump-none) infinite; } @keyframes blink { 50% { opacity: 0; } }
.line.ann { color: #b0b3bf; } .line.ann b { color: #e6e8ee; } .line.ann .annwho { font-style: italic; margin: 0 4px 0 6px; } .line.ann .tdot { margin-right: 6px; } .line.whisper { color: #a9acb8; }

/* plain pages (lobby, 404) */
.plainpage { max-width: 40rem; margin: 0 auto; padding: 8vh 20px 20px; }
.plainpage .brand { font-size: 3.4rem; margin: 0 0 12px; display: block; }
.lede { font: 900 1.3rem/1.3 var(--display); margin: 0 0 14px; }
.status { display: inline-block; font-weight: 600; padding: 5px 11px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.status.is-live { background: var(--ok); color: var(--on-ok); border-color: var(--ok); }
.fine { color: var(--muted); font-size: 0.9rem; }

/* phones: type steps down, the stage is 240px tall, the drawer is a bottom sheet ----------------------- */
@media (max-width: 820px) {
  :root { --gut: 16px; }
  .t-read, .cbody { font-size: 16px; }
  .t-name, .cname { font-size: 14px; }
  .t-display-l { font-size: 30px; }
  .bubble .bface { padding: 4px 10px; border-radius: 20px; border-width: 2px; }
  .bubble.mega .bface { padding: 8px 14px; }
  .bubble.mega .bface .btxt { padding: 9px 12%; }
  .bubble .btail { border-left-width: 9px; border-right-width: 9px; border-top-width: 17px; bottom: -15px; }
  .bubble .btail::after { left: -5px; top: -17px; border-left-width: 5px; border-right-width: 5px; border-top-width: 12px; }
  .lthird { left: 3%; right: 3%; bottom: 2%; max-height: 22%; min-height: 24px; padding: 3px 8px; font-size: 12px; }
  .footlights { min-height: 34px; }
  .fstance { display: none; } /* on a phone the stance is in the first card of the script and the Cast tab */
  .fl { max-width: 14ch; font-size: 13px; }
  .fcol { padding-bottom: 0; }
  .stagearea .startpanel { left: 6%; right: 6%; top: 6%; bottom: 6%; gap: 2px; padding: 6px 10px; }
  .stagearea .resultcard { left: 3%; right: 3%; bottom: 2%; gap: 0 8px; padding: 3px 8px; }
  .vs { font-size: 18px; }
  .premise { font-size: 12px; margin: 0 0 2px; }
  .codeinput { font-size: 20px; padding: 4px 2px 4px 0.4em; }
  .startbtn { margin-top: 4px; padding: 6px 18px; font-size: 14px; }
  .clock.ran { display: none; } /* the bar is one line: the running time gives way to the menu */
  .resultcard .rtitle { font-size: 16px; }
  .resultcard .rsub { font-size: 12px; }
  .resultcard .racts { margin-left: 0; gap: 10px; }
  .resultcard .rbtn { padding: 2px 10px; font-size: 12px; }
  .fields { grid-template-columns: 1fr; }
  .field { width: 288px; height: 288px; }
  body.js .drawer { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 85svh; max-width: none; border-left: 0; border-top: 1px solid var(--line); border-radius: 12px 12px 0 0; transform: translateY(105%); }
  body.js .drawer.open { transform: none; }
  .dhead::before { content: ""; position: absolute; left: 50%; top: 5px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--line); }
  .dhead { position: relative; padding-top: 14px; }
  .term { height: calc(85svh - 230px); }
}
@media (max-width: 560px) { .barnames { display: none; } .bar { gap: 10px; } .barr { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.advhead[data-lamp="ok"] .chiplight { background: var(--ok); } .advhead[data-lamp="warn"] .chiplight { background: var(--amber); } .advhead[data-lamp="bad"] .chiplight { background: var(--a); }
.actcard .teach { margin: 8px 0 0; }

/* WP7: verdicts, act-card walls, perks, the megaphone, the System's deliberation */
.actcard .verdict { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.actcard .vline { margin: 0; font: 400 15px/1.5 var(--sans); overflow-wrap: anywhere; }
.actcard .vline b { font-weight: 700; }
.actcard .judging { font-style: italic; }
.wthumbs { display: flex; gap: 12px; margin-top: 8px; }
.wthumb { width: 64px; height: 64px; image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; background: var(--stage); border: 2px solid var(--stage-floor); border-radius: 0; }
.perkline { margin: 8px 0 0; font: 600 13px/1.4 var(--sans); color: var(--ink); }
.gres { margin-left: 6px; font-weight: 700; }
.teach2 { color: var(--muted); font-size: 12px; }
.shscore { margin: 0 0 8px; font: 700 15px/1.3 var(--sans); }
.pill[data-state="deliberating"] { color: var(--ink); }
.grp .line.wipe { color: var(--muted); }

/* goal outcomes: their own line, a small neutral mark */
.gout { display: flex; align-items: center; gap: 6px; margin-top: 2px; font: 700 12px/1.3 var(--sans); }
.gres { display: block; margin-left: 0; }
.resultcard .gout { justify-content: center; }
.omark { display: inline-block; width: 8px; height: 8px; border: 2px solid currentColor; box-sizing: border-box; }
.o-yes .omark { background: currentColor; }
.o-none .omark { border-style: dashed; }

/* goal outcomes: their own line, a small neutral mark */
.gout { display: flex; align-items: center; gap: 6px; margin-top: 2px; font: 700 12px/1.3 var(--sans); }
.gres { display: block; margin-left: 0; }
.resultcard .gout { justify-content: center; }
.omark { display: inline-block; width: 8px; height: 8px; border: 2px solid currentColor; box-sizing: border-box; }
.o-yes .omark { background: currentColor; }
.o-none .omark { border-style: dashed; }

/* v0.5.0: the bubble line as the headline of a message, painting thumbnails in the script */
.cbubble { margin: 2px 0 4px; font: 700 18px/1.3 var(--comic); color: var(--ink); overflow-wrap: anywhere; max-width: 62ch; }
.pics { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: 6px 0 0 15px; }
.pthumb { display: block; width: 64px; height: 64px; padding: 0; background: var(--stage); border: 2px solid var(--stage-floor); border-radius: 0; image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; cursor: zoom-in; }

/* v0.6.0: content rating badge, the warning gate, the footer line */
.rating { flex: none; padding: 4px 6px; border: 1px solid var(--muted); border-radius: 4px; color: var(--ink); font: 700 11px/1 var(--sans); letter-spacing: 0.04em; white-space: nowrap; cursor: help; }
.ratingline { margin: 0 0 8px; font: 500 13px/1.4 var(--sans); color: var(--muted); }
.ratingline b { color: var(--ink); }
.foot .disc { flex-basis: 100%; order: 9; max-width: 62ch; }
.gate { position: fixed; z-index: 80; left: 0; right: 0; top: var(--barh); bottom: 0; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; background: var(--stage); color: var(--stage-ink); }
.gate:focus { outline: none; }
.gatecard { width: min(560px, 100%); text-align: center; }
.gate-kicker { margin: 0; font: 700 11px/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--stage-mute); }
.gate-rating { margin: 4px 0 8px; font: 900 56px/1 var(--display); letter-spacing: -0.02em; }
.gate-blurb { margin: 0 0 16px; font: 500 17px/1.4 var(--sans); }
.gate-warn { margin: 0 auto 20px; max-width: 46ch; font: 400 15px/1.5 var(--sans); color: var(--stage-mute); }
.gate-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.gate-ok { padding: 12px 20px; background: var(--amber); color: var(--on-amber); border: 0; border-radius: 4px; font: 800 15px var(--sans); cursor: pointer; }
.gate-leave { padding: 11px 20px; border: 1px solid var(--stage-line); border-radius: 4px; color: var(--stage-ink); font: 700 15px var(--sans); text-decoration: none; }
.gate-ok:focus-visible, .gate-leave:focus-visible { outline: 2px solid var(--stage-ink); outline-offset: 2px; }
@media (max-width: 820px) { .gate-rating { font-size: 44px; } .gate-ok, .gate-leave { flex: 1 1 100%; text-align: center; } .rating { padding: 3px 5px; } }

.rating .rs { display: none; }
@media (max-width: 560px) { .rating[data-rating="NR"] .rl { display: none; } .rating[data-rating="NR"] .rs { display: inline; } }
@media (max-width: 420px) { .bar { gap: 6px; padding: 0 12px; } .barr { gap: 6px; } }
@media (max-width: 380px) { .cnt { display: none; } }

/* v0.7.0: a conceded act. A white flag by the speaker's balloon, a dashed outline, and a verdict that reads as a surrender */
.bubble .bflag { display: none; }
.bubble.concede .bface { border-style: dashed; }
.bubble.concede .bflag { display: block; position: absolute; bottom: -21px; width: 22px; height: 21px; border-left: 3px solid var(--ballon-ink); }
.bubble.concede .bflag::after { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 13px; background: #fff; border: 2px solid var(--ballon-ink); animation: flagwave 0.5s ease-in-out infinite alternate; transform-origin: left center; }
@keyframes flagwave { from { transform: skewY(-6deg); } to { transform: skewY(6deg); } }
.actcard .verdict.conceded .vline { font-style: italic; }
.actcard .verdict.conceded .vline b { font-style: normal; }
@media (max-width: 820px) { .bubble.concede .bflag { bottom: -17px; height: 17px; width: 18px; } .bubble.concede .bflag::after { width: 18px; height: 11px; } }

/* A5: a quiet paint meter (pips) under each captain's name; A9: nothing says blitz */
.footlights { position: relative; }
.pips { position: absolute; bottom: 3px; display: flex; gap: 2px; }
.pips.pa { left: 14px; } .pips.pb { right: 14px; }
.pip { display: block; width: 4px; height: 4px; background: var(--stage-ink); }
.pip.off { background: var(--stage-line); }
.budline { margin: 8px 0 0; font: 500 13px/1.4 var(--sans); color: var(--muted); }

/* v0.9.0: model calls (details only: nothing on the stage) */
body.js .drawer[data-tab="call"] #pn-call { display: block; }
.callsnote { margin: 0 0 8px; font: 500 13px/1.4 var(--sans); color: var(--muted); }
.callbtn { margin-left: 8px; padding: 0 6px; background: none; border: 1px solid var(--term-dim); border-radius: 4px; color: #8db8ff; font: 600 11px/1.6 var(--mono); cursor: pointer; }
.actcard .callbtn, .rescard .callbtn, .rgoal .callbtn { color: var(--ink); border-color: var(--muted); font: 600 12px/1.5 var(--sans); margin: 4px 0 0; display: block; }
.cblock { margin: 12px 0 0; }
.cbhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cbhead h4 { margin: 0; font: 700 13px/1.3 var(--sans); }
.cbcopy { padding: 2px 8px; background: none; border: 1px solid var(--line); border-radius: 4px; font: 600 12px var(--sans); color: var(--muted); cursor: pointer; }
.cpre { margin: 4px 0 0; padding: 8px 10px; max-height: 260px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--term-bg); color: var(--term-ink); font: 12px/1.5 var(--mono); border-radius: 4px; }

/* v0.9.0: attacks. The flight is drawn on the stage canvas; only a caption, the script's tiny thumbnails and the arsenal use the DOM */
.atkcap { position: absolute; z-index: 4; transform: translate(-50%, -50%); font: 900 22px/1 var(--comic); color: #fff7c2; -webkit-text-stroke: 4px #14151a; paint-order: stroke fill; letter-spacing: 0.02em; pointer-events: none; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
.atkcap.pop { animation: atkpop 0.28s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes atkpop { from { transform: translate(-50%, -50%) scale(0.4) rotate(-6deg); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
.stagearea.shake { animation: stageshake 0.3s linear; }
@keyframes stageshake { 0%, 100% { transform: none; } 20% { transform: translate(-3px, 2px); } 40% { transform: translate(3px, -2px); } 60% { transform: translate(-2px, 1px); } 80% { transform: translate(2px, -1px); } }
.athumb { display: inline-block; width: 16px; height: 16px; margin-left: 6px; vertical-align: -3px; image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; background: var(--stage); border: 1px solid var(--stage-floor); }
.arsenal { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.arlabel { font: 700 11px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.arbtn { width: 24px; height: 24px; margin: 0; cursor: pointer; }
.arbtn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
@media (max-width: 820px) { .atkcap { font-size: 16px; -webkit-text-stroke-width: 3px; } }

/* v0.10.0: rich rendering. Walls are framed canvases that light up when paint lands; paint pips are little drops */
.placard.lit { animation: placardlit 0.7s ease-out; }
@keyframes placardlit { 0% { filter: brightness(1.25) saturate(1.15); } 100% { filter: none; } }
.pip { width: var(--pw, 4px); height: calc(var(--pw, 4px) * 1.5); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: var(--stage-ink); }
.pip.off { background: var(--stage-line); }
.pips { gap: var(--pg, 3px); flex-wrap: nowrap; overflow: hidden; }
.footlights { background: linear-gradient(to top, #2a1d10, var(--stage)); }
.cm, .grp, .actcard, .sysln { content-visibility: auto; contain-intrinsic-size: auto 160px; }

/* v0.12: stances, act briefs, painting titles */
.ntitle, .gframe .ntitle { position: absolute; left: 50%; transform: translateX(-50%); padding: 0 7px; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-align: center; font-family: var(--sans); font-style: italic; font-weight: 600; color: #3a2606; background: linear-gradient(180deg, #ece0bd, #cdbd8f); border: 1px solid #6a5122; border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); pointer-events: none; }
.ntitle[hidden] { display: none; }
.stagearea .spstances { margin: 2px 0; display: flex; flex-direction: column; gap: 2px; max-width: 52ch; text-align: left; }
.stagearea .sps { margin: 0; font: 500 12px/1.35 var(--sans); color: var(--stage-mute); overflow-wrap: anywhere; }
.stagearea .sps b { color: var(--stage-ink); font-weight: 800; }
.stagearea .sps.a b { border-bottom: 2px solid var(--a); } .stagearea .sps.b b { border-bottom: 2px solid var(--b); }
.about.argue { padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.about.argue h3 { margin: 0 0 6px; font: 800 12px/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.about.argue .arow { margin: 0 0 4px; font: 500 14px/1.45 var(--sans); overflow-wrap: anywhere; }
.about.argue .arow b { font-weight: 800; padding-bottom: 1px; }
.about.argue .arow.a b { border-bottom: 2px solid var(--a); } .about.argue .arow.b b { border-bottom: 2px solid var(--b); }
.about.argue .asmall { margin: 6px 0 0; font: 400 12px/1.4 var(--sans); color: var(--muted); }
.argues { margin: 6px 0 0; font: 500 13px/1.4 var(--sans); overflow-wrap: anywhere; }
.argues[hidden] { display: none; }
.argued { margin: 0 0 4px; font: 500 14px/1.45 var(--sans); overflow-wrap: anywhere; }
.actcard .ar.ab { color: var(--ink); font-weight: 600; }
.gtitle { margin: 0; font: 900 20px/1.2 var(--display); color: #f6edd5; overflow-wrap: anywhere; }
.gtitle[hidden] { display: none; }
.theatre.waiting .fstance { display: none; }

.ntitle.wrap { white-space: normal; overflow: visible; overflow-wrap: normal; word-break: keep-all; hyphens: none; text-wrap: balance; padding: 2px 5px; font-weight: 700; }
.gctog { align-self: center; margin-top: 4px; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: #e8dfc6; font: 600 13px var(--sans); cursor: pointer; }
.gctog[hidden], .gcmd[hidden] { display: none; }
@media (min-width: 720px) { .gctog { display: none; } }
@media (max-width: 719px) {
  .gallery { align-items: center; padding-bottom: 88px; }
  .gcmd { max-height: 34vh; }
  .gnavbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(10, 7, 4, 0), rgba(10, 7, 4, 0.96) 38%); }
  .gnav { flex: 1; min-height: 46px; max-width: 150px; }
}
.lookline { margin: 0 0 6px; font: 600 12px/1.3 var(--sans); color: var(--muted); display: flex; align-items: center; gap: 6px; }
.lookline[hidden] { display: none; }
.lookline .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line); flex: none; }

/* v0.13 typography: the balloon is the hero (Comic Neue Bold, a touch heavier and looser), numbers line up, no fake bold on the one-weight face */
.bubble .btxt, .cbubble { font-synthesis: none; -webkit-text-stroke: 0.3px currentColor; letter-spacing: 0.012em; }
.atkcap { font-synthesis: none; letter-spacing: 0.02em; }
.ts, .clock, #score, .tl-label, .n-sent, .n-px, .n-miss, .n-wh, .sstat b, .icount, .fver { font-variant-numeric: tabular-nums; }
h1, h2, h3, .actcard h2, .rtitle, .gtitle { letter-spacing: -0.005em; text-wrap: balance; }
.about, .cm, .t-read { text-wrap: pretty; }
.vgroup > .sndhint { font: 500 11px/1.2 var(--sans); color: var(--muted); letter-spacing: 0; text-transform: none; }