:root {
  --bg: #12241C; --surface: #1A2E23; --surface2: #152A20; --border: #2E4A3A;
  --text: #F1E9D2; --muted: #B9C4A9; --accent: #D4A24C; --danger: #b5563f;
  --parch: #EFE3C0;
  --serif: 'Cinzel', Georgia, 'Times New Roman', serif;
  --sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.55; }
a { color: var(--accent); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
header.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--surface2); }
header.top .brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--serif); font-weight: 700; letter-spacing: 0.02em; }
header.top .mark { width: 26px; height: 26px; color: var(--accent); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; }
h1 { font-size: 1.9rem; margin: 0.2rem 0 0.4rem; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: var(--accent); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.3rem; }
.muted { color: var(--muted); }
label { display: block; font-size: 0.82rem; color: var(--muted); margin: 0.7rem 0 0.25rem; }
input, select, textarea { width: 100%; padding: 0.6rem 0.7rem; border-radius: 9px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); border-color: var(--accent); }
button, .btn { cursor: pointer; font: inherit; font-weight: 600; padding: 0.6rem 1rem; border-radius: 9px; border: 1px solid var(--accent); background: var(--accent); color: #241a08; transition: transform .1s ease, filter .1s ease; }
button:hover, .btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
button.ghost, .btn.ghost { background: transparent; color: var(--accent); }
button.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
button:disabled, .btn:disabled { opacity: 0.45; cursor: not-allowed; }
button:disabled:hover, .btn:disabled:hover { filter: none; transform: none; }
.badge { display: inline-block; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; padding: 0.1rem 0.5rem; }
.badge.gm { color: #e0b25a; border-color: #7a5a1e; }
.grid { display: grid; gap: 1rem; }
.row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.code { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.12em; background: var(--surface2); border: 1px dashed var(--border); border-radius: 7px; padding: 0.15rem 0.5rem; color: var(--parch); }
.notice { border-left: 3px solid var(--accent); background: var(--surface2); padding: 0.7rem 0.9rem; border-radius: 0 9px 9px 0; margin: 0.8rem 0; }
.notice.warn { border-left-color: var(--danger); }
.hidden { display: none !important; }

/* 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(--serif); font-size: 1.25rem; color: var(--accent); }
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: 0.82rem; border-radius: 999px; padding: 0.2rem 0.7rem; border: 1px solid var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.conn.live { border-color: #6fbf7a; color: #6fbf7a; background: color-mix(in srgb, #6fbf7a 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(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.85rem; }
.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: #6fbf7a; box-shadow: 0 0 6px #6fbf7a; }
.chat-log { height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; }
.chat-msg { font-size: 0.9rem; }
.chat-msg .from { color: var(--accent); font-weight: 600; }
.chat-msg.roll { color: var(--parch); }
.chat-msg.system { color: var(--muted); font-style: italic; font-size: 0.82rem; }
.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(--serif); font-size: 1.6rem; font-weight: 700; line-height: 1.15; }
.die-primary-note { font-size: 0.74rem; font-weight: 600; opacity: 0.75; }
.roll-log-head { margin: 0.9rem 0 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.dice-log li { display: flex; align-items: center; gap: 0.4rem; }
.dice-log .roll-die { color: var(--muted); }
.dice-log .roll-total { color: var(--accent); 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(--surface2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.hpbar > span { display: block; height: 100%; background: linear-gradient(90deg,#b5563f,#d4a24c); }

/* the shared stage */
.stage-card { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.stage-quest { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent); margin-bottom: 0.3rem; }
.stage-title { font-size: 1.5rem; margin: 0.1rem 0 0.5rem; color: var(--parch); }
.stage-image { display: block; width: 100%; max-width: 512px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); margin: 0.2rem auto 0.7rem; }
.stage-narration { font-size: 1.02rem; 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: left; background: var(--surface2); color: var(--text); border: 1px solid var(--border); font-weight: 500; }
.choice-btn:hover { border-color: var(--accent); filter: none; }
.choice-btn.picked { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--surface2)); color: var(--parch); }
.stage-chosen { font-size: 0.86rem; 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(--accent) 55%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
.w { border-radius: 4px; transition: background-color .12s ease, color .12s ease; }
.w.reading { background: color-mix(in srgb, var(--accent) 32%, transparent); color: var(--parch); }
.choice-btn.reading, .screen-choice.reading { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.voice-toggle { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; font-size: 0.85rem; }
.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(--accent) 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-left: 3px solid color-mix(in srgb, var(--accent) 60%, var(--border)); background: var(--surface2); border-radius: 0 10px 10px 0; }
.recap-eyebrow { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.3rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.recap-body { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--muted); }
.chapter-step { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--border); }
.chapter-step button { display: inline-flex; align-items: center; gap: 0.4rem; }
.chapter-hint { font-size: 0.8rem; margin: 0.45rem 0 0; }
.journal-card { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.journal-title { display: flex; align-items: center; gap: 0.45rem; font-size: 1.05rem; margin: 0.3rem 0 0.7rem; color: var(--parch); }
.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: 0.88rem; color: var(--muted); }
.jc-n { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 999px; border: 1px solid var(--border); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.jc.done { color: var(--text); }
.jc.done .jc-n { background: color-mix(in srgb, var(--accent) 22%, var(--surface2)); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.jc.now { color: var(--parch); font-weight: 600; }
.jc.now .jc-n { background: var(--accent); border-color: var(--accent); color: #241a08; }
.jc-tag { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 600; }
.journal-head { margin: 1rem 0 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.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: 0.88rem; }
.journal-carried .ic { flex: none; margin-top: 0.15rem; color: var(--accent); }
.journal-carried div { display: flex; flex-direction: column; gap: 0.15rem; }
.jc-note { font-size: 0.82rem; line-height: 1.5; }
.jc-from { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* 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(--accent) 60%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.private-eyebrow { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.5rem; }
.private-card .stage-title { font-size: 1.25rem; }
.responses .secret { color: var(--parch); }
.responses .to { color: var(--muted); }

/* 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(--border); border-radius: 12px; overflow: hidden; background: #e8d8ad; }
.map-holder { display: block; }
.map-holder svg { display: block; width: 100%; height: auto; }
.map-btn { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
.map-hint { font-size: 0.8rem; 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: rgba(10, 20, 15, 0.94); 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: 8px; }
.map-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface); }

/* director console */
.director-block { border-top: 1px solid var(--border); 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(--accent); font-weight: 600; font-size: 0.9rem; }
.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: 0.9rem; }
.responses .from { color: var(--accent); font-weight: 600; }

/* 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(--accent) 45%, transparent); }

/* initiative / turn order */
.turn-round { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.turn-now { font-family: var(--serif); font-size: 1.15rem; color: var(--parch); margin: 0.5rem 0 0.7rem; }
.turn-now.yours { color: var(--accent); }
.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: 9px; background: var(--surface2); font-size: 0.92rem; }
.turn-row.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface2)); }
.turn-row.you .turn-who { color: var(--parch); }
.turn-init { min-width: 2.1rem; text-align: center; font-family: var(--serif); font-weight: 700; color: var(--accent); }
.turn-who { display: flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 0; }
.turn-detail { font-size: 0.78rem; white-space: nowrap; }
.turn-edit[type=number] { width: 62px; padding: 0.2rem 0.35rem; font-size: 0.85rem; }
.turn-drop { padding: 0.2rem 0.4rem; border-color: var(--border); color: var(--muted); }
.turn-drop:hover { border-color: var(--danger); color: var(--danger); }
#turn-card.yours { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 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: 0.8rem; border-radius: 7px; }
.qc-pending { font-size: 0.85rem; margin: 0.55rem 0 0; color: var(--parch); }
.seats, .monsters { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.seat, .monster { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.7rem; font-size: 0.9rem; }
.seat-actions { margin-top: 0.4rem; gap: 0.35rem; }
.monster .hpbar { margin-top: 0.45rem; }
.monster-attack, .monster-special { font-size: 0.82rem; margin-top: 0.25rem; }
.monster-hp { margin-top: 0.5rem; font-size: 0.85rem; }
.monster.out { opacity: 0.55; }
.offscript { font-size: 0.9rem; 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(--muted); }
.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: 10px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface2));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
}
.check-line { margin: 0; font-size: 0.95rem; }
.check-note { margin: 0.2rem 0 0; font-size: 0.85rem; }
.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: 10px;
  background: var(--surface2); border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
}
.check-help-line { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-size: 0.95rem; font-weight: 600; }
.check-help-line .ic { width: 1.3em; height: 1.3em; flex: none; color: var(--accent); }
.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(--surface); color: var(--parch); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 12px; font-weight: 600; font-size: 1rem; line-height: 1.25; }
.help-btn .ic { width: 1.3em; height: 1.3em; flex: none; color: var(--accent); }
.help-btn:hover { border-color: var(--accent); filter: none; }
.help-btn:focus-visible { outline: 2px solid var(--accent); 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: 0.9rem; display: flex; align-items: center; gap: 0.4rem; }
.check-helped .ic { width: 1.15em; height: 1.15em; flex: none; color: var(--accent); }
#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: color-mix(in srgb, var(--parch) 30%, var(--border)); }
/* 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(--parch); }
.handout-eyebrow .ic { margin-top: 0.2em; }
.handout-paper {
  background: linear-gradient(160deg, #F6EDD3 0%, var(--parch) 55%, #E4D5AC 100%);
  color: #2E2618; border: 1px solid #C9B584; border-radius: 10px;
  padding: 1rem 1.1rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.handout-title { font-size: 1.2rem; margin: 0 0 0.5rem; color: #2A2113; }
.handout-body { margin: 0; font-size: 1rem; line-height: 1.6; white-space: pre-wrap; }
.handout-figure {
  display: block; position: relative; width: 100%; margin: 0 0 0.7rem;
  padding: 0; border: 0; border-radius: 8px; background: none; overflow: hidden; cursor: zoom-in;
}
.handout-figure:hover { filter: none; transform: none; }
.handout-image { display: block; width: 100%; border-radius: 8px; border: 1px solid #C9B584; }
.handout-zoom {
  position: absolute; right: 0.5rem; bottom: 0.5rem; display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.74rem; font-weight: 600;
  background: rgba(18, 36, 28, 0.82); color: var(--parch); border: 1px solid var(--border);
}
.handout-figure:hover .handout-zoom, .handout-figure:focus-visible .handout-zoom { background: rgba(18, 36, 28, 0.95); }
/* passed to one seat: same paper, marked the way the private reveal is */
.handout-private { border: 1px dashed color-mix(in srgb, var(--accent) 60%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.handout-private .handout-eyebrow { color: var(--accent); }

/* 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: rgba(10, 20, 15, 0.94); }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; border: 1px solid #C9B584; object-fit: contain; }
#lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface); }

/* ---- ready-made hero picker (#2233) ---- */
.join-wrap { max-width: 520px; }
.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(--serif); font-size: 1.6rem; 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(--accent); border-radius: 14px; background: var(--surface2); color: var(--parch); 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(--parch); border-color: var(--accent); }
#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: 0.8rem; margin: 0.35rem 0 0; }
.type-name-link { font-size: 0.85rem; 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: 1.6rem; 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: left; background: var(--surface); color: var(--text); border: 2px solid var(--border); border-radius: 14px; font-weight: 400; }
.hero-card:hover { border-color: var(--accent); filter: none; }
.hero-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hero-card.mine { border-color: var(--accent); }
.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(--border); }
.hero-portrait { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; background: var(--surface2); }
.hero-taken { position: absolute; top: 0.9rem; left: 0.9rem; right: 0.9rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.25rem 0.5rem; border-radius: 999px; background: #1a1410; color: #f5f1eb; font-size: 0.8rem; font-weight: 600; }
.hero-taken.mine { color: #241a08; background: var(--accent); }
.hero-name { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; line-height: 1.2; color: var(--parch); }
.hero-arch { font-size: 0.82rem; color: var(--muted); line-height: 1.35; }
.hero-traits { display: flex; flex-wrap: wrap; gap: 0.15rem; }
.trait-chip { font-size: 0.74rem; padding: 0.1rem 0.35rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); }
.trait-chip.lead { border-color: var(--accent); color: var(--accent); }
.hero-trick, .sheet-trick { display: flex; gap: 0.35rem; font-size: 0.8rem; line-height: 1.4; color: var(--text); }
.hero-trick .ic, .sheet-trick .ic { flex: none; margin-top: 0.15rem; color: var(--accent); }
.hero-trick b, .sheet-trick b { color: var(--parch); }
.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: 999px; background: var(--surface2); color: var(--accent); font-size: 1.5rem; }
@media (max-width: 560px) {
  .hero-card { padding: 0.4rem; }
  .hero-name { font-size: 0.95rem; }
  .hero-taken { top: 0.7rem; left: 0.7rem; right: 0.7rem; font-size: 0.72rem; }
}
.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: 0.82rem; min-height: 44px; }
.sheet-portrait { display: block; width: 96px; height: 96px; border-radius: 12px; border: 1px solid var(--border); margin: 0.2rem 0 0.2rem; }
.sheet-trick { margin: 0.6rem 0 0; padding: 0.5rem 0.6rem; background: var(--surface2); border-radius: 9px; }

/* ---- 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 { 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: 18px; }
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: 14px; }
/* 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: 12px; background: var(--surface2); border: 1px solid var(--border); color: var(--parch); 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: 999px; background: var(--accent); color: #241a08; font-family: var(--serif); 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: 10px; }
/* 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: 0 10px 30px rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; gap: 0.6em; margin: 0; padding: 0.6em 0.9em; border-radius: 12px; font-size: clamp(1.1rem, 1.8vw, 2.3rem); color: var(--parch); background: color-mix(in srgb, var(--accent) 22%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); }
.screen-roll b { color: var(--accent); }
/* 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: 12px; background: var(--accent); color: #241a08; 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 .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: 0.85rem; 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: 0.85rem; 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: 0.82rem; margin: 0.5rem 0; }
.screen-step strong { color: var(--parch); 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(--parch); overflow-wrap: anywhere; }
.screen-status { display: flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; margin: 0.7rem 0 0; }
.screen-status.on { color: #6fbf7a; }
/* 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: 1.6rem; 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(--muted); margin: 0.55rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; font-size: 0.85rem; color: var(--muted); }
.qr-clock[data-level="near"] { --clock: #E8BE6A; }
.qr-clock[data-level="long"] { --clock: #EE9A7E; }
.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: 999px; background: var(--border); 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(--border); border-left: 3px solid #E8BE6A; border-radius: 9px; background: var(--surface2); font-size: 0.9rem; }
.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(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 9px; padding: 0.55rem 0.8rem; font-size: 0.9rem; 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-left: auto; color: var(--muted); transition: transform .15s ease; }
.gm-notes:not([open]) .gm-notes-chev { transform: rotate(-90deg); }
.gm-notes > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.gm-notes-private { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 400; font-size: 0.78rem; color: var(--muted); }
.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; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; color: var(--accent); margin-bottom: 0.2rem !important; }
.gm-note ul { margin: 0; padding-left: 1.1rem; }
.gm-note li + li { margin-top: 0.25rem; }
.gm-way-roll { font-size: 0.78rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
.gm-way-row { display: block; margin-top: 0.15rem; color: var(--muted); }
.gm-way-row b { color: var(--text); font-weight: 600; }
.gm-note-tip p:not(.gm-note-label) { color: var(--muted); 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(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 9%, var(--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(--accent); }
.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(--muted); font-size: 0.92rem; }
.preview-you:empty { display: none; }
.preview-you strong { color: var(--text); }
.preview-hero { width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--surface2); border: 1px solid var(--border); }
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: 999px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.85rem; background: var(--accent); color: #241a08; }
.choice-count.zero { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.preview-end { border-color: var(--accent); }
.preview-end-body { font-family: var(--serif); font-size: 1.1rem; 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: 0.9rem; color: var(--text); 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: 0.82rem; color: var(--muted); }
.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: 999px; font-size: 0.82rem; font-weight: 600; background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.adv-filter-chip:hover { transform: none; border-color: var(--accent); }
.adv-filter-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #241a08; }
.adv-filter-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.adv-count { font-size: 0.72rem; font-weight: 700; opacity: 0.75; }
.adv-retry { margin-left: 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: 0.95rem; color: var(--accent); }
.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: 0.9rem; color: var(--text); background: var(--surface2); border: 2px solid var(--border); border-radius: 14px; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
.adv-card:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.adv-card:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.adv-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.adv-cover { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; background: var(--surface); }
.adv-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.adv-chapter { position: absolute; left: 0.4rem; bottom: 0.4rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.1rem 0.45rem; border-radius: 999px; background: rgba(18, 36, 28, 0.88); color: var(--parch); }
.adv-tick { position: absolute; top: 0.45rem; right: 0.45rem; display: none; width: 1.7rem; height: 1.7rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: #241a08; }
.adv-card .adv-cover .adv-tick { top: 0.3rem; right: 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(--serif); font-weight: 700; font-size: 0.98rem; line-height: 1.25; }
.adv-blurb { color: var(--muted); font-size: 0.8rem; 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: 0.72rem; line-height: 1.3; padding: 0.12rem 0.45rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); }
.adv-chip .ic { color: var(--accent); }
.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: 1.8rem; color: var(--accent); 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(--surface); border-top: 1px solid var(--border); border-radius: 0 0 14px 14px; 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: 0.88rem; }
.adv-chosen img, .game-adv img { flex: none; width: 48px; height: 30px; object-fit: cover; border-radius: 5px; border: 1px solid var(--border); }
.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: 0.85rem; }
/* 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: 0.88rem; }
.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(--accent); }
.game-when { font-size: 0.82rem; 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: 0.9rem; }
}
@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: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.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(--surface2); color: var(--parch); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 12px; font-weight: 600; font-size: 0.95rem; line-height: 1.25; }
.phrase-btn .ic { width: 1.25em; height: 1.25em; flex: none; color: var(--accent); }
.phrase-btn:hover { border-color: var(--accent); filter: none; }
.phrase-btn:focus-visible { outline: 2px solid var(--accent); 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(--accent) 40%, var(--border)); }
.talk-note { font-size: 0.82rem; 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: 14px 14px 14px 4px; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--parch); font-weight: 500; }
.phrase-bubble[dir="rtl"] { border-radius: 14px 14px 4px 14px; }
.phrase-bubble .ic { width: 1.05em; height: 1.05em; flex: none; color: var(--accent); }
@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: 0.85rem; 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: 999px; background: var(--surface2); border: 1px solid var(--border); 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(--muted); transition: inset-inline-start .15s ease, background .15s ease; }
.switch[aria-pressed="true"] .switch-track { background: color-mix(in srgb, var(--accent) 45%, var(--surface2)); border-color: var(--accent); }
.switch[aria-pressed="true"] .switch-thumb { inset-inline-start: calc(2.3rem - 1.3rem + 2px); background: var(--parch); }
@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(--accent) 45%, var(--border)); }
.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 { --ink: #2a2216; --ink-soft: #5a4d36; --rule: #cdb98a; --gold: #7a5a1c;
  background: var(--parch); color: var(--ink); border-radius: 12px; 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: 8px; border: 1px solid var(--rule); flex: none; }
.sb-eyebrow, .sb-head, .sb-n { margin: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; 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: 0.85rem; 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: 999px; border: 2px solid var(--rule); background: #f8f0d9; 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: 8px; 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: 1rem; line-height: 1.3; color: var(--ink); }
.sb-choice { display: flex; gap: 0.35rem; align-items: flex-start; margin: 0; font-size: 0.85rem; 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-left: 1.3rem; }
.sb-carried { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; }
.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-the-end { margin: 1.1rem 0 0; text-align: center; font-family: var(--serif); font-size: 1.35rem; 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(--accent) 35%, var(--border)); }
.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(--accent); }
.so-far-sum::-webkit-details-marker { display: none; }
.so-far-sum:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 14px; }
.so-far-title { font-family: var(--serif); font-weight: 700; color: var(--text); }
.so-far-count { margin-left: auto; font-size: 0.82rem; color: var(--muted); }
.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(--surface2); border-radius: 10px; }
.so-far-item img, .so-far-ph { width: 96px; height: 64px; flex-shrink: 0; border-radius: 7px; object-fit: cover; }
.so-far-ph { display: grid; place-items: center; background: var(--surface); color: var(--muted); font-size: 1.4rem; }
.so-far-n { margin: 0; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.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: 0.88rem; color: var(--muted); }
.so-far-choice strong { color: var(--parch); }
.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); }
}
/* /storybook.html */
body.storybook-page .sb-wrap { max-width: 900px; }
body.storybook-page .sb-tip { font-size: 0.85rem; margin: 0 0 0.8rem; }
body.storybook-page header.top .row button { display: inline-flex; align-items: center; gap: 0.4rem; }
@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 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;
  border-radius: 999px; border: 2px solid #C9B383; background: var(--parch); color: #241a08;
  font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; text-align: start;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.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(--accent); outline-offset: 3px; }
.pause-card[data-state="heard"] { background: #DDE7C7; border-color: #9DB27A; font-size: 1.05rem; }
.pause-card[data-state="waiting"] { background: color-mix(in srgb, var(--parch) 80%, var(--muted)); font-size: 1rem; }
/* 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: 14px; border: 2px solid var(--parch); background: var(--surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.pause-alert-who { display: flex; align-items: center; gap: 0.55rem; margin: 0; font-size: 1.1rem; color: var(--parch); }
.pause-alert-who .ic { width: 1.4rem; height: 1.4rem; flex: none; }
.pause-alert-help { margin: 0.3rem 0 0.8rem; color: var(--muted); font-size: 0.92rem; }
.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(--accent) 22%, transparent); }

.breather {
  display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin: 0 0 1rem; padding: 1rem 1.2rem;
  border-radius: 14px; border: 1px solid color-mix(in srgb, var(--parch) 45%, var(--border));
  background: color-mix(in srgb, var(--parch) 12%, var(--surface)); color: var(--parch);
  font-family: var(--serif); font-size: 1.4rem; 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: 18px; }
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: 0.8rem; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.choice-names:empty { display: none; }
.choice-btn.picked .choice-names { color: var(--parch); }
.choice-btn:disabled:not(.decided) { opacity: 0.55; }
.choice-btn.decided, .screen-choice.decided { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 24%, var(--surface2)); color: var(--parch); opacity: 1; }
.vote-row { padding: 0.5rem 0.6rem 0.5rem 1rem; border-radius: 9px; }
.vote-row:hover { border-color: var(--border); }
.vote-row.leading { border-color: color-mix(in srgb, var(--accent) 70%, var(--border)); box-shadow: inset 3px 0 0 var(--accent); }
.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(--accent); }
.vote-tie { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--parch); }
.vote-result { display: flex; align-items: center; gap: 0.55rem; margin: 0.8rem 0 0; padding: 0.7rem 0.9rem; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 16%, var(--surface2));
  color: var(--parch); font-family: var(--serif); font-size: 1.1rem; }
.vote-result .ic { width: 1.3rem; height: 1.3rem; flex: none; color: var(--accent); }
.vote-result strong { color: var(--accent); }
.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(--border); margin-top: 1rem; padding-top: 0.9rem; }

.sm-scene { font-family: var(--serif); font-size: 1.1rem; color: var(--parch); margin: 0.2rem 0 0.8rem; overflow-wrap: anywhere; }
.sm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.sm-big { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 0.5rem; font-size: 1.02rem; line-height: 1.2; text-align: center; }
.sm-big .ic { width: 1.35rem; height: 1.35rem; flex: none; }
.sm-big[aria-expanded="true"] { filter: brightness(1.12); box-shadow: inset 0 0 0 2px var(--parch); }
.sm-sheet { margin-top: 0.8rem; padding: 0.8rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); }
.sm-sheet label { margin-top: 0; }
.sm-sheet select { width: 100%; min-height: 44px; }
.sm-sheet-label { font-size: 0.82rem; color: var(--muted); 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(--accent); color: #241a08; }
.sm-hint { font-size: 0.8rem; 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: 9px; border-left: 3px solid var(--accent); background: var(--surface2); font-size: 0.92rem; line-height: 1.5; }
.sm-tip .ic { width: 1.15rem; height: 1.15rem; flex: none; color: var(--accent); 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: 12px; 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: 1.6rem; font-weight: 700; letter-spacing: 0.2em; }
.qr-help { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.92rem; }
.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(--border); }
.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: left; }
.screen-join-head { font-family: var(--serif); color: var(--parch); 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(--muted); font-size: clamp(0.9rem, 1.2vw, 1.5rem); }
.screen-join-count { margin: 0.6rem 0 0; color: var(--accent); 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: rgba(10, 20, 15, 0.82); 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: 20px; text-align: center;
  background: var(--surface); border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.rm-die { position: relative; width: 160px; height: 160px; color: var(--accent); display: grid; place-items: center; }
.rm-shape { position: absolute; inset: 0; width: 100%; height: 100%; fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.rm-face { position: relative; font-family: var(--serif); font-weight: 700; font-size: 3.6rem; line-height: 1; color: var(--parch); font-variant-numeric: tabular-nums; }
.rm-sum { margin: 0.2rem 0 0; font-size: 1.25rem; color: var(--text); }
.rm-sum b { color: var(--accent); font-size: 1.2em; }
.rm-dn { display: block; font-size: 0.82rem; color: var(--muted); }
.rm-word { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0.2rem 0 0; font-family: var(--serif); font-weight: 700; font-size: 2.2rem; line-height: 1.15; color: var(--parch); overflow-wrap: anywhere; }
.rm-word .ic { width: 1em; height: 1em; flex: none; color: var(--accent); }
.roll-moment[data-result="fail"] .rm-word { color: var(--text); }
.roll-moment[data-result="fail"] .rm-word .ic { color: var(--muted); }
.rm-line { margin: 0; color: var(--muted); font-size: 1.05rem; }
.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: 28px; }
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; }
/* 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: 10px; background: var(--surface2); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }
.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(--accent); }
.check-result-row.fail .ic { color: var(--muted); }
.check-result-word { display: block; font-size: 1.05rem; font-weight: 600; color: var(--parch); }
.check-result-word b { color: var(--accent); }
.check-result-sum { display: block; font-size: 0.85rem; color: var(--muted); }
/* 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: 0.8rem; color: var(--muted); }
.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(--surface2); border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--accent); }
.badge-chip .ic { width: 1.3rem; height: 1.3rem; }
.trick-offer { margin-top: 0.8rem; padding: 0.75rem 0.85rem; border-radius: 12px; background: var(--surface2); border: 2px solid var(--accent); }
.trick-offer-head { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.6rem; font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--parch); }
.trick-offer-head .ic { width: 1.4em; height: 1.4em; flex: none; color: var(--accent); }
.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: left; background: var(--surface); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 12px; font-weight: 400; line-height: 1.35; }
.trick-pick b { color: var(--parch); font-size: 1rem; }
.trick-pick span { font-size: 0.88rem; }
.trick-pick:hover { border-color: var(--accent); filter: none; }
.trick-pick:focus-visible { outline: 2px solid var(--accent); 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: 0.85rem; }
.own-back a, .own-blank a { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; }
.own-sentence { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; line-height: 1.9; color: var(--parch); 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: 1.25rem; background: var(--surface2); color: var(--parch); border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: 12px; }
.own-slot:not(.filled) { border-style: dashed; justify-content: center; }
.own-slot.active { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.own-slot .ic { flex: none; width: 1.1em; height: 1.1em; color: var(--accent); }
.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(--accent); outline-offset: 2px; }
.own-gap { display: inline-block; width: 3.5rem; height: 0.2rem; margin-top: 0.8rem; border-radius: 2px; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.own-ask { margin: 0.9rem 0 0.45rem; font-weight: 600; color: var(--parch); }
.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(--surface); color: var(--text); border: 2px solid var(--border); border-radius: 14px; font-weight: 600; }
.own-tile .ic { width: 40px; height: 40px; color: var(--accent); }
.own-tile:hover { border-color: var(--accent); filter: none; }
.own-tile.on { border-color: var(--accent); background: var(--surface2); }
.own-word { font-size: 1.05rem; color: var(--parch); overflow-wrap: anywhere; }
.own-meaning { font-size: 0.8rem; font-weight: 400; color: var(--muted); }
.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(--parch); }
.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(--surface); color: var(--parch); border: 2px solid var(--border); border-radius: 12px; }
.own-symbol .ic { width: 26px; height: 26px; }
.own-symbol.on { border-color: var(--accent); background: var(--surface2); color: var(--accent); }
.own-symbol:hover { border-color: var(--accent); 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: 1.05rem; max-width: 100%; }
.own-blank { font-size: 0.85rem; 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(--serif); font-size: 0.95rem; color: var(--parch); }
@media (max-width: 480px) { .own-sentence { font-size: 1.35rem; } .own-slot { font-size: 1.1rem; 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: rgba(10, 20, 15, 0.9);
  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: 18px; border: 2px solid color-mix(in srgb, var(--parch) 55%, var(--border)); background: var(--surface);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); 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(--surface2); border: 3px solid var(--accent); 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(--accent) 18%, var(--surface2)); border: 3px solid var(--accent); color: var(--accent); }
.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(--accent); }
/* 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: 999px;
  border: 2px solid #C9B383; background: var(--parch); color: #241a08; font-family: var(--serif); font-size: 1.8rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.tour-pic-pause .ic { width: 2.6rem; height: 2.6rem; }
.tour-head { margin: 0; font-size: 1.6rem; line-height: 1.25; color: var(--parch); }
.tour-head:focus, .tour-head:focus-visible { outline: none; }
.tour-count { display: block; margin-bottom: 0.2rem; font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.tour-name { margin: 0.35rem 0 0; font-family: var(--serif); font-size: 1.2rem; color: var(--accent); }
.tour-line { margin: 0.8rem 0 0; font-size: 1.3rem; 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(--border); }
.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(--accent); }
.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: 1.05rem; }
.tour-actions .tour-play { padding-inline: 1.6rem; font-size: 1.2rem; }
.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: 2rem; }
  .tour-line { font-size: 1.45rem; }
  .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: 12px; background: var(--surface2); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); }
.item-ic { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 10px; background: var(--surface); color: var(--accent); border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border)); }
.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(--parch); font-size: 0.98rem; }
.item-text span { font-size: 0.85rem; color: var(--text); }
.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: 0.85rem; font-weight: 600; color: var(--muted); }
.item--used { opacity: 0.55; }
.item-card.item--used { border-style: dashed; }
.item--used .item-ic { color: var(--muted); border-color: var(--border); }
.tr-head { margin: 0.8rem 0 0.35rem; font-size: 0.8rem; color: var(--muted); }
.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: 0.85rem; font-weight: 600; background: var(--surface2); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 999px; }
.tr-chip .ic { color: var(--accent); flex: none; }
.tr-chip:hover { border-color: var(--accent); }
.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(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; }
.tr-icon.on { border: 2px solid var(--accent); color: var(--accent); background: var(--surface); }
.tr-icon:focus-visible, .tr-chip:focus-visible, .item-use:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tr-note { min-height: 1.2em; margin: 0.4rem 0 0; font-size: 0.82rem; }
.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: 0.88rem; }
.tr-held-row .ic { color: var(--accent); 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: 0.8rem; }

/* 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: 0.85rem; color: var(--muted); }
.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(--accent) 22%, transparent); border-color: var(--accent); }
.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(--accent); }
.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-right: 0.35rem; color: var(--muted); }
.spot-mark .ic { width: 1em; height: 1em; }
.spot-mark.on { color: var(--accent); }
.spotlight-line { display: flex; align-items: center; gap: 0.45rem; margin: 0.6rem 0 0; padding: 0.45rem 0.7rem; border-radius: 8px; border: 1px solid var(--border); font-size: 0.95rem; color: var(--text); }
.spotlight-line .ic { flex: none; color: var(--accent); }
.spotlight-line b { color: var(--accent); font-weight: 600; }
.spotlight-line.all { color: var(--muted); }
.spotlight-line.all .ic { color: var(--muted); }

/* 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(--surface2); border: 1px solid var(--border); 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: 8px; }
.sk-presence summary::-webkit-details-marker { display: none; }
.sk-presence summary:focus-visible { outline: 2px solid var(--accent); 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(--surface2); border: 1px solid var(--border); border-radius: 10px; font-size: 0.88rem; }
.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(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 0.45rem 0.6rem; }
.sk-card img { width: 56px; height: 56px; border-radius: 8px; flex: 0 0 auto; }
.sk-card-text { display: flex; flex-direction: column; gap: 0.1rem; flex: 1 1 auto; min-width: 0; font-size: 0.88rem; overflow-wrap: anywhere; }
.sk-trick { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--accent); }
.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: 1.1rem; overflow-wrap: anywhere; }
.mq-item-meta { margin: 0.15rem 0 0; font-size: 0.85rem; }
.mq-item-blurb { margin: 0.4rem 0 0; font-size: 0.9rem; 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: 9px; overflow: hidden; background: var(--surface2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 1.8rem; }
.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(--accent); font-size: 1.8rem; }
.adv-card.adv-write { text-decoration: none; }
.adv-card.adv-write:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mq-ai h2 { margin-top: 0; font-size: 1.25rem; }
.mq-steps { margin: 0.8rem 0 0; padding-left: 1.3rem; display: grid; gap: 1rem; }
.mq-steps p { margin: 0 0 0.5rem; }
.mq-steps label { font-size: 0.95rem; color: var(--text); margin-top: 0; }
.mq-ai-actions { margin-top: 0.6rem; }
#mq-ai-prompt { margin-top: 0.5rem; font-size: 0.8rem; }
.mq-hint { font-size: 0.8rem; margin: 0.3rem 0 0; }
.notice ul { margin: 0.3rem 0 0; padding-left: 1.2rem; }
.notice p { margin: 0; }
.notice a { color: var(--parch); }
#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: 0.74rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mq-counter.near { color: var(--accent); }
[aria-invalid="true"] { border-color: var(--danger); outline: 2px solid color-mix(in srgb, var(--danger) 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: 1.05rem; color: var(--accent); }
.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: 10px; border: 2px dashed var(--border); background: var(--surface2); color: var(--muted); font-weight: 600; }
.mq-art-pick:hover { border-color: var(--accent); transform: none; }
.mq-art-pick:focus-visible { outline: 3px solid var(--accent); 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: 0.85rem; }
.mq-art-empty .ic { font-size: 1.6rem; color: var(--accent); }
.mq-art-change { position: absolute; right: 0.4rem; bottom: 0.4rem; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(18, 36, 28, 0.88); color: var(--parch); }
.mq-choices { border: 0; margin: 0.7rem 0 0; padding: 0; min-width: 0; }
.mq-choices legend { font-size: 0.82rem; color: var(--muted); 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(--surface2); border-top: 1px solid var(--border); box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.25); }
.mq-savebar p { margin: 0; font-size: 0.88rem; }
.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(--border); border-radius: 14px; background: var(--surface); color: var(--text); }
.mq-art-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.mq-art-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.mq-art-head h2 { margin: 0; font-size: 1.2rem; }
.mq-art-head h2 .muted { font-family: var(--sans); font-size: 0.9rem; 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: 0.9rem; color: var(--accent); }
.mq-art-opt { display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; padding: 0.35rem; text-align: left; font-weight: 400; font-size: 0.75rem; line-height: 1.3; color: var(--text); background: var(--surface2); border: 2px solid var(--border); border-radius: 10px; }
.mq-art-opt:hover { transform: none; border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.mq-art-opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.mq-art-opt img { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; border-radius: 6px; }
.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; } }