/* 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.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.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.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.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

/* ---------- 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: "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; }
: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.svg); mask-image: url(icons/die.svg); }
.icon-card { -webkit-mask-image: url(icons/card.svg); mask-image: url(icons/card.svg); }
.icon-clock { -webkit-mask-image: url(icons/clock.svg); mask-image: url(icons/clock.svg); }
.icon-chair { -webkit-mask-image: url(icons/chair.svg); mask-image: url(icons/chair.svg); }
.icon-seal { -webkit-mask-image: url(icons/seal.svg); mask-image: url(icons/seal.svg); }
.icon-ticket { -webkit-mask-image: url(icons/ticket.svg); mask-image: url(icons/ticket.svg); }
.icon-copy { -webkit-mask-image: url(icons/copy.svg); mask-image: url(icons/copy.svg); }
.icon-folder { -webkit-mask-image: url(icons/folder.svg); mask-image: url(icons/folder.svg); }
.icon-plus { -webkit-mask-image: url(icons/plus.svg); mask-image: url(icons/plus.svg); }
.icon-minus { -webkit-mask-image: url(icons/minus.svg); mask-image: url(icons/minus.svg); }
.icon-check { -webkit-mask-image: url(icons/check.svg); mask-image: url(icons/check.svg); }
.icon-cross { -webkit-mask-image: url(icons/cross.svg); mask-image: url(icons/cross.svg); }
.icon-turn { -webkit-mask-image: url(icons/turn.svg); mask-image: url(icons/turn.svg); }
.icon-help { -webkit-mask-image: url(icons/help.svg); mask-image: url(icons/help.svg); }
.icon-screen { -webkit-mask-image: url(icons/screen.svg); mask-image: url(icons/screen.svg); }
.icon-phone { -webkit-mask-image: url(icons/phone.svg); mask-image: url(icons/phone.svg); }
.icon-chevron { -webkit-mask-image: url(icons/chevron.svg); mask-image: url(icons/chevron.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; }
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.svg) center / contain no-repeat; mask: url(icons/chevron.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); }
.place-card legend { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.3rem; font-family: var(--font-display); font-weight: 700; font-size: 1.1em; color: var(--card-ink); }
.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; 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) */
.rail { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; 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-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; align-items: center; gap: 0.3rem; list-style: none; margin: 0; padding: 0; }
.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.svg); mask-image: url(icons/check.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.svg); mask-image: url(icons/cross.svg); }
.pin.current { border-color: var(--amber); box-shadow: 0 0 0 3px var(--pick); }
.pin.todo::before, .pin.current::before { display: none; }
.pin.chance { margin-right: 1.3em; }
.pin.chance::after { content: ""; position: absolute; right: -1.3em; width: 0.85em; height: 1.1em; border-radius: 2px; background: var(--oxblood); border: 1.5px solid var(--foil); }
.pin.labor { margin-right: 1.4em; }
.pin.labor::after { content: ""; position: absolute; right: -1.4em; width: 1em; height: 1em; background-color: var(--story); -webkit-mask: url(icons/chair.svg) center / contain no-repeat; mask: url(icons/chair.svg) center / contain no-repeat; }
.pin.chance.labor { margin-right: 2.6em; }
.pin.chance.labor::after { right: -2.6em; }
.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.svg) center / contain no-repeat; mask: url(icons/chevron.svg) center / contain no-repeat; transform: rotate(90deg); transition: transform 160ms ease; }
.fold[open] > summary::after { transform: rotate(-90deg); }
.rail .fold[open] { flex-basis: 100%; order: 10; }
.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.svg) center / contain no-repeat; mask: url(icons/chair.svg) center / contain no-repeat; }
.seat-list .leader-tag { margin-left: 0.4em; }
.rail .push { margin-left: auto; }
.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); }
.plaque .code { font-size: 2.4em; letter-spacing: 0.14em; line-height: 1.1; }
.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.svg) center / contain no-repeat; mask: url(icons/check.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; }
.artifact-ransom-note .device::after { content: ""; position: absolute; left: -4%; right: -4%; bottom: -10px; height: 10px; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #8C857C, #5E5850); }
.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; max-height: 26em; overflow: auto; 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 */
.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); transform: rotate(-0.6deg); }
.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 */
.envelope { position: relative; 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: 3.2rem; background: linear-gradient(170deg, transparent 49%, var(--card-edge) 50%, transparent 51%), linear-gradient(-170deg, transparent 49%, var(--card-edge) 50%, transparent 51%); opacity: 0.6; pointer-events: none; }
.envelope h2 { position: relative; 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; }
.opened.labor { border: 3px solid var(--midnight); border-top-width: 2.2rem; position: relative; }
.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 { transition: none; }
  .choice:has(input:checked), .door:hover, .door:focus-visible { transform: none; }
}
@keyframes stage-fade { from { opacity: 0; } to { opacity: 1; } }