/* The Case Table (design review reviews/design.md §4): every screen is a lamp-lit tabletop and the
   incident arrives as objects on it. Plain CSS, no framework, no outside host (ISA D23): the fonts are
   self-hosted woff2 files under fonts/ (SIL Open Font License, license files beside them), the icons
   are hand-built SVG files under icons/ drawn through CSS masks. Every color is a token below; the
   test tests/app-contrast.test.ts reads these tokens and checks every text and control pair against
   WCAG AA in both modes. One meaning per color: amber means act, green success, wax red failure and
   seals, manila held-back facts, oxblood and copper chance, midnight and brass labor, baize the dice. */

/* ---------- fonts (self-hosted, same origin; font-src 'self') */
@font-face { font-family: "Fraunces"; src: url(fonts/fraunces-roman.4cd2fb4135.woff2) format("woff2"); font-weight: 500 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(fonts/atkinson-next.1e4cea71d7.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(fonts/atkinson-next-italic.6e221fe286.woff2) format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; src: url(fonts/atkinson-mono.f0230cab68.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
/* An ordinary zero for reading text. Atkinson Hyperlegible Next slashes its zero and the served file has
   no feature or alternate that removes the slash (its only substitutions are ccmp, frac, locl, pnum,
   tnum; zero.tf is the same slashed zero), so "$600" read as "$6ØØ" (live pass, visual item 3). This
   family covers the digit zero only (unicode-range) and takes it from a plain sans already on the
   viewer's device: local() reads no network, so font-src 'self' is untouched. Where none of these
   is installed, the zero falls through to Atkinson's slashed one, as before. Codes keep the slashed
   zero: they are set in Atkinson Hyperlegible Mono, which does not use this family. */
@font-face { font-family: "Case Zero"; src: local("Helvetica Neue"), local("HelveticaNeue"), local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"), local("Liberation Sans"), local("LiberationSans"); unicode-range: U+0030; font-weight: 100 599; font-style: normal; }
@font-face { font-family: "Case Zero"; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); unicode-range: U+0030; font-weight: 600 900; font-style: normal; }

/* ---------- tokens: the day table (light) */
:root {
  color-scheme: light dark;
  --table: #F5F1E8;      /* Parchment: the page */
  --sheet: #FFFCF5;      /* Linen: panels, dialogs */
  --ink: #2E1F1A;        /* Walnut Ink: body text */
  --ink-soft: #5E4337;   /* Saddle: notes, small labels */
  --edge: #8A7563;       /* Cedar: edges of text boxes, menus, choice cards (3:1 or better) */
  --amber: #D4761A;      /* Lamp Amber: the primary button, the picked choice's edge */
  --amber-ink: #1A1612;  /* text on amber */
  --story: #8F4A1E;      /* Burnt Sienna: story time, kicker, evidence-tag headings */
  --slate: #3F5A68;      /* Slate: links, the +2 role token */
  --good: #2F5D35;       /* Ledger Green: success only */
  --bad: #9B2820;        /* Wax Red: failure and seals only */
  --focus: #1F5F8B;      /* Signal Blue: the focus ring, on the table */
  --pick: #F8E3C8;       /* Amber Wash: fill of a picked choice (decoration; the edge and check carry it) */
  --rule: #DCCFBC;       /* hairlines between parts (decoration only) */
  --shadow: rgba(62, 39, 35, 0.14);
  --lamp: rgba(255, 255, 255, 0.65);

  /* objects keep one look in both modes, the way a card is cream whether the room is lit or not */
  --card: #FBF4E4;       /* Card Stock */
  --card-ink: #2E1F1A;
  --card-soft: #5E4337;
  --card-edge: #8A7563;
  --sienna: #8F4A1E;     /* headings on card stock and manila */
  --manila: #EBD9A8;
  --oxblood: #5C1F1A;
  --foil: #D9A066;       /* copper foil on oxblood */
  --midnight: #1E2A3F;
  --brass: #D8B860;      /* brass on midnight and walnut */
  --plate: #E7CF8A;      /* a brass plate behind dark text */
  --plate-ink: #1A1612;
  --banner: #E8943A;     /* the amber banner across the labor card's foot */
  --baize: #22402F;
  --rim: #B88A4A;
  --felt-ink: #F4EEE2;
  --bezel: #2A2622;
  --terminal: #0B0F14;
  --terminal-ink: #E6EDF3;
  --terminal-title: #FF7B72;
  --die-ink: #1A1612;
  --stamp-good: #2F5D35;
  --stamp-bad: #9B2820;
  --paper: #FFFDF8;      /* a text box or button sitting on card stock */
  --chip-role: #DCE6EC;  /* the slate +2 role token */
  --tag-off: #D9CDB0;    /* a held-back fact never uncovered: a face-down tag */
  --seg-off: #E2D6C2;    /* an empty segment of the chance bar (decoration) */
  --seal-ink: #FFF4EC;   /* words on the wax-red seal button */
  --seal-edge: #6E1B15;
  --focus-card: #1F5F8B; /* the focus ring inside card-stock objects, which stay cream in both modes */
  --die-ivory: #F2E8D0;  /* the top face, where the number sits */
  --die-amber: #F0B260;

  --radius: 12px;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Case Zero", "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  accent-color: var(--amber);
}

/* ---------- tokens: the night table (dark) */
@media (prefers-color-scheme: dark) {
  :root {
    --table: #1A1612;    /* Walnut Night */
    --sheet: #261F1A;    /* Walnut */
    --ink: #F4EEE2;      /* Lamplight */
    --ink-soft: #C2B5A3; /* Sand */
    --edge: #8A7A6A;     /* Ash */
    --amber: #E8943A;
    --amber-ink: #1A1612;
    --story: #E0A86A;    /* Copper */
    --slate: #8FB0C2;
    --good: #8CC79A;
    --bad: #F2917F;
    --focus: #7CC4F0;
    --pick: #3A2A1B;
    --rule: #43372D;
    --shadow: rgba(0, 0, 0, 0.5);
    --lamp: rgba(232, 148, 58, 0.10);
  }
}

/* ---------- base */
* { box-sizing: border-box; }
html { font-size: 18px; }
body {
  margin: 0; color: var(--ink); font-family: var(--font-body); line-height: 1.5;
  background-color: var(--table);
  background-image: radial-gradient(ellipse 80% 420px at 50% 0, var(--lamp), transparent 75%);
  background-repeat: no-repeat;
}
body.leader { font-size: 1.2rem; }
@media (min-width: 900px) { body.leader { font-size: 1.4rem; } }
a { color: var(--slate); text-underline-offset: 0.15em; }
h1, h2, h3 { font-family: var(--font-display); font-optical-sizing: auto; line-height: 1.12; letter-spacing: -0.005em; }
h1 { font-size: 2em; font-weight: 700; margin: 0.3em 0; }
h2 { font-size: 1.45em; font-weight: 650; margin: 0.6em 0 0.35em; }
h3 { font-size: 1.12em; font-weight: 650; margin: 1em 0 0.3em; }
/* a heading's leading icon keeps a gap before the words ("Debrief" touched its folder, live pass item 11); the story-time heading spaces its own with a flex gap */
h2 > .icon:first-child { margin-right: 0.35em; }
.story-time > .icon:first-child { margin-right: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
[tabindex="-1"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.place-card :focus-visible, .seat-head :focus-visible, .envelope :focus-visible, .ticket .receipt :focus-visible, .roll-slip :focus-visible,
.links li :focus-visible, .game-card :focus-visible, .rule-steps :focus-visible, .briefing :focus-visible { outline-color: var(--focus-card); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* ---------- icons: hand-built SVGs drawn in the text color through a mask */
.icon { display: inline-block; width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.icon-die { -webkit-mask-image: url(icons/die.33caca4824.svg); mask-image: url(icons/die.33caca4824.svg); }
.icon-card { -webkit-mask-image: url(icons/card.8a05ff9451.svg); mask-image: url(icons/card.8a05ff9451.svg); }
.icon-clock { -webkit-mask-image: url(icons/clock.da78b2f35f.svg); mask-image: url(icons/clock.da78b2f35f.svg); }
.icon-chair { -webkit-mask-image: url(icons/chair.28a2fbe9c3.svg); mask-image: url(icons/chair.28a2fbe9c3.svg); }
.icon-seal { -webkit-mask-image: url(icons/seal.63b9530de7.svg); mask-image: url(icons/seal.63b9530de7.svg); }
.icon-ticket { -webkit-mask-image: url(icons/ticket.5b4612a316.svg); mask-image: url(icons/ticket.5b4612a316.svg); }
.icon-copy { -webkit-mask-image: url(icons/copy.89e57ea10a.svg); mask-image: url(icons/copy.89e57ea10a.svg); }
.icon-folder { -webkit-mask-image: url(icons/folder.3510cb04cf.svg); mask-image: url(icons/folder.3510cb04cf.svg); }
.icon-plus { -webkit-mask-image: url(icons/plus.dadc2bfe7c.svg); mask-image: url(icons/plus.dadc2bfe7c.svg); }
.icon-minus { -webkit-mask-image: url(icons/minus.e92ca442be.svg); mask-image: url(icons/minus.e92ca442be.svg); }
.icon-check { -webkit-mask-image: url(icons/check.47766bdef5.svg); mask-image: url(icons/check.47766bdef5.svg); }
.icon-cross { -webkit-mask-image: url(icons/cross.3977b67897.svg); mask-image: url(icons/cross.3977b67897.svg); }
.icon-turn { -webkit-mask-image: url(icons/turn.2eb3f8c728.svg); mask-image: url(icons/turn.2eb3f8c728.svg); }
.icon-help { -webkit-mask-image: url(icons/help.38d9541298.svg); mask-image: url(icons/help.38d9541298.svg); }
.icon-screen { -webkit-mask-image: url(icons/screen.b266a9ce5c.svg); mask-image: url(icons/screen.b266a9ce5c.svg); }
.icon-phone { -webkit-mask-image: url(icons/phone.1bb7201486.svg); mask-image: url(icons/phone.1bb7201486.svg); }
.icon-chevron { -webkit-mask-image: url(icons/chevron.13cda5d3d0.svg); mask-image: url(icons/chevron.13cda5d3d0.svg); }

/* ---------- chrome: fine-print disclaimer, header with the role plate */
.disclaimer { margin: 0; padding: 0.35rem 1rem; font-size: 0.78rem; line-height: 1.4; color: var(--ink-soft); background: var(--sheet); border-bottom: 1px solid var(--rule); }
.site-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; max-width: 62rem; margin: 0 auto; padding: 0.7rem 1rem 0.4rem; }
.brand { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); text-decoration: none; letter-spacing: 0.01em; }
.site-title { color: var(--ink-soft); font-size: 0.95rem; }
.role-badge { margin-left: auto; padding: 0.15rem 0.75rem; border-radius: 6px; background: var(--plate); color: var(--plate-ink); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 1px 2px var(--shadow); }
main { max-width: 62rem; margin: 0 auto; padding: 0.5rem 1rem 3rem; }

/* ---------- buttons: one primary per screen, amber; ghost for everything else */
.btn { display: inline-flex; align-items: center; gap: 0.5em; font: inherit; font-weight: 700; cursor: pointer; border-radius: 10px; padding: 0.55rem 1rem; border: 2px solid var(--edge); background: var(--sheet); color: var(--ink); line-height: 1.2; }
.btn:hover { border-color: var(--ink-soft); }
.btn.primary { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18), 0 4px 12px var(--shadow); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.primary:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18); }
.btn.big { font-size: 1.12em; padding: 0.75rem 1.4rem; margin-top: 1rem; }
.btn.roll { font-size: 1.3em; padding: 0.85rem 1.8rem; border-radius: 14px; }
.btn.roll .icon { width: 1.4em; height: 1.4em; }
.btn.small { font-size: 0.85em; padding: 0.35rem 0.7rem; border-width: 1.5px; }
.btn.danger { border-color: var(--bad); color: var(--bad); }
.btn:disabled { cursor: default; opacity: 0.6; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0.75rem 0; }

/* ---------- form controls: Cedar or Ash edges, at least 3:1 against both the sheet and the table */
.field { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.75rem 0; }
.field > span, .field-label { font-weight: 700; }
input[type=text], input[type=number], input[type=password], select, textarea {
  font: inherit; color: var(--ink); background: var(--sheet); border: 2px solid var(--edge); border-radius: 8px; padding: 0.5rem 0.6rem; width: 100%; max-width: 100%;
}
select:disabled { color: var(--ink-soft); border-style: dashed; }
/* radio buttons drawn by the page, not the browser: the native empty circle was dark grey on the dark
   card (live pass, visual item 12). The ring is the control edge (edge on sheet, 3:1 or better in both
   modes); a picked one fills with ink around a dot (ink on the amber wash, a checked text pair) */
input[type=radio] { appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; flex: none; width: 1.2em; height: 1.2em; margin: 0; border: 2px solid var(--edge); border-radius: 50%; background: var(--sheet); cursor: pointer; }
input[type=radio]::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform 120ms ease; }
input[type=radio]:checked { border-color: var(--ink); }
input[type=radio]:checked::before { transform: scale(1); }
/* high-contrast modes replace backgrounds, which would erase the dot: hand the radio back to the system there */
@media (forced-colors: active) { input[type=radio] { appearance: auto; -webkit-appearance: auto; } input[type=radio]::before { display: none; } }
textarea { resize: vertical; }
.note { color: var(--ink-soft); font-size: 0.9em; }
.notice { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.7rem 1rem; margin: 0.5rem 0; border-radius: 10px; border: 2px solid var(--edge); border-left: 6px solid var(--amber); background: var(--sheet); }
.notice p { margin: 0; flex: 1 1 20rem; }
.error { color: var(--bad); min-height: 1em; margin: 0.4em 0; font-weight: 700; }
.label { display: block; font-size: 0.78em; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; }
.code { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.08em; }
.prose p { margin: 0 0 0.7em; }
.prose.lead { font-size: 1.05em; }

/* ---------- panels: the sheet, a paper object on the table */
.panel { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.1rem 1.35rem; margin: 1rem 0; box-shadow: 0 1px 2px var(--shadow), 0 8px 24px var(--shadow); }

/* ============================================================ welcome page */
.hero { padding: 0.6rem 0 0.2rem; }
.hero h1 { font-size: 2.6rem; font-weight: 800; margin: 0.4rem 0 0.25rem; }
.hero .tagline { font-size: 1.2rem; margin: 0 0 1rem; max-width: 40rem; }
.hero .pick { font-size: 1.15rem; margin: 1rem 0 0.6rem; }
.doors { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
/* the two doors are equal place cards, so neither looks picked already (player test 1.1) */
.door { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.9rem; align-items: start; padding: 1.2rem 1.25rem 1.1rem; border: 2px solid var(--card-edge); border-radius: 14px; color: var(--card-ink); background: var(--card); text-decoration: none; box-shadow: 0 2px 0 var(--card-edge), 0 10px 22px var(--shadow); transition: transform 160ms ease, box-shadow 160ms ease; }
.door::before { content: ""; position: absolute; left: 14px; right: 14px; top: 6px; border-top: 1px dashed var(--card-edge); }
.door .icon { grid-row: span 2; width: 2.4rem; height: 2.4rem; color: var(--sienna); margin-top: 0.2rem; }
.door strong { font-family: var(--font-display); font-weight: 750; font-size: 1.5rem; color: var(--card-ink); }
.door span:not(.icon) { display: block; color: var(--card-ink); }
.door:hover, .door:focus-visible { transform: translateY(-3px); box-shadow: 0 2px 0 var(--card-edge), 0 14px 28px var(--shadow); }
.welcome .disclaimer-fine { margin: 1rem 0 0; font-size: 0.8rem; color: var(--ink-soft); max-width: 46rem; }
.intro { margin-top: 1.4rem; }
.intro p { max-width: 46rem; margin: 0.3rem 0 0.7rem; }
.intro .who { color: var(--ink-soft); }
.more { margin-top: 1.4rem; }
.more details { background: var(--sheet); border: 1px solid var(--rule); border-radius: 0 10px 10px 10px; margin: 0.9rem 0; padding: 0.2rem 1rem 0.4rem; box-shadow: 0 1px 2px var(--shadow); }
.more summary { cursor: pointer; font-family: var(--font-display); font-weight: 650; font-size: 1.12rem; padding: 0.5rem 0; list-style: none; display: flex; align-items: center; gap: 0.5rem; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: ""; width: 0.9em; height: 0.9em; background-color: var(--story); -webkit-mask: url(icons/chevron.13cda5d3d0.svg) center / contain no-repeat; mask: url(icons/chevron.13cda5d3d0.svg) center / contain no-repeat; transition: transform 160ms ease; }
.more details[open] > summary::before { transform: rotate(90deg); }
.more p { max-width: 46rem; }
.how dt { font-weight: 700; margin-top: 0.7rem; font-family: var(--font-display); }
.how dd { margin: 0.1rem 0 0 0; max-width: 46rem; }
.links { list-style: none; padding: 0; display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.links li { background: var(--card); color: var(--card-ink); border: 1px solid var(--card-edge); border-radius: 8px; padding: 0.7rem 0.9rem; box-shadow: 0 1px 2px var(--shadow); }
.links a { color: var(--card-ink); font-weight: 700; }
.links .link-note { display: block; color: var(--card-soft); font-size: 0.9em; margin-top: 0.3rem; }
/* phones: the two doors right under the title and the tagline (usability 3.1) */
@media (max-width: 40rem) {
  .hero h1 { font-size: 2rem; }
  .hero .tagline { font-size: 1.05rem; margin-bottom: 0.6rem; }
}

/* ============================================================ leader: setup */
.setup-head h1 { margin-top: 0.2rem; }
.scenario-about { margin: -0.2rem 0 0.6rem; padding: 0.6rem 0.8rem; border-left: 4px solid var(--story); background: var(--table); border-radius: 0 8px 8px 0; }
.scenario-about p { margin: 0; }
.scenario-about .mission { color: var(--ink-soft); font-size: 0.92em; margin-top: 0.2rem; }
.seat-cards { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: 0.6rem 0; }
.place-card { margin: 0; min-width: 0; padding: 0.7rem 0.9rem 0.8rem; background: var(--card); color: var(--card-ink); border: 2px solid var(--card-edge); border-radius: 10px; box-shadow: 0 2px 0 var(--card-edge), 0 6px 14px var(--shadow); }
/* the legend sits inside the card, not on its top edge: a floated legend is laid out as ordinary content
   (HTML rendering rules), so "Seat N" never straddles the border onto the page (live pass, visual item 1);
   "Seat 1" never breaks, and the leader's tag drops to its own line when the card is too narrow for both */
.place-card legend { float: left; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; margin: 0 0 0.15rem; padding: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.1em; line-height: 1.25; color: var(--card-ink); }
.place-card legend > span:first-child { white-space: nowrap; }
.place-card legend + * { clear: both; }
.place-card .field { margin: 0.4rem 0; }
.place-card input, .place-card select { background: var(--paper); color: var(--card-ink); border-color: var(--card-edge); }
.place-card .note { color: var(--card-soft); margin: 0.4rem 0 0; }
.leader-tag { display: inline-block; max-width: 100%; padding: 0.05rem 0.5rem; border-radius: 5px; background: var(--plate); color: var(--plate-ink); font-family: var(--font-body); font-size: 0.72em; font-weight: 700; letter-spacing: 0.03em; }
.place-card.is-leader { border-color: var(--rim); box-shadow: 0 2px 0 var(--rim), 0 6px 14px var(--shadow); }

/* ============================================================ leader: the game rail (one line) */
/* Three rows on every screen, the packet included (live pass item 9, recheck item A). The title and the
   code tag: the same on every screen of a game, so wherever they wrap, they wrap the same way. The pins and
   the status line: the only part that changes from screen to screen, so it is one line that never wraps;
   the status line shortens with an ellipsis instead (a screen reader still reads it whole). Then the three
   folds, always in the same order, so nothing above can push them down. An open fold's body is a panel
   laid over the top of the sheet under the rail, so opening one never moves a button, and opening one
   closes the others (src/leader.ts). */
.rail { position: relative; display: grid; gap: 0.35rem; padding: 0.45rem 0.8rem; margin: 0.4rem 0 0; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; font-size: 0.72em; box-shadow: 0 1px 2px var(--shadow); }
.rail-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }
.rail-line .code-tag { margin-left: auto; }
.rail-progress { display: flex; flex-wrap: nowrap; align-items: center; gap: 1rem; min-width: 0; }
.rail-progress .pins { flex: none; flex-wrap: nowrap; }
.rail-progress .progress { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.rail .fold-body { position: absolute; left: 0; right: 0; top: calc(100% + 0.3rem); z-index: 5; padding: 0.8rem 1rem; background: var(--sheet); border: 1px solid var(--edge); border-radius: 10px; box-shadow: 0 10px 28px var(--shadow); }
.rail .fold-body .plaque { margin: 0; }
.rail-title { margin: 0; font-size: 1.35em; font-weight: 750; }
.rail .progress { margin: 0; font-weight: 700; color: var(--story); letter-spacing: 0.02em; }
.pins { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; list-style: none; margin: 0; padding: 0; }
.pins > li { display: inline-flex; align-items: center; gap: 0.3rem; }
.pin { position: relative; width: 1.25em; height: 1.25em; border-radius: 50%; border: 2px solid var(--edge); background: var(--sheet); display: inline-flex; align-items: center; justify-content: center; }
.pin::before { content: ""; width: 0.8em; height: 0.8em; background-color: currentColor; -webkit-mask: none center / contain no-repeat; mask: none center / contain no-repeat; }
.pin.good { background: var(--good); border-color: var(--good); color: var(--sheet); animation: pin-fill 300ms ease-out both; }
.pin.good::before { -webkit-mask-image: url(icons/check.47766bdef5.svg); mask-image: url(icons/check.47766bdef5.svg); }
.pin.bad { background: var(--bad); border-color: var(--bad); color: var(--sheet); animation: pin-fill 300ms ease-out both; }
.pin.bad::before { -webkit-mask-image: url(icons/cross.3977b67897.svg); mask-image: url(icons/cross.3977b67897.svg); }
.pin.current { border-color: var(--amber); box-shadow: 0 0 0 3px var(--pick); }
.pin.todo::before, .pin.current::before { display: none; }
/* after a decision's pin, its own marks: a face-down chance card (oxblood, copper edge), and after labor a
   face-down labor card (midnight, brass edge) carrying the chair, the same pair of looks as the cards
   themselves; each is its own element, so both can follow one decision (live pass, visual item 12) */
.mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 0.95em; height: 1.2em; border-radius: 2px; }
.mark.chance { background: var(--oxblood); border: 1.5px solid var(--foil); }
.mark.labor { background: var(--midnight); border: 1.5px solid var(--brass); }
.mark.labor::before { content: ""; width: 0.8em; height: 0.8em; background-color: var(--brass); -webkit-mask: url(icons/chair.28a2fbe9c3.svg) center / contain no-repeat; mask: url(icons/chair.28a2fbe9c3.svg) center / contain no-repeat; }
.code-tag { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.1rem 0.5rem; border-radius: 5px; background: var(--plate); color: var(--plate-ink); }
.code-tag .label { color: var(--plate-ink); font-size: 0.8em; }
.code-tag .code { font-size: 1.05em; }
.fold > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.55rem; border: 1.5px solid var(--edge); border-radius: 999px; font-weight: 700; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: ""; width: 0.75em; height: 0.75em; background-color: currentColor; -webkit-mask: url(icons/chevron.13cda5d3d0.svg) center / contain no-repeat; mask: url(icons/chevron.13cda5d3d0.svg) center / contain no-repeat; transform: rotate(90deg); transition: transform 160ms ease; }
.fold[open] > summary::after { transform: rotate(-90deg); }
.fold[open] > summary { border-color: var(--amber); }
.fold-body { padding: 0.6rem 0.2rem 0.3rem; font-size: 1.25em; }
.seat-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.seat-list li { padding: 0.25rem 0.6rem; border-radius: 6px; background: var(--card); color: var(--card-ink); border: 1.5px solid var(--card-edge); font-size: 0.85em; }
.seat-list li .seat-n { font-weight: 700; margin-right: 0.3em; }
.seat-list .gone { text-decoration: line-through; opacity: 0.7; transform: rotate(-3deg); }
.seat-list .gone::before { content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.3em; vertical-align: -0.1em; background-color: currentColor; -webkit-mask: url(icons/chair.28a2fbe9c3.svg) center / contain no-repeat; mask: url(icons/chair.28a2fbe9c3.svg) center / contain no-repeat; }
.seat-list .leader-tag { margin-left: 0.4em; }
.slip-die { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 1.4em; color: var(--card-ink); }

/* the brass plaque with the session code (the packet screen, and "Show the code" for latecomers) */
.plaque { display: grid; gap: 0.25rem; justify-items: start; padding: 0.9rem 1.2rem; margin: 1rem 0; border-radius: 10px; background: linear-gradient(180deg, #EBD597, #D8B860); color: var(--plate-ink); border: 2px solid var(--rim); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(0, 0, 0, 0.15), 0 6px 18px var(--shadow); }
.plaque .label { color: var(--plate-ink); }
/* one line always: a code split at a hyphen reads as two codes on a narrow shared screen (live3 recheck) */
.plaque .code { font-size: min(2.4em, 6.5vw); letter-spacing: 0.14em; line-height: 1.1; white-space: nowrap; }
.plaque p { margin: 0; color: var(--plate-ink); max-width: 40rem; }
.plaque .address { font-weight: 700; }
.plaque .address .code { font-size: 1em; letter-spacing: 0.02em; }

/* ============================================================ the before-you-start packet: a case file */
.packet-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0 0.2rem; }
.packet-tabs .btn { font-size: 0.78em; padding: 0.3rem 0.7rem; border-radius: 8px 8px 2px 2px; background: var(--manila); color: var(--card-ink); border-color: var(--card-edge); }
.packet-part { border-top: 1px solid var(--rule); margin-top: 0.9rem; scroll-margin-top: 1rem; }
.packet-part > h3 { display: inline-block; margin-top: 0.9rem; padding: 0.15rem 0.7rem; border-radius: 6px 6px 0 0; background: var(--manila); color: var(--card-ink); font-size: 1em; }
.briefing { background: var(--card); color: var(--card-ink); border: 1px solid var(--card-edge); border-radius: 10px; padding: 0.2rem 1.1rem 0.5rem; margin-top: 1rem; }
.briefing > h3 { background: transparent; padding-left: 0; color: var(--sienna); }
.org-name { font-family: var(--font-display); font-size: 1.3em; font-weight: 700; margin: 0.4rem 0 0; }
.org { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 1rem; margin: 0.4rem 0; }
.org dt { font-weight: 700; color: var(--ink-soft); }
.org dd { margin: 0; }
.assets, .chairs, .processes { padding-left: 1.2rem; }
.assets li, .chairs li, .processes li { margin: 0.45rem 0; }
.assets li p { margin: 0.1rem 0 0; }
.chairs .skills { display: block; color: var(--ink-soft); font-size: 0.92em; }
.glossary dt { font-weight: 700; margin-top: 0.5rem; }
.glossary dd { margin: 0.1rem 0 0 0; }
.packet-fold > summary, .glossary-fold > summary { cursor: pointer; font-family: var(--font-display); font-weight: 650; font-size: 1.1em; padding: 0.6rem 0 0.3rem; }

/* ============================================================ an event: the decision sheet */
.story-time { display: flex; align-items: center; gap: 0.4em; margin: 0.2rem 0 0.6rem; font-size: 2.2em; font-weight: 650; line-height: 1.05; color: var(--story); }
.story-time .icon { width: 0.7em; height: 0.7em; }
.prose.fact { font-size: 1.05em; max-width: 36em; }
.skip-row { margin: 0.2rem 0 0.4rem; }
.decision-box { margin: 1.2rem 0 0.6rem; padding: 0.4rem 1rem 0.2rem; border: 2px solid var(--edge); border-left: 6px solid var(--story); border-radius: 10px; background: var(--table); }
.decision-box h3 { margin-top: 0.4rem; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-body); color: var(--story); }
.prose.decision { font-family: var(--font-display); font-weight: 560; font-size: 1.15em; line-height: 1.35; }
.choices { border: none; padding: 0; margin: 1rem 0 0; min-width: 0; }
.choices legend { font-weight: 700; margin-bottom: 0.4rem; font-family: var(--font-display); font-size: 1.05em; }
.choice-list { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.choice { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 0.7rem; padding: 0.7rem 2.2rem 0.7rem 0.8rem; border: 2px solid var(--edge); border-radius: 10px; background: var(--sheet); cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; }
.choice:hover { border-color: var(--ink-soft); }
.choice input[type=radio] { width: 1.2em; height: 1.2em; margin: 0.15em 0 0; flex: none; }
.choice .choice-label { flex: 1 1 10rem; font-weight: 700; }
.choice .cost { flex-basis: 100%; padding-left: 1.9rem; font-size: 0.9em; color: var(--ink); }
.choice .cost b { margin-right: 0.3em; }
/* a picked choice: a 2 px amber edge and a check mark carry it; the wash is decoration */
.choice:has(input:checked) { border-color: var(--amber); background: var(--pick); transform: translateY(-3px); box-shadow: 0 6px 14px var(--shadow); }
.choice:has(input:checked)::after { content: ""; position: absolute; right: 0.7rem; top: 0.7rem; width: 1.1em; height: 1.1em; background-color: var(--ink); -webkit-mask: url(icons/check.47766bdef5.svg) center / contain no-repeat; mask: url(icons/check.47766bdef5.svg) center / contain no-repeat; }
.choice.own { grid-column: 1 / -1; }
.choice.own textarea { flex-basis: 100%; margin-left: 1.9rem; width: calc(100% - 1.9rem); }
.choice.own textarea:disabled { opacity: 0.55; }
.escalation .choice-list { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.escalation .choice { min-height: 9rem; }
.ribbon { display: block; margin: -1.1rem -1.35rem 1rem; padding: 0.45rem 1.35rem; border-radius: var(--radius) var(--radius) 0 0; background: var(--oxblood); color: var(--foil); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.78em; }
.bonus-row { display: grid; gap: 0 1.2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 0.4rem; }
.process-hint, .problem-kind { margin: 0.3rem 0; }

/* the roll summary (usability 3.3 (5), design top fix 6): what will be rolled, the bonuses, the need, the odds */
.roll-slip { margin: 1.2rem 0 0.4rem; padding: 0.8rem 1rem; border-radius: 10px; background: var(--card); color: var(--card-ink); border: 2px dashed var(--card-edge); }
.roll-slip p { margin: 0.15rem 0; }
.roll-slip .note, .roll-slip .label, .rule-steps .note { color: var(--card-soft); }
.slip-for { font-weight: 700; }
.slip-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.4rem 0; }
.slip-line .d12 { width: 1.9em; height: 1.9em; }
.slip-plus { font-weight: 700; color: var(--card-soft); }
.chip { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.88em; font-weight: 700; border: 1.5px solid var(--card-edge); background: var(--paper); color: var(--card-ink); animation: chip-drop 180ms ease-out both; }
.chip.plan { background: var(--manila); }
.chip.role { background: var(--chip-role); }
.slip-odds { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; margin-top: 0.5rem; }
.slip-odds .chance { font-family: var(--font-display); font-weight: 800; font-size: 1.7em; line-height: 1; }
.segments { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; flex: 1 1 12rem; max-width: 22rem; height: 0.8rem; }
.seg { background: var(--seg-off); border-radius: 2px; }
.seg.on { background: var(--stamp-good); }
.roll-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 0.8rem; }
.roll-actions .btn.roll { margin-top: 0; }
.roll-note { margin: 0.5rem 0 0; }

/* the document itself: a note on a laptop screen, an email, a message, a page (design §5.5) */
.artifact { margin: 1.2rem 0; }
.artifact-caption { font-size: 0.8em; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: 0.35rem; }
.artifact-doc { border-radius: 8px; padding: 0.9rem 1.1rem; border: 1px solid var(--card-edge); background: var(--card); color: var(--card-ink); }
.artifact-title { margin: 0 0 0.5rem; font-weight: 700; }
.artifact-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.artifact-ransom-note .device { position: relative; padding: 14px 14px 18px; border-radius: 16px 16px 6px 6px; background: var(--bezel); box-shadow: 0 10px 26px var(--shadow); max-width: 52rem; }
.artifact-ransom-note .device::before { content: ""; position: absolute; top: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #4A4440; }
/* the base juts out 10 px each side, less than the sheet's padding, so it never hangs past the paper (live pass, visual item 2) */
.artifact-ransom-note .device::after { content: ""; position: absolute; left: -10px; right: -10px; bottom: -10px; height: 10px; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #8C857C, #5E5850); }
/* the whole note shows: no fixed height and no inner scroll, which hid three quarters of it with no scrollbar (visual item 2) */
.artifact-ransom-note .artifact-doc { background: var(--terminal); color: var(--terminal-ink); border-color: #000; font-family: var(--font-mono); font-size: 0.85em; line-height: 1.45; animation: screen-wake 1200ms ease-out both; }
.artifact-ransom-note .artifact-title { color: var(--terminal-title); letter-spacing: 0.04em; }
.artifact-ransom-note .artifact-text { max-width: 72ch; }
.artifact-email .artifact-doc { box-shadow: 0 2px 6px var(--shadow); }
.artifact-email .artifact-title { padding-bottom: 0.4rem; border-bottom: 1px solid var(--card-edge); }
.artifact-message .artifact-doc { border-radius: 18px 18px 18px 4px; max-width: 36rem; }
.artifact-document .artifact-doc { font-family: var(--font-display); font-weight: 500; box-shadow: 0 2px 6px var(--shadow); }

/* a held-back fact, revealed now: a manila evidence tag with a punched hole and a string */
.tag { position: relative; margin: 1rem 0 1rem 1.4rem; padding: 0.7rem 1.1rem 0.7rem 2.2rem; background: var(--manila); color: var(--card-ink); border-radius: 4px 10px 10px 4px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); box-shadow: 0 4px 10px var(--shadow); transform-origin: 0 50%; animation: tag-swing 600ms ease-out both; }
.tag::before { content: ""; position: absolute; left: 0.9rem; top: 50%; width: 0.7rem; height: 0.7rem; margin-top: -0.35rem; border-radius: 50%; background: var(--sheet); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }
.tag h3 { margin: 0 0 0.25rem; color: var(--sienna); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.07em; font-family: var(--font-body); }
.tag .prose p:last-child { margin-bottom: 0; }

/* the dice rules card (a dialog): three pictures, the rules, an odds chart, the table */
dialog.dice-help { max-width: 40rem; width: calc(100% - 2rem); border: 2px solid var(--card-edge); border-radius: 14px; padding: 1.1rem 1.4rem; background: var(--sheet); color: var(--ink); font-size: 1rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); }
dialog::backdrop { background: rgba(20, 14, 10, 0.6); }
.rule-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; list-style: none; padding: 0; margin: 0.6rem 0 0.8rem; counter-reset: step; }
.rule-steps li { display: grid; justify-items: center; align-content: start; gap: 0.35rem; padding: 0.6rem 0.4rem; text-align: center; background: var(--card); color: var(--card-ink); border: 1px solid var(--card-edge); border-radius: 10px; font-weight: 700; font-size: 0.9em; counter-increment: step; }
.rule-steps li::before { content: counter(step); font-family: var(--font-display); font-weight: 800; color: var(--sienna); }
.rule-steps .pic { display: flex; align-items: center; justify-content: center; gap: 0.25rem; min-height: 3rem; }
.rule-steps .d12 { width: 2.6rem; height: 2.6rem; }
.beat { font-family: var(--font-display); font-weight: 800; font-size: 1.4em; padding: 0 0.5rem; border-bottom: 3px double var(--card-ink); }
.dice-help .rules { padding-left: 1.2rem; }
.dice-help .rules li { margin: 0.35rem 0; }
.odds-chart { margin: 0.4rem 0 0.8rem; }
.odds-chart fieldset { border: none; padding: 0; margin: 0 0 0.4rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.odds-chart legend { font-weight: 700; margin-bottom: 0.3rem; }
.odds-pick { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border: 2px solid var(--edge); border-radius: 999px; cursor: pointer; font-size: 0.9em; }
.odds-pick:has(input:checked) { border-color: var(--amber); background: var(--pick); }
.chart { display: block; width: 100%; height: auto; max-height: 11rem; }
.chart .bar { fill: var(--rule); stroke: var(--edge); stroke-width: 0.4; }
.odds-chart:has(.pick-0:checked) .bar.w0, .odds-chart:has(.pick-1:checked) .bar.w1,
.odds-chart:has(.pick-2:checked) .bar.w2, .odds-chart:has(.pick-3:checked) .bar.w3 { fill: var(--good); }
.chart .axis { fill: var(--ink-soft); font: 700 4px var(--font-body); }
.odds { border-collapse: collapse; margin: 0.3rem 0 0.8rem; }
.odds th, .odds td { text-align: left; padding: 0.3rem 0.9rem 0.3rem 0; border-bottom: 1px solid var(--rule); }
.odds td { font-weight: 700; font-variant-numeric: tabular-nums; }
.dice-help .why { font-style: italic; }

/* ============================================================ the roll: felt tray, the throw, the stamp */
.action-taken { font-family: var(--font-display); font-weight: 560; font-size: 1.2em; margin: 0.1rem 0 0.6rem; }
.tray { position: relative; display: flex; justify-content: center; align-items: center; min-height: 9.5em; margin: 0.6rem 0 0.8rem; padding: 1em; border-radius: 16px; background: radial-gradient(ellipse at 50% 35%, #2C5340, var(--baize) 70%); border: 6px solid var(--rim); box-shadow: inset 0 3px 14px rgba(0, 0, 0, 0.55), 0 4px 12px var(--shadow); overflow: hidden; }
.dice-faces { display: flex; gap: 1.2em; }
.d12 { width: 7em; height: 7em; overflow: visible; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.45)); animation: d12-roll 1000ms cubic-bezier(0.25, 0.7, 0.3, 1) both; }
.d12 + .d12 { animation-delay: 140ms; }
.d12.still { animation: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }
.d12 polygon { stroke-width: 1.5; stroke-linejoin: round; }
.d12.ivory polygon { stroke: #5A4632; }
.d12.ivory .d12-top { fill: var(--die-ivory); }
.d12.ivory .d12-f4 { fill: #E3D5B3; }
.d12.ivory .d12-f0, .d12.ivory .d12-f3 { fill: #CDBB92; }
.d12.ivory .d12-f1, .d12.ivory .d12-f2 { fill: #B39F72; }
.d12.amber polygon { stroke: #5A3A12; }
.d12.amber .d12-top { fill: var(--die-amber); }
.d12.amber .d12-f4 { fill: #E39A3E; }
.d12.amber .d12-f0, .d12.amber .d12-f3 { fill: #C9802A; }
.d12.amber .d12-f1, .d12.amber .d12-f2 { fill: #A5651B; }
.d12 .d12-glint { fill: rgba(255, 255, 255, 0.5); stroke: none; }
.d12-num, .d12-decoy { fill: var(--die-ink); font: 700 32px var(--font-body); }
.d12-num.wide { font-size: 27px; }
.d12-num { animation: d12-num 1000ms ease-out both; }
.d12 + .d12 .d12-num { animation-delay: 140ms; }
.d12-mark { stroke: var(--die-ink); stroke-width: 2.5; stroke-linecap: round; animation: d12-num 1000ms ease-out both; }
.d12-decoy { opacity: 0; }
.d12-decoy.d1 { animation: decoy-1 1000ms linear both; }
.d12-decoy.d2 { animation: decoy-2 1000ms linear both; }
.d12-decoy.d3 { animation: decoy-3 1000ms linear both; }
.d12.still .d12-num, .d12.still .d12-mark { animation: none; }
@keyframes d12-roll {
  0% { transform: translate(-150%, -45%) rotate(-540deg) scale(0.6); opacity: 0; }
  35% { transform: translate(-12%, 0) rotate(-200deg) scale(1.08); opacity: 1; }
  50% { transform: translate(4%, -14%) rotate(-90deg) scale(1.03); }
  65% { transform: translate(7%, 0) rotate(-20deg) scale(1.02, 0.94); }
  80% { transform: translate(2%, 0) rotate(6deg); }
  100% { transform: none; opacity: 1; }
}
@keyframes d12-num { 0%, 68% { opacity: 0; } 100% { opacity: 1; } }
@keyframes decoy-1 { 0%, 8% { opacity: 0; } 10%, 28% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes decoy-2 { 0%, 30% { opacity: 0; } 32%, 48% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes decoy-3 { 0%, 50% { opacity: 0; } 52%, 66% { opacity: 1; } 68%, 100% { opacity: 0; } }

/* the staged reveal: the sum, the line, the stamp, the outcome, then the button, about 0.2 s apart */
.after-roll > * { animation: stage-in 220ms ease-out both; }
.after-roll > .st2 { animation-delay: 200ms; }
.after-roll > .st3 { animation: stamp-in 220ms cubic-bezier(0.3, 1.4, 0.5, 1) 400ms both; }
.after-roll > .st4 { animation-delay: 620ms; }
.after-roll > .st5 { animation-delay: 760ms; }
.sum { margin: 0.2rem 0; font-family: var(--font-display); font-weight: 750; font-size: 1.6em; font-variant-numeric: lining-nums tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0.2rem 0 0.4rem; }
.needs { margin: 0.2rem 0 0.6rem; color: var(--ink-soft); }
.stamp { display: inline-block; margin: 0.4rem 0 0.8rem; padding: 0.15em 0.5em; font-family: var(--font-display); font-weight: 900; font-size: 2.6em; line-height: 1; text-transform: uppercase; letter-spacing: 0.06em; border: 6px double currentColor; border-radius: 8px; transform: rotate(-4deg); }
.stamp.good { color: var(--good); }
.stamp.bad { color: var(--bad); }
.result.is-success { border-left: 6px solid var(--good); }
.result.is-failure { border-left: 6px solid var(--bad); }
.result.is-failure .after-roll { animation: thump 180ms ease-in-out 620ms both; }
.prose.outcome { font-size: 1.05em; max-width: 36em; }

/* ============================================================ chance card and labor: cards that turn over */
.card-screen { text-align: center; }
.game-card { position: relative; max-width: 34rem; margin: 0.8rem auto; text-align: left; border-radius: 16px; background: var(--card); color: var(--card-ink); border: 3px solid var(--card); box-shadow: 0 0 0 2px var(--card-edge), 0 14px 30px var(--shadow); overflow: hidden; }
.card-band { margin: 0; padding: 0.7rem 1.3rem; font-family: var(--font-display); font-size: 1.15em; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.game-card.random { border-color: var(--oxblood); }
.game-card.random .card-band { background: var(--oxblood); color: var(--foil); }
.game-card.labor { border-color: var(--midnight); }
.game-card.labor .card-band { background: var(--midnight); color: var(--brass); }
.card-body { padding: 1rem 1.3rem 0.4rem; }
.card-note { margin: 0; padding: 0.7rem 1.3rem; background: var(--banner); color: var(--plate-ink); font-weight: 700; display: flex; gap: 0.6rem; align-items: center; }
.card-note .prose p { margin: 0; }
/* the face-down back: oxblood with a copper border for chance, midnight with brass for labor; a card-stock rim like a real playing card */
.card-back { display: grid; place-items: center; min-height: 15rem; margin: 0.5rem; border-radius: 10px; }
.card-back .icon { width: 5rem; height: 5rem; }
.game-card.random .card-back { background: repeating-linear-gradient(45deg, #66231D 0 8px, var(--oxblood) 8px 16px); border: 3px double var(--foil); color: var(--foil); }
.game-card.labor .card-back { background: repeating-linear-gradient(-45deg, #243250 0 8px, var(--midnight) 8px 16px); border: 3px double var(--brass); color: var(--brass); }
.game-card.face-down { animation: card-arrive 400ms ease-out both; }
.game-card.turned .card-face { animation: card-turn 600ms ease-out both; }
/* the labor card was announced by "Turn over the next card": it arrives face down, holds, and turns itself over */
.game-card.labor.auto .card-back { position: absolute; inset: 0; z-index: 2; margin: 0; border-radius: 13px; min-height: 0; animation: back-off 1000ms ease-in both; pointer-events: none; }
.game-card.labor.auto .card-face { animation: face-on 1000ms ease-out both; }
.card-screen > .btn { margin-left: auto; margin-right: auto; }
@keyframes card-arrive { 0% { transform: translateY(-24px) rotate(-3deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes card-turn { 0% { transform: perspective(900px) rotateY(-90deg); opacity: 0.4; } 100% { transform: none; opacity: 1; } }
@keyframes back-off { 0% { transform: translateY(-24px); opacity: 0; } 30%, 60% { transform: none; opacity: 1; } 99% { transform: perspective(900px) rotateY(90deg); opacity: 1; visibility: visible; } 100% { transform: perspective(900px) rotateY(90deg); opacity: 0; visibility: hidden; } }
@keyframes face-on { 0%, 70% { transform: perspective(900px) rotateY(-90deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ============================================================ debrief: the case log */
/* square to the page: a tilted card slanted every line of the receipt instruction (live pass, visual item 4) */
.now-box { margin: 0.6rem 0 1.2rem; padding: 0.8rem 1.1rem; background: var(--card); color: var(--card-ink); border: 1px solid var(--card-edge); border-radius: 6px; box-shadow: 0 4px 12px var(--shadow); }
.now-box h3 { margin: 0.1rem 0 0.4rem; color: var(--sienna); }
.now-box p { margin: 0.3rem 0; }
.case-log { list-style: none; padding: 0 0 0 1.6rem; margin: 0.6rem 0; border-left: 3px solid var(--rule); }
.case-log > li { position: relative; margin: 0 0 1rem; padding-left: 0.4rem; }
.case-log > li::before { content: ""; position: absolute; left: -2.35rem; top: 0.2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 2px solid var(--edge); background: var(--sheet); }
.case-log > li.good::before { background: var(--good); border-color: var(--good); }
.case-log > li.bad::before { background: var(--bad); border-color: var(--bad); }
.case-log > li.chance::before { border-radius: 3px; background: var(--oxblood); border-color: var(--foil); }
.case-log > li.labor::before { background: var(--midnight); border-color: var(--brass); }
.case-log .when { font-family: var(--font-display); font-weight: 700; color: var(--story); }
.case-log .prose { margin-top: 0.3rem; }
.good-fold { margin: 0.3rem 0 0; }
.good-fold > summary { cursor: pointer; font-weight: 700; color: var(--slate); }
.good-fold p { margin: 0.4rem 0 0; padding: 0.6rem 0.9rem; background: var(--table); border-left: 4px solid var(--slate); border-radius: 0 8px 8px 0; }
.evidence { list-style: none; padding: 0; margin: 0.4rem 0; }
.evidence li { margin-left: 1.4rem; animation: none; }
.evidence li.unrevealed { background: var(--tag-off); color: var(--card-soft); }
.write-up { padding: 0.6rem 1rem 0.6rem 2.4rem; background: var(--card); color: var(--card-ink); border: 1px solid var(--card-edge); border-radius: 6px; background-image: repeating-linear-gradient(180deg, transparent 0 1.45em, rgba(63, 90, 104, 0.18) 1.45em calc(1.45em + 1px)); }
.write-up li { margin: 0.2rem 0; }

/* the start-over box: "Keep playing" is focused; erasing says what it does */
dialog.confirm { max-width: 30rem; width: calc(100% - 2rem); border: 2px solid var(--edge); border-radius: 14px; padding: 1.1rem 1.4rem; background: var(--sheet); color: var(--ink); font-size: 1rem; }

/* ============================================================ the Scenario Player page */
.player main { max-width: 40rem; }
.join h1, .seat-head h1 { margin-top: 0.1rem; }
.join input#code { font-family: var(--font-mono); font-weight: 700; font-size: 1.4em; letter-spacing: 0.12em; text-transform: uppercase; background: var(--plate); color: var(--plate-ink); border-color: var(--rim); }
.join input#seat { font-size: 1.4em; font-weight: 700; max-width: 7rem; }
.seat-head { background: var(--card); color: var(--card-ink); border: 2px solid var(--card-edge); box-shadow: 0 2px 0 var(--card-edge), 0 10px 22px var(--shadow); }
.seat-head .pack-title { margin: 0; font-size: 1.15em; color: var(--card-ink); }
.seat-head .seat-title { font-size: 2em; margin: 0.4rem 0 0.2rem; color: var(--card-ink); }
.seat-head .note { color: var(--card-soft); }
.seat-head .btn { background: transparent; color: var(--card-ink); border-color: var(--card-edge); }
.steps ol { padding-left: 1.4rem; margin: 0.4rem 0 0; }
.steps li { margin: 0.35rem 0; }
.packet-fold { background: var(--sheet); }
/* the sealed card: an envelope with a wax seal, opened in two steps */
/* the flap: a shaded V from both top corners to the middle, drawn in two halves (each half's corner-to-
   corner diagonal is its 50% line), above the heading rather than across it (live pass, visual item 7) */
.envelope { position: relative; padding-top: 2.5rem; background: var(--card); color: var(--card-ink); border: 2px solid var(--card-edge); overflow: hidden; }
.envelope::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2.1rem; pointer-events: none;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--card-edge) calc(50% - 1px), var(--card-edge) calc(50% + 1px), rgba(138, 117, 99, 0.12) calc(50% + 1px)) left top / 50% 100% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1px), var(--card-edge) calc(50% - 1px), var(--card-edge) calc(50% + 1px), rgba(138, 117, 99, 0.12) calc(50% + 1px)) right top / 50% 100% no-repeat; }
.envelope h2 { position: relative; margin-top: 0.3em; color: var(--card-ink); }
.envelope .note { color: var(--card-soft); }
.btn.seal { background: var(--stamp-bad); border-color: var(--seal-edge); color: var(--seal-ink); border-radius: 999px; padding: 0.7rem 1.3rem; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 4px 10px var(--shadow); }
.btn.seal .icon { width: 1.4em; height: 1.4em; }
.seal-ask { margin-top: 0.6rem; padding: 0.7rem 0.9rem; border: 2px dashed var(--card-edge); border-radius: 10px; }
.seal-ask p { margin: 0 0 0.4rem; font-weight: 700; }
.seal-ask .btn { background: var(--paper); color: var(--card-ink); border-color: var(--card-edge); }
.seal-ask .btn.primary { background: var(--banner); border-color: var(--banner); color: var(--plate-ink); }
.opened { margin-top: 0.8rem; padding: 0.8rem 1rem; border-radius: 10px; background: var(--paper); border: 1px solid var(--card-edge); animation: card-turn 600ms ease-out both; }
/* the opened labor card wears the leader's card band, midnight and brass, with the card's own title on it (visual item 8) */
.opened.labor { border: 3px solid var(--midnight); }
.opened-band { margin: -0.8rem -1rem 0.7rem; padding: 0.45rem 1rem; border-radius: 7px 7px 0 0; background: var(--midnight); color: var(--brass); font-family: var(--font-display); font-size: 1em; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.opened .prose p:last-child { margin-bottom: 0; }
/* the receipt: a ticket stub with a perforated edge */
.ticket .receipt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 1rem; padding: 0.9rem 1.1rem; background: var(--card); color: var(--card-ink); border-radius: 8px; border: 2px dashed var(--card-edge); animation: ticket-print 400ms ease-out both; }
.ticket .receipt:empty { display: none; }
.ticket .receipt .label { flex-basis: 100%; color: var(--card-soft); }
.ticket .receipt .code { font-size: 1.6em; user-select: all; }
.ticket .receipt .btn { background: var(--paper); color: var(--card-ink); border-color: var(--card-edge); }
.copy-status { flex-basis: 100%; margin: 0; font-weight: 700; color: var(--card-soft); }

/* ============================================================ small motions */
@keyframes stage-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes stamp-in { 0% { opacity: 0; transform: rotate(-4deg) scale(1.8); } 100% { opacity: 1; transform: rotate(-4deg) scale(1); } }
@keyframes thump { 0%, 100% { transform: none; } 33% { transform: translateX(-3px); } 66% { transform: translateX(3px); } }
@keyframes pin-fill { from { transform: scale(0.6); } to { transform: none; } }
@keyframes chip-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes tag-swing { 0% { transform: rotate(-8deg); opacity: 0; } 60% { transform: rotate(1.5deg); opacity: 1; } 100% { transform: none; } }
@keyframes screen-wake { from { filter: brightness(0.25); } to { filter: none; } }
@keyframes ticket-print { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* reduced motion: no throw, no turning, no swinging; things arrive in one short fade, in the same order */
@media (prefers-reduced-motion: reduce) {
  .d12, .d12-num, .d12-mark, .d12 + .d12 .d12-num, .game-card, .game-card.turned .card-face, .tag, .chip, .pin.good, .pin.bad, .opened, .ticket .receipt, .artifact-ransom-note .artifact-doc, .result.is-failure .after-roll { animation: none; }
  .d12-decoy { display: none; }
  .after-roll > *, .after-roll > .st3 { animation: stage-fade 150ms ease-out both; animation-delay: 0ms; }
  .game-card.labor.auto .card-back { display: none; }
  .game-card.labor.auto .card-face { animation: none; }
  .choice, .door, input[type=radio]::before { transition: none; }
  .choice:has(input:checked), .door:hover, .door:focus-visible { transform: none; }
}
@keyframes stage-fade { from { opacity: 0; } to { opacity: 1; } }

/* a result drawn while the tab is hidden (behind another tab, or a window the system reports as covered):
   the browser throttles timers and pauses animations there, so the staged reveal crawled for about 45 s
   (live pass, visual item 12). src/leader.ts adds .at-once: the dice at rest and everything shown at once */
.result.at-once .d12, .result.at-once .d12-num, .result.at-once .d12-mark, .result.at-once .after-roll, .result.at-once .after-roll > * { animation: none; }
.result.at-once .d12-decoy { display: none; }