/* Fraunces (display), Figtree (interface) and Literata (read aloud), self-hosted
   from /fonts/ (variable woff2, latin and latin-ext). Cinzel is retired. */
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/figtree-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/figtree-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/literata-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/literata-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/literata-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/literata-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The play table runs on the KAQ design tokens (assets/kids-adventure-quests/
   DESIGN.md): /tokens.css is loaded before this file on every page and is
   night by default. Every color, size, radius and shadow below comes from a
   --kaq-* token; a part that must read as paper (a handout, the storybook,
   the pause card) carries data-theme="day" in the markup. */
* { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--kaq-color-paper); color: var(--kaq-color-ink); font-family: var(--kaq-font-ui); font-size: var(--kaq-size-body); line-height: var(--kaq-leading-body); }
a { color: var(--kaq-color-forest); text-underline-offset: 0.15em; }
/* Bold is 700, never "bolder": inside a 600 label that would ask Figtree for 900, past its range. */
b, strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--kaq-color-focus); outline-offset: 2px; }
.wrap { max-width: var(--kaq-measure-page); margin: 0 auto; padding: var(--kaq-space-5) var(--kaq-space-4) var(--kaq-space-8); }
header.top { display: flex; align-items: center; justify-content: space-between; gap: var(--kaq-space-3); padding: var(--kaq-space-2) var(--kaq-space-4); min-height: 64px; border-bottom: 1px solid var(--kaq-color-line); background: var(--kaq-color-paper); }
header.top .brand { display: flex; align-items: center; gap: var(--kaq-space-2); font-family: var(--kaq-font-display); font-weight: 600; font-size: var(--kaq-size-h3); line-height: var(--kaq-leading-tight); }
header.top .mark { width: 26px; height: 26px; color: var(--kaq-color-forest); flex: none; }
h1, h2, h3 { font-family: var(--kaq-font-display); font-weight: 600; line-height: var(--kaq-leading-tight); letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--kaq-size-h1); margin: var(--kaq-space-1) 0 var(--kaq-space-3); }
h2 { font-size: var(--kaq-size-h2); }
h3 { font-size: var(--kaq-size-h3); }
@media (max-width: 560px) { h1 { font-size: var(--kaq-size-h2); } }
/* A calm sentence-case heading over a group, never tiny all-caps. */
.eyebrow { margin: 0 0 var(--kaq-space-2); font-size: var(--kaq-size-small); font-weight: 600; color: var(--kaq-color-ink-soft); }
.card { background: var(--kaq-color-surface); border: 1px solid var(--kaq-color-line); border-radius: var(--kaq-radius-card); padding: var(--kaq-space-5); }
.muted { color: var(--kaq-color-ink-soft); }
.small { font-size: var(--kaq-size-small); }
label { display: block; font-size: var(--kaq-size-small); font-weight: 600; color: var(--kaq-color-ink-soft); margin: var(--kaq-space-3) 0 var(--kaq-space-1); }
input, select, textarea { width: 100%; min-height: var(--kaq-touch-min); padding: var(--kaq-space-2) var(--kaq-space-3); border-radius: var(--kaq-radius-control); border: 1px solid var(--kaq-color-line); background: var(--kaq-color-surface-sunk); color: var(--kaq-color-ink); font: inherit; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--kaq-color-focus); outline-offset: 0; border-color: var(--kaq-color-focus); }
input[type=checkbox], input[type=radio] { min-height: 0; }
/* Buttons. Lantern is the one primary action on a screen (.primary); every
   other button is forest: filled by default, outlined as .ghost, bare as .quiet. */
button, .btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--kaq-space-2); min-height: var(--kaq-touch-min); font: inherit; font-weight: 700; line-height: var(--kaq-leading-snug); padding: var(--kaq-space-2) var(--kaq-space-4); border-radius: var(--kaq-radius-control); border: 1px solid var(--kaq-color-forest); background: var(--kaq-color-forest); color: var(--kaq-color-forest-ink); text-decoration: none; transition: transform .1s ease, filter .1s ease; }
button:hover, .btn:hover { filter: brightness(1.06); }
button:active, .btn:active { transform: translateY(1px); }
button.ghost, .btn.ghost { background: transparent; color: var(--kaq-color-forest); }
button.quiet, .btn.quiet { background: transparent; border-color: transparent; color: var(--kaq-color-ink-soft); padding-inline: var(--kaq-space-2); }
button.primary, .btn.primary { background: var(--kaq-color-lantern); border-color: var(--kaq-color-lantern); color: var(--kaq-color-lantern-ink); }
button.big, .btn.big { min-height: var(--kaq-touch-primary); padding-inline: var(--kaq-space-6); font-size: var(--kaq-size-h3); border-radius: var(--kaq-radius-card); }
button.danger { background: transparent; border-color: var(--kaq-color-berry); color: var(--kaq-color-berry); }
button.icon-btn, .btn.icon-btn { width: var(--kaq-touch-min); padding: 0; background: transparent; border-color: var(--kaq-color-line); color: var(--kaq-color-ink); }
button.icon-btn .ic, .btn.icon-btn .ic { width: 20px; height: 20px; }
button:disabled, .btn:disabled { opacity: 0.45; cursor: not-allowed; }
button:disabled:hover, .btn:disabled:hover { filter: none; transform: none; }
@media (prefers-reduced-motion: reduce) { button, .btn { transition: none; } button:active, .btn:active { transform: none; } }
.badge { display: inline-block; font-size: var(--kaq-size-label); font-weight: 600; color: var(--kaq-color-forest); border: 1px solid color-mix(in srgb, var(--kaq-color-forest) 45%, transparent); border-radius: var(--kaq-radius-pill); padding: 0.1rem 0.6rem; }
.badge.gm { color: var(--kaq-color-lantern); border-color: color-mix(in srgb, var(--kaq-color-lantern) 45%, transparent); }
.grid { display: grid; gap: var(--kaq-space-4); }
.row { display: flex; gap: var(--kaq-space-2); align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: var(--kaq-space-3); }
.code { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.12em; background: var(--kaq-color-surface-sunk); border: 1px dashed var(--kaq-color-line); border-radius: var(--kaq-radius-control); padding: 0.15rem 0.5rem; color: var(--kaq-color-ink); }
.notice { border-inline-start: 3px solid var(--kaq-color-forest); background: var(--kaq-color-surface-sunk); padding: var(--kaq-space-3) var(--kaq-space-4); border-start-end-radius: var(--kaq-radius-control); border-end-end-radius: var(--kaq-radius-control); margin: var(--kaq-space-3) 0; }
.notice.warn { border-inline-start-color: var(--kaq-color-berry); }
.hidden { display: none !important; }
/* Small layout helpers that replaced the pages' inline style="" attributes. */
.m0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--kaq-space-1); }
.mt-2 { margin-top: var(--kaq-space-2); }
.mt-3 { margin-top: var(--kaq-space-3); }
.mt-4 { margin-top: var(--kaq-space-5); }
.mb-0 { margin-bottom: 0; }
.my-2 { margin-block: var(--kaq-space-2); }
.my-4 { margin-block: var(--kaq-space-4) var(--kaq-space-6); }
.w-full { width: 100%; }
.grow { flex: 1 1 10rem; min-width: 0; }
.qc-fixed { flex: 0 0 auto; width: auto; min-width: 6rem; }
.push-end { margin-inline-start: auto; }
.end { justify-content: flex-end; }
.check-row { display: flex; align-items: center; gap: var(--kaq-space-2); cursor: pointer; }
.check-row input { width: auto; margin: 0; flex: 0 0 auto; }
.code-in { text-transform: uppercase; letter-spacing: 0.15em; }
.narrow { max-width: 35rem; }


/* live table */
.table-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.1rem; align-items: start; }
@media (max-width: 800px) { .table-grid { grid-template-columns: 1fr; } }
.scene-banner { font-family: var(--kaq-font-display); font-size: var(--kaq-size-h3); color: var(--kaq-color-forest); }
svg.ic { width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; }
/* Connection pill (sparkfield#1237) — the table says out loud when the socket
   is away, and everything that would put a message on the wire goes quiet with
   it, so a child never presses a button that silently does nothing. */
.conn { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--kaq-size-label); border-radius: var(--kaq-radius-pill); padding: 0.2rem 0.7rem; border: 1px solid var(--kaq-color-berry); color: var(--kaq-color-berry); background: color-mix(in srgb, var(--kaq-color-berry) 12%, transparent); }
.conn.live { border-color: var(--kaq-color-forest); color: var(--kaq-color-forest); background: color-mix(in srgb, var(--kaq-color-forest) 12%, transparent); }
.conn .ic { animation: conn-pulse 1.6s ease-in-out infinite; }
.conn.live .ic { animation: none; }
@keyframes conn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .conn .ic { animation: none; } }
body.offline .stage-card, body.offline #chat-card { opacity: 0.72; }

.here-pin { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--kaq-color-surface-sunk); border: 1px solid var(--kaq-color-line); border-radius: var(--kaq-radius-pill); padding: 0.25rem 0.7rem; font-size: var(--kaq-size-small); }
.presence-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.presence-list li { display: flex; align-items: center; gap: 0.5rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kaq-color-forest); box-shadow: 0 0 6px var(--kaq-color-forest); }
.chat-log { height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem; background: var(--kaq-color-surface-sunk); border: 1px solid var(--kaq-color-line); border-radius: var(--kaq-radius-control); }
.chat-msg { font-size: var(--kaq-size-small); }
.chat-msg .from { color: var(--kaq-color-forest); font-weight: 600; }
.chat-msg.roll { color: var(--kaq-color-ink); }
.chat-msg.system { color: var(--kaq-color-ink-soft); font-style: italic; font-size: var(--kaq-size-label); }
.dice-row button { padding: 0.4rem 0.6rem; }
/* dice card: the d20 is the fast path, the rest are quieter picks, and your
   own rolls read as `d20: 14` — same hierarchy and notation as /dice
   (sparkfield#1236). */
.die-primary { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; width: 100%; margin: 0.5rem 0 0.6rem; padding: 0.7rem 1rem; }
.die-primary-face { font-family: var(--kaq-font-display); font-size: var(--kaq-size-h2); font-weight: 700; line-height: 1.15; }
.die-primary-note { font-size: var(--kaq-size-label); font-weight: 600; opacity: 0.75; }
.roll-log-head { margin: 0.9rem 0 0; font-size: var(--kaq-size-label); color: var(--kaq-color-ink-soft); }
.dice-log li { display: flex; align-items: center; gap: 0.4rem; }
.dice-log .roll-die { color: var(--kaq-color-ink-soft); }
.dice-log .roll-total { color: var(--kaq-color-forest); font-variant-numeric: tabular-nums; }
.sheet-field { display: flex; gap: 0.5rem; align-items: center; }
.sheet-field input[type=number] { width: 70px; }
.hpbar { height: 8px; background: var(--kaq-color-surface-sunk); border: 1px solid var(--kaq-color-line); border-radius: var(--kaq-radius-pill); overflow: hidden; }
.hpbar > span { display: block; height: 100%; background: linear-gradient(90deg,var(--kaq-color-berry),var(--kaq-color-lantern)); }

/* the shared stage */
.stage-card { border-color: color-mix(in srgb, var(--kaq-color-forest) 30%, var(--kaq-color-line)); }
.stage-quest { font-size: var(--kaq-size-label); color: var(--kaq-color-forest); margin-bottom: 0.3rem; }
.stage-title { font-size: var(--kaq-size-h3); margin: 0.1rem 0 0.5rem; color: var(--kaq-color-ink); }
.stage-image { display: block; width: 100%; max-width: 512px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--kaq-radius-card); border: 1px solid var(--kaq-color-line); margin: 0.2rem auto 0.7rem; }
.stage-narration { font-size: var(--kaq-size-body); line-height: 1.65; margin: 0 0 0.8rem; white-space: pre-wrap; }
.stage-choices { display: flex; flex-direction: column; gap: 0.5rem; }
.choice-btn { text-align: start; background: var(--kaq-color-surface-sunk); color: var(--kaq-color-ink); border: 1px solid var(--kaq-color-line); font-weight: 500; }
.choice-btn:hover { border-color: var(--kaq-color-forest); filter: none; }
.choice-btn.picked { border-color: var(--kaq-color-forest); background: color-mix(in srgb, var(--kaq-color-forest) 18%, var(--kaq-color-surface-sunk)); color: var(--kaq-color-ink); }
.stage-chosen { font-size: var(--kaq-size-small); margin: 0.6rem 0 0; }
/* read-aloud (#2258): the word being spoken, and the choice being read */
.listen-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.7rem; }
.listen-row:not(:has(.listen-btn:not(.hidden))) { display: none; }
.listen-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; }
.listen-btn.pulse { animation: listen-pulse 1.4s ease-in-out infinite; }
@keyframes listen-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kaq-color-forest) 55%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
.w { border-radius: var(--kaq-radius-control); transition: background-color .12s ease, color .12s ease; }
.w.reading { background: color-mix(in srgb, var(--kaq-color-forest) 32%, transparent); color: var(--kaq-color-ink); }
.choice-btn.reading, .screen-choice.reading { border-color: var(--kaq-color-forest); box-shadow: inset 3px 0 0 var(--kaq-color-forest); }
/* No Hebrew reading voice on this device (issue 2582): one quiet line in the
   read-aloud box. It wraps; it must never sit in the no-wrap header (issue 3008). */
.voice-he-note { display: flex; align-items: flex-start; gap: 0.4rem; margin: 0 0 0.7rem; font-size: var(--kaq-size-small); overflow-wrap: anywhere; }
.voice-he-note .ic { flex: none; margin-top: 0.15em; }
.voice-toggle { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; font-size: var(--kaq-size-small); }
.read-table { margin-top: 0.6rem; }
@media (prefers-reduced-motion: reduce) {
  .w { transition: none; }
  .listen-btn.pulse { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--kaq-color-forest) 55%, transparent); }
}

/* campaign chapters (#1230) — the "previously…" recap that opens a chapter,
   and the journal of what the table has carried out of the ones it played. */
.recap { margin: 0 0 0.9rem; padding: 0.7rem 0.9rem; border-inline-start: 3px solid color-mix(in srgb, var(--kaq-color-forest) 60%, var(--kaq-color-line)); background: var(--kaq-color-surface-sunk); border-start-end-radius: var(--kaq-radius-control); border-end-end-radius: var(--kaq-radius-control); }
.recap-eyebrow { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.3rem; font-size: var(--kaq-size-label); color: var(--kaq-color-forest); }
.recap-body { margin: 0; font-size: var(--kaq-size-small); line-height: 1.6; color: var(--kaq-color-ink-soft); }
.chapter-step { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--kaq-color-line); }
.chapter-step button { display: inline-flex; align-items: center; gap: 0.4rem; }
.chapter-hint { font-size: var(--kaq-size-label); margin: 0.45rem 0 0; }
.chapter-actions { gap: var(--kaq-space-2); }
.journal-card { border-color: color-mix(in srgb, var(--kaq-color-forest) 30%, var(--kaq-color-line)); }
.journal-title { display: flex; align-items: center; gap: 0.45rem; font-size: var(--kaq-size-body); margin: 0.3rem 0 0.7rem; color: var(--kaq-color-ink); }
.journal-chapters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.jc { display: flex; align-items: center; gap: 0.5rem; font-size: var(--kaq-size-small); color: var(--kaq-color-ink-soft); }
.jc-n { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: var(--kaq-radius-pill); border: 1px solid var(--kaq-color-line); font-size: var(--kaq-size-label); font-variant-numeric: tabular-nums; }
.jc.done { color: var(--kaq-color-ink); }
.jc.done .jc-n { background: color-mix(in srgb, var(--kaq-color-forest) 22%, var(--kaq-color-surface-sunk)); border-color: color-mix(in srgb, var(--kaq-color-forest) 45%, var(--kaq-color-line)); }
.jc.now { color: var(--kaq-color-ink); font-weight: 600; }
.jc.now .jc-n { background: var(--kaq-color-forest); border-color: var(--kaq-color-forest); color: var(--kaq-color-forest-ink); }
.jc-tag { font-size: var(--kaq-size-label); color: var(--kaq-color-forest); font-weight: 600; }
.journal-head { margin: 1rem 0 0; font-size: var(--kaq-size-label); color: var(--kaq-color-ink-soft); }
.journal-carried { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.journal-carried li { display: flex; gap: 0.55rem; font-size: var(--kaq-size-small); }
.journal-carried .ic { flex: none; margin-top: 0.15rem; color: var(--kaq-color-forest); }
.journal-carried div { display: flex; flex-direction: column; gap: 0.15rem; }
.jc-note { font-size: var(--kaq-size-label); line-height: 1.5; }
.jc-from { font-size: var(--kaq-size-label); }

/* private reveal — the handout only this seat was sent (#1228). Marked, not
   merely rendered: a player must be able to tell at a glance that what they
   are reading is theirs alone. */
.private-card { border: 1px dashed color-mix(in srgb, var(--kaq-color-forest) 60%, var(--kaq-color-line)); background: color-mix(in srgb, var(--kaq-color-forest) 7%, var(--kaq-color-surface)); }
.private-eyebrow { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.5rem; }
.private-card .stage-title { font-size: var(--kaq-size-h3); }
.responses .secret { color: var(--kaq-color-ink); }
.responses .to { color: var(--kaq-color-ink-soft); }

/* quest map (#1227) — the shared board the "you are here" pin sits on.
   The SVG arrives inline over the room socket, so nothing is fetched. */
.map-card .map-frame { position: relative; margin-top: 0.7rem; border: 1px solid var(--kaq-color-line); border-radius: var(--kaq-radius-card); overflow: hidden; background: var(--kaq-color-surface-sunk); }
.map-holder { display: block; }
.map-holder svg { display: block; width: 100%; height: auto; }
.map-btn { padding: 0.3rem 0.7rem; font-size: var(--kaq-size-label); }
.map-hint { font-size: var(--kaq-size-label); margin: 0.5rem 0 0; }
/* The map card's header tools (#2398): the GM's fog switch sits beside
   "Bigger" and wraps under it on a narrow phone rather than scrolling. */
.map-card > .spread { flex-wrap: wrap; row-gap: 0.4rem; }
.map-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.4rem; margin-inline-start: auto; }
.map-tools .switch { gap: 0.45rem; }
.fog-ic { display: inline-flex; }
.map-card.gm-armed .map-holder svg { cursor: crosshair; }
/* "Bigger" — the inline board is ~293px wide on a 375px phone, where its
   ribbon labels land near 11px; full-screen puts them back over 20px
   (the lesson the content site's map viewer learned in #772). */
body.map-zoomed .map-card .map-frame { position: fixed; inset: 0; z-index: 60; margin: 0; border: 0; border-radius: 0; background: color-mix(in srgb, var(--kaq-color-surface-sunk) 94%, transparent); display: flex; align-items: center; justify-content: center; padding: 0.75rem; overflow: auto; }
/* `safe` so that a board wider than a phone screen stays pannable to its left
   edge instead of overflowing out of reach; browsers without it keep plain
   centring. */
body.map-zoomed .map-card .map-frame { justify-content: safe center; }
/* The board keeps its own aspect ratio (--map-ar, set from the map payload),
   so full-screen means "as wide as the viewport height allows" — the SVG
   itself always stays width:100% of the holder and never collapses. */
body.map-zoomed .map-card .map-holder { flex: 0 0 auto; width: max(100%, 520px); max-width: calc((100vh - 1.5rem) * var(--map-ar, 1.48)); }
body.map-zoomed .map-holder svg { border-radius: var(--kaq-radius-control); }
.map-close { position: absolute; top: 0.9rem; inset-inline-end: 0.9rem; background: var(--kaq-color-surface); }
/* The pin (issue 1227), on tokens since issue 2861: lantern amber with dark ink. The
   board is parchment in either theme, so its light tone is the night ink
   (parchment) or, on a day page, the white surface. */
.map-holder { --map-light: var(--kaq-color-ink); }
[data-theme="day"] .map-holder { --map-light: var(--kaq-color-surface); }
.here-mark .pin-ring { fill: none; stroke: var(--kaq-color-lantern); }
.here-mark .pin-body { fill: var(--kaq-color-lantern); stroke: var(--kaq-color-lantern-ink); }
.here-mark .pin-dot { fill: var(--map-light); stroke: var(--kaq-color-lantern-ink); }

/* Hero tokens (issue 2861): every hero a round portrait on the board, in a ring
   around the pin or where the GM dragged them. A lantern rim like a coin, a
   creature's rim in berry, and the child's own token with a sky halo, so
   colour is never the only cue (only their own token has a halo at all). */
.token .token-ring { fill: var(--kaq-color-lantern-ink); stroke: var(--kaq-color-lantern); stroke-width: 1.6; }
.token-creature .token-ring { stroke: var(--kaq-color-berry); }
.token .token-mine { fill: none; stroke: var(--kaq-color-sky); stroke-width: 2.6; }
.token .token-blank { fill: var(--kaq-color-surface); }
.token .token-sym { stroke: var(--kaq-color-ink); }
.token .token-badge + .token-sym { stroke: var(--map-light); }
.token .token-name, .token-more .token-more-n { fill: var(--kaq-color-lantern-ink); font-family: var(--kaq-font-ui); font-weight: 700; paint-order: stroke; stroke: var(--map-light); stroke-width: 3px; stroke-linejoin: round; }
.token-more .token-ring { fill: var(--map-light); stroke: var(--kaq-color-lantern); stroke-width: 1.6; }
.token-more .token-more-n { stroke: none; }
.token-layer:not(.gm) { pointer-events: none; }
/* The GM's grab circle is invisible but takes the pointer: at least 48px on a phone. */
.token-layer.gm .token { cursor: grab; touch-action: none; }
.token-layer.gm .token .token-grab { fill: transparent; }
.token-layer.gm .token.dragging { cursor: grabbing; }
.token-layer.gm .token.dragging .token-ring { stroke-width: 2.6; }
.token-layer.gm .token:focus { outline: none; }
.token-layer.gm .token:focus-visible .token-ring { stroke: var(--kaq-color-focus); stroke-width: 3; }
/* The GM's sheet under the map: who is apart, and the way back. */
.token-sheet { margin-top: var(--kaq-space-3); padding: var(--kaq-space-3); border: 1px solid var(--kaq-color-line); border-radius: var(--kaq-radius-control); background: var(--kaq-color-surface-sunk); display: flex; flex-wrap: wrap; align-items: center; gap: var(--kaq-space-2); }
.token-sheet-title { margin: 0; flex: 1 0 100%; font-family: var(--kaq-font-ui); font-size: var(--kaq-size-label); font-weight: 700; color: var(--kaq-color-ink-soft); }
.token-sheet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--kaq-space-2); }
.token-sheet button { min-height: var(--kaq-touch-min); display: inline-flex; align-items: center; gap: var(--kaq-space-2); }
.token-sheet .token-all { margin-inline-start: auto; }
body.table-screen .token-sheet { display: none; }

/* director console */
.director-block { border-top: 1px solid var(--kaq-color-line); margin-top: 1rem; padding-top: 0.9rem; }
.director-block:first-of-type { border-top: 0; margin-top: 0.6rem; padding-top: 0; }
.director-block summary { cursor: pointer; color: var(--kaq-color-forest); font-weight: 600; font-size: var(--kaq-size-small); }
.responses { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; max-height: 200px; overflow-y: auto; font-size: var(--kaq-size-small); }
.responses .from { color: var(--kaq-color-forest); font-weight: 600; }
/* "Someone new" and "People we met" in Show something custom (issue 2896) */
.cs-person { margin: var(--kaq-space-2) 0; }
.cs-met-head { margin: var(--kaq-space-4) 0 0; font-size: var(--kaq-size-small); color: var(--kaq-color-ink-soft); font-weight: 600; }
.cs-met-row { display: flex; align-items: center; gap: var(--kaq-space-2); }
.cs-met-who { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cs-met-row button.tiny { min-height: var(--kaq-touch-min); }
.cs-met-row button.icon-btn { width: var(--kaq-touch-min); padding: 0; }

/* when the GM locks screens, players focus on the stage only */
body.players-locked #dice-card, body.players-locked #sheet-card { display: none; }
body.players-locked .stage-card { box-shadow: 0 0 0 2px color-mix(in srgb, var(--kaq-color-forest) 45%, transparent); }

/* initiative / turn order */
.turn-round { font-size: var(--kaq-size-label); }
.turn-now { font-family: var(--kaq-font-display); font-size: var(--kaq-size-body); color: var(--kaq-color-ink); margin: 0.5rem 0 0.7rem; }
.turn-now.yours { color: var(--kaq-color-forest); }
.turn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.turn-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.6rem; border: 1px solid transparent; border-radius: var(--kaq-radius-control); background: var(--kaq-color-surface-sunk); font-size: var(--kaq-size-small); }
.turn-row.active { border-color: var(--kaq-color-forest); background: color-mix(in srgb, var(--kaq-color-forest) 14%, var(--kaq-color-surface-sunk)); }
.turn-row.you .turn-who { color: var(--kaq-color-ink); }
.turn-init { min-width: 2.1rem; text-align: center; font-family: var(--kaq-font-display); font-weight: 700; color: var(--kaq-color-forest); }
.turn-who { display: flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 0; }
.turn-detail { font-size: var(--kaq-size-label); white-space: nowrap; }
.turn-edit[type=number] { width: 62px; padding: 0.2rem 0.35rem; font-size: var(--kaq-size-small); }
.turn-drop { padding: 0.2rem 0.4rem; border-color: var(--kaq-color-line); color: var(--kaq-color-ink-soft); }
.turn-drop:hover { border-color: var(--kaq-color-berry); color: var(--kaq-color-berry); }
#turn-card.yours { border-color: color-mix(in srgb, var(--kaq-color-forest) 45%, var(--kaq-color-line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--kaq-color-forest) 30%, transparent); }
@media (max-width: 520px) { .turn-detail { display: none; } }

/* quick calls — the GM's improvisation kit */
button.tiny { padding: 0.22rem 0.5rem; font-size: var(--kaq-size-label); border-radius: var(--kaq-radius-control); }
.qc-pending { font-size: var(--kaq-size-small); margin: 0.55rem 0 0; color: var(--kaq-color-ink); }
.seats, .monsters { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.seat, .monster { background: var(--kaq-color-surface-sunk); border: 1px solid var(--kaq-color-line); border-radius: var(--kaq-radius-control); padding: 0.55rem 0.7rem; font-size: var(--kaq-size-small); }
.seat-actions { margin-top: 0.4rem; gap: 0.35rem; }
.monster .hpbar { margin-top: 0.45rem; }
.monster-attack, .monster-special { font-size: var(--kaq-size-label); margin-top: 0.25rem; }
.monster-hp { margin-top: 0.5rem; font-size: var(--kaq-size-small); }
.monster.out { opacity: 0.55; }
/* Creature portraits and the friendship meter (#2677) */
.monster { display: flex; gap: 0.7rem; align-items: flex-start; }
.monster-body { flex: 1; min-width: 0; }
.monster-portrait { flex: none; width: 72px; height: 72px; border-radius: var(--kaq-radius-control); object-fit: cover; border: 1px solid var(--kaq-color-line); background: var(--kaq-color-surface); }
/* The placeholder must never pass for art: a dashed, empty frame that says so. */
.creature-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; padding: 0.3rem; text-align: center;
  border: 1px dashed color-mix(in srgb, var(--kaq-color-ink-soft) 60%, transparent); background: var(--kaq-color-surface-sunk); color: var(--kaq-color-ink-soft); font-size: var(--kaq-size-label); line-height: 1.15; }
.creature-ph .ic { width: 1.6em; height: 1.6em; opacity: 0.8; }
.friend-meter { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.45rem; }
.friend-step { display: inline-flex; color: var(--kaq-color-ink-soft); opacity: 0.45; }
.friend-step.on { color: var(--kaq-color-forest); opacity: 1; }
.friend-meter-label { margin-left: 0.3rem; font-size: var(--kaq-size-label); color: var(--kaq-color-ink-soft); }
.monster.calm { border-color: color-mix(in srgb, var(--kaq-color-forest) 55%, var(--kaq-color-line)); background: color-mix(in srgb, var(--kaq-color-forest) 8%, var(--kaq-color-surface-sunk)); }
.monster.calm .monster-attack, .monster.calm .hpbar { opacity: 0.55; }
.monster .spread > .muted, .friend-badge { white-space: nowrap; }
.friend-badge { display: inline-flex; align-items: center; gap: 0.25rem; }
.friend-badge .ic { width: 1.1em; height: 1.1em; }
.qc-aim-row { align-items: center; }
.offscript { font-size: var(--kaq-size-small); line-height: 1.6; }
.offscript p { margin: 0.7rem 0 0; }
.offscript ul { margin: 0.5rem 0 0; padding-inline-start: 1.1rem; color: var(--kaq-color-ink-soft); }
.offscript code { font-family: ui-monospace, Menlo, monospace; font-size: 0.9em; }

/* a check the GM has called for, shown on the stage */
.check-call {
  display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; flex-wrap: wrap;
  margin-top: 0.9rem; padding: 0.7rem 0.9rem; border-radius: var(--kaq-radius-control);
  background: color-mix(in srgb, var(--kaq-color-forest) 12%, var(--kaq-color-surface-sunk));
  border: 1px solid color-mix(in srgb, var(--kaq-color-forest) 45%, var(--kaq-color-line));
}
.check-line { margin: 0; font-size: var(--kaq-size-small); }
.check-note { margin: 0.2rem 0 0; font-size: var(--kaq-size-small); }
.check-call button[disabled] { opacity: 0.55; cursor: default; transform: none; }
/* help a friend on a check (#2392): the card every other seat sees while a
   check waits on one hero. Big tap targets that wrap, never scroll sideways. */
.check-help {
  margin-top: 0.7rem; padding: 0.7rem 0.9rem; border-radius: var(--kaq-radius-control);
  background: var(--kaq-color-surface-sunk); border: 1px dashed color-mix(in srgb, var(--kaq-color-forest) 45%, var(--kaq-color-line));
}
.check-help-line { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-size: var(--kaq-size-small); font-weight: 600; }
.check-help-line .ic { width: 1.3em; height: 1.3em; flex: none; color: var(--kaq-color-forest); }
.check-help-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.45rem; margin-top: 0.6rem; }
.check-help-ways:empty { display: none; }
.help-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 56px; min-width: 0; padding: 0.55rem 0.75rem; background: var(--kaq-color-surface); color: var(--kaq-color-ink); border: 1px solid color-mix(in srgb, var(--kaq-color-forest) 40%, var(--kaq-color-line)); border-radius: var(--kaq-radius-card); font-weight: 600; font-size: var(--kaq-size-body); line-height: 1.25; }
.help-btn .ic { width: 1.3em; height: 1.3em; flex: none; color: var(--kaq-color-forest); }
.help-btn:hover { border-color: var(--kaq-color-forest); filter: none; }
.help-btn:focus-visible { outline: 2px solid var(--kaq-color-forest); outline-offset: 2px; }
.help-btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .help-btn:active { transform: none; } }
.check-helped { margin: 0.35rem 0 0; font-size: var(--kaq-size-small); display: flex; align-items: center; gap: 0.4rem; }
/* real dice (#2680): a 4 by 5 pad of big numbers in place of the Roll button.
   Wide enough rows for small fingers; the whole pad takes the card's width. */
.die-pad { flex: 1 1 100%; }
.die-pad-prompt { margin: 0 0 0.5rem; font-size: var(--kaq-size-body); font-weight: 600; color: var(--kaq-color-ink); }
.die-pad-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; }
.die-btn { min-height: 52px; min-width: 48px; padding: 0; font-size: var(--kaq-size-h3); font-weight: 700; font-variant-numeric: tabular-nums; background: var(--kaq-color-surface); color: var(--kaq-color-ink); border: 1px solid color-mix(in srgb, var(--kaq-color-forest) 40%, var(--kaq-color-line)); border-radius: var(--kaq-radius-card); }
.die-btn:hover { border-color: var(--kaq-color-forest); filter: none; }
.die-btn:focus-visible { outline: 2px solid var(--kaq-color-forest); outline-offset: 2px; }
.die-btn:active { transform: scale(0.96); }
.die-btn[disabled] { opacity: 0.55; cursor: default; transform: none; }
@media (prefers-reduced-motion: reduce) { .die-btn:active { transform: none; } }
/* the GM's "Roll for Pip" buttons under the waiting check (#2680) */
.qc-rollfor { margin-top: 0.4rem; gap: 0.4rem; flex-wrap: wrap; }
.check-helped .ic { width: 1.15em; height: 1.15em; flex: none; color: var(--kaq-color-forest); }
#qc-helping { margin-top: 0.35rem; }

/* handouts (#1393) — the prop on the table. It reads as paper, not as another
   dark panel: a handout is the one thing at this table that is meant to look
   like an object the party is holding, and parchment is also what makes it
   unmistakably NOT the scene it sits beside. */
.handout-card { border-color: var(--kaq-color-line); }
/* the label wraps on a phone, so the icon aligns to the first line rather
   than floating between two */
.handout-eyebrow { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0 0 0.55rem; color: var(--kaq-color-ink); }
.handout-eyebrow .ic { margin-top: 0.2em; }
/* The paper itself carries data-theme="day" in the markup, so these tokens
   resolve to the day parchment inside it. */
.handout-paper {
  background: linear-gradient(160deg, var(--kaq-color-paper) 0%, var(--kaq-color-paper) 55%, var(--kaq-color-surface-sunk) 100%);
  color: var(--kaq-color-ink); border: 1px solid var(--kaq-color-line); border-radius: var(--kaq-radius-control);
  padding: var(--kaq-space-4) var(--kaq-space-4); box-shadow: var(--kaq-shadow-raised);
}
.handout-title { font-size: var(--kaq-size-h3); margin: 0 0 var(--kaq-space-2); color: var(--kaq-color-ink); }
.handout-body { margin: 0; font-family: var(--kaq-font-read); font-size: var(--kaq-size-read); line-height: var(--kaq-leading-read); white-space: pre-wrap; }
.handout-figure {
  display: block; position: relative; width: 100%; margin: 0 0 0.7rem;
  padding: 0; border: 0; border-radius: var(--kaq-radius-control); background: none; overflow: hidden; cursor: zoom-in;
}
.handout-figure:hover { filter: none; transform: none; }
.handout-image { display: block; width: 100%; border-radius: var(--kaq-radius-control); border: 1px solid var(--kaq-color-line); }
.handout-zoom {
  position: absolute; inset-inline-end: 0.5rem; bottom: 0.5rem; display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.55rem; border-radius: var(--kaq-radius-pill); font-size: var(--kaq-size-label); font-weight: 600;
  background: color-mix(in srgb, var(--kaq-color-paper) 82%, transparent); color: var(--kaq-color-ink); border: 1px solid var(--kaq-color-line);
}
.handout-figure:hover .handout-zoom, .handout-figure:focus-visible .handout-zoom { background: color-mix(in srgb, var(--kaq-color-paper) 95%, transparent); }
/* passed to one seat: same paper, marked the way the private reveal is */
.handout-private { border: 1px dashed color-mix(in srgb, var(--kaq-color-forest) 60%, var(--kaq-color-line)); background: color-mix(in srgb, var(--kaq-color-forest) 7%, var(--kaq-color-surface)); }
.handout-private .handout-eyebrow { color: var(--kaq-color-forest); }

/* handout lightbox — a handout image full-screen, because on a phone the card
   is ~290px wide and a letter is meant to be read. */
.lightbox { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 1rem; background: color-mix(in srgb, var(--kaq-color-surface-sunk) 94%, transparent); }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--kaq-radius-control); border: 1px solid var(--kaq-color-line); object-fit: contain; }
#lightbox-close { position: absolute; top: 0.9rem; inset-inline-end: 0.9rem; background: var(--kaq-color-surface); }

/* ---- ready-made hero picker (#2233) ---- */
.join-wrap { max-width: 34rem; }
.join-wrap.picking { max-width: 920px; }
/* spun names (#2349): the name is the star, big enough for a six year old. */
.name-card { font-family: var(--kaq-font-display); font-size: var(--kaq-size-h2); font-weight: 700; text-align: center; margin: 0.3rem 0 0.7rem; padding: 0.9rem 0.6rem; min-height: 1.4em; border: 2px solid var(--kaq-color-forest); border-radius: var(--kaq-radius-card); background: var(--kaq-color-surface-sunk); color: var(--kaq-color-ink); overflow-wrap: anywhere; }
.spin-row { align-items: center; gap: 0.8rem; }
#spin, #joinbtn { min-height: 48px; }
#spin { display: inline-flex; align-items: center; gap: 0.45rem; }
#sn-toggle { margin-top: 0.7rem; }
#spin.spun-done { cursor: default; color: var(--kaq-color-ink); border-color: var(--kaq-color-forest); }
#spin.spun-done:hover { filter: none; transform: none; }
.name-card.rolling { animation: name-roll 420ms cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes name-roll { 0% { opacity: 0; transform: translateY(-0.6em) scale(0.9); } 60% { opacity: 1; transform: translateY(0.08em) scale(1.04); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .name-card.rolling { animation: none; } }
.code-hint { font-size: var(--kaq-size-label); margin: 0.35rem 0 0; }
.type-name-link { font-size: var(--kaq-size-small); margin: 0.6rem 0 0; }
.type-name-link a, #back-to-spin { display: inline-flex; align-items: center; min-height: 44px; }
.hero-h { font-size: var(--kaq-size-h2); margin: 0.4rem 0 0.2rem; }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.8rem; margin-top: 1rem; }
@media (max-width: 560px) { .hero-grid { grid-template-columns: 1fr 1fr; gap: 0.55rem; } }
.hero-card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; min-height: 44px; padding: 0.55rem; text-align: start; background: var(--kaq-color-surface); color: var(--kaq-color-ink); border: 2px solid var(--kaq-color-line); border-radius: var(--kaq-radius-card); font-weight: 400; }
.hero-card:hover { border-color: var(--kaq-color-forest); filter: none; }
.hero-card:focus-visible { outline: 3px solid var(--kaq-color-forest); outline-offset: 2px; }
.hero-card.mine { border-color: var(--kaq-color-forest); }
.hero-card.taken { cursor: not-allowed; }
.hero-card.taken > :not(.hero-taken) { opacity: 0.45; filter: grayscale(0.85); }
.hero-card.taken:hover { transform: none; border-color: var(--kaq-color-line); }
.hero-portrait { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--kaq-radius-control); background: var(--kaq-color-surface-sunk); }
.hero-taken { position: absolute; top: 0.9rem; inset-inline-start: 0.9rem; inset-inline-end: 0.9rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.25rem 0.5rem; border-radius: var(--kaq-radius-pill); background: var(--kaq-color-surface-sunk); color: var(--kaq-color-ink); font-size: var(--kaq-size-label); font-weight: 600; }
.hero-taken.mine { color: var(--kaq-color-forest-ink); background: var(--kaq-color-forest); }
.hero-name { font-family: var(--kaq-font-display); font-weight: 700; font-size: var(--kaq-size-body); line-height: 1.2; color: var(--kaq-color-ink); }
.hero-arch { font-size: var(--kaq-size-label); color: var(--kaq-color-ink-soft); line-height: 1.35; }
.hero-traits { display: flex; flex-wrap: wrap; gap: 0.15rem; }
.trait-chip { font-size: var(--kaq-size-label); padding: 0.1rem 0.35rem; border-radius: var(--kaq-radius-pill); border: 1px solid var(--kaq-color-line); background: var(--kaq-color-surface-sunk); color: var(--kaq-color-ink); }
.trait-chip.lead { border-color: var(--kaq-color-forest); color: var(--kaq-color-forest); }
.hero-trick, .sheet-trick { display: flex; gap: 0.35rem; font-size: var(--kaq-size-label); line-height: 1.4; color: var(--kaq-color-ink); }
.hero-trick .ic, .sheet-trick .ic { flex: none; margin-top: 0.15rem; color: var(--kaq-color-forest); }
.hero-trick b, .sheet-trick b { color: var(--kaq-color-ink); }
.hero-card.own { justify-content: center; align-items: center; text-align: center; border-style: dashed; min-height: 200px; }
.hero-own-ic { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: var(--kaq-radius-pill); background: var(--kaq-color-surface-sunk); color: var(--kaq-color-forest); font-size: var(--kaq-size-h3); }
@media (max-width: 560px) {
  .hero-card { padding: 0.4rem; }
  .hero-name { font-size: var(--kaq-size-small); }
  .hero-taken { top: 0.7rem; inset-inline-start: 0.7rem; inset-inline-end: 0.7rem; font-size: var(--kaq-size-label); }
}
/* "Are you back?" (issue 2688): the table's absent heroes, above the ready-made grid. */
.back-step { margin-top: 1rem; padding: 0.9rem 1rem 1rem; border: 2px solid var(--kaq-color-forest); border-radius: var(--kaq-radius-card); background: color-mix(in srgb, var(--kaq-color-forest) 8%, var(--kaq-color-surface)); }
.back-h { display: flex; align-items: center; gap: 0.5rem; font-size: var(--kaq-size-h3); margin: 0 0 0.2rem; color: var(--kaq-color-ink); }
.back-h .ic { color: var(--kaq-color-forest); }
.back-line { margin: 0 0 0.8rem; font-size: var(--kaq-size-small); }
.back-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; }
@media (max-width: 560px) { .back-grid { grid-template-columns: 1fr 1fr; gap: 0.55rem; } }
.back-card { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0.6rem; background: var(--kaq-color-surface); color: var(--kaq-color-ink); border: 2px solid var(--kaq-color-line); border-radius: var(--kaq-radius-card); font-weight: 400; }
.back-card:hover { border-color: var(--kaq-color-forest); filter: none; }
.back-card:focus-visible { outline: 3px solid var(--kaq-color-forest); outline-offset: 2px; }
.back-card .hero-portrait, .back-card .own-portrait { width: 100%; max-width: 128px; height: auto; aspect-ratio: 1; }
.back-card .own-portrait { border-radius: var(--kaq-radius-pill); }
.back-wait { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.back-wait p { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: var(--kaq-size-body); color: var(--kaq-color-ink); }
.back-wait a { display: inline-flex; align-items: center; min-height: 44px; }
.back-step.waiting ~ .hero-grid { display: none; }
.seat-moved { text-align: center; }
.seat-moved .btn { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; }
.sheet-head { align-items: baseline; }
.sheet-head .eyebrow { margin: 0; }
.pick-hero-link { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--kaq-size-label); min-height: 44px; }
.sheet-portrait { display: block; width: 96px; height: 96px; border-radius: var(--kaq-radius-card); border: 1px solid var(--kaq-color-line); margin: 0.2rem 0 0.2rem; }
.sheet-trick { margin: 0.6rem 0 0; padding: 0.5rem 0.6rem; background: var(--kaq-color-surface-sunk); border-radius: var(--kaq-radius-control); }
/* Little hero (#2680): a small badge on the child's own sheet */
.sheet-little { display: flex; gap: 0.35rem; align-items: flex-start; margin: 0.6rem 0 0; padding: 0.45rem 0.6rem; font-size: var(--kaq-size-label); line-height: 1.4; background: color-mix(in srgb, var(--kaq-color-forest) 10%, var(--kaq-color-surface-sunk)); border-radius: var(--kaq-radius-control); }
.sheet-little .ic { flex: none; margin-top: 0.1rem; color: var(--kaq-color-forest); }
.sheet-little b { color: var(--kaq-color-ink); }
/* the GM's per-seat switch: lit when on */
.little-toggle[aria-pressed="true"] { background: color-mix(in srgb, var(--kaq-color-forest) 22%, var(--kaq-color-surface-sunk)); border-color: var(--kaq-color-forest); color: var(--kaq-color-ink); }

/* ---- table screen (#2260) ----
   The live table on a TV, laptop or tablet for the whole room: read-only, no
   seat controls, and sized from the viewport so it reads from the sofa. The
   layout is two columns from 1000px (the scene, then whose turn, the map, the
   handout, the monsters and the journal), stacked below that. */
body.table-screen #director, body.table-screen #sheet-card, body.table-screen #dice-card,
body.table-screen #chat-card, body.table-screen #private-card, body.table-screen #handout-private-card,
body.table-screen #invite, body.table-screen #backlink, body.table-screen #map-zoom,
body.table-screen #map-hint, body.table-screen #monsters-gm, body.table-screen #turn-controls,
body.table-screen #presence-card, body.table-screen #check-roll, body.table-screen #check-companion { display: none !important; }
body.table-screen { overflow-x: hidden; }
body.table-screen header.top { padding: 0.7rem 1.6vw; }
body.table-screen header.top .brand { font-size: clamp(1rem, 1.5vw, 1.8rem); min-width: 0; }
body.table-screen header.top .brand #game-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.table-screen.cursor-idle, body.table-screen.cursor-idle * { cursor: none !important; }
body.table-screen .wrap { max-width: none; padding: 1.2vw 1.6vw 2vw; }
body.table-screen .table-grid { grid-template-columns: minmax(0, 1fr); gap: max(1rem, 1.2vw); }
@media (min-width: 1000px) { body.table-screen .table-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
body.table-screen .grid { gap: max(1rem, 1.2vw); min-width: 0; }
body.table-screen .card { padding: max(1rem, 1.4vw); border-radius: var(--kaq-radius-card); }
body.table-screen .eyebrow { font-size: clamp(0.72rem, 0.9vw, 1.1rem); }
body.table-screen .scene-banner { font-size: clamp(1.4rem, 2.6vw, 3.2rem); padding: 4vh 0; text-align: center; }
body.table-screen .stage-quest { font-size: clamp(0.8rem, 1vw, 1.25rem); }
body.table-screen .stage-title { font-size: clamp(1.6rem, 3.2vw, 4rem); line-height: 1.15; margin-bottom: 0.4em; }
body.table-screen #stage-eyebrow { display: none; }
body.table-screen .stage-image { width: 100%; max-width: none; max-height: 40vh; margin: 0 0 1.2vw; border-radius: var(--kaq-radius-card); }
/* On a landscape screen nobody can scroll, so the scene card is exactly one
   viewport tall and the art takes whatever the words leave: long narration
   shrinks the picture, never pushes the choices below the fold. */
@media (min-width: 1000px) {
  body.table-screen .stage-card { display: flex; flex-direction: column; min-height: calc(100dvh - 4.6rem - 3.2vw); }
  body.table-screen #stage-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  body.table-screen #stage-body .stage-image { flex: 1 1 0; min-height: 22vh; max-height: 48vh; height: auto; aspect-ratio: auto; object-fit: cover; object-position: center 65%; }
  body.table-screen .stage-narration { font-size: clamp(1.1rem, 1.7vw, 2.2rem); margin-bottom: 1vw; }
  body.table-screen .screen-choice { font-size: clamp(1rem, 1.4vw, 1.8rem); padding: 0.4em 0.7em; }
}
body.table-screen .stage-narration { font-size: clamp(1.1rem, 1.9vw, 2.4rem); line-height: 1.55; max-width: 62ch; }
body.table-screen .recap-body { font-size: clamp(0.95rem, 1.3vw, 1.6rem); }
body.table-screen .recap-eyebrow { font-size: clamp(0.72rem, 0.9vw, 1.1rem); }
body.table-screen .here-pin { font-size: clamp(0.9rem, 1.2vw, 1.5rem); }
/* choices: numbered for kids to call out, never buttons */
.screen-choice { display: flex; align-items: center; gap: 0.7em; padding: 0.5em 0.8em; border-radius: var(--kaq-radius-card); background: var(--kaq-color-surface-sunk); border: 1px solid var(--kaq-color-line); color: var(--kaq-color-ink); font-size: clamp(1rem, 1.6vw, 2rem); line-height: 1.3; }
.screen-choice-n { flex: none; display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: var(--kaq-radius-pill); background: var(--kaq-color-forest); color: var(--kaq-color-forest-ink); font-family: var(--kaq-font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
body.table-screen .stage-choices { gap: 0.8vw; }
body.table-screen .check-call { padding: 0.8vw 1.1vw; }
body.table-screen .check-line { font-size: clamp(1rem, 1.5vw, 1.9rem); }
body.table-screen .check-note { font-size: clamp(0.9rem, 1.2vw, 1.5rem); }
body.table-screen.screen-has-map .here-pin { display: none; }
body.table-screen .map-holder { max-width: calc(30vh * var(--map-ar, 1.48)); margin: 0 auto; }
body.table-screen .map-card .map-frame { background: transparent; border: 0; }
body.table-screen .map-holder svg { border-radius: var(--kaq-radius-control); }
/* the latest roll floats over the scene rather than pushing the choices down */
.screen-roll { position: fixed; left: 50%; bottom: 3vh; transform: translateX(-50%); z-index: 40; max-width: 92vw; box-shadow: var(--kaq-shadow-overlay);
  display: flex; align-items: center; gap: 0.6em; margin: 0; padding: 0.6em 0.9em; border-radius: var(--kaq-radius-card); font-size: clamp(1.1rem, 1.8vw, 2.3rem); color: var(--kaq-color-ink); background: color-mix(in srgb, var(--kaq-color-forest) 22%, var(--kaq-color-surface-sunk)); border: 1px solid color-mix(in srgb, var(--kaq-color-forest) 55%, var(--kaq-color-line)); }
.screen-roll b { color: var(--kaq-color-forest); }
/* whose turn: one big banner the whole room can read */
body.table-screen .turn-now { margin: 0.4em 0 0.6em; padding: 0.35em 0.6em; border-radius: var(--kaq-radius-card); background: var(--kaq-color-forest); color: var(--kaq-color-forest-ink); font-size: clamp(1.4rem, 2.8vw, 3.4rem); line-height: 1.2; overflow-wrap: anywhere; }
body.table-screen .turn-round { font-size: clamp(0.8rem, 1vw, 1.25rem); }
body.table-screen .turn-row { font-size: clamp(0.92rem, 1.2vw, 1.5rem); }
body.table-screen .turn-detail { font-size: clamp(0.78rem, 0.9vw, 1.1rem); }
body.table-screen .handout-title { font-size: clamp(1.2rem, 1.8vw, 2.2rem); }
body.table-screen .handout-body { font-size: clamp(1rem, 1.4vw, 1.8rem); }
body.table-screen .monster, body.table-screen .monster-hp { font-size: clamp(0.9rem, 1.15vw, 1.45rem); }
body.table-screen .monster-attack, body.table-screen .monster-special { font-size: clamp(0.82rem, 1vw, 1.25rem); }
body.table-screen .monster-portrait { width: clamp(72px, 7vw, 150px); height: clamp(72px, 7vw, 150px); }
body.table-screen .friend-meter .ic { width: clamp(1rem, 1.4vw, 1.8rem); height: clamp(1rem, 1.4vw, 1.8rem); }
body.table-screen .jc, body.table-screen .journal-carried li { font-size: clamp(0.88rem, 1vw, 1.25rem); }
body.table-screen .journal-title { font-size: clamp(1.05rem, 1.4vw, 1.75rem); }
.screen-full { padding: 0.35rem 0.8rem; font-size: var(--kaq-size-small); display: inline-flex; align-items: center; gap: 0.4rem; }
body.table-screen.cursor-idle .screen-full { opacity: 0; }
.screen-stop { max-width: 640px; margin: 8vh auto 0; }
.screen-stop h1 { font-size: clamp(1.5rem, 2.4vw, 2.4rem); }
.screen-stop p { font-size: clamp(1rem, 1.3vw, 1.4rem); }
.screen-stop .btn { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; margin-top: 0.6rem; }
/* the GM's side: the code to read out, and whether a screen is on */
.screen-eyebrow { display: flex; align-items: center; gap: 0.45rem; }
.screen-help { font-size: var(--kaq-size-small); margin: 0.3rem 0 0.7rem; }
#screen-show { display: inline-flex; align-items: center; gap: 0.45rem; }
.screen-panel { margin-top: 0.4rem; }
.screen-step { font-size: var(--kaq-size-label); margin: 0.5rem 0; }
.screen-step strong { color: var(--kaq-color-ink); overflow-wrap: anywhere; }
.screen-code { margin: 0.2rem 0 0.7rem; font-family: ui-monospace, Menlo, monospace; font-size: clamp(1.3rem, 5vw, 1.9rem); letter-spacing: 0.1em; color: var(--kaq-color-ink); overflow-wrap: anywhere; }
.screen-status { display: flex; align-items: center; gap: 0.45rem; font-size: var(--kaq-size-small); margin: 0.7rem 0 0; }
.screen-status.on { color: var(--kaq-color-forest); }
/* screen.html: the code box is typed on a TV remote, so it is big */
.screen-in { font-family: ui-monospace, Menlo, monospace; font-size: var(--kaq-size-h2); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.7rem 0.8rem; }

/* The GM's session clock (#2457): calm, then amber, then a soft warm red,
   each with a text label so colour is never the only signal. */
.qr-clock { --clock: var(--kaq-color-ink-soft); margin: 0.55rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; font-size: var(--kaq-size-small); color: var(--kaq-color-ink-soft); }
.qr-clock[data-level="near"] { --clock: var(--kaq-color-lantern); }
.qr-clock[data-level="long"] { --clock: var(--kaq-color-berry); }
.qr-clock-line { display: inline-flex; align-items: center; gap: 0.35rem; }
.qr-clock .ic { color: var(--clock); }
.qr-clock-label { color: var(--clock); font-weight: 600; }
.qr-clock-bar { flex: 1 1 8rem; max-width: 14rem; height: 4px; border-radius: var(--kaq-radius-pill); background: var(--kaq-color-line); overflow: hidden; }
.qr-clock-bar > span { display: block; height: 100%; background: var(--clock); transition: width .6s ease; }
.sm-clock { margin-top: 0.2rem; }
.qr-nudge { margin-top: 0.55rem; padding: 0.55rem 0.8rem; border: 1px solid var(--kaq-color-line); border-inline-start: 3px solid var(--kaq-color-lantern); border-radius: var(--kaq-radius-control); background: var(--kaq-color-surface-sunk); font-size: var(--kaq-size-small); }
.qr-nudge p { margin: 0 0 0.45rem; }
.qr-nudge .row { gap: 0.5rem; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .qr-clock-bar > span { transition: none; } }

/* GM scene notes under the quest runner (#2257): private guidance, so it reads
   as a quieter aside to the stage controls rather than another button row. */
.gm-notes { margin-top: 0.7rem; background: var(--kaq-color-surface-sunk); border: 1px solid var(--kaq-color-line); border-inline-start: 3px solid var(--kaq-color-forest); border-radius: var(--kaq-radius-control); padding: 0.55rem 0.8rem; font-size: var(--kaq-size-small); line-height: 1.5; }
.gm-notes > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; font-weight: 600; list-style: none; }
.gm-notes > summary::-webkit-details-marker { display: none; }
.gm-notes .gm-notes-chev { margin-inline-start: auto; color: var(--kaq-color-ink-soft); transition: transform .15s ease; }
.gm-notes:not([open]) .gm-notes-chev { transform: rotate(-90deg); }
.gm-notes > summary:focus-visible { outline: 2px solid var(--kaq-color-forest); outline-offset: 3px; border-radius: var(--kaq-radius-control); }
.gm-notes-private { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 400; font-size: var(--kaq-size-label); color: var(--kaq-color-ink-soft); }
.gm-notes .ic { width: 1em; height: 1em; flex: none; }
.gm-note { margin-top: 0.6rem; }
.gm-note p { margin: 0; }
.gm-note-label { display: flex; align-items: center; gap: 0.35rem; font-size: var(--kaq-size-label); color: var(--kaq-color-forest); margin-bottom: 0.2rem !important; }
.gm-note ul { margin: 0; padding-inline-start: 1.1rem; }
.gm-note li + li { margin-top: 0.25rem; }
.gm-way-roll { font-size: var(--kaq-size-label); font-weight: 600; color: var(--kaq-color-forest); white-space: nowrap; }
.gm-way-row { display: block; margin-top: 0.15rem; color: var(--kaq-color-ink-soft); }
.gm-way-row b { color: var(--kaq-color-ink); font-weight: 600; }
.gm-note-tip p:not(.gm-note-label) { color: var(--kaq-color-ink-soft); font-style: italic; }
#qr-notes-empty { margin: 0.5rem 0 0; }

/* ---- preview mode (#2280): one scene, no account, nothing saved ---------- */
/* Everything that belongs to a real table is hidden; the scene, the map, the
   dice, who is here and the table log stay. */
body.table-preview #director, body.table-preview #sheet-card, body.table-preview #chat-card .row,
body.table-preview #chat-disabled, body.table-preview #backlink, body.table-preview #invite,
body.table-preview #journal-card, body.table-preview #handout-card, body.table-preview #handout-private-card,
body.table-preview #private-card, body.table-preview #turn-card, body.table-preview #monsters-card,
body.table-preview #check-call, body.table-preview #check-help, body.table-preview #map-hint, body.table-preview #screen-roll { display: none !important; }
.preview-banner { border-color: color-mix(in srgb, var(--kaq-color-forest) 55%, var(--kaq-color-line)); background: color-mix(in srgb, var(--kaq-color-forest) 9%, var(--kaq-color-surface)); }
.preview-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.preview-line { margin: 0; display: flex; align-items: center; gap: 0.45rem; }
.preview-line .ic { color: var(--kaq-color-forest); }
.preview-head button { display: inline-flex; align-items: center; gap: 0.4rem; }
.preview-you { margin: 0.7rem 0 0; display: flex; align-items: center; gap: 0.6rem; color: var(--kaq-color-ink-soft); font-size: var(--kaq-size-small); }
.preview-you:empty { display: none; }
.preview-you strong { color: var(--kaq-color-ink); }
.preview-hero { width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--kaq-color-surface-sunk); border: 1px solid var(--kaq-color-line); }
body.table-preview .choice-btn { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.choice-count { flex: none; min-width: 1.7rem; padding: 0.1rem 0.45rem; border-radius: var(--kaq-radius-pill); text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--kaq-size-small); background: var(--kaq-color-forest); color: var(--kaq-color-forest-ink); }
.choice-count.zero { background: transparent; color: var(--kaq-color-ink-soft); border: 1px solid var(--kaq-color-line); }
.preview-end { border-color: var(--kaq-color-forest); }
.preview-end-body { font-family: var(--kaq-font-display); font-size: var(--kaq-size-body); line-height: 1.5; margin: 0.4rem 0 1rem; }
.preview-end .row { flex-wrap: wrap; gap: 0.6rem; }
.preview-end .btn { display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none; }
/* Dashboard: the adventure picker (sparkfield#2284). Cover cards are labels
   around visually hidden radios, so the checked and focus states are styled
   through :has() on the card rather than on the (invisible) input. */
.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; }
.adv-picker { border: 0; padding: 0; margin: 0; min-width: 0; }
.adv-picker legend { font-size: var(--kaq-size-small); color: var(--kaq-color-ink); font-weight: 600; padding: 0; margin-bottom: 0.5rem; }
.adv-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin-bottom: 0.8rem; }
.adv-filter-label { font-size: var(--kaq-size-label); color: var(--kaq-color-ink-soft); }
.adv-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.adv-filter-chip { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 36px; padding: 0.3rem 0.75rem; border-radius: var(--kaq-radius-pill); font-size: var(--kaq-size-label); font-weight: 600; background: var(--kaq-color-surface-sunk); color: var(--kaq-color-ink); border: 1px solid var(--kaq-color-line); }
.adv-filter-chip:hover { transform: none; border-color: var(--kaq-color-forest); }
.adv-filter-chip[aria-pressed="true"] { background: var(--kaq-color-forest); border-color: var(--kaq-color-forest); color: var(--kaq-color-forest-ink); }
.adv-filter-chip:focus-visible { outline: 3px solid var(--kaq-color-forest); outline-offset: 2px; }
.adv-count { font-size: var(--kaq-size-label); font-weight: 700; opacity: 0.75; }
.adv-retry { margin-inline-start: 0.4rem; padding: 0.25rem 0.7rem; }
.adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.8rem; }
.adv-group { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.45rem; margin: 0.6rem 0 0; font-size: var(--kaq-size-small); color: var(--kaq-color-forest); }
.adv-card { position: relative; display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 0.5rem 0.5rem 0.65rem; min-width: 0; font-size: var(--kaq-size-small); color: var(--kaq-color-ink); background: var(--kaq-color-surface-sunk); border: 2px solid var(--kaq-color-line); border-radius: var(--kaq-radius-card); cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
.adv-card:hover { border-color: color-mix(in srgb, var(--kaq-color-forest) 60%, var(--kaq-color-line)); }
.adv-card:has(input:focus-visible) { outline: 3px solid var(--kaq-color-forest); outline-offset: 2px; }
.adv-card:has(input:checked) { border-color: var(--kaq-color-forest); box-shadow: 0 0 0 2px color-mix(in srgb, var(--kaq-color-forest) 35%, transparent); }
.adv-cover { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--kaq-radius-control); overflow: hidden; background: var(--kaq-color-surface); }
.adv-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.adv-chapter { position: absolute; inset-inline-start: 0.4rem; bottom: 0.4rem; font-size: var(--kaq-size-label); font-weight: 700; padding: 0.1rem 0.45rem; border-radius: var(--kaq-radius-pill); background: color-mix(in srgb, var(--kaq-color-paper) 88%, transparent); color: var(--kaq-color-ink); }
.adv-tick { position: absolute; top: 0.45rem; inset-inline-end: 0.45rem; display: none; width: 1.7rem; height: 1.7rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--kaq-color-forest); color: var(--kaq-color-forest-ink); }
.adv-card .adv-cover .adv-tick { top: 0.3rem; inset-inline-end: 0.3rem; }
.adv-tick .ic { width: 1.2rem; height: 1.2rem; }
.adv-card:has(input:checked) .adv-tick { display: inline-flex; }
.adv-title { font-family: var(--kaq-font-display); font-weight: 700; font-size: var(--kaq-size-body); line-height: 1.25; }
.adv-blurb { color: var(--kaq-color-ink-soft); font-size: var(--kaq-size-label); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adv-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: auto; padding-top: 0.2rem; }
.adv-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--kaq-size-label); line-height: 1.3; padding: 0.12rem 0.45rem; border-radius: var(--kaq-radius-pill); border: 1px solid var(--kaq-color-line); background: var(--kaq-color-surface); }
.adv-chip .ic { color: var(--kaq-color-forest); }
.adv-card.adv-none { justify-content: center; align-items: center; text-align: center; border-style: dashed; min-height: 160px; }
.adv-card.adv-none:has(input:checked) { border-style: solid; }
.adv-none-ic { font-size: var(--kaq-size-h2); color: var(--kaq-color-forest); line-height: 1; }
/* The name and the Create button stay in view while the GM scrolls the covers. */
.new-game-bar { position: sticky; bottom: 0; z-index: 2; margin: 1rem -1.3rem -1.3rem; padding: 0.4rem 1.3rem 1rem; background: var(--kaq-color-surface); border-top: 1px solid var(--kaq-color-line); border-radius: 0 0 var(--kaq-radius-card) var(--kaq-radius-card); box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.25); }
.adv-chosen { display: flex; align-items: center; gap: 0.55rem; min-height: 30px; margin: 0.4rem 0 0; font-size: var(--kaq-size-small); }
.adv-chosen img, .game-adv img { flex: none; width: 48px; height: 30px; object-fit: cover; border-radius: var(--kaq-radius-control); border: 1px solid var(--kaq-color-line); }
.new-game-row { display: flex; gap: 0.6rem; }
.new-game-row input { flex: 1; min-width: 0; }
.new-game-row button { flex: none; }
.game-adv { display: flex; align-items: center; gap: 0.5rem; font-size: var(--kaq-size-small); }
/* Where the table stopped (#2357): the scene line, then when it last met. */
.game-main { min-width: 0; }
.game-progress { margin-top: 0.35rem; font-size: var(--kaq-size-small); }
.game-scene { display: flex; align-items: flex-start; gap: 0.35rem; overflow-wrap: anywhere; }
.game-scene .ic { flex: none; margin-top: 0.15em; color: var(--kaq-color-forest); }
.game-teaser { margin: 0.15rem 0 0; font-size: var(--kaq-size-label); font-style: italic; overflow-wrap: anywhere; }
.game-when { font-size: var(--kaq-size-label); margin-top: 0.1rem; }
#games .spread { flex-wrap: wrap; }
#games .game-main { flex: 1 1 14rem; }
#games .row .btn, #games .row button { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; text-decoration: none; }
@media (max-width: 560px) {
  .new-game { padding: 0.9rem; }
  .new-game-bar { margin: 1rem -0.9rem -0.9rem; padding: 0.3rem 0.9rem 0.9rem; }
  .adv-grid { grid-template-columns: 1fr 1fr; gap: 0.55rem; }
  .adv-card { padding: 0.4rem 0.4rem 0.55rem; }
  .adv-title { font-size: var(--kaq-size-small); }
}
@media (prefers-reduced-motion: reduce) { .adv-card { transition: none; } }
/* Quick phrases (#2278): big, friendly tap targets a young child can hit on a
   phone, grouped as Do / Ask / Cheer. Logical properties throughout, so a
   Hebrew or Arabic panel mirrors on its own. */
.phrase-panel { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.7rem; transition: opacity .2s ease; }
.phrase-group-label { margin: 0 0 0.25rem; font-size: var(--kaq-size-label); color: var(--kaq-color-ink-soft); }
.phrase-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.45rem; }
.phrase-btn { display: flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0.55rem 0.75rem; text-align: start; background: var(--kaq-color-surface-sunk); color: var(--kaq-color-ink); border: 1px solid color-mix(in srgb, var(--kaq-color-forest) 40%, var(--kaq-color-line)); border-radius: var(--kaq-radius-card); font-weight: 600; font-size: var(--kaq-size-small); line-height: 1.25; }
.phrase-btn .ic { width: 1.25em; height: 1.25em; flex: none; color: var(--kaq-color-forest); }
.phrase-btn:hover { border-color: var(--kaq-color-forest); filter: none; }
.phrase-btn:focus-visible { outline: 2px solid var(--kaq-color-forest); outline-offset: 2px; }
.phrase-btn:active { transform: scale(0.97); }
/* resting after a tap: dimmed, never an alert */
.phrase-panel.cooling .phrase-btn, .phrase-btn.cooling { opacity: 0.45; cursor: default; }
.phrase-panel.cooling .phrase-btn:hover, .phrase-btn.cooling:hover { transform: none; border-color: color-mix(in srgb, var(--kaq-color-forest) 40%, var(--kaq-color-line)); }
.talk-note { font-size: var(--kaq-size-label); margin: 0.6rem 0 0; }
/* a phrase in the log reads as a speech bubble, apart from typed chat */
.chat-msg.phrase { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.phrase-bubble { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.65rem; border-radius: var(--kaq-radius-card) var(--kaq-radius-card) var(--kaq-radius-card) var(--kaq-radius-control); background: color-mix(in srgb, var(--kaq-color-forest) 16%, var(--kaq-color-surface)); border: 1px solid color-mix(in srgb, var(--kaq-color-forest) 35%, transparent); color: var(--kaq-color-ink); font-weight: 500; }
.phrase-bubble[dir="rtl"] { border-radius: var(--kaq-radius-card) var(--kaq-radius-card) var(--kaq-radius-control) var(--kaq-radius-card); }
.phrase-bubble .ic { width: 1.05em; height: 1.05em; flex: none; color: var(--kaq-color-forest); }
@media (prefers-reduced-motion: reduce) { .phrase-panel { transition: none; } .phrase-btn:active { transform: none; } }
/* the GM's switch: a labelled button with aria-pressed */
.director-help { font-size: var(--kaq-size-small); margin: 0.45rem 0 0; }
.switch { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; }
.switch-track { position: relative; width: 2.3rem; height: 1.3rem; border-radius: var(--kaq-radius-pill); background: var(--kaq-color-surface-sunk); border: 1px solid var(--kaq-color-line); flex: none; transition: background .15s ease; }
.switch-thumb { position: absolute; top: 2px; inset-inline-start: 2px; width: calc(1.3rem - 6px); height: calc(1.3rem - 6px); border-radius: 50%; background: var(--kaq-color-ink-soft); transition: inset-inline-start .15s ease, background .15s ease; }
.switch[aria-pressed="true"] .switch-track { background: color-mix(in srgb, var(--kaq-color-forest) 45%, var(--kaq-color-surface-sunk)); border-color: var(--kaq-color-forest); }
.switch[aria-pressed="true"] .switch-thumb { inset-inline-start: calc(2.3rem - 1.3rem + 2px); background: var(--kaq-color-ink); }
@media (prefers-reduced-motion: reduce) { .switch-track, .switch-thumb { transition: none; } }

/* ---- the storybook keepsake (#2305) ----
   One page of what the table played, on the live table (every seat and the
   screen) and on /storybook.html for printing. The book itself is a sheet of
   parchment in both places, so what a child sees on the tablet is what comes
   out of the printer. Print rules follow the library's printables
   (AdventurePrintable.astro, CharacterSheetPage.astro): white page, chrome and
   `.no-print` hidden, borders instead of fills, nothing split across a break. */
.storybook-card { border-color: color-mix(in srgb, var(--kaq-color-forest) 45%, var(--kaq-color-line)); }
.storybook-top { flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.9rem; }
.storybook-top .eyebrow { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.storybook-actions { gap: 0.5rem; }
.storybook-actions .btn, .storybook-actions button { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; text-decoration: none; }
/* .storybook carries data-theme="day" (app.js), so it is the day parchment. */
.storybook { --ink: var(--kaq-color-ink); --ink-soft: var(--kaq-color-ink-soft); --rule: var(--kaq-color-line); --gold: var(--kaq-color-forest);
  background: var(--kaq-color-paper); color: var(--ink); border-radius: var(--kaq-radius-card); padding: clamp(0.9rem, 2.5vw, 1.6rem); }
.sb-cover { display: flex; gap: 1rem; align-items: center; padding-bottom: 0.9rem; margin-bottom: 0.9rem; border-bottom: 2px solid var(--rule); }
.sb-cover-img { width: 150px; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--kaq-radius-control); border: 1px solid var(--rule); flex: none; }
.sb-eyebrow, .sb-head, .sb-n { margin: 0; font-size: var(--kaq-size-label); color: var(--gold); }
.sb-title { margin: 0.15rem 0 0.1rem; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.15; color: var(--ink); }
.sb-date { margin: 0; font-size: var(--kaq-size-small); color: var(--ink-soft); }
.sb-head { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.45rem; }
.sb-heroes { margin-bottom: 1rem; }
.sb-heroes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.3rem; }
.sb-heroes li { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.sb-hero-img, .sb-hero-ph { width: 48px; height: 48px; border-radius: var(--kaq-radius-pill); border: 2px solid var(--rule); background: var(--kaq-color-surface-sunk); flex: none; object-fit: cover; }
.sb-hero-ph { display: grid; place-items: center; color: var(--gold); }
.sb-beats { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
@media (min-width: 700px) { .sb-beats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sb-beat, .sb-ending, .sb-campaign, .sb-heroes, .sb-cover { break-inside: avoid; }
.sb-beat img, .sb-ending img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--kaq-radius-control); border: 1px solid var(--rule); margin-bottom: 0.4rem; }
.sb-n { display: flex; align-items: center; gap: 0.3rem; }
.sb-beat-title { margin: 0.1rem 0 0.25rem; font-size: var(--kaq-size-body); line-height: 1.3; color: var(--ink); }
.sb-choice { display: flex; gap: 0.35rem; align-items: flex-start; margin: 0; font-size: var(--kaq-size-small); color: var(--ink-soft); }
.sb-choice .ic { flex: none; margin-top: 0.2em; color: var(--gold); }
.sb-choice strong { color: var(--ink); }
.sb-ending { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1rem; align-items: center; padding-top: 1rem; border-top: 2px solid var(--rule); }
.sb-ending img { margin: 0; }
.sb-end-text { margin: 0 0 0.45rem; line-height: 1.55; }
.sb-campaign { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); }
.sb-chapters { margin: 0 0 0.5rem; padding-inline-start: 1.3rem; }
.sb-carried { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: var(--kaq-size-small); }
.sb-carried li { display: flex; gap: 0.4rem; align-items: flex-start; }
.sb-carried .ic { flex: none; margin-top: 0.2em; color: var(--gold); }
.sb-carrying { margin-top: var(--kaq-space-3); }
/* A chapter stopped for the night (issue 2696): the teaser is read aloud, so it is
   Literata and the largest text in this part of the page. */
.sb-continued { margin-top: 1.1rem; padding: var(--kaq-space-4) var(--kaq-space-5) 0; border-top: 2px solid var(--rule); text-align: center; break-inside: avoid; }
.sb-continued-title { margin: 0; font-family: var(--kaq-font-display); font-size: var(--kaq-size-h3); letter-spacing: 0.12em; color: var(--gold); }
.sb-teaser { max-width: 46ch; margin: var(--kaq-space-3) auto 0; font-family: var(--kaq-font-read); font-size: var(--kaq-size-read); line-height: 1.55; color: var(--ink); }
.sb-next { display: inline-flex; align-items: center; gap: var(--kaq-space-2); margin: var(--kaq-space-3) 0 0; font-weight: 600; color: var(--ink-soft); }
.sb-next .ic { flex: none; color: var(--gold); }
.sb-the-end { margin: 1.1rem 0 0; text-align: center; font-family: var(--kaq-font-display); font-size: var(--kaq-size-h3); letter-spacing: 0.12em; color: var(--gold); }
@media (max-width: 560px) {
  .sb-cover { flex-direction: column; align-items: flex-start; }
  .sb-cover-img { width: 100%; }
  .sb-ending { grid-template-columns: 1fr; }
}
/* The table screen shows the book and nothing to press. */
body.table-screen .storybook-actions { display: none !important; }
body.table-screen .storybook-card { scroll-margin-top: 1rem; }

/* The story so far (#2463): the scenes played before the one on stage, for a
   seat that joined late or came back. A native <details>, so it opens and
   closes with no script and reads as a disclosure to a screen reader. */
.so-far-card { margin-bottom: 1rem; padding: 0; border-color: color-mix(in srgb, var(--kaq-color-forest) 35%, var(--kaq-color-line)); }
.so-far-sum { display: flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0.55rem 1.1rem; cursor: pointer; list-style: none; color: var(--kaq-color-forest); }
.so-far-sum::-webkit-details-marker { display: none; }
.so-far-sum:focus-visible { outline: 2px solid var(--kaq-color-forest); outline-offset: -2px; border-radius: var(--kaq-radius-card); }
.so-far-title { font-family: var(--kaq-font-display); font-weight: 700; color: var(--kaq-color-ink); }
.so-far-count { margin-inline-start: auto; font-size: var(--kaq-size-label); color: var(--kaq-color-ink-soft); }
.so-far-sum > svg.ic:last-child { transition: transform .15s ease; }
.so-far-card[open] .so-far-sum > svg.ic:last-child { transform: rotate(180deg); }
.so-far-body { padding: 0 1.1rem 1rem; }
.so-far-body .listen-btn { min-height: 44px; margin-bottom: 0.7rem; }
.so-far-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.so-far-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem; background: var(--kaq-color-surface-sunk); border-radius: var(--kaq-radius-control); }
.so-far-item img, .so-far-ph { width: 96px; height: 64px; flex-shrink: 0; border-radius: var(--kaq-radius-control); object-fit: cover; }
.so-far-ph { display: grid; place-items: center; background: var(--kaq-color-surface); color: var(--kaq-color-ink-soft); font-size: var(--kaq-size-h3); }
.so-far-n { margin: 0; font-size: var(--kaq-size-label); color: var(--kaq-color-ink-soft); }
.so-far-t { margin: 0.1rem 0 0; font-weight: 600; }
.so-far-choice { display: flex; align-items: center; gap: 0.4rem; margin: 0.2rem 0 0; font-size: var(--kaq-size-small); color: var(--kaq-color-ink-soft); }
.so-far-choice strong { color: var(--kaq-color-ink); }
.so-far-show-row { margin-top: 0.6rem; }
.so-far-show-row button { min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .so-far-sum > svg.ic:last-child { transition: none; } }
body.table-screen .so-far-sum { font-size: clamp(1rem, 1.6vw, 2rem); padding: 0.8rem 1.4rem; }
body.table-screen .so-far-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
body.table-screen .so-far-item img, body.table-screen .so-far-ph { width: clamp(120px, 12vw, 220px); height: auto; aspect-ratio: 3 / 2; }
body.table-screen .so-far-t { font-size: clamp(1rem, 1.5vw, 1.8rem); }
body.table-screen .so-far-count { font-size: clamp(0.85rem, 1vw, 1.3rem); }
body.table-screen .so-far-choice { font-size: clamp(0.9rem, 1.2vw, 1.5rem); }
@media (min-width: 1000px) {
  body.table-screen .sb-beat-title { font-size: clamp(1rem, 1.3vw, 1.6rem); }
  body.table-screen .sb-end-text { font-size: clamp(1rem, 1.4vw, 1.8rem); }
  body.table-screen .sb-teaser { font-size: var(--kaq-size-h3); }
}
/* /storybook.html */
body.storybook-page .sb-wrap { max-width: 900px; }
body.storybook-page .sb-tip { font-size: var(--kaq-size-small); margin: 0 0 0.8rem; }
body.storybook-page header.top .row button { display: inline-flex; align-items: center; gap: 0.4rem; }
/* Sharing a storybook with family (sparkfield issue 2858): the GM's panel on the table card
   and /storybook.html, and the shared page /book/<game>/<token>. */
.sb-share { margin: 0 0 var(--kaq-space-4); padding: var(--kaq-space-3) var(--kaq-space-4); border: 1px solid var(--kaq-color-line); border-radius: var(--kaq-radius-card); background: var(--kaq-color-surface-sunk); }
.sb-share-head { display: flex; align-items: center; gap: var(--kaq-space-2); margin: 0 0 var(--kaq-space-1); font-weight: 700; }
.sb-share-note { display: flex; align-items: flex-start; gap: var(--kaq-space-2); margin: 0 0 var(--kaq-space-3); font-size: var(--kaq-size-small); color: var(--kaq-color-ink-soft); }
.sb-share-row { display: flex; flex-wrap: wrap; gap: var(--kaq-space-2); margin-bottom: var(--kaq-space-2); }
.sb-share-url { flex: 1 1 16rem; min-width: 0; background: var(--kaq-color-surface); min-height: var(--kaq-touch-min); font-family: var(--kaq-font-ui); font-size: var(--kaq-size-small); direction: ltr; }
body.table-screen .sb-share { display: none !important; }
body.storybook-page .sb-share-open { margin: 0 0 var(--kaq-space-3); }
body.shared-book-page .sb-shared-foot { margin: var(--kaq-space-6) 0 var(--kaq-space-4); text-align: center; }
body.shared-book-page .sb-library { display: inline-flex; align-items: center; gap: var(--kaq-space-2); min-height: var(--kaq-touch-min); color: var(--kaq-color-forest); font-weight: 700; }
@media print {
  @page { margin: 12mm; }
  body.storybook-page { background: #fff !important; color: #111 !important; }
  body.storybook-page .no-print { display: none !important; }
  body.storybook-page .sb-wrap { max-width: none; margin: 0; padding: 0; }
  body.storybook-page .storybook { --ink: #111; --ink-soft: #444; --gold: #5c4312; --rule: #bbb;
    background: #fff !important; border-radius: 0; padding: 0; }
  body.storybook-page .sb-hero-img, body.storybook-page .sb-hero-ph { background: none !important; }
  body.storybook-page .sb-cover { padding-bottom: 3mm; margin-bottom: 3mm; }
  body.storybook-page .sb-cover-img { width: 42mm; }
  body.storybook-page .sb-title { font-size: 20pt; }
  body.storybook-page .sb-heroes { margin-bottom: 3mm; }
  body.storybook-page .sb-hero-img, body.storybook-page .sb-hero-ph { width: 11mm; height: 11mm; }
  /* Three across, pictures capped, so a seven-scene quest is one A4 or Letter page. */
  body.storybook-page .sb-beats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3mm 4mm; margin-bottom: 3mm; }
  body.storybook-page .sb-beat img { max-height: 30mm; margin-bottom: 1mm; }
  body.storybook-page .sb-beat-title { font-size: 10pt; }
  body.storybook-page .sb-choice { font-size: 8.5pt; }
  body.storybook-page .sb-ending { padding-top: 3mm; gap: 5mm; }
  body.storybook-page .sb-ending img { max-height: 48mm; }
  body.storybook-page .sb-end-text { font-size: 10pt; }
  body.storybook-page .sb-campaign { margin-top: 3mm; padding-top: 3mm; font-size: 9pt; }
  body.storybook-page .sb-the-end { margin-top: 4mm; font-size: 16pt; }
  body.storybook-page .sb-continued { margin-top: 4mm; padding-top: 3mm; }
  body.storybook-page .sb-teaser { font-size: 12pt; }
  body.storybook-page a[href]::after { content: ''; }
}

/* ---- the pause card (#2306): one big calm card, the GM's alert, the breather */
/* Above the full-screen map and the lightbox, so a child can always reach it. */
.pause-card {
  position: fixed; bottom: max(1rem, env(safe-area-inset-bottom)); inset-inline-end: max(1rem, env(safe-area-inset-right));
  z-index: 80; min-height: 72px; min-width: 132px; max-width: calc(100vw - 2rem); padding: 0.9rem 1.5rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  /* data-theme="day" on the button: a calm paper card on the night table. */
  border-radius: var(--kaq-radius-pill); border: 2px solid var(--kaq-color-line); background: var(--kaq-color-paper); color: var(--kaq-color-ink);
  font-family: var(--kaq-font-display); font-size: var(--kaq-size-h3); line-height: 1.2; text-align: start;
  box-shadow: var(--kaq-shadow-overlay);
}
.pause-card .ic { width: 1.9rem; height: 1.9rem; flex: none; }
.pause-card:hover { filter: brightness(1.03); transform: none; }
.pause-card:focus-visible { outline: 3px solid var(--kaq-color-forest); outline-offset: 3px; }
.pause-card[data-state="heard"] { background: color-mix(in srgb, var(--kaq-color-forest) 18%, var(--kaq-color-paper)); border-color: var(--kaq-color-forest); font-size: var(--kaq-size-body); }
.pause-card[data-state="waiting"] { background: var(--kaq-color-surface-sunk); font-size: var(--kaq-size-body); }
/* The card never covers a choice: the page ends above it. */
body.has-pause-card .wrap { padding-bottom: calc(72px + 3rem); }
body.table-screen .pause-card, body.table-preview .pause-card { display: none !important; }

.pause-alert {
  position: sticky; top: 0.5rem; z-index: 45; margin: 0 0 1rem; padding: 1rem 1.2rem;
  border-radius: var(--kaq-radius-card); border: 2px solid var(--kaq-color-ink); background: var(--kaq-color-surface);
  box-shadow: var(--kaq-shadow-overlay);
}
.pause-alert-who { display: flex; align-items: center; gap: 0.55rem; margin: 0; font-size: var(--kaq-size-body); color: var(--kaq-color-ink); }
.pause-alert-who .ic { width: 1.4rem; height: 1.4rem; flex: none; }
.pause-alert-help { margin: 0.3rem 0 0.8rem; color: var(--kaq-color-ink-soft); font-size: var(--kaq-size-small); }
.pause-alert-actions button { min-height: 44px; display: inline-flex; align-items: center; gap: 0.4rem; }
.pause-alert-actions button[aria-pressed="true"] { background: color-mix(in srgb, var(--kaq-color-forest) 22%, transparent); }

.breather {
  display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin: 0 0 1rem; padding: 1rem 1.2rem;
  border-radius: var(--kaq-radius-card); border: 1px solid color-mix(in srgb, var(--kaq-color-ink) 45%, var(--kaq-color-line));
  background: color-mix(in srgb, var(--kaq-color-ink) 12%, var(--kaq-color-surface)); color: var(--kaq-color-ink);
  font-family: var(--kaq-font-display); font-size: var(--kaq-size-h3); text-align: center;
  animation: breather-in 1.6s ease both;
}
.breather .ic { width: 1.6rem; height: 1.6rem; flex: none; }
body.table-screen .breather { font-size: clamp(1.8rem, 4vw, 5rem); padding: 3vh 2vw; margin-bottom: 1.2vw; border-radius: var(--kaq-radius-card); }
body.table-screen .breather .ic { width: 1.1em; height: 1.1em; }
@keyframes breather-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .breather { animation: none; } }

/* The party vote (#2345): counts and names on every choice, the GM's lock,
   and "The party chose" on every screen. The badge is the preview's
   `.choice-count`, now on every seat. */
.choice-btn { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; min-height: 44px; }
.vote-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 auto; }
.choice-names { font-size: var(--kaq-size-label); font-weight: 400; color: var(--kaq-color-ink-soft); overflow-wrap: anywhere; }
.choice-names:empty { display: none; }
.choice-btn.picked .choice-names { color: var(--kaq-color-ink); }
.choice-btn:disabled:not(.decided) { opacity: 0.55; }
.choice-btn.decided, .screen-choice.decided { border-color: var(--kaq-color-forest); background: color-mix(in srgb, var(--kaq-color-forest) 24%, var(--kaq-color-surface-sunk)); color: var(--kaq-color-ink); opacity: 1; }
.vote-row { padding: 0.5rem 0.6rem 0.5rem 1rem; border-radius: var(--kaq-radius-control); }
.vote-row:hover { border-color: var(--kaq-color-line); }
.vote-row.leading { border-color: color-mix(in srgb, var(--kaq-color-forest) 70%, var(--kaq-color-line)); box-shadow: inset 3px 0 0 var(--kaq-color-forest); }
.vote-lock { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; }
.vote-row.decided .vote-lock { background: transparent; color: var(--kaq-color-forest); }
.vote-tie { margin: 0 0 0.6rem; font-size: var(--kaq-size-small); color: var(--kaq-color-ink); }
.vote-result { display: flex; align-items: center; gap: 0.55rem; margin: 0.8rem 0 0; padding: 0.7rem 0.9rem; border-radius: var(--kaq-radius-card);
  border: 1px solid color-mix(in srgb, var(--kaq-color-forest) 55%, var(--kaq-color-line)); background: color-mix(in srgb, var(--kaq-color-forest) 16%, var(--kaq-color-surface-sunk));
  color: var(--kaq-color-ink); font-family: var(--kaq-font-display); font-size: var(--kaq-size-body); }
.vote-result .ic { width: 1.3rem; height: 1.3rem; flex: none; color: var(--kaq-color-forest); }
.vote-result strong { color: var(--kaq-color-forest); }
.choice-count.bump { animation: vote-bump 0.4s ease; }
@keyframes vote-bump { 50% { transform: scale(1.25); } }
.screen-choice .vote-main { gap: 0.1em; }
.screen-choice .choice-names { font-size: 0.6em; }
.screen-choice .choice-count { font-size: 0.75em; min-width: 1.8em; }
body.table-screen #vote-result { margin: 0.8vw 0 0; padding: 0.35em 0.6em; font-size: clamp(1.4rem, 2.8vw, 3.4rem); line-height: 1.2; overflow-wrap: anywhere; }
body.table-screen #vote-result .ic { width: 1em; height: 1em; }
body.table-screen .stage-choices.has-decision .screen-choice:not(.decided) { display: none; }
@media (prefers-reduced-motion: reduce) { .choice-count.bump { animation: none; } }

/* ---- story mode (#2348) ----
   The GM console a parent meets first: the scene, four big buttons and the
   scene's tip. Everything else is hidden, not removed, until "More tools"
   opens the drawer or "Full console" gives back the whole column. */
.director-head { flex-wrap: wrap; gap: 0.2rem 0.8rem; margin-bottom: 0.3rem; }
.director-head .eyebrow { margin: 0; }
#director:not(.story) #story-panel { display: none; }
#director.story:not(.drawer-open) > .director-block:not(#quest-block),
#director.story:not(.drawer-open) #qr-head,
#director.story:not(.drawer-open) #qr-nav,
#director.story:not(.drawer-open) #qr-read-wrap,
#director.story:not(.drawer-open) #qr-notes,
#director.story.running:not(.drawer-open) #quest-load-label,
#director.story.running:not(.drawer-open) #quest-load-row { display: none !important; }
#director.story.running:not(.drawer-open) #quest-block { margin-top: 0; }
#director.story.drawer-open #quest-block { border-top: 1px solid var(--kaq-color-line); margin-top: 1rem; padding-top: 0.9rem; }

.sm-scene { font-family: var(--kaq-font-display); font-size: var(--kaq-size-body); color: var(--kaq-color-ink); margin: 0.2rem 0 0.8rem; overflow-wrap: anywhere; }
.sm-sheet { margin-top: 0.8rem; padding: 0.8rem; border: 1px solid var(--kaq-color-line); border-radius: var(--kaq-radius-card); background: var(--kaq-color-surface-sunk); }
.sm-sheet label { margin-top: 0; }
.sm-sheet select { width: 100%; min-height: 44px; }
.sm-sheet-label { font-size: var(--kaq-size-label); color: var(--kaq-color-ink-soft); margin: 0.8rem 0 0.3rem; }
.sm-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
.sm-choices button { min-height: 48px; padding: 0.4rem 0.3rem; }
.sm-choices button[aria-pressed="true"] { background: var(--kaq-color-forest); color: var(--kaq-color-forest-ink); }
.sm-hint { font-size: var(--kaq-size-label); margin: 0.4rem 0 0; }
.sm-ask { width: 100%; min-height: 52px; margin-top: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 0.45rem; }
.sm-pending-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.7rem; }
.sm-pending-row .qc-pending { margin: 0; flex: 1 1 12rem; }
.sm-pending-row button { min-height: 44px; display: inline-flex; align-items: center; gap: 0.35rem; }
.sm-tip { display: flex; gap: 0.55rem; align-items: flex-start; margin: 0.8rem 0 0; padding: 0.65rem 0.8rem; border-radius: var(--kaq-radius-control); border-inline-start: 3px solid var(--kaq-color-forest); background: var(--kaq-color-surface-sunk); font-size: var(--kaq-size-small); line-height: 1.5; }
.sm-tip .ic { width: 1.15rem; height: 1.15rem; flex: none; color: var(--kaq-color-forest); margin-top: 0.15rem; }
.sm-foot { margin-top: 0.8rem; }
.sm-foot button { min-height: 44px; display: inline-flex; align-items: center; gap: 0.4rem; }

/* Join by scanning a code (#2352). The QR is always dark on white, whatever
   the theme around it: a scanner needs the contrast, not the palette. */
.qr-toggle { min-height: 44px; display: inline-flex; align-items: center; gap: 0.4rem; }
.qr-frame { background: #fff; border-radius: var(--kaq-radius-card); padding: 0; line-height: 0; flex: none; }
.qr-frame svg.qr { display: block; width: 100%; height: auto; }
.qr-code-text { margin: 0.6rem 0 0; }
.qr-code-text .code { font-size: var(--kaq-size-h2); font-weight: 700; letter-spacing: 0.2em; }
.qr-help { margin: 0.5rem 0 0; color: var(--kaq-color-ink-soft); font-size: var(--kaq-size-small); }
.invite-qr { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.invite-qr-body { display: flex; flex-direction: column; align-items: flex-start; }
.invite-qr .qr-frame { width: 220px; max-width: 100%; }
.card-qr { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--kaq-color-line); }
.card-qr .qr-frame { width: 180px; max-width: 100%; }
.screen-join { display: flex; align-items: center; justify-content: center; gap: max(1rem, 2.4vw); flex-wrap: wrap; padding: 0 0 3vh; pointer-events: none; user-select: none; }
.screen-join .qr-frame { width: min(40vh, 30vw); min-width: 160px; }
.screen-join.small .qr-frame { width: min(20vh, 15vw); min-width: 110px; }
.screen-join-text { text-align: start; }
.screen-join-head { font-family: var(--kaq-font-display); color: var(--kaq-color-ink); font-size: clamp(1.4rem, 2.6vw, 3.2rem); margin: 0; }
.screen-join.small .screen-join-head { font-size: clamp(1.1rem, 1.7vw, 2.2rem); }
.screen-join .qr-code-text .code { font-size: clamp(1.6rem, 3.2vw, 4rem); }
.screen-join.small .qr-code-text .code { font-size: clamp(1.2rem, 2vw, 2.6rem); }
.screen-join-url { margin: 0.6rem 0 0; color: var(--kaq-color-ink-soft); font-size: clamp(0.9rem, 1.2vw, 1.5rem); }
.screen-join-count { margin: 0.6rem 0 0; color: var(--kaq-color-forest); font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.9rem); }

/* The dice moment on a check (#2355). Above the table screen's roll toast (40),
   the zoomed map (60) and the lightbox (70), below the pause card (80). */
.roll-moment {
  position: fixed; inset: 0; z-index: 75; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: color-mix(in srgb, var(--kaq-color-surface-sunk) 82%, transparent); cursor: pointer;
}
.rm-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: min(26rem, 100%);
  padding: 1.6rem 1.4rem 1.3rem; border-radius: var(--kaq-radius-card); text-align: center;
  background: var(--kaq-color-surface); border: 2px solid color-mix(in srgb, var(--kaq-color-forest) 55%, var(--kaq-color-line));
  box-shadow: var(--kaq-shadow-overlay);
}
.rm-die { position: relative; width: 160px; height: 160px; color: var(--kaq-color-forest); display: grid; place-items: center; }
.rm-shape { position: absolute; inset: 0; width: 100%; height: 100%; fill: color-mix(in srgb, var(--kaq-color-forest) 16%, transparent); }
.rm-face { position: relative; font-family: var(--kaq-font-display); font-weight: 700; font-size: var(--kaq-size-display); line-height: 1; color: var(--kaq-color-ink); font-variant-numeric: tabular-nums; }
.rm-sum { margin: 0.2rem 0 0; font-size: var(--kaq-size-h3); color: var(--kaq-color-ink); }
.rm-sum b { color: var(--kaq-color-forest); font-size: 1.2em; }
.rm-dn { display: block; font-size: var(--kaq-size-label); color: var(--kaq-color-ink-soft); }
.rm-word { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0.2rem 0 0; font-family: var(--kaq-font-display); font-weight: 700; font-size: var(--kaq-size-h1); line-height: 1.15; color: var(--kaq-color-ink); overflow-wrap: anywhere; }
.rm-word .ic { width: 1em; height: 1em; flex: none; color: var(--kaq-color-forest); }
.roll-moment[data-result="fail"] .rm-word { color: var(--kaq-color-ink); }
.roll-moment[data-result="fail"] .rm-word .ic { color: var(--kaq-color-ink-soft); }
.rm-line { margin: 0; color: var(--kaq-color-ink-soft); font-size: var(--kaq-size-body); }
.rm-ok { min-height: 44px; min-width: 7rem; margin-top: 0.6rem; }
/* rolling: the die wobbles and the words wait; settled: they arrive in turn */
.roll-moment.rolling .rm-die { animation: rm-tumble 0.35s ease-in-out infinite alternate; }
.roll-moment.rolling .rm-sum, .roll-moment.rolling .rm-word, .roll-moment.rolling .rm-line { visibility: hidden; }
.roll-moment.settled .rm-die { animation: rm-land 0.3s ease-out both; }
.roll-moment.settled .rm-sum { animation: rm-in 0.25s ease-out both; }
.roll-moment.settled .rm-word, .roll-moment.settled .rm-line { animation: rm-in 0.3s ease-out 0.25s both; }
@keyframes rm-tumble { from { transform: rotate(-14deg) scale(0.94); } to { transform: rotate(14deg) scale(1.04); } }
@keyframes rm-land { 0% { transform: scale(1.12); } 100% { transform: none; } }
@keyframes rm-in { from { opacity: 0; transform: translateY(0.3em); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .roll-moment.rolling .rm-die, .roll-moment.settled .rm-die, .roll-moment.settled .rm-sum,
  .roll-moment.settled .rm-word, .roll-moment.settled .rm-line { animation: none; }
}
body.table-screen .rm-card { width: min(60rem, 92vw); padding: 4vh 3vw 3vh; border-radius: var(--kaq-radius-card); }
body.table-screen .rm-die { width: min(30vh, 22vw); height: min(30vh, 22vw); }
body.table-screen .rm-face { font-size: min(13vh, 9.5vw); }
body.table-screen .rm-sum { font-size: clamp(1.3rem, 2.4vw, 3rem); }
body.table-screen .rm-dn { font-size: clamp(0.9rem, 1.3vw, 1.6rem); }
body.table-screen .rm-word { font-size: clamp(2.4rem, 5vw, 6rem); }
body.table-screen .rm-line { font-size: clamp(1.1rem, 2vw, 2.4rem); }
body.table-preview .roll-moment, body.table-preview .check-result { display: none !important; }
/* A creature comes in, or becomes a friend (#2677): the table screen, four seconds. */
.creature-moment {
  position: fixed; inset: 0; z-index: 74; display: flex; align-items: center; justify-content: center;
  padding: 3vh 3vw; background: color-mix(in srgb, var(--kaq-color-surface-sunk) 86%, transparent);
}
.cm-card { display: flex; flex-direction: column; align-items: center; gap: 1.5vh; text-align: center; width: min(70rem, 94vw); animation: cm-in 0.6s ease-out both; }
.cm-portrait { width: min(62vh, 80vw); height: min(62vh, 80vw); border-radius: var(--kaq-radius-card); object-fit: cover;
  border: 3px solid color-mix(in srgb, var(--kaq-color-forest) 65%, var(--kaq-color-line)); box-shadow: 0 24px 70px color-mix(in srgb, var(--kaq-color-surface-sunk) 80%, transparent); }
/* No painting yet: no screen-sized empty frame on the TV, just the name card
   with a small marked "Picture coming soon" above it (CDO note on #2740). */
.cm-portrait.creature-ph { width: auto; height: auto; border: 0; border-radius: 0; box-shadow: none; background: none;
  flex-direction: row; gap: 0.5em; font-size: clamp(0.9rem, 1.6vw, 1.8rem); color: var(--kaq-color-ink-soft); }
.cm-portrait.creature-ph .ic { width: 1.4em; height: 1.4em; }
.cm-name { display: flex; align-items: center; justify-content: center; gap: 0.4em; margin: 0; font-family: var(--kaq-font-display); font-weight: 700; color: var(--kaq-color-ink);
  font-size: clamp(2rem, 5vw, 6rem); line-height: 1.1; overflow-wrap: anywhere; }
.cm-name .ic { width: 1em; height: 1em; flex: none; color: var(--kaq-color-forest); }
.cm-line { margin: 0; color: var(--kaq-color-ink-soft); font-size: clamp(1.1rem, 2.2vw, 2.6rem); }
.creature-moment[data-kind="friend"] .cm-portrait:not(.creature-ph) { border-color: var(--kaq-color-forest); }
@keyframes cm-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
.creature-moment.still .cm-card { animation: none; }
@media (prefers-reduced-motion: reduce) { .cm-card { animation: none; } }
body.table-preview .creature-moment { display: none !important; }
.friend-toast { position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%); z-index: 45; max-width: 92vw; margin: 0;
  display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.9rem 0.55rem 0.55rem; border-radius: var(--kaq-radius-card); color: var(--kaq-color-ink); font-weight: 600;
  background: color-mix(in srgb, var(--kaq-color-forest) 22%, var(--kaq-color-surface-sunk)); border: 1px solid color-mix(in srgb, var(--kaq-color-forest) 55%, var(--kaq-color-line)); box-shadow: var(--kaq-shadow-overlay); }
.friend-toast > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.friend-toast .ic { color: var(--kaq-color-forest); }
.friend-toast-portrait { width: 48px; height: 48px; flex: none; border-radius: var(--kaq-radius-control); object-fit: cover; }
/* 48px is too small to read the words: the icon alone, the words stay in aria-label. */
.friend-toast-portrait.creature-ph > span { display: none; }
.sb-friends { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 1rem; }
.sb-friends .ic { flex: none; color: var(--gold); }
/* the small card: the last check's results, for everyone who was watching */
.check-result { margin-top: 0.7rem; padding: 0.6rem 0.9rem; border-radius: var(--kaq-radius-control); background: var(--kaq-color-surface-sunk); border: 1px solid color-mix(in srgb, var(--kaq-color-forest) 35%, var(--kaq-color-line)); }
.check-result-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.check-result-row { display: flex; align-items: flex-start; gap: 0.55rem; }
.check-result-row .ic { width: 1.4rem; height: 1.4rem; flex: none; margin-top: 0.1rem; color: var(--kaq-color-forest); }
.check-result-row.fail .ic { color: var(--kaq-color-ink-soft); }
.check-result-word { display: block; font-size: var(--kaq-size-body); font-weight: 600; color: var(--kaq-color-ink); }
.check-result-word b { color: var(--kaq-color-forest); }
.check-result-sum { display: block; font-size: var(--kaq-size-small); color: var(--kaq-color-ink-soft); }
/* how a roll was made, on the GM's card only (#2680) */
.check-result-how { display: flex; align-items: center; gap: 0.3rem; font-size: var(--kaq-size-label); color: var(--kaq-color-ink-soft); }
.check-result-row .check-result-how .ic { width: 1em; height: 1em; margin: 0; color: var(--kaq-color-ink-soft); }
.check-result-again { margin-inline-start: auto; flex: none; }
/* Heroes grow between quests (#2376): a row of badge chips, the tricks learned
   on top of the card's own, and the pick a finished quest offers. The pick is
   big, full width on a phone, and never scrolls sideways. */
.growth-tricks .sheet-trick { margin-top: 0.45rem; }
.growth-badges { margin-top: 0.7rem; }
.growth-head { margin: 0 0 0.35rem; font-size: var(--kaq-size-label); color: var(--kaq-color-ink-soft); }
.badge-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.badge-chip { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--kaq-color-surface-sunk); border: 2px solid color-mix(in srgb, var(--kaq-color-forest) 55%, var(--kaq-color-line)); color: var(--kaq-color-forest); }
.badge-chip .ic { width: 1.3rem; height: 1.3rem; }
.trick-offer { margin-top: 0.8rem; padding: 0.75rem 0.85rem; border-radius: var(--kaq-radius-card); background: var(--kaq-color-surface-sunk); border: 2px solid var(--kaq-color-forest); }
.trick-offer-head { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.6rem; font-family: var(--kaq-font-display); font-size: var(--kaq-size-body); font-weight: 700; color: var(--kaq-color-ink); }
.trick-offer-head .ic { width: 1.4em; height: 1.4em; flex: none; color: var(--kaq-color-forest); }
.trick-offer-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.5rem; }
@media (max-width: 560px) { .trick-offer-list { grid-template-columns: 1fr; } }
.trick-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; min-height: 48px; width: 100%; padding: 0.65rem 0.8rem; text-align: start; background: var(--kaq-color-surface); color: var(--kaq-color-ink); border: 1px solid color-mix(in srgb, var(--kaq-color-forest) 40%, var(--kaq-color-line)); border-radius: var(--kaq-radius-card); font-weight: 400; line-height: 1.35; }
.trick-pick b { color: var(--kaq-color-ink); font-size: var(--kaq-size-body); }
.trick-pick span { font-size: var(--kaq-size-small); }
.trick-pick:hover { border-color: var(--kaq-color-forest); filter: none; }
.trick-pick:focus-visible { outline: 2px solid var(--kaq-color-forest); outline-offset: 2px; }
.trick-pick[disabled] { opacity: 0.55; cursor: default; }
/* Pointing at the map (#2386): a child's tap draws a dot, a ring and the
   hero's name for three seconds. Six seat colours, each at least 3.8:1 on the
   parchment (#e8d8ad) and none of them the pin's amber; the name is always
   drawn too, so colour is never the only cue. */
.map-card.ping-armed .map-holder svg { cursor: pointer; }
.ping-layer { pointer-events: none; }
.ping.tone-0 { --ping: #1d5fbf; }
.ping.tone-1 { --ping: #b3261e; }
.ping.tone-2 { --ping: #1f7a3a; }
.ping.tone-3 { --ping: #7b3fb8; }
.ping.tone-4 { --ping: #0d7377; }
.ping.tone-5 { --ping: #c0287a; }
.ping .ping-dot { fill: var(--ping); stroke: #fbf3dc; stroke-width: 1.5; }
.ping .ping-ring { fill: none; stroke: var(--ping); stroke-width: 2.5; }
.ping .ping-name { fill: var(--ping); font: 700 11px/1 system-ui, sans-serif; paint-order: stroke; stroke: #fbf3dc; stroke-width: 3.5px; stroke-linejoin: round; }

/* Make your own hero (#2383): a sentence a child builds by tapping. The
   sentence is the star; each blank is a big button, the tiles under it are
   at least 96px square, two columns on a 360px phone, and nothing scrolls
   sideways. */
.own-back { margin: 0; font-size: var(--kaq-size-small); }
.own-back a, .own-blank a { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; }
.own-sentence { font-family: var(--kaq-font-display); font-size: var(--kaq-size-h2); font-weight: 700; line-height: 1.9; color: var(--kaq-color-ink); margin: 0.9rem 0 0.6rem; overflow-wrap: anywhere; }
.own-slot { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 48px; min-width: 5.5rem; max-width: 100%; margin: 0.1rem 0; padding: 0.3rem 0.7rem; vertical-align: middle; font: inherit; font-size: var(--kaq-size-h3); background: var(--kaq-color-surface-sunk); color: var(--kaq-color-ink); border: 2px solid color-mix(in srgb, var(--kaq-color-forest) 55%, var(--kaq-color-line)); border-radius: var(--kaq-radius-card); }
.own-slot:not(.filled) { border-style: dashed; justify-content: center; }
.own-slot.active { border-color: var(--kaq-color-forest); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kaq-color-forest) 35%, transparent); }
.own-slot .ic { flex: none; width: 1.1em; height: 1.1em; color: var(--kaq-color-forest); }
.own-slot:hover { filter: none; }
.own-slot:focus-visible, .own-tile:focus-visible, .own-swatch:focus-visible, .own-symbol:focus-visible { outline: 3px solid var(--kaq-color-forest); outline-offset: 2px; }
.own-gap { display: inline-block; width: 3.5rem; height: 0.2rem; margin-top: 0.8rem; border-radius: var(--kaq-radius-control); background: color-mix(in srgb, var(--kaq-color-forest) 55%, transparent); }
.own-ask { margin: 0.9rem 0 0.45rem; font-weight: 600; color: var(--kaq-color-ink); }
.own-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 0.55rem; }
@media (max-width: 480px) { .own-tile-grid { grid-template-columns: 1fr 1fr; } }
.own-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; min-height: 96px; min-width: 0; padding: 0.6rem 0.4rem; text-align: center; background: var(--kaq-color-surface); color: var(--kaq-color-ink); border: 2px solid var(--kaq-color-line); border-radius: var(--kaq-radius-card); font-weight: 600; }
.own-tile .ic { width: 40px; height: 40px; color: var(--kaq-color-forest); }
.own-tile:hover { border-color: var(--kaq-color-forest); filter: none; }
.own-tile.on { border-color: var(--kaq-color-forest); background: var(--kaq-color-surface-sunk); }
.own-word { font-size: var(--kaq-size-body); color: var(--kaq-color-ink); overflow-wrap: anywhere; }
.own-meaning { font-size: var(--kaq-size-label); font-weight: 400; color: var(--kaq-color-ink-soft); }
.own-look { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 1.4rem; margin-top: 0.4rem; }
.own-preview { flex: none; padding-top: 0.9rem; }
.own-preview .own-portrait { display: block; }
.own-look-picks { flex: 1 1 14rem; min-width: 0; }
.own-swatches, .own-symbols { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.own-swatch { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 3px solid transparent; color: #FFFFFF; }
.own-swatch.on { border-color: var(--kaq-color-ink); }
.own-swatch:hover { filter: brightness(1.1); }
.own-symbol { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; background: var(--kaq-color-surface); color: var(--kaq-color-ink); border: 2px solid var(--kaq-color-line); border-radius: var(--kaq-radius-card); }
.own-symbol .ic { width: 26px; height: 26px; }
.own-symbol.on { border-color: var(--kaq-color-forest); background: var(--kaq-color-surface-sunk); color: var(--kaq-color-forest); }
.own-symbol:hover { border-color: var(--kaq-color-forest); filter: none; }
.own-play-row { margin-top: 1.1rem; }
#own-play { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 48px; font-size: var(--kaq-size-body); max-width: 100%; }
.own-blank { font-size: var(--kaq-size-small); margin: 0.6rem 0 0; }
.sheet-own-portrait { display: block; width: 96px; height: 96px; margin: 0.2rem 0; }
.sheet-own-portrait .own-portrait { display: block; }
.own-line { margin: 0.35rem 0 0; font-family: var(--kaq-font-display); font-size: var(--kaq-size-small); color: var(--kaq-color-ink); }
@media (max-width: 480px) { .own-sentence { font-size: var(--kaq-size-h3); } .own-slot { font-size: var(--kaq-size-body); min-width: 4.5rem; } }
/* The first-join tour (#2380): three big picture cards on a player seat's
   first visit. z-index 75 keeps it above the map and the lightbox but under
   the pause card (80), which stays visible and tappable the whole time; the
   overlay ends above the card so the two never overlap. */
.tour-open { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; }
.tour {
  position: fixed; inset: 0; z-index: 75; display: flex; align-items: center; justify-content: center;
  padding: 1rem; overflow-y: auto; background: color-mix(in srgb, var(--kaq-color-surface-sunk) 90%, transparent);
  animation: tour-in 0.2s ease both;
}
body.has-pause-card .tour { padding-bottom: calc(72px + 2rem); }
@keyframes tour-in { from { opacity: 0; } to { opacity: 1; } }
.tour-card {
  position: relative; width: 100%; max-width: 30rem; margin: auto; padding: 3.2rem 1.3rem 1.3rem;
  border-radius: var(--kaq-radius-card); border: 2px solid color-mix(in srgb, var(--kaq-color-ink) 55%, var(--kaq-color-line)); background: var(--kaq-color-surface);
  box-shadow: var(--kaq-shadow-overlay); text-align: center;
}
.tour-close { position: absolute; top: 0.6rem; inset-inline-end: 0.6rem; min-height: 44px; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.8rem; }
.tour-art { display: flex; align-items: center; justify-content: center; min-height: 160px; margin: 0 auto 1rem; }
.tour-portrait { width: 160px; height: 160px; border-radius: 50%; background: var(--kaq-color-surface-sunk); border: 3px solid var(--kaq-color-forest); object-fit: cover; }
.tour-pic { display: inline-flex; align-items: center; justify-content: center; width: 160px; height: 160px; border-radius: 50%; background: color-mix(in srgb, var(--kaq-color-forest) 18%, var(--kaq-color-surface-sunk)); border: 3px solid var(--kaq-color-forest); color: var(--kaq-color-forest); }
.tour-pic .ic { width: 88px; height: 88px; }
/* A built hero's badge (#2383), ringed like the ready-made portrait. */
.tour-badge .own-portrait { display: block; width: 160px; height: 160px; border-radius: 50%; border: 3px solid var(--kaq-color-forest); }
/* Drawn like the real pause card, so the child knows it when they see it. */
.tour-pic-pause {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 1rem 1.8rem; border-radius: var(--kaq-radius-pill);
  border: 2px solid var(--kaq-color-line); background: var(--kaq-color-ink); color: var(--kaq-color-paper); font-family: var(--kaq-font-display); font-size: var(--kaq-size-h2);
  box-shadow: var(--kaq-shadow-overlay);
}
.tour-pic-pause .ic { width: 2.6rem; height: 2.6rem; }
.tour-head { margin: 0; font-size: var(--kaq-size-h2); line-height: 1.25; color: var(--kaq-color-ink); }
.tour-head:focus, .tour-head:focus-visible { outline: none; }
.tour-count { display: block; margin-bottom: 0.2rem; font-family: var(--kaq-font-ui); font-size: var(--kaq-size-label); font-weight: 600; color: var(--kaq-color-forest); }
.tour-name { margin: 0.35rem 0 0; font-family: var(--kaq-font-display); font-size: var(--kaq-size-h3); color: var(--kaq-color-forest); }
.tour-line { margin: 0.8rem 0 0; font-size: var(--kaq-size-h3); line-height: 1.45; }
.tour-dots { display: flex; justify-content: center; gap: 0.5rem; margin: 1.1rem 0 1rem; }
.tour-dots span { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--kaq-color-line); }
.tour-dots[data-at="0"] span:nth-child(1), .tour-dots[data-at="1"] span:nth-child(2), .tour-dots[data-at="2"] span:nth-child(3) { background: var(--kaq-color-forest); }
.tour-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.tour-actions button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: var(--kaq-size-body); }
.tour-actions .tour-play { padding-inline: 1.6rem; font-size: var(--kaq-size-h3); }
.tour-read { flex-basis: 100%; }
@media (min-width: 700px) {
  .tour-card { max-width: 36rem; padding: 3.4rem 2rem 1.8rem; }
  .tour-art { min-height: 220px; }
  .tour-portrait, .tour-pic, .tour-badge .own-portrait { width: 220px; height: 220px; }
  .tour-pic .ic { width: 120px; height: 120px; }
  .tour-head { font-size: var(--kaq-size-h2); }
  .tour-line { font-size: var(--kaq-size-h3); }
  .tour-read { flex-basis: auto; }
}
@media (prefers-reduced-motion: reduce) { .tour { animation: none; } }
/* Treasure cards (#2454). On the sheet: a card per item, an icon tile, the
   name and its one line, and a big "Use it". A used card is dimmed AND says
   "Used" with a check, so the state never rests on colour alone. In the
   director: tappable ready-made chips, a picture picker and what the picked
   hero holds. Every tap target is at least 44px. */
.sheet-items { margin-top: 0.8rem; }
.item-list { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.item-card { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.65rem; border-radius: var(--kaq-radius-card); background: var(--kaq-color-surface-sunk); border: 1px solid color-mix(in srgb, var(--kaq-color-forest) 45%, var(--kaq-color-line)); }
.item-ic { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: var(--kaq-radius-control); background: var(--kaq-color-surface); color: var(--kaq-color-forest); border: 2px solid color-mix(in srgb, var(--kaq-color-forest) 55%, var(--kaq-color-line)); }
.item-ic .ic { width: 1.4rem; height: 1.4rem; }
.item-text { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.item-text b { color: var(--kaq-color-ink); font-size: var(--kaq-size-body); }
.item-text span { font-size: var(--kaq-size-small); color: var(--kaq-color-ink); }
.item-use { flex: none; min-height: 44px; min-width: 5.5rem; padding: 0.5rem 0.9rem; }
.item-done { display: inline-flex; flex: none; align-items: center; gap: 0.3rem; min-height: 44px; padding: 0 0.4rem; font-size: var(--kaq-size-small); font-weight: 600; color: var(--kaq-color-ink-soft); }
.item--used { opacity: 0.55; }
.item-card.item--used { border-style: dashed; }
.item--used .item-ic { color: var(--kaq-color-ink-soft); border-color: var(--kaq-color-line); }
.tr-head { margin: 0.8rem 0 0.35rem; font-size: var(--kaq-size-label); color: var(--kaq-color-ink-soft); }
.tr-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tr-chip { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0.4rem 0.75rem; font-size: var(--kaq-size-small); font-weight: 600; background: var(--kaq-color-surface-sunk); color: var(--kaq-color-ink); border: 1px solid color-mix(in srgb, var(--kaq-color-forest) 40%, var(--kaq-color-line)); border-radius: var(--kaq-radius-pill); }
.tr-chip .ic { color: var(--kaq-color-forest); flex: none; }
.tr-chip:hover { border-color: var(--kaq-color-forest); }
.tr-icons { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tr-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: var(--kaq-color-surface-sunk); color: var(--kaq-color-ink); border: 1px solid var(--kaq-color-line); border-radius: var(--kaq-radius-control); }
.tr-icon.on { border: 2px solid var(--kaq-color-forest); color: var(--kaq-color-forest); background: var(--kaq-color-surface); }
.tr-icon:focus-visible, .tr-chip:focus-visible, .item-use:focus-visible { outline: 2px solid var(--kaq-color-forest); outline-offset: 2px; }
.tr-note { min-height: 1.2em; margin: 0.4rem 0 0; font-size: var(--kaq-size-label); }
.tr-held { display: grid; gap: 0.35rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.tr-held-row { display: flex; align-items: center; gap: 0.5rem; font-size: var(--kaq-size-small); }
.tr-held-row .ic { color: var(--kaq-color-forest); flex: none; }
.tr-held-row > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tr-held-row button { min-height: 44px; }
.tr-held-head { font-size: var(--kaq-size-label); }

/* Scene sound (#2394): the GM's block, and the small "now playing" line in the
   header of the one device that plays it. */
.amb-now { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--kaq-size-small); color: var(--kaq-color-ink-soft); }
.amb-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.2rem 0 0.6rem; }
.amb-loops { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.4rem; }
.amb-loop { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 44px; }
.amb-loop[aria-pressed="true"] { background: color-mix(in srgb, var(--kaq-color-forest) 22%, transparent); border-color: var(--kaq-color-forest); }
.amb-controls { margin: 0.6rem 0; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.amb-volume { display: inline-flex; align-items: center; gap: 0.5rem; flex: 1 1 10rem; min-width: 0; }
.amb-volume input { flex: 1; min-width: 0; min-height: 44px; accent-color: var(--kaq-color-forest); }
.amb-device { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.amb-device select { max-width: 100%; min-height: 44px; }
.amb-status { margin: 0.5rem 0 0; }
.amb-tap { margin: 0.4rem 0 0; font-weight: 600; }

/* ---- fair spotlight (#2389): GM console only ---- */
.spot-mark { display: inline-flex; vertical-align: -0.15em; margin-inline-end: 0.35rem; color: var(--kaq-color-ink-soft); }
.spot-mark .ic { width: 1em; height: 1em; }
.spot-mark.on { color: var(--kaq-color-forest); }
.spotlight-line { display: flex; align-items: center; gap: 0.45rem; margin: 0.6rem 0 0; padding: 0.45rem 0.7rem; border-radius: var(--kaq-radius-control); border: 1px solid var(--kaq-color-line); font-size: var(--kaq-size-small); color: var(--kaq-color-ink); }
.spotlight-line .ic { flex: none; color: var(--kaq-color-forest); }
.spotlight-line b { color: var(--kaq-color-forest); font-weight: 600; }
.spotlight-line.all { color: var(--kaq-color-ink-soft); }
.spotlight-line.all .ic { color: var(--kaq-color-ink-soft); }

/* Sidekicks for small tables (#2400): the party list's sidekick cards and
   the GM's Sidekicks section. Everything wraps, so nothing scrolls at 360px. */
.sk-face { width: 28px; height: 28px; border-radius: 50%; background: var(--kaq-color-surface-sunk); border: 1px solid var(--kaq-color-line); flex: 0 0 auto; }
.badge.sk { display: inline-flex; align-items: center; gap: 0.25rem; }
.badge.sk .ic { width: 0.8rem; height: 0.8rem; }
.presence-list li.sk-li { display: block; }
.sk-presence summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; cursor: pointer; list-style: none; border-radius: var(--kaq-radius-control); }
.sk-presence summary::-webkit-details-marker { display: none; }
.sk-presence summary:focus-visible { outline: 2px solid var(--kaq-color-forest); outline-offset: 2px; }
.sk-who { min-width: 0; overflow-wrap: anywhere; }
.sk-more { margin: 0.4rem 0 0.2rem; padding: 0.5rem 0.65rem; background: var(--kaq-color-surface-sunk); border: 1px solid var(--kaq-color-line); border-radius: var(--kaq-radius-control); font-size: var(--kaq-size-small); }
.sk-more p { margin: 0 0 0.3rem; overflow-wrap: anywhere; }
.sk-more p:last-child { margin-bottom: 0; }
.sk-row .spread { flex-wrap: wrap; gap: 0.3rem; }
.sk-row .seat-actions { flex-wrap: wrap; }
.sk-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; min-width: 0; }
.sk-hint { margin: 0.2rem 0 0.3rem; }
.sk-picker { margin-top: 0.5rem; }
.sk-cards { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.sk-card { display: flex; align-items: center; gap: 0.6rem; background: var(--kaq-color-surface-sunk); border: 1px solid var(--kaq-color-line); border-radius: var(--kaq-radius-control); padding: 0.45rem 0.6rem; }
.sk-card img { width: 56px; height: 56px; border-radius: var(--kaq-radius-control); flex: 0 0 auto; }
.sk-card-text { display: flex; flex-direction: column; gap: 0.1rem; flex: 1 1 auto; min-width: 0; font-size: var(--kaq-size-small); overflow-wrap: anywhere; }
.sk-trick { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--kaq-color-forest); }
.sb-hero-note { display: block; font-size: 0.8em; font-style: italic; opacity: 0.8; }
.sk-card button { flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.25rem; }

/* ---- My quests: a GM's own quests (#2397) ---- */
.top-link { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.mq-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }
@media (max-width: 560px) { .mq-who { display: none; } header.top { flex-wrap: wrap; } }
.mq-page button, .mq-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; text-decoration: none; }
.mq-lede { max-width: 44rem; }
.mq-list-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem; margin: 1rem 0; }
.mq-list { display: grid; gap: 0.8rem; margin-bottom: 1.6rem; }
.mq-item { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 1rem; align-items: start; padding: 0.9rem; }
.mq-item h3 { margin: 0; font-size: var(--kaq-size-body); overflow-wrap: anywhere; }
.mq-item-meta { margin: 0.15rem 0 0; font-size: var(--kaq-size-small); }
.mq-item-blurb { margin: 0.4rem 0 0; font-size: var(--kaq-size-small); overflow-wrap: anywhere; }
.mq-item-actions { margin-top: 0.7rem; }
.mq-item-actions .btn, .mq-item-actions button { min-height: 44px; }
.mq-thumb { aspect-ratio: 16 / 10; border-radius: var(--kaq-radius-control); overflow: hidden; background: var(--kaq-color-surface-sunk); border: 1px solid var(--kaq-color-line); display: flex; align-items: center; justify-content: center; color: var(--kaq-color-forest); font-size: var(--kaq-size-h2); }
.mq-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.adv-cover-blank { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--kaq-color-forest); font-size: var(--kaq-size-h2); }
.adv-card.adv-write { text-decoration: none; }
.adv-card.adv-write:focus-visible { outline: 3px solid var(--kaq-color-forest); outline-offset: 2px; }
.mq-ai h2 { margin-top: 0; font-size: var(--kaq-size-h3); }
.mq-steps { margin: 0.8rem 0 0; padding-inline-start: 1.3rem; display: grid; gap: 1rem; }
.mq-steps p { margin: 0 0 0.5rem; }
.mq-steps label { font-size: var(--kaq-size-small); color: var(--kaq-color-ink); margin-top: 0; }
.mq-ai-actions { margin-top: 0.6rem; }
#mq-ai-prompt { margin-top: 0.5rem; font-size: var(--kaq-size-label); }
.mq-hint { font-size: var(--kaq-size-label); margin: 0.3rem 0 0; }
.notice ul { margin: 0.3rem 0 0; padding-inline-start: 1.2rem; }
.notice p { margin: 0; }
.notice a { color: var(--kaq-color-ink); }
#mq-back { margin-bottom: 0.6rem; }
.mq-quest-fields { display: grid; gap: 0.2rem; margin: 1rem 0 1.4rem; }
.mq-field { min-width: 0; }
.mq-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.mq-label-row label { margin-bottom: 0.25rem; }
.mq-counter { font-size: var(--kaq-size-label); color: var(--kaq-color-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mq-counter.near { color: var(--kaq-color-forest); }
[aria-invalid="true"] { border-color: var(--kaq-color-berry); outline: 2px solid color-mix(in srgb, var(--kaq-color-berry) 55%, transparent); }
.mq-scenes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; }
.mq-scenes-head h2 { margin: 0; }
.mq-scenes { display: grid; gap: 1rem; margin: 0.8rem 0; }
.mq-scene { padding: 1rem; }
.mq-scene-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.mq-scene-head h3 { margin: 0; font-size: var(--kaq-size-body); color: var(--kaq-color-forest); }
.mq-scene-tools { display: flex; gap: 0.35rem; }
.mq-scene-tools button { min-width: 40px; min-height: 40px; }
.mq-scene-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1rem; margin-top: 0.6rem; align-items: start; }
.mq-scene-fields { min-width: 0; }
.mq-art-pick { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; border-radius: var(--kaq-radius-control); border: 2px dashed var(--kaq-color-line); background: var(--kaq-color-surface-sunk); color: var(--kaq-color-ink-soft); font-weight: 600; }
.mq-art-pick:hover { border-color: var(--kaq-color-forest); transform: none; }
.mq-art-pick:focus-visible { outline: 3px solid var(--kaq-color-forest); outline-offset: 2px; }
.mq-art-pick img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mq-art-pick:has(img) { border-style: solid; }
.mq-art-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; width: 100%; height: 100%; font-size: var(--kaq-size-small); }
.mq-art-empty .ic { font-size: var(--kaq-size-h2); color: var(--kaq-color-forest); }
.mq-art-change { position: absolute; inset-inline-end: 0.4rem; bottom: 0.4rem; display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--kaq-size-label); padding: 0.15rem 0.5rem; border-radius: var(--kaq-radius-pill); background: color-mix(in srgb, var(--kaq-color-paper) 88%, transparent); color: var(--kaq-color-ink); }
.mq-choices { border: 0; margin: 0.7rem 0 0; padding: 0; min-width: 0; }
.mq-choices legend { font-size: var(--kaq-size-label); color: var(--kaq-color-ink-soft); padding: 0; margin-bottom: 0.3rem; }
.mq-choice + .mq-choice { margin-top: 0.4rem; }
.mq-add { margin-bottom: 1rem; }
.mq-savebar { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; margin: 0 -1.25rem; padding: 0.7rem 1.25rem; background: var(--kaq-color-surface-sunk); border-top: 1px solid var(--kaq-color-line); box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.25); }
.mq-savebar p { margin: 0; font-size: var(--kaq-size-small); }
.mq-savebar button { min-height: 44px; }
.mq-art-dialog { width: min(960px, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); padding: 1rem; border: 1px solid var(--kaq-color-line); border-radius: var(--kaq-radius-card); background: var(--kaq-color-surface); color: var(--kaq-color-ink); }
.mq-art-dialog::backdrop { background: color-mix(in srgb, var(--kaq-color-surface-sunk) 80%, transparent); }
.mq-art-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.mq-art-head h2 { margin: 0; font-size: var(--kaq-size-h3); }
.mq-art-head h2 .muted { font-family: var(--kaq-font-ui); font-size: var(--kaq-size-small); font-weight: 400; }
#mq-art-search { margin: 0.7rem 0; }
.mq-art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }
.mq-art-group { grid-column: 1 / -1; margin: 0.6rem 0 0; font-size: var(--kaq-size-small); color: var(--kaq-color-forest); }
.mq-art-opt { display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; padding: 0.35rem; text-align: start; font-weight: 400; font-size: var(--kaq-size-label); line-height: 1.3; color: var(--kaq-color-ink); background: var(--kaq-color-surface-sunk); border: 2px solid var(--kaq-color-line); border-radius: var(--kaq-radius-control); }
.mq-art-opt:hover { transform: none; border-color: color-mix(in srgb, var(--kaq-color-forest) 60%, var(--kaq-color-line)); }
.mq-art-opt[aria-pressed="true"] { border-color: var(--kaq-color-forest); box-shadow: 0 0 0 2px color-mix(in srgb, var(--kaq-color-forest) 35%, transparent); }
.mq-art-opt img { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; border-radius: var(--kaq-radius-control); }
.mq-art-opt > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mq-art-none .mq-art-empty { aspect-ratio: 16 / 10; height: auto; }
@media (max-width: 640px) {
  .mq-item { grid-template-columns: 1fr; }
  .mq-thumb { max-width: 240px; }
  .mq-scene-body { grid-template-columns: 1fr; }
  .mq-art-pick { max-width: 320px; }
  .mq-art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mq-savebar { margin: 0 -1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .mq-page button, .mq-page .btn { transition: none; } }

/* Start a game on this device (sparkfield#2570): the first door on the play
   page, so it carries the accent edge; email sign-in sits below it. */
.device-start { border-color: color-mix(in srgb, var(--kaq-color-forest) 55%, var(--kaq-color-line)); }
.card-title { display: flex; align-items: center; gap: 0.5rem; font-size: var(--kaq-size-h3); margin: 0; }
.card-title .ic { width: 1.3em; height: 1.3em; color: var(--kaq-color-forest); flex: none; }
.or-email { font-size: var(--kaq-size-body); margin: 1.8rem 0 0; color: var(--kaq-color-ink-soft); }
/* "Keep my games on other devices" on the dashboard of a device account. */
.device-keep { margin: 0 0 1.4rem; }
.device-keep .spread { flex-wrap: wrap; }
.device-keep-head { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.device-keep-head .ic { color: var(--kaq-color-forest); flex: none; }
.device-keep form { margin-top: 0.6rem; }
.device-keep .inline { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.device-keep .inline input { flex: 1 1 16rem; width: auto; }
.confirm-dialog { width: min(460px, calc(100vw - 1.5rem)); padding: 1.3rem; border: 1px solid var(--kaq-color-line); border-radius: var(--kaq-radius-card); background: var(--kaq-color-surface); color: var(--kaq-color-ink); }
.confirm-dialog::backdrop { background: color-mix(in srgb, var(--kaq-color-surface-sunk) 80%, transparent); }
.confirm-dialog .card-title .ic { color: var(--kaq-color-berry); }

/* Branching quests (#2676): a scene whose painting has not landed yet, the
   runner's "lock it in" nudge, the picker's endings line, "Ending 2 of 3". */
.art-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; aspect-ratio: 16 / 9; width: 100%; margin: 0.5rem 0; border: 1.5px dashed var(--kaq-color-line); border-radius: var(--kaq-radius-card); color: var(--kaq-color-ink-soft); text-align: center; padding: 1rem; }
.art-soon .ic { width: 2rem; height: 2rem; }
.art-soon strong { color: inherit; font-weight: 600; }
.branch-hint, .quest-endings { display: flex; align-items: center; gap: 0.35rem; margin: 0.35rem 0 0; }
.branch-hint.hidden, .quest-endings.hidden, .art-soon.hidden { display: none; }
.quest-endings .found { display: inline-flex; align-items: center; gap: 0.25rem; margin-inline-start: 0.5rem; }
.sb-ending-n { margin-inline-start: 0.4rem; letter-spacing: 0.04em; }
.sb-found { display: flex; align-items: center; gap: 0.35rem; margin: 0.5rem 0 0; font-size: var(--kaq-size-small); }

/* Right to left (sparkfield#2582). Spacing, edges and rounded corners above
   are logical properties, so most of the page mirrors by itself; what a
   logical property cannot say is an icon that points a way (arrows,
   chevrons, skip, step back), which must point the other way in Hebrew. Matched by their Lucide path, so an icon drawn by
   app.js flips exactly like one written in the HTML. */
[dir="rtl"] svg.ic:is(:has(path[d="M5 12h14"]), :has(path[d="M19 12H5"]), :has(path[d="m15 18-6-6 6-6"]), :has(path[d="m9 18 6-6-6-6"]), :has(path[d^="M6.029 4.285"]), :has(path[d="M9 14 4 9l5-5"])) { transform: scaleX(-1); }
[dir="rtl"] .gm-notes:not([open]) .gm-notes-chev { transform: rotate(90deg); }
.lang-switch { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0.35rem 0.7rem; font-weight: 600; }
.lang-switch .ic { width: 1.1em; height: 1.1em; }
header.top .brand { min-width: 0; }
@media (max-width: 420px) { .lang-switch .lang-switch-label { display: none; } }

/* ---------- idea cards for a stuck child (issue 2683) ---------- */
.ideas-open { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 48px; margin-top: 0.7rem; padding: 0.55rem 1.1rem; font-size: var(--kaq-size-body); font-weight: 700; }
.ideas-open .ic { width: 1.3em; height: 1.3em; }
.ideas-told { margin-top: 0.7rem; }
.ideas {
  position: fixed; inset: 0; z-index: 74; display: flex; align-items: center; justify-content: center;
  padding: 1rem; overflow-y: auto; background: color-mix(in srgb, var(--kaq-color-surface-sunk) 90%, transparent); animation: tour-in 0.2s ease both;
}
body.has-pause-card .ideas { padding-bottom: calc(72px + 2rem); }
.ideas-panel {
  position: relative; width: 100%; max-width: 46rem; margin: auto; padding: 3.2rem 1.2rem 1.3rem;
  border-radius: var(--kaq-radius-card); border: 2px solid color-mix(in srgb, var(--kaq-color-ink) 55%, var(--kaq-color-line)); background: var(--kaq-color-surface);
  box-shadow: var(--kaq-shadow-overlay); text-align: center;
}
.ideas-head { margin: 0; font-size: var(--kaq-size-h3); line-height: var(--kaq-leading-tight); color: var(--kaq-color-ink); }
.ideas-head:focus, .ideas-head:focus-visible { outline: none; }
.ideas-sub { margin: 0.4rem 0 1rem; color: var(--kaq-color-ink-soft); }
.ideas-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.8rem; }
.idea-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 0.5rem;
  min-height: 12rem; padding: 0.9rem; text-align: start; border-radius: var(--kaq-radius-card); color: var(--kaq-color-ink);
  border: 2px solid color-mix(in srgb, var(--kaq-color-forest) 45%, var(--kaq-color-line)); background: var(--kaq-color-surface-sunk);
}
.idea-card .idea-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; filter: saturate(0.8) blur(1px); }
.idea-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--kaq-color-surface) 92%, transparent) 30%, color-mix(in srgb, var(--kaq-color-surface) 15%, transparent)); }
.idea-card > span { position: relative; z-index: 1; }
.idea-card.plain { justify-content: center; align-items: center; text-align: center; }
.idea-card.plain::after { display: none; }
.idea-card.plain .idea-trait { flex-direction: column; font-size: var(--kaq-size-body); }
.idea-card.plain .idea-trait .ic { width: 3rem; height: 3rem; }
.idea-trait { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--kaq-font-ui); font-size: var(--kaq-size-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kaq-color-forest); }
.idea-trait .ic { width: 1.3em; height: 1.3em; }
.idea-text { font-family: var(--kaq-font-read); font-size: var(--kaq-size-read-table); line-height: var(--kaq-leading-tight); font-weight: 700; }
.idea-card:hover { border-color: var(--kaq-color-forest); filter: none; }
.idea-card:focus-visible { outline: 3px solid var(--kaq-color-focus); outline-offset: 2px; }
.idea-card:active { transform: scale(0.98); }
.chat-msg.idea { display: flex; align-items: center; gap: 0.4rem; }
.chat-msg.idea .ic { color: var(--kaq-color-forest); flex: none; }
#qr-approaches li.idea-picked { border-inline-start: 3px solid var(--kaq-color-forest); padding-inline-start: 0.5rem; }
.idea-tag { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.2rem; font-size: var(--kaq-size-label); font-weight: 700; color: var(--kaq-color-forest); }
@media (max-width: 30rem) { .idea-card { min-height: 8.5rem; } .idea-text { font-size: var(--kaq-size-h3); } }
@media (prefers-reduced-motion: reduce) { .ideas { animation: none; } .idea-card:active { transform: none; } }

/* ==========================================================================
   The table, one beat per screen (KAQ design system, play view).
   The header names the adventure and "Scene 3 of 6" with a dot per scene;
   the picture leads, then the read-aloud box (the largest, calmest words on
   the screen, in Literata), then the choices as big cards, then one lantern
   Next, pinned where the thumb is.
   ========================================================================== */
header.table-top { position: sticky; top: 0; z-index: 30; flex-wrap: nowrap; gap: var(--kaq-space-3); }
.top-back { flex: none; }
.top-where { display: flex; flex-direction: column; justify-content: center; gap: var(--kaq-space-1); min-width: 0; flex: 1 1 auto; }
.top-title { font-family: var(--kaq-font-display); font-weight: 600; font-size: var(--kaq-size-h3); line-height: var(--kaq-leading-tight); color: var(--kaq-color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beat-steps { display: flex; align-items: center; gap: var(--kaq-space-3); min-width: 0; }
.beat-count { font-size: var(--kaq-size-small); font-weight: 600; color: var(--kaq-color-ink-soft); white-space: nowrap; }
.beat-dots { display: flex; gap: var(--kaq-space-1); flex: 1 1 auto; max-width: 15rem; }
.beat-dots i { height: 6px; flex: 1 1 0; min-width: 6px; border-radius: var(--kaq-radius-pill); background: var(--kaq-color-line); }
.beat-dots i.done { background: color-mix(in srgb, var(--kaq-color-forest) 70%, var(--kaq-color-line)); }
.beat-dots i.now { background: var(--kaq-color-forest); }
.top-tools { flex: none; flex-wrap: nowrap; justify-content: flex-end; }
.top-tools .invite { display: inline-flex; }
.top-tools button, .top-back { min-height: var(--kaq-touch-min); }
/* On a phone the header buttons keep their words for a screen reader and
   show the icon alone, so the title and the scene count stay on one line. */
@media (max-width: 720px) {
  header.table-top { padding-inline: var(--kaq-space-3); gap: var(--kaq-space-2); }
  .top-back-label, .top-tools button > span, header.table-top .lang-switch-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .top-back, .top-tools button { width: var(--kaq-touch-min); padding: 0; }
  .top-title { font-size: var(--kaq-size-body); }
  .beat-dots { max-width: 7rem; }
}

/* The stage. */
.stage-card #stage-eyebrow { margin-bottom: var(--kaq-space-3); }
body.stage-idle #stage-eyebrow, body.stage-idle .stage-card .here-pin { display: none; }
.stage-art { margin: 0 0 var(--kaq-space-5); }
.stage-art:not(:has(img:not(.hidden))):not(:has(.art-soon:not(.hidden))) { display: none; }
.stage-art .stage-image { max-width: none; width: 100%; aspect-ratio: 16 / 10; margin: 0; border-radius: var(--kaq-radius-card); border: 0; }
.stage-text { display: flex; flex-direction: column; gap: var(--kaq-space-4); min-width: 0; }
.stage-text .stage-title { font-size: var(--kaq-size-h2); margin: 0; }
.read-box { background: var(--kaq-color-surface-sunk); border: 1px solid var(--kaq-color-line); border-radius: var(--kaq-radius-card); padding: var(--kaq-space-4) var(--kaq-space-5) var(--kaq-space-5); }
.read-label, .choices-label { display: flex; align-items: center; gap: var(--kaq-space-2); margin: 0 0 var(--kaq-space-2); font-size: var(--kaq-size-small); font-weight: 600; color: var(--kaq-color-ink-soft); }
.read-label .ic { width: 18px; height: 18px; color: var(--kaq-color-forest); }
.choices-label { margin: 0; }
.choices-label .ic { width: 18px; height: 18px; }
.stage-text:not(:has(.stage-choices > *)) .choices-label { display: none; }
.read-box .stage-narration { font-family: var(--kaq-font-read); font-size: var(--kaq-size-read-table); line-height: var(--kaq-leading-read); font-weight: 400; max-width: var(--kaq-measure-read); margin: 0; color: var(--kaq-color-ink); }
.read-box .listen-row { margin: 0 0 var(--kaq-space-3); }
.read-box b, .read-box strong, .handout-body b, .handout-body strong { font-weight: 600; }
/* The choices: big cards, the whole card is the tap. */
.stage-choices { gap: var(--kaq-space-3); }
.stage-choices .choice-btn { min-height: var(--kaq-touch-primary); padding: var(--kaq-space-3) var(--kaq-space-4); border-radius: var(--kaq-radius-card); background: var(--kaq-color-surface); font-size: var(--kaq-size-body); font-weight: 600; line-height: var(--kaq-leading-snug); }
.stage-choices .choice-btn:hover { border-color: var(--kaq-color-forest); }
.stage-choices .choice-btn.picked { border-color: var(--kaq-color-forest); box-shadow: inset 0 0 0 1px var(--kaq-color-forest); }
.stage-choices .vote-row { position: relative; cursor: pointer; }
.stage-choices .vote-row .vote-lock { position: static; min-height: var(--kaq-touch-min); background: transparent; border-color: var(--kaq-color-line); color: var(--kaq-color-forest); font-size: var(--kaq-size-small); }
.stage-choices .vote-row .vote-lock::after { content: ''; position: absolute; inset: 0; border-radius: var(--kaq-radius-card); }
.stage-choices .vote-row:hover { border-color: var(--kaq-color-forest); }
.stage-choices .vote-row.decided { border-color: var(--kaq-color-forest); background: color-mix(in srgb, var(--kaq-color-forest) 16%, var(--kaq-color-surface)); }
.stage-choices .choice-count { font-size: var(--kaq-size-small); }
/* Pick by picture (issue 2860): a large picture leads every choice, the words stay
   beside it. In Hebrew the row mirrors, so the picture sits on the right. */
.choice-ic { flex: none; display: inline-grid; place-items: center; color: var(--kaq-color-forest); }
.choice-ic .ic { width: 40px; height: 40px; }
.vote-row .choice-ic .ic { width: 32px; height: 32px; }
.screen-choice .choice-ic .ic { width: 56px; height: 56px; }
.choice-btn.decided .choice-ic, .choice-btn.picked .choice-ic, .screen-choice.decided .choice-ic { color: var(--kaq-color-ink); }
/* A seat's choice and its own speaker: two buttons side by side, so the
   speaker can never pick and the choice stays one tap. */
.choice-row { display: flex; align-items: stretch; gap: var(--kaq-space-2); }
.choice-row > .choice-btn { flex: 1 1 auto; min-width: 0; }
.choice-hear { flex: none; width: var(--kaq-touch-min); min-height: var(--kaq-touch-min); padding: 0; border-radius: var(--kaq-radius-card); background: var(--kaq-color-surface); border-color: var(--kaq-color-line); color: var(--kaq-color-forest); }
.choice-hear:hover { border-color: var(--kaq-color-forest); filter: none; }
.choice-hear .ic { width: 24px; height: 24px; }

/* Waiting for the story (players). */
.stage-wait { display: grid; justify-items: center; gap: var(--kaq-space-4); text-align: center; padding: var(--kaq-space-4) 0 var(--kaq-space-2); }
.stage-wait-art:empty { display: none; }
.stage-wait-cover { display: block; width: 100%; max-width: 34rem; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--kaq-radius-card); }
.stage-wait-heroes { display: flex; justify-content: center; }
.stage-wait-heroes img { width: 112px; height: 112px; object-fit: cover; border-radius: var(--kaq-radius-pill); border: 3px solid var(--kaq-color-surface); background: var(--kaq-color-surface-sunk); }
.stage-wait-heroes img + img { margin-inline-start: calc(-1 * var(--kaq-space-5)); }
.stage-wait-head { font-family: var(--kaq-font-display); font-weight: 600; font-size: var(--kaq-size-h2); line-height: var(--kaq-leading-tight); margin: 0; max-width: 22ch; text-wrap: balance; }
.stage-wait-code { display: inline-flex; align-items: center; gap: var(--kaq-space-2); margin: 0; color: var(--kaq-color-ink-soft); font-size: var(--kaq-size-body); }
.stage-wait-code .code { font-size: var(--kaq-size-h3); font-weight: 700; color: var(--kaq-color-ink); }

/* The guide's console in story mode. */
.sm-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kaq-space-3); }
.sm-tool { min-height: var(--kaq-touch-min); }
.sm-tool .ic { width: 20px; height: 20px; flex: none; }
.sm-tool[aria-expanded="true"] { background: color-mix(in srgb, var(--kaq-color-forest) 16%, transparent); }
.sm-nav { display: flex; gap: var(--kaq-space-3); margin-top: var(--kaq-space-4); }
.sm-next { flex: 1 1 auto; min-height: var(--kaq-touch-primary); border-radius: var(--kaq-radius-card); font-size: var(--kaq-size-h3); font-weight: 700; }
.sm-next .ic { width: 22px; height: 22px; }
.sm-back { flex: none; width: var(--kaq-touch-primary); min-height: var(--kaq-touch-primary); padding: 0; border-radius: var(--kaq-radius-card); border-color: var(--kaq-color-line); color: var(--kaq-color-ink); }
.sm-back .ic { width: 22px; height: 22px; }
.sm-notes { margin-top: var(--kaq-space-4); border-top: 1px solid var(--kaq-color-line); padding-top: var(--kaq-space-2); }
.sm-notes-sum { display: flex; align-items: center; gap: var(--kaq-space-2); min-height: var(--kaq-touch-min); cursor: pointer; list-style: none; font-size: var(--kaq-size-small); font-weight: 600; color: var(--kaq-color-ink-soft); }
.sm-notes-sum::-webkit-details-marker { display: none; }
.sm-notes-sum .ic { width: 18px; height: 18px; flex: none; }
.sm-notes-sum .ic:last-child { margin-inline-start: auto; transition: transform .15s ease; }
.sm-notes[open] .sm-notes-sum .ic:last-child { transform: rotate(180deg); }
.sm-notes-body { font-size: var(--kaq-size-small); color: var(--kaq-color-ink-soft); line-height: var(--kaq-leading-body); }
.sm-notes-body p { margin: var(--kaq-space-2) 0; }
.sm-notes-body strong { color: var(--kaq-color-ink); }
.sm-note-h { font-weight: 600; color: var(--kaq-color-ink); }
.sm-note-ways { margin: 0; padding-inline-start: var(--kaq-space-5); display: grid; gap: var(--kaq-space-3); }
.sm-notes .sm-tip { margin-top: var(--kaq-space-3); }

/* Picking tonight's adventure. */
.quest-pick-h { margin: 0 0 var(--kaq-space-4); }
.quest-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--kaq-space-3); margin-bottom: var(--kaq-space-4); }
.quest-card { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--kaq-space-3); margin: 0; padding: var(--kaq-space-2); min-height: var(--kaq-touch-primary); border: 1px solid var(--kaq-color-line); border-radius: var(--kaq-radius-card); background: var(--kaq-color-surface); color: var(--kaq-color-ink); cursor: pointer; font-size: var(--kaq-size-body); font-weight: 400; }
.quest-card:hover { border-color: var(--kaq-color-forest); }
.quest-card:has(input:checked) { border-color: var(--kaq-color-forest); box-shadow: inset 0 0 0 1px var(--kaq-color-forest); background: color-mix(in srgb, var(--kaq-color-forest) 10%, var(--kaq-color-surface)); }
.quest-card:has(input:focus-visible) { outline: 3px solid var(--kaq-color-focus); outline-offset: 2px; }
.quest-card-art { display: grid; place-items: center; width: 5.5rem; aspect-ratio: 16 / 10; border-radius: var(--kaq-radius-control); overflow: hidden; background: var(--kaq-color-surface-sunk); color: var(--kaq-color-ink-soft); }
.quest-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quest-card-text { display: grid; gap: var(--kaq-space-1); min-width: 0; }
.quest-card-title { font-weight: 600; line-height: var(--kaq-leading-snug); }
.quest-card-meta { font-size: var(--kaq-size-small); color: var(--kaq-color-ink-soft); }
.quest-card-tick { color: var(--kaq-color-forest); opacity: 0; }
.quest-card-tick .ic { width: 22px; height: 22px; }
.quest-card:has(input:checked) .quest-card-tick { opacity: 1; }
#quest-load .ic { width: 20px; height: 20px; }
.quest-offline { display: flex; align-items: center; gap: var(--kaq-space-2); }
.quest-offline .ic { width: 20px; height: 20px; flex: none; color: var(--kaq-color-berry); }
#director:not(.story) #quest-pick-h, #director:not(.story) #quest-cards { display: none; }
#director.story #quest-load-label, #director.story #quest-sel { display: none; }
#director.story #quest-cards:empty ~ #quest-load-label, #director.story #quest-cards:empty ~ #quest-load-row #quest-sel { display: block; }
#director.story #quest-load { flex: 1 1 auto; min-height: var(--kaq-touch-primary); border-radius: var(--kaq-radius-card); font-size: var(--kaq-size-h3); }
#director.story.running:not(.drawer-open) #quest-pick-h,
#director.story.running:not(.drawer-open) #quest-cards { display: none !important; }

/* The guide's invite card, past the grown-up check. */
.invite-qr { align-items: center; }
.invite-head { font-family: var(--kaq-font-display); font-weight: 600; font-size: var(--kaq-size-h3); margin: 0; }
.invite-code { margin: var(--kaq-space-2) 0; }
.invite-code .code { font-size: var(--kaq-size-h1); font-weight: 700; letter-spacing: 0.18em; padding: var(--kaq-space-1) var(--kaq-space-3); }
.invite-how { margin: 0 0 var(--kaq-space-4); color: var(--kaq-color-ink-soft); max-width: 34ch; }
.invite-qr .qr-frame { width: 200px; }

/* The grown-up check. */
.gate-dialog { width: min(28rem, calc(100vw - 2 * var(--kaq-space-4))); padding: var(--kaq-space-6); border: 1px solid var(--kaq-color-line); border-radius: var(--kaq-radius-card); background: var(--kaq-color-surface); color: var(--kaq-color-ink); box-shadow: var(--kaq-shadow-overlay); }
.gate-dialog::backdrop { background: color-mix(in srgb, var(--kaq-color-paper) 78%, transparent); }
.gate-title { display: flex; align-items: center; gap: var(--kaq-space-2); margin: 0 0 var(--kaq-space-3); font-size: var(--kaq-size-h3); }
.gate-title .ic { width: 24px; height: 24px; color: var(--kaq-color-forest); flex: none; }
.gate-body { margin: 0 0 var(--kaq-space-2); }
.gate-dialog input { font-size: var(--kaq-size-h3); letter-spacing: 0.1em; max-width: 10rem; }
.gate-err { margin: var(--kaq-space-2) 0 0; color: var(--kaq-color-berry); font-weight: 600; font-size: var(--kaq-size-small); }
.gate-note { margin: var(--kaq-space-3) 0 0; color: var(--kaq-color-ink-soft); font-size: var(--kaq-size-small); }
.gate-actions { margin-top: var(--kaq-space-5); }

/* A check's result card: the number, big, with the word beside it. */
.check-result-word b { font-family: var(--kaq-font-display); font-weight: 700; font-size: var(--kaq-size-h2); line-height: 1; vertical-align: -0.1em; }

/* Story mode for the guide (body.guide-story, set by KAQ._setConsoleMode).
   One column of what matters; Back and Next live in a bar along the bottom
   of the screen, where the thumb already is. */
body.guide-story { padding-bottom: calc(var(--kaq-touch-primary) + var(--kaq-space-7)); }
body.guide-story .table-grid { grid-template-columns: minmax(0, 1fr); }
body:not(.table-screen) .stage-quest, body.guide-story #sm-scene { display: none !important; }
body:not(.guide-story) .read-label { display: none; }
body.guide-story.stage-idle #stage-card { display: none; }
body.guide-story .sm-nav {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 35; margin: 0;
  padding: var(--kaq-space-3) var(--kaq-space-4) calc(var(--kaq-space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--kaq-color-paper); border-top: 1px solid var(--kaq-color-line);
  justify-content: center;
}
body.guide-story .sm-nav .sm-next { max-width: 40rem; }
body.guide-story.stage-idle #quest-load-row { position: sticky; bottom: 0; z-index: 5; padding: var(--kaq-space-3) 0; background: var(--kaq-color-surface); }
/* A wide screen puts the picture beside the words, like an open book. */
@media (min-width: 960px) {
  body.guide-story #stage-body:not(.hidden) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--kaq-space-6); align-items: start; }
  body.guide-story #stage-body > * { grid-column: 2; }
  body.guide-story #stage-body > .stage-art { grid-column: 1; grid-row: 1 / span 4; position: sticky; top: calc(64px + var(--kaq-space-4)); margin: 0; }
  body.guide-story .stage-art .stage-image { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .read-box { padding: var(--kaq-space-3) var(--kaq-space-4) var(--kaq-space-4); }
  .stage-text .stage-title { font-size: var(--kaq-size-h3); }
  body.guide-story .wrap { padding-inline: var(--kaq-space-3); }
  body.guide-story .card { padding: var(--kaq-space-4); }
}
@media (prefers-reduced-motion: reduce) { .sm-notes-sum .ic:last-child { transition: none; } }

/* ==========================================================================
   Home, join and the dashboard's start bar (KAQ design system).
   ========================================================================== */
.home { max-width: var(--kaq-measure-page); }
.home-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--kaq-space-7); align-items: start; padding-top: var(--kaq-space-4); }
.home-art { order: 2; position: sticky; top: var(--kaq-space-5); }
.home-art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--kaq-radius-card); box-shadow: var(--kaq-shadow-raised); }
.home-copy { order: 1; min-width: 0; }
.home-copy h1 { font-size: var(--kaq-size-display); margin-bottom: var(--kaq-space-3); }
.home-lede { font-size: var(--kaq-size-h3); line-height: var(--kaq-leading-snug); color: var(--kaq-color-ink-soft); margin: 0 0 var(--kaq-space-5); max-width: 32ch; }
.home .device-start { margin-top: var(--kaq-space-2); }
.home-join { display: flex; align-items: center; flex-wrap: wrap; gap: var(--kaq-space-3); margin: var(--kaq-space-5) 0 0; }
.email-sign { margin-top: var(--kaq-space-6); border-top: 1px solid var(--kaq-color-line); padding-top: var(--kaq-space-2); }
.email-sign > summary { display: flex; align-items: center; gap: var(--kaq-space-2); min-height: var(--kaq-touch-min); cursor: pointer; list-style: none; font-weight: 600; color: var(--kaq-color-ink-soft); }
.email-sign > summary::-webkit-details-marker { display: none; }
.email-sign > summary .ic { width: 18px; height: 18px; transition: transform .15s ease; }
.email-sign[open] > summary .ic { transform: rotate(180deg); }
@media (max-width: 860px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); gap: var(--kaq-space-5); padding-top: 0; }
  .home-art { order: 0; position: static; }
  .home-copy h1 { font-size: var(--kaq-size-h1); }
  .home-lede { font-size: var(--kaq-size-body); }
}
@media (prefers-reduced-motion: reduce) { .email-sign > summary .ic { transition: none; } }

.join-intro { text-align: center; }
.join-intro .join-card, .join-intro .join-host { text-align: start; }
.join-art { display: flex; justify-content: center; margin: var(--kaq-space-4) 0 var(--kaq-space-5); }
.join-art img { width: 112px; height: 112px; object-fit: cover; border-radius: var(--kaq-radius-pill); border: 3px solid var(--kaq-color-paper); background: var(--kaq-color-surface); }
.join-art img + img { margin-inline-start: calc(-1 * var(--kaq-space-5)); }
.join-sub { margin: 0 auto var(--kaq-space-5); max-width: 34ch; }
.join-card { margin-top: var(--kaq-space-2); }
.join-code { min-height: var(--kaq-touch-primary); font-family: ui-monospace, Menlo, monospace; font-size: var(--kaq-size-h2); font-weight: 700; text-align: center; letter-spacing: 0.3em; }
.join-code::placeholder { color: color-mix(in srgb, var(--kaq-color-ink-soft) 55%, transparent); letter-spacing: 0.3em; }
.join-host { margin: var(--kaq-space-4) 0 0; }
@media (max-width: 420px) { .join-art img { width: 88px; height: 88px; } }

.new-game-h { font-size: var(--kaq-size-h3); margin: 0 0 var(--kaq-space-3); }
.new-game-row { flex-wrap: wrap; align-items: end; gap: var(--kaq-space-3); }
.new-game-name { flex: 1 1 100%; margin: var(--kaq-space-2) 0 0; }
.new-game-row input { flex: 1 1 12rem; }
.new-game-row #create { flex: 1 1 16rem; }
#create .ic { width: 20px; height: 20px; }
.game-title { margin: var(--kaq-space-2) 0 var(--kaq-space-1); }

/* Small fixes for story mode. */
.read-box .listen-row { gap: var(--kaq-space-2); }
.read-box .listen-btn { min-height: var(--kaq-touch-min); padding: var(--kaq-space-1) var(--kaq-space-3); font-size: var(--kaq-size-small); border-color: transparent; background: color-mix(in srgb, var(--kaq-color-forest) 12%, transparent); }
#director.story:not(.drawer-open) #qr-clock,
#director.story:not(.drawer-open) #qr-length,
#director.story.running:not(.drawer-open) #quest-length,
#director.story:not(.drawer-open) .so-far-show-row,
#director.story:not(.drawer-open) #quest-endings { display: none !important; }
/* A phone header: the brand keeps its line, the header buttons show their
   icon and keep their words for a screen reader. */
@media (max-width: 560px) {
  header.top:not(.table-top) { flex-wrap: nowrap; }
  header.top .brand > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--kaq-size-body); }
  header.top:not(.table-top) .row { flex-wrap: nowrap; flex: none; }
  header.top:not(.table-top) .btn.ghost:has(.ic) > span[data-i18n] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  header.top:not(.table-top) .btn.ghost:has(.ic) { width: var(--kaq-touch-min); padding: 0; }
}
.new-game-row input { min-height: var(--kaq-touch-primary); }
@media (max-width: 560px) {
  .new-game-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .new-game-row { gap: var(--kaq-space-2); }
  .new-game-row input { min-height: var(--kaq-touch-min); }
}

/* Tonight we'd rather skip (issue 2694): the GM's first-open card with eight
   picture tiles, the summary in "Things to skip", and the gentle warning
   beside Next. All GM console; nothing here is ever on a seat or the TV. */
.comfort-card { margin: var(--kaq-space-1) 0 var(--kaq-space-4); padding: var(--kaq-space-4); background: var(--kaq-color-surface-sunk); border: 1px solid var(--kaq-color-line); border-inline-start: 3px solid var(--kaq-color-forest); border-radius: var(--kaq-radius-card); }
.comfort-card-title { display: flex; align-items: center; gap: var(--kaq-space-2); margin: 0 0 var(--kaq-space-2); }
.comfort-first { margin: 0 0 var(--kaq-space-3); line-height: var(--kaq-leading-body); }
.comfort-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--kaq-space-2); }
.comfort-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--kaq-space-1); min-height: 5.5rem; padding: var(--kaq-space-3) var(--kaq-space-2); background: transparent; color: var(--kaq-color-ink); border: 1px solid var(--kaq-color-line); border-radius: var(--kaq-radius-card); font-weight: 600; text-align: center; line-height: var(--kaq-leading-tight); }
.comfort-tile:hover { border-color: var(--kaq-color-forest); }
.comfort-tile .comfort-tile-ic .ic { width: 1.9rem; height: 1.9rem; color: var(--kaq-color-forest); }
.comfort-tile .comfort-tile-tick { position: absolute; inset-block-start: var(--kaq-space-1); inset-inline-end: var(--kaq-space-1); display: none; }
.comfort-tile .comfort-tile-tick .ic { width: 1rem; height: 1rem; }
.comfort-tile[aria-pressed="true"] { background: color-mix(in srgb, var(--kaq-color-forest) 16%, var(--kaq-color-surface)); border-color: var(--kaq-color-forest); box-shadow: inset 0 0 0 1px var(--kaq-color-forest); }
.comfort-tile[aria-pressed="true"] .comfort-tile-tick { display: block; color: var(--kaq-color-forest); }
.comfort-tile:focus-visible { outline: 3px solid var(--kaq-color-focus); outline-offset: 2px; }
.comfort-private { display: flex; align-items: center; gap: var(--kaq-space-1); }
.comfort-actions { margin-top: var(--kaq-space-3); gap: var(--kaq-space-2); flex-wrap: wrap; }
.comfort-actions button { min-height: var(--kaq-touch-min); display: inline-flex; align-items: center; gap: var(--kaq-space-2); }
.comfort-summary { display: flex; flex-wrap: wrap; gap: var(--kaq-space-1); margin: var(--kaq-space-2) 0 var(--kaq-space-3); font-size: var(--kaq-size-small); }
.comfort-chip { display: inline-flex; align-items: center; gap: var(--kaq-space-1); padding: 0.15rem var(--kaq-space-2); border: 1px solid var(--kaq-color-line); border-radius: var(--kaq-radius-pill); background: var(--kaq-color-surface-sunk); }
#comfort-open { display: inline-flex; align-items: center; gap: var(--kaq-space-2); min-height: var(--kaq-touch-min); }
.comfort-warn { margin-top: var(--kaq-space-3); padding: var(--kaq-space-2) var(--kaq-space-3); border: 1px solid var(--kaq-color-line); border-inline-start: 3px solid var(--kaq-color-lantern); border-radius: var(--kaq-radius-control); background: var(--kaq-color-surface-sunk); font-size: var(--kaq-size-small); line-height: var(--kaq-leading-body); }
.comfort-warn-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kaq-space-1) var(--kaq-space-2); margin-bottom: var(--kaq-space-1); }
.comfort-warn-row p { margin: var(--kaq-space-1) 0; }
.comfort-warn-row ul { list-style: none; margin: 0 0 var(--kaq-space-2); padding: 0; }
.comfort-warn-row li { display: flex; gap: var(--kaq-space-2); align-items: flex-start; }
.comfort-warn-row li .ic { flex: none; margin-top: 0.2rem; color: var(--kaq-color-lantern); }
#qr-comfort-hide { display: inline-flex; align-items: center; gap: var(--kaq-space-1); min-height: var(--kaq-touch-min); margin-top: var(--kaq-space-1); }
/* ---- team challenge (issue 2862) ----
   The shared picture track under the scene: a filled step is the lantern
   colour as a fill (not a button), an empty one dashed; the danger track
   below fills in berry. Flex rows follow the page direction, so a Hebrew
   seat fills right to left. Only a step that just filled plays the fill. */
.challenge { margin-top: var(--kaq-space-4); padding: var(--kaq-space-4); border: 1px solid var(--kaq-color-line); border-radius: var(--kaq-radius-card); background: var(--kaq-color-surface-sunk); }
.tc-eyebrow { display: flex; align-items: center; gap: var(--kaq-space-2); margin: 0; }
.tc-name { font-family: var(--kaq-font-display); font-size: var(--kaq-size-h3); line-height: var(--kaq-leading-snug); margin: var(--kaq-space-1) 0 var(--kaq-space-2); }
.tc-how { margin: 0 0 var(--kaq-space-3); font-size: var(--kaq-size-small); }
.tc-track { display: flex; flex-wrap: wrap; gap: var(--kaq-space-2); }
.tc-step { display: inline-flex; align-items: center; justify-content: center; width: var(--kaq-touch-min); height: var(--kaq-touch-min); border-radius: var(--kaq-radius-control); border: 2px dashed var(--kaq-color-line); color: var(--kaq-color-ink-soft); }
.tc-step .ic { width: 60%; height: 60%; }
.tc-step.on { background: var(--kaq-color-lantern); border: 2px solid var(--kaq-color-lantern); color: var(--kaq-color-lantern-ink); }
.tc-danger .tc-step { width: calc(var(--kaq-touch-min) * 0.75); height: calc(var(--kaq-touch-min) * 0.75); }
.tc-danger-step.on { background: var(--kaq-color-berry); border-color: var(--kaq-color-berry); color: var(--kaq-color-paper); }
.tc-step.new { animation: tc-fill 0.4s ease-out; }
.tc-count { margin: var(--kaq-space-1) 0 var(--kaq-space-3); font-size: var(--kaq-size-label); color: var(--kaq-color-ink-soft); }
.tc-outcome { margin-top: var(--kaq-space-2); padding: var(--kaq-space-3) var(--kaq-space-4); border-radius: var(--kaq-radius-control); background: var(--kaq-color-surface); border-inline-start: 4px solid var(--kaq-color-lantern); }
.tc-outcome.nearly { border-inline-start-color: var(--kaq-color-berry); }
.tc-outcome.fresh { animation: tc-rise 0.5s ease-out; }
.tc-outcome-head { display: flex; align-items: center; gap: var(--kaq-space-2); margin: 0 0 var(--kaq-space-1); font-family: var(--kaq-font-display); font-size: var(--kaq-size-h3); font-weight: 700; }
.tc-outcome-text { margin: 0; font-family: var(--kaq-font-read); font-size: var(--kaq-size-read-table); line-height: var(--kaq-leading-read); max-width: var(--kaq-measure-read); }
.tc-gm { display: flex; flex-direction: column; gap: var(--kaq-space-2); margin-top: var(--kaq-space-3); font-family: var(--kaq-font-ui); }
.tc-status { display: flex; align-items: center; gap: var(--kaq-space-2); margin: 0; font-weight: 700; }
.tc-call { width: 100%; min-height: var(--kaq-touch-primary); }
.tc-who-label { margin: 0; font-size: var(--kaq-size-label); color: var(--kaq-color-ink-soft); }
.tc-gm select { min-height: var(--kaq-touch-min); }
.challenge-offer { display: flex; flex-direction: column; gap: var(--kaq-space-2); margin-top: var(--kaq-space-4); padding: var(--kaq-space-3) var(--kaq-space-4); border: 1px dashed var(--kaq-color-line); border-radius: var(--kaq-radius-card); }
.tc-offer-line { display: flex; align-items: center; gap: var(--kaq-space-2); margin: 0; }
.tc-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--kaq-space-2); }
.tc-form-grid label { display: flex; flex-direction: column; gap: var(--kaq-space-1); margin: 0; font-size: var(--kaq-size-label); }
.tc-form-grid select { min-height: var(--kaq-touch-min); }
@keyframes tc-fill { from { transform: scale(0.6); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes tc-rise { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tc-step.new, .tc-outcome.fresh { animation: none; } }
body.table-screen .challenge { padding: max(1rem, 1.4vw); }
body.table-screen .tc-name { font-size: clamp(1.4rem, 2.8vw, 3.2rem); }
body.table-screen .tc-how, body.table-screen .tc-count { font-size: clamp(0.9rem, 1.2vw, 1.5rem); }
body.table-screen .tc-track { gap: max(0.5rem, 0.8vw); }
body.table-screen .tc-step { width: clamp(3rem, 6.5vw, 8rem); height: clamp(3rem, 6.5vw, 8rem); }
body.table-screen .tc-danger .tc-step { width: clamp(2.2rem, 4.2vw, 5rem); height: clamp(2.2rem, 4.2vw, 5rem); }
body.table-screen .tc-outcome-head { font-size: clamp(1.3rem, 2.4vw, 2.8rem); }
body.table-screen .tc-outcome-text { font-size: clamp(1.2rem, 2.1vw, 2.6rem); max-width: 62ch; }
/* How long tonight (issue 2857): one segmented radio group, a secondary control
   (forest, never lantern: Start stays the one lantern button). */
.length-pick { margin: var(--kaq-space-3) 0; }
.length-pick.hidden { display: none; }
.length-label { display: flex; align-items: center; gap: var(--kaq-space-2); margin-bottom: var(--kaq-space-2); font-family: var(--kaq-font-ui); font-size: var(--kaq-size-label); font-weight: 600; color: var(--kaq-color-ink-soft); }
.length-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--kaq-space-2); }
.length-opt { display: flex; flex-direction: column; justify-content: center; gap: 0.1rem; min-height: var(--kaq-touch-min); padding: var(--kaq-space-2) var(--kaq-space-3); border: 1px solid var(--kaq-color-line); border-radius: var(--kaq-radius-control); background: var(--kaq-color-surface-sunk); color: var(--kaq-color-ink); font-family: var(--kaq-font-ui); cursor: pointer; }
.length-opt:hover { border-color: var(--kaq-color-forest); }
.length-opt:has(input:checked) { background: var(--kaq-color-forest); border-color: var(--kaq-color-forest); color: var(--kaq-color-forest-ink); }
.length-opt:has(input:focus-visible) { outline: 3px solid var(--kaq-color-focus); outline-offset: 2px; }
.length-name { font-size: var(--kaq-size-body); font-weight: 700; line-height: var(--kaq-leading-tight); }
.length-meta { font-size: var(--kaq-size-small); opacity: 0.85; }
.length-skipped { margin-top: var(--kaq-space-2); font-size: var(--kaq-size-small); color: var(--kaq-color-ink-soft); }
.length-skipped summary { min-height: var(--kaq-touch-min); display: flex; align-items: center; gap: var(--kaq-space-2); cursor: pointer; }
.length-skipped ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--kaq-space-2); }
.length-skipped button { min-height: var(--kaq-touch-min); text-align: start; }
@media (max-width: 560px) {
  .length-seg { grid-template-columns: 1fr; gap: var(--kaq-space-1); }
  .length-opt { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--kaq-space-3); }
  .length-meta { text-align: end; }
}

/* Hero companions (issue 2691): the join step's picks, the sheet block, the
   "Use Moss" button beside Roll, and the companion beside its hero in the book. */
.companion-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--kaq-space-3); margin-top: var(--kaq-space-4); }
@media (max-width: 560px) { .companion-grid { grid-template-columns: 1fr 1fr; gap: var(--kaq-space-2); } }
.companion-card .hero-portrait.creature-ph { font-size: var(--kaq-size-label); border-radius: var(--kaq-radius-control); }
.companion-card[aria-checked="true"] { border-color: var(--kaq-color-forest); background: color-mix(in srgb, var(--kaq-color-forest) 10%, var(--kaq-color-surface)); }
.companion-names { margin-top: var(--kaq-space-4); }
.companion-name-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kaq-space-2); margin: var(--kaq-space-2) 0 var(--kaq-space-3); }
@media (max-width: 480px) { .companion-name-grid { grid-template-columns: 1fr 1fr; } }
.companion-name { min-height: var(--kaq-touch-primary); }
#companion-more { display: inline-flex; align-items: center; gap: var(--kaq-space-2); min-height: var(--kaq-touch-min); }
.sheet-companion { display: flex; gap: var(--kaq-space-3); align-items: flex-start; margin: var(--kaq-space-3) 0 0; padding: var(--kaq-space-2) var(--kaq-space-3); background: var(--kaq-color-surface-sunk); border-radius: var(--kaq-radius-control); font-size: var(--kaq-size-small); line-height: var(--kaq-leading-snug); }
.sheet-companion .companion-pick { display: inline-flex; align-items: center; gap: var(--kaq-space-1); }
.companion-mini { flex: none; width: 56px; height: 56px; border-radius: var(--kaq-radius-control); object-fit: cover; border: 1px solid var(--kaq-color-line); background: var(--kaq-color-surface); }
.companion-mini.creature-ph { font-size: var(--kaq-size-label); }
.companion-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--kaq-space-1); }
.companion-name-line { font-family: var(--kaq-font-display); font-weight: 600; font-size: var(--kaq-size-body); color: var(--kaq-color-ink); }
.companion-move, .companion-used { display: flex; gap: var(--kaq-space-1); }
.companion-move .ic, .companion-used .ic { flex: none; margin-top: 0.15rem; color: var(--kaq-color-forest); }
.companion-move b { color: var(--kaq-color-ink); }
.companion-used { color: var(--kaq-color-ink-soft); }
.companion-use { display: inline-flex; align-items: center; gap: var(--kaq-space-2); min-height: var(--kaq-touch-min); }
.check-companion-line { flex-direction: column; align-items: flex-start; }
.check-companion-row { display: flex; align-items: center; gap: var(--kaq-space-2); }
.check-companion-row .ic { width: 1.15em; height: 1.15em; flex: none; color: var(--kaq-color-forest); }
.sb-companion { display: inline-flex; align-items: center; gap: var(--kaq-space-1); font-weight: 400; font-style: italic; }
.sb-companion-img { width: 32px; height: 32px; border-radius: var(--kaq-radius-pill); border: 2px solid var(--rule); object-fit: cover; flex: none; }
.sb-companion-img.creature-ph { padding: 0; font-size: 0; }
.sb-companion-img.creature-ph > span { display: none; }
@media print {
  body.storybook-page .sb-companion-img { width: 7mm; height: 7mm; }
}

/* "What next?" (sparkfield issue 3471): three covers under the storybook. A seat's whole
   cover is the button; the GM gets Lock in, Swap and the library under each;
   once locked, the winner stays alone with Start it, the one big action. */
.next-card { border-color: color-mix(in srgb, var(--kaq-color-lantern) 45%, var(--kaq-color-line)); }
.next-card .eyebrow { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.next-prompt { margin: 0.4rem 0 0.8rem; font-family: var(--kaq-font-display); font-size: var(--kaq-size-h3); line-height: var(--kaq-leading-snug); }
.next-note { margin: 0 0 0.8rem; }
.next-open { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; min-height: var(--kaq-touch-primary); font-size: var(--kaq-size-h3); border-radius: var(--kaq-radius-card); }
.next-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.9rem; }
.next-grid:empty { display: none; }
.next-cover { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; margin: 0; padding: 0.5rem 0.5rem 0.65rem; background: var(--kaq-color-surface-sunk); border: 2px solid var(--kaq-color-line); border-radius: var(--kaq-radius-card); }
.next-cover.leading { border-color: color-mix(in srgb, var(--kaq-color-forest) 60%, var(--kaq-color-line)); }
.next-cover.picked, .next-cover.decided { border-color: var(--kaq-color-forest); box-shadow: 0 0 0 2px color-mix(in srgb, var(--kaq-color-forest) 35%, transparent); }
.next-cover .adv-tick { display: inline-flex; }
.next-cover .adv-cover .choice-count { position: absolute; bottom: 0.4rem; inset-inline-end: 0.4rem; min-width: 2rem; font-size: var(--kaq-size-body); }
.next-cover .adv-cover .choice-count.zero { background: color-mix(in srgb, var(--kaq-color-paper) 88%, transparent); }
.next-pick, .next-face { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; min-height: var(--kaq-touch-min); padding: 0; margin: 0; text-align: start; color: inherit; font: inherit; background: none; border: 0; border-radius: var(--kaq-radius-control); box-shadow: none; }
.next-pick { cursor: pointer; }
.next-pick:disabled { cursor: default; opacity: 1; }
.next-pick:focus-visible { outline: 3px solid var(--kaq-color-focus); outline-offset: 3px; }
.next-cover .choice-names { margin: 0; min-height: 1.2em; font-size: var(--kaq-size-label); color: var(--kaq-color-ink-soft); overflow-wrap: anywhere; }
.next-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; }
.next-tools button { display: inline-flex; align-items: center; gap: 0.35rem; min-height: var(--kaq-touch-min); }
.next-tools .next-lib { flex: 1 1 100%; min-height: var(--kaq-touch-min); }
.next-add { align-items: center; justify-content: center; text-align: center; border-style: dashed; color: var(--kaq-color-forest); }
.next-add .next-lib { width: 100%; }
/* Locked: only the winner stays beside the result, on a tablet and the TV. */
.next-grid.has-decision .next-cover:not(.decided) { display: none; }
.next-grid.has-decision { grid-template-columns: minmax(0, 360px); }
.next-result { margin-top: 0.9rem; }
.next-winner { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.8rem; font-family: var(--kaq-font-display); font-size: var(--kaq-size-h3); }
.next-winner .ic { flex: none; color: var(--kaq-color-forest); }
.next-go { display: flex; flex-direction: column; gap: 0.5rem; }
.next-start { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; min-height: var(--kaq-touch-primary); font-size: var(--kaq-size-h3); border-radius: var(--kaq-radius-card); }
.next-go .ghost { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.35rem; min-height: var(--kaq-touch-min); }
body.table-screen .next-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.table-screen .next-grid.has-decision { grid-template-columns: minmax(0, 520px); }
body.table-screen .next-cover .adv-title { font-size: var(--kaq-size-h3); }
/* The dashboard card's next adventure (issue 3471). */
.game-next { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; font-size: var(--kaq-size-small); font-weight: 600; }
.game-next img { flex: none; width: 64px; height: 40px; object-fit: cover; border-radius: var(--kaq-radius-control); border: 1px solid var(--kaq-color-line); }
.game-next span { display: inline-flex; align-items: center; gap: 0.35rem; overflow-wrap: anywhere; }
.game-next .ic { flex: none; color: var(--kaq-color-forest); }
@media (max-width: 560px) {
  .next-grid { grid-template-columns: 1fr; }
}