/* play/styles/base.css */
@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/JetBrainsMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/JetBrainsMono-Medium.woff2') format('woff2'); font-weight: 500; font-display: block; }
@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/JetBrainsMono-Bold.woff2') format('woff2'); font-weight: 700; font-display: block; }
@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/JetBrainsMono-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: block; }
@font-face { font-family: 'AIM Brand'; src: url('../assets/fonts/aim-brand-mono-700.woff2') format('woff2'); font-weight: 700; font-display: block; }

:root {
  /* text scale: «крупнее» by default (Alex 13.10: read easier), the menu switches 1 / 1.12 / 1.24; cards scale their text by --fs-card */
  --fs: 1.12; --fs-card: 1.08;
  --ink-0: #050407;
  --ink-1: #0c0a11;
  --ink-2: #14111b;
  --ink-3: #1d1827;
  --line: rgba(244, 244, 239, 0.1);
  --line-2: rgba(244, 244, 239, 0.2);
  --paper: #f4f4ef;
  --paper-2: #c9c6cf;
  --muted: #7d7887;
  --red: #bf0909;
  --red-hot: #ff2b3c;
  --red-deep: #5a0710;
  --violet: #7b55ad;
  --violet-hot: #a77bff;
  --violet-deep: #2a1d44;
  --cyan: #1fb6d1;
  --cyan-deep: #0b4651;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --brand: 'AIM Brand', 'JetBrains Mono', monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --card-w: 168px;
  --card-h: 236px;
  /* one hue per station, the same on cards, pads and charts */
  --st-signal: #1fb6d1;
  --st-context: #6f86ff;
  --st-decision: #a77bff;
  --st-delivery: #ff2b3c;
  --st-retro: #e9e4d6;
  /* run progress: 0 at the first node, 1 at the boss (set by main.js) */
  --heat: 0;
  --t-fast: .16s;
  --t-mid: .26s;
}
.st-signal { --stc: var(--st-signal); }
.st-context { --stc: var(--st-context); }
.st-decision { --stc: var(--st-decision); }
.st-delivery { --stc: var(--st-delivery); }
.st-retro { --stc: var(--st-retro); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink-0); color: var(--paper); font-family: var(--mono); font-size: calc(14px * var(--fs)); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--violet); color: var(--paper); }

.glyph-field { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.vignette { position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(5, 4, 7, 0.85) 100%),
    linear-gradient(180deg, rgba(42, 29, 68, 0.25), transparent 30%, transparent 70%, rgba(90, 7, 16, 0.18));
}
.scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .22; mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px); }

.brace { color: var(--muted); }
.brace b { color: var(--paper); font-weight: 500; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border: 1px solid var(--line-2); font-size: calc(10px * var(--fs)); letter-spacing: .06em; text-transform: uppercase; color: var(--paper-2); }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; background: var(--ink-2); border: 1px solid var(--line-2); color: var(--paper); cursor: pointer; letter-spacing: .08em; text-transform: lowercase; transition: background .18s var(--ease), border-color .18s, transform .12s; }
.btn:hover { background: var(--ink-3); border-color: var(--paper-2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--red); border-color: var(--red-hot); box-shadow: 0 0 0 1px rgba(255,43,60,.25), 0 10px 30px -10px rgba(191,9,9,.7); }
.btn.primary:hover { background: #d40f12; }
.btn.danger { border-color: var(--red-hot); color: var(--paper); }
.btn.danger:hover { background: rgba(255,43,60,.18); }
.btn.violet { background: var(--violet-deep); border-color: var(--violet-hot); }
.btn:disabled { opacity: .35; cursor: default; pointer-events: none; }
.btn kbd { font-size: calc(10px * var(--fs)); padding: 1px 5px; border: 1px solid currentColor; opacity: .6; }

/* Reduced motion: no loops, no drift, state changes land instantly. Glitch stays a single frame. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .scanlines { display: none; }
}

/* v0.4 «сумерки», the default: a lighter field behind dark cards and panels, softer vignette, clearer secondary text.
   «ночь» (menu → тёмная тема) keeps the first look. */
html[data-text="normal"] { --fs: 1; --fs-card: 1; }
html[data-text="big"] { --fs: 1.24; --fs-card: 1.16; }
html[data-theme="dusk"] { --muted: #948ea2; --paper-2: #d6d2dc; --line: rgba(244, 244, 239, 0.13); --line-2: rgba(244, 244, 239, 0.24); }
html[data-theme="dusk"], html[data-theme="dusk"] body { background: #2a2338; }
html[data-theme="dusk"] body { background: radial-gradient(120% 90% at 50% 40%, #41365a 0%, #322a46 50%, #241e33 100%) fixed; }
html[data-theme="dusk"] .vignette { background:
    radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(10, 8, 15, 0.45) 100%),
    linear-gradient(180deg, rgba(123, 85, 173, 0.16), transparent 30%, transparent 70%, rgba(191, 9, 9, 0.08)); }
html[data-theme="dusk"] .glyph-field { opacity: .8; }
html[data-theme="dusk"] .scanlines { opacity: .12; }
/* a phone held upright (web/src/ui/fit.js): one plate at the bottom, shown only while the phone is upright */
.upright-plate { display: none; }
html.upright-phone .upright-plate { display: flex; align-items: center; gap: 14px; position: fixed; left: 24px; right: 24px; bottom: 24px; z-index: 600; padding: 22px 26px; font-size: 34px; color: var(--paper); background: rgba(20, 15, 30, .96); border: 2px solid var(--violet-hot); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
html.upright-phone .upright-plate span { font-size: 54px; color: var(--violet-hot); }
html.upright-phone .upright-plate button { margin-left: auto; background: none; border: 2px solid var(--line); color: var(--paper); font-size: 40px; width: 64px; height: 64px; cursor: pointer; }

/* play/styles/card.css */
/* Request 57 / OB-122: dark cards, role accents, no filled role artwork or frames. */
.card {
  --accent: var(--violet-hot); --accent-deep: var(--violet-deep); --s: 1;
  --paper: #fff8ef; --paper-2: #e3dce9; --muted: #bdb4c8;
  --st-signal: #a9caff; --st-context: #d5baff; --st-decision: #f2d28a; --st-delivery: #ffb5a9; --st-retro: #a9e5bf;
  position: relative; width: calc(var(--card-w) * var(--s)); height: calc(var(--card-h) * var(--s));
  display: grid; grid-template-rows: auto minmax(calc(48px * var(--s)), 1fr) auto auto auto;
  font-size: calc(11px * var(--s)); color: var(--paper); border: 0; outline: 0;
  border-radius: calc(3px * var(--s)) calc(3px * var(--s)) calc(9px * var(--s)) calc(9px * var(--s));
  background: #120f1b;
  box-shadow: 0 calc(18px * var(--s)) calc(28px * var(--s)) calc(-16px * var(--s)) #000d;
  overflow: hidden; transform-style: preserve-3d;
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid), opacity var(--t-fast), filter var(--t-mid);
}
.card::before { content: none; }
.card::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--t-mid); background: radial-gradient(ellipse at var(--mx,50%) var(--my,25%), #ffffff0c, transparent 62%); }
.card:hover::after, .card.lift::after { opacity: 1; }
.card.kind-action { --accent: var(--paper-2); --accent-deep: #20202a; }
.card.kind-status { --accent: #c4bbc8; --accent-deep: #17151c; --stc: #c4bbc8; }
.card.kind-crisis { --accent: #ff8b91; --accent-deep: #631e33; }
.card.rarity-signature .name { color: color-mix(in srgb, var(--hc) 35%, var(--paper)); }
.card .hd { position: relative; display: flex; align-items: center; gap: calc(7px * var(--s)); padding: calc(10px * var(--s)) calc(10px * var(--s)) calc(5px * var(--s)); min-width: 0; }
.card .cost { flex: none; min-width: calc(20px * var(--s)); display: flex; justify-content: center; align-items: center; gap: calc(2px * var(--s)); font: 800 calc(20px * var(--s))/1 var(--brand); color: var(--paper); }
.card .cost::before { content: '◆'; font-size: calc(7px * var(--s)); color: var(--role-ink, var(--paper-2)); }
.card .cost.free { color: #8cdde9; }
.card .name { min-width: 0; font: 700 calc(13.5px * var(--s) * var(--fs-card))/1.13 var(--brand); letter-spacing: -.025em; text-transform: lowercase; overflow-wrap: anywhere; text-wrap: balance; }
.card .name .plus { color: var(--role-ink, var(--violet-hot)); font-size: .75em; margin-left: 1px; }
.card .lvl { margin-left: auto; flex: none; font-size: calc(7px * var(--s)); letter-spacing: .3px; color: var(--muted); }
.card .lvl.l2 { color: var(--violet-hot); }
.card .lvl.l3, .card .lvl.sig { color: var(--hc, var(--role-ink, var(--paper))); }
.card .lvl.sig { font-size: calc(11px * var(--s)); }
.card .rar { margin-left: auto; color: var(--accent); font-size: calc(10px * var(--s)); }
.card .art { position: relative; margin: 0; border: 0; outline: 0; box-shadow: none; overflow: hidden; display: grid; place-items: center; background: none; }
.card .art pre { margin: 0; font: calc(7px * var(--s))/1 var(--mono); letter-spacing: 0; color: color-mix(in srgb, var(--role-ink, var(--stc, var(--accent))) 28%, transparent); }
.card .art pre .a1 { color: color-mix(in srgb, var(--role-ink, var(--stc, var(--accent))) 60%, transparent); }
.card .art pre .a2 { color: var(--role-ink, var(--stc, var(--accent))); }
.card .art pre .a3 { color: var(--paper); font-weight: 700; text-shadow: 0 0 calc(7px * var(--s)) var(--role-ink, var(--stc, var(--accent))); }
.card .type { display: flex; align-items: center; flex-wrap: wrap; gap: calc(3px * var(--s)) calc(6px * var(--s)); padding: calc(4px * var(--s)) calc(10px * var(--s)) 0; color: var(--muted); font-size: calc(8px * var(--s)); line-height: 1.15; }
.card .type .kw { font-size: calc(7.5px * var(--s)); color: var(--paper-2); }
.card .card-station { margin-left: auto; color: var(--stc, var(--muted)); font-size: calc(8px * var(--s)); }
.card .text { padding: calc(5px * var(--s)) calc(10px * var(--s)) calc(3px * var(--s)); color: var(--paper); font-size: calc(11.5px * var(--s) * var(--fs-card)); line-height: 1.3; text-wrap: pretty; }
.card .stats { display: flex; align-items: center; gap: calc(5px * var(--s)); padding: calc(4px * var(--s)) calc(10px * var(--s)) calc(7px * var(--s)); min-height: calc(24px * var(--s)); font-size: calc(10px * var(--s)); border: 0; }
.card .stat { display: inline-flex; align-items: baseline; gap: calc(3px * var(--s)); color: var(--paper-2); font-size: calc(8.5px * var(--s)); letter-spacing: -.025em; }
.card .stat b { font-size: calc(17px * var(--s)); font-weight: 800; color: var(--role-ink, var(--paper)); }
.card .stat.pow b { color: var(--role-ink, #532590); }
.card:not(.kind-crisis) .tx-energy { color: #ffb6a2; }
.card:not(.kind-crisis) .tx-trust { color: #d9c0ff; }
.card .stat.life { margin-left: auto; flex: none; }
.card .pips { display: inline-flex; gap: calc(2px * var(--s)); }
.card .pips i { width: calc(3px * var(--s)); height: calc(7px * var(--s)); background: var(--paper-2); opacity: .7; }
.card .pips i.off { opacity: .15; }
.card .stats .mini-ring { flex: none; width: calc(30px * var(--s)); height: calc(14px * var(--s)); }
.card .stats .aff { font-size: calc(8px * var(--s)); color: var(--paper-2); }
.mini-ring ellipse { fill: none; stroke: #f4f4ef38; stroke-width: 1; }
.mini-ring circle { fill: #f4f4ef40; }
.mini-ring circle.on { fill: var(--stc, var(--paper)); }
.mini-ring circle.st-signal { fill: var(--st-signal); }
.mini-ring circle.st-context { fill: var(--st-context); }
.mini-ring circle.st-decision { fill: var(--st-decision); }
.mini-ring circle.st-delivery { fill: var(--st-delivery); }
.mini-ring circle.st-retro { fill: var(--st-retro); }
.card .zoom, .card .crisis-choice { position: absolute; right: calc(7px * var(--s)); top: calc(100% + 3px * var(--s)); z-index: 6; width: calc(22px * var(--s)); height: calc(22px * var(--s)); padding: 0; display: grid; place-items: center; font: calc(14px * var(--s))/1 var(--mono); color: var(--paper); background: #100b19b8; border: 0; border-radius: 50%; cursor: zoom-in; opacity: 0; transition: opacity var(--t-fast); }
.card:hover .zoom, .card:focus-within .zoom, .card.selected .zoom, .card .crisis-choice { opacity: 1; }
.card .zoom:hover, .card .crisis-choice:hover { color: var(--cyan); background: #292039; }
.card .zoom:focus-visible, .card .crisis-choice:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.card .crisis-choice { cursor: crosshair; color: var(--cyan); }
@media (hover:none), (pointer:coarse) { .card .zoom { opacity: 1; min-width: 32px; min-height: 32px; } .card .crisis-choice { min-width: 32px; min-height: 32px; } }
/* Keyboard focus remains explicit. Selected cards lift and brighten without a new frame. */
.card.disabled { filter: saturate(.3) brightness(.65); }
.card.unaffordable .cost { color: var(--muted); }
.card.selected { transform: translateY(-26px) scale(1.04); filter: brightness(1.16); box-shadow: 0 24px 36px -16px #000; }
.card:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.card.unseen { filter: saturate(.3) brightness(.78); }
.card.unseen:hover { filter: none; }
/* Availability fades the illustration while rule text keeps its measured contrast. */
.card:not(.kind-crisis):is(.disabled,.unseen) { filter: none; }
.card:not(.kind-crisis):is(.disabled,.unseen) .art { opacity: .55; filter: saturate(.3); }
.card:not(.kind-crisis).unseen:hover .art { opacity: 1; filter: none; }
/* Request 57, orchestrator review 16.10: restore the 0.5.7 anatomy without a perimeter frame. */
.card[data-role]:not(.kind-crisis)::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(4px * var(--s)); background: var(--role-ink); z-index: 2; pointer-events: none; box-shadow: none; }
.card:not(.kind-crisis) .cost { width: calc(24px * var(--s)); height: calc(24px * var(--s)); min-width: calc(24px * var(--s)); display: grid; place-items: center; font-size: calc(16px * var(--s)); color: #050407; background: color-mix(in srgb, var(--role-ink, #c4bbc8) 80%, #fff8ef); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.card:not(.kind-crisis) .cost::before { content: none; }
.card.kind-action .cost { clip-path: circle(50%); }
.card:not(.kind-crisis) .art { margin: 0 calc(7px * var(--s)); background: #09070f; border: 1px dotted color-mix(in srgb, var(--role-ink, #c4bbc8) 45%, transparent); }
.card:not(.kind-crisis) .art pre { color: color-mix(in srgb, var(--role-ink, #c4bbc8) 75%, transparent); }
.card:not(.kind-crisis) .art pre .a1 { color: color-mix(in srgb, var(--role-ink, #c4bbc8) 60%, #fff8ef); }
.card:not(.kind-crisis) .art pre .a2 { color: color-mix(in srgb, var(--role-ink, #c4bbc8) 25%, #fff8ef); }
.card:not(.kind-crisis) .art pre .a3 { color: #fff8ef; text-shadow: 0 0 calc(4px * var(--s)) color-mix(in srgb, var(--role-ink, #c4bbc8) 45%, transparent); }
.card:not(.kind-crisis) .art .card-station { position: absolute; left: calc(3px * var(--s)); bottom: calc(3px * var(--s)); margin: 0; padding: 0 calc(3px * var(--s)); font-size: calc(8px * var(--s)); line-height: 1.15; color: var(--stc, var(--role-ink)); background: #09070f; }
.card:not(.kind-crisis) .type { color: var(--role-ink); font-size: calc(9px * var(--s)); letter-spacing: .035em; }
.card:not(.kind-crisis) .type .kind { font-weight: 700; text-transform: uppercase; }
.card:not(.kind-crisis) .type .kw { color: var(--role-ink); }
.card:not(.kind-crisis) .type .kw.sig { flex-basis: 100%; font-weight: 700; text-transform: uppercase; }
/* A crisis floats as a threat mark, timer and consequence. */
.card.kind-crisis { --paper: #fff4ec; --paper-2: #ffcec2; --muted: #ffa8a0; --role-ink: #ff413c; --st-signal: #a5d7ff; --st-context: #e6c5ff; --st-decision: #ffd4a9; --st-delivery: #ffb9a9; --st-retro: #c8f6d3; isolation: isolate; background: radial-gradient(ellipse at 42% 42%, #e41937a6, #a30b2738 55%, transparent 78%); border-radius: 0; box-shadow: none; grid-template-rows: auto minmax(calc(32px * var(--s)),1fr) auto auto auto; overflow: visible; }
.card.kind-crisis::before { content: ''; position: absolute; z-index: -1; inset: calc(8px * var(--s)) calc(-5px * var(--s)); background: linear-gradient(145deg, #ff342b45, #be112a80 45%, #ff40302b); clip-path: polygon(5% 9%, 76% 0, 69% 14%, 100% 38%, 89% 48%, 100% 88%, 30% 100%, 36% 88%, 0 65%, 11% 54%); }
.card.kind-crisis::after { content: none; }
.card.kind-crisis .hd { padding-right: calc(34px * var(--s)); }
.card.kind-crisis .zoom, .card.kind-crisis .crisis-choice { top: calc(5px * var(--s)); right: calc(6px * var(--s)); }
.card.kind-crisis .name { color: #fff0ef; font-size: calc(14px * var(--s) * var(--fs-card)); }
.card.kind-crisis .rar { display: none; }
.card.kind-crisis .art { background: none; overflow: hidden; justify-items: start; padding-left: calc(4px * var(--s)); }
.card.kind-crisis .art pre { font-size: calc(6.4px * var(--s)); opacity: 1; transform: translateX(calc(-4px * var(--s))); }
.card.kind-crisis .art pre .a1 { color: #ff4e4b; }.card.kind-crisis .art pre .a2 { color: #ff7770; }.card.kind-crisis .art pre .a3 { color: #ffd1bd; text-shadow: 0 0 10px #ff2b3c; }
.card.kind-crisis .threat-mark { position: absolute; z-index: 2; left: calc(27px * var(--s)); top: 50%; transform: translateY(-50%); height: calc(43px * var(--s)); max-height: 100%; color: #ffefdf; filter: drop-shadow(0 0 14px #ff1f35); }
.card.kind-crisis .threat-mark .pi { width: calc(38px * var(--s)); height: 100%; color: inherit; }
.card.kind-crisis .type { gap: calc(4px * var(--s)); padding-top: 0; font-size: calc(9px * var(--s)); }
.card.kind-crisis .type .mini-ring { width: calc(27px * var(--s)); height: calc(14px * var(--s)); }
.card.kind-crisis .crisis-station { color: #ffd1bf; }
.card.kind-crisis .type .kw { margin-left: auto; font-size: calc(7px * var(--s)); color: var(--muted); }
.card.kind-crisis .text { font-size: calc(11.3px * var(--s) * var(--fs-card)); line-height: 1.3; text-shadow: 0 1px 5px #000; }
.card.kind-crisis .stats { position: static; padding-top: calc(4px * var(--s)); flex-wrap: wrap; }
.card.kind-crisis .hp { order: 2; flex-basis: 100%; height: calc(2px * var(--s)); margin-top: calc(3px * var(--s)); position: relative; background: #f4f4ef15; }
.card.kind-crisis .hp i { position: absolute; inset: 0 auto 0 0; background: #ffa2a5; transition: width .4s var(--ease); }
.card.kind-crisis .hp-n { margin-left: auto; gap: calc(4px * var(--s)); align-items: center; }
.card.kind-crisis .hp-n b { font-size: calc(17px * var(--s)); color: #ffc1c1; }
.card.kind-crisis .hp-n small { color: var(--muted); font-size: calc(9px * var(--s)); }
.card.kind-crisis .hp-n .pi { width: calc(12px * var(--s)); height: calc(12px * var(--s)); color: #ffa2a5; }
.card.kind-crisis .timer { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); right: calc(12px * var(--s)); display: inline-flex; align-items: center; gap: calc(3px * var(--s)); font: 800 calc(32px * var(--s))/1 var(--brand); color: var(--paper); }
.card.kind-crisis .timer .pi { width: calc(13px * var(--s)); height: calc(16px * var(--s)); color: #d7b0c2; }
.card.kind-crisis .timer.hot { color: #ff929b; animation: threat-tick 1.6s ease-in-out infinite; }
@keyframes threat-tick { 50% { opacity: .65; } }
@media (prefers-reduced-motion:reduce) { .card.kind-crisis .timer.hot { animation: none; } }

/* play/styles/board.css */
.board { position: absolute; inset: 64px 0 230px 0; z-index: 5; }
.board .floor, .board .flow-layer { position: absolute; inset: 0; pointer-events: none; }
.board .flow-layer { z-index: 90; }
.board .ring-dash { animation: ringflow 6s linear infinite; }
@keyframes ringflow { to { stroke-dashoffset: 120; } } /* clockwise visual drift */

/* pads: an ellipse disc lying on the floor + label below */
.pad { position: absolute; width: 0; height: 0; cursor: pointer; }
.pad-disc { position: absolute; left: calc(-62px * var(--sc)); top: calc(-21px * var(--sc)); width: calc(124px * var(--sc)); height: calc(42px * var(--sc)); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(167,123,255,.28), rgba(42,29,68,.5) 60%, transparent 72%);
  border: 1px solid rgba(167,123,255,.55); box-shadow: 0 0 18px rgba(139,92,246,.25); transition: border-color .2s, box-shadow .2s, background .2s; }
.pad.st-retro .pad-disc { border-color: rgba(255,43,60,.5); background: radial-gradient(closest-side, rgba(255,43,60,.18), rgba(90,7,16,.4) 60%, transparent 72%); }
.pad.st-signal .pad-disc { border-color: rgba(31,182,209,.6); background: radial-gradient(closest-side, rgba(31,182,209,.2), rgba(11,70,81,.4) 60%, transparent 72%); }
.pad.pressured .pad-disc { box-shadow: 0 0 0 1px rgba(255,43,60,.35), 0 0 26px rgba(255,43,60,.35); }
.pad.bottleneck .pad-disc { border-color: var(--red-hot); animation: neck 1.2s ease-in-out infinite; }
@keyframes neck { 50% { box-shadow: 0 0 30px rgba(255,43,60,.6); } }
.pad.target .pad-disc { border-color: var(--paper); border-width: 2px; box-shadow: 0 0 0 4px rgba(244,244,239,.08), 0 0 34px rgba(167,123,255,.7); animation: tgt .9s ease-in-out infinite; }
@keyframes tgt { 50% { transform: scale(1.08); } }
.pad.disabled .pad-disc { filter: grayscale(1) brightness(.5); }
.pad-label { position: absolute; left: 50%; top: calc(28px * var(--sc)); padding: 2px 4px; background: var(--ink-0); transform: translateX(-50%); white-space: nowrap; display: flex; gap: 8px; align-items: baseline; font-size: calc(11px * var(--fs)); letter-spacing: .04em; text-shadow: 0 1px 0 #000, 0 0 8px #000; }
.pad-label .io { color: var(--paper-2); font-weight: 700; }
.pad-label .io i { font-style: normal; color: var(--muted); padding: 0 2px; }
.pad-label .of { color: var(--red-hot); font-weight: 700; }
.pad-label .of small { font-weight: 400; opacity: .8; }

/* cards standing on the floor: anchor = bottom centre */
.card.on-board { position: absolute; transform: translate(-50%, -100%) translateY(-6px); cursor: pointer; }
.card.on-board:hover { transform: translate(-50%, -100%) translateY(-14px); }
.card.on-board::before { content: ''; position: absolute; left: 8%; right: 8%; bottom: -10px; height: 10px; background: radial-gradient(closest-side, rgba(0,0,0,.8), transparent); }
.card.crisis-actor { transform: translate(-50%, -100%) translateY(-2px); animation: hover 3.2s ease-in-out infinite; }
@keyframes hover { 50% { transform: translate(-50%, -100%) translateY(-8px); } }
.card.crisis-actor.targetable { outline: 2px solid var(--paper); outline-offset: 3px; animation: none; cursor: crosshair; }
.card.hit { animation: hit .5s var(--ease); }
@keyframes hit { 20% { filter: brightness(2.2) saturate(1.5); transform: translate(-50%, -100%) translateX(6px); } 45% { transform: translate(-50%, -100%) translateX(-5px); } }

.ghost-slot { position: absolute; transform: translate(-50%, -100%) translateY(-8px); width: calc(96px * var(--sc)); height: calc(120px * var(--sc)); border: 1px dashed rgba(244,244,239,.2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: calc(11px * var(--fs)); color: var(--paper-2); background: repeating-linear-gradient(135deg, rgba(244,244,239,.03) 0 6px, transparent 6px 12px), rgba(10,7,18,.48); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); cursor: pointer; }
.ghost-slot small { font-size: calc(9px * var(--fs)); opacity: .7; text-align: center; padding: 0 6px; }

.core { position: absolute; transform: translate(-50%, -100%); text-align: center; z-index: 8; pointer-events: none; }
.core-k { font-size: calc(9px * var(--fs)); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.core-v { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.core-v .clar { font-family: var(--brand); font-size: calc(44px * var(--fs)); color: var(--violet-hot); text-shadow: 0 0 24px rgba(167,123,255,.6); line-height: 1; }
.core-v span { color: var(--paper-2); font-size: calc(12px * var(--fs)); }
.core-n { font-size: calc(11px * var(--fs)); color: var(--paper-2); margin-top: 2px; }
.core-n b { color: var(--paper); }
.core-n b.up { color: var(--red-hot); }
.noise-pool { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin: 0 0 6px; font-size: calc(9px * var(--fs)); line-height: 1; color: rgba(255,43,60,.55); opacity: .8; }
.noise-pool b { color: var(--red-hot); }

.pop { position: absolute; z-index: 120; transform: translate(-50%, -50%); font-family: var(--brand); font-size: calc(30px * var(--fs)); pointer-events: none; animation: pop .65s var(--ease) forwards; text-shadow: 0 0 14px currentColor; }
.pop.dmg { color: var(--violet-hot); }
.pop.bad { color: var(--red-hot); }
.pop.good { color: var(--cyan); }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 25% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -140%) scale(1); } }

/* week tally: a chip per station as the pulse passes, the core counter carries the running value */
.count-chip { position: absolute; z-index: 110; transform: translate(-50%, -100%); min-width: 64px; padding: 6px 10px 5px; background: rgba(5,4,7,.9); border: 1px solid currentColor; box-shadow: 0 0 22px -6px currentColor; font-family: var(--brand); font-size: calc(30px * var(--fs)); line-height: 1; text-align: center; pointer-events: none; text-shadow: 0 0 16px currentColor; animation: chip 1.3s var(--ease) forwards; }
.count-chip small { display: block; margin-top: 3px; font-family: var(--mono); font-size: calc(10px * var(--fs)); letter-spacing: .12em; color: var(--paper-2); text-shadow: none; }
.count-chip em { display: block; margin-top: 2px; font-style: normal; font-family: var(--mono); font-size: calc(11px * var(--fs)); color: var(--red-hot); text-shadow: 0 0 10px rgba(255,43,60,.6); }
.count-chip.narrow small { color: var(--red-hot); }
@keyframes chip {
  0% { opacity: 0; transform: translate(-50%, -60%) scale(.6); }
  14% { opacity: 1; transform: translate(-50%, -100%) scale(1.18); }
  28% { transform: translate(-50%, -100%) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -150%); }
}
.core-v .clar { display: inline-block; }
.core-v .clar.bump { animation: bump .34s var(--ease); }
@keyframes bump { 0% { transform: scale(1.55); color: var(--paper); } 100% { transform: scale(1); } }

/* projection breakdown under the core numbers */
.core-f { margin: 3px auto 0; font-size: calc(10.5px * var(--fs)); line-height: 1.35; color: var(--paper-2); text-wrap: balance; }
.core-f .pi { margin-right: 5px; }
/* light again (15.10, Alex: «half-transparent, as it was»): a thin veil that dims the ring's lines under the numbers and
   lets the board show through; it firms up only while a card is previewed */
.core-read { position: relative; width: max-content; max-width: 300px; padding: 6px 12px 7px; background: radial-gradient(120% 110% at 50% 10%, rgba(18,12,32,.46), rgba(8,5,14,.22) 72%); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); border: 1px solid rgba(167,123,255,.13); clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px); transition: background .25s, border-color .25s; }
.core.previewing .core-read { border-color: rgba(167,123,255,.42); background: radial-gradient(120% 110% at 50% 10%, rgba(36,23,62,.72), rgba(8,5,14,.5) 72%); }
.core-k { opacity: .75; }
.core-read .core-n { white-space: nowrap; }
.core-v .clar { font-size: calc(36px * var(--fs)); }
.core-week { margin-top: 5px; padding-top: 4px; border-top: 1px dashed rgba(244,244,239,.1); }
.core-wk { font-size: calc(8.5px * var(--fs)); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); opacity: .8; }
/* the inflow under the clarity, then a line per meter the week's end moves: now → after and what moves it */
.core-in { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 4px; font-size: calc(10.5px * var(--fs)); color: #7fd3e4; margin-top: 1px; }
.core-in b { color: var(--paper); }
.core-in small { color: var(--muted); font-size: calc(9.5px * var(--fs)); text-wrap: balance; }
.core-m { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 5px; margin-top: 2px; font-size: calc(10.5px * var(--fs)); line-height: 1.35; color: var(--paper-2); }
.core-m b { color: var(--paper); white-space: nowrap; }
.core-m.down b { color: var(--red-hot); }
.core-m.up b { color: #8fe0b8; }
.core-m small { color: var(--muted); font-size: calc(9.5px * var(--fs)); text-wrap: balance; }
.core-f.calm { color: var(--muted); font-size: calc(9.5px * var(--fs)); }
.core-k kbd { font: inherit; font-size: calc(8px * var(--fs)); letter-spacing: 0; padding: 0 3px; margin-left: 4px; border: 1px solid rgba(244,244,239,.18); color: var(--muted); }
/* no room between the first fight's hint and the front retro card: the title lines go, the number shrinks */
.core.tight .core-k, .core.tight .core-wk { display: none; }
.core.tight .core-v .clar { font-size: calc(26px * var(--fs)); }
.core.tight .core-read { max-width: 320px; }
.core.tight .core-week { margin-top: 3px; padding-top: 2px; }
/* P: the clarity alone */
.core.brief .core-read { padding: 4px 10px 5px; }
.core-f b { color: var(--paper); }
.core-f.good { color: var(--violet-hot); }
.core-f.bad { color: var(--red-hot); }
.core-f.warn { color: #ff9a3d; }

/* effective pass on a board card when it differs from the printed one */
.card.on-board .cap-now { position: absolute; left: calc(78px * var(--s, 1)); bottom: calc(8px * var(--s, 1)); z-index: 3; padding: 0 calc(5px * var(--s, 1)); font-family: var(--brand); font-size: calc(12px * var(--s, 1)); line-height: 1.4; background: var(--ink-0); border: 1px solid var(--violet-hot); color: var(--violet-hot); box-shadow: 0 0 14px -4px var(--violet-hot); pointer-events: auto; }
.card.on-board .cap-now.down { border-color: var(--red-hot); color: var(--red-hot); box-shadow: 0 0 14px -4px var(--red-hot); }

/* the readout under each disc is one flex item group; the preview swaps it in place */
.pad-label .read { display: contents; }
.pad-label .io b { color: var(--paper); }
.pad-label .io.pv-up, .pad-label .io.pv-up b { color: var(--violet-hot); text-shadow: 0 0 10px rgba(167,123,255,.8), 0 1px 0 #000; }
.pad-label .io.pv-down, .pad-label .io.pv-down b { color: var(--red-hot); }
.pad.pv-gain .pad-disc { box-shadow: 0 0 0 2px rgba(167,123,255,.7), 0 0 36px rgba(167,123,255,.55); }
.pad.pv-loss .pad-disc { box-shadow: 0 0 0 2px rgba(255,43,60,.6), 0 0 30px rgba(255,43,60,.4); }
.pad-label .load i.nw { animation: cell-new .9s var(--ease) infinite alternate; border-color: var(--violet-hot); }
.pad-label .load i.c.nw { background: rgba(167,123,255,.25); }
.pad-label .load i.gone { border-style: dashed; border-color: rgba(255,43,60,.6); opacity: .7; }
@keyframes cell-new { from { transform: scale(1); box-shadow: 0 0 0 rgba(167,123,255,0); } to { transform: scale(1.35); box-shadow: 0 0 10px rgba(167,123,255,.9); } }

/* the core answers the card in hand: this week without the move, an arrow, the week with it */
.core.previewing .core-k { color: var(--violet-hot); letter-spacing: .08em; text-transform: none; }
.core .pv-to { display: inline-flex; align-items: baseline; gap: 4px; animation: pv-in .22s var(--ease); }
.core-v .pv-to i { font-style: normal; color: var(--muted); font-size: calc(20px * var(--fs)); }
.core-v .pv-to b { font-family: var(--brand); font-size: calc(44px * var(--fs)); line-height: 1; }
.core-v .pv-to small { font-size: calc(12px * var(--fs)); font-weight: 700; }
.core .pv-to.up b, .core .pv-to.up small { color: #c8a8ff; text-shadow: 0 0 22px rgba(167,123,255,.85); }
.core .pv-to.down b, .core .pv-to.down small { color: var(--red-hot); text-shadow: 0 0 18px rgba(255,43,60,.6); }
.core .pv-note { display: block; font-size: calc(10.5px * var(--fs)); line-height: 1.35; color: var(--paper-2); margin: 3px 0 2px; text-wrap: balance; }
.core .pv-note b { color: var(--red-hot); }
.pad.pv-neck .pad-disc { animation: neck 0.8s ease-in-out infinite alternate; }
.pad.pv-neck .pad-label .brace b { color: var(--red-hot); }
@keyframes neck { from { box-shadow: 0 0 0 2px rgba(255,43,60,.35), 0 0 12px rgba(255,43,60,.2); } to { box-shadow: 0 0 0 3px rgba(255,43,60,.85), 0 0 40px rgba(255,43,60,.6); } }
.core.previewing .core-v .clar { opacity: .55; }
.core-n .pv-to b { font-size: inherit; }
@keyframes pv-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pad-label .load i.nw, .core .pv-to, .pad.pv-neck .pad-disc { animation: none; } }

/* a decoy crisis (incidents): the fight ends without closing it – a dashed frame and a tag */
.crisis-actor.decoy { outline: 1px dashed rgba(255,214,102,.75); outline-offset: 3px; filter: saturate(.7); }
.crisis-actor .decoy-tag { position: absolute; left: 50%; top: -11px; transform: translateX(-50%); padding: 1px 6px; font-style: normal; font-size: calc(9px * var(--fs)); letter-spacing: .12em; text-transform: uppercase; color: #ffd666; background: rgba(7,4,12,.92); border: 1px dashed rgba(255,214,102,.75); white-space: nowrap; pointer-events: auto; }

/* 15.10 (Alex: «the plate in the centre – make it beautiful, keep it light»): an instrument readout over the ring –
   corner brackets in place of a box, the label on a small tab with a live pip, the clarity number lit from above,
   a hairline between the move and the end of the week, a soft glow on the floor under it */
.core-read { --cb: rgba(167,123,255,.5); --cg: radial-gradient(95% 125% at 50% 0%, rgba(30,19,54,.52), rgba(8,5,14,.16) 76%);
  --brk: linear-gradient(var(--cb), var(--cb)) 0 0 / 12px 1px no-repeat, linear-gradient(var(--cb), var(--cb)) 0 0 / 1px 12px no-repeat,
    linear-gradient(var(--cb), var(--cb)) 100% 0 / 12px 1px no-repeat, linear-gradient(var(--cb), var(--cb)) 100% 0 / 1px 12px no-repeat,
    linear-gradient(var(--cb), var(--cb)) 0 100% / 12px 1px no-repeat, linear-gradient(var(--cb), var(--cb)) 0 100% / 1px 12px no-repeat,
    linear-gradient(var(--cb), var(--cb)) 100% 100% / 12px 1px no-repeat, linear-gradient(var(--cb), var(--cb)) 100% 100% / 1px 12px no-repeat;
  padding: 9px 18px 9px; border: 0; clip-path: none; background: var(--brk), var(--cg); }
.core.previewing .core-read { --cb: var(--violet-hot); --cg: radial-gradient(95% 125% at 50% 0%, rgba(40,25,72,.74), rgba(8,5,14,.46) 76%); background: var(--brk), var(--cg); }
.core-read::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px); }
.core-read::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -16px; height: 14px; pointer-events: none; background: radial-gradient(closest-side, rgba(167,123,255,.3), transparent); filter: blur(3px); }
.core-k { display: inline-flex; align-items: center; gap: 6px; margin: -1px auto 3px; padding: 1px 9px 1px 7px; font-size: calc(8.5px * var(--fs)); color: #cdbdf2; background: rgba(167,123,255,.13); opacity: 1; }
.core-k::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--violet-hot); box-shadow: 0 0 6px var(--violet-hot); animation: core-pip 2.4s ease-in-out infinite; }
@keyframes core-pip { 50% { opacity: .3; } }
.core-v .clar { font-size: calc(40px * var(--fs)); color: #e4d6ff; text-shadow: 0 0 18px rgba(167,123,255,.75), 0 0 2px rgba(255,255,255,.6); }
.core-v .cv-i { filter: drop-shadow(0 0 6px rgba(167,123,255,.8)); }
.core-week { border-top: 0; padding-top: 6px; margin-top: 6px; background: linear-gradient(90deg, transparent, rgba(167,123,255,.4), transparent) top / 100% 1px no-repeat; }
.core-wk { color: #a99cc4; }
.cw-c { padding: 1px 7px 1px 5px; background: rgba(9,6,16,.35); box-shadow: inset 2px 0 0 rgba(31,182,209,.6); }
.cw-c.warn { box-shadow: inset 2px 0 0 rgba(255,154,61,.75); }
.cw-c.bad { box-shadow: inset 2px 0 0 rgba(255,43,60,.8); }
@media (prefers-reduced-motion: reduce) { .core-k::before { animation: none; } }

/* play/styles/hud.css */
#app { position: fixed; inset: 0; z-index: 3; }

/* top bar */
.hud { position: absolute; left: 0; right: 0; top: 0; height: 64px; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 20px;
  background: linear-gradient(180deg, rgba(5,4,7,.92), rgba(5,4,7,.55)); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.meters { display: flex; gap: 22px; align-items: center; }
.meter { display: flex; align-items: center; gap: 8px; font-size: calc(12px * var(--fs)); white-space: nowrap; }
.meter .k { font-size: calc(9px * var(--fs)); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.meter b { font-size: calc(17px * var(--fs)); font-weight: 800; }
.meter small { color: var(--muted); margin-left: -6px; }
.meter .bar { width: 110px; height: 7px; background: rgba(255,43,60,.14); position: relative; }
.meter .bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--red), var(--red-hot)); box-shadow: 0 0 10px rgba(255,43,60,.6); transition: width .4s var(--ease); }
.meter.low b { color: var(--red-hot); animation: tick 1s steps(2) infinite; }
.meter .pips { display: inline-flex; gap: 3px; }
.meter .pips i { width: 7px; height: 12px; background: rgba(167,123,255,.15); border: 1px solid rgba(167,123,255,.35); }
.meter .pips i.on { background: var(--violet-hot); box-shadow: 0 0 6px rgba(167,123,255,.7); }
.m-capital b { color: var(--paper); }
.hud .center { font-size: calc(13px * var(--fs)); color: var(--paper-2); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: center; }
/* 15.10: at 1280 the meters, the centre line and the buttons did not fit and the menu went off the right edge; the
   centre column gives way first */
.hud { grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr); }
.hud .meters, .hud .right { min-width: max-content; }
@media (max-width: 1440px) { .hud { grid-template-columns: max-content minmax(0, 1fr) max-content; } }
.hud .center i { color: var(--muted); font-style: normal; padding: 0 4px; }
.hud .center b { color: var(--paper); }
.hud .right { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.relics { display: flex; gap: 6px; margin-right: 6px; }
.press-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; margin-right: 6px; border: 1px solid rgba(255, 154, 61, .45); color: #ffb26b; font-size: calc(11px * var(--fs)); letter-spacing: .04em; white-space: nowrap; background: rgba(255, 154, 61, .07); cursor: help; }
.press-chip b { font-family: var(--brand); color: #ff9a3d; }
.relic { position: relative; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(167,123,255,.5); color: var(--violet-hot); background: var(--violet-deep); font-size: calc(14px * var(--fs)); cursor: help; }
.relic em { position: absolute; top: 34px; right: 0; white-space: nowrap; font-style: normal; font-size: calc(10px * var(--fs)); padding: 3px 6px; background: var(--ink-2); border: 1px solid var(--line-2); color: var(--paper); opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 5; }
.relic:hover em, .relic:focus em { opacity: 1; }
.relic em { white-space: normal; width: min(340px, 86vw); text-align: left; line-height: 1.45; padding: 9px 11px 10px; box-shadow: 0 10px 28px rgba(10, 4, 24, .45); }
.relic em .tn { display: block; font-size: calc(12px * var(--fs)); color: var(--violet-hot); letter-spacing: .02em; }
.relic em small.tr { display: block; margin: 3px 0 7px; color: var(--paper); font-size: calc(11px * var(--fs)); }
.relic.fired { animation: relic-fire 1.3s ease-out; }
@keyframes relic-fire { 0% { box-shadow: 0 0 0 0 rgba(167,123,255,.9); background: var(--violet-hot); color: var(--ink-0, #0d0a14); } 60% { box-shadow: 0 0 0 10px rgba(167,123,255,0); } 100% { box-shadow: none; } }
.relic-pop { position: absolute; top: 32px; right: 0; white-space: nowrap; padding: 3px 7px; font-size: calc(11px * var(--fs)); font-weight: 700; color: var(--paper); background: var(--violet-deep); border: 1px solid var(--violet-hot); pointer-events: none; z-index: 6; animation: relic-pop 2.6s ease-out forwards; }
@keyframes relic-pop { 0% { opacity: 0; transform: translateY(-4px); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(6px); } }
.relics:hover .relic-pop, .relic:focus .relic-pop { display: none; }
.relic:hover, .relic:focus { z-index: 70; }
.relic em { z-index: 70; }
/* the reading of a tool: when / what / example / now, used in the HUD, the market, the rewards and the codex */
.tool-help { display: grid; gap: 4px; font-size: calc(11px * var(--fs)); line-height: 1.4; }
.tool-help .th-row { display: grid; grid-template-columns: 58px 1fr; gap: 8px; color: var(--paper-2); }
.tool-help .th-row i { font-style: normal; color: var(--violet-hot); opacity: .85; text-transform: lowercase; letter-spacing: .04em; }
.tool-help .th-row.ex span { color: var(--paper-2); opacity: .85; }
.tool-help .th-row.now { margin-top: 3px; padding-top: 5px; border-top: 1px dashed var(--line-2); }
.tool-help .th-row.now span { color: var(--paper); font-weight: 600; }
.icon-btn { height: 30px; min-width: 30px; padding: 0 10px; background: transparent; border: 1px solid var(--line-2); color: var(--paper-2); cursor: pointer; font-size: calc(12px * var(--fs)); }
.icon-btn:hover { border-color: var(--paper); color: var(--paper); }
.icon-btn b { color: var(--paper); }

/* bottom tray */
.tray { position: absolute; left: 0; right: 0; bottom: 0; height: 230px; z-index: 30; display: grid; grid-template-columns: 90px 120px minmax(0, 1fr) 230px 90px; grid-template-rows: minmax(0, 1fr); align-items: end; padding: 0 18px 16px; pointer-events: none;
  background: linear-gradient(0deg, rgba(5,4,7,.95), rgba(5,4,7,.6) 60%, transparent); }
.tray > * { pointer-events: auto; }
.pile { align-self: end; height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--ink-1); border: 1px solid var(--line-2); cursor: pointer; color: var(--muted); font-size: calc(10px * var(--fs)); letter-spacing: .1em; text-transform: uppercase; box-shadow: 3px 3px 0 var(--ink-2), 6px 6px 0 rgba(29,24,39,.6); }
.pile b { font-size: calc(22px * var(--fs)); color: var(--paper); letter-spacing: 0; }
.pile:hover { border-color: var(--paper-2); }
.focus { align-self: end; display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; align-items: center; }
.focus i { width: 20px; height: 20px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: rgba(244,244,239,.12); }
.focus i.on { background: var(--paper); box-shadow: 0 0 12px #fff; filter: drop-shadow(0 0 6px rgba(167,123,255,.9)); }
.focus span { width: 100%; font-size: calc(10px * var(--fs)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hand { display: flex; justify-content: center; align-items: flex-end; height: 260px; padding-bottom: 4px; }
.card.in-hand { transform: rotate(var(--rot)) translateY(var(--dy)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-origin: 50% 120%; cursor: grab; }
.card.in-hand:hover { transform: translateY(-34px) scale(1.07) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); z-index: 70 !important; box-shadow: 0 0 0 1px var(--accent), 0 30px 50px -20px #000, 0 0 30px -8px var(--accent); }
.card.in-hand.selected { transform: translateY(-48px) scale(1.08); }
.card.in-hand.dragging { opacity: .25; }
.card.unaffordable { opacity: .7; }
.card.pickable { cursor: pointer; }
.card.pickable:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--accent), 0 0 24px -6px var(--accent); }
.drag-ghost { position: fixed; z-index: 200; pointer-events: none; transform: translate(-50%, -60%) rotate(-4deg) scale(.82); opacity: .92; }
.drop-over .pad-disc, .pad.drop-over .pad-disc { transform: scale(1.18); border-color: #fff; }
.card.drop-over { outline: 2px solid #fff; outline-offset: 4px; }
.end { align-self: end; justify-self: end; height: 56px; padding: 0 24px; font-size: calc(14px * var(--fs)); margin-bottom: 9px; }
/* one line under the HUD (15.10: two lines covered the back stations and the forecast's room) */
.hint { position: absolute; left: 50%; top: 68px; transform: translateX(-50%); z-index: 90; font-size: calc(11.5px * var(--fs)); color: var(--paper-2); padding: 4px 14px; background: rgba(5,4,7,.9); border: 1px solid var(--line); opacity: 0; transition: opacity .2s; pointer-events: none; width: max-content; max-width: min(900px, 72vw); text-align: center; line-height: 1.4; text-wrap: balance; }
.hint.on { opacity: 1; }
.hint b { color: var(--violet-hot); font-weight: 500; }

/* board actor states driven by the week animation */
.card.resolved { animation: dissolve .6s var(--ease) forwards; }
@keyframes dissolve { to { opacity: 0; filter: blur(6px) brightness(2); transform: translate(-50%, -110%) scale(.8); } }
.card.firing { animation: fire .6s steps(3) 1; box-shadow: 0 0 40px var(--red-hot); }
@keyframes fire { 33% { filter: invert(1) hue-rotate(180deg); } 66% { transform: translate(-50%, -100%) scale(1.12); } }
.card.worn { animation: worn .45s ease forwards; }
@keyframes worn { to { opacity: .1; transform: translate(-50%, -100%) translateY(20px); } }
.card.broken { animation: broken .5s steps(4) forwards; }
@keyframes broken { 50% { filter: invert(1); } to { opacity: 0; transform: translate(-50%, -100%) skewX(20deg); } }

#toast { position: fixed; left: 50%; top: 112px; transform: translate(-50%, -10px); z-index: 300; padding: 8px 16px; background: var(--ink-2); border: 1px solid var(--line-2); font-size: calc(12px * var(--fs)); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#toast.good { border-color: var(--violet-hot); }
#toast.bad { border-color: var(--red-hot); color: #ffd7da; }

@media (max-width: 1200px) {
  .meter .bar { width: 70px; }
  .tray { grid-template-columns: 70px 90px minmax(0, 1fr) 190px 70px; }
}

/* end-of-week column: undo sits above the main button */
.endbox { display: flex; flex-direction: column; align-items: stretch; gap: 8px; align-self: end; }
.endbox .end { width: 100%; }
.undo { height: 32px; background: transparent; border: 1px dashed var(--line-2); color: var(--paper-2); font: inherit; font-size: calc(11px * var(--fs)); letter-spacing: .08em; cursor: pointer; }
.undo:hover:not(:disabled) { border-color: var(--violet-hot); color: var(--paper); }
.undo:disabled { opacity: .3; cursor: default; }
.undo kbd, .end kbd { font-size: calc(10px * var(--fs)); opacity: .6; margin-left: 6px; }

/* "why" trace: delta chip on the meter, causes on hover */
.meter { position: relative; }
.meter sup.why { font-size: calc(10px * var(--fs)); font-weight: 700; margin-left: 2px; }
.meter sup.why.neg { color: var(--red-hot); }
.meter sup.why.pos { color: var(--violet-hot); }
.meter[data-why] { cursor: help; }
.meter[data-why]:hover::after { content: attr(data-why); position: absolute; left: 0; top: calc(100% + 10px); z-index: 400; white-space: pre; padding: 10px 12px; background: var(--ink-2); border: 1px solid var(--line-2); color: var(--paper); font-size: calc(11px * var(--fs)); line-height: 1.6; letter-spacing: .02em; box-shadow: 0 10px 30px rgba(0,0,0,.6); }

/* hero ability next to focus */
.tray { grid-template-columns: 90px 168px minmax(0, 1fr) 230px 90px; }
@media (max-width: 1200px) { .tray { grid-template-columns: 70px 150px minmax(0, 1fr) 190px 70px; } }
.focusbox { align-self: end; display: flex; flex-direction: column; gap: 10px; }
.ability { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; text-align: left; background: linear-gradient(135deg, rgba(191,9,9,.35), rgba(42,29,68,.6)); border: 1px solid var(--red-hot); color: var(--paper); cursor: pointer; box-shadow: 0 0 22px -8px var(--red-hot); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-mid), opacity var(--t-mid); font: inherit; }
.ability:hover { transform: translateY(-2px); box-shadow: 0 0 30px -6px var(--red-hot); }
.ability .ab-k { font-size: calc(9px * var(--fs)); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-2); padding-right: 24px; }
.ability b { font-family: var(--brand); font-size: calc(13px * var(--fs)); text-transform: lowercase; }
.ability kbd { position: absolute; right: 6px; top: 6px; font-size: calc(9px * var(--fs)); opacity: .6; border: 1px solid currentColor; padding: 0 4px; }
.ability.off { opacity: .4; border-color: var(--line-2); box-shadow: none; background: var(--ink-1); }
.ability.armed { animation: armed 1s ease-in-out infinite; }
@keyframes armed { 50% { box-shadow: 0 0 0 3px rgba(255,43,60,.35), 0 0 34px -4px var(--red-hot); } }
.ability.fired { animation: fired .5s var(--ease); }
@keyframes fired { 30% { transform: scale(1.08); filter: brightness(1.8); } }

/* the season heats up: --heat 0 → 1 tints the frame from violet to red */
.vignette { background:
  radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(5, 4, 7, 0.85) 100%),
  linear-gradient(180deg, color-mix(in srgb, rgba(42,29,68,.28) calc(100% - var(--heat) * 100%), rgba(110,8,20,.32)), transparent 30%, transparent 70%, color-mix(in srgb, rgba(90,7,16,.16) calc(100% - var(--heat) * 100%), rgba(191,9,9,.3))); transition: background .8s; }
body[data-stage="boss"] .vignette { box-shadow: inset 0 0 120px rgba(191,9,9,.35); animation: boss-pulse 3.2s ease-in-out infinite; }
@keyframes boss-pulse { 50% { box-shadow: inset 0 0 160px rgba(255,43,60,.42); } }
body[data-stage="late"] .glyph-field, body[data-stage="boss"] .glyph-field { filter: saturate(1.35) contrast(1.12); } /* hue-rotate turned the cyan glyphs green */
body[data-stage="mid"] .glyph-field { filter: saturate(1.15); }
.glyph-field { transition: filter 1.2s; }
.hud:has(.relic:hover) ~ .hint, .hud:has(.relic:focus) ~ .hint { opacity: 0 !important; }
/* the leader in the fight (combat.js heroDockHtml): a cut-out portrait over the draw pile, lit while the ability is ready */
.hero-dock { --hc: var(--violet-hot); position: absolute; left: 18px; bottom: 108px; width: 90px; padding: 6px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1px solid color-mix(in srgb, var(--hc) 45%, transparent); background: radial-gradient(70% 60% at 50% 38%, color-mix(in srgb, var(--hc) 24%, #140a22), #05030a 90%); color: var(--paper-2); font: inherit; cursor: pointer; clip-path: polygon(3% 2%, 40% 0, 97% 3%, 100% 60%, 96% 100%, 50% 97%, 2% 100%, 0 45%); transition: transform var(--t-fast) var(--ease); }
.hero-dock:hover { transform: translateY(-3px); }
.hero-dock canvas { display: block; width: 49px !important; height: 60px !important; opacity: .75; transition: opacity var(--t-mid); } /* the s portrait (72×88) scaled down, so the dock stays under the list of moves */
.hero-dock span { max-width: 84px; font-size: calc(8.5px * var(--fs)); line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--hc); text-align: center; }
.hero-dock.ready canvas { opacity: 1; filter: drop-shadow(0 0 6px var(--hc)); animation: dock-ready 2.4s ease-in-out infinite; }
@keyframes dock-ready { 50% { filter: drop-shadow(0 0 12px var(--hc)); } }
.hero-dock.h-founder { --hc: var(--red-hot); } .hero-dock.h-operator { --hc: var(--cyan); } .hero-dock.h-architect { --hc: var(--violet-hot); } .hero-dock.h-facilitator { --hc: #e3b45c; }
@media (prefers-reduced-motion: reduce) { .hero-dock.ready canvas { animation: none; } }

/* the save mark on the menu button: a quiet dot, one pulse per new week, node or phase (Л-11) */
.hud .menu-btn { position: relative; }
.saved-dot { position: absolute; right: 3px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 1px var(--ink-1); }
.saved-dot.pulse { animation: saved-pulse 1.1s var(--ease) 1; }
@keyframes saved-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(31, 182, 209, .7); } 60% { transform: scale(1.5); box-shadow: 0 0 0 7px rgba(31, 182, 209, 0); } 100% { transform: scale(1); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saved-line { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; }
.saved-line .saved-dot { position: static; flex: none; }
@media (prefers-reduced-motion: reduce) { .saved-dot.pulse { animation: none; } }

/* an incident's limit of weeks next to the week; the last week burns */
.hud .center .limit { margin-left: 4px; color: var(--muted); }
.hud .center .limit.last { color: var(--red-hot); animation: limit-pulse 1.4s var(--ease) infinite; }
@keyframes limit-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .hud .center .limit.last { animation: none; } }
/* 15.10: at 1024 the centre line ate the right buttons («колода 10» wrapped, «кодекс» went off screen) */
@media (max-width: 1180px) {
  .hud { gap: 10px; padding: 0 12px; }
  .hud .center { min-width: 0; max-width: 28vw; overflow: hidden; text-overflow: ellipsis; }
  .hud .right { gap: 6px; }
  .hud .right > * { white-space: nowrap; }
}

/* parameter icons and chips (params.js): one icon and colour per parameter, the same on the HUD, the ring and a choice */
.pi { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.18em; color: rgb(var(--pc, 244,244,239)); overflow: visible; filter: drop-shadow(0 0 4px rgba(var(--pc, 244,244,239), .45)); }
.pi .f { fill: currentColor; stroke: none; }
.pi .s { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pi .cut { fill: none; stroke: #07040c; stroke-width: 1.8; stroke-linecap: round; }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip { --pc: 167,123,255; display: inline-flex; align-items: center; gap: 6px; padding: 5px 16px 5px 8px; font-size: calc(11.5px * var(--fs)); line-height: 1.2; color: var(--paper); text-align: left; background: linear-gradient(90deg, rgba(var(--pc), .2), rgba(var(--pc), .05) 70%, rgba(7,4,12,.5)); border-left: 2px solid rgb(var(--pc)); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); animation: pchip-in .3s var(--ease) both; }
.pchips .pchip:nth-child(2) { animation-delay: 60ms; } .pchips .pchip:nth-child(3) { animation-delay: 120ms; } .pchips .pchip:nth-child(4) { animation-delay: 180ms; }
@keyframes pchip-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.pchip i { font-style: normal; color: var(--paper-2); text-transform: lowercase; }
.pchip i em { font-style: normal; color: var(--muted); }
.pchip i em::after { content: ' ·'; }
.pchip b { font-family: var(--brand); font-size: calc(13px * var(--fs)); color: var(--paper); white-space: nowrap; }
.pchip.up b { color: #c8a8ff; text-shadow: 0 0 10px rgba(167,123,255,.6); }
.pchip.down b { color: var(--red-hot); text-shadow: 0 0 10px rgba(255,43,60,.45); }
.pchip s { font-size: calc(10.5px * var(--fs)); color: var(--muted); text-decoration-color: var(--red-hot); }
.pchip.p-plain { --pc: 167,123,255; }
.pchip.p-thread i { text-transform: none; }
.choice-side:hover .pchip { background: linear-gradient(90deg, rgba(var(--pc), .3), rgba(var(--pc), .08) 70%, rgba(7,4,12,.5)); }
@media (prefers-reduced-motion: reduce) { .pchip { animation: none; } }

/* Alex 15.10, screenshot 31: a log and controls on the left, a clear hand, week controls on the right. */
.tray { grid-template-columns: 242px minmax(0, 1fr) 280px; gap: 14px; padding-bottom: 26px; }
.fight-left { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "moves moves" "hero focus" "draw focus"; gap: 6px 10px; align-items: end; }
.fight-left .moves { grid-area: moves; position: static; display: flex; width: auto; max-height: 70px; overflow-y: auto; pointer-events: auto; }
.fight-left .moves:empty { display: none; }
.fight-left .moves li { font-size: calc(10px * var(--fs)); }
.fight-left .hero-dock { grid-area: hero; position: static; width: 76px; padding: 3px; }
.fight-left .hero-dock canvas { width: 38px !important; height: 46px !important; }
.fight-left .pile { grid-area: draw; height: 58px; }
.fight-left .focusbox { grid-area: focus; gap: 6px; min-width: 0; }
.fight-left .focus { gap: 5px; padding-bottom: 4px; }
.fight-left .focus i { width: 17px; height: 17px; }
.fight-left .ability { min-height: 64px; padding: 7px 8px; overflow-wrap: anywhere; }
.fight-left .ability .ab-k { padding-right: 16px; }
.fight-right { display: grid; grid-template-columns: minmax(0, 1fr) 76px; align-items: end; gap: 8px; }
.fight-right .end { height: 58px; padding: 0 10px; margin: 0; font-size: calc(12px * var(--fs)); }
.hand { padding-bottom: 32px; }
@media (max-width: 1200px) { .tray { grid-template-columns: 220px minmax(0, 1fr) 244px; gap: 10px; padding-inline: 12px; } }

/* Consumables have their own slots, outside the hand and its focus cost. */
.fight-left { grid-template-areas: "items items" "moves moves" "hero focus" "draw focus"; }
.combat-items { grid-area: items; border-top: 1px solid var(--line-2); padding-top: 5px; }
.combat-items header { display: flex; justify-content: space-between; color: var(--muted); font-size: calc(9px * var(--fs)); letter-spacing: .1em; }
.combat-items header small { font: inherit; }
.item-slots { display: flex; gap: 5px; margin-top: 4px; min-height: 25px; }
.items-empty { color: var(--muted); font-size: calc(10px * var(--fs)); }
.combat-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; padding: 4px; font-size: calc(9px * var(--fs)); text-align: left; background: var(--ink-1); border: 1px solid var(--line-2); cursor: pointer; }
.combat-item b { font-size: 18px; color: var(--cyan); }
.combat-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combat-item.on, .combat-item:hover:not(:disabled) { border-color: var(--cyan); box-shadow: 0 0 12px rgba(31,182,209,.25); }
.combat-item:disabled { opacity: .5; cursor: default; }
.combat-item:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.item-cell { flex: 1; min-width: 0; display: flex; align-items: stretch; }
.item-cell .combat-item { border-right: 0; }
.item-info { flex: 0 0 18px; padding: 2px; background: var(--ink-1); border: 1px solid var(--line-2); color: var(--muted); cursor: pointer; font-size: 12px; }
.item-info:hover, .item-info:focus-visible { color: var(--paper); border-color: var(--cyan); }

/* Reserve the front stations while aiming in a short window. Empty tray space passes clicks through. */
.tray.targeting-short #hand { pointer-events: none; }
.tray.targeting-short .card.in-hand { pointer-events: auto; transform-origin: 50% 100%; transform: translateY(16px) scale(.72); }
.tray.targeting-short .card.in-hand:hover, .tray.targeting-short .card.in-hand.selected { transform: translateY(4px) scale(.76); }

/* Portrait uses readable cards and a compact, scaled board above the hand. */
html.combat-phone .upright-plate { display: none; }
html.combat-phone #app[data-view="combat"] .board { inset: 64px auto auto 0; width: 960px; height: var(--combat-board-height, 900px); transform: scale(var(--combat-scale)); transform-origin: top left; }
html.combat-phone .hud { height: 64px; padding: 5px 10px; gap: 4px 8px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 26px 22px; }
html.combat-phone .hud .meters { grid-column: 1 / -1; gap: 12px; justify-content: space-between; }
html.combat-phone .hud .meter { gap: 4px; }
html.combat-phone .meter .k { font-size: 8px; letter-spacing: 0; }
html.combat-phone .meter b { font-size: 13px; }
html.combat-phone .meter small, html.combat-phone .meter sup { font-size: 8px; }
html.combat-phone .meter .bar { width: 40px; }
html.combat-phone .meter .pips { gap: 2px; }
html.combat-phone .meter .pips i { width: 4px; height: 8px; }
html.combat-phone .hud .center { max-width: none; font-size: 10px; text-align: left; }
html.combat-phone .edition-mark { font-size: 10px; }
html.combat-phone .hud .right { gap: 4px; }
html.combat-phone .hud .icon-btn { height: 24px; min-width: 24px; padding: 0 5px; font-size: 10px; }
html.combat-phone .hud .right > [data-act="codex"], html.combat-phone .hud .right > [data-act="help"] { display: none; }
html.combat-phone .press-chip { height: 22px; padding: 0 4px; font-size: 9px; margin: 0; }
html.combat-phone .relics { gap: 2px; margin: 0; }
html.combat-phone .relic { width: 22px; height: 22px; font-size: 12px; }
html.combat-phone .tray { height: 350px; padding: 0 10px 10px; gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 250px minmax(0, 1fr); }
html.combat-phone .hand { grid-column: 1 / -1; grid-row: 1; justify-content: flex-start; align-items: center; height: 250px; gap: 10px; padding: 0 3px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
html.combat-phone .card.in-hand { flex-shrink: 0; scroll-snap-align: start; touch-action: pan-x; }
html.combat-phone .card.in-hand:hover, html.combat-phone .card.in-hand.selected { transform: translateY(-3px); }
html.combat-phone .fight-left { grid-row: 2; grid-column: 1; grid-template-columns: 44px minmax(0, 1fr); gap: 3px 6px; }
html.combat-phone .fight-left .moves { display: none; }
html.combat-phone .fight-left .hero-dock { width: 44px; }
html.combat-phone .fight-left .hero-dock canvas { width: 24px !important; height: 28px !important; }
html.combat-phone .hero-dock span { display: none; }
html.combat-phone .fight-left .pile { height: 30px; }
html.combat-phone .pile { font-size: 8px; }
html.combat-phone .pile b { font-size: 14px; }
html.combat-phone .fight-left .focus { gap: 3px; }
html.combat-phone .fight-left .focus i { width: 12px; height: 12px; }
html.combat-phone .focus span { font-size: 8px; letter-spacing: 0; }
html.combat-phone .fight-left .ability { min-height: 42px; padding: 4px; overflow-wrap: normal; }
html.combat-phone .ability b { font-size: 11px; }
html.combat-phone .ability .ab-k { font-size: 8px; }
html.combat-phone .ability kbd { display: none; }
html.combat-phone .fight-right { grid-row: 2; grid-column: 2; grid-template-columns: minmax(0, 1fr) 40px; gap: 6px; }
html.combat-phone .fight-right .end { height: 48px; padding: 4px; font-size: 11px; }
html.combat-phone .undo { height: 22px; font-size: 9px; }
html.combat-phone .fight-right .pile { height: 76px; }
html.combat-phone .end kbd, html.combat-phone .undo kbd { display: none; }
html.combat-phone .combat-items { position: absolute; bottom: 354px; left: 10px; right: 10px; border: 0; padding: 0; }
html.combat-phone .combat-items:has(.items-empty) { display: none; }
html.combat-phone .combat-items header { font-size: 8px; }
html.combat-phone .item-slots { min-height: 22px; margin-top: 2px; }
html.combat-phone .combat-item { font-size: 10px; }
html.combat-phone .hint { top: 67px; max-width: 92vw; font-size: 11px; padding: 4px 6px; }

/* play/styles/screens.css */
.muted { color: var(--muted); }
h1, h2, h3 { font-family: var(--brand); font-weight: 700; letter-spacing: -.01em; text-transform: lowercase; margin: 0; }
.kicker { font-size: calc(10px * var(--fs)); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.lede { color: var(--paper-2); line-height: 1.55; max-width: 60ch; }

/* title */
.title-screen { position: absolute; inset: 0; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; padding: 0 7vw; gap: 4vw; }
.title-ring { margin: 0; font-size: calc(11px * var(--fs)); line-height: 1; color: rgba(167,123,255,.35); justify-self: center; filter: drop-shadow(0 0 18px rgba(139,92,246,.35)); order: 2; }
.title-ring .a1 { color: rgba(255,43,60,.45); }
.title-ring .a2 { color: var(--violet-hot); }
.title-ring .a3 { color: var(--paper); text-shadow: 0 0 10px var(--red-hot); }
/* the live ring of the title: five arcs, tasks, noise, clarity (titlering.js) */
.title-ring-wrap { margin: 0; order: 2; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.title-ring.live { order: 0; font-family: var(--mono); font-size: calc(12.5px * var(--fs)); line-height: 1.02; color: var(--paper-2); filter: drop-shadow(0 0 22px rgba(139,92,246,.28)); cursor: default; user-select: none; }
.title-ring.live .s-signal { --c: var(--st-signal); } .title-ring.live .s-context { --c: var(--st-context); } .title-ring.live .s-decision { --c: var(--st-decision); }
.title-ring.live .s-delivery { --c: var(--st-delivery); } .title-ring.live .s-retro { --c: var(--st-retro); }
.title-ring.live [data-st] { color: var(--c); }
.title-ring.live .d0 { opacity: .28; } .title-ring.live .d1 { opacity: .5; } .title-ring.live .d2 { opacity: .75; } .title-ring.live .d3 { opacity: 1; }
.title-ring.live .lb { font-weight: 700; background: rgba(9,6,16,.88); text-shadow: 0 0 8px currentColor; }
.title-ring.live .lb.on { background: var(--c); color: #0b0812; text-shadow: none; }
.title-ring.live .lb.neck { box-shadow: inset 0 -2px var(--red-hot); } /* the narrow station of the week: a steady red line, no blinking */
.title-ring.live .lb.neck::after { content: none; }
.title-ring.live .sl { background: rgba(9,6,16,.88); opacity: .9; }
.title-ring.live .tk { color: var(--paper); text-shadow: 0 0 6px #fff, 0 0 14px var(--violet-hot); }
.title-ring.live .nz { color: var(--red-hot); text-shadow: 0 0 8px var(--red-hot); }
.title-ring.live .cl { color: var(--paper); text-shadow: 0 0 10px var(--st-signal); }
.title-ring.live .f1 { opacity: .35; } .title-ring.live .f2 { opacity: .7; }
.title-ring.live .ct { color: var(--paper-2); }
.title-ring.live .ct.cl { color: var(--st-signal); text-shadow: none; } .title-ring.live .ct.nz { text-shadow: none; }
/* the sign of AI Mindset at rest (logomask.js): the face in paper and violet, the rim in the stations' colours */
.title-ring.live.sign { cursor: default; } /* hover opens it; there is nothing to click */
.title-ring.live .fc { color: #d9cdf5; }
.title-ring.live .fc.tail { color: #b8a6e6; }
.title-ring.live .fc.eye { color: var(--st-signal); text-shadow: 0 0 10px var(--st-signal); }
.title-ring.live.sign { filter: drop-shadow(0 0 24px rgba(139,92,246,.3)) drop-shadow(0 0 2px rgba(255,43,60,.22)); } /* one glow for both states, so opening does not flash */
.title-ring-cap { max-width: 46ch; min-height: 3.2em; text-align: center; font-size: calc(12px * var(--fs)); line-height: 1.5; color: var(--muted); }
.title-ring-cap b { font-weight: 700; } .title-ring-cap .s-signal { color: var(--st-signal); } .title-ring-cap .s-context { color: var(--st-context); }
.title-ring-cap .s-decision { color: var(--st-decision); } .title-ring-cap .s-delivery { color: var(--st-delivery); } .title-ring-cap .s-retro { color: var(--st-retro); }
.title-block { order: 1; display: flex; flex-direction: column; gap: 18px; }
/* review ui-7: the sign keeps inside its column at 1280 and on short screens, the links leave the buttons' corner,
   a short window lets the block start at the top and scroll instead of cutting the foot */
.title-ring.live { font-size: min(calc(12.5px * var(--fs)), .9vw, 1.75vh); }
.title-screen .title-links { left: auto; right: 84px; }
@media (max-height: 940px) {
  .title-screen { align-items: start; padding-top: 3vh; padding-bottom: 3vh; overflow-y: auto; overflow-x: hidden; } /* 14.10: a trackpad slid the menu off the left edge */
  .title-ring-wrap { align-self: center; }
  .title-block { gap: 12px; }
  .title-block h1 { font-size: clamp(56px, min(9vw, 12vh), 132px); }
  .title-block .modes { margin: 2px 0 6px; }
}
.title-block h1 { font-size: clamp(64px, 9vw, 132px); line-height: .9; color: var(--paper); text-shadow: 0 0 40px rgba(191,9,9,.45), 3px 0 0 rgba(255,43,60,.6), -3px 0 0 rgba(31,182,209,.35); }
.title-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.title-foot { font-size: calc(11px * var(--fs)); color: var(--muted); display: flex; gap: 10px; align-items: center; }
.title-foot input { width: 110px; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); color: var(--paper); font: inherit; padding: 2px 0; outline: none; }
.title-logo { position: absolute; right: 28px; bottom: 24px; height: 34px; opacity: .8; }

/* map */
.map-screen { position: absolute; inset: 64px 0 0 0; display: grid; grid-template-columns: 220px 1fr 260px; gap: 24px; padding: 24px; }
.map-legend { display: flex; flex-direction: column; gap: 10px; font-size: calc(12px * var(--fs)); color: var(--paper-2); padding-top: 20px; }
.map-legend .lg b { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border: 1px solid var(--line-2); font-size: calc(12px * var(--fs)); }
.map-wrap { position: relative; min-height: 0; }
.map-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-lines line { stroke: rgba(244,244,239,.14); stroke-dasharray: 3 6; stroke-width: 1.2; }
.map-lines line.hot { stroke: var(--violet-hot); stroke-dasharray: none; opacity: .8; }
.map-node { position: absolute; transform: translate(-50%, -50%); width: 46px; height: 46px; display: grid; place-items: center; background: var(--ink-1); border: 1px solid var(--line-2); color: var(--paper-2); cursor: default; padding: 0; }
.map-node b { font-size: calc(18px * var(--fs)); line-height: 1; }
.map-node span { position: absolute; top: 50px; font-size: calc(9px * var(--fs)); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; opacity: 0; transition: opacity .15s; }
.map-node:hover span, .map-node.avail span { opacity: 1; }
.map-node.t-boss { width: 64px; height: 64px; border-color: var(--red-hot); box-shadow: 0 0 24px rgba(255,43,60,.35); }
.map-node.visited { background: var(--violet-deep); border-color: var(--violet); color: var(--paper); opacity: .7; }
.map-node.current { outline: 2px solid var(--paper); outline-offset: 3px; opacity: 1; }
.map-node.avail { cursor: pointer; border-color: var(--paper); color: var(--paper); animation: avail 1.4s ease-in-out infinite; }
.map-node.avail:hover { background: var(--red); border-color: var(--red-hot); }
@keyframes avail { 50% { box-shadow: 0 0 0 6px rgba(244,244,239,.06), 0 0 22px rgba(167,123,255,.45); } }
.map-node:disabled:not(.visited) { opacity: .45; }
.map-side { padding-top: 20px; font-size: calc(12px * var(--fs)); line-height: 1.55; color: var(--paper-2); min-height: 0; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.map-side h3 { font-size: calc(14px * var(--fs)); color: var(--paper); margin-bottom: 8px; }

/* reward + review */
.reward-screen { position: absolute; inset: 64px 0 0 0; display: grid; grid-template-columns: minmax(420px, 1fr) 1.3fr; gap: 32px; padding: 32px 40px; overflow: auto; }
.reward-screen h2 { font-size: calc(22px * var(--fs)); margin-bottom: 6px; }
.review { width: 100%; border-collapse: collapse; font-size: calc(12px * var(--fs)); margin-top: 14px; }
.review th { text-align: left; font-weight: 400; font-size: calc(9px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line-2); }
.review td { padding: 8px; border-bottom: 1px solid var(--line); position: relative; }
.review td:first-child { color: var(--paper); }
.review td .st { color: var(--muted); font-size: calc(10px * var(--fs)); margin-right: 4px; }
.review td .spark { position: absolute; left: 8px; bottom: 2px; height: 2px; background: linear-gradient(90deg, var(--violet-hot), var(--red-hot)); }
.review td.barcell { min-width: 120px; }
.review td.barcell .spark { position: static; display: block; height: 6px; }
.review td.bad { color: var(--red-hot); }
.review td.clar { color: var(--violet-hot); font-weight: 700; }
.review td.clar .boost { margin-left: 4px; font-weight: 400; font-size: calc(10px * var(--fs)); color: var(--cyan, #1fb6d1); }
.review em { font-style: normal; font-size: calc(10px * var(--fs)); padding: 1px 5px; border: 1px solid currentColor; white-space: nowrap; }
.review em.good { color: var(--violet-hot); }
.review em.bad { color: var(--red-hot); }
.review .src { display: block; font-size: calc(9px * var(--fs)); color: var(--muted); }
.loot { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.loot-i { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--line-2); background: var(--ink-1); font-size: calc(11px * var(--fs)); color: var(--muted); }
.loot-i b { color: var(--paper); font-size: calc(16px * var(--fs)); }
.loot-i small { color: var(--paper-2); max-width: 28ch; }
.relic-loot { border-color: var(--violet-hot); }
.choices { display: flex; gap: 22px; margin: 18px 0 24px; flex-wrap: wrap; }
.card.choice { cursor: pointer; }
.card.choice:hover { transform: translateY(-10px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); box-shadow: 0 0 0 1px var(--accent), 0 0 40px -8px var(--accent), 0 30px 40px -20px #000; }

/* dilemma */
.event-screen { position: absolute; inset: 64px 0 0 0; display: grid; grid-template-columns: 1fr minmax(380px, 460px) 1fr; align-items: center; gap: 28px; padding: 30px; }
.dilemma { position: relative; padding: 26px 28px; background: var(--ink-1); border: 1px solid var(--line-2); box-shadow: 0 40px 80px -30px #000, inset 0 0 60px rgba(42,29,68,.6); cursor: grab; transition: transform .25s var(--ease), opacity .25s; touch-action: none; }
.dilemma .faction { font-size: calc(11px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.dilemma pre { margin: 14px 0; font-size: calc(8.5px * var(--fs)); line-height: 1; color: rgba(167,123,255,.4); text-align: center; }
.dilemma pre .a2 { color: var(--violet-hot); }
.dilemma pre .a3 { color: var(--paper); text-shadow: 0 0 8px var(--red-hot); }
.dilemma h2 { font-size: calc(22px * var(--fs)); margin-bottom: 10px; }
.dilemma p { color: var(--paper-2); line-height: 1.55; margin: 0; }
.swipe-hint { margin-top: 18px; font-size: calc(10px * var(--fs)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; }
.dilemma.gone-left { transform: translateX(-60vw) rotate(-24deg); opacity: 0; }
.dilemma.gone-right { transform: translateX(60vw) rotate(24deg); opacity: 0; }
/* 15.10: the two answers are torn plates like the title's modes, pulled in to the card: violet on the left, cyan on the right */
.choice-side { --ch: 167,123,255; position: relative; isolation: isolate; justify-self: end; width: 100%; max-width: 340px; min-height: 150px; display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 22px; background: transparent; border: 0; color: var(--paper); text-align: left; cursor: pointer; filter: drop-shadow(5px 5px 0 rgba(191,9,9,.5)) drop-shadow(0 18px 24px rgba(0,0,0,.35)); transition: transform .22s var(--ease), filter .22s; }
.choice-side.right { --ch: 31,182,209; justify-self: start; text-align: right; align-items: flex-end; filter: drop-shadow(-5px 5px 0 rgba(191,9,9,.5)) drop-shadow(0 18px 24px rgba(0,0,0,.35)); }
.choice-side::before, .choice-side::after { content: ''; position: absolute; inset: 0; z-index: -1; clip-path: polygon(0 5%, 7% 0, 19% 3%, 33% 0, 46% 2%, 61% 0, 75% 4%, 88% 0, 100% 3%, 99% 34%, 100% 66%, 98% 100%, 85% 96%, 71% 100%, 56% 97%, 42% 100%, 27% 96%, 13% 100%, 0 97%, 1% 62%, 0 30%); }
.choice-side::before { background: linear-gradient(160deg, rgba(var(--ch),.34), rgba(7,4,12,.9) 70%); transition: background .22s; }
.choice-side::after { background: repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 7px); }
.choice-side.right::before, .choice-side.right::after { clip-path: polygon(0 2%, 12% 0, 26% 4%, 40% 0, 53% 3%, 67% 0, 80% 3%, 93% 0, 100% 6%, 98% 40%, 100% 74%, 100% 97%, 90% 100%, 76% 96%, 62% 100%, 49% 97%, 34% 100%, 20% 96%, 7% 100%, 0 94%, 2% 50%); }
.choice-side.right::before { background: linear-gradient(200deg, rgba(var(--ch),.3), rgba(7,4,12,.9) 70%); }
.choice-side .arrow { font-family: var(--brand); font-size: calc(30px * var(--fs)); line-height: 1; color: rgb(var(--ch)); transition: transform .22s var(--ease); }
.choice-side b { font-family: var(--brand); font-size: calc(24px * var(--fs)); line-height: 1.05; text-transform: lowercase; text-wrap: balance; }
.choice-side .fx { display: flex; flex-wrap: wrap; gap: 6px; }
.choice-side.right .fx { justify-content: flex-end; }
.choice-side .fx > span:not(.pchip) { font-size: calc(11px * var(--fs)); padding: 2px 6px; border: 1px solid currentColor; }
.choice-side .fx span.soft s { opacity: .55; text-decoration-color: var(--red-hot); margin-right: 4px; }
.choice-side .fx span.thread-chip { color: var(--violet-hot); border-style: dashed; }
.dilemma .where { font-size: calc(10px * var(--fs)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.choice-side .fx .good { color: var(--violet-hot); }
.choice-side .fx .bad { color: var(--red-hot); }
.choice-side:hover::before, .choice-side.lean::before { background: linear-gradient(160deg, rgba(var(--ch),.55), rgba(7,4,12,.88) 75%); }
.choice-side.left:hover, .choice-side.left.lean { transform: translateX(-6px) rotate(-.6deg); }
.choice-side.right:hover, .choice-side.right.lean { transform: translateX(6px) rotate(.6deg); }
.choice-side.left:hover .arrow, .choice-side.left.lean .arrow { transform: translateX(-6px); }
.choice-side.right:hover .arrow, .choice-side.right.lean .arrow { transform: translateX(6px); }

/* shop */
.shop-screen { position: absolute; inset: 64px 0 0 0; display: grid; grid-template-columns: 1fr 320px; gap: 30px; padding: 30px 40px; overflow: auto; }
.shop-main { display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.shop-main h3 { font-size: calc(13px * var(--fs)); color: var(--muted); margin-top: 6px; }
.shop-cards { flex: 1; display: flex; flex-wrap: wrap; gap: 26px 22px; justify-content: center; align-content: center; padding-bottom: 40px; }
.ware { display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; transition: transform .18s var(--ease); }
.ware:hover { transform: translateY(-6px); }
.ware .price { font-weight: 800; font-size: calc(15px * var(--fs)); padding: 3px 12px; border: 1px solid var(--line-2); background: var(--ink-1); }
.ware:hover .price { border-color: var(--violet-hot); }
.ware.poor .price { color: var(--red-hot); }
.ware.sold { opacity: .3; pointer-events: none; }
.shop-side { display: flex; flex-direction: column; gap: 10px; }
.shop-side h3 { font-size: calc(13px * var(--fs)); color: var(--muted); margin-top: 6px; }
.relic-ware { display: flex; flex-direction: column; gap: 4px; padding: 12px; text-align: left; background: var(--ink-1); border: 1px solid rgba(167,123,255,.4); color: var(--paper); cursor: pointer; }
.relic-ware span { font-size: calc(11px * var(--fs)); color: var(--paper-2); }
.relic-ware em { font-style: normal; font-weight: 800; }
.relic-ware:disabled { opacity: .62; cursor: default; }

/* rest / workshop */
.rest-screen { position: absolute; inset: 64px 0 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; }
.rest-art { margin: 0; font-size: calc(11px * var(--fs)); line-height: 1; color: rgba(167,123,255,.35); }
.rest-art .a2 { color: var(--violet-hot); }
.rest-art .a3 { color: var(--paper); }
.rest-actions { display: flex; gap: 16px; }
.btn.big { flex-direction: column; min-width: 220px; padding: 18px 22px; font-size: calc(16px * var(--fs)); }
.btn.big small { font-size: calc(11px * var(--fs)); opacity: .7; letter-spacing: 0; }

/* report + archive */
.report-screen { position: absolute; inset: 0; overflow: auto; padding: 56px 8vw; display: flex; flex-direction: column; gap: 28px; }
.report-head h1 { font-size: clamp(48px, 6vw, 88px); margin: 8px 0; text-shadow: 3px 0 0 rgba(255,43,60,.6), -3px 0 0 rgba(31,182,209,.35); }
.report-nums { display: flex; gap: 32px; margin-top: 18px; }
.report-nums span { display: flex; flex-direction: column; font-size: calc(10px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.report-nums b { font-family: var(--brand); font-size: calc(34px * var(--fs)); color: var(--paper); letter-spacing: 0; }
.report-body h2 { font-size: calc(18px * var(--fs)); }
.report-actions { display: flex; gap: 10px; }

/* overlays */
.overlay { position: fixed; inset: 0; z-index: 250; background: rgba(5,4,7,.78); backdrop-filter: blur(4px); display: grid; place-items: center; animation: fadein .18s ease; }
@keyframes fadein { from { opacity: 0; } }
.sheet { position: relative; width: min(560px, 92vw); max-height: 86vh; overflow: auto; padding: 28px 30px; background: var(--ink-1); border: 1px solid var(--line-2); box-shadow: 0 40px 100px -30px #000; }
.sheet.wide { width: min(1100px, 94vw); }
.sheet h2 { font-size: calc(20px * var(--fs)); margin-bottom: 14px; }
.sheet h3 { font-size: calc(13px * var(--fs)); margin: 18px 0 8px; color: var(--paper-2); }
.sheet .close { position: absolute; right: 12px; top: 10px; background: transparent; border: 0; color: var(--muted); font-size: calc(24px * var(--fs)); cursor: pointer; }
.deck-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.how { padding-left: 20px; line-height: 1.6; color: var(--paper-2); }
.how li { margin-bottom: 8px; }
.how b { color: var(--paper); }
.kw-list { display: grid; grid-template-columns: 110px 1fr; gap: 6px 14px; font-size: calc(12px * var(--fs)); }
.kw-list dt { color: var(--violet-hot); }
.kw-list dd { margin: 0; color: var(--paper-2); }
.menu-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.toggle { display: flex; gap: 10px; align-items: center; font-size: calc(13px * var(--fs)); color: var(--paper-2); cursor: pointer; }
.toggle input { accent-color: var(--red); }

/* model verdict caveat, debrief, markdown export */
.model-note { margin-top: 12px; font-size: calc(11px * var(--fs)); color: var(--muted); letter-spacing: .02em; border-left: 2px solid var(--violet); padding-left: 10px; max-width: 70ch; }
.debrief { margin: 6px 0 0 18px; padding: 0; color: var(--paper-2); font-size: calc(13px * var(--fs)); line-height: 1.7; }
.debrief li::marker { color: var(--red-hot); }
.md-out { width: 100%; height: 46vh; background: var(--ink-0, #050407); color: var(--paper); border: 1px solid var(--line-2); font: 12px/1.5 'JetBrains Mono', monospace; padding: 14px; resize: vertical; }

/* card dossier */
.dossier { display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: start; }
.dossier-text h2 { font-family: var(--brand); font-size: calc(30px * var(--fs)); margin: 6px 0 12px; }
.dossier-text p { color: var(--paper-2); line-height: 1.6; max-width: 56ch; }
.kw-list { list-style: none; padding: 0; margin: 14px 0; font-size: calc(12px * var(--fs)); color: var(--paper-2); line-height: 1.7; }
.kw-list b { color: var(--violet-hot); font-weight: 500; }
.src-line { font-size: calc(11px * var(--fs)); }
.src-line code { color: var(--paper); }

/* season ring in the report */
.season-ring { max-width: 760px; margin: 6px 0 18px; }
.season-ring svg { width: 100%; height: auto; display: block; }
.season-ring .sr-n { font-family: var(--brand); font-size: calc(15px * var(--fs)); fill: var(--paper); }
.season-ring .sr-l { font-family: var(--mono); font-size: calc(11px * var(--fs)); fill: var(--paper-2); }
.season-ring .neck .sr-l { fill: var(--red-hot); }
.season-ring p { font-size: calc(11px * var(--fs)); margin-top: 4px; }

/* dossier keyword list: one rule per line, full width (the help sheet keeps its two-column grid) */
.dossier ul.kw-list { display: block; padding: 0; margin: 10px 0; }
.dossier ul.kw-list li { list-style: none; margin: 4px 0; line-height: 1.5; color: var(--paper-2); }
.dossier ul.kw-list li b { color: var(--violet-hot); font-weight: 500; }

.season-ring .sr-m { font-family: var(--mono); font-size: calc(10px * var(--fs)); fill: var(--red-hot); }
.findings { margin: 8px 0 22px; padding-left: 18px; color: var(--paper); line-height: 1.7; font-size: calc(13px * var(--fs)); }
.findings li::marker { color: var(--violet-hot); content: '◇  '; }
.table-key { font-size: calc(11px * var(--fs)); margin-top: 8px; max-width: 110ch; }

/* workshop upgrade pick: cards are shown as they will become */
.deck-grid .card.will-up { box-shadow: 0 0 0 1px var(--violet-hot), 0 0 26px -8px var(--violet-hot); }
/* what the next level changes, under the card it will become */
.up-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.up-diff { max-width: calc(220px * .86); padding: 4px 8px; font-size: calc(11px * var(--fs)); line-height: 1.3; color: var(--paper); background: rgba(22, 18, 30, .94);
  border: 1px solid var(--violet-hot); text-align: center; animation: deal .35s var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms); }
.up-diff i { display: block; font-style: normal; font-size: calc(9px * var(--fs)); letter-spacing: .12em; text-transform: uppercase; color: #bfa6ff; }
.up-wrap:hover .up-diff { border-color: var(--paper); }
.plus.l3, .card .name .plus.l3, .ins-text .plus.l3 { color: #ffb02e; text-shadow: 0 0 8px #ffb02e; }

/* ---------- v0.2 ---------- */
/* title: seed with a dice, language switch */
.title-foot { flex-wrap: wrap; }
.lang-switch { display: inline-flex; border: 1px solid var(--line-2); }
.lang-switch button { background: transparent; border: 0; color: var(--muted); padding: 2px 8px; cursor: pointer; font-size: calc(11px * var(--fs)); letter-spacing: .08em; }
.lang-switch button.on { background: var(--paper); color: var(--ink-0); }
.seed-line code { color: var(--paper); }

/* map: chapters of the season along the left edge, lines draw in */
.map-chapters { position: absolute; inset: 0; pointer-events: none; }
.map-chapters .ch { position: absolute; left: -6px; transform: translate(-100%, -50%); font-size: calc(10px * var(--fs)); letter-spacing: .06em; color: var(--muted); white-space: nowrap; opacity: .55; transition: opacity var(--t-mid), color var(--t-mid); }
.map-chapters .ch i { font-style: normal; color: var(--ink-3); margin-right: 6px; }
.map-chapters .ch.done { opacity: .3; text-decoration: line-through; text-decoration-color: rgba(167,123,255,.4); }
.map-chapters .ch.now { opacity: 1; color: var(--paper); }
.map-chapters .ch.now i { color: var(--red-hot); }
.map-chapters .ch.now::after { content: ' ←'; color: var(--red-hot); }
.map-screen { grid-template-columns: 200px 1fr 260px; }
.map-wrap { margin-left: 150px; }
#app[data-fresh="1"] .map-lines line { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); animation: draw-line .6s var(--ease) forwards; }
#app[data-fresh="1"] .map-lines line:not(.hot) { animation-name: draw-line-dim; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes draw-line-dim { to { stroke-dashoffset: 0; stroke-dasharray: 3 6; } }
#app[data-fresh="1"] .map-node { animation: node-in .32s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes node-in { from { opacity: 0; transform: translate(-50%, -30%) scale(.7); } }
#app[data-fresh="1"] .map-node.avail { animation: node-in .32s var(--ease) both, avail 1.4s ease-in-out .4s infinite; animation-delay: calc(var(--i, 0) * 35ms), .5s; }
.hero-badge { margin-top: 18px; padding: 12px; border: 1px solid rgba(167,123,255,.35); background: rgba(42,29,68,.25); }
.hero-badge b { display: block; font-family: var(--brand); font-size: calc(15px * var(--fs)); color: var(--paper); margin: 4px 0; text-transform: lowercase; }
.hero-badge p { margin: 4px 0 0; font-size: calc(11px * var(--fs)); }
.hero-badge em { font-style: normal; color: var(--red-hot); }

/* review as cards */
.fight-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 14px 0 16px; }
.fight-tiles div { background: var(--ink-1); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.fight-tiles b { font-family: var(--brand); font-size: calc(26px * var(--fs)); color: var(--paper); line-height: 1; }
.fight-tiles span { font-size: calc(9px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.rv { position: relative; padding: 12px 14px 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--stc) 10%, transparent), transparent 60%), var(--ink-1); border: 1px solid var(--line-2); border-top: 2px solid var(--stc); cursor: zoom-in; overflow: hidden; transition: transform var(--t-mid) var(--ease), border-color var(--t-fast); }
#app[data-fresh="1"] .rv { animation: deal .38s var(--ease) both; animation-delay: calc(80ms + var(--i, 0) * 55ms); }
.rv:hover { transform: translateY(-3px); border-color: var(--paper-2); }
.rv.st-none { --stc: var(--paper-2); }
.rv header { display: flex; flex-direction: column; gap: 2px; padding-right: 86px; }
.rv-st { font-size: calc(10px * var(--fs)); color: var(--stc); letter-spacing: .04em; }
.rv header b { font-family: var(--brand); font-size: calc(15px * var(--fs)); line-height: 1.15; text-transform: lowercase; color: var(--paper); }
.rv header b sup { color: var(--red-hot); }
.rv header small { color: var(--muted); font-size: calc(11px * var(--fs)); }
.stamp { position: absolute; right: 10px; top: 12px; transform: rotate(-7deg); display: flex; align-items: center; gap: 4px; padding: 3px 7px; border: 1.5px solid currentColor; font-size: calc(10px * var(--fs)); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; mix-blend-mode: screen; }
.stamp i { font-style: normal; font-size: calc(13px * var(--fs)); }
.stamp.good { color: var(--violet-hot); box-shadow: 0 0 14px -4px var(--violet-hot) inset; }
.stamp.bad { color: var(--red-hot); box-shadow: 0 0 14px -4px var(--red-hot) inset; }
#app[data-fresh="1"] .stamp { animation: stamp .4s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(360ms + var(--i, 0) * 55ms); }
.rv .stamp { animation-delay: calc(360ms + var(--i, 0) * 55ms); }
@keyframes stamp { from { opacity: 0; transform: rotate(-7deg) scale(2.2); } }
.rv-main { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 6px; }
.rv-big { font-family: var(--brand); font-size: calc(30px * var(--fs)); line-height: 1; color: var(--paper); }
.rv-unit { font-size: calc(9px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rv-delta { margin-left: auto; font-size: calc(11px * var(--fs)); color: var(--muted); }
.rv-delta.up { color: var(--violet-hot); }
.rv-delta.down { color: var(--red-hot); }
.rv-bar { display: flex; gap: 2px; height: 6px; width: var(--w, 100%); min-width: 12px; }
#app[data-fresh="1"] .rv-bar { animation: bar-grow .6s var(--ease) both; animation-delay: calc(200ms + var(--i, 0) * 55ms); transform-origin: left; }
@keyframes bar-grow { from { transform: scaleX(0); } }
.rv-bar i { display: block; min-width: 3px; }
.rv-bar .p, .rv-nums .p b { background: var(--stc); color: var(--stc); }
.rv.st-retro .rv-bar .p { background: var(--paper-2); }
.rv-bar .c { background: var(--violet-hot); } .rv-nums .c b { color: var(--violet-hot); }
.rv-bar .b { background: var(--cyan); } .rv-nums .b b { color: var(--cyan); }
.rv-bar .r { background: var(--paper); } .rv-nums .r b { color: var(--paper); }
.rv-bar .o { background: repeating-linear-gradient(135deg, var(--red-hot) 0 3px, transparent 3px 5px); } .rv-nums .o b { color: var(--red-hot); }
.rv-nums .p b { background: none; }
.rv-nums { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: calc(10px * var(--fs)); color: var(--muted); }
.rv-nums b { font-weight: 700; }
.rv-story { margin: 8px 0 0; font-size: calc(12px * var(--fs)); line-height: 1.45; color: var(--paper-2); text-wrap: pretty; }
.rv.v-bad { border-color: rgba(255,43,60,.45); }
.reward-screen { grid-template-columns: minmax(520px, 1.25fr) 1fr; }
.choices > .card { animation: deal .42s var(--ease) both; animation-delay: calc(300ms + var(--i, 0) * 90ms); }
.ware { animation: deal .38s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
#app[data-fresh="0"] .choices > .card, #app[data-fresh="0"] .ware { animation: none; }
.relic-ware .glyph { color: var(--violet-hot); }
.all-nums { margin: 16px 0; }
.all-nums summary { cursor: pointer; font-size: calc(12px * var(--fs)); color: var(--paper-2); }
.season-ring .sr-grow { animation: sr-grow .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes sr-grow { from { transform: scaleY(0); } }
.dilemma.held { transition: none; cursor: grabbing; }
.dilemma { transition: transform .22s var(--ease), opacity .22s; }

/* ---------- v0.3 act map: a tilted board of chapter bands, places on nodes, the hero token, the story panel ---------- */
.map-screen { grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; padding: 18px 24px 16px; }
.map-board { position: relative; min-height: 0; display: flex; flex-direction: column; gap: 10px; perspective: 1500px; perspective-origin: 50% 20%; }
.map-plane { position: relative; flex: 1; min-height: 0; transform: rotateX(16deg); transform-origin: 50% 100%; transform-style: preserve-3d; border: 1px solid rgba(167,123,255,.18); background: linear-gradient(180deg, rgba(42,29,68,.18), rgba(7,4,12,.6)); box-shadow: 0 50px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4) inset; }
.map-bands { position: absolute; inset: 0; pointer-events: none; }
.band { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(244,244,239,.05); transition: background var(--t-mid), opacity var(--t-mid); }
.band:nth-child(odd) { background: rgba(255,255,255,.012); }
.band .bl { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; font-size: calc(10px * var(--fs)); letter-spacing: .05em; color: var(--muted); max-width: 180px; }
.band .bl i { font-style: normal; color: var(--ink-3); font-size: calc(9px * var(--fs)); }
.band .bl b { font-weight: 500; color: var(--paper-2); font-size: calc(11px * var(--fs)); text-transform: lowercase; }
.band .bl small { font-size: calc(9.5px * var(--fs)); color: var(--muted); opacity: .8; }
.band.done { opacity: .45; }
.band.done .bl b { text-decoration: line-through; text-decoration-color: rgba(167,123,255,.5); }
.band.now { background: linear-gradient(90deg, rgba(255,43,60,.13), rgba(123,85,173,.06) 50%, transparent); border-top-color: rgba(255,43,60,.35); }
.band.now .bl i { color: var(--red-hot); }
.band.now .bl b { color: var(--paper); }
.band.fog { opacity: .55; filter: blur(.3px); }
.band.mood-crunch:not(.done) { background-image: linear-gradient(90deg, rgba(255,43,60,.06), transparent 60%); }
.map-lines path { fill: none; stroke: rgba(244,244,239,.13); stroke-dasharray: 2 6; stroke-width: 1.2; }
.map-lines path.walked { stroke: var(--red-hot); stroke-dasharray: none; stroke-width: 2; opacity: .85; filter: drop-shadow(0 0 4px rgba(255,43,60,.6)); }
.map-lines path.open { stroke: var(--violet-hot); stroke-dasharray: 6 5; stroke-width: 1.6; animation: dash-run 1.2s linear infinite; }
@keyframes dash-run { to { stroke-dashoffset: -22; } }
.map-node { width: 42px; height: 42px; border-radius: 2px; box-shadow: 0 6px 0 -1px rgba(0,0,0,.6), 0 10px 18px -6px #000; }
.map-node span { top: 47px; width: max-content; max-width: 132px; padding: 1px 6px 2px; background: rgba(9,6,16,.88); box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 4px 10px -4px #000; font-size: calc(9.5px * var(--fs)); line-height: 1.25; letter-spacing: .02em; text-transform: none; text-align: center; white-space: normal; opacity: .0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.map-node.avail span, .map-node.visited span, .map-node:hover span, .map-node.t-boss span { opacity: .9; }
.map-node.avail span { color: var(--paper); }
.map-node.near span { opacity: .72; color: var(--paper-2); }
.map-node.fog { opacity: .28 !important; }
.map-node.t-boss { width: 62px; height: 62px; }
/* 15.10 (Alex: «the act map just hangs»): every kind of node has its colour, a road from a hovered node lights up to
   the boss and the rest dims, a signal runs along the roads open from here, the open nodes breathe a ring */
.map-node { --tc: 244,244,239; border-color: rgba(var(--tc),.45); background: linear-gradient(160deg, rgba(var(--tc),.16), var(--ink-1) 70%); transition: opacity .18s, transform .18s var(--ease), border-color .18s, box-shadow .18s; }
.map-node b { color: rgb(var(--tc)); }
.map-node.t-combat { --tc: 255,120,120; } .map-node.t-elite, .map-node.t-boss { --tc: 255,43,60; } .map-node.t-event { --tc: 31,182,209; }
.map-node.t-shop { --tc: 255,179,107; } .map-node.t-rest { --tc: 140,226,180; } .map-node.t-workshop { --tc: 167,123,255; }
.map-node.avail::after { content: ''; position: absolute; inset: -5px; border: 1px solid rgba(var(--tc),.8); pointer-events: none; animation: node-ring 1.6s ease-out infinite; }
@keyframes node-ring { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }
.map-node.avail:hover { transform: translate(-50%, -50%) scale(1.12); background: rgba(var(--tc),.85); color: var(--ink-0, #07040c); }
.map-node.avail:hover b { color: #07040c; }
.map-plane.tracing .map-node:not(.route):not(.hovered):not(.current):not(.visited) { opacity: .22; }
.map-plane.tracing .map-node.route { opacity: 1 !important; border-color: rgba(var(--tc),.9); box-shadow: 0 0 14px rgba(var(--tc),.35), 0 6px 0 -1px rgba(0,0,0,.6); }
.map-plane.tracing .map-node.route span { opacity: .85; }
.map-plane.tracing .map-lines path:not(.route):not(.walked) { opacity: .25; }
.map-lines path.route { stroke: var(--paper); stroke-width: 1.8; stroke-dasharray: 6 5; opacity: .9; animation: dash-run 1s linear infinite; }
.map-lines .spark { fill: var(--paper); filter: drop-shadow(0 0 4px var(--violet-hot)) drop-shadow(0 0 8px rgba(255,43,60,.6)); }
@media (prefers-reduced-motion: reduce) { .map-lines .spark, .map-node.avail::after { display: none; } .map-lines path.route { animation: none; } }
.map-side .ahead.t-elite, .map-side .ahead.t-boss, .map-side .ahead.t-combat { border-left-color: var(--red-hot); }
.map-side .ahead.t-event { border-left-color: var(--cyan); } .map-side .ahead.t-shop { border-left-color: #ffb36b; } .map-side .ahead.t-rest { border-left-color: #8ce2b4; }
.map-side .ahead .gives { color: var(--paper); margin-bottom: 4px; }
.map-side .ahead i { font-style: normal; font-size: calc(9.5px * var(--fs)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.map-side .ahead .crises { color: #ff9a9a; margin-bottom: 4px; }
.map-side .ahead .onward { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.map-side .ahead .onward span { font-size: calc(11.5px * var(--fs)); color: var(--paper-2); }
.map-side .ahead .onward span b { display: inline; margin: 0 3px 0 0; font-size: calc(12px * var(--fs)); }
.map-side .ahead .onward .t-combat b { color: #ff7878; } .map-side .ahead .onward .t-elite b { color: var(--red-hot); } .map-side .ahead .onward .t-event b { color: var(--cyan); }
.map-side .ahead .onward .t-shop b { color: #ffb36b; } .map-side .ahead .onward .t-rest b { color: #8ce2b4; } .map-side .ahead .onward .t-workshop b { color: var(--violet-hot); }
.map-hero { position: absolute; translate: 34px -62%; pointer-events: none; z-index: 3; padding: 3px; border: 1px solid var(--hc, var(--violet-hot)); background: rgba(7,4,12,.92); box-shadow: 0 0 16px color-mix(in srgb, var(--hc, #a77bff) 45%, transparent); animation: hero-bob 2.4s ease-in-out infinite; }
.map-hero::after { content: ''; position: absolute; left: -12px; top: 62%; width: 11px; height: 1px; background: var(--hc, var(--violet-hot)); }
.map-hero.waits { translate: -50% -62%; }
.map-hero.waits::after { display: none; }
@keyframes hero-bob { 50% { transform: translateX(4px); } }
.map-legend { flex-direction: row; flex-wrap: wrap; gap: 14px; padding: 0 0 0 4px; font-size: calc(11px * var(--fs)); }
.map-legend .lg b { width: 18px; height: 18px; font-size: calc(11px * var(--fs)); margin-right: 6px; }
.map-side { padding: 18px 18px 14px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(42,29,68,.35), rgba(7,4,12,.7)); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.map-side .ch-title { margin: 0; font-family: var(--brand); font-size: calc(26px * var(--fs)); line-height: 1; text-transform: lowercase; color: var(--paper); text-shadow: 2px 0 0 rgba(255,43,60,.45); }
.map-side .ch-place { font-size: calc(11px * var(--fs)); color: var(--cyan); letter-spacing: .04em; }
.map-side .ch-intro { margin: 0; font-size: calc(12.5px * var(--fs)); line-height: 1.6; color: var(--paper-2); }
.map-side .ahead { padding: 10px 12px; border-left: 2px solid var(--violet-hot); background: rgba(123,85,173,.1); animation: dossier-in .2s var(--ease) both; }
.map-side .ahead b { display: block; color: var(--paper); font-size: calc(13px * var(--fs)); margin: 3px 0; }
.map-side .ahead p { margin: 0; font-size: calc(11.5px * var(--fs)); line-height: 1.5; color: var(--paper-2); }
.threads { display: flex; flex-direction: column; gap: 6px; }
.thread { padding: 6px 10px; border: 1px solid rgba(31,182,209,.3); background: rgba(31,182,209,.05); }
.thread b { display: block; font-size: calc(11.5px * var(--fs)); color: var(--cyan); font-weight: 500; }
.thread small { font-size: calc(11px * var(--fs)); color: var(--paper-2); }
.thread.paid { opacity: .55; border-style: dashed; }
.hero-badge { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin-top: 4px; }
.hero-badge canvas { background: radial-gradient(circle at 50% 40%, rgba(42,29,68,.9), #07040c 75%); }
#app[data-fresh="1"] .map-lines path { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); animation: draw-line .6s var(--ease) forwards; }
#app[data-fresh="1"] .map-lines path:not(.walked):not(.open) { animation-name: draw-line-dim; }
@media (max-width: 1100px) { .map-screen { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; } .map-side { max-height: 26vh; } } /* 15.10: the plane keeps the height, the side panel scrolls under it */

/* ---------- v0.3 scene card before a fight ---------- */
.beat { position: absolute; inset: 64px 0 0; z-index: 40; display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 45%, rgba(18,10,32,.82), rgba(4,2,8,.94)); backdrop-filter: blur(3px); animation: beat-in .3s var(--ease) both; cursor: pointer; }
.beat.out { animation: beat-out .22s var(--ease) both; }
@keyframes beat-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes beat-out { to { opacity: 0; } }
.beat-card { width: min(560px, 90vw); padding: 28px 30px 24px; border: 1px solid rgba(167,123,255,.35); border-left: 3px solid var(--violet-hot); background: linear-gradient(160deg, rgba(42,29,68,.6), rgba(7,4,12,.95)); box-shadow: 0 40px 90px -30px #000; display: flex; flex-direction: column; gap: 12px; animation: dossier-in .4s var(--ease) .05s both; }
.beat.tier-elite .beat-card { border-left-color: var(--red-hot); }
.beat.tier-boss .beat-card { border-left-color: var(--red-hot); border-color: rgba(255,43,60,.45); box-shadow: 0 0 60px -10px rgba(255,43,60,.35), 0 40px 90px -30px #000; }
.beat-card h2 { margin: 0; font-family: var(--brand); font-size: clamp(28px, 3vw, 40px); line-height: 1; text-transform: lowercase; color: var(--paper); text-shadow: 3px 0 0 rgba(255,43,60,.45), -2px 0 0 rgba(31,182,209,.3); }
.beat-card p { margin: 0; font-size: calc(14px * var(--fs)); line-height: 1.6; color: var(--paper-2); }
.beat-card .beat-thread { font-size: calc(12.5px * var(--fs)); color: var(--cyan); }
.beat-card .beat-fx { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid currentColor; font-weight: 400; font-size: calc(11px * var(--fs)); color: var(--paper); }
.beat-card blockquote { margin: 0; padding-left: 12px; border-left: 2px solid var(--red-hot); font-style: italic; color: var(--muted); font-size: calc(12.5px * var(--fs)); }
.beat-card .btn { align-self: flex-start; margin-top: 6px; }

/* ---------- v0.3 modes on the title and the one-fight setup ---------- */
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 14px; max-width: 760px; }
.mode.m-tutorial { border-style: dashed; }
.mode { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 14px; text-align: left; font: inherit; color: var(--paper-2); background: linear-gradient(160deg, rgba(42,29,68,.55), rgba(7,4,12,.85)); border: 1px solid rgba(167,123,255,.3); cursor: pointer; transition: transform var(--t-mid) var(--ease), border-color var(--t-fast), box-shadow var(--t-mid); }
.mode .mk { font-size: calc(9px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mode b { font-family: var(--brand); font-size: calc(22px * var(--fs)); line-height: 1; color: var(--paper); text-transform: lowercase; }
.mode small { font-size: calc(11px * var(--fs)); line-height: 1.4; color: var(--paper-2); }
.mode kbd { position: absolute; right: 10px; top: 10px; }
.mode:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--paper); box-shadow: 0 18px 30px -18px rgba(255,43,60,.6); }
.mode.m-season { border-color: rgba(255,43,60,.55); background: linear-gradient(160deg, rgba(191,9,9,.28), rgba(7,4,12,.85)); }
.mode.m-trial b { color: var(--cyan); }
.mode.m-fight b { color: var(--violet-hot); }
.mode.soon { opacity: .4; cursor: not-allowed; }
.fight-setup { width: min(1220px, 100%); display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); background: rgba(7,4,12,.7); }
.fs-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fs-row .fl { width: 64px; font-size: calc(9px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fs-row .chip i { font-style: normal; color: var(--muted); font-size: calc(9.5px * var(--fs)); }
.fs-row .chip.tier-elite i, .fs-row .chip.tier-boss i { color: var(--red-hot); }
@media (max-width: 760px) { .modes { grid-template-columns: 1fr; } }

/* ---------- v0.3 prologue: the hero's portrait in place of the dilemma art ---------- */
.prologue-screen .dilemma canvas { display: block; margin: 4px auto 8px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--hc, #7b55ad) 18%, #120a20), #05030a 78%); border: 1px solid var(--line); }
.prologue-screen .dilemma .logline { font-size: calc(11px * var(--fs)); color: var(--muted); margin: 0 0 6px; }
.prologue-screen .dilemma blockquote { margin: 8px 0 0; padding-left: 10px; border-left: 2px solid var(--hc, var(--violet-hot)); font-size: calc(12px * var(--fs)); font-style: italic; color: var(--muted); text-align: left; }
.prologue-screen .choice-side .fx span { color: var(--paper-2); }
.turn-screen .dilemma .faction { color: #ffb36b; }
.turn-screen .dilemma { border-color: rgba(255,179,107,.45); }
.turn-screen .turn-stake { margin: 10px 0 0; padding: 8px 12px; border-left: 2px solid #ffb36b; background: rgba(255,179,107,.07); font-size: calc(12.5px * var(--fs)); line-height: 1.55; color: var(--paper-2); text-align: left; }
.turn-screen .turn-stake i { display: block; font-style: normal; font-size: calc(10px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: #ffb36b; }
.turn-screen .choice-side .after { display: block; margin-top: 8px; font-size: calc(11px * var(--fs)); line-height: 1.45; color: var(--muted); font-style: italic; }

/* ---------- v0.3 one fight over, the season's ending ---------- */
.fight-over .fo-verdict { font-family: var(--brand); font-size: clamp(30px, 3.2vw, 44px); line-height: 1; margin: 6px 0 4px; text-transform: lowercase; color: var(--paper); }
.fight-over.lost .fo-verdict { color: var(--red-hot); }
.fight-over .fo-line { font-size: calc(13px * var(--fs)); line-height: 1.55; color: var(--paper-2); margin: 0 0 14px; }
.fo-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.ending { margin: 14px 0 6px; padding: 14px 16px; border-left: 3px solid var(--red-hot); background: linear-gradient(90deg, rgba(191,9,9,.16), transparent); max-width: 720px; }
.ending b { display: block; font-family: var(--brand); font-size: calc(22px * var(--fs)); color: var(--paper); text-transform: lowercase; margin: 4px 0; }
.ending p { margin: 0; font-size: calc(13.5px * var(--fs)); line-height: 1.6; color: var(--paper-2); }
/* after the season: one line from the world, picked by debrief.js; the trace of the last season on the prologue */
.after-season { margin: 10px 0 6px; padding: 12px 16px; max-width: 720px; border: 1px solid rgba(31,182,209,.3); border-left: 3px solid var(--cyan); background: linear-gradient(90deg, rgba(31,182,209,.08), transparent); animation: after-in .9s var(--ease) both .5s; }
.after-season blockquote { margin: 6px 0 4px; font-size: calc(14px * var(--fs)); line-height: 1.6; color: var(--paper); }
.after-season figcaption { font-size: calc(11px * var(--fs)); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
@keyframes after-in { from { opacity: 0; transform: translateY(8px); } }
.prologue-screen .legacy { margin: 0 0 10px; padding: 8px 12px; font-size: calc(12.5px * var(--fs)); line-height: 1.55; color: var(--paper-2); border-left: 2px solid var(--violet-hot); background: rgba(123,85,173,.12); text-align: left; }
.prologue-screen .legacy b { display: block; font-size: calc(10px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--violet-hot); font-weight: 500; }
.prologue-screen .legacy small { display: block; margin-top: 4px; font-size: calc(11px * var(--fs)); color: var(--muted); }
.end-threads { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.end-threads li { font-size: calc(11.5px * var(--fs)); padding: 3px 8px; border: 1px solid var(--line-2); color: var(--paper-2); }
.end-threads li b { color: var(--violet-hot); font-weight: 500; }
.end-threads li.open { opacity: .6; border-style: dashed; }
.ending blockquote { margin: 8px 0 0; padding-left: 10px; border-left: 2px solid var(--violet-hot); font-style: italic; color: var(--muted); font-size: calc(12.5px * var(--fs)); }
.ending.e-win, .ending.e-win-narrow { border-left-color: var(--cyan); background: linear-gradient(90deg, rgba(31,182,209,.12), transparent); }

/* ---------- v0.4 «Своя команда»: the reward improves the deck ---------- */
.fx-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 10px 0 16px; }
.fx-choice { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px; text-align: left; font: inherit; color: var(--paper-2);
  background: linear-gradient(160deg, rgba(42, 29, 68, .7), rgba(10, 7, 16, .92)); border: 1px solid rgba(167, 123, 255, .35); cursor: pointer;
  transition: transform var(--t-mid) var(--ease), border-color var(--t-fast), box-shadow var(--t-mid); animation: deal .45s var(--ease) both; }
.fx-choice:nth-child(2) { animation-delay: .06s; } .fx-choice:nth-child(3) { animation-delay: .12s; }
.fx-choice:hover:not(:disabled) { transform: translateY(-4px); border-color: var(--violet-hot); box-shadow: 0 14px 30px rgba(0, 0, 0, .4), 0 0 18px rgba(167, 123, 255, .3); }
.fx-choice:disabled { opacity: .45; cursor: not-allowed; }
.fx-choice .g { font-size: calc(26px * var(--fs)); line-height: 1; color: var(--violet-hot); text-shadow: 0 0 12px rgba(167, 123, 255, .6); }
.fx-choice[data-fx="remove"] .g { color: #ff8e98; text-shadow: 0 0 12px rgba(255, 43, 60, .5); }
.fx-choice[data-fx="relic"] .g { color: #f2d48f; text-shadow: 0 0 12px rgba(242, 212, 143, .5); }
.fx-choice b { font-family: var(--brand); font-size: calc(20px * var(--fs)); color: var(--paper); text-transform: lowercase; }
.fx-choice small { font-size: calc(11.5px * var(--fs)); line-height: 1.45; color: var(--paper-2); }
@media (max-width: 900px) { .fx-choices { grid-template-columns: 1fr; } }
/* the archive's reference: the bot's measure of each card */
.report-body .bot-h { margin: 26px 0 4px; font-size: calc(13px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--violet-hot); }
.review.archive.bot td:last-child { color: var(--muted); white-space: nowrap; }

/* pressure steps on the leader picker (ladder.js) */
.ladder-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: calc(12px * var(--fs)); color: var(--muted); }
.ladder-row .lk { letter-spacing: .14em; text-transform: uppercase; font-size: calc(10.5px * var(--fs)); }
.ladder-row .steps { display: inline-flex; gap: 4px; }
.ladder-row .step { width: 28px; height: 28px; border: 1px solid var(--line); background: rgba(12, 10, 17, .55); color: var(--paper); font-family: var(--brand); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.ladder-row .step:hover:not(:disabled) { border-color: #ff9a3d; transform: translateY(-1px); }
.ladder-row .step.on { border-color: #ff9a3d; background: rgba(255, 154, 61, .16); color: #ffb26b; }
.ladder-row .step.locked { color: var(--muted); opacity: .5; cursor: not-allowed; }
.ladder-row .lt { max-width: 70ch; line-height: 1.45; }
.ladder-row .lt b { color: #ffb26b; font-weight: 500; margin-right: 4px; }

.deck-now .mode-press { color: var(--muted); }
.deck-now .mode-press.up { color: #ff9a3d; }
.deck-now .mode-press.down { color: var(--cyan, #1fb6d1); }
/* the reading of a tool in the market, the rewards and the «своя команда» choice */
.relic-ware .tool-help { margin: 4px 0 2px; }
.loot-i .tool-help, .fx-choice .tool-help { margin-top: 6px; max-width: 38ch; }
/* the process archive: the practice of each card over the seasons */
.review.archive.practice .pm { letter-spacing: 2px; color: var(--violet-hot); margin-right: 6px; }
.review.archive.practice .pm.ph-2 { color: var(--red-hot, #ff2b3c); text-shadow: 0 0 6px rgba(255, 43, 60, .45); }
.review.archive.practice td:last-child { white-space: nowrap; }
.review.archive.practice small { color: var(--muted); }
/* what grew: processes that changed phase, cards upgraded (after a fight, in the season report) */
.growth { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin: 10px 0 14px; font-size: 13px; }
.growth > b { color: var(--violet-hot); text-transform: lowercase; letter-spacing: .04em; }
.growth .gr { border: 1px solid var(--line); padding: 2px 8px; background: rgba(123, 85, 173, .12); }
.growth .gr.ph-2 { border-color: var(--red-hot); background: rgba(255, 43, 60, .1); }
.growth .gr.up { background: rgba(31, 182, 209, .1); border-color: rgba(31, 182, 209, .5); }
.growth .gr small { color: var(--muted); }

/* return cards on the title: what waits in each save (Л-11) */
/* saved games: small plates in the row style of «коротко», quieter than the modes */
.resumes { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 4px; max-width: 900px; }
.resume { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 7px 24px 7px 14px; font: inherit; text-align: left; color: var(--paper-2); cursor: pointer; border: 0; background: linear-gradient(90deg, rgba(15,10,24,.92), rgba(42,29,68,.7)); box-shadow: inset 2px 0 0 var(--violet-hot); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); transition: transform var(--t-fast) var(--ease), background var(--t-fast); }
.resume.r-fight { box-shadow: inset 2px 0 0 var(--cyan); }
.resume .rk { display: flex; align-items: center; gap: 6px; font-family: var(--brand); font-weight: 700; font-size: calc(13px * var(--fs)); color: var(--paper); text-transform: lowercase; }
.resume .rk kbd { font-size: calc(9px * var(--fs)); }
.resume small { font-size: calc(10px * var(--fs)); color: var(--muted); line-height: 1.35; }
.resume:hover, .resume:focus-visible { transform: translateX(3px); background: linear-gradient(90deg, rgba(167,123,255,.3), rgba(15,10,24,.92)); }
.resume:hover small, .resume:focus-visible small { color: var(--paper-2); }
@media (max-height: 760px) and (min-width: 900px) {
  .title-screen:has(.resumes) .title-block h1 { font-size: 64px; }
}
/* the journal of seasons in the archive */
.review.archive.season-log tr.more { display: none; }
.review.archive.season-log.all tr.more { display: table-row; }
.review.archive.season-log td { vertical-align: top; }
.review.archive.season-log small { color: var(--muted); }
.review.archive.season-log .res.won { color: var(--cyan); }
.review.archive.season-log .res.lost { color: var(--red-hot); }
.review.archive.season-log .res.left { color: var(--muted); text-decoration: line-through; }
.review.archive.season-log td:first-child, .review.archive.season-log td:last-child { white-space: nowrap; }

/* the leader speaks between fights and at the end of the season (Л-12) */
.hero-says { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.hero-says canvas { width: 92px; height: auto; border: 1px solid var(--line-2); background: var(--ink-0); }
.hero-says .who { display: block; font-style: normal; font-size: calc(10.5px * var(--fs)); letter-spacing: .08em; text-transform: uppercase; color: var(--violet-hot); margin-bottom: 4px; }
.ending blockquote.hero-says { color: var(--paper-2); }
.hero-says.aside { margin: 0 0 14px; padding: 10px 12px; border-left: 2px solid var(--violet-hot); background: rgba(167, 123, 255, .07); font-style: italic; color: var(--paper-2); font-size: calc(12.5px * var(--fs)); line-height: 1.45; }
.hero-says.aside.hard { border-left-color: var(--red-hot); background: rgba(255, 43, 60, .07); }
.hero-says.aside.hard .who { color: var(--red-hot); }

/* ---------- incidents (Л-8): the mode tile, the list of cases, the case card before the first move, the lesson after ---------- */
.mode.m-incident { border-color: rgba(255,43,60,.45); background: linear-gradient(160deg, rgba(74,12,20,.5), rgba(7,4,12,.88)); }
.mode.m-incident .mk { color: var(--red-hot); }
.inc-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.inc { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; text-align: left; font: inherit; color: var(--paper-2); background: linear-gradient(160deg, rgba(74,12,20,.35), rgba(7,4,12,.9)); border: 1px solid rgba(255,43,60,.35); cursor: pointer; transition: transform var(--t-mid) var(--ease), border-color var(--t-fast); }
.inc:hover, .inc:focus-visible { transform: translateY(-2px); border-color: var(--red-hot); outline: none; }
.inc .inc-k { font-size: calc(9px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--red-hot); }
.inc b { font-family: var(--brand); font-size: calc(20px * var(--fs)); line-height: 1.05; color: var(--paper); text-transform: lowercase; }
.inc .inc-t { font-size: calc(12px * var(--fs)); line-height: 1.5; }
.inc .inc-r { font-size: calc(11px * var(--fs)); line-height: 1.45; color: var(--muted); border-top: 1px dashed var(--line-2); padding-top: 6px; }
.beat.incident .beat-card { border-color: rgba(255,43,60,.55); }
.beat.incident .beat-rule { margin-top: 10px; padding: 8px 10px; border-left: 2px solid var(--red-hot); font-size: calc(13px * var(--fs)); color: var(--paper); background: rgba(255,43,60,.07); }
.beat.incident .beat-rule b { font-size: calc(9px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--red-hot); margin-right: 6px; }
.fight-over .inc-lesson { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; padding: 10px 12px; border-left: 2px solid var(--red-hot); font-size: calc(13px * var(--fs)); line-height: 1.5; color: var(--paper-2); background: rgba(255,43,60,.06); }
.fight-over .inc-lesson b { color: var(--paper); font-weight: 600; }
@media (max-width: 760px) { .inc-list { grid-template-columns: 1fr; } }
/* the title, 14.10: three torn plates for the long modes, a short line for a fight and an incident, light links below */
.modes { filter: drop-shadow(5px 5px 0 rgba(191, 9, 9, .55)) drop-shadow(0 18px 24px rgba(0, 0, 0, .35)); gap: 16px; }
.mode { border: 0; padding: 20px 20px 18px; clip-path: polygon(0 5%, 7% 0, 19% 3%, 33% 0, 46% 2%, 61% 0, 75% 4%, 88% 0, 100% 3%, 99% 34%, 100% 66%, 98% 100%, 85% 96%, 71% 100%, 56% 97%, 42% 100%, 27% 96%, 13% 100%, 0 97%, 1% 62%, 0 30%); }
.mode.m-fixed { clip-path: polygon(2% 0, 16% 4%, 29% 0, 44% 3%, 57% 0, 70% 2%, 84% 0, 100% 4%, 98% 28%, 100% 57%, 99% 100%, 87% 97%, 74% 100%, 60% 96%, 45% 100%, 31% 97%, 17% 100%, 3% 96%, 0 70%, 2% 41%, 0 12%); }
.mode.m-trial { clip-path: polygon(0 2%, 12% 0, 26% 4%, 40% 0, 53% 3%, 67% 0, 80% 3%, 93% 0, 100% 6%, 98% 40%, 100% 74%, 100% 97%, 90% 100%, 76% 96%, 62% 100%, 49% 97%, 34% 100%, 20% 96%, 7% 100%, 0 94%, 2% 50%); }
.mode::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 7px); }
.mode:hover:not(:disabled) { transform: translateY(-4px) rotate(-.4deg); box-shadow: none; }
.mode.m-fixed:hover:not(:disabled) { transform: translateY(-4px) rotate(.4deg); }
.mode.m-fixed { background: linear-gradient(160deg, rgba(123,85,173,.42), rgba(7,4,12,.88)); }
.mode.m-trial { background: linear-gradient(160deg, rgba(31,182,209,.22), rgba(7,4,12,.88)); }
.mode b { font-size: calc(26px * var(--fs)); }
.modes-quick { display: flex; align-items: flex-start; gap: 10px; margin: -2px 0 2px; max-width: 900px; }
/* the label column is one width in both rows, so «коротко» and «сохранено» plates start on one line */
.modes-quick .mq-h, .resumes .mq-h { flex: 0 0 auto; width: 11.5ch; padding-top: 12px; font-size: calc(10px * var(--fs)); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.mq-list { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; min-width: 0; }
.mode-q { display: flex; flex-direction: column; gap: 2px; padding: 9px 22px 9px 16px; font: inherit; text-align: left; color: var(--paper-2); cursor: pointer; border: 0; background: linear-gradient(90deg, rgba(42,29,68,.85), rgba(15,10,24,.92)); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 6px 50%); transition: transform var(--t-fast) var(--ease), background var(--t-fast); }
.mode-q b { font-family: var(--brand); font-size: calc(15px * var(--fs)); color: var(--paper); text-transform: lowercase; }
.mode-q small { font-size: calc(10.5px * var(--fs)); color: var(--muted); }
.mode-q.m-fight b { color: var(--violet-hot); }
.mode-q.m-incident { background: linear-gradient(90deg, rgba(74,12,20,.9), rgba(15,10,24,.92)); }
.mode-q.m-incident b { color: var(--red-hot); }
.mode-q:hover { transform: translateX(4px); background: linear-gradient(90deg, rgba(167,123,255,.35), rgba(15,10,24,.92)); }
.title-more { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.title-more button { background: none; border: 0; padding: 2px 0; font: inherit; font-size: calc(13px * var(--fs)); color: var(--paper-2); cursor: pointer; text-decoration: underline dotted rgba(167,123,255,.6); text-underline-offset: 4px; }
.title-more button:hover { color: var(--paper); text-decoration-color: var(--violet-hot); }
.title-more i { font-style: normal; margin-left: 4px; padding: 0 5px; color: var(--violet-hot); border: 1px solid rgba(167,123,255,.4); }
.title-foot .fs-btn { background: none; border: 1px solid var(--line-2); color: var(--paper-2); font: inherit; padding: 2px 8px; cursor: pointer; }
.title-foot .fs-btn:hover { color: var(--paper); border-color: var(--violet-hot); }
@media (max-width: 760px) { .mode, .mode.m-fixed, .mode.m-trial { clip-path: none; } }
/* A saved season adds a row; tighten its gaps before the title reaches the window's bottom. */
@media (max-height: 900px) and (min-width: 900px) {
  .title-screen:has(.resumes) .title-block { gap: 9px; }
}
/* 15.10: a window up to 860 px tall (800 px of game below the 60 px AIM header) shows the whole title without a scroll:
   a smaller sign, tighter tiles, the two short modes side by side */
@media (max-height: 860px) and (min-width: 900px) {
  .title-screen { padding-top: 2vh; padding-bottom: 2vh; }
  .title-block { gap: 9px; }
  .title-block h1 { font-size: clamp(48px, 11vh, 96px); }
  .title-block .lede { font-size: calc(12px * var(--fs)); line-height: 1.45; }
  .title-block .modes { margin: 0 0 2px; gap: 12px; }
  .title-block .mode { padding: 12px 16px; gap: 2px; }
  .title-block .mode b { font-size: calc(21px * var(--fs)); }
  .title-block .mode small { font-size: calc(10.5px * var(--fs)); line-height: 1.3; }
  .title-block .mq-list { flex-wrap: nowrap; }
  .title-block .mode-q { flex: 1 1 0; min-width: 0; padding: 6px 20px 6px 14px; }
  .modes-quick .mq-h, .resumes .mq-h { padding-top: 8px; }
  .title-more button { font-size: calc(12px * var(--fs)); }
}

/* the company plot on the leader screen (plots.json): a card per company with its scene; the picked one on a torn cyan plate */
.plot-pick { width: min(1220px, 100%); display: flex; flex-direction: column; gap: 8px; }
.pp-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pp-head .fl { font-size: calc(9.5px * var(--fs)); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.pp-head small { font-size: calc(11px * var(--fs)); color: var(--muted); }
.pp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.plot-card { --pc: 167,123,255; position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 12px 16px 12px 12px; font: inherit; text-align: left; color: var(--paper-2); background: rgba(14,9,24,.72); border: 1px solid var(--line); cursor: pointer; transition: transform .2s var(--ease), border-color .2s, background .2s, filter .2s; animation: deal .42s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
.plot-card:hover, .plot-card:focus-visible { border-color: rgba(31,182,209,.6); background: rgba(20,14,34,.85); transform: translateY(-2px); outline: none; }
.plot-card::before, .plot-card::after { content: ''; position: absolute; inset: -3px; z-index: -1; opacity: 0; transition: opacity .22s; clip-path: polygon(0 6%, 8% 0, 21% 4%, 35% 0, 49% 3%, 63% 0, 77% 4%, 90% 0, 100% 5%, 99% 38%, 100% 70%, 98% 100%, 84% 95%, 69% 100%, 55% 96%, 40% 100%, 25% 95%, 11% 100%, 0 96%, 1% 60%, 0 28%); }
.plot-card::before { background: linear-gradient(120deg, rgba(31,182,209,.42), rgba(31,182,209,.12) 45%, rgba(7,4,12,.92) 85%); }
.plot-card::after { background: repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px); }
.plot-card.on { border-color: transparent; background: transparent; color: var(--paper); filter: drop-shadow(5px 5px 0 rgba(191,9,9,.45)) drop-shadow(0 16px 22px rgba(0,0,0,.35)); }
.plot-card.on::before, .plot-card.on::after { opacity: 1; }
.plot-card .pc-art { grid-row: 1 / span 2; width: 118px; height: 76px; margin: 0; overflow: hidden; display: grid; place-items: center; background: rgba(4,2,8,.55); border: 1px solid rgba(255,255,255,.06); }
.plot-card .pc-art pre { font-size: 4.2px; line-height: 1.12; }
.plot-card.on .pc-art { border-color: rgba(31,182,209,.45); }
.pc-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pc-title { font-family: var(--brand); font-size: calc(15px * var(--fs)); line-height: 1.15; color: var(--paper); text-transform: lowercase; }
.plot-card.on .pc-title { color: #c9f4fb; }
.pc-co { font-size: calc(10.5px * var(--fs)); line-height: 1.4; color: var(--cyan); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-log { font-size: calc(11.5px * var(--fs)); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pc-meta { grid-column: 1 / -1; font-size: calc(9.5px * var(--fs)); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pc-tick { position: absolute; top: -9px; right: 12px; padding: 1px 7px; font-size: calc(9px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: #07040c; background: var(--cyan); opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s var(--ease); }
.plot-card.on .pc-tick { opacity: 1; transform: none; }
@media (max-width: 560px) { .plot-card { grid-template-columns: minmax(0, 1fr); } .plot-card .pc-art { grid-row: auto; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .plot-card { animation: none; transition: none; } }

/* Keep long prologues and their choices inside the app, including the site's header. */
.event-screen { grid-template-rows: minmax(0, 1fr); }
.event-screen .dilemma, .event-screen .choice-side { min-height: 0; max-height: 100%; overflow-y: auto; }
.map-more { position: absolute; transform: translate(23px, -18px); width: 30px; height: 30px; padding: 0; z-index: 5; background: var(--ink-1); border: 1px solid var(--line-2); color: var(--cyan); cursor: zoom-in; }
.map-more:hover, .map-more:focus-visible { border-color: var(--cyan); outline: 1px solid var(--cyan); }
.map-side > * { flex-shrink: 0; }
.event-screen .dilemma { touch-action: pan-y; }

/* play/styles/codex.css */
/* codex, card inspect sheet, hero picker, card anatomy */

/* screen entrance: every view slides in a few pixels and fades */
#app > section, #app > .board, #app > .tray { animation: enter var(--t-mid) var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }
#app > .board { animation-name: enter-board; }
@keyframes enter-board { from { opacity: 0; } }
#app > .tray { animation-name: enter-tray; animation-duration: .34s; }
@keyframes enter-tray { from { opacity: 0; transform: translateY(40px); } }
#app[data-fresh="0"] > section, #app[data-fresh="0"] > .board, #app[data-fresh="0"] > .tray { animation: none; }

/* tabs with a sliding ink bar */
.tabs { position: relative; display: flex; gap: 2px; border-bottom: 1px solid var(--line-2); }
.tab { position: relative; padding: 10px 14px; background: transparent; border: 0; color: var(--muted); cursor: pointer; letter-spacing: .06em; font-size: calc(12px * var(--fs)); transition: color var(--t-fast); }
.tab:hover { color: var(--paper-2); }
.tab.on { color: var(--paper); }
.tab-ink { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: linear-gradient(90deg, var(--violet-hot), var(--red-hot)); box-shadow: 0 0 10px var(--violet-hot); transition: transform .3s var(--ease), width .3s var(--ease); }

/* codex screen */
.codex-screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 34px 5vw 0; gap: 18px; }
.codex-head { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 34px; }
.codex-head h1 { font-size: calc(46px * var(--fs)); line-height: 1; margin-top: 6px; text-shadow: 3px 0 0 rgba(255,43,60,.5), -3px 0 0 rgba(31,182,209,.3); }
.codex-head .tabs { align-self: end; }
.codex-body { flex: 1; overflow: auto; padding: 8px 2px 60px; -webkit-mask-image: linear-gradient(transparent, #000 16px); mask-image: linear-gradient(transparent, #000 16px); }
.codex-body.in > * { animation: enter .3s var(--ease) both; }
.codex-note { max-width: 90ch; font-size: calc(12px * var(--fs)); margin: 4px 0 16px; }
.codex-grid { display: flex; flex-wrap: wrap; gap: 18px 16px; }
.codex-grid > .card { animation: deal .36s var(--ease) both; animation-delay: calc(var(--i, 0) * 18ms); }
@keyframes deal { from { opacity: 0; transform: translateY(18px) rotate(-2deg) scale(.96); } }
.codex-grid > .card.pickable:hover { transform: translateY(-8px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.codex-body h3 { font-size: calc(15px * var(--fs)); margin: 30px 0 12px; color: var(--paper); }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 18px; }
.filters .fl { font-size: calc(9px * var(--fs)); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 4px 0 12px; }
.filters .fl:first-child { margin-left: 0; }
.chip { padding: 5px 10px; font-size: calc(11px * var(--fs)); background: var(--ink-1); border: 1px solid var(--line-2); color: var(--paper-2); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.chip:hover { border-color: var(--paper-2); color: var(--paper); }
.chip.on { border-color: var(--violet-hot); color: var(--paper); background: var(--violet-deep); }
.chip[class*="st-"].on { border-color: var(--stc); box-shadow: inset 0 -2px 0 var(--stc); }

.enc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.enc { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--line); background: var(--ink-1); font-size: calc(12px * var(--fs)); }
.enc b { color: var(--paper); font-family: var(--brand); }
.enc span { grid-column: 1; color: var(--paper-2); font-size: calc(11px * var(--fs)); }
.enc em { grid-column: 2; grid-row: 1 / 3; align-self: center; font-style: normal; font-size: calc(10px * var(--fs)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.enc.t-elite { border-color: rgba(255,43,60,.35); }
.enc.t-boss { border-color: var(--red-hot); box-shadow: 0 0 18px rgba(255,43,60,.18); }

.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.tool { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid rgba(167,123,255,.35); background: var(--ink-1); animation: deal .36s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.tool pre { margin: 0 0 4px; font-size: calc(7px * var(--fs)); line-height: 1; color: rgba(167,123,255,.35); overflow: hidden; }
.tool pre .a2 { color: var(--violet-hot); } .tool pre .a3 { color: var(--paper); }
.tool .glyph { position: absolute; right: 12px; top: 10px; font-size: calc(22px * var(--fs)); color: var(--violet-hot); text-shadow: 0 0 10px var(--violet-hot); }
.tool b { font-family: var(--brand); font-size: calc(15px * var(--fs)); text-transform: lowercase; }
.tool p { margin: 0; font-size: calc(12px * var(--fs)); color: var(--paper-2); line-height: 1.5; }
.tool small { color: var(--muted); font-size: calc(11px * var(--fs)); }
.tool em { font-style: normal; font-weight: 800; font-size: calc(12px * var(--fs)); color: var(--paper-2); }
.tool i { position: absolute; right: 12px; bottom: 10px; font-style: normal; font-size: calc(10px * var(--fs)); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.tool.own { border-color: var(--cyan); }

/* inspect sheet: big tilting card on the left, the parameter grid on the right */
.inspect-ov { animation: fadein .16s ease; }
.inspect-ov.out { animation: fadeout .16s ease forwards; }
@keyframes fadeout { to { opacity: 0; } }
.inspect { position: relative; width: min(1120px, 94vw); max-height: 90vh; overflow: auto; display: grid; grid-template-columns: auto 1fr; gap: 44px; padding: 34px 54px; background: rgba(12,10,17,.96); border: 1px solid var(--line-2); box-shadow: 0 40px 100px -30px #000, 0 0 0 1px rgba(167,123,255,.08); animation: pop-in .24s var(--ease); }
.inspect.from-r { animation: slide-r .22s var(--ease); }
.inspect.from-l { animation: slide-l .22s var(--ease); }
@keyframes pop-in { from { opacity: 0; transform: scale(.97); } }
@keyframes slide-r { from { opacity: .3; transform: translateX(26px); } }
@keyframes slide-l { from { opacity: .3; transform: translateX(-26px); } }
.inspect .close { position: absolute; right: 14px; top: 10px; background: transparent; border: 0; color: var(--muted); font-size: calc(26px * var(--fs)); cursor: pointer; }
.ins-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; perspective: 900px; }
.ins-card .card { animation: rise .42s var(--ease); }
@keyframes rise { from { transform: translateY(24px) rotateX(18deg); opacity: 0; } }
.ins-up { font-size: calc(12px * var(--fs)); padding: 9px 14px; }
.ins-up.on { border-color: var(--red-hot); color: var(--paper); }
.ins-text h2 { font-family: var(--brand); font-size: calc(34px * var(--fs)); margin: 6px 0 10px; }
.ins-text .plus { color: var(--red-hot); }
.ins-rule { font-size: calc(16px * var(--fs)); color: var(--paper); line-height: 1.5; margin: 0 0 6px; }
.ins-flavor { color: var(--muted); font-style: italic; margin: 0 0 14px; }
.ins-week { font-size: calc(13px * var(--fs)); color: var(--paper-2); line-height: 1.55; border-left: 2px solid var(--stc, var(--violet)); padding-left: 10px; max-width: 66ch; }
.ins-week b { color: var(--paper); font-weight: 500; margin-right: 6px; text-transform: lowercase; }
.pgrid { display: grid; grid-template-columns: 150px 1fr; border-top: 1px solid var(--line); margin-top: 16px; font-size: calc(12px * var(--fs)); }
.pgrid > div { padding: 9px 8px; border-bottom: 1px solid var(--line); }
.pg-k { color: var(--muted); font-size: calc(10px * var(--fs)); letter-spacing: .12em; text-transform: uppercase; padding-top: 11px !important; }
.pg-v { color: var(--paper-2); line-height: 1.5; }
.pg-v b { color: var(--paper); font-size: calc(15px * var(--fs)); }
.pg-v small { display: block; margin-top: 2px; color: var(--muted); font-size: calc(11px * var(--fs)); }
.pg-v code { color: var(--paper); font-size: calc(11px * var(--fs)); }
.pg-v .arr { color: var(--muted); font-style: normal; margin: 0 4px; }
.pg-v b.up { color: var(--red-hot); font-size: calc(12px * var(--fs)); }
.pg-v .kwc { color: var(--violet-hot); }
.pg-v .mini-ring { vertical-align: middle; }
.stc { color: var(--stc); font-weight: 500; }
.lvl-word.sig { color: var(--hc, var(--violet-hot)); } .lvl-word.l0 { color: var(--paper-2); } .lvl-word.l1 { color: var(--paper); } .lvl-word.l2 { color: var(--violet-hot); } .lvl-word.l3 { color: var(--red-hot); }
.ins-nav { position: absolute; top: 50%; width: 38px; height: 64px; margin-top: -32px; background: rgba(5,4,7,.6); border: 1px solid var(--line-2); color: var(--paper-2); font-size: calc(28px * var(--fs)); cursor: pointer; }
.ins-nav:hover { color: var(--paper); border-color: var(--paper-2); }
.ins-nav.prev { left: 8px; } .ins-nav.next { right: 8px; }

/* hero picker */
.hero-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 30px 4vw; }
.hero-screen h1 { font-size: clamp(34px, 4vw, 56px); text-shadow: 3px 0 0 rgba(255,43,60,.5), -3px 0 0 rgba(31,182,209,.3); }
.hero-screen .lede { text-align: center; margin: 0; }
.hero-row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.hero { position: relative; flex: 1 1 250px; max-width: 300px; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; text-align: left; color: var(--paper); background: linear-gradient(180deg, rgba(42,29,68,.45), var(--ink-1) 55%); border: 1px solid rgba(167,123,255,.4); box-shadow: 0 30px 60px -30px #000; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform var(--t-mid) var(--ease), border-color var(--t-fast), box-shadow var(--t-mid); animation: deal .42s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); font: inherit; }
button.hero { cursor: pointer; }
button.hero:hover { border-color: var(--paper); box-shadow: 0 0 0 1px var(--violet-hot), 0 0 40px -10px var(--violet-hot), 0 30px 60px -30px #000; transform: translateY(-8px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.hero-art { margin: 0; font-size: calc(7.5px * var(--fs)); line-height: 1; color: rgba(167,123,255,.35); text-align: center; border: 1px solid var(--line); background: radial-gradient(80% 80% at 50% 50%, rgba(42,29,68,.8), var(--ink-0)); padding: 6px 0; }
.hero-art .a1 { color: rgba(255,43,60,.45); } .hero-art .a2 { color: var(--violet-hot); } .hero-art .a3 { color: var(--paper); text-shadow: 0 0 8px var(--red-hot); }
.hero-k { font-size: calc(9px * var(--fs)); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.hero-name { font-family: var(--brand); font-size: calc(22px * var(--fs)); line-height: 1.05; text-transform: lowercase; }
.hero-part span { display: block; font-size: calc(9px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--violet-hot); margin-bottom: 3px; }
.hero-part.ab span { color: var(--red-hot); }
.hero-part p { margin: 0; font-size: calc(12px * var(--fs)); line-height: 1.45; color: var(--paper-2); }
.hero-part p b { color: var(--paper); font-weight: 500; }
.hero-flavor { color: var(--muted); font-size: calc(11px * var(--fs)); font-style: italic; }
.hero.h-founder { border-color: rgba(255,43,60,.45); }
.hero.h-architect { border-color: rgba(31,182,209,.45); }
.seed-row { display: flex; align-items: center; gap: 8px; font-size: calc(12px * var(--fs)); color: var(--muted); }
.seed-row input { width: 130px; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); color: var(--paper); font: inherit; padding: 3px 0; outline: none; }
.dice .pips5 { display: block; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 3px;
  --d: radial-gradient(circle, currentColor 1.3px, transparent 1.6px);
  background: var(--d) 1px 1px / 5px 5px no-repeat, var(--d) 7px 1px / 5px 5px no-repeat, var(--d) 4px 4px / 5px 5px no-repeat, var(--d) 1px 7px / 5px 5px no-repeat, var(--d) 7px 7px / 5px 5px no-repeat; }
.dice { height: 28px; min-width: 28px; padding: 0 8px; background: var(--ink-1); border: 1px solid var(--line-2); color: var(--paper); cursor: pointer; font-size: calc(14px * var(--fs)); transition: transform var(--t-mid) var(--ease), border-color var(--t-fast); }
.dice:hover { border-color: var(--violet-hot); }
.dice.roll { animation: roll .4s var(--ease); }
@keyframes roll { 40% { transform: rotate(200deg) scale(1.15); } to { transform: rotate(360deg); } }

/* anatomy */
.anatomy { display: grid; grid-template-columns: auto 1fr; gap: 50px; align-items: center; margin-top: 10px; }
.anat-card { position: relative; margin: 30px 30px 0; }
.anat-card .co { transform: translate(0, -50%); }
.anat-card .co[style*="left:50%"] { transform: translate(-50%, 0); }
.anat-card .co { position: absolute; }
.co { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--red); color: var(--paper); font-style: normal; font-size: calc(11px * var(--fs)); font-weight: 800; box-shadow: 0 0 0 2px var(--ink-0), 0 0 12px rgba(255,43,60,.6); z-index: 10; }
.anat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 64ch; }
.anat-list li { display: grid; grid-template-columns: 28px 160px 1fr; gap: 10px; align-items: baseline; font-size: calc(12px * var(--fs)); color: var(--paper-2); line-height: 1.5; }
.anat-list b { color: var(--paper); font-weight: 500; }
.card-path { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.card-path > div { flex: 1 1 150px; padding: 12px; border: 1px solid var(--line-2); background: var(--ink-1); font-size: calc(11px * var(--fs)); color: var(--paper-2); line-height: 1.45; animation: deal .36s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.card-path b { display: block; font-family: var(--brand); color: var(--paper); font-size: calc(14px * var(--fs)); margin-bottom: 4px; text-transform: lowercase; }
.card-path > i { align-self: center; color: var(--red-hot); font-style: normal; }
.pm-wrap { overflow: auto; border: 1px solid var(--line); }
table.pm { width: 100%; border-collapse: collapse; font-size: calc(11.5px * var(--fs)); }
table.pm th { position: sticky; top: 0; background: var(--ink-2); text-align: left; font-weight: 400; font-size: calc(9px * var(--fs)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 7px 8px; }
table.pm td { padding: 6px 8px; border-top: 1px solid var(--line); color: var(--paper-2); white-space: nowrap; }
table.pm td:first-child { color: var(--paper); }
table.pm tr:hover td { background: rgba(167,123,255,.06); }
table.pm td.l1 { color: var(--paper); } table.pm td.l2 { color: var(--violet-hot); } table.pm td.l3 { color: var(--red-hot); }

/* influence grid: card × station and meter */
table.ig { border-collapse: collapse; font-size: calc(11px * var(--fs)); width: 100%; }
table.ig th { font-weight: 500; color: var(--muted); padding: 6px 4px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--line-2); }
table.ig th[class^="st-"] { color: var(--stc); }
table.ig td { border-bottom: 1px solid var(--line); padding: 4px; text-align: center; height: 22px; }
table.ig td:first-child { text-align: left; white-space: nowrap; color: var(--paper); }
table.ig td:first-child small { margin-left: 6px; color: var(--muted); font-size: calc(9px * var(--fs)); }
table.ig td:first-child small.l2 { color: var(--violet-hot); }
table.ig td:first-child small.l3 { color: var(--red-hot); }
table.ig tbody tr:hover td { background: rgba(167,123,255,.06); }
.ig-c i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--stc, var(--paper-2)); box-shadow: 0 0 8px var(--stc, transparent); }
.ig-c i.home { width: 12px; height: 12px; }
.ig-c.m-crisis i { background: var(--red-hot); box-shadow: 0 0 8px rgba(255,43,60,.6); }
.ig-c.m-noise i { background: transparent; border: 1.5px solid var(--red); }
.ig-c.m-energy i { background: #ff5a6a; }
.ig-c.m-trust i { background: var(--violet-hot); }
.ig-c.m-capital i { background: #e9e4d6; }
.ig-c.m-draw i { background: var(--paper-2); border-radius: 1px; }
table.ig tfoot td { color: var(--muted); border-bottom: 0; padding-top: 8px; }
.ig-key { font-size: calc(11px * var(--fs)); margin-top: 8px; }

/* title: links out to the project board and the apps showcase */
.title-links { position: absolute; left: 28px; bottom: 26px; display: flex; gap: 18px; font-size: calc(11px * var(--fs)); letter-spacing: .04em; }
.title-links a { color: var(--paper-2); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: color var(--t-fast), border-color var(--t-fast); }
.title-links a:hover { color: var(--paper); border-color: var(--violet-hot); }
/* a short window (the demo frame on the landing, a small laptop): the links go up into the empty corner above the title */
@media (max-height: 760px) { .title-links { bottom: auto; top: 14px; } }

/* ---------- v0.3 hero picker: roster on the left, dossier with a live portrait on the right ---------- */
.h-founder { --hc: #ff2b3c; } .h-operator { --hc: #1fb6d1; } .h-architect { --hc: #a77bff; } .h-facilitator { --hc: #e9c98f; } .h-none { --hc: #7b55ad; }
.hero-screen { justify-content: flex-start; padding-top: 5vh; gap: 18px; }
.hero-pick { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; width: min(1220px, 100%); align-items: start; }
.roster { display: flex; flex-direction: column; gap: 8px; }
.ro { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; text-align: left; font: inherit; color: var(--paper-2); background: rgba(14,9,24,.7); border: 1px solid var(--line); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-mid) var(--ease); animation: deal .42s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.ro canvas { flex: none; background: radial-gradient(circle at 50% 40%, rgba(42,29,68,.9), #07040c 75%); }
.ro b { display: block; font-family: var(--brand); font-size: calc(14px * var(--fs)); color: var(--paper); text-transform: lowercase; line-height: 1.1; }
.ro small { display: block; margin-top: 3px; font-size: calc(10px * var(--fs)); letter-spacing: .08em; color: var(--muted); }
.ro:hover { transform: translateX(3px); }
.ro.on { border-color: var(--hc, var(--violet-hot)); background: linear-gradient(90deg, color-mix(in srgb, var(--hc) 18%, transparent), rgba(14,9,24,.7)); }
.ro.on small { color: var(--hc); }
.dossier { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 26px; padding: 22px 24px; min-height: 380px; border: 1px solid color-mix(in srgb, var(--hc) 45%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--hc) 9%, rgba(14,9,24,.85)), rgba(7,4,12,.92) 60%); box-shadow: 0 40px 80px -40px #000, inset 0 0 0 1px rgba(255,255,255,.02); animation: dossier-in .32s var(--ease) both; }
.dossier::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--hc); box-shadow: 0 0 18px var(--hc); }
@keyframes dossier-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hd-portrait { position: relative; align-self: start; padding: 10px; border: 1px solid var(--line); background: radial-gradient(70% 60% at 50% 38%, color-mix(in srgb, var(--hc) 16%, #120a20), #05030a 80%); }
.hd-portrait canvas { display: block; }
.hd-role { position: absolute; left: 10px; top: 10px; padding: 3px 8px; font-size: calc(10px * var(--fs)); letter-spacing: .16em; text-transform: uppercase; color: #07040c; background: var(--hc); }
.hd-diff { position: absolute; right: 10px; bottom: 8px; font-size: calc(10px * var(--fs)); letter-spacing: .1em; color: var(--hc); }
.hd-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hd-name { margin: 0; font-family: var(--brand); font-size: clamp(26px, 2.6vw, 38px); line-height: 1; text-transform: lowercase; color: var(--paper); text-shadow: 2px 0 0 color-mix(in srgb, var(--hc) 55%, transparent); }
.hd-home { font-size: calc(11px * var(--fs)); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hd-home i { font-style: normal; color: var(--stc); margin-left: 6px; text-transform: none; letter-spacing: 0; }
.hd-bio { margin: 0; font-size: calc(13px * var(--fs)); line-height: 1.55; color: var(--paper-2); max-width: 60ch; }
.hd-style { margin: 0; font-size: calc(12px * var(--fs)); color: var(--hc); }
.hd-sw { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hd-sw ul { margin: 0; padding: 0; list-style: none; font-size: calc(11.5px * var(--fs)); line-height: 1.45; color: var(--paper-2); }
.hd-sw li { padding-left: 16px; position: relative; margin-bottom: 3px; }
.hd-plus li::before { content: '+'; position: absolute; left: 0; color: var(--hc); }
.hd-minus li::before { content: '−'; position: absolute; left: 0; color: var(--muted); }
.hd-quote { margin: 4px 0 0; padding-left: 12px; border-left: 2px solid var(--hc); font-size: calc(12px * var(--fs)); font-style: italic; color: var(--muted); }
.hd-sig { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.title-foot .btn.primary { border-color: var(--red-hot); color: var(--paper); }
/* narrower: the signature card goes under the portrait, the text keeps the whole right column */
@media (max-width: 1100px) { .dossier { grid-template-columns: auto minmax(0, 1fr); } .hd-body { grid-row: 1 / span 2; grid-column: 2; } .hd-sig { grid-column: 1; grid-row: 2; flex-direction: row; align-items: flex-start; } }
@media (max-width: 1100px) and (max-height: 820px) { .dossier .hd-portrait canvas { max-height: 180px; } .hs-setup { gap: 4px 18px; } .hs-setup .ladder-row .lk { display: none; } .hd-bio { -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } }
@media (max-width: 760px) { .hero-pick { grid-template-columns: 1fr; } .roster { flex-direction: row; overflow-x: auto; } .ro small { display: none; } .dossier { grid-template-columns: 1fr; } }
.hero .hero-portrait { position: relative; display: grid; place-items: center; padding: 6px 0; border: 1px solid var(--line); background: radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, var(--hc, #7b55ad) 16%, #120a20), #05030a 80%); }
.hero .hero-k i { font-style: normal; color: var(--stc); letter-spacing: 0; text-transform: none; }
.hero .hero-style { margin: 0; font-size: calc(11.5px * var(--fs)); color: var(--hc, var(--violet-hot)); }
.hero { border-color: color-mix(in srgb, var(--hc, #a77bff) 45%, transparent); }
.hero-screen { overflow-y: auto; padding-bottom: 28px; }
.hero-screen h1 { font-size: clamp(28px, 3.4vw, 50px); }
.dossier { min-height: 0; }
/* the deck and the pressure ladder share one line under the dossier */
.hs-setup { width: min(1220px, 100%); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 34px; }
.hs-setup .deck-row, .hs-setup .ladder-row { margin: 0; }
/* a short screen (the site under its header, a 13-inch laptop): a slimmer roster and dossier, so the plots and the start fit */
@media (max-height: 940px) {
  .hero-screen { gap: 12px; padding-top: 2.5vh; }
  .hero-screen h1 { font-size: clamp(26px, 2.8vw, 40px); }
  .hd-portrait canvas { max-height: 250px; width: auto !important; }
  .roster { gap: 6px; }
  .ro { padding: 5px 10px 5px 5px; }
  .ro canvas { width: 46px !important; height: auto !important; }
  .dossier { padding: 16px 20px; gap: 20px; }
  .hd-body { gap: 7px; }
  .hd-bio { font-size: calc(12.5px * var(--fs)); line-height: 1.5; }
  .hd-quote { display: none; }
  .plot-card { padding: 9px 14px 9px 9px; }
  .plot-card .pc-art { width: 96px; height: 58px; }
  .plot-card .pc-art pre { font-size: 3.4px; }
  .pc-co { -webkit-line-clamp: 1; }
  .pc-log { -webkit-line-clamp: 3; }
}
/* the card's levels in the full view: steps already taken are dimmed */
.pg-v .lv-step { display: inline-block; margin: 1px 0; }
.pg-v .lv-step i { font-style: normal; font-size: calc(10px * var(--fs)); color: #bfa6ff; margin-right: 4px; letter-spacing: .06em; }
.pg-v .lv-step.done { opacity: .5; }

/* the world tab: the act's world on the left, the five sides on the right */
.world-tab { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; max-width: 1180px; }
.world-tab h2 { font-family: var(--brand); font-size: calc(30px * var(--fs)); margin: 6px 0 10px; color: var(--paper); }
.world-tab .lede { font-size: calc(15px * var(--fs)); color: var(--paper); }
.world-tab p { font-size: calc(13px * var(--fs)); line-height: 1.65; max-width: 62ch; }
.wt-heard { margin-top: 22px; color: var(--muted); font-size: calc(12px * var(--fs)); }
.wt-heard b { color: var(--violet-hot, #a77bff); font-family: var(--brand); font-size: calc(18px * var(--fs)); }
.wt-fac { display: grid; gap: 8px; align-content: start; }
.wt-fac .fac { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--fc, #a77bff); background: rgba(12, 10, 17, .55); }
.wt-fac .fac b { color: var(--fc, #a77bff); font-size: calc(11px * var(--fs)); letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
.wt-fac .fac p { margin: 0; font-size: calc(12px * var(--fs)); line-height: 1.5; }
.wt-fac .f-team { --fc: #ff2b3c; } .wt-fac .f-members { --fc: #1fb6d1; } .wt-fac .f-partners { --fc: #ffb02e; } .wt-fac .f-agents { --fc: #a77bff; } .wt-fac .f-market { --fc: #e9e4d6; }
@media (max-width: 900px) { .world-tab { grid-template-columns: 1fr; } .wt-fac .fac { grid-template-columns: 1fr; gap: 4px; } }

/* the cards tab in sections: each station's processes under a line about what the station is for */
.codex-sec { margin: 22px 0 10px; padding: 8px 12px; border-left: 3px solid var(--stc, var(--paper-2)); background: linear-gradient(90deg, color-mix(in srgb, var(--stc, var(--paper-2)) 14%, transparent), transparent 70%); }
.codex-sec .cs-h { display: flex; align-items: baseline; gap: 8px; font-size: calc(14px * var(--fs)); color: var(--paper); }
.codex-sec .cs-h b { color: var(--stc, var(--paper)); font-weight: 700; }
.codex-sec .cs-n { margin-left: auto; color: var(--muted); font-size: calc(11px * var(--fs)); }
.codex-sec .cs-d { font-size: calc(11.5px * var(--fs)); color: var(--paper-2); margin-top: 2px; }
.codex-sec.k-action { --stc: var(--paper-2); }
.codex-sec.k-status { --stc: #6b6675; }

/* the kinds of cards: rule and story (kinds.js) */
.codex-kinds { margin: 4px 0 14px; border: 1px solid var(--line-2); padding: 8px 12px; }
.codex-kinds summary { cursor: pointer; color: var(--paper-2); letter-spacing: .04em; }
.ck-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px 18px; margin-top: 10px; }
.ck { display: flex; flex-direction: column; gap: 3px; font-size: calc(12px * var(--fs)); line-height: 1.45; }
.ck b { color: var(--paper); } .ck span { color: var(--paper-2); } .ck i { color: var(--muted); }
.ck .ki-g { color: #bfa6ff; }
/* the tool's reading inside its codex card: the «у тебя» badge rule must not move the row labels */
.tool .tool-help { margin: 2px 0 4px; }
.tool .tool-help i { position: static; font-size: inherit; letter-spacing: .04em; text-transform: lowercase; color: var(--violet-hot); }

/* play/styles/feedback.css */
/* Feedback of a move: forecast panel, arrows to the target, fate badges, the move log, deltas. */

#forecast {
  position: fixed; z-index: 140; width: 340px; padding: 10px 12px 9px;
  background: rgba(22, 18, 30, .94); border: 1px solid var(--line-2); border-left: 2px solid var(--violet-hot);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45); font-size: calc(11.5px * var(--fs)); line-height: 1.45; color: var(--paper-2);
  pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity var(--t-fast), transform var(--t-fast) var(--ease);
}
#forecast.on { opacity: 1; transform: none; }
#forecast .fc-h { font-size: calc(13px * var(--fs)); color: var(--paper); margin-bottom: 5px; }
#forecast .fc-h small { color: var(--muted); }
#forecast .fc-r { display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: baseline; padding: 3px 0; border-top: 1px dashed var(--line); }
#forecast .fc-r .k { flex: 0 0 100%; font-size: calc(9.5px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
#forecast .d b { color: var(--paper); font-weight: 600; }
#forecast .d.up b, #forecast .up { color: #5fe0f2; }
#forecast .d.down b, #forecast .down { color: #ff6b78; }
#forecast .fate .k { color: var(--violet-hot); }
#forecast .fate.f-exhaust .k { color: #ff9b4a; }
#forecast .warn { color: #ff6b78; font-weight: 600; border-top-color: rgba(255, 43, 60, .4); }

#arrows { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 130; pointer-events: none; overflow: visible; }
#arrows marker path { fill: var(--violet-hot); }
#arrows .arrow { fill: none; stroke: var(--violet-hot); stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(167, 123, 255, .65));
  stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); animation: arrow-in .32s var(--ease) forwards; }
#arrows .arrow.a-soft { stroke-width: 1.4; stroke-dasharray: 5 6; opacity: .7; animation: arrow-march 1.2s linear infinite; }
#arrows .arrow-label { fill: var(--paper); font: 600 12px var(--mono); text-anchor: middle; paint-order: stroke; stroke: rgba(8, 6, 12, .9); stroke-width: 4px; }
#arrows .arrow-label.a-soft { opacity: .75; font-weight: 400; }
@keyframes arrow-in { to { stroke-dashoffset: 0; } }
@keyframes arrow-march { to { stroke-dashoffset: -22; } }

/* where the card goes: a badge on the hand card */
.card .fate { position: absolute; right: 6px; bottom: calc(6px * var(--s, 1)); z-index: 3; font-size: calc(9.5px * var(--s, 1)); letter-spacing: .04em;
  padding: 1px 5px; border: 1px solid var(--line-2); background: rgba(8, 6, 12, .82); color: var(--paper-2); pointer-events: auto; }
.card .fate.f-exhaust { color: #ffb37a; border-color: rgba(255, 155, 74, .55); }
.card .fate.f-install, .card .fate.f-wear { color: #bfa6ff; border-color: rgba(167, 123, 255, .5); }
.card .fate.f-fragile { color: #ff8e98; border-color: rgba(255, 43, 60, .5); }

/* the play zone for an action without a target */
.core.play-zone { outline: 1px dashed var(--violet-hot); outline-offset: 10px; border-radius: 16px; background: radial-gradient(closest-side, rgba(167, 123, 255, .14), transparent); }
.core.play-zone.drop-over { outline-style: solid; background: radial-gradient(closest-side, rgba(167, 123, 255, .3), transparent); }

.pad.just-installed .pad-disc { animation: installed .9s var(--ease); }
@keyframes installed { 0% { box-shadow: 0 0 0 0 rgba(167, 123, 255, .9); } 100% { box-shadow: 0 0 0 26px rgba(167, 123, 255, 0); } }

/* the move log: newest on top, fades with age */
.moves { position: fixed; left: 18px; bottom: 200px; width: 300px; z-index: 30; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.moves li { font-size: calc(11px * var(--fs)); line-height: 1.35; color: var(--paper-2); background: rgba(14, 11, 20, .72); border-left: 2px solid var(--line-2); padding: 4px 8px; opacity: .55; }
.moves li:first-child { opacity: 1; border-left-color: var(--violet-hot); }
.moves li.new { animation: move-in .4s var(--ease); }
.moves li b { color: var(--paper); font-weight: 600; }
.moves li .w { color: #bfa6ff; }
.moves li .p { display: block; color: var(--muted); }
@keyframes move-in { from { transform: translateX(-12px); opacity: 0; } }

/* meters that just moved */
.meter b.bump { display: inline-block; animation: bump .7s var(--ease); }
.meter b.bump.up { --bump: #5fe0f2; }
.meter b.bump.down { --bump: #ff6b78; }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.45); color: var(--bump); text-shadow: 0 0 14px var(--bump); } 100% { transform: scale(1); } }
.pop.burn { color: #ff9b4a; font-size: calc(18px * var(--fs)); }

@media (max-width: 1100px) { .moves { display: none; } #forecast { width: 290px; } }
@media (prefers-reduced-motion: reduce) { #arrows .arrow { animation: none; stroke-dashoffset: 0; } .meter b.bump, .moves li.new { animation: none; } }

/* the week's load on a station: passes, spare throughput, spill into noise */
.pad-label .load { display: flex; gap: 2px; justify-content: center; margin-top: 3px; pointer-events: auto; }
.pad-label .load i { width: 7px; height: 7px; border: 1px solid rgba(244, 244, 239, .35); }
.pad-label .load i.p { background: var(--stc, var(--violet-hot)); border-color: var(--stc, var(--violet-hot)); box-shadow: 0 0 6px var(--stc, var(--violet-hot)); }
.pad-label .load i.o { background: #ffb02e; border-color: #ffb02e; }
.pad-label .load em { font-style: normal; font-size: calc(9px * var(--fs)); color: var(--muted); margin-left: 3px; }
.pad.st-signal { --stc: var(--st-signal); } .pad.st-context { --stc: var(--st-context); } .pad.st-decision { --stc: var(--st-decision); }
.pad.st-delivery { --stc: var(--st-delivery); } .pad.st-retro { --stc: var(--st-retro); }

/* card text: meters and stations picked out */
.card .text .tx-energy { color: #ff7a85; font-weight: 600; }
.card .text .tx-trust { color: #c9a9ff; font-weight: 600; }
.card .text .tx-st { font-weight: 600; }
.card .text .tx-st.st-signal { color: var(--st-signal); } .card .text .tx-st.st-context { color: #93a6ff; }
.card .text .tx-st.st-decision { color: var(--st-decision); } .card .text .tx-st.st-delivery { color: #ff6b78; } .card .text .tx-st.st-retro { color: var(--st-retro); }
.card .cost { cursor: help; }
#forecast .d.why { flex: 0 0 100%; color: var(--muted); font-size: calc(10.5px * var(--fs)); }

/* one-shot cards burned for the rest of the fight: a small pile next to the discard */
.burned-pile { position: absolute; right: 18px; bottom: 104px; z-index: 5; padding: 3px 8px; font-size: calc(11px * var(--fs)); color: #ffb37a; background: rgba(14, 11, 20, .85); border: 1px solid rgba(255, 155, 74, .5); cursor: pointer; }
.burned-pile:hover { border-color: #ffb37a; }

/* «смотреть»: the autopilot's bar and the card it is about to play */
#watch-bar { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 150; display: flex; align-items: center; gap: 12px;
  padding: 7px 10px 7px 14px; background: rgba(22, 18, 30, .94); border: 1px solid var(--violet-hot); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); font-size: calc(12px * var(--fs)); color: var(--paper-2); }
#watch-bar b { color: var(--paper); font-weight: 600; letter-spacing: .04em; }
#watch-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red-hot, #ff2b3c); box-shadow: 0 0 10px var(--red-hot, #ff2b3c); animation: rec 1.2s ease-in-out infinite; }
#watch-bar.paused .dot { animation: none; opacity: .4; }
#watch-bar .btn { font-size: calc(11px * var(--fs)); padding: 5px 10px; }
@keyframes rec { 50% { opacity: .25; } }
#hand .card.watch-pick { transform: translateY(-34px) scale(1.06) !important; box-shadow: 0 0 0 1px var(--violet-hot), 0 18px 40px -10px var(--violet-hot); z-index: 20; transition: transform .35s var(--ease); }
#ability.watch-pick { box-shadow: 0 0 0 2px var(--violet-hot), 0 0 24px var(--violet-hot); }
.title-actions .btn.watch { border-color: var(--violet-hot); color: var(--paper); }
@media (prefers-reduced-motion: reduce) { #watch-bar .dot { animation: none; } }
/* while the game plays itself the coach keeps to the lower right, clear of the forecast over the hand */
body.watching #coach { left: auto !important; right: 18px !important; top: auto !important; bottom: 200px !important; }
.title-actions .btn.watch small { margin-left: 6px; font-size: calc(10.5px * var(--fs)); color: var(--muted); letter-spacing: .04em; }

/* the way to the full card, under the forecast and the act map's panel (15.10) */
#forecast .fc-more, .ahead .more-hint { display: block; margin-top: 6px; font-size: calc(9.5px * var(--fs)); letter-spacing: .08em; color: var(--muted); }
#forecast .d .pi { margin-right: 4px; }

/* The fate is a separate row, so it cannot cover the parameter footer. */
.card.in-hand:has(.fate) { grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; }
.card.in-hand .fate { position: static; justify-self: end; margin: 1px 6px 5px; max-width: calc(100% - 12px); white-space: normal; line-height: 1.15; font-size: calc(8.5px * var(--s, 1)); }

/* play/styles/deckbuilder.css */
/* «Своя колода»: the pool on the left, the deck on the right. */
.deck-row { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; font-size: calc(12px * var(--fs)); color: var(--paper-2); }
.deck-row b { color: var(--paper); }

.deck-screen { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100vh; padding: 22px 28px 18px; box-sizing: border-box; }
.db-head { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 14px; }
.db-head h1 { margin: 4px 0 0; font-family: var(--brand); font-size: calc(40px * var(--fs)); color: var(--paper); text-transform: lowercase; }
.db-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.db-presets .btn.on { border-color: var(--paper); color: var(--paper); box-shadow: inset 0 -2px 0 var(--violet, #8b5cf6); }
.db-arch { margin: 0; padding: 8px 10px; border-left: 2px solid var(--violet, #8b5cf6); background: rgba(139, 92, 246, .08); font-size: calc(12px * var(--fs)); line-height: 1.45; color: var(--paper); }
.db-arch b { font-family: var(--brand); margin-right: 6px; }
.db-arch .tx-st { font-weight: 600; }
.db-arch .tx-st.st-signal { color: var(--st-signal); } .db-arch .tx-st.st-context { color: #93a6ff; }
.db-arch .tx-st.st-decision { color: var(--st-decision); } .db-arch .tx-st.st-delivery { color: #ff6b78; } .db-arch .tx-st.st-retro { color: var(--st-retro); }
.db-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 340px; gap: 18px; }
.db-pool { min-height: 0; display: flex; flex-direction: column; }
.db-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.db-filters .sep { width: 12px; }
.db-filters .chip { font: inherit; font-size: calc(11px * var(--fs)); padding: 4px 9px; color: var(--paper-2); background: rgba(14, 11, 20, .6); border: 1px solid var(--line-2); cursor: pointer; }
.db-filters .chip.on { color: var(--paper); border-color: var(--violet-hot); background: rgba(167, 123, 255, .16); }
.db-grid { flex: 1; overflow: auto; display: flex; flex-wrap: wrap; gap: 12px; align-content: flex-start; padding: 6px 4px 30px; }
.db-grid .card { cursor: pointer; transition: transform var(--t-fast) var(--ease), filter var(--t-fast); }
.db-grid .card:hover { transform: translateY(-4px); }
.db-grid .card:not(.in-deck) { filter: saturate(.7) brightness(.85); }
.db-grid .card.in-deck { outline: 1px solid var(--violet-hot); outline-offset: 3px; }
.db-n { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); z-index: 4; min-width: 26px; padding: 1px 6px; text-align: center; font-size: calc(12px * var(--fs)); font-weight: 700; color: #111; background: var(--paper); }
.card.in-deck .db-n { background: var(--violet-hot); color: #fff; box-shadow: 0 0 10px var(--violet-hot); }

.db-deck { min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: rgba(14, 11, 20, .78); border: 1px solid var(--line-2); border-top: 2px solid var(--violet-hot); }
.db-count { display: flex; align-items: baseline; gap: 10px; }
.db-count b { font-family: var(--brand); font-size: calc(44px * var(--fs)); line-height: 1; color: var(--paper); }
.db-count span { color: var(--muted); font-size: calc(12px * var(--fs)); }
.db-mix { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: calc(11px * var(--fs)); color: var(--muted); }
.db-mix b { color: var(--paper); font-size: calc(14px * var(--fs)); }
.db-list { flex: 1; overflow: auto; margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; align-content: start; }
.db-list li { display: grid; grid-template-columns: 22px 1fr auto 22px; align-items: center; gap: 8px; padding: 4px 6px; font-size: calc(12px * var(--fs)); color: var(--paper-2); background: rgba(244, 244, 239, .03); border-left: 2px solid var(--stc, var(--line-2)); }
.db-list li.st-signal { --stc: var(--st-signal); } .db-list li.st-context { --stc: var(--st-context); } .db-list li.st-decision { --stc: var(--st-decision); }
.db-list li.st-delivery { --stc: var(--st-delivery); } .db-list li.st-retro { --stc: var(--st-retro); }
.db-list li.r-signature span { color: #f2d48f; }
.db-list .c { font-style: normal; font-weight: 700; color: #111; background: var(--paper); text-align: center; font-size: calc(11px * var(--fs)); }
.db-list em { font-style: normal; color: var(--violet-hot); }
.db-list button { background: none; border: 1px solid var(--line-2); color: var(--paper-2); cursor: pointer; line-height: 1; padding: 2px 0; }
.db-list button:hover { border-color: #ff6b78; color: #ff6b78; }
.db-why { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: calc(11.5px * var(--fs)); }
.db-why li { color: #ff8e98; padding-left: 14px; position: relative; }
.db-why li::before { content: '×'; position: absolute; left: 0; }
.db-why li.ok { color: #9ff0c9; }
.db-why li.ok::before { content: '✓'; }
.db-actions { display: grid; gap: 8px; }
.db-actions .btn.primary:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 900px) { .db-body { grid-template-columns: 1fr; } .db-deck { max-height: 46vh; } .deck-screen { height: auto; } }
/* a card at its copy limit shakes; the counter goes red over the rarity budget */
.db-grid .card.db-no { animation: db-no .32s var(--ease); }
@keyframes db-no { 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.db-count.over span { color: #ff6b78; }
.db-press { font-size: calc(11.5px * var(--fs)); line-height: 1.4; color: var(--muted); margin: -2px 0 2px; }
.db-press b { color: var(--paper); font-family: var(--brand); }
.db-press.up b { color: #ff9a3d; }

/* play/styles/onboarding.css */
/* Onboarding: one idea per screen, a small drawing on top. */
.overlay.onboarding { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(12, 9, 18, .72); backdrop-filter: blur(6px); animation: ob-in .25s var(--ease); }
@keyframes ob-in { from { opacity: 0; } }
.ob-box { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 22px 28px 20px; background: #1d1828; border: 1px solid var(--line-2); border-top: 2px solid var(--violet-hot); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.ob-top { display: flex; align-items: center; gap: 14px; font-size: calc(11px * var(--fs)); color: var(--muted); letter-spacing: .12em; }
.ob-dots { display: flex; gap: 6px; flex: 1; }
.ob-dots i { width: 22px; height: 3px; background: var(--line-2); }
.ob-dots i.seen { background: var(--violet); }
.ob-dots i.on { background: var(--violet-hot); box-shadow: 0 0 8px var(--violet-hot); }
.ob-watch { margin-left: auto; padding: 4px 10px; border: 1px solid rgba(31,182,209,.5); background: rgba(31,182,209,.08); color: var(--st-signal); font: inherit; letter-spacing: .06em; cursor: pointer; }
.ob-watch:hover { background: var(--st-signal); color: #0b0812; }
.ob-watch + .ob-skip { margin-left: 0; }
.ob-skip { background: none; border: 0; color: var(--muted); cursor: pointer; text-decoration: underline dotted; }
.ob-box h2 { font-family: var(--brand); font-size: calc(30px * var(--fs)); margin: 14px 0 12px; color: var(--paper); text-transform: lowercase; }
.ob-art { min-height: 170px; display: grid; place-items: center; margin-bottom: 12px; padding: 12px; background: rgba(8, 6, 12, .55); border: 1px solid var(--line); }
.ob-p { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: calc(13px * var(--fs)); line-height: 1.55; color: var(--paper-2); }
.ob-p b { color: var(--paper); }
.ob-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.ob-nav [data-ob="back"] { margin-right: auto; }

.ob-meters { display: grid; gap: 12px; width: min(420px, 100%); }
.ob-meter { display: grid; grid-template-columns: 90px 1fr 64px; align-items: center; gap: 12px; font-size: calc(12px * var(--fs)); }
.ob-meter span { color: var(--muted); letter-spacing: .12em; text-transform: uppercase; font-size: calc(10px * var(--fs)); }
.ob-meter i { height: 8px; background: rgba(244, 244, 239, .08); }
.ob-meter i b { display: block; height: 100%; }
.ob-meter.e i b { background: var(--red-hot); box-shadow: 0 0 10px var(--red-hot); }
.ob-meter.tr i b { background: var(--violet-hot); }
.ob-meter.cap i b { background: #e9c98f; }
.ob-meter em { font-style: normal; font-family: var(--brand); font-size: calc(18px * var(--fs)); color: var(--paper); }

.ob-hand { display: flex; gap: 12px; align-items: flex-end; }
.ob-card { position: relative; width: 74px; height: 100px; border: 1px solid var(--line-2); background: linear-gradient(180deg, #2a2338, #14111b); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; font-size: calc(10px * var(--fs)); color: var(--paper-2); }
.ob-card { isolation: isolate; }
.ob-card .c { position: absolute; left: 6px; top: 6px; width: 20px; height: 20px; display: grid; place-items: center; font-style: normal; font-weight: 700; color: #111; z-index: 0; }
.ob-card .c::before { content: ''; position: absolute; inset: 2px; background: var(--paper); transform: rotate(45deg); z-index: -1; }
.ob-focus { display: grid; justify-items: center; margin-left: 18px; }
.ob-focus b { font-size: calc(22px * var(--fs)); letter-spacing: 6px; color: var(--paper); }
.ob-focus small { color: var(--muted); }

.ob-ring { width: min(440px, 100%); height: auto; }
.ob-ring .loop { fill: none; stroke: url(#none); stroke: rgba(167, 123, 255, .5); stroke-width: 1.5; stroke-dasharray: 4 5; }
.ob-st ellipse { fill: rgba(167, 123, 255, .08); stroke: rgba(244, 244, 239, .25); }
.ob-st.on ellipse { fill: rgba(167, 123, 255, .22); stroke: var(--violet-hot); }
.ob-st.st-signal.on ellipse { stroke: var(--st-signal); }
.ob-st.st-delivery.on ellipse { stroke: var(--st-delivery); }
.ob-st text { fill: var(--paper-2); font: 11px var(--mono); text-anchor: middle; }
.ob-arrow { fill: none; stroke: var(--violet-hot); stroke-width: 2; }
.ob-ring marker path { fill: var(--violet-hot); }

.ob-crisis { display: grid; gap: 14px; width: min(420px, 100%); }
.ob-cr { display: grid; grid-template-columns: 1fr 160px 30px; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid rgba(255, 43, 60, .45); background: rgba(90, 7, 16, .25); font-size: calc(12px * var(--fs)); }
.ob-cr em { font-style: normal; color: var(--paper); }
.ob-cr i { height: 6px; background: rgba(244, 244, 239, .08); }
.ob-cr i b { display: block; height: 100%; background: var(--red-hot); }
.ob-cr .tm { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--red-hot); display: grid; place-items: center; font-weight: 700; color: var(--paper); }
.ob-cr.hot .tm { background: var(--red-hot); box-shadow: 0 0 12px var(--red-hot); }

.ob-fates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.ob-fate { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line-2); font-size: calc(11.5px * var(--fs)); line-height: 1.45; }
.ob-fate > b { font-size: calc(20px * var(--fs)); line-height: 1; color: #bfa6ff; }
.ob-fate.f-exhaust > b { color: #ffb37a; }
.ob-fate.f-fragile > b { color: #ff8e98; }
.ob-fate em { display: block; font-style: normal; color: var(--paper); font-weight: 600; }
.ob-fate span { color: var(--paper-2); }

.ob-fc { display: grid; gap: 4px; width: 280px; padding: 10px 12px; background: rgba(22, 18, 30, .94); border: 1px solid var(--line-2); border-left: 2px solid var(--violet-hot); font-size: calc(12px * var(--fs)); }
.ob-fc .k { font-size: calc(9.5px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.ob-fc .down { color: #ff6b78; }

@media (max-width: 640px) { .ob-fates { grid-template-columns: 1fr; } .ob-box h2 { font-size: calc(24px * var(--fs)); } .ob-meter { grid-template-columns: 70px 1fr 54px; } }

/* tutorial coach: a bubble next to the lit element */
#coach { position: fixed; z-index: 380; width: 360px; padding: 12px 14px 10px; background: #241d33; border: 1px solid var(--violet-hot); box-shadow: 0 0 0 1px rgba(167, 123, 255, .25), 0 20px 50px rgba(0, 0, 0, .5); font-size: calc(13px * var(--fs)); line-height: 1.5; color: var(--paper); animation: ob-in .25s var(--ease); }
/* a window over the game (a new season over the save, the menu, a card dossier) hides the coach: its buttons stay free */
body:has(.overlay:not(.onboarding)) #coach { visibility: hidden; }
#coach .coach-n { font-size: calc(10px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--violet-hot); }
#coach p { margin: 6px 0 10px; }
#coach .coach-nav { display: flex; align-items: center; gap: 10px; }
#coach .coach-wait { color: var(--muted); font-size: calc(11px * var(--fs)); animation: pulse 1.4s infinite; }
#coach .coach-exit { margin-left: auto; background: none; border: 0; color: var(--muted); font-size: calc(11px * var(--fs)); cursor: pointer; text-decoration: underline dotted; }
.coach-lit { outline: 2px solid var(--violet-hot) !important; outline-offset: 6px; box-shadow: 0 0 0 9999px rgba(10, 8, 15, .0), 0 0 24px rgba(167, 123, 255, .65) !important; animation: coach-pulse 1.6s ease-in-out infinite; z-index: 200; }
@keyframes coach-pulse { 50% { outline-color: rgba(167, 123, 255, .35); } }
#coach .coach-n { position: relative; padding-bottom: 6px; }
#coach .coach-n i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(167, 123, 255, .18); }
#coach .coach-n i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: var(--violet-hot); box-shadow: 0 0 8px var(--violet-hot); transition: width .4s var(--ease); }
#coach .coach-after { margin: 8px 0 0; padding: 6px 8px; font-size: calc(12px * var(--fs)); color: #9ff0c9; background: rgba(95, 224, 160, .08); border-left: 2px solid #5fe0a0; }
#coach .coach-st { color: #c9a9ff; font-weight: 600; }

/* the card learns, the new season, the forks */
.ob-grow { display: flex; align-items: center; gap: 10px; justify-content: center; }
.ob-ph { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 14px; border: 1px solid var(--line-2); min-width: 108px; }
.ob-ph b { font-size: calc(18px * var(--fs)); letter-spacing: .12em; color: #bfa6ff; }
.ob-ph em { font-style: normal; color: var(--paper); font-weight: 600; }
.ob-ph small { color: var(--muted); font-size: calc(11px * var(--fs)); }
.ob-ph.ph-1 { border-color: rgba(167,123,255,.55); } .ob-ph.ph-2 { border-color: var(--st-signal); box-shadow: 0 0 18px rgba(31,182,209,.25); }
.ob-ph.ph-2 b { color: var(--st-signal); }
.ob-to { color: var(--muted); font-size: calc(18px * var(--fs)); }
.ob-season { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.ob-col { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border: 1px solid var(--line-2); font-size: calc(12px * var(--fs)); }
.ob-col em { font-style: normal; font-weight: 700; margin-bottom: 4px; letter-spacing: .06em; }
.ob-col.out em { color: var(--red-hot); } .ob-col.keep em { color: var(--st-signal); }
.ob-col span { color: var(--paper-2); } .ob-col.out span::before { content: '↺ '; color: var(--muted); } .ob-col.keep span::before { content: '▣ '; color: var(--st-signal); }
.ob-map { margin: 0; font-family: var(--mono); font-size: calc(12.5px * var(--fs)); line-height: 1.35; color: var(--paper-2); }
/* a window over the game (menu, confirm, deck) hides the coach: its bubble never covers a dialog's buttons */
body:has(.overlay:not(.onboarding)) #coach { display: none; }
@media (max-width: 760px) { #coach { width: calc(100vw - 24px); right: auto; } }

/* Request 53: keep navigation and teaching targets usable in narrow/short windows. */
.ob-top { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; }
.ob-n, .ob-skip { white-space: nowrap; }
.ob-dots { min-width: 0; }
.ob-dots i { min-width: 0; flex: 1; }
.ob-watch { grid-column: 1/-1; grid-row: 2; width: 100%; margin: 0; }
.ob-skip { grid-column: 3; grid-row: 1; }
.ob-box, .ob-art, .ob-top, .ob-p { min-width: 0; }
.ob-nav { flex-wrap: wrap; position: sticky; bottom: -20px; padding: 12px 0 2px; background: #1d1828; z-index: 2; }
#coach { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }
body:has(.beat:not(.out)) #coach, body:has(#terms.sheet.open) #coach { visibility: hidden; }
@media (max-width: 640px) {
  .ob-box { width: calc(100vw - 24px); padding: 16px; max-height: calc(100dvh - 24px); }
  .ob-art { padding: 10px; }
  .ob-hand { flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 100%; }
  .ob-card { width: 64px; }
  .ob-focus { flex-basis: 100%; text-align: center; }
  .ob-cr { grid-template-columns: minmax(0,1fr) minmax(30px,60px) 26px; gap: 8px; padding: 8px; }
  .ob-grow { width: 100%; gap: 4px; }
  .ob-ph { min-width: 0; flex: 1; padding: 8px 4px; font-size: 11px; }
  .ob-ph b { font-size: 13px; letter-spacing: 0; }
  .ob-ph small { font-size: 10px; }
  .ob-to { font-size: 13px; }
  .ob-col { padding: 8px; min-width: 0; overflow-wrap: anywhere; }
  .ob-map { font-size: 11px; max-width: 100%; }
  .ob-fc { width: 100%; min-width: 0; }
  .ob-nav { bottom: -16px; }
}
@media (prefers-reduced-motion: reduce) {
  .overlay.onboarding, #coach, .coach-lit, #coach .coach-wait { animation: none; }
}
html.upright-phone body:has(.onboarding) .upright-plate,
html.upright-phone body:has(#coach) .upright-plate,
html.upright-phone body:has(#terms.open) .upright-plate { display: none; }
/* Mobile board fitting uses a virtual viewport; keep teaching text at readable physical size. */
#coach { width: calc(360px * var(--coach-scale,1)); max-width: calc(100vw - 24px * var(--coach-scale,1)); padding: calc(12px * var(--coach-scale,1)) calc(14px * var(--coach-scale,1)); font-size: calc(13px * var(--fs) * var(--coach-scale,1)); }
#coach .coach-n { font-size: calc(10px * var(--fs) * var(--coach-scale,1)); }
#coach .coach-after { font-size: calc(12px * var(--fs) * var(--coach-scale,1)); }
#coach .coach-wait, #coach .coach-exit { font-size: calc(11px * var(--fs) * var(--coach-scale,1)); }
#coach .coach-nav { gap: calc(10px * var(--coach-scale,1)); }
#coach .coach-nav .btn { font-size: calc(12px * var(--fs) * var(--coach-scale,1)); padding: calc(10px * var(--coach-scale,1)) calc(14px * var(--coach-scale,1)); }

/* play/styles/fx.css */
/* move effects: the flight of a played card, its landing, the drag (web/src/ui/fx.js, combat.js bindDrag) */
#fx-layer { position: fixed; inset: 0; z-index: 180; pointer-events: none; overflow: hidden; }
.fx-flyer { position: fixed; margin: 0; z-index: 181; pointer-events: none; transform-origin: 50% 50%; box-shadow: 0 24px 40px -16px #000, 0 0 30px -6px var(--stc, var(--violet-hot)); will-change: transform; }
.fx-land { position: fixed; width: 0; height: 0; }
.fx-land .ring { position: absolute; left: 0; top: 0; width: 130px; height: 58px; border: 2px solid var(--fc); border-radius: 50%; box-shadow: 0 0 18px var(--fc), inset 0 0 12px var(--fc); }
.fx-land .ring.sq { border-radius: 4px; height: 70px; width: 90px; border-style: dashed; }
.fx-land .scan { position: absolute; left: 0; top: 0; width: 110px; height: 2px; background: linear-gradient(90deg, transparent, var(--fc), transparent); box-shadow: 0 0 10px var(--fc); }
.fx-land b { position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: calc(17px * var(--fs)); font-weight: 700; color: var(--fc); text-shadow: 0 0 8px var(--fc); }
.fx-land em { position: absolute; left: 0; top: 0; font-style: normal; font-weight: 700; white-space: nowrap; font-size: calc(13px * var(--fs)); color: #fff; text-shadow: 0 0 10px var(--fc), 0 1px 0 #000; padding: 2px 8px; background: rgba(5,4,7,.72); border: 1px solid var(--fc); }

/* the drag: the card leans into the motion, shrinks toward a good target, reddens over a wrong one */
.drag-ghost { transition: transform .12s ease-out, filter .12s; }
.drag-ghost.over-ok { filter: drop-shadow(0 0 16px var(--stc, var(--violet-hot))); }
.drag-ghost.over-bad { filter: grayscale(.6) drop-shadow(0 0 12px rgba(255,43,60,.9)); opacity: .7; }
.drag-ghost.over-bad::after { content: '✕'; position: absolute; right: 8px; top: 6px; color: var(--red-hot); font-weight: 700; font-size: calc(18px * var(--fs)); }
.pad.target .pad-disc { box-shadow: 0 0 0 calc(1px + 2px * var(--near, 0)) var(--stc, var(--violet-hot)), 0 0 calc(10px + 40px * var(--near, 0)) var(--stc, var(--violet-hot)); transition: box-shadow .1s; }
.crisis-actor.targetable { filter: drop-shadow(0 0 calc(4px + 18px * var(--near, 0)) rgba(255,43,60,.9)); }
.core.play-zone { box-shadow: 0 0 calc(40px * var(--near, 0)) rgba(167,123,255,.35); }
.card.on-board { transition: opacity .12s; }
@media (prefers-reduced-motion: reduce) { .drag-ghost { transition: none; } }
.fx-land .beam { position: absolute; left: 0; top: 0; width: 46px; height: 190px; transform-origin: 50% 100%; background: linear-gradient(0deg, var(--fc), transparent); opacity: .0; filter: blur(2px); mix-blend-mode: screen; }

/* practice on a board card: three marks for the phase, its name, the weeks to the next, +1 when this week counts */
.card.on-board .practice { position: absolute; left: calc(11px * var(--s)); top: calc(100% + 4px * var(--s)); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: calc(9px * var(--fs)); color: var(--paper-2); background: rgba(5,4,7,.85); border: 1px solid var(--line); padding: 1px 6px; z-index: 3; }
.card.on-board .practice .pm { display: inline-flex; gap: 2px; }
.card.on-board .practice .pm i { width: 5px; height: 5px; border: 1px solid var(--stc, var(--violet-hot)); border-radius: 50%; }
.card.on-board .practice .pm i.on { background: var(--stc, var(--violet-hot)); box-shadow: 0 0 5px var(--stc, var(--violet-hot)); }
.card.on-board .practice small { color: var(--muted); font-size: inherit; }
.card.on-board .practice b { color: var(--violet-hot); }
.card.on-board .practice.ph-2 { border-color: var(--stc, var(--violet-hot)); color: var(--paper); }

/* a kind of card introduces itself (kinds.js) */
.kind-intro { position: absolute; left: 18px; top: 84px; width: 280px; z-index: 60; padding: 12px 14px 12px; background: rgba(12,8,22,.94); border: 1px solid var(--violet-hot); box-shadow: 0 0 28px rgba(139,92,246,.3); font-size: calc(12px * var(--fs)); line-height: 1.5; animation: ki-in .32s cubic-bezier(.2,.9,.3,1.2) both; }
.kind-intro.out { animation: ki-out .26s ease-in both; }
.ki-h { display: flex; gap: 8px; align-items: baseline; color: var(--muted); font-size: calc(10.5px * var(--fs)); letter-spacing: .12em; text-transform: uppercase; }
.ki-h b { color: var(--paper); font-size: calc(14px * var(--fs)); letter-spacing: .02em; text-transform: none; }
.ki-g { font-size: calc(18px * var(--fs)); color: #bfa6ff; text-shadow: 0 0 10px rgba(167,123,255,.7); }
.ki-rule { margin: 8px 0 6px; color: var(--paper); }
.ki-story { margin: 0 0 10px; color: var(--paper-2); font-style: italic; border-left: 2px solid rgba(167,123,255,.45); padding-left: 9px; }
.ki-ok { font: inherit; background: transparent; color: var(--paper); border: 1px solid var(--line-2); padding: 5px 12px; cursor: pointer; }
.ki-ok:hover { border-color: var(--violet-hot); }
.kind-agent .ki-g { color: var(--st-signal); } .kind-ritual .ki-g, .k-ritual .ki-g { color: #e9c46a; }
.k-agent { border-color: var(--st-signal); } .k-exhaust, .k-status { border-color: var(--red-hot); } .k-exhaust .ki-g, .k-status .ki-g { color: var(--red-hot); }
#hand .card.kind-lit { outline: 2px solid var(--violet-hot); outline-offset: 3px; box-shadow: 0 0 22px rgba(167,123,255,.55); }
@keyframes ki-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes ki-out { to { opacity: 0; transform: translateX(-20px); } }
@media (prefers-reduced-motion: reduce) { .kind-intro, .kind-intro.out { animation: none; } }
/* the terms panel is open: the plate of a new kind of card sits over it, the board keeps its crises (review ui-6) */
/* its lower part: inflow, throughput and the bottleneck at the top of the panel stay in reach of the mouse */
.kind-intro.over-terms { z-index: 70; background: #0c0816; left: auto; right: 10px; top: auto; bottom: 236px; width: min(280px, calc(var(--terms-w, 270px) - 16px)); }

/* play/styles/terms.css */
/* the terms panel on the right edge of the fight (web/src/ui/terms.js) */
:root { --terms-w: 268px; }
#terms { position: absolute; right: 0; top: 64px; bottom: 236px; z-index: 30; width: 0; pointer-events: none; }
#terms.open { width: var(--terms-w); pointer-events: auto; }
#terms .terms-tab { position: absolute; right: 100%; top: 14px; pointer-events: auto; writing-mode: vertical-rl; transform: rotate(180deg); padding: 10px 5px; font-size: calc(10px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-2); background: rgba(5,4,7,.86); border: 1px solid var(--line); border-right: 0; cursor: pointer; }
#terms:not(.open) .terms-tab { right: 0; border-right: 1px solid var(--line); }
#terms .terms-tab:hover { color: var(--violet-hot); border-color: var(--violet-hot); }
#terms .terms-body { display: none; height: 100%; overflow-y: auto; padding: 10px 12px 12px; background: linear-gradient(90deg, rgba(10,8,16,.82), rgba(10,8,16,.94)); border-left: 1px solid var(--line); box-sizing: border-box; }
#terms.open .terms-body { display: block; }
#terms .terms-h { font-size: calc(10px * var(--fs)); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
#terms .terms-h small { letter-spacing: 0; text-transform: none; color: var(--muted); opacity: .8; margin-left: 4px; }
#terms .term { padding: 6px 8px; margin: 0 -8px; border-left: 2px solid transparent; cursor: default; transition: background .12s, border-color .12s; }
#terms .term .tn { display: flex; justify-content: space-between; gap: 8px; font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--paper); }
#terms .term .tv { font-weight: 400; color: var(--paper-2); font-size: calc(11px * var(--fs)); text-align: right; }
#terms .term .tv b { color: var(--violet-hot); }
#terms .term .td { font-size: calc(10.5px * var(--fs)); line-height: 1.4; color: var(--muted); margin-top: 2px; }
#terms .term.on, #terms .term.from-board { background: rgba(167,123,255,.12); border-left-color: var(--violet-hot); }
#terms .term.on .td, #terms .term.from-board .td { color: var(--paper-2); }
.term-lit { outline: 2px solid var(--violet-hot) !important; outline-offset: 3px; box-shadow: 0 0 22px rgba(167,123,255,.55) !important; border-radius: 4px; animation: term-lit 1s ease-in-out infinite alternate; }
@keyframes term-lit { from { outline-color: rgba(167,123,255,.5); } to { outline-color: #c8a8ff; } }
@media (prefers-reduced-motion: reduce) { .term-lit { animation: none; } }
/* hints mode (0.5.0): a clear tab, ✕ in the head, a foot with the rules and the mode */
#terms .terms-tab b { display: inline-block; transform: rotate(180deg); color: var(--violet-hot); margin-bottom: 4px; }
#terms .terms-h { display: flex; align-items: baseline; gap: 6px; }
#terms .terms-h small { flex: 1; }
#terms .terms-x { margin-left: auto; background: none; border: 1px solid var(--line); color: var(--paper-2); width: 24px; height: 24px; line-height: 20px; font-size: 16px; cursor: pointer; padding: 0; }
#terms .terms-x:hover { color: var(--violet-hot); border-color: var(--violet-hot); }
#terms .terms-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
#terms .terms-foot button { background: none; border: 1px solid var(--line); color: var(--paper-2); font: inherit; font-size: calc(10.5px * var(--fs)); padding: 4px 8px; cursor: pointer; }
#terms .terms-foot button:hover { color: var(--violet-hot); border-color: var(--violet-hot); }
/* a phone: the hints are a sheet over the bottom of the board, the tab a small button at the right edge */
#terms.sheet { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; z-index: 240; max-height: none; overflow: visible; padding: 0; border: 0; background: none; box-shadow: none; }
#terms.sheet:not(.open) { left: auto; width: 0; bottom: 168px; }
#terms.sheet .terms-tab { writing-mode: horizontal-tb; transform: none; top: auto; bottom: 0; right: 0; padding: 7px 10px; border-right: 1px solid var(--line); }
#terms.sheet .terms-tab b { transform: none; margin: 0 4px 0 0; }
#terms.sheet.open .terms-tab { display: none; }
#terms.sheet .terms-body { max-height: 52vh; border-left: 0; border-top: 1px solid var(--violet-hot); background: rgba(10,8,16,.97); box-shadow: 0 -18px 40px rgba(0,0,0,.55); padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
#terms.sheet .terms-x { width: 34px; height: 34px; font-size: 20px; }
#terms.sheet .term { cursor: pointer; }
/* 760–1023: the panel lies over the field, the field keeps its width */
#terms.over { z-index: 60; }
#terms.over .terms-body { background: rgba(10,8,16,.96); box-shadow: -18px 0 40px rgba(0,0,0,.55); border-left-color: var(--violet-hot); }
/* an open panel closes with ✕, so its tab steps aside and leaves the top of the board to the first fight's hint */
#terms.open:not(.sheet) .terms-tab { display: none; }
#terms .term:focus-visible { outline: 1px solid var(--violet-hot); outline-offset: -1px; background: rgba(167,123,255,.12); }
#terms .term .tn { flex-wrap: wrap; }
#terms .term .tv { min-width: 0; overflow-wrap: anywhere; }
#terms.sheet .term .tn { font-size: calc(12px * var(--fs) * var(--terms-scale,1)); }
#terms.sheet .term .tv { font-size: calc(11px * var(--fs) * var(--terms-scale,1)); }
#terms.sheet .term .td, #terms.sheet .terms-foot button { font-size: calc(10.5px * var(--fs) * var(--terms-scale,1)); }
#terms.sheet .terms-h, #terms.sheet .terms-tab { font-size: calc(10px * var(--fs) * var(--terms-scale,1)); }
#terms.sheet .terms-body { padding: calc(10px * var(--terms-scale,1)) calc(12px * var(--terms-scale,1)); }
#terms.sheet .term { padding: calc(6px * var(--terms-scale,1)) calc(8px * var(--terms-scale,1)); margin-inline: calc(-8px * var(--terms-scale,1)); }
#terms.sheet .terms-x { min-width: calc(34px * var(--terms-scale,1)); height: calc(34px * var(--terms-scale,1)); font-size: calc(20px * var(--terms-scale,1)); }
#terms.sheet:not(.open) { bottom: calc(168px * var(--terms-scale,1)); }
#terms.sheet .terms-tab, #terms.sheet .terms-foot button { padding: calc(7px * var(--terms-scale,1)) calc(10px * var(--terms-scale,1)); }

/* play/styles/story.css */
/* The season's story on screen (docs/story-arcs.md § 10): chapter card, voice of a fight, the beats and the turn on the
   act map, the people of the season, their ends in the report. One hue per faction of the world. */
.f-team { --fc: var(--violet-hot); }
.f-members { --fc: var(--cyan); }
.f-partners { --fc: #e3b45c; }
.f-agents { --fc: var(--st-context); }
.f-market { --fc: var(--red-hot); }

/* ---------- chapter card over the map ---------- */
.chapter-card { position: absolute; inset: 64px 0 0; z-index: 45; display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 45%, rgba(18,10,32,.78), rgba(4,2,8,.92)); backdrop-filter: blur(3px); animation: beat-in .3s var(--ease) both; cursor: pointer; }
.chapter-card.out { animation: beat-out .24s var(--ease) both; }
.cc-card { position: relative; width: min(1000px, 94vw); max-height: calc(100% - 24px); overflow: hidden auto; padding: 0; border: 1px solid rgba(167,123,255,.4); background: linear-gradient(160deg, rgba(42,29,68,.7), rgba(7,4,12,.96)); box-shadow: 0 40px 90px -30px #000, 0 0 0 1px rgba(0,0,0,.4) inset; display: grid; grid-template-columns: 440px minmax(0, 1fr); animation: dossier-in .45s var(--ease) .05s both; }
/* 15.10: the left column says where the season is, the right one tells the chapter */
.cc-side { display: flex; flex-direction: column; gap: 12px; padding: 22px 20px 20px; background: linear-gradient(180deg, rgba(7,4,12,.6), rgba(42,29,68,.3)); border-right: 1px dashed rgba(167,123,255,.3); }
.cc-num { display: flex; align-items: flex-end; gap: 12px; }
.cc-num b { font-family: var(--brand); font-size: calc(88px * var(--fs)); line-height: .78; color: var(--paper); text-shadow: 4px 0 0 rgba(255,43,60,.55), -3px 0 0 rgba(31,182,209,.35); animation: cc-title .5s var(--ease) .05s both; }
.cc-num span { padding-bottom: 3px; font-size: calc(10.5px * var(--fs)); line-height: 1.45; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cc-chap { font-family: var(--brand); font-size: calc(22px * var(--fs)); line-height: 1; color: var(--violet-hot); text-transform: lowercase; }
.cc-track { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cc-track li { flex: 1; height: 6px; background: rgba(167,123,255,.16); }
.cc-track li.past { background: rgba(167,123,255,.55); }
.cc-track li.now { background: var(--red-hot); box-shadow: 0 0 10px rgba(255,43,60,.7); animation: cc-now 1.2s ease-in-out infinite alternate; }
@keyframes cc-now { to { opacity: .5; } }
.cc-beats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: calc(11px * var(--fs)); letter-spacing: .06em; text-transform: lowercase; color: var(--muted); }
.cc-beats i { font-style: normal; opacity: .5; }
.cc-beats span.past { color: var(--paper-2); }
.cc-beats span.on { padding: 1px 7px; color: var(--violet-hot); border: 1px solid var(--violet-hot); }
.cc-beats.b-trial span.on { color: #ffb36b; border-color: #ffb36b; }
.cc-beats.b-resolution span.on { color: var(--red-hot); border-color: var(--red-hot); }
.cc-ahead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: calc(11.5px * var(--fs)); }
.cc-ahead span { margin-right: 2px; font-size: calc(10px * var(--fs)); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cc-ahead em { font-style: normal; padding: 2px 8px; color: var(--paper-2); border: 1px solid rgba(167,123,255,.35); background: rgba(7,4,12,.4); }
.cc-ahead em b { margin-right: 6px; color: var(--violet-hot); }
.cc-ahead em.t-elite b, .cc-ahead em.t-boss b, .cc-ahead em.t-combat b { color: var(--red-hot); }
.cc-ahead em.t-event b { color: var(--cyan); }
.cc-ahead em.t-shop b { color: #ffb36b; }
.cc-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 24px 26px 20px; }
.cc-main > * { margin-left: 0 !important; margin-right: 0 !important; }
.cc-focus { margin: 0; padding: 7px 10px; border-left: 2px solid var(--cyan); background: rgba(31,182,209,.06); font-size: calc(12.5px * var(--fs)); color: var(--paper); animation: cc-rise .5s var(--ease) .65s both; }
.cc-stake i, .cc-focus i { display: block; margin-bottom: 2px; font-style: normal; font-size: calc(10px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; }
.cc-focus i { color: var(--cyan); }
@media (max-width: 900px) {
  .cc-card { grid-template-columns: 1fr; width: min(620px, 94vw); }
  .cc-side { border-right: 0; border-bottom: 1px dashed rgba(167,123,255,.3); }
  .cc-num b { font-size: calc(60px * var(--fs)); }
}
.cc-card h2 { margin: 0; font-family: var(--brand); font-size: clamp(30px, 3.2vw, 44px); line-height: 1; text-transform: lowercase; color: var(--paper); text-shadow: 3px 0 0 rgba(255,43,60,.45), -2px 0 0 rgba(31,182,209,.3); animation: cc-title .5s var(--ease) .12s both; }
@keyframes cc-title { from { opacity: 0; transform: translateY(8px); letter-spacing: .06em; filter: blur(2px); } }
.cc-scene { margin: 0 22px; font-size: calc(14px * var(--fs)); line-height: 1.6; color: var(--paper-2); animation: cc-rise .5s var(--ease) .35s both; }
.cc-stake { margin: 0 22px; padding: 7px 10px; border-left: 2px solid var(--red-hot); background: rgba(255,43,60,.07); font-size: calc(12.5px * var(--fs)); color: var(--paper); animation: cc-rise .5s var(--ease) .55s both; }
.cc-stake i { font-style: normal; color: var(--red-hot); }
.cc-turn { margin: 0 22px; padding: 10px 12px; border: 1px solid rgba(255,179,107,.45); background: rgba(255,179,107,.06); animation: cc-rise .5s var(--ease) .45s both; }
.cc-turn .kicker { color: #ffb36b; }
.cc-turn b { display: block; margin: 4px 0; font-family: var(--brand); font-size: calc(18px * var(--fs)); color: var(--paper); text-transform: lowercase; }
.cc-turn p { margin: 0; font-size: calc(12.5px * var(--fs)); line-height: 1.55; color: var(--paper-2); }
.cc-hero { margin: 0 22px; padding: 8px 12px; border-left: 2px solid var(--violet-hot); font-size: calc(13px * var(--fs)); line-height: 1.5; color: var(--paper); animation: cc-rise .5s var(--ease) .75s both; }
.cc-hero span { display: block; margin-bottom: 3px; font-size: calc(10.5px * var(--fs)); letter-spacing: .06em; color: var(--violet-hot); text-transform: lowercase; }
.cc-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 0; font-size: calc(11px * var(--fs)); color: var(--muted); }
.cc-foot b { color: var(--paper-2); font-weight: 500; }
.cc-timer { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--red-hot), var(--violet-hot)); transform-origin: left; animation: cc-timer var(--hold, 3200ms) linear both; }
@keyframes cc-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes cc-rise { from { opacity: 0; transform: translateY(6px); } }

/* ---------- voice of a fight ---------- */
.voice { position: fixed; z-index: 60; width: min(340px, 80vw); padding: 8px 12px 10px; border: 1px solid color-mix(in srgb, var(--fc, #a77bff) 55%, transparent); border-left: 3px solid var(--fc, var(--violet-hot)); background: rgba(10,7,16,.94); box-shadow: 0 16px 40px -14px #000, 0 0 22px -8px var(--fc, #a77bff); cursor: pointer; animation: voice-in .32s var(--ease) both; }
.voice.out { animation: voice-out .26s var(--ease) both; }
.voice .v-who { display: flex; align-items: baseline; gap: 8px; font-size: calc(10.5px * var(--fs)); letter-spacing: .05em; text-transform: lowercase; }
.voice .v-who b { color: var(--fc, var(--violet-hot)); font-weight: 600; }
.voice .v-who span { color: var(--muted); }
.voice p { margin: 4px 0 0; font-size: calc(13px * var(--fs)); line-height: 1.45; color: var(--paper); }
.voice.f-agents p { font-family: var(--mono); letter-spacing: -.01em; }
.voice.f-market p { font-family: var(--brand); text-transform: lowercase; }
@keyframes voice-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes voice-out { to { opacity: 0; transform: translateY(-4px); } }
.moves li.voice { border-left-color: #e3b45c; font-style: italic; }
.moves li.voice b { font-style: normal; color: #e3b45c; }

/* ---------- act map: beats, the turn, the stake over the boss ---------- */
.band.beat-start { border-bottom: 1px dashed rgba(255,179,107,.38); }
.band .beat-tag { position: absolute; left: 14px; bottom: 3px; font-style: normal; font-size: calc(9.5px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: rgba(167,123,255,.7); pointer-events: auto; }
.band .beat-tag.b-trial { color: rgba(255,179,107,.75); }
.band .beat-tag.b-resolution { color: rgba(255,43,60,.75); }
.turn-mark { position: absolute; left: 14px; transform: translateY(-50%); z-index: 2; padding: 2px 8px; border: 1px dashed rgba(255,179,107,.55); background: rgba(7,4,12,.88); font-size: calc(10px * var(--fs)); letter-spacing: .05em; color: rgba(255,179,107,.8); pointer-events: auto; text-transform: lowercase; }
.turn-mark b { color: #ffb36b; }
.turn-mark.known { border-style: solid; color: var(--paper); box-shadow: 0 0 12px -2px rgba(255,179,107,.5); }
.boss-stake { position: absolute; transform: translate(-50%, calc(-100% - 40px)); max-width: 300px; padding: 3px 9px; border: 1px solid rgba(255,43,60,.45); background: rgba(7,4,12,.9); font-size: calc(10.5px * var(--fs)); line-height: 1.35; color: var(--paper-2); text-align: center; pointer-events: none; z-index: 2; }
.boss-stake i { font-style: normal; color: var(--red-hot); }

/* ---------- people of the season: folded panel on the map, a tab in the codex ---------- */
.cast-panel { border: 1px solid var(--line); background: rgba(7,4,12,.35); }
.cast-panel summary { cursor: pointer; padding: 7px 10px; list-style: none; display: flex; align-items: baseline; gap: 6px; }
.cast-panel summary::-webkit-details-marker { display: none; }
.cast-panel summary::after { content: '▾'; margin-left: auto; color: var(--muted); transition: transform var(--t-fast); }
.cast-panel[open] summary::after { transform: rotate(180deg); }
.cast-panel summary i { font-style: normal; font-size: calc(11px * var(--fs)); }
.cast-panel summary small { color: var(--muted); font-size: calc(10px * var(--fs)); }
.cast-what { margin: 0; padding: 6px 10px 8px; border-top: 1px solid var(--line); font-size: calc(10.5px * var(--fs)); line-height: 1.5; color: var(--muted); }
.cast-panel summary .up, .cast-row.s-up i, .ce-row.up i { color: var(--cyan); }
.cast-panel summary .down, .cast-row.s-down i, .ce-row.down i { color: var(--red-hot); }
.cast-row { display: grid; grid-template-columns: 14px auto; column-gap: 6px; padding: 6px 10px; border-top: 1px solid var(--line); font-size: calc(11px * var(--fs)); line-height: 1.45; }
.cast-row i { font-style: normal; color: var(--muted); grid-row: span 2; }
.cast-row b { color: var(--fc, var(--paper)); font-weight: 600; text-transform: lowercase; }
.cast-row span { grid-column: 2; color: var(--paper-2); }
.cast-row em { grid-column: 2; font-style: normal; font-size: calc(9.5px * var(--fs)); letter-spacing: .1em; text-transform: uppercase; color: #e3b45c; }
.cast-row.infocus { background: rgba(227,180,92,.06); }
.cast-ends { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); background: rgba(7,4,12,.35); display: flex; flex-direction: column; gap: 6px; }
.ce-row { display: grid; grid-template-columns: 14px 150px 1fr; gap: 8px; font-size: calc(12.5px * var(--fs)); line-height: 1.45; }
.ce-row i { font-style: normal; }
.ce-row b { color: var(--fc, var(--paper)); font-weight: 600; text-transform: lowercase; }
.ce-row span { color: var(--paper-2); }
@media (max-width: 700px) { .ce-row { grid-template-columns: 14px 1fr; } .ce-row span { grid-column: 2; } }
.people-tab { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.person { padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--fc, #a77bff) 40%, transparent); border-top: 3px solid var(--fc, var(--violet-hot)); background: linear-gradient(170deg, rgba(42,29,68,.45), rgba(7,4,12,.8)); display: flex; flex-direction: column; gap: 6px; font-size: calc(12px * var(--fs)); line-height: 1.5; color: var(--paper-2); }
.person h3 { margin: 0; font-family: var(--brand); font-size: calc(20px * var(--fs)); line-height: 1.05; text-transform: lowercase; color: var(--paper); }
.person .kicker { color: var(--fc, var(--violet-hot)); }
.person p { margin: 0; }
.person p i { font-style: normal; color: var(--muted); }
.person ol { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.person ol li { padding-left: 24px; position: relative; }
.person ol li::before { content: attr(data-g); position: absolute; left: 0; color: var(--muted); }
.person ol li.up::before { color: var(--cyan); }
.person ol li.down::before { color: var(--red-hot); }
.arc-beats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.arc-beat { padding: 10px 12px; border: 1px dashed rgba(255,179,107,.35); font-size: calc(12px * var(--fs)); line-height: 1.5; color: var(--paper-2); }
.arc-beat b { display: block; color: var(--paper); text-transform: lowercase; }
@media (max-width: 800px) { .arc-beats { grid-template-columns: 1fr; } }

/* the lighter dusk theme keeps the same layout with a lighter veil */
html[data-theme="dusk"] .chapter-card { background: radial-gradient(60% 60% at 50% 45%, rgba(40,30,62,.72), rgba(20,15,32,.88)); }
@media (prefers-reduced-motion: reduce) { .cc-num b, .cc-track li.now, .cc-focus, .cc-card h2, .cc-scene, .cc-stake, .cc-turn, .cc-hero, .voice { animation: none; } }

/* code-art scenes over windows (web/src/ui/scenes.js): paper figures, red for a threat, cyan for a signal, violet for people */
.scene { margin: 0 auto; display: flex; justify-content: center; }
.scene pre { margin: 0; font-family: var(--mono); font-size: calc(12px * var(--fs)); line-height: 1.18; letter-spacing: 0; color: rgba(244,244,239,.82); white-space: pre; text-shadow: 0 0 10px rgba(167,123,255,.18); }
.scene .s-r { color: var(--red-hot); text-shadow: 0 0 10px rgba(255,43,60,.55); }
.scene .s-c { color: var(--cyan); text-shadow: 0 0 10px rgba(31,182,209,.45); }
.scene .s-v { color: var(--violet-hot); text-shadow: 0 0 10px rgba(167,123,255,.45); }
.scene .s-tw { color: var(--paper); text-shadow: 0 0 8px rgba(244,244,239,.9), 0 0 16px rgba(167,123,255,.6); }
.dilemma .scene { margin: 6px auto 10px; padding: 10px 12px; border: 1px dashed rgba(167,123,255,.28); background: rgba(5,4,9,.45); }
.cc-card .cc-art { margin: 0; padding: 12px 0; border: 1px dashed rgba(167,123,255,.25); border-width: 1px 0; }
.cc-side .cc-art { flex: 1; display: grid; place-items: center; min-height: 120px; }
.cc-side .cc-ahead { margin-top: auto; }
.cc-card .cc-art pre { font-size: calc(11.5px * var(--fs)); }
.overlay .scene { margin: 0 0 10px; }
.overlay .scene pre { font-size: calc(11px * var(--fs)); }
.ending .scene-ending { margin: 0 0 10px; }
.rest-art.scene { opacity: 1; }
.rest-art.scene pre { font-size: calc(14px * var(--fs)); }
@media (max-width: 760px) { .scene pre { font-size: 9.5px; } }
.beat-card .beat-art { margin: 0 0 12px; padding: 8px 0; border-bottom: 1px dashed rgba(167,123,255,.25); }
.beat-card .beat-art pre { font-size: calc(11px * var(--fs)); }

/* the narrator: the lab log (director.js narrate) – a dry line with a day and an hour */
.cc-log, .n-log { margin: 0 22px 8px; padding: 6px 10px; font-size: calc(12.5px * var(--fs)); line-height: 1.5; color: var(--paper); background: rgba(31,182,209,.07); border-left: 2px solid var(--cyan); animation: cc-rise .5s var(--ease) .55s both; }
.cc-log time, .n-log time { display: block; margin-bottom: 2px; font-size: calc(10px * var(--fs)); letter-spacing: .1em; color: var(--cyan); text-transform: lowercase; }
.prologue-screen .n-log { margin: 0 0 10px; text-align: left; }
.lab-log { margin: 12px 0 6px; max-width: 720px; padding: 10px 16px 8px; border: 1px solid rgba(31,182,209,.25); background: rgba(7,4,12,.35); }
.lab-log .kicker { color: var(--cyan); }
.lab-log ol { list-style: none; margin: 6px 0 0; padding: 0; }
.lab-log li { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 4px 0; font-size: calc(13px * var(--fs)); line-height: 1.5; color: var(--paper-2); border-top: 1px dashed rgba(31,182,209,.15); animation: cc-rise .45s var(--ease) both; }
.lab-log li:first-child { border-top: 0; }
.lab-log li time { font-size: calc(11px * var(--fs)); letter-spacing: .06em; color: var(--cyan); white-space: nowrap; }
.lab-log li.at-end span { color: var(--paper); }
.lab-log li:nth-child(1) { animation-delay: .6s } .lab-log li:nth-child(2) { animation-delay: .75s } .lab-log li:nth-child(3) { animation-delay: .9s } .lab-log li:nth-child(4) { animation-delay: 1.05s }
.lab-log li:nth-child(5) { animation-delay: 1.2s } .lab-log li:nth-child(6) { animation-delay: 1.35s } .lab-log li:nth-child(7) { animation-delay: 1.5s } .lab-log li:nth-child(8) { animation-delay: 1.65s }
@media (max-width: 560px) { .lab-log li { grid-template-columns: 1fr; gap: 0; } }
@media (prefers-reduced-motion: reduce) { .cc-log, .n-log, .lab-log li { animation: none; } }

/* play/styles/loading.css */
/* Loading screens and windows (Алекс 14.10 12:50): a lit card on a textured field, easier to read.
   One texture for both: a dot grid, fine scan lines, paper grain and a violet glow behind the card. */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .95 0 0 0 0 .94 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex:
    var(--grain),
    radial-gradient(rgba(244,244,239,.10) 1px, transparent 1.3px) 0 0 / 16px 16px,
    repeating-linear-gradient(0deg, rgba(244,244,239,.03) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(135deg, rgba(167,123,255,.035) 0 1px, transparent 1px 9px);
}

/* ---------- windows: the sheet is a lit card ---------- */
.overlay {
  background:
    radial-gradient(52% 46% at 50% 46%, rgba(123,85,173,.30), transparent 72%),
    radial-gradient(40% 30% at 50% 100%, rgba(191,9,9,.16), transparent 70%),
    var(--tex),
    rgba(9,7,14,.82);
  backdrop-filter: blur(5px) saturate(.8);
}
/* four corner marks as on a card: background layers stay put while a long sheet scrolls */
.overlay > .sheet {
  --m: rgba(244,244,239,.42);
  background:
    linear-gradient(var(--m), var(--m)) left 7px top 7px / 12px 1px no-repeat, linear-gradient(var(--m), var(--m)) left 7px top 7px / 1px 12px no-repeat,
    linear-gradient(var(--m), var(--m)) right 7px top 7px / 12px 1px no-repeat, linear-gradient(var(--m), var(--m)) right 7px top 7px / 1px 12px no-repeat,
    linear-gradient(var(--m), var(--m)) left 7px bottom 7px / 12px 1px no-repeat, linear-gradient(var(--m), var(--m)) left 7px bottom 7px / 1px 12px no-repeat,
    linear-gradient(var(--m), var(--m)) right 7px bottom 7px / 12px 1px no-repeat, linear-gradient(var(--m), var(--m)) right 7px bottom 7px / 1px 12px no-repeat,
    linear-gradient(180deg, rgba(167,123,255,.10), transparent 120px),
    var(--grain),
    linear-gradient(180deg, #191424, #110d19);
  border: 1px solid rgba(167,123,255,.42);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.65),
    0 0 46px -8px rgba(167,123,255,.42),
    0 46px 110px -30px #000,
    inset 0 1px 0 rgba(244,244,239,.08);
  padding: 30px 32px 26px;
  animation: sheet-in .32s var(--ease);
}
/* a lit edge along the top */
.overlay > .sheet::before {
  content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px;
  background: linear-gradient(90deg, var(--red-hot), var(--violet-hot) 45%, var(--cyan));
  box-shadow: 0 0 14px rgba(167,123,255,.6);
}
.overlay > .sheet p { line-height: 1.62; color: var(--paper); }
.overlay > .sheet .muted, .overlay > .sheet p.muted { color: var(--paper-2); }
.overlay > .sheet h2 { font-family: var(--brand); letter-spacing: .01em; font-size: calc(22px * var(--fs)); }
/* a scene over a window sits in a framed art window, like the picture of a card */
.overlay > .sheet > .scene {
  margin: -6px -8px 16px; padding: 14px 10px; justify-content: center;
  background: radial-gradient(80% 90% at 50% 50%, rgba(123,85,173,.16), transparent 80%), rgba(5,4,9,.55);
  border: 1px solid rgba(167,123,255,.22);
  box-shadow: inset 0 0 30px rgba(0,0,0,.6);
}
.overlay > .sheet > .scene pre { font-size: calc(12.5px * var(--fs)); }
.abandon-what { padding: 10px 12px; border-left: 2px solid var(--violet-hot); background: rgba(167,123,255,.08); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .overlay > .sheet { animation: none; } }

/* ---------- the loading screen ---------- */
#loader {
  position: fixed; inset: 0; z-index: 650; display: grid; grid-template-rows: 1fr auto auto; place-items: center;
  background:
    radial-gradient(38% 52% at 33% 48%, rgba(123,85,173,.42), transparent 74%),
    radial-gradient(30% 40% at 33% 52%, rgba(191,9,9,.18), transparent 70%),
    var(--tex),
    linear-gradient(180deg, #1b1527, #0d0a13 80%);
  color: var(--paper);
  animation: ld-in .3s var(--ease);
  cursor: pointer;
}
#loader.out { opacity: 0; transition: opacity .26s var(--ease); }
#loader .ld-field { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0 46%, rgba(244,244,239,.05) 50%, transparent 54% 100%) 0 0 / 100% 220%; animation: ld-sweep 3.2s linear infinite; }
.ld-grid { position: relative; display: grid; grid-template-columns: auto minmax(340px, 620px); gap: clamp(28px, 5vw, 72px); align-items: center; padding: 24px; }
.ld-card { position: relative; display: grid; place-items: center; perspective: 900px; }
.ld-halo {
  position: absolute; width: 150%; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(167,123,255,.55), transparent 30%, rgba(255,43,60,.4), transparent 60%, rgba(31,182,209,.4), transparent 90%);
  filter: blur(26px); opacity: .75; animation: ld-spin 7s linear infinite;
}
.ld-card .card.ld-lit {
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 60px -6px color-mix(in srgb, var(--accent) 70%, transparent), 0 40px 70px -20px #000;
  animation: ld-float 3.6s ease-in-out infinite; pointer-events: none;
}
.ld-text .kicker { color: var(--violet-hot); letter-spacing: .18em; }
.ld-text h2 { font-family: var(--brand); font-size: clamp(30px, 3.6vw, 52px); line-height: 1.05; margin: 10px 0 8px; text-shadow: 2px 0 0 rgba(255,43,60,.45), -2px 0 0 rgba(31,182,209,.3); }
.ld-line { color: var(--paper-2); font-size: calc(12px * var(--fs)); margin: 0 0 18px; }
.ld-trait, .ld-log { position: relative; padding: 14px 16px 12px; margin-bottom: 12px; background: rgba(12,9,18,.78); border: 1px solid rgba(244,244,239,.14); }
.ld-trait { border-left: 2px solid var(--red-hot); }
.ld-log { border-left: 2px solid var(--cyan); }
.ld-trait > span, .ld-log > span { display: block; font-size: calc(10px * var(--fs)); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ld-trait p { margin: 0; font-size: calc(14px * var(--fs)); line-height: 1.55; }
.ld-log ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: calc(12px * var(--fs)); }
.ld-log li { display: grid; grid-template-columns: minmax(54px, 100px) minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; animation: ld-row .4s var(--ease) both; }
.ld-log li:nth-child(2) { animation-delay: .06s; } .ld-log li:nth-child(3) { animation-delay: .12s; } .ld-log li:nth-child(4) { animation-delay: .18s; } .ld-log li:nth-child(5) { animation-delay: .24s; }
.ld-log li b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-log li span { color: var(--paper-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-log li i { font-style: normal; color: var(--paper-2); }
.ld-log li.r-won i { color: var(--cyan); } .ld-log li.r-over i { color: var(--red-hot); } .ld-log li.r-live i { color: var(--violet-hot); }
.ld-log li time { color: var(--muted); }
.ld-log li.empty { display: block; color: var(--muted); }
.ld-scene { opacity: .55; margin: 0 0 8px; }
.ld-scene pre { font-size: calc(11px * var(--fs)); }
.ld-foot { display: flex; align-items: center; gap: 14px; padding: 0 0 26px; font-size: calc(11px * var(--fs)); letter-spacing: .14em; text-transform: lowercase; color: var(--paper-2); }
.ld-bar { position: relative; width: 180px; height: 2px; background: rgba(244,244,239,.14); overflow: hidden; }
.ld-bar b { position: absolute; inset: 0; background: linear-gradient(90deg, var(--red-hot), var(--violet-hot), var(--cyan)); transform-origin: left; animation: ld-fill 1.8s linear forwards; }
@keyframes ld-in { from { opacity: 0; } }
@keyframes ld-spin { to { transform: rotate(360deg); } }
@keyframes ld-float { 0%, 100% { transform: translateY(0) rotateY(-8deg) rotateX(3deg); } 50% { transform: translateY(-10px) rotateY(6deg) rotateX(-2deg); } }
@keyframes ld-sweep { from { background-position: 0 100%; } to { background-position: 0 -120%; } }
@keyframes ld-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ld-row { from { opacity: 0; transform: translateX(8px); } }
@media (max-height: 760px) { .ld-scene { display: none; } .ld-grid { padding: 12px; } }
@media (max-width: 860px) { .ld-grid { grid-template-columns: 1fr; justify-items: center; } .ld-card .card.ld-lit { --s: 1 !important; } }
@media (prefers-reduced-motion: reduce) { .ld-halo, .ld-card .card.ld-lit, #loader .ld-field { animation: none; } }

/* the first paint: the game's modules and dictionaries are on their way; main.js lifts it after the first screen */
#boot { position: fixed; inset: 0; z-index: 700; display: grid; place-content: center; justify-items: center; gap: 22px; background: radial-gradient(40% 40% at 50% 50%, rgba(123,85,173,.35), transparent 75%), var(--tex), #120e19; transition: opacity .3s var(--ease); animation: boot-gone .3s 6s forwards; }
#boot.out { opacity: 0; pointer-events: none; }
#boot b { font-family: var(--brand); font-size: 64px; color: var(--paper); letter-spacing: .04em; }
#boot b span { display: inline-block; color: var(--violet-hot); animation: boot-dot 1s ease-in-out infinite; }
#boot b span:nth-child(2) { animation-delay: .15s; } #boot b span:nth-child(3) { animation-delay: .3s; }
#boot i { width: 160px; height: 2px; background: linear-gradient(90deg, transparent, var(--red-hot), var(--violet-hot), var(--cyan), transparent) 0 0 / 200% 100%; animation: boot-run 1.2s linear infinite; }
@keyframes boot-dot { 50% { opacity: .25; transform: translateY(-4px); } }
@keyframes boot-run { to { background-position: -200% 0; } }
/* a script that never got this far must not leave the plate over the game */
@keyframes boot-gone { to { opacity: 0; visibility: hidden; } }

/* «что нового»: the release window, its changes land one by one */
.wn-overlay > .sheet.wide { width: min(860px, 94vw); }
.wn .wn-scene { margin: -6px -8px 18px; padding: 16px 10px; background: radial-gradient(80% 90% at 50% 50%, rgba(31,182,209,.12), transparent 80%), rgba(5,4,9,.55); border: 1px solid rgba(31,182,209,.25); box-shadow: inset 0 0 30px rgba(0,0,0,.6); }
.wn .wn-scene pre { font-size: calc(12.5px * var(--fs)); }
.wn .kicker { color: var(--cyan); }
.wn-title { font-size: clamp(26px, 3vw, 38px) !important; margin: 8px 0 18px !important; text-shadow: 2px 0 0 rgba(255,43,60,.4), -2px 0 0 rgba(31,182,209,.3); }
.wn-beats { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.wn-beats li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 10px 12px; background: rgba(12,9,18,.6); border: 1px solid rgba(244,244,239,.1); border-left: 2px solid var(--violet-hot); opacity: 0; animation: wn-beat .5s var(--ease) forwards; animation-delay: calc(.35s + var(--i) * .32s); }
.wn-beats li:nth-child(2) { border-left-color: var(--cyan); } .wn-beats li:nth-child(3) { border-left-color: var(--red-hot); } .wn-beats li:nth-child(4) { border-left-color: var(--st-retro); }
.wn-n { font-family: var(--brand); font-size: calc(20px * var(--fs)); color: var(--violet-hot); line-height: 1.2; }
.wn-beats p { margin: 0; font-size: calc(13px * var(--fs)); line-height: 1.58; color: var(--paper-2) !important; }
.wn-beats p b { color: var(--paper); font-weight: 500; }
.wn-prev { font-size: calc(11px * var(--fs)); line-height: 1.7; }
.wn-prev a { color: var(--violet-hot); }
.title-foot .wn-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted rgba(167,123,255,.6); text-underline-offset: 3px; }
.title-foot .wn-btn:hover { color: var(--paper); }
@keyframes wn-beat { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wn-beats li { animation: none; opacity: 1; } }

/* Request 58: the 0.5.9 lead card and texture, over the complete site shell. */
#loader { inset: 0; margin: 0; padding: 0; border: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; z-index: 2147483647; background: #080510; grid-template-rows: minmax(0, 1fr) auto; overflow: auto; cursor: default; }
#loader .ld-field { background: none; animation: none; opacity: .4; }
.ld-grid { box-sizing: border-box; width: min(1240px, calc(100% - 64px)); grid-template-columns: minmax(240px, .65fr) minmax(0, 1.35fr); gap: 64px; padding: 40px; margin: 30px auto; background: #080510c9; border: 1px solid #51475f; }
.ld-card .card.ld-lit { animation: none; transform: none; }
.ld-halo { animation: none; opacity: .35; background: radial-gradient(circle, #a77bff66, transparent 70%); }
.ld-text { position: relative; min-width: 0; }
.ld-text > :not(.ld-watermark) { position: relative; }
.ld-watermark { position: absolute; left: 0; top: 20%; font: 700 clamp(60px, 7vw, 108px)/1 var(--brand); opacity: .065; pointer-events: none; }
.ld-brand { font: 700 18px/1.2 var(--brand); color: var(--paper-2); margin-bottom: 16px; }
.ld-text h2 { font-size: clamp(32px, 3.5vw, 56px); text-shadow: none; }
.ld-story { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.6; color: #e8dfef; }
.ld-line { font-size: 14px; }
.ld-trait, .ld-log { padding: 16px 20px; background: #100c19; }
.ld-trait p { font-size: 16px; }
.ld-log ol { font-size: 14px; }
.ld-trait > span, .ld-log > span { font-size: 12px; }
.ld-foot { padding: 18px 32px 28px; font-size: 14px; }
@media (max-height: 760px) {
 .ld-grid { padding: 24px; margin: 18px auto; gap: 40px; }
 .ld-brand { margin-bottom: 8px; }
 .ld-story { font-size: 16px; line-height: 1.4; }
 .ld-trait { padding: 10px 14px; }
 .ld-log { max-height: 84px; overflow-y: auto; padding: 10px 14px; }
 .ld-trait p, .ld-log ol { font-size: 13px; }
}
@media (pointer: coarse) and (orientation: portrait) and (max-device-width: 700px) {
 .ld-grid { display: flex; flex-direction: column; width: calc(100% - 24px); margin: 12px auto; padding: 18px; gap: 16px; }
 .ld-card .card.ld-lit { --s: .8 !important; }
 .ld-card { min-height: 190px; }
 .ld-text h2 { font-size: 28px; }
 .ld-text .kicker, .ld-trait > span, .ld-log > span { font-size: 10px; }
 .ld-brand { font-size: 16px; margin-bottom: 8px; }
 .ld-watermark { font-size: 46px; }
 .ld-story { font-size: 15px; line-height: 1.4; margin: 10px 0; }
 .ld-line { font-size: 11px; margin-bottom: 10px; }
 .ld-trait, .ld-log { padding: 10px; margin-bottom: 8px; }
 .ld-trait p { font-size: 12px; line-height: 1.4; }
 .ld-log ol { font-size: 11px; }
 .ld-foot, .ld-foot .btn { font-size: 12px; }
 .ld-foot { padding: 8px 12px 12px; gap: 8px; }
 .ld-foot .btn { min-height: 42px; }
}

/* play/styles/artifacts.css */
/* The choice of a tool: three framed cards over the dimmed reward screen (web/src/ui/artifacts.js). */
.art-pick {
  position: fixed; inset: 0; z-index: 60;
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-content: center; gap: 18px;
  padding: 28px 20px 26px;
  background: radial-gradient(ellipse at 50% 46%, rgba(40, 16, 58, .78), rgba(6, 3, 10, .93) 70%);
  backdrop-filter: blur(3px);
  animation: ap-in .32s ease-out both;
}
.art-pick.out { animation: ap-out .26s ease-in both }
.art-pick .ap-field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .55 }
.ap-head { position: relative; text-align: center; max-width: 640px }
.ap-head h2 { margin: 4px 0 6px; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: .01em }
.ap-head .muted { margin: 0; font-size: 13px }
.ap-row { position: relative; display: flex; gap: clamp(14px, 2vw, 26px); align-items: stretch; justify-content: center; flex-wrap: wrap; align-self: center }

.ap-card {
  --rc: 31, 182, 209;
  position: relative; display: flex; flex-direction: column; gap: 10px;
  width: clamp(220px, 21vw, 268px); padding: 16px 16px 14px;
  background: linear-gradient(180deg, rgba(var(--rc), .10), rgba(12, 8, 18, .92) 38%);
  border: 1px solid rgba(var(--rc), .75);
  box-shadow: 0 0 0 3px rgba(8, 5, 14, .9), 0 0 0 4px rgba(var(--rc), .35), 0 18px 40px rgba(0, 0, 0, .5), inset 0 0 26px rgba(var(--rc), .10);
  color: #ece8f4; cursor: pointer; outline: none;
  animation: ap-card .46s cubic-bezier(.2, .9, .25, 1.15) both; animation-delay: calc(var(--i) * 90ms + 120ms);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ap-card.r-starter { --rc: 160, 156, 172 }
.ap-card.r-uncommon { --rc: 139, 92, 246 }
.ap-card.r-rare { --rc: 226, 38, 38 }
.ap-card.r-boss { --rc: 226, 38, 38; border-width: 2px; box-shadow: 0 0 0 3px rgba(8, 5, 14, .9), 0 0 0 5px rgba(226, 38, 38, .55), 0 0 0 7px rgba(8, 5, 14, .9), 0 0 0 8px rgba(226, 38, 38, .3), 0 18px 40px rgba(0, 0, 0, .5) }
.ap-card:hover, .ap-card:focus-within { transform: translateY(-6px) }
.ap-card:hover { box-shadow: 0 0 0 3px rgba(8, 5, 14, .9), 0 0 0 4px rgba(var(--rc), .7), 0 24px 50px rgba(0, 0, 0, .55), 0 0 34px rgba(var(--rc), .28), inset 0 0 30px rgba(var(--rc), .16) }

.ap-card header { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center }
.ap-card .ap-glyph { grid-row: span 2; font-size: 26px; line-height: 1; color: rgb(var(--rc)); text-shadow: 0 0 12px rgba(var(--rc), .6) }
.ap-card header b { font-size: 16px; line-height: 1.2 }
.ap-card header small { font-size: 10.5px; letter-spacing: .12em; text-transform: lowercase; color: rgba(var(--rc), .95) }

.ap-obj {
  margin: 0; padding: 12px 8px; min-height: 92px; display: grid; place-items: center;
  font: 14px/1.2 "JetBrains Mono", monospace; white-space: pre; color: rgb(var(--rc));
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px), rgba(4, 2, 8, .6);
  border: 1px dashed rgba(var(--rc), .3);
  text-shadow: 0 0 8px rgba(var(--rc), .55);
  overflow: hidden;
}
.ap-card:hover .ap-obj { animation: ap-glitch 1.1s steps(2, end) infinite }

.ap-fx { display: flex; flex-wrap: wrap; gap: 6px }
.ap-cost { margin: 0; padding: 6px 8px; font-size: 12.5px; line-height: 1.35; color: #ffd6d6; background: rgba(191, 9, 9, .16); border-left: 2px solid #e22626 }
.ap-cost b { color: #ff7a7a; margin-right: 4px }
.ap-flavor { margin: 0; font-size: 12px; line-height: 1.4; color: #a9a2b8; font-style: italic }
.ap-help { display: none; font-size: 11.5px; color: #b8b1c6 } /* the long reading lives in the codex and the HUD; the card stays light */
.art-pick.one .ap-help { display: block }
.ap-take { margin-top: auto; width: 100%; justify-content: center; border-color: rgba(var(--rc), .8) }
.ap-take kbd, .ap-skip kbd { margin-left: 6px; padding: 0 5px; border: 1px solid currentColor; border-radius: 3px; font-size: 11px; opacity: .8 }
.ap-skip { position: relative }

.art-pick.chosen .ap-card:not(.taken) { opacity: .25; transform: scale(.94); transition: opacity .3s, transform .3s }
.ap-card.taken { transform: translateY(-14px) scale(1.04); box-shadow: 0 0 0 3px rgba(8, 5, 14, .9), 0 0 0 4px rgba(var(--rc), 1), 0 0 60px rgba(var(--rc), .55) }

@keyframes ap-in { from { opacity: 0 } }
@keyframes ap-out { to { opacity: 0 } }
@keyframes ap-card { from { opacity: 0; transform: translateY(38px) rotateX(18deg) scale(.92) } }
@keyframes ap-glitch {
  0% { text-shadow: 0 0 8px rgba(var(--rc), .55); transform: none }
  50% { text-shadow: -2px 0 rgba(31, 182, 209, .7), 2px 0 rgba(226, 38, 38, .7); transform: translateX(1px) }
}
@media (prefers-reduced-motion: reduce) {
  .art-pick, .ap-card, .ap-card:hover .ap-obj { animation: none }
  .ap-card:hover, .ap-card:focus-within { transform: none }
}
@media (max-width: 760px) {
  .art-pick { align-content: start; overflow-y: auto; padding-top: 18px }
  .ap-row { flex-direction: column; align-items: center }
  .ap-card { width: min(100%, 340px) }
  .ap-obj { min-height: 70px; font-size: 12px }
}

.find-screen { position: absolute; inset: 64px 0 0; overflow: auto; padding: 24px 28px 40px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.find-screen > header { text-align: center; max-width: 700px; }
.find-screen h2 { margin: 4px 0 12px; font-size: calc(32px * var(--fs)); }
.find-screen header p { color: var(--paper-2); }
.find-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; }
.find-actions { display: flex; flex-direction: column; justify-content: center; gap: 16px; width: 270px; }
.find-actions .btn { white-space: normal; }
.find-actions kbd { margin-left: 10px; }
body:has(.overlay, .chapter-card, .cutscene, .art-pick) #toast { visibility: hidden; }

/* play/styles/cutscene.css */
/* Live procedural code scenes, responsive to the pointer and current run. */
.cutscene { position: fixed; inset: 0; z-index: 660; background: #050308; overflow: hidden; cursor: crosshair; animation: cs-in .45s ease-out both; --mx: 0; --my: 0; --px: 50vw; --py: 50vh }
.cutscene .cs-stage { position: absolute; inset: 0; }
.cutscene .cs-bars i { position: absolute; left: 0; right: 0; height: 7vh; background: #050308; z-index: 3; animation: cs-bars .9s cubic-bezier(.2, .8, .2, 1) both }
.cutscene .cs-bars i:first-child { top: 0; transform-origin: 50% 0 }
.cutscene .cs-bars i:last-child { bottom: 0; transform-origin: 50% 100% }
.cs-log { position: absolute; z-index: 4; left: clamp(20px, 6vw, 96px); top: calc(7vh + clamp(14px, 3vh, 34px)); margin: 0; padding: 0; list-style: none; font-size: clamp(12px, 1vw, 15px); line-height: 1.75; color: #9fe7f3; text-shadow: 0 0 10px rgba(31, 182, 209, .55); transform: translate3d(calc(var(--mx) * 6px), calc(var(--my) * 4px), 0) }
.cs-log li { opacity: 0; animation: cs-show .2s var(--d) both }
.cs-log li::before { content: '> '; color: #8b5cf6 }
.cs-log li span { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom; animation: cs-typeline calc(var(--n) * 28ms) var(--d) steps(var(--n), end) both }
.cutscene.cs-boss .cs-log { color: #ffb4a0; text-shadow: 0 0 10px rgba(226, 38, 38, .6) }
.cutscene.out { animation: cs-out .38s ease-in both }
.cutscene .cs-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 3, 8, .55) 0, transparent 22%, transparent 52%, rgba(5, 3, 8, .88) 100%) }
.cs-cap { position: absolute; z-index: 4; left: clamp(20px, 6vw, 96px); right: clamp(20px, 6vw, 96px); bottom: calc(7vh + clamp(36px, 7vh, 90px)); max-width: 880px; color: #f2eef8; transform: translate3d(calc(var(--mx) * 10px), calc(var(--my) * 7px), 0) }
.cutscene.held .cs-title { animation: cs-pulse 1.3s ease-in-out both }
.cs-cap .kicker { color: #8fdcea; letter-spacing: .16em; animation: cs-type .6s .35s steps(24, end) both }
.cs-title { margin: 8px 0 10px; font-size: clamp(30px, 4.4vw, 62px); line-height: 1.02; letter-spacing: -.01em; text-shadow: 0 0 24px rgba(191, 9, 9, .45); animation: cs-rise .7s .55s cubic-bezier(.2, .8, .2, 1) both; position: relative }
.cs-title::after { content: none }
.cs-line { margin: 0; max-width: 62ch; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.5; color: #d9d2e6; animation: cs-rise .7s 1s ease-out both }
.cs-bar { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .08) }
.cs-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7b55ad, #bf0909); transform: scaleX(0); transform-origin: 0 50% }
.cs-skip { position: absolute; z-index: 6; right: clamp(14px, 3vw, 40px); bottom: calc(7vh + 16px); font: inherit; font-size: 15px; letter-spacing: .06em; color: rgba(242, 238, 248, .7); background: rgba(5, 3, 8, .55); border: 1px solid rgba(242, 238, 248, .22); padding: 9px 14px; cursor: pointer; animation: cs-in .4s 1.2s both; transition: color .2s, border-color .2s, background .2s }
.cs-skip:hover, .cs-skip:focus-visible { color: #fff; border-color: #8b5cf6; background: rgba(123, 85, 173, .3); outline: none }
.cs-skip kbd { font: inherit; margin-left: 6px; padding: 0 5px; border: 1px solid currentColor; border-radius: 3px; opacity: .8 }
.cutscene.held .cs-skip { color: #fff; border-color: #8b5cf6; animation: cs-pulse 1.3s ease-in-out both }
.cutscene.cs-boss .cs-title { text-shadow: 0 0 28px rgba(226, 38, 38, .7) }
@keyframes cs-in { from { opacity: 0 } }
@keyframes cs-show { from { opacity: 0 } to { opacity: 1 } }
@keyframes cs-bars { from { transform: scaleY(2.2) } }
@keyframes cs-typeline { from { max-width: 0 } to { max-width: calc(var(--n) * 1ch) } }
@keyframes cs-pulse { 50% { filter: brightness(1.35) } }
@keyframes cs-out { to { opacity: 0; transform: scale(1.03) } }
@keyframes cs-type { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } }
@keyframes cs-rise { from { opacity: 0; transform: translateY(18px); filter: blur(4px) } }
@keyframes cs-glitch { 0%, 92% { opacity: 0; transform: none } 93% { opacity: .8; transform: translate(3px, -1px) } 96% { opacity: .6; transform: translate(-2px, 1px) } }
@media (prefers-reduced-motion: reduce) { .cutscene, .cs-cap *, .cs-title::after, .cs-log li, .cs-log li span, .cs-bars i, .cs-skip { animation: none !important } .cs-log li { opacity: 1 } }
@media (max-width: 700px) { .cs-log { font-size: 11px; right: 16px } .cs-log li span { white-space: normal } }

.proc-stage { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.proc-stage canvas { display: block; width: 100%; height: 100%; }
.cs-bar i { animation: cs-progress var(--length, 8600ms) linear both; }
@keyframes cs-progress { to { transform: scaleX(1); } }
.cc-visual, .abandon-scene { position: relative; isolation: isolate; overflow: hidden; min-height: 210px; border: 1px solid rgba(167,123,255,.25); background: #070510; }
.cc-visual .scene, .abandon-scene .scene { position: relative; z-index: 1; margin: 0; padding: 16px 8px; background: linear-gradient(180deg, transparent, rgba(7,5,16,.75)); }
.cc-visual .cc-art { margin: 0; min-height: 210px; display: grid; place-items: end center; }
.abandon-scene { min-height: 230px; margin-bottom: 18px; }
.abandon-scene .scene { min-height: 230px; display: grid; place-items: end center; }
.screen-pass { position: fixed; inset: 60px 0 0; z-index: 80; overflow: hidden; pointer-events: none; animation: screen-pass .6s both; }
.screen-pass i { position: absolute; top: 0; bottom: 0; width: 42%; background: linear-gradient(110deg, rgba(38,24,60,.8), rgba(9,5,18,.96)); transform: skewX(-12deg); animation: pass-pane .6s cubic-bezier(.2,.8,.3,1) both; }
.screen-pass i:nth-child(1) { left: -6%; }
.screen-pass i:nth-child(2) { left: 29%; animation-delay: .045s; }
.screen-pass i:nth-child(3) { left: 64%; animation-delay: .09s; }
.screen-pass svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(167,123,255,.7); stroke-width: .15; stroke-dasharray: 200; animation: pass-line .55s both; }
@keyframes pass-pane { from { translate: 0 -110%; } 35% { translate: 0 0; } to { translate: 0 110%; } }
@keyframes pass-line { from { stroke-dashoffset: 200; opacity: 0; } 40% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 0; } }
@keyframes screen-pass { 95% { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .screen-pass { display: none; } .cs-bar i { animation: none; transform: scaleX(1); } }

/* Request 50: a composed story scene, readable captions and calm light instead of glitch. */
.cs-cap { max-width: 980px; padding: 24px 28px; border-left: 3px solid #a77bff; background: linear-gradient(90deg, #080510ee, #08051077); }
.cs-log { font-size: clamp(14px, 1.1vw, 18px); }
.cs-log li span { animation: none; white-space: normal; }
.cs-title { font-family: var(--brand); text-shadow: none; }
@media (pointer: coarse) and (orientation: portrait) and (max-device-width: 700px) and (min-width: 761px) {
  .cs-cap { left: 48px; right: 48px; bottom: 400px; padding: 40px; }
  .cs-title { font-size: 94px; }
  .cs-line { font-size: 50px; }
  .cs-cap .kicker, .cs-log { font-size: 36px; }
  .cs-skip { font-size: 42px; padding: 22px 30px; right: 48px; bottom: 200px; }
}

/* Request 54.1: a launch opens vertically, a chapter crosses the landscape, a fight pulses outward. */
.screen-pass.pass-travel { background: #0a061222; animation: travel-clear .28s both; }
.screen-pass.pass-season { animation-duration: .9s; }
.pass-season i { background: linear-gradient(0deg, #36224b99, #61d8e433); }
.pass-season svg { stroke: #9edce6; animation-duration: .8s; }
.screen-pass.pass-chapter { animation-duration: .85s; }
.pass-chapter i { top: 0; bottom: 0; left: 0 !important; width: 50%; background: linear-gradient(90deg, #3a284b99, #0c0913); animation: chapter-shutter .75s both; }
.pass-chapter i:nth-child(2) { left: 50% !important; animation-name: chapter-shutter-right; animation-delay: 0s; }
.pass-chapter svg { stroke: #d6b3f4; stroke-dasharray: 180; animation: chapter-route .8s both; }
.screen-pass.pass-fight { animation: fight-clear .8s both; }
.pass-fight svg { animation: none; stroke: #fa6978; stroke-width: .3; stroke-dasharray: none; }
.pass-fight circle { transform-origin: 50% 50%; animation: fight-iris .75s both; }
.pass-fight circle:nth-child(2) { animation-delay: .08s; stroke: #e8d9f6; }
.pass-fight path { opacity: .15; }
.chapter-card .cc-card { animation: chapter-card-open .65s var(--ease) both; }
.beat .beat-card { animation: fight-brief .5s var(--ease) both; }
@keyframes travel-clear { to { opacity: 0; } }
@keyframes chapter-shutter { from { transform: translateX(0); } to { transform: translateX(-105%); } }
@keyframes chapter-route { from { opacity: .8; stroke-dashoffset: 180; } to { opacity: 0; stroke-dashoffset: 0; } }
@keyframes fight-iris { from { transform: scale(.15); opacity: .8; } to { transform: scale(5); opacity: 0; } }
@keyframes fight-clear { 80% { opacity: .8; } to { opacity: 0; } }
@keyframes chapter-card-open { from { opacity: 0; clip-path: inset(0 95% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes fight-brief { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .chapter-card .cc-card, .beat .beat-card { animation: none; } }

@keyframes chapter-shutter-right { from { transform: translateX(0); } to { transform: translateX(105%); } }
.chapter-card .cc-visual > .glitch-scene { opacity: .32; mix-blend-mode: screen; }

/* play/styles/field.css */
/* Requests 57/58: the soft 0.5.6 field behind dark pieces, without woven or diagonal texture. */
body:has(> .glyph-field)::before { content: none; }
html[data-theme="dusk"] body:has(> .glyph-field) { background: radial-gradient(120% 100% at 50% 35%, #655673 0%, #51445f 58%, #392e49 100%) fixed; }
html[data-theme="dusk"] { --muted: #b4abc1; --paper-2: #ded9e5; }
.glyph-field { animation: none; opacity: .85; }
html[data-theme="dusk"] .pad-label { background: rgba(12,8,20,.64); box-shadow: 0 0 14px 7px rgba(12,8,20,.18); }
.process-code { position: absolute; left: 24px; bottom: 100px; margin: 0; font: 12px/2 var(--mono); color: #bba1db; opacity: .36; pointer-events: none; white-space: pre-wrap; max-width: 360px; }
.process-stream path { animation: process-dash 2.8s linear infinite; opacity: .65; }
.process-stream.phase-1 path { animation-duration: 2.2s; }
.process-stream.phase-2 path { animation-duration: 1.8s; opacity: .85; }
.process-stream text { font: 14px var(--mono); opacity: .2; animation: process-glyph 2.8s var(--delay) linear infinite; }
@keyframes process-dash { to { stroke-dashoffset: -104; } }
@keyframes process-glyph { 35%, 60% { opacity: .8; } }
html[data-effects="off"] *, html[data-effects="off"] *::before, html[data-effects="off"] *::after { animation: none !important; transition: none !important; }
html[data-effects="off"] .process-stream, html[data-effects="off"] #fx-layer { display: none; }
@media (prefers-reduced-motion: reduce) { .process-stream path, .process-stream text { animation: none; } }
.ghost-slot { background: #100b19b8; backdrop-filter: none; }
.core-read::before { content: none; }
/* Request 52: threat signals hover over the field, without a red card container. */
.card.crisis-actor { background: radial-gradient(ellipse at 43% 38%, #ed163999, #8e102b33 60%, transparent 80%); box-shadow: none; }
.card.crisis-actor .art pre { filter: drop-shadow(3px 0 0 #ff28284a); }
.card.crisis-actor:hover .art pre { animation: threat-fracture 1.8s steps(1) infinite; }
.card.crisis-actor[data-urgent="true"] .threat-mark { color: #ff7b8c; }
@keyframes threat-fracture { 0%, 89%, 100% { transform: translateX(-4px); opacity: .6; } 90%, 93% { transform: translateX(1px); opacity: .9; } 94% { transform: translateX(-7px); } }
@media (prefers-reduced-motion:reduce) { .card.crisis-actor:hover .art pre { animation: none; } }

/* play/styles/live-story.css */
.season-pick { margin: 10px 0; }
.season-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-height: 190px; overflow-y: auto; padding: 3px; }
.season-card { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; min-width: 0; text-align: left; font: inherit; font-size: 11px; color: var(--paper); background: #12101b; border: 1px solid #55505f; }
.season-card b { font-size: 14px; }
.season-card small { opacity: .7; }
.season-card span { line-height: 1.4; }
.season-card:disabled { opacity: .6; }
.season-card.on { border-color: #1fb6d1; box-shadow: inset 3px 0 #1fb6d1; }
.season-card:focus-visible { outline: 2px solid #a77bff; outline-offset: 1px; }
.season-lock { color: #cab7dc; }
.season-pick > .toggle { display: inline-flex; padding: 7px 3px; font-size: 11px; }
.chronicle-panel { display: inline-block; vertical-align: top; margin-left: 20px; font-size: 11px; max-width: 50%; max-height: 100px; overflow: auto; }
.story-callbacks { list-style: none; padding: 0; font-size: 11px; line-height: 1.5; color: #c5b1e4; }
.live-beat { border-left: 2px solid #a77bff; padding: 0 10px; font-size: 12px; line-height: 1.45; }
.live-beat p { margin: 6px 0; }
.prologue-screen .dilemma { max-height: 100%; overflow-y: auto; }
.obligations { margin: 12px 0; font-size: 11px; }
.quest-panel article { border-top: 1px solid #51495c; padding: 10px 0; }
.quest-panel p { line-height: 1.5; }
.quest-panel .pchips { margin: 8px 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.quest-panel .btn { font-size: 10px; margin-top: 5px; padding: 7px; }
.final-choice { border: 1px solid #a77bff; padding: 10px; margin-top: 10px; }
.final-choice .btn { display: flex; flex-direction: column; gap: 8px; white-space: normal; width: 100%; text-align: left; margin-top: 8px; }
.final-choice .pchips { display: flex; flex-wrap: wrap; gap: 4px; }
.next-question { color: #c5b1e4; }
@media (max-height: 760px) { .season-cards { max-height: 145px; } }
.hero-screen > .season-pick { width: min(1220px, 100%); flex-shrink: 0; }
.hero-screen > .title-foot { position: sticky; bottom: 0; z-index: 3; flex-shrink: 0; padding: 12px 16px; background: #100c19; border: 1px solid #51495c; box-shadow: 0 -12px 25px #100c19aa; }
.hero-screen:has(.season-pick) { padding-top: 20px; gap: 12px; }
.agent-entry p { font-size: 12px; line-height: 1.6; margin: 10px 0; }
.agent-entry .agent-access { border-left: 2px solid #1fb6d1; padding-left: 10px; }
.agent-entry pre { font: 11px/1.6 var(--mono); background: #050408; padding: 12px; border: 1px solid #51495c; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; margin: 10px 0; }
.agent-entry .agent-address { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; font-size: 12px; }
.agent-address input { width: 100%; min-width: 0; padding: 9px; background: #050408; color: var(--paper); border: 1px solid #51495c; font: inherit; }
.agent-entry details { margin-top: 18px; font-size: 12px; }
.agent-entry .agent-error { color: #ff8995; }
.agent-entry a[aria-disabled="true"] { opacity: .5; cursor: default; }
.odds { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 10px; font-size: 11px; line-height: 1.5; border-left: 2px solid #a77bff; background: #100c19bb; }
.odds small { color: #c5b1e4; font-size: 10px; }
.no-odds { color: var(--muted); border-left-color: #51495c; }
.start-odds { width: min(1220px, 100%); flex-shrink: 0; }
.map-side .odds { flex-direction: column; }
.map-node .node-odds { position: absolute; right: calc(100% + 8px); top: 8px; font: 10px/1.4 var(--mono); white-space: nowrap; background: #100c19; padding: 2px 5px; border: 1px solid #51495c; color: #d0b9f4; pointer-events: none; }
.codex-crisis-entry { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.codex-crisis-entry .odds { width: 160px; flex-direction: column; }
.codex-crisis-entry > .card.pickable:hover { transform: translateY(-8px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.map-node.t-incident { --tc: 255,179,107; }
.map-node.t-find { --tc: 140,226,180; }
.map-legend { gap: 7px 10px; }
/* Leave room for labels under the first row, before the legend. */
.map-plane { margin-bottom: 24px; }
@media (min-width: 950px) and (max-width: 1100px) {
  .map-screen { grid-template-columns: minmax(0, 1fr) 250px; grid-template-rows: minmax(0, 1fr); gap: 14px; }
  .map-side { max-height: none; }
  .map-node span { max-width: 110px; }
}
.band.before-turn .bl { transform: translateY(calc(-50% - 9px)); }
.band.before-turn .beat-tag { bottom: auto; top: 3px; }

/* Request 50, OB-085: the task and its result are readable before client settings. */
.agent-dialog .sheet { width: min(860px, calc(100vw - 48px)); padding: 32px; }
.agent-entry p, .agent-entry details, .agent-entry .agent-address { font-size: calc(16px * var(--fs) / 1.12); }
.agent-dialog .agent-entry h2 { font-size: calc(32px * var(--fs) / 1.12); }
.agent-entry h3 { font-size: calc(18px * var(--fs) / 1.12); }
.agent-entry .btn { display: inline-flex; margin: 8px 10px 8px 0; }
.agent-entry .agent-prompt { padding: 20px; background: #100b1b; border-left: 3px solid #a77bff; user-select: text; overflow-wrap: anywhere; }
.agent-steps { padding-left: 24px; margin: 24px 0; }
.agent-steps li { padding: 8px 0 8px 8px; font-size: calc(16px * var(--fs) / 1.12); line-height: 1.6; }
.agent-steps b, .agent-steps span { display: block; }
.agent-steps b { color: #cfb5f4; }
.agent-team { border-top: 1px solid #51495c; padding-top: 20px; }
.agent-team summary { cursor: pointer; }
@media (pointer: coarse) and (orientation: portrait) and (max-device-width: 700px) {
  .agent-dialog .sheet { width: calc(100vw - 72px); padding: 48px; }
  .agent-entry p, .agent-entry details, .agent-entry .agent-address, .agent-steps li { font-size: calc(48px * var(--fs) / 1.12); }
  .agent-dialog .agent-entry h2 { font-size: calc(76px * var(--fs) / 1.12); }
  .agent-entry h3 { font-size: calc(56px * var(--fs) / 1.12); }
  .agent-entry .btn, .agent-entry pre { font-size: calc(44px * var(--fs) / 1.12); }
  .agent-steps { padding-left: 56px; }
  .agent-steps li { padding: 18px 0 18px 12px; }
  .agent-dialog .close { font-size: 70px; width: 90px; height: 90px; }
}

/* play/styles/visual-057.css */
/* Request 50. Story first: a large scene, a clear account, then two deliberate choices. */
.prologue-screen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; gap: 18px; padding: 24px max(24px, calc((100vw - 1280px) / 2)); align-items: stretch; }
.prologue-screen .dilemma { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: minmax(250px, .75fr) minmax(0, 1.4fr); width: 100%; max-width: none; padding: 0; overflow: hidden; cursor: default; border-color: #746884; background: #100b19; box-shadow: 0 20px 70px #05030888; }
.story-visual { position: relative; isolation: isolate; min-height: 260px; overflow: hidden; display: grid; place-items: center; background: #090612; border-right: 1px solid #746884; }
.story-visual > .proc-stage { position: absolute; inset: 0; opacity: .6; z-index: -1; }
.prologue-screen .story-visual canvas[data-portrait] { width: min(86%, 350px) !important; height: auto !important; margin: 0; border: 0; background: transparent; box-shadow: 0 0 60px #a77bff22; }
.story-visual .scene { margin: 0; padding: 20px; border: 0; max-width: 100%; overflow: hidden; background: transparent; }
.story-visual .scene pre { font-size: calc(10px * var(--fs) / 1.12); }
.story-copy { padding: 26px 30px; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
.prologue-screen .story-copy h2 { font-family: var(--brand); font-size: clamp(28px, 3vw, 42px); line-height: 1.05; margin: 0; }
.prologue-screen .story-copy .story-lead { font-size: calc(clamp(16px, 1.35vw, 21px) * var(--fs) / 1.12); line-height: 1.55; color: #f4f0f8; max-width: 62ch; }
.prologue-screen .story-copy .n-log { margin: 0; padding: 12px 16px; font-size: calc(16px * var(--fs) / 1.12); line-height: 1.55; color: #e6e1ee; border-left-width: 3px; }
.prologue-screen .story-copy .n-log .nl-stamp { font-size: calc(12px * var(--fs) / 1.12); }
.prologue-screen .story-copy .legacy, .prologue-screen .story-copy blockquote { font-size: calc(16px * var(--fs) / 1.12); line-height: 1.5; margin: 0; }
.story-context { font-size: calc(15px * var(--fs) / 1.12); line-height: 1.5; color: #c8bdd8; }
.story-context summary { cursor: pointer; }
.story-context .live-beat { font-size: calc(16px * var(--fs) / 1.12); margin-top: 12px; }
.story-context .story-callbacks { font-size: calc(15px * var(--fs) / 1.12); }
.prologue-screen .choice-side { grid-row: 2; max-width: none; justify-self: stretch; filter: none; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 24px; min-height: 130px; max-height: 190px; transform: none; clip-path: none; text-align: left; border: 1px solid #766a86; box-shadow: inset 4px 0 #a77bff; background: #130e20; overflow-y: auto; }
.prologue-screen .choice-side.left { grid-column: 1; }
.prologue-screen .choice-side.right { grid-column: 2; box-shadow: inset 4px 0 #1fb6d1; }
.prologue-screen .choice-side b { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; }
.prologue-screen .choice-side .arrow { float: right; position: absolute; right: 18px; top: 16px; font-size: calc(22px * var(--fs) / 1.12); opacity: .7; }
.prologue-screen .choice-side .pchips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; margin: 0; }
.prologue-screen .choice-side .pchip { font-size: calc(16px * var(--fs) / 1.12); padding: 6px 10px; }
.prologue-screen .choice-side .pchip b { font-size: calc(22px * var(--fs) / 1.12); }
.prologue-screen .choice-side .after { font-size: calc(15px * var(--fs) / 1.12); line-height: 1.4; }
.prologue-screen .swipe-hint { font-size: calc(13px * var(--fs) / 1.12); line-height: 1.5; padding-top: 6px; }
.cc-card { width: min(1240px, calc(100vw - 48px)); grid-template-columns: minmax(300px, .7fr) minmax(0, 1.3fr); max-height: calc(100vh - 48px); overflow: auto; }
.cc-main { padding: 30px; gap: 18px; }
.cc-scene { font-size: calc(18px * var(--fs) / 1.12); line-height: 1.6; }
.cc-main .n-log, .cc-stake, .cc-focus, .cc-hero { font-size: calc(16px * var(--fs) / 1.12); line-height: 1.5; }
.cc-main .story-callbacks { font-size: calc(15px * var(--fs) / 1.12); }
.cc-main .kicker, .cc-main .nl-stamp, .cc-stake i, .cc-focus i { font-size: calc(12px * var(--fs) / 1.12); }
.cc-visual { min-height: 240px; }
@media (max-height: 760px) {
  .prologue-screen { padding: 14px 22px; gap: 12px; }
  .story-copy { padding: 20px 24px; gap: 12px; }
  .prologue-screen .choice-side { min-height: 112px; padding: 14px 20px; }
}

.prologue-screen .choice-side::before, .prologue-screen .choice-side::after { content: none; }
.prologue-screen .choice-side:hover { transform: translateY(-2px); border-color: var(--paper); }
@media (max-width: 700px) {
  .prologue-screen { display: flex; flex-direction: column; overflow-y: auto; padding: 12px; }
  .prologue-screen .dilemma { order: 0; display: flex; flex-direction: column; flex-shrink: 0; max-height: none; }
  .prologue-screen .story-visual { min-height: 200px; height: 200px; border-right: 0; border-bottom: 1px solid #746884; }
  .prologue-screen .story-visual canvas[data-portrait] { width: 200px !important; }
  .prologue-screen .story-copy { padding: 20px; overflow: visible; }
  .prologue-screen .choice-side { order: 1; flex-shrink: 0; max-height: none; width: 100%; }
  .cc-card { grid-template-columns: 1fr; width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .cc-main { padding: 20px; }
}
.prologue-screen .story-copy .faction { font-size: calc(14px * var(--fs) / 1.12); }
.prologue-screen .turn-stake { font-size: calc(16px * var(--fs) / 1.12); line-height: 1.5; }
/* fit.js keeps a 1280 px game board on touch phones; story pages use that space vertically. */
@media (pointer: coarse) and (orientation: portrait) and (max-device-width: 700px) {
  .prologue-screen { display: flex; flex-direction: column; overflow-y: auto; padding: 32px; gap: 28px; }
  .prologue-screen .dilemma { order: 0; display: flex; flex-direction: column; flex-shrink: 0; max-height: none; }
  .prologue-screen .story-visual { min-height: 480px; height: 480px; border-right: 0; border-bottom: 1px solid #746884; }
  .prologue-screen .story-visual canvas[data-portrait] { width: 420px !important; }
  .prologue-screen .story-copy { padding: 48px; gap: 32px; overflow: visible; }
  .prologue-screen .story-copy h2 { font-size: calc(90px * var(--fs) / 1.12); }
  .prologue-screen .story-copy .story-lead, .prologue-screen .story-copy .n-log, .prologue-screen .story-context, .prologue-screen .turn-stake { font-size: calc(50px * var(--fs) / 1.12); }
  .prologue-screen .story-copy .faction, .prologue-screen .story-copy .nl-stamp, .prologue-screen .swipe-hint { font-size: calc(34px * var(--fs) / 1.12); }
  .prologue-screen .story-context .live-beat, .prologue-screen .story-context blockquote { font-size: calc(46px * var(--fs) / 1.12); }
  .prologue-screen .choice-side { order: 1; flex-shrink: 0; max-height: none; min-height: 300px; width: 100%; padding: 40px; gap: 26px; }
  .prologue-screen .choice-side b { font-size: calc(66px * var(--fs) / 1.12); }
  .prologue-screen .choice-side .pchip { font-size: calc(44px * var(--fs) / 1.12); padding: 14px 20px; }
  .prologue-screen .choice-side .pchip b { font-size: calc(54px * var(--fs) / 1.12); }
  .prologue-screen .choice-side .after { font-size: calc(42px * var(--fs) / 1.12); }
  .prologue-screen .choice-side .arrow { font-size: calc(48px * var(--fs) / 1.12); }
}
@media (pointer: coarse) and (orientation: portrait) and (max-device-width: 700px) {
  .cc-card { display: block; width: calc(100vw - 64px); }
  .cc-side, .cc-main { padding: 48px; gap: 32px; }
  .cc-side { border-right: 0; border-bottom: 1px solid #746884; }
  .cc-num b { font-size: calc(120px * var(--fs) / 1.12); }
  .cc-card h2 { font-size: calc(86px * var(--fs) / 1.12); }
  .cc-scene, .cc-main .n-log, .cc-stake, .cc-focus, .cc-hero, .cc-turn p { font-size: calc(50px * var(--fs) / 1.12); }
  .cc-main .kicker, .cc-main .nl-stamp, .cc-stake i, .cc-focus i, .cc-hero span, .cc-ahead, .cc-ahead span, .cc-chap, .cc-beats, .cc-foot { font-size: calc(34px * var(--fs) / 1.12); }
  .cc-foot .btn { font-size: calc(44px * var(--fs) / 1.12); padding: 20px; }
}

/* play/styles/map-057.css */
/* Request 50. A readable itinerary, with chapter names kept clear of the roads. */
.map-board { perspective: none; gap: 18px; }
.map-plane { transform: none; min-width: 900px; min-height: 720px; margin-bottom: 45px; background: #0c0913; border-color: #51475f; box-shadow: 0 18px 50px #0006; }
.map-board { overflow: auto; padding: 4px; }
.map-screen { grid-template-columns: minmax(0, 1fr) 300px; }
.band { border-top-color: #55486055; }
.band .bl { left: 18px; width: 200px; max-width: 200px; gap: 3px; letter-spacing: 0; }
.band .bl i { font-size: calc(12px * var(--fs) / 1.12); color: #b3a3c4; }
.band .bl b { font-size: calc(16px * var(--fs) / 1.12); line-height: 1.2; color: #e2d7ef; }
.band .bl small { font-size: calc(12px * var(--fs) / 1.12); line-height: 1.25; color: #beb0ce; opacity: 1; }
.band.done { opacity: .8; }
.band.fog { opacity: .82; filter: none; }
.band.now { box-shadow: inset 4px 0 #a77bff; background: linear-gradient(90deg, #a77bff22, transparent); }
.map-node { width: 46px; height: 46px; }
.map-node b { font-size: calc(23px * var(--fs) / 1.12); }
.map-node span, .map-node.near span { top: 47px; font-size: calc(14px * var(--fs) / 1.12); line-height: 1.25; color: #e4dcef; opacity: 1; letter-spacing: 0; max-width: 128px; background: #0c0913; padding: 3px 6px; border: 1px solid #554860; }
.map-node.fog { opacity: .72 !important; }
.map-node:disabled:not(.visited) { opacity: .75; }
.map-node.t-boss { width: 54px; height: 54px; }
.map-node.t-boss span { top: 55px; }
.map-node .node-odds { font-size: calc(11px * var(--fs) / 1.12); top: -25px; right: auto; left: 50%; transform: translateX(-50%); }
.map-legend { font-size: calc(14px * var(--fs) / 1.12); line-height: 1.5; color: #e2d7ef; padding-bottom: 4px; }
.map-legend .lg b { width: 22px; height: 22px; font-size: calc(14px * var(--fs) / 1.12); }
.map-side { font-size: calc(14px * var(--fs) / 1.12); gap: 14px; border-color: #51475f; background: #100c19; }
.map-side .ch-intro, .map-side .live-beat, .map-side .cast-panel, .map-side .quest-panel, .map-side .ahead p { font-size: calc(15px * var(--fs) / 1.12); line-height: 1.6; }
.map-side .story-callbacks, .map-side .thread small, .map-side .thread b { font-size: calc(14px * var(--fs) / 1.12); }
.map-side .ch-place { font-size: calc(13px * var(--fs) / 1.12); }
.map-side .ahead b { font-size: calc(17px * var(--fs) / 1.12); }
.map-side .kicker { font-size: calc(12px * var(--fs) / 1.12); }
.band .beat-tag { font-size: calc(11px * var(--fs) / 1.12); left: 240px; bottom: 2px; background: #0c0913; }
.band.before-turn .bl { transform: translateY(calc(-50% - 12px)); }
.band.before-turn .beat-tag { top: auto; bottom: 2px; }
.turn-mark { font-size: calc(12px * var(--fs) / 1.12); left: 240px; right: 16px; background: #0c0913; width: max-content; max-width: calc(100% - 256px); }
@media (max-width: 1100px) {
  .map-screen { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 230px; gap: 14px; }
  .map-side { max-height: 230px; }
}
@media (max-height: 760px) { .map-plane { min-height: 720px; } }
@media (pointer: coarse) and (orientation: portrait) and (max-device-width: 700px) {
  .map-screen { display: block; overflow-y: auto; padding: 28px; }
  .map-board { overflow: visible; }
  .map-plane { min-height: 2000px; }
  .map-side { margin-top: 40px; max-height: none; padding: 40px; font-size: calc(42px * var(--fs) / 1.12); }
  .map-side .ch-title { font-size: calc(76px * var(--fs) / 1.12); }
  .map-side .ch-intro, .map-side .live-beat, .map-side .cast-panel, .map-side .quest-panel, .map-side .ahead p { font-size: calc(44px * var(--fs) / 1.12); }
  .map-side .kicker, .map-side .ch-place { font-size: calc(36px * var(--fs) / 1.12); }
  .map-legend { font-size: calc(36px * var(--fs) / 1.12); gap: 20px; }
  .map-legend .lg b { width: 48px; height: 48px; font-size: calc(36px * var(--fs) / 1.12); }
  .band .bl { width: 230px; max-width: 230px; }
  .band .bl i, .band .bl small { font-size: calc(30px * var(--fs) / 1.12); }
  .band .bl b { font-size: calc(40px * var(--fs) / 1.12); }
  .map-node { width: 90px; height: 90px; }
  .map-node b { font-size: calc(54px * var(--fs) / 1.12); }
  .map-node span, .map-node.near span { top: 96px; font-size: calc(34px * var(--fs) / 1.12); max-width: 230px; }
  .map-node.t-boss { width: 110px; height: 110px; }
  .map-node.t-boss span { top: 116px; }
  .map-node .node-odds { display: none; }
  .band .beat-tag, .turn-mark { font-size: calc(28px * var(--fs) / 1.12); left: 280px; }
}

@media (pointer: coarse) and (orientation: portrait) and (max-device-width: 700px) { .band.before-turn .bl { transform: translateY(calc(-50% - 28px)); } }

/* play/styles/details-057.css */
/* Request 50: numbers and consequences live on cards, with an explicit moment of action. */
.crisis-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.crisis-stats article { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; background: #110b1b; border: 1px solid #6f5c82; padding: 18px; }
.crisis-stats article > b { font-size: calc(17px * var(--fs) / 1.12); color: #dcc5f6; }
.crisis-stats .pchip { font-size: calc(15px * var(--fs) / 1.12); border: 0; padding: 0; background: none; }
.crisis-stats .pchip b { font: 700 38px var(--brand); }
.crisis-stats p { font-size: calc(15px * var(--fs) / 1.12); line-height: 1.5; margin: 0; color: #c7b8d6; }
.crisis-effects { display: grid; gap: 14px; }
.crisis-effects article { background: #160e22; border: 1px solid #746086; border-left: 4px solid #a77bff; padding: 18px; }
.crisis-effects article.danger { border-left-color: #ff5d6a; background: #210f1a; }
.crisis-effects h3 { font-size: calc(15px * var(--fs) / 1.12); margin: 0 0 14px; }
.crisis-effects .pchips { display: flex; flex-wrap: wrap; gap: 10px; }
.crisis-effects .pchip, .crisis-effects .effect-note { font-size: calc(17px * var(--fs) / 1.12); line-height: 1.5; }
.ins-rule { font-size: calc(18px * var(--fs) / 1.12); line-height: 1.6; }
.ins-flavor { font-size: calc(15px * var(--fs) / 1.12); line-height: 1.6; }
.tool-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.tool-grid .tool { padding: 24px; border-color: #746086; cursor: pointer; background: #120b1c; }
.tool-grid .tool > b { font-size: calc(24px * var(--fs) / 1.12); }
.tool-grid .tool > pre { font-size: calc(13px * var(--fs) / 1.12); min-height: 150px; }
.tool-grid .tool .tool-help { font-size: calc(15px * var(--fs) / 1.12); line-height: 1.5; }
.tool-grid .tool .pchip { font-size: calc(16px * var(--fs) / 1.12); }
.tool-grid .tool .tool-effects { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.tool-grid .tool:focus-visible { outline: 2px solid #a77bff; outline-offset: 5px; }
.tool-detail .sheet { width: min(720px, calc(100vw - 48px)); padding: 32px; max-height: calc(100dvh - 48px); overflow-y: auto; }
.tool-detail .ap-card { width: 100%; box-shadow: none; cursor: default; padding: 24px; animation: none; }
.tool-detail .ap-card:hover { transform: none; }
.tool-detail .ap-card header b { font-size: calc(30px * var(--fs) / 1.12); }
.tool-detail .ap-card header small { font-size: calc(14px * var(--fs) / 1.12); }
.tool-detail .ap-card .ap-obj { font-size: calc(24px * var(--fs) / 1.12); min-height: 180px; background: #080510; }
.tool-detail .ap-help { display: block; font-size: calc(16px * var(--fs) / 1.12); }
.tool-detail .ap-fx { font-size: calc(18px * var(--fs) / 1.12); }
.tool-detail .ap-cost, .tool-detail .ap-flavor { font-size: calc(16px * var(--fs) / 1.12); line-height: 1.5; }
.art-pick { overflow-y: auto; }
.art-pick .ap-card { width: clamp(260px, 26vw, 360px); }
.art-pick .ap-card header b { font-size: calc(22px * var(--fs) / 1.12); }
.art-pick .ap-help { display: block; font-size: calc(14px * var(--fs) / 1.12); }
.art-pick .ap-fx .pchip { font-size: calc(16px * var(--fs) / 1.12); }
.art-pick .ap-cost { font-size: calc(16px * var(--fs) / 1.12); }
.ap-card:hover .ap-obj { animation: none; }
@media (max-width: 1000px) { .crisis-stats { grid-template-columns: 1fr; } }
@media (pointer: coarse) and (orientation: portrait) and (max-device-width: 700px) and (min-width: 761px) {
  .tool-detail .sheet { width: calc(100vw - 72px); padding: 40px; }
  .tool-detail .ap-card header b { font-size: calc(80px * var(--fs) / 1.12); }
  .tool-detail .ap-card header small, .tool-detail .ap-flavor { font-size: calc(40px * var(--fs) / 1.12); }
  .tool-detail .ap-card .ap-obj { font-size: calc(60px * var(--fs) / 1.12); min-height: 400px; }
  .tool-detail .ap-help, .tool-detail .ap-fx .pchip, .tool-detail .ap-cost { font-size: calc(48px * var(--fs) / 1.12); }
  .tool-detail .close { font-size: calc(70px * var(--fs) / 1.12); width: 90px; height: 90px; }
}
.tool-detail .ap-fx .pchip { font-size: calc(18px * var(--fs) / 1.12); }
@media (pointer: coarse) and (orientation: portrait) and (max-device-width: 700px) and (min-width: 761px) {
  .inspect { display: block; width: calc(100vw - 72px); padding: 50px; max-height: calc(100dvh - 72px); }
  .inspect .ins-stage { margin-bottom: 50px; }
  .inspect .ins-card .card { --s: 2 !important; }
  .inspect .ins-text h2 { font-size: calc(84px * var(--fs) / 1.12); }
  .inspect .ins-text .kicker { font-size: calc(32px * var(--fs) / 1.12); }
  .inspect .ins-rule, .inspect .ins-flavor, .crisis-stats p { font-size: calc(48px * var(--fs) / 1.12); }
  .crisis-stats { grid-template-columns: 1fr; gap: 28px; }
  .crisis-stats article, .crisis-effects article { padding: 40px; }
  .crisis-stats .pchip, .crisis-effects h3 { font-size: calc(44px * var(--fs) / 1.12); }
  .crisis-stats .pchip b { font-size: calc(100px * var(--fs) / 1.12); }
  .crisis-stats article > b, .crisis-effects .pchip, .crisis-effects .effect-note { font-size: calc(48px * var(--fs) / 1.12); }
  .inspect .close { font-size: calc(70px * var(--fs) / 1.12); width: 90px; height: 90px; }
  .tool-detail .ap-fx .pchip { font-size: calc(48px * var(--fs) / 1.12); }
}

html.combat-phone .inspect { display: block; width: calc(100vw - 24px); padding: 28px 18px; max-height: calc(100dvh - 84px); }
html.combat-phone .inspect .ins-card .card { --s: 1 !important; }
html.combat-phone .inspect .ins-stage { margin-bottom: 24px; }
html.combat-phone .inspect .ins-text h2 { font-size: 28px; }
html.combat-phone .inspect .ins-flow-note, html.combat-phone .inspect .ins-risk { font-size: 15px; padding: 12px; }
html.combat-phone .tool-detail .sheet { width: calc(100vw - 24px); padding: 18px; }
html.combat-phone .tool-detail .ap-card { padding: 12px; }
html.combat-phone .tool-detail .ap-card .ap-obj { min-height: 130px; }
html.combat-phone .game-menu > .sheet { padding: 24px; max-height: calc(100dvh - 84px); overflow-y: auto; }
html.combat-phone .menu-actions { grid-template-columns: 1fr; }
html.combat-phone .inspect .ins-role, html.combat-phone .inspect .ins-week, html.combat-phone .inspect .ins-practice, html.combat-phone .inspect .model-note { font-size: 15px; }
html.combat-phone .inspect .ins-role { gap: 8px 12px; padding: 12px 0; margin: 16px 0; }
html.combat-phone .inspect .ins-role svg { width: 28px; height: 28px; }
html.combat-phone .inspect .ins-up { font-size: 13px; padding: 9px 14px; }
html.combat-phone .inspect .ins-nav { width: 38px; height: 64px; font-size: 32px; }
html.combat-phone .inspect .pg-v, html.combat-phone .inspect .pg-v small, html.combat-phone .inspect .pg-v code, html.combat-phone .inspect .pg-v b { font-size: 14px; }
html.combat-phone .inspect .pg-k { font-size: 11px; padding-top: 12px !important; }

/* play/styles/menu-057.css */
/* Request 50: one compact menu on every screen, with settings one disclosure away. */
.game-menu { z-index: 900; background: #080510cc; }
.game-menu > .sheet { width: min(620px, calc(100vw - 40px)); padding: 30px; background: #100b19; border-color: #746086; }
.game-menu .sheet h2 { margin: 0 0 24px; font: 32px var(--brand); }
.menu-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.menu-actions .btn { justify-content: space-between; text-align: left; padding: 14px; font-size: 15px; white-space: normal; line-height: 1.4; }
.menu-actions [data-m="resume"], .menu-actions [data-m="title"] { grid-column: 1 / -1; font-size: 18px; }
.menu-keys { font-size: 12px; color: #c1b4cf; line-height: 1.6; }
.menu-settings, .menu-controls { border-top: 1px solid #51475f; margin: 12px 0; padding: 14px 0; font-size: 15px; }
.menu-settings summary, .menu-controls summary { cursor: pointer; font-size: 17px; }
.menu-settings .menu-list { margin: 20px 0 0; }
.menu-controls p { line-height: 1.7; font-size: 14px; }
.game-menu .saved-line, .game-menu .seed-line { font-size: 12px; line-height: 1.5; }
.hud [data-act="codex"], .hud [data-act="help"] { display: none; }
.hud .menu-btn { display: inline-flex; align-items: center; gap: 6px; }
.hud .menu-btn kbd { font-size: 11px; }
@media (pointer: coarse) and (orientation: portrait) and (max-device-width: 700px) and (min-width: 761px) {
  .game-menu > .sheet { width: calc(100vw - 72px); padding: 64px; }
  .game-menu .sheet h2 { font-size: 90px; }
  .menu-actions { grid-template-columns: 1fr; gap: 24px; }
  .menu-actions .btn, .menu-actions [data-m="resume"], .menu-actions [data-m="title"] { font-size: 48px; padding: 28px; }
  .menu-keys, .game-menu .saved-line, .game-menu .seed-line, .menu-controls p { font-size: 34px; }
  .menu-settings, .menu-controls, .menu-settings summary, .menu-controls summary { font-size: 44px; padding: 24px 0; }
  .game-menu .sheet > .close { font-size: 70px; }
  .game-menu .toggle { font-size: 36px; flex-wrap: wrap; }
  .game-menu input[type="checkbox"] { width: 44px; height: 44px; }
}
.feedback-form textarea { display: block; width: 100%; box-sizing: border-box; margin: 8px 0 16px; padding: 10px; font: inherit; color: var(--paper); background: var(--ink-0); border: 1px solid var(--line-2); resize: vertical; }
.feedback-form [role="status"] { min-height: 2em; }

/* play/styles/card-roles.css */
/* Requests 50/52, OB-098: six role glyphs and inks, shared by every card context. */
.role-flow { --role-ink: #8cdde9; }
.role-clarity { --role-ink: #ceb1ff; }
.role-strike { --role-ink: #ff9a92; }
.role-noise { --role-ink: #9ce4bd; }
.role-resource { --role-ink: #f2d28a; }
.role-burden { --role-ink: #c4bbc8; }
/* OB-122: keep effect highlights readable on dark cards, also after feedback.css. */
.card:not(.kind-crisis) .text .tx-energy { color: #ffb6a2; }
.card:not(.kind-crisis) .text .tx-trust { color: #d9c0ff; }
.card:not(.kind-crisis) .text .tx-st { color: var(--stc); }
/* The role is a colour and an open glyph, shared by hand, field, deck and inspector. */
.card .card-role { display: inline-flex; align-items: center; gap: calc(4px * var(--s)); max-width: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--role-ink); font-size: calc(9px * var(--s)); line-height: 1.15; }
.card-role svg { width: calc(14px * var(--s)); height: calc(14px * var(--s)); flex: none; }
.card-role svg, .ins-role svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card[data-role] .stats { flex-wrap: wrap; row-gap: calc(3px * var(--s)); }
.card .card-fate { width: 100%; color: var(--muted); font-size: calc(8px * var(--s)); line-height: 1.2; }
.card .trait-owner { color: var(--paper); }
.card .trait-keep, .card .trait-fragile, .card .trait-exhaust { border: 0; background: none; padding: 0; }
.ins-role { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; border: 0; background: none; padding: 12px 0; margin: 16px 0; color: var(--role-ink); font-size: calc(16px * var(--fs) / 1.12); line-height: 1.5; }
.ins-role svg { width: 28px; height: 28px; }
.ins-role span { flex-basis: 100%; color: var(--paper-2); }
.ins-practice { font-size: calc(15px * var(--fs) / 1.12); color: #cfb5f4; }
@media (pointer: coarse) and (orientation: portrait) and (max-device-width: 700px) {
  .inspect .ins-stage { position: relative; }
  .inspect .ins-role, .inspect .ins-week, .inspect .ins-practice, .inspect .model-note, .inspect .pg-v, .inspect .pg-v small, .inspect .pg-v code, .inspect .pg-v b, .inspect .pg-v b.up { font-size: calc(48px * var(--fs) / 1.12); }
  .inspect .ins-role { gap: 20px; padding: 26px; margin: 30px 0; }
  .inspect .ins-role svg { width: 72px; height: 72px; }
  .inspect .ins-up { font-size: calc(48px * var(--fs) / 1.12); padding: 20px 28px; }
  .inspect .pgrid { grid-template-columns: 1fr; gap: 14px; }
  .inspect .pg-k { font-size: calc(40px * var(--fs) / 1.12); padding-top: 32px !important; }
  .inspect .ins-nav { width: 90px; height: 140px; font-size: 84px; }
}
/* The hand already owns its detailed fate row from feedback.js. */
.card.in-hand .card-fate { display: none; }
/* A zero focus price can still spend energy: show that payment beside the focus diamond. */
.card-costs { display: inline-flex; flex-direction: column; align-items: center; flex: none; gap: calc(3px * var(--s)); }
.card:has(.energy-price) .hd { align-items: flex-start; }
.card .energy-price { display: inline-flex; align-items: center; gap: calc(2px * var(--s)); font-size: calc(9px * var(--s)); line-height: 1.1; color: #ffd0a3; white-space: nowrap; }
.card .energy-price .picon { width: calc(10px * var(--s)); height: calc(10px * var(--s)); }
/* Compact cards reserve space for their role and numbers; the full inspector carries every rule line. */
.card[data-role] .text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ins-flow-note, .ins-risk { font-size: calc(15px * var(--fs) / 1.12); line-height: 1.55; padding: 12px; border-left: 2px solid #8cdde9; background: #100d1b; }
.ins-risk { border-color: #f2b786; background: #1b100d; }
@media (pointer: coarse) and (orientation: portrait) and (max-device-width: 700px) {
  .inspect .ins-flow-note, .inspect .ins-risk { font-size: calc(48px * var(--fs) / 1.12); padding: 26px; }
}

/* The hand's fate comes from feedback.js; the same quiet footer in every context. */
.card .fate { border: 0; outline: 0; background: none; box-shadow: none; padding: 0; }
.card.in-hand .fate { justify-self: start; margin: 0 calc(10px * var(--s)) calc(7px * var(--s)); font-size: calc(8px * var(--s)); color: var(--muted); }
.card.in-hand:has(.fate) { grid-template-rows: auto minmax(calc(48px * var(--s)),1fr) auto auto auto auto; }
.card.on-board .cap-now { border: 0; background: #130e1be0; color: var(--role-ink); box-shadow: none; border-radius: 0; }
.card.crisis-actor.targetable { outline: 0; filter: brightness(1.2); }
.card.crisis-actor.targetable .threat-mark { color: var(--cyan); filter: drop-shadow(0 0 12px #1fb6d177); }
.card.on-board:not(.kind-crisis)::before { content: ''; }

.card.on-board .practice { border: 0; background: none; padding: 0; gap: calc(4px * var(--s)); font-size: calc(8px * var(--s)); }
.card.on-board .practice .pm i { border: 0; background: var(--stc, var(--violet-hot)); opacity: .2; box-shadow: none; }
.card.on-board .practice .pm i.on { opacity: 1; box-shadow: none; }
#hand .card.kind-lit, #hand .card.watch-pick { outline: 0; box-shadow: 0 22px 34px -14px #000; filter: brightness(1.2); }
.card.crisis-actor.decoy { outline: 0; }
.card.crisis-actor.decoy .threat-mark { color: #f2d28a; }
.card.crisis-actor .decoy-tag { border: 0; background: none; }

.card .card-fate, .card.on-board .practice, .card.on-board .cap-now { outline: 0; }
.db-grid .card.in-deck, #hand .card.drop-over { outline: 0; filter: brightness(1.15); }
.card.coach-lit, .card.term-lit { outline: 0 !important; box-shadow: 0 16px 30px -12px #000 !important; }

/* The process fate remains a dedicated strip in every context, including the actual hand footer. */
.card.kind-process .card-fate, .card.kind-process.in-hand .fate { color: var(--paper-2); background: #21192e; border: 0; padding: calc(2px * var(--s)) calc(4px * var(--s)); }
.card.kind-process.in-hand .fate { justify-self: stretch; margin: 0 calc(7px * var(--s)) calc(6px * var(--s)); }

/* play/styles/season-setup.css */
/* Request 51, S1: one screen with a reserved action row. Full biographies open in a separate sheet. */
.hero-screen.season-setup { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-items: stretch; justify-content: stretch; padding: 16px 24px; gap: 12px; overflow: hidden; }
.season-setup .hero-heading { width: min(1740px, 100%); margin: 0 auto; }
.season-setup .hero-heading h1 { font-size: clamp(26px, 2.3vw, 40px); line-height: 1.1; margin-top: 5px; }
.hero-layout { display: grid; grid-template-columns: minmax(360px, .95fr) minmax(0, 1.8fr); width: min(1740px, 100%); margin: 0 auto; gap: 18px; min-height: 0; }
.hero-leader { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.season-setup .hero-pick { display: flex; flex-direction: column; gap: 10px; width: 100%; min-height: 0; }
.season-setup .roster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; width: 100%; }
.season-setup .ro { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 7px; min-width: 0; animation: none; }
.season-setup .ro canvas { width: 30px !important; height: 30px !important; object-fit: contain; }
.season-setup .ro b { font-size: 11px; line-height: 1.15; }
.season-setup .ro small { display: none; }
.season-setup .dossier { min-height: 0; width: 100%; grid-template-columns: 90px minmax(0, 1fr); padding: 12px; gap: 12px; box-shadow: none; }
.season-setup .hd-portrait { width: 90px; padding: 4px; }
.season-setup .hd-portrait canvas { width: 100% !important; height: auto !important; max-height: 145px; object-fit: contain; }
.season-setup .hd-role { display: none; }
.season-setup .hd-diff { font-size: 9px; left: 5px; right: auto; bottom: 5px; }
.season-setup .hd-body { gap: 7px; grid-column: 2; grid-row: 1; }
.season-setup .hd-name { font-size: clamp(22px, 2vw, 30px); }
.season-setup .hero-k, .season-setup .hd-home { font-size: 10px; line-height: 1.3; }
.season-setup .hd-bio, .season-setup .hd-style, .season-setup .hd-sw, .season-setup .hd-quote, .season-setup .hd-sig { display: none; }
.season-setup .h-none .hd-bio { display: block; font-size: 12px; }
.season-setup .hero-part { margin: 0; }
.season-setup .hero-part > span { font-size: 9px; }
.season-setup .hero-part p { font-size: 12px; line-height: 1.4; margin: 3px 0 0; }
.season-setup .hero-detail { grid-column: 1 / -1; justify-self: start; padding: 5px 8px; font-size: 11px; }
.season-setup .hs-setup { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
.season-setup .deck-row { justify-content: space-between; font-size: 11px; gap: 8px; }
.season-setup .deck-row .btn { padding: 7px 9px; font-size: 11px; white-space: nowrap; }
.season-setup .ladder-row { flex-wrap: wrap; gap: 5px; font-size: 11px; }
.season-setup .ladder-row .lk { display: none; }
.season-setup .ladder-row .ladder-note { flex-basis: 100%; }
.season-setup .start-odds { width: 100%; }
.season-setup .odds { font-size: 11px; padding: 6px 8px; gap: 3px 8px; }
.season-setup .odds small { font-size: 10px; }
.season-setup .season-pick { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; min-height: 0; margin: 0; }
.season-setup .pp-head { gap: 6px 12px; }
.season-setup .pp-head small { font-size: 10px; }
.season-setup .season-cards { max-height: none; overflow: visible; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 7px; padding: 0; min-height: 0; }
.season-setup .season-card { position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 8px; align-items: center; min-width: 0; min-height: 0; padding: 9px; overflow: hidden; border: 1px solid var(--line-2); background: linear-gradient(145deg, rgba(42,29,68,.38), #0c0913 75%); border-radius: 2px; }
.season-art { position: relative; display: grid; place-items: center; height: 100%; min-height: 50px; overflow: hidden; background: radial-gradient(ellipse, #39254b, transparent 75%); }
.season-art .scene { margin: 0; width: 100%; }
.season-art pre { font: 2.1px/1.15 var(--mono); margin: 0; white-space: pre; color: var(--paper-2); text-align: center; }
.season-setup .season-copy { display: flex; flex-direction: column; min-width: 0; gap: 5px; line-height: 1.25; }
.season-setup .season-card b { font: 14px/1.1 var(--brand); color: var(--paper); text-transform: lowercase; }
.season-setup .season-card small { opacity: 1; font-size: 9px; line-height: 1.25; }
.season-setup .season-meta { color: var(--muted); }
.season-setup .season-hook { font-size: 10px; line-height: 1.3; }
.season-setup .season-lock { color: #c9b9dc; }
.season-setup .season-card.locked { opacity: 1; border-style: dashed; background: linear-gradient(145deg, rgba(52,37,62,.45), #100b18); }
.season-setup .season-card.locked .season-art { filter: saturate(.8); }
.season-setup .season-card.locked::after { content: '◇'; position: absolute; right: 5px; top: 3px; color: #bb9ee0; font-size: 10px; }
.season-setup .season-card.on { border-color: var(--cyan); box-shadow: inset 3px 0 var(--cyan); }
.season-setup .season-card.available:hover { border-color: var(--paper); }
.season-options { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 28px; }
.season-options .toggle, .chronicle-toggle { font: 11px/1.35 var(--mono); color: var(--paper-2); }
.chronicle-toggle { background: none; border: 0; border-bottom: 1px dotted var(--violet-hot); padding: 4px 0; cursor: pointer; }
.season-setup > .title-foot { position: static; width: min(1740px, 100%); margin: 0 auto; padding: 10px 0 0; border: 0; border-top: 1px solid var(--line-2); background: none; box-shadow: none; justify-content: flex-end; flex-wrap: nowrap; }
.season-setup > .title-foot .seed-row { margin-right: auto; }
.hero-details .dossier { margin-top: 20px; }
.hero-details .sheet { width: min(1160px, calc(100vw - 40px)); }
@media (min-width: 1500px) { .season-art pre { font-size: 2.8px; } .season-setup .season-card { grid-template-columns: 94px minmax(0, 1fr); padding: 14px; } .season-setup .season-card b { font-size: 18px; } .season-setup .season-hook { font-size: 12px; } .season-setup .season-card small { font-size: 11px; } }
@media (max-height: 780px) and (pointer: fine) { .season-setup .hero-heading h1 { font-size: 26px; } .hero-screen.season-setup { gap: 8px; padding: 12px 20px; } .season-setup .hero-leader { gap: 7px; } .season-setup .ro { flex-direction: row; align-items: center; gap: 4px; padding: 5px; } .season-setup .ro canvas { width: 22px !important; height: 26px !important; } .season-setup .ro b { font-size: 10px; } .season-setup .dossier { gap: 9px; padding: 10px; } .season-setup .hero-part p { font-size: 11px; } }
@media (pointer: coarse) and (orientation: portrait), (max-width: 760px) {
  html.setup-phone .upright-plate { display: none; }
  .hero-screen.season-setup { padding: 14px; gap: 10px; }
  .season-setup .hero-heading h1 { font-size: 25px; }
  .hero-layout { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; gap: 20px; }
  .hero-leader { flex-shrink: 0; }
  .season-setup .ro { padding: 5px; gap: 4px; }
  .season-setup .ro b { font-size: 11px; }
  .season-setup .dossier { grid-template-columns: 76px minmax(0, 1fr); padding: 10px; }
  .season-setup .hd-portrait { width: 76px; }
  .season-setup .hero-part p, .season-setup .h-none .hd-bio { font-size: 14px; }
  .season-setup .hero-detail { font-size: 13px; }
  .season-setup .season-pick { display: flex; flex-direction: column; flex-shrink: 0; }
  .season-setup .season-cards { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .season-setup .season-card { grid-template-columns: 90px minmax(0, 1fr); min-height: 138px; padding: 12px; }
  .season-art pre { font-size: 2.8px; }
  .season-setup .season-card b { font-size: 20px; }
  .season-setup .season-card small, .season-setup .season-hook { font-size: 13px; }
  .season-options { flex-wrap: wrap; }
  .season-options .toggle, .chronicle-toggle { font-size: 13px; }
  .season-setup > .title-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .season-setup > .title-foot .seed-row { grid-column: 1 / -1; }
  .season-setup > .title-foot .btn { padding: 10px 6px; font-size: 13px; }
  .hero-details .dossier { grid-template-columns: 1fr; }
  .hero-details .hd-body, .hero-details .hd-sig { grid-column: 1; grid-row: auto; }
}
/* Keep long leader names inside their own button, with the full name in the dossier. */
.season-setup .ro > span { min-width: 0; width: 100%; }
.season-setup .ro b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.season-art pre { font-size: 3.4px; }
@media (max-height: 780px) and (pointer: fine) { .season-setup .ro { flex-direction: column; align-items: flex-start; } }
@media (pointer: coarse) and (orientation: portrait) { .season-setup .ro b { font-size: 12px; } .season-art pre { font-size: 4.2px; } }
@media (pointer: coarse) and (orientation: portrait), (max-width: 760px) {
  .season-setup .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .season-setup .ro { flex-direction: row; align-items: center; padding: 8px; gap: 8px; }
  .season-setup .ro:last-child { grid-column: 1 / -1; }
  .season-setup .ro b { display: block; overflow-wrap: normal; word-break: normal; font-size: 13px; line-height: 1.3; }
  .season-setup .ro canvas { flex-shrink: 0; }
}
.demo-fight-pick { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.demo-fight-pick > .glitch-scene { height: auto; aspect-ratio: 8 / 5; flex: 1 1 auto; }
.demo-fight-pick h2 { font-size: 28px; }
.demo-fight-pick p, .demo-setup-note { font-size: 14px; line-height: 1.5; color: var(--paper-2); }
.demo-fight-pick .btn { align-self: start; }
.demo-report .report-head { max-width: 1000px; }
.demo-report .report-head h1 { font-size: clamp(28px, 4vw, 58px); }
.demo-signoff { color: var(--violet-hot); font-size: 20px; }
.demo-path { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 15px; }
.full-version-info .sheet p { font-size: 16px; line-height: 1.6; }
@media (pointer: coarse) and (orientation: portrait) {
 .demo-fight-pick { flex-shrink: 0; }
 .demo-fight-pick > .glitch-scene { min-height: 200px; }
 .demo-report .report-head h1 { font-size: 94px; }
 .demo-report .lede, .demo-signoff { font-size: 50px; }
 .demo-path { font-size: 44px; }
 .full-version-info .sheet p { font-size: 48px; }
}

.edition-mark { color: var(--violet-hot); font-size: 11px; white-space: nowrap; }
.agent-replay form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.agent-replay label { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 360px; }
.agent-replay input { width: 100%; min-width: 0; padding: 9px; color: var(--paper); background: var(--ink-0); border: 1px solid var(--line-2); font: inherit; }
@media (pointer: coarse) and (orientation: portrait) { .edition-mark { font-size: 28px; } }

.demo-report { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 24px 4vw; gap: 18px; overflow: hidden; }
.demo-report .report-body { min-height: 0; overflow-y: auto; padding-right: 16px; }
.demo-report .report-actions { flex-wrap: wrap; align-items: center; }
.demo-report .report-head .lede { font-size: 16px; line-height: 1.5; }
.demo-report .demo-signoff { margin: 10px 0 0; }
@media (pointer: coarse) and (orientation: portrait) {
 .demo-report { padding: 50px 42px; gap: 30px; }
 .demo-report .report-head .lede { font-size: 50px; }
 .demo-report .report-actions .btn { font-size: 36px; min-height: 100px; padding: 18px 24px; }
 .demo-report .report-body h2 { font-size: 48px; }
}

.demo-report { background: rgba(8, 6, 14, .86); }
.demo-path { list-style: none; padding-left: 0; counter-reset: demo-chapter; }
.demo-path li { display: flex; gap: 8px; counter-increment: demo-chapter; }
.demo-path li::before { content: counter(demo-chapter) '.'; color: var(--muted); }

@media (pointer: fine), (orientation: landscape) {
 .demo-report .report-body { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 2fr); gap: 28px; align-items: start; }
 .demo-report .report-body h2 { margin: 0 0 12px; }
 .demo-report .demo-path { display: block; margin: 0 0 22px; font-size: 13px; line-height: 1.6; }
 .demo-report .findings { font-size: 12px; line-height: 1.5; }
 .demo-report .rv-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-height: 760px) and (pointer: fine) {
 .demo-report { padding: 18px 3vw; gap: 14px; }
 .demo-report .report-head h1 { font-size: 40px; margin: 6px 0; }
 .demo-report .demo-signoff { margin-top: 6px; }
}

/* Request 54.1: the selected story leads; unopened stories live in their own gallery. */
.setup-step { font-size: 10px; }
.season-setup .season-browser { display: grid; grid-template-rows: auto minmax(150px, 1fr) auto auto auto; gap: 10px; }
.season-spotlight { display: grid; grid-template-columns: minmax(150px, .9fr) minmax(0, 1.2fr); min-height: 0; overflow: hidden; background: #100b1bd9; border: 1px solid #6c577d; border-left: 3px solid var(--cyan); }
.season-spotlight-art { position: relative; min-height: 0; }
.season-spotlight-copy { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 18px; overflow-y: auto; }
.season-spotlight h2 { margin: 0; font: clamp(24px, 2vw, 34px)/1.1 var(--brand); text-transform: lowercase; }
.season-spotlight p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--paper-2); }
.season-state { display: block; font-size: 11px; letter-spacing: .08em; color: #c2aed9; text-transform: lowercase; }
.season-state.demo, .season-state.open { color: #7cdeea; }
.season-length { font-size: 14px; color: var(--paper); }
.season-length span, .season-spotlight small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.season-browser .pp-head { justify-content: space-between; }
.season-browser .pp-head small { font-size: 12px; color: #7cdeea; }
.season-setup .season-browser .season-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 6px; }
.season-setup .season-browser .season-card { display: flex; align-items: center; gap: 10px; padding: 7px 10px; min-height: 40px; background: #0e0a17; }
.season-browser .season-card:only-child { grid-column: 1 / -1; }
.season-browser .season-tick { flex: none; color: var(--cyan); }
.season-setup .season-browser .season-copy { gap: 3px; }
.season-setup .season-browser .season-card b { font-size: 13px; }
.season-setup .season-browser .season-card small { font-size: 10px; color: var(--muted); }
.season-catalog-open { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px dashed #8b719f; background: linear-gradient(100deg, #30213c99, #100b19); color: var(--paper-2); text-align: left; cursor: pointer; }
.season-catalog-open > span:first-child { font-size: 27px; color: #c7a2ec; }
.season-catalog-open span b, .season-catalog-open span small { display: block; }
.season-catalog-open b { font: 14px var(--brand); }
.season-catalog-open small { font-size: 11px; margin-top: 4px; color: var(--muted); }
.season-catalog-open i { font-style: normal; margin-left: auto; }
.season-catalog-open:hover, .season-catalog-open:focus-visible { background-color: #4a3158; border-color: #cfb5f4; }
.season-gallery > .sheet { width: min(1120px, calc(100vw - 40px)); max-height: calc(100dvh - 100px); overflow-y: auto; padding: 28px; }
.season-gallery h2 { margin: 8px 0 12px; font-size: 30px; }
.gallery-note { font-size: 15px; line-height: 1.5; color: var(--paper-2); max-width: 72ch; }
.season-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.season-teaser { display: grid; grid-template-columns: 130px minmax(0, 1fr); background: #140d20; border-top: 2px solid #a684c8; min-width: 0; }
.season-teaser > div { padding: 14px; }
.season-teaser h3 { margin: 9px 0; font: 21px/1.15 var(--brand); text-transform: lowercase; }
.season-teaser p { font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.season-teaser small { display: block; color: #c7b6d8; font-size: 12px; line-height: 1.5; }
.season-teaser small b { display: block; color: var(--violet-hot); font-weight: 400; }
@media (max-height: 780px) and (pointer: fine) {
 .season-spotlight-copy { padding: 12px; gap: 7px; }
 .season-spotlight h2 { font-size: 25px; }
 .season-spotlight p { font-size: 14px; }
 .season-setup .season-browser { gap: 7px; }
}
@media (pointer: coarse) and (orientation: portrait), (max-width: 760px) {
 .season-setup .season-browser { display: flex; flex-direction: column; gap: 12px; }
 .season-spotlight { display: block; flex-shrink: 0; }
 .season-spotlight-art { height: 180px; }
 .season-spotlight-copy { overflow: visible; padding: 18px; }
 .season-spotlight h2 { font-size: 27px; }
 .season-spotlight p { font-size: 16px; }
 .season-setup .season-browser .season-cards { grid-template-columns: 1fr; }
 .season-catalog-open { min-height: 72px; }
 .season-catalog-open b { font-size: 16px; }
 .season-gallery > .sheet { width: calc(100vw - 24px); padding: 20px 14px; }
 .season-gallery-grid { grid-template-columns: 1fr; }
 .season-teaser { display: block; }
 .season-teaser .glitch-scene { height: 160px; }
 .season-teaser h3 { font-size: 24px; }
 .season-teaser p, .season-teaser small { font-size: 14px; }
}

.season-setup .season-browser .season-card { flex-direction: row; justify-content: flex-start; text-align: left; }
.season-setup .season-browser .season-copy { align-items: flex-start; }

/* Request 58: restore the leader dossier; reserve a separate story row and action row. */
.leader-classic.season-setup { padding: 14px 24px; gap: 10px; }
.leader-classic .hero-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
.leader-classic .hero-leader { gap: 6px; }
.leader-classic .setup-step, .leader-classic .hero-detail { display: none; }
.leader-classic .hero-pick { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.leader-classic .roster { grid-template-columns: 1fr; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 5px; }
.leader-classic .ro { flex-direction: row; align-items: center; padding: 5px 8px; gap: 8px; }
.leader-classic .ro canvas { width: 38px !important; height: 38px !important; flex-shrink: 0; }
.leader-classic .ro b { font-size: 13px; line-height: 1.25; overflow-wrap: normal; }
.leader-classic .ro small { display: block; font-size: 10px; margin-top: 4px; }
.leader-classic .dossier { grid-template-columns: 210px minmax(0, 1fr) 110px; padding: 14px; gap: 16px; min-height: 300px; }
.leader-classic .hd-portrait { width: 210px; padding: 8px; }
.leader-classic .hd-portrait canvas { width: 100% !important; height: auto !important; max-height: 265px; object-fit: contain; }
.leader-classic .hd-role { display: block; font-size: 10px; }
.leader-classic .hd-diff { font-size: 9px; left: 8px; bottom: 8px; }
.leader-classic .hd-body { gap: 6px; grid-column: 2; grid-row: 1; }
.leader-classic .hd-name { font-size: clamp(26px, 2.4vw, 36px); }
.leader-classic .hd-bio, .leader-classic .hd-style, .leader-classic .hd-sw { display: block; }
.leader-classic .hd-bio { font-size: 13px; line-height: 1.45; max-width: none; overflow: visible; }
.leader-classic .hd-style { font-size: 12px; line-height: 1.4; }
.leader-classic .hd-sw { display: grid; gap: 14px; }
.leader-classic .hd-sw ul { font-size: 11px; line-height: 1.4; }
.leader-classic .hero-part > span { font-size: 9px; }
.leader-classic .hero-part p { font-size: 12px; line-height: 1.35; }
.leader-classic .hd-sig { display: flex; flex-direction: column; min-width: 108px; grid-column: 3; grid-row: 1; }
.leader-classic .hd-sig .hero-k { font-size: 9px; text-align: center; }
.leader-classic .demo-setup-note { margin: 0; font-size: 11px; }
.leader-classic .start-odds:empty { display: none; }
.leader-classic .season-browser { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(200px, 1fr) minmax(220px, .8fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px 12px; }
.leader-classic .season-browser > .pp-head { grid-column: 1 / -1; }
.leader-classic .season-spotlight { grid-column: 1; grid-row: 2 / 4; grid-template-columns: 140px minmax(0, 1fr); }
.leader-classic .season-spotlight-copy { padding: 10px 12px; gap: 5px; overflow: visible; }
.leader-classic .season-spotlight h2 { font-size: 23px; }
.leader-classic .season-spotlight p { font-size: 12px; line-height: 1.4; }
.leader-classic .season-spotlight small { font-size: 10px; }
.leader-classic .season-browser > .season-choice-grid { grid-column: 2; grid-row: 2; grid-template-columns: 1fr; overflow-y: auto; }
.leader-classic .season-catalog-open { grid-column: 3; grid-row: 2; padding: 8px 12px; }
.leader-classic .season-catalog-open b { font-size: 14px; }
.leader-classic .season-catalog-open small { font-size: 11px; }
.leader-classic .season-options { grid-column: 2 / 4; grid-row: 3; }
.leader-classic .hs-setup { flex-direction: row; align-items: center; justify-content: space-between; }
.leader-classic .odds { padding: 4px 8px; font-size: 10px; }
@media (min-width: 1101px) and (max-height: 820px) {
 .leader-classic .dossier { grid-template-columns: 190px minmax(0, 1fr) 108px; padding: 12px; gap: 14px; min-height: 280px; }
 .leader-classic .hd-portrait { width: 190px; }
 .leader-classic .hd-body { gap: 5px; }
 .leader-classic .hd-bio { font-size: 12px; }
 .leader-classic .hd-name { font-size: 27px; }
 .leader-classic .roster { width: auto; }
 .leader-classic .season-spotlight-art { min-height: 80px; }
}
@media (max-width: 1100px), (pointer: coarse) and (orientation: portrait) {
 .leader-classic .hero-layout { display: flex; overflow-y: auto; gap: 18px; }
 .leader-classic .hero-pick { display: flex; flex-direction: column; }
 .leader-classic .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
 .leader-classic .ro:last-child { grid-column: 1 / -1; }
 .leader-classic .ro small { display: none; }
 .leader-classic .dossier { grid-template-columns: minmax(0, 1fr) 110px; gap: 14px; min-height: 0; }
 .leader-classic .hd-portrait { width: min(180px, 100%); justify-self: center; }
 .leader-classic .hd-sig { grid-column: 2; grid-row: 1; }
 .leader-classic .hd-body { grid-column: 1 / -1; grid-row: 2; }
 .leader-classic .hd-bio { font-size: 15px; }
 .leader-classic .hd-style, .leader-classic .hero-part p { font-size: 14px; }
 .leader-classic .hd-sw ul { font-size: 13px; }
 .leader-classic .season-browser { display: flex; flex-direction: column; flex-shrink: 0; }
 .leader-classic .season-spotlight { display: block; }
 .leader-classic .season-spotlight-art { height: 130px; }
 .leader-classic .season-spotlight-copy { padding: 14px; gap: 8px; }
 .leader-classic .season-spotlight h2 { font-size: 26px; }
 .leader-classic .season-spotlight p { font-size: 14px; }
 .leader-classic .season-browser > .season-choice-grid { overflow: visible; }
 .leader-classic .season-options { flex-wrap: wrap; }
}
@media (min-width: 1101px) {
 .leader-classic .season-browser > .season-choice-grid { align-content: start; grid-auto-rows: minmax(44px, auto); }
 .leader-classic .season-browser:not(:has(.season-catalog-open)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
 .leader-classic .season-browser:not(:has(.season-catalog-open)) > .season-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
 .leader-classic .season-browser:not(:has(.season-catalog-open)) .season-card { min-height: 44px; padding: 5px 6px; gap: 5px; }
 .leader-classic .season-browser:not(:has(.season-catalog-open)) .season-card b { font-size: 11px; line-height: 1.15; }
 .leader-classic .season-browser:not(:has(.season-catalog-open)) .season-card small { font-size: 9px; }
}

.leader-classic .hd-sig > .card { flex-shrink: 0; }
@media (min-width: 1101px) {
 .leader-classic .ro { padding: 4px 8px; min-height: 0; }
 .leader-classic .ro b { line-height: 1.15; }
 .leader-classic .ro small { line-height: 1.1; margin-top: 2px; }
 .leader-classic .season-browser { grid-template-rows: auto minmax(152px, 1fr) auto; }
}

/* Accepted OB-124 follow-up: the demo visibly lists all eight full-version stories. */
.season-choice-grid { display: grid; min-height: 0; gap: 6px; }
.season-choice-grid > .season-cards { display: contents; }
.leader-classic .demo-stories { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.leader-classic .demo-stories > .season-choice-grid { grid-column: 2 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
.leader-classic .demo-stories .season-card:only-child { grid-column: auto; }
.leader-classic .demo-stories .season-card { min-height: 44px; padding: 5px 6px; gap: 5px; }
.leader-classic .demo-stories .season-card b { font-size: 11px; line-height: 1.15; }
.leader-classic .demo-stories .season-card small { font-size: 9px; }
.season-locked { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 44px; padding: 5px 8px; color: var(--paper-2); background: #14101bc9; border: 1px dashed #64596f; text-decoration: none; min-width: 0; }
.season-locked b { font: 11px/1.15 var(--brand); text-transform: lowercase; color: #c2b7ce; }
.season-locked small { font-size: 9px; color: #a69aaf; }
.season-locked svg { width: 10px; height: 10px; fill: none; stroke: currentColor; vertical-align: middle; }
.season-locked:hover, .season-locked:focus-visible { outline: 1px solid var(--violet-hot); outline-offset: -1px; color: var(--paper); }
.leader-classic .demo-stories > .pp-head .season-catalog-open { min-height: 0; margin-left: auto; padding: 2px 4px; border: 0; background: none; font-size: 10px; text-decoration: underline; }
@media (max-width: 1100px), (pointer: coarse) and (orientation: portrait) {
 .leader-classic .demo-stories > .season-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .leader-classic .demo-stories .season-card b, .season-locked b { font-size: 13px; }
 .leader-classic .demo-stories .season-card small, .season-locked small { font-size: 11px; }
 .season-locked { min-height: 64px; }
}

/* play/styles/story-060.css */
/* Request 52, C1: an illustrated room, two visible branches, no portrait in a tunnel. */
.glitch-scene { position: relative; margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0913; }
.glitch-scene svg { display: block; width: 100%; height: 100%; }
.glitch-ghost { opacity: 0; mix-blend-mode: screen; animation: image-split 7s steps(1) infinite; }
.glitch-ghost.red { filter: sepia(1) saturate(3) hue-rotate(310deg); animation-delay: -.08s; }
.glitch-ghost.cyan { filter: sepia(1) saturate(3) hue-rotate(120deg); }
.glitch-fragments { opacity: .3; animation: image-fragments 5s steps(1) infinite; }
.glitch-route { fill: none; stroke: #a78bdc; stroke-width: 2; opacity: .15; transition: opacity .15s, stroke-width .15s; }
@keyframes image-split { 0%, 90%, 96%, 100% { opacity: 0; } 91%, 94% { opacity: .3; transform: translate(4px, -1px); } 92%, 95% { opacity: .15; transform: translate(-5px, 2px); } }
@keyframes image-fragments { 0%, 85%, 94%, 100% { transform: none; opacity: .2; } 86%, 90% { transform: translateX(16px); opacity: .7; } 87%, 93% { transform: translateX(-10px); opacity: .4; } }
html[data-effects="off"] .glitch-ghost, html[data-effects="off"] .glitch-fragments { animation: none; }
html[data-effects="off"] .glitch-ghost { opacity: 0; }
.prologue-screen { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(0, 2fr) minmax(190px, .8fr); grid-template-rows: minmax(0, 1fr); gap: 20px; padding: 24px max(24px, calc((100vw - 1480px) / 2)); align-items: center; }
.prologue-screen .dilemma { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-self: center; min-height: 0; max-height: 100%; padding: 0; overflow-y: auto; border: 0; background: #110c1b; box-shadow: 0 24px 60px #0005; }
.prologue-screen .story-visual { display: block; flex: 0 0 auto; height: clamp(135px, 22vh, 240px); min-height: 0; border: 0; }
.prologue-screen .story-copy { flex: 0 0 auto; gap: 10px; padding: 20px 24px; overflow: visible; }
.prologue-screen .story-copy h2 { font-size: clamp(27px, 2.5vw, 38px); }
.prologue-screen .story-copy .story-lead { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.5; }
.prologue-screen .story-copy .n-log { font-size: 14px; line-height: 1.4; padding: 8px 12px; }
.prologue-screen .story-copy .legacy { font-size: 14px; line-height: 1.4; }
.prologue-screen .story-context { font-size: 13px; }
.prologue-screen .swipe-hint { font-size: 11px; margin: 0; padding-top: 0; }
.prologue-screen .choice-side { grid-row: 1; min-height: 190px; max-height: calc(100vh - 180px); max-width: none; padding: 22px; gap: 14px; border: 0; box-shadow: none; overflow-y: auto; background: linear-gradient(145deg, #33203fbb, #100b1bd9); transform: none; transition: background .15s, box-shadow .15s; }
.prologue-screen .choice-side.left { grid-column: 1; justify-self: stretch; }
.prologue-screen .choice-side.right { grid-column: 3; justify-self: stretch; text-align: left; align-items: flex-start; background: linear-gradient(215deg, #153841bb, #100b1bd9); }
.prologue-screen .choice-side b { font-size: clamp(22px, 1.9vw, 29px); line-height: 1.15; }
.prologue-screen .choice-side .arrow { position: absolute; top: 20px; right: 20px; font-size: 21px; }
.choice-symbol { color: #bc9ae5; display: block; width: 42px; height: 42px; }
.choice-side.right .choice-symbol { color: #5ccbd3; }
.choice-symbol svg { width: 42px; height: 42px; }
.prologue-screen .choice-side .pchips { gap: 7px; }
.prologue-screen .choice-side .pchip { font-size: 13px; }
.prologue-screen .choice-side .after { font-size: 13px; line-height: 1.45; }
.prologue-screen .choice-side:hover, .prologue-screen .choice-side:focus-visible, .prologue-screen .choice-side.branch-preview { transform: none; box-shadow: inset 3px 0 #b891e5, 0 0 30px #a77bff15; background-color: #392545; }
.prologue-screen .choice-side.right:hover, .prologue-screen .choice-side.right:focus-visible, .prologue-screen .choice-side.right.branch-preview { box-shadow: inset -3px 0 #5ccbd3, 0 0 30px #5ccbd315; }
.prologue-screen[data-preview="left"] .glitch-route.left, .prologue-screen[data-preview="right"] .glitch-route.right { opacity: 1; stroke-width: 5; filter: drop-shadow(0 0 5px #b98ce6); }
.prologue-screen[data-preview="right"] .glitch-route.right { stroke: #5ccbd3; }
.choice-preview { font-size: 13px; line-height: 1.4; padding: 8px 11px; color: #dccbeb; border-left: 2px solid #ba94e4; background: #a77bff12; }
.prologue-screen[data-preview="right"] .choice-preview { border-left-color: #5ccbd3; }
.season-art > .glitch-scene { position: absolute; inset: 0; }
.season-setup .season-card .glitch-ghost { animation: none; }
.season-setup .season-card.available:hover .glitch-ghost { animation: image-split 2s steps(1) 1; }
.season-setup .season-card .glitch-fragments { animation: none; }
/* The same room introduces loading and the choice that follows it. */
@media (max-height: 780px) and (pointer: fine) { .prologue-screen { padding: 14px 22px; gap: 14px; } .prologue-screen .story-visual { height: 130px; } .prologue-screen .story-copy { padding: 16px 20px; gap: 8px; } .prologue-screen .choice-side { padding: 18px; } }
@media (pointer: coarse) and (orientation: portrait) {
  .prologue-screen { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; padding: 48px 38px; gap: 30px; }
  .prologue-screen .dilemma { grid-column: 1 / -1; grid-row: 1; width: 100%; }
  .prologue-screen .story-visual { height: 480px; }
  .prologue-screen .story-copy { padding: 45px; gap: 30px; }
  .prologue-screen .story-copy h2 { font-size: 82px; }
  .prologue-screen .story-copy .story-lead, .prologue-screen .story-copy .n-log, .prologue-screen .story-copy .legacy, .prologue-screen .story-context, .choice-preview { font-size: 46px; line-height: 1.5; }
  .prologue-screen .swipe-hint { font-size: 32px; }
  .prologue-screen .choice-side { grid-row: 2; min-height: 380px; max-height: none; padding: 42px; gap: 24px; }
  .prologue-screen .choice-side.left { grid-column: 1; }
  .prologue-screen .choice-side.right { grid-column: 2; }
  .prologue-screen .choice-side b { font-size: 66px; }
  .choice-symbol, .choice-symbol svg { width: 90px; height: 90px; }
  .prologue-screen .choice-side .pchip, .prologue-screen .choice-side .after { font-size: 42px; }
}
@media (prefers-reduced-motion: reduce) { .glitch-ghost, .glitch-fragments { animation: none !important; } .glitch-ghost { opacity: 0; } }

.beat-card .beat-art { height: clamp(120px, 23vh, 220px); padding: 0; border: 0; }
.cc-visual > .glitch-scene { height: clamp(135px, 24vh, 240px); }

/* play/styles/map-060.css */
/* Request 53, M1: landscape behind the graph, one decision preview in front. */
.map-terrain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
.map-terrain path { fill: none; stroke: #80638e; stroke-width: .8; opacity: .26; }
.map-terrain .terrain-building { stroke: #98819f; opacity: .4; }
.map-terrain text { font: 11px var(--mono); fill: #bd9fd2; opacity: .2; letter-spacing: 1px; }
.map-bands { z-index: 1; }
.map-lines { z-index: 2; }
.map-nodes { z-index: 3; }
.map-plane { background: radial-gradient(ellipse at 75% 40%, #241b30, #0b0912 70%); }
.map-lines path { stroke: #887691; stroke-width: 1.4; opacity: .45; }
.map-lines path.walked { stroke: #c4b2d4; stroke-width: 2.7; opacity: .65; stroke-dasharray: 4 5; }
.map-lines path.route { stroke: #bca0ef; stroke-width: 3; opacity: 1; filter: drop-shadow(0 0 4px #9871c4); }
.map-plane.tracing .map-lines path:not(.route):not(.walked) { opacity: .15; }
.map-node.route { border-color: #b799d5; box-shadow: 0 0 0 3px #a77bff14; }
.map-node.hovered { outline: 2px solid #d4b5ff; outline-offset: 4px; }
.map-node.visited::after { content: '✓'; position: absolute; right: -7px; top: -8px; color: #c7b5d6; font: 12px var(--mono); background: #100b18; padding: 1px 3px; }
.map-side .ahead { padding: 0; margin: 12px 0; border: 0; background: none; }
.map-side .ahead h3 { font: 22px/1.2 var(--brand); margin: 8px 0 12px; color: var(--paper); }
.map-side .ahead section { padding: 10px 0; border-bottom: 1px solid var(--line); }
.map-side .ahead h4 { font-size: 11px; font-weight: normal; color: #b8a4c9; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 8px; }
.map-side .ahead p { font-size: 13px; line-height: 1.5; margin: 6px 0; }
.map-side .ahead .pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.preview-risk ul { padding: 0; margin: 0; list-style: none; }
.preview-risk li { display: flex; flex-direction: column; gap: 3px; margin: 9px 0; }
.preview-risk li b { font-size: 13px !important; font-weight: normal; }
.preview-risk li small { font-size: 11px; color: #bbaaaf; }
.preview-actions { display: flex; gap: 8px; margin-top: 14px; }
.preview-actions .btn { font-size: 12px; padding: 10px; }
.preview-threads { padding: 8px 0; color: #cbb0e8; }
.map-side .thread.on-route { border-left: 2px solid #b695de; padding-left: 9px; background: linear-gradient(90deg, #a77bff14, transparent); }
.map-context { font-size: 12px; color: var(--paper-2); border-top: 1px solid var(--line); padding: 10px 0; }
.map-context summary { cursor: pointer; color: #b8a4c9; }
.map-context .ch-intro { font-size: 13px; }
.map-side .ch-title { margin: 4px 0; font-size: 17px; }
.map-side .hero-badge { display: none; }
.map-legend { opacity: .85; font-size: 12px; gap: 6px 12px; }
@media (pointer: coarse) and (orientation: portrait) {
 .map-terrain text { font-size: 28px; }
 .map-side .ahead h3 { font-size: 64px; }
 .map-side .ahead h4, .map-context { font-size: 36px; }
 .map-side .ahead p, .preview-risk li b, .map-context .ch-intro { font-size: 44px !important; }
 .preview-risk li small { font-size: 36px; }
 .preview-actions .btn { font-size: 40px; padding: 24px; }
 .map-side .ch-title { font-size: 48px; }
 .map-node.visited::after { font-size: 30px; }
}
/* Graph decoration never receives input; only its node buttons are interactive. */
.map-lines, .map-terrain, .map-bands { pointer-events: none; }
.map-nodes { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.map-nodes button { pointer-events: auto; }
.map-plane.demo-map { min-height: 480px; }
.demo-map-teaser { padding: 12px 16px; border-top: 1px dashed var(--line-2); color: #b99ed5; font-size: 13px; }
@media (pointer: coarse) and (orientation: portrait) { .map-plane.demo-map { min-height: 1100px; } .demo-map-teaser { font-size: 40px; padding: 30px; } }