/* Self-hosted fonts (D26, spec Theme and type): Bricolage Grotesque and
   Source Serif 4, latin and latin-ext, SIL Open Font License 1.1 (see
   public/fonts/OFL-*.txt). */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url(/fonts/bricolage-grotesque-latin-ext-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url(/fonts/bricolage-grotesque-latin-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/fonts/source-serif-4-latin-ext-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/fonts/source-serif-4-latin-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Room v3 fonts (docs/design/room-v3.md, section 1). Self-hosted Latin
   subsets, OFL file beside each. Nothing uses them until the .room-v3
   layout lands; the Tidemark tablet uses the same files. The Fallback
   faces are size-adjusted local fonts so the swap does not shift layout. */
@font-face {
  font-family: 'Gloock';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/gloock-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/bangers-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/barlow-condensed-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/barlow-condensed-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/barlow-condensed-latin-600-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/barlow-condensed-latin-700-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-display: swap;
  font-weight: 800;
  src: url(/fonts/barlow-condensed-latin-800-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Shippori Mincho B1';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/shippori-mincho-b1-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Shippori Mincho B1';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/shippori-mincho-b1-latin-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Gloock Fallback';
  src: local('Times New Roman');
  size-adjust: 113%;
  ascent-override: 85.9%;
  descent-override: 19.8%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Barlow Condensed Fallback';
  src: local('Arial');
  size-adjust: 74%;
  ascent-override: 135.1%;
  descent-override: 27%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Shippori Mincho B1 Fallback';
  src: local('Times New Roman');
  size-adjust: 119%;
  ascent-override: 97.5%;
  descent-override: 24.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Bangers Fallback';
  src: local('Arial');
  size-adjust: 77%;
  ascent-override: 114.7%;
  descent-override: 23.5%;
  line-gap-override: 0%;
}

/* Room v3 tokens (room-v3.md, section 1). Scoped to .room-v3, which no
   markup carries yet, so the current room is unchanged. */
.room-v3 {
  /* ground */
  --r3-ground:#0a0a0a; --r3-ground2:#111; --r3-inset:#070707; --r3-well:#121212;
  --r3-glow-a:130,50,38; --r3-glow-b:50,100,90;   /* rgb triplets, board bg radial gradients */
  /* lines + text */
  --r3-rule:#a7a7a7; --r3-rule-rgb:167,167,167;   /* used at .35 .45 .55 .6 alpha */
  --r3-muted:#a7a7a7; --r3-thumb:#737373; --r3-thumb2:#5f5f5f;
  --r3-ink:#eaeaea; --r3-ink-h1:#f0f0f0; --r3-body:#e0e0e0; --r3-prose:#d9d9d9; --r3-npc:#c6c6c6;
  --r3-dim:#9d9d9d; --r3-dim2:#9a9a9a; --r3-note:#a9a9a9; --r3-ph:#8a8a8a; /* >=15px only */
  /* accent (Hero Red) */
  --r3-accent:#d8432f; --r3-accent-rgb:216,67,47; --r3-accent-text:#ef6a52; --r3-accent-name:#f08a74;
  --r3-on-accent:#0a0a0a;
  --r3-panel:#e0563f; --r3-panel-hi:#ea6a55; --r3-on-panel:#0a0a0a; --r3-on-panel2:#1a0603;
  --r3-chip:#e0563f; --r3-on-chip:#0a0a0a; --r3-corner:#f0a898;
  --r3-send-bg:#e0563f; --r3-send-fg:#0a0a0a; --r3-send-hover:#ef6a52; --r3-send-sweep:#f3806b;
  --r3-you-plate:#b83422; --r3-crit-text:#eaeaea; --r3-crit-rule:#e0563f;
  --r3-plate:#ececec; --r3-on-plate:#0a0a0a; --r3-frame:#e3e3e3; --r3-bar:#ececec; --r3-barbg:#252525;
  /* threat (teal), NPC (grey), press (lavender) */
  --r3-threat:#5fb89a; --r3-threat-text:#6fd1b0; --r3-on-threat:#04130e; --r3-threat-sub:#1f5f4c;
  --r3-threat-plate:rgba(4,20,15,.92); --r3-threat-bg:radial-gradient(ellipse at 50% 40%,#1f3a31,#0b1411 75%);
  --r3-npc-plate:#3a3a3a; --r3-press:#aaa0ff;
  /* player colours, [bright on dark | deep on light]; you = accent */
  --r3-p1:#4fa8ff; --r3-p1d:#0b5cb0; --r3-p2:#9bd94a; --r3-p2d:#3f6b00; --r3-p3:#b57bff; --r3-p3d:#6a2fc4;
  /* composer / Tidemark-family colours (composer v2) */
  --r3-iv:#f0ece4; --r3-k:#050505; --r3-card:#171717; --r3-card-off:#0c0c0c; --r3-mv:#121212; --r3-mv-bd:#3a3a3a;
  /* type */
  --r3-display:"Gloock","Gloock Fallback",serif;                    /* 400 only */
  --r3-label:"Barlow Condensed","Barlow Condensed Fallback",sans-serif;       /* italic 600/700/800, uppercase, tracked */
  --r3-prose-font:"Shippori Mincho B1","Shippori Mincho B1 Fallback","Hiragino Mincho ProN",serif;  /* 400/500/700, italic faux for notes */
  --r3-pop:"Bangers","Bangers Fallback",sans-serif;                  /* composer + Tidemark only; Latin subset */
  --r3-prose-size:20px;                           /* 16..24 user setting, line-height 1.7 */
  /* geometry */
  --r3-skew:-8deg; --r3-skew-chip:-10deg; --r3-skew-round:-12deg; --r3-skew-tab:-14deg;
  --r3-skew-bar:-20deg; --r3-slant:30px;          /* cast card clip slant */
  --r3-radius:0;                                  /* everything is square; exceptions: dots 50%, .cf-mvp 12px */
  --r3-dim-bg:rgba(5,5,5,.62); --r3-dim-blur:blur(7px) saturate(.8);
  --r3-shadow-pop:0 30px 80px rgba(0,0,0,.8);
  --r3-ease:cubic-bezier(.16,1,.3,1);
}

/* Campfire client. Mobile first; dark warm theme by default with a light
   option; serif for story text; no images. GDD: Player client. */

/* Tokens from the client spec (Theme and type). Dark first; light when
   the Theme control sets data-theme="light". The spec names Bricolage
   Grotesque and Source Serif 4, self-hosted under public/fonts/ (D26); the
   woff2 files are not in the repository yet, so the system stacks stand in
   behind the same token names. When the files land, add the @font-face
   rules and put the family first in --ui and --story. */
:root {
  --ground: #0d1015;
  --surface: #141920;
  --raised: #1b212a;
  --line: #262e39;
  --ink: #ede7dd;
  --soft: #bcb5aa;
  --dim: #8a919c;
  --ember: #f08a4b;
  --ember-ink: #1a0d06;
  --cold: #84a6cc;
  --hp: #6fc28f;
  --foe: #e2725f;
  --mood: #9aa0e8;
  --t0: #6a8cb4;
  --t1: #8aa6c6;
  --t2: #aab4bf;
  --t3: #cdbfa8;
  --t4: #e9a66b;
  --t5: #f08a4b;
  --t6: #ffcf73;
  --scrim: rgba(5, 7, 10, 0.62);
  --ui: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --story: "Source Serif 4", Georgia, "Times New Roman", serif;
  /* Old names, pointed at the tokens above. */
  --bg: var(--ground);
  --bg-raised: var(--raised);
  --bg-sunken: var(--surface);
  --text: var(--ink);
  --muted: var(--soft);
  --accent: var(--ember);
  --accent-text: var(--ember-ink);
  --good: var(--hp);
  --warn: var(--t4);
  --bad: var(--foe);
  --health: var(--hp);
  --energy: var(--t4);
  --strain: var(--t2);
  --xp: var(--t6);
  --clock: var(--foe);
  --focus: var(--ember);
  --serif: var(--story);
  --sans: var(--ui);
  --radius: 10px;
  --column: 46rem;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --ground: #f2eee7;
  --surface: #faf8f4;
  --raised: #ffffff;
  --line: #ddd5c8;
  --ink: #1b1e23;
  --soft: #4a4f57;
  --dim: #6b717a;
  --ember: #c2541b;
  --ember-ink: #fff8f2;
  --cold: #3d6a98;
  --hp: #2e7d51;
  --foe: #b4402c;
  --mood: #4a4fb0;
  --t0: #3d6a98;
  --t1: #5a7ea6;
  --t2: #7d8792;
  --t3: #93805f;
  --t4: #c27a3a;
  --t5: #c2541b;
  --t6: #a8700a;
  --scrim: rgba(40, 34, 26, 0.45);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}
html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--sans);
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0 0 0.4em;
  line-height: 1.25;
}
h1 {
  font: 600 2rem/1.2 var(--serif);
}
h2 {
  font-size: 1.15rem;
}
h3 {
  font-size: 1.05rem;
}
h4,
h5 {
  font-size: 1rem;
}
p {
  margin: 0 0 0.6em;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
code,
.key {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  word-break: break-all;
}
.num {
  font-variant-numeric: tabular-nums;
}
.empty,
.muted,
.hint,
.note {
  color: var(--muted);
}
.hint,
.note {
  font-size: 0.9rem;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* --- Controls --- */

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  min-height: 40px;
  padding: 0.45em 0.95em;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  cursor: pointer;
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button.ghost,
button.secondary,
.button-row button + button,
button[data-action="cancel-edit"],
button[data-action="withdraw"],
button[data-action="dismiss-levelup"],
button[data-action="dismiss-error"],
button[data-action="drop-item"],
button[data-action="set-status"] {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
input,
select,
textarea {
  width: 100%;
  min-height: 40px;
  padding: 0.45em 0.6em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-sunken);
}
textarea {
  min-height: 7em;
  resize: vertical;
  font-family: var(--serif);
  font-size: 1.05rem;
}
label {
  display: block;
  margin: 0.6em 0 0.2em;
  color: var(--muted);
  font-size: 0.9rem;
}
form .actions,
.button-row,
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
  margin-top: 0.6em;
}
.count {
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
[role="alert"],
.error {
  color: var(--bad);
}
.error ul,
[role="alert"] ul {
  padding-left: 1.2em;
  list-style: disc;
}

/* --- Folds --- */

details.fold {
  margin: 0.5em 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
details.fold > summary {
  padding: 0.5em 0.75em;
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
}
details.fold[open] > summary {
  border-bottom: 1px solid var(--line);
}
details.fold > :not(summary) {
  margin: 0.6em 0.75em;
}

/* --- Bars and chips --- */

.bar {
  margin: 0.35em 0;
}
.bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--muted);
}
.bar-track {
  height: 10px;
  border-radius: 5px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  overflow: hidden;
}
.bar-small .bar-track {
  height: 6px;
}
.bar-fill {
  height: 100%;
  background: var(--accent);
  transform-origin: left center;
}
.bar-health .bar-fill {
  background: var(--health);
}
.bar-energy .bar-fill {
  background: var(--energy);
}
.bar-strain .bar-fill {
  background: var(--strain);
}
.bar-xp .bar-fill {
  background: var(--xp);
}
.bar-clock .bar-fill {
  background: var(--clock);
}
.chip {
  display: inline-block;
  margin: 0 0.25em 0.25em 0;
  padding: 0.1em 0.6em;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  background: var(--bg-sunken);
}
.chip-condition {
  border-color: var(--warn);
}
.chip-created {
  border-color: var(--accent);
  color: var(--accent);
}
.chip-failed {
  border-color: var(--bad);
}
.chip-complete {
  border-color: var(--good);
}


.noscript {
  padding: 16px;
}

/* --- Join and creation --- */

.screen {
  padding: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.attr-grid,
.attributes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.35em 1em;
}

/* --- Room layout --- */

.scene-name {
  font: 600 1.25rem var(--serif);
  margin: 0;
}
.scene-meta {
  margin: 0.15em 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.scene-bit + .scene-bit::before {
  content: " · ";
}
.room-title {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}
.conn-badge {
  display: inline-block;
  margin-top: 0.3em;
  padding: 0.1em 0.6em;
  border-radius: 999px;
  background: var(--warn);
  color: var(--bg);
  font-size: 0.8rem;
  font-weight: 700;
}
.notice {
  margin: 0.75em 16px;
  padding: 0.75em;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.ready-names {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em 0.8em;
  color: var(--good);
  font-size: 0.85rem;
}
.ready-names li::before {
  content: "✓ ";
}

/* --- Story feed --- */
/* The scroller spans the window, so its bar sits at the window's edge; the
   text sits in one 46rem column inside it. */

.feed {
  max-width: var(--column);
  margin: 0 auto;
}
.scene-group {
  padding: 18px 0 4px;
}
.scene-heading {
  display: block;
}
.scene-kicker {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.scene-title {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 750;
  font-stretch: 85%;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.scene-break {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 22px;
}
.scene-break i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--line);
}
.story-text {
  font: 15px/1.65 var(--story);
}
.story-text p {
  margin: 0 0 0.85em;
}
.story-text strong {
  font-weight: 650;
}
.aside {
  margin: 4px 0 0;
  font-family: var(--story);
  font-size: 14.5px;
  font-style: italic;
  color: var(--soft);
}
.aside::before {
  content: "— ";
  color: var(--dim);
}
.aside p {
  margin: 0;
}
.aside > p:first-child {
  display: inline;
}
.aside > p + p {
  margin-top: 0.4em;
}
.system {
  margin: 10px 0 0;
  font-size: 12.5px;
  text-align: center;
  color: var(--dim);
}
@media (min-width: 900px) {
  .scene-title {
    font-size: 21px;
  }
  .story-text {
    font-size: 16px;
  }
}

/* --- Reveal --- */

.reveal {
  margin: 14px 0 6px;
  padding: 0 12px 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.reveal details.fold {
  margin: 0;
  border: 0;
  background: none;
}
.reveal details.fold > summary,
.reveal details.fold[open] > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  list-style: none;
}
.reveal details.fold > summary::-webkit-details-marker {
  display: none;
}
.reveal details.fold > :not(summary) {
  margin: 0;
}
.reveal summary h3 {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soft);
}
.reveal-toggle {
  padding: 0 4px;
  color: var(--ember);
  font-size: 14px;
  font-weight: 600;
}
.reveal details[open] .when-closed,
.reveal details:not([open]) .when-open {
  display: none;
}
.reveal details[open] ~ .reveal-rows {
  display: none;
}

/* Folded: a row per input and Defense roll, name over skill, tier word, ladder. */
.reveal-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.reveal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 64px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}
.row-who {
  display: grid;
  min-width: 0;
}
.row-who b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
}
.row-skill {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--dim);
}
.row-tier {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
}
.reveal-row .ladder {
  gap: 2px;
}
.reveal-row .ladder span {
  height: 4px;
}
.reveal-row .ladder span.on {
  box-shadow: none;
}

/* Unfolded: a turn per input and Defense roll. */
.turn {
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--line);
}
.turns > .turn:last-child,
.threat-move > .turn:last-child {
  border-bottom: 0;
}
.turn-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}
.reveal-name {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.turn-top .rul {
  margin: 0;
  font-size: 12.5px;
  color: var(--dim);
}
.threat-move > .threat-name {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cold);
}
.threat-move > .turn {
  padding-top: 4px;
}
.said {
  margin: 4px 0 8px;
  font-family: var(--story);
  font-size: 14px;
  font-style: italic;
  color: var(--soft);
}
.said p {
  margin: 0;
}
.reveal-result {
  margin: 2px 0 8px;
}
.tier {
  display: inline-block;
  font-size: 18px;
  font-weight: 760;
  font-stretch: 82%;
  line-height: 1;
  letter-spacing: -0.01em;
}
.tier-critical-failure { color: var(--t0); }
.tier-failure { color: var(--t1); }
.tier-mixed-results { color: var(--t2); }
.tier-basic-success { color: var(--t3); }
.tier-success { color: var(--t4); }
.tier-great-success { color: var(--t5); }
.tier-critical-success { color: var(--t6); }
.tier-automatic { color: var(--dim); }
.ladder {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  color: var(--dim);
}
.ladder span {
  height: 6px;
  border-radius: 3px;
  background: var(--line);
}
.ladder span.on {
  background: currentColor;
  box-shadow: 0 0 0 2px var(--ground), 0 0 0 3px currentColor;
}
.ladder-labels {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin: 5px 0 4px;
  font-size: 11px;
  color: var(--dim);
  text-align: center;
}
.ladder-labels .on {
  color: var(--ink);
  font-weight: 600;
}
.turn > :is(.stakes, .override, .defense-note, .math, .changes, details.fold) {
  margin: 6px 0 0;
}
.stakes,
.override,
.defense-note,
.math {
  font-size: 13px;
  color: var(--soft);
}
.stakes p {
  display: inline;
  margin: 0;
}
.stakes b {
  color: var(--dim);
  font-weight: 600;
}
.override {
  font-style: italic;
}
.math .die {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 22px;
  margin-right: 2px;
  padding: 0 6px;
  border: 1.5px solid var(--soft);
  border-radius: 6px;
  font-weight: 700;
  color: var(--ink);
}
.math .eq {
  font-weight: 700;
  color: var(--ink);
}
.changes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
}
.changes li {
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--raised);
  color: var(--soft);
}
.changes li.hurt {
  color: var(--cold);
}
.changes li.gain {
  color: var(--ember);
}
.reveal .turn details.fold > summary {
  min-height: 32px;
  color: var(--dim);
  font-size: 12.5px;
}
.reveal .turn details.fold > :not(summary) {
  margin: 4px 0;
}
.reveal .roll-detail {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 1em;
  font-size: 13px;
}
.roll-detail dt {
  color: var(--dim);
}
.roll-detail dd {
  margin: 0;
}
.reveal-changes {
  padding: 10px 0 12px;
  border-top: 1px solid var(--line);
}
.reveal-changes h4 {
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.reveal-changes h5 {
  margin: 6px 0 4px;
  font-size: 13.5px;
  font-weight: 600;
}
.level-ups {
  margin: 0;
}
.level-up {
  padding: 6px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--hp);
}

/* --- Composer and level-up card --- */

.locked {
  color: var(--muted);
}
optgroup {
  font-style: normal;
}

/* --- Wide screens: two columns, panels always shown --- */

@media (prefers-reduced-motion: no-preference) {
  .bar-fill {
    transition: transform 0.4s ease;
  }
}

/* --- Classes from the screen views --- */

.attr-bonus,
.bonus,
.ability-meta,
.cooldown-left,
.member-meta .pronouns,
.sheet-id .pronouns,
.concept {
  color: var(--muted);
}
.ability-meta {
  font-size: 0.85rem;
  margin: 0.15em 0;
}
.field {
  display: block;
  margin-bottom: 0.75em;
}
.field select,
.field input,
.field textarea {
  margin-top: 0.25em;
}
.ready {
  color: var(--good);
}
.technique-form {
  margin: 0.5em 0;
}
.coin {
  font-size: 1.1rem;
  font-weight: 700;
}
.title {
  margin-top: 0.5em;
}

/* --- Composer: write line, open box, held card, ability button --- */

.composer {
  display: grid;
  gap: 8px;
}
.composer-error {
  padding: 8px 12px;
  border: 1px solid var(--foe);
  border-radius: 12px;
  font-size: 13px;
}
.composer-error p {
  margin: 0;
}
.composer-error button {
  min-height: 32px;
  margin-top: 4px;
}
.write-line {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0 8px 0 16px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  color: var(--dim);
  font: 14.5px var(--story);
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}
.wl-prompt {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wl-arrow {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ember);
  color: var(--ember-ink);
}
.write-line:focus-visible,
.compose-close:focus-visible,
.ab-row:focus-visible,
.ability-tray > summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The open box: the words first, then the ability button and Send. */
.composer-form {
  position: relative;
  display: grid;
  gap: 0;
  padding: 14px 14px 10px 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 -12px 40px -24px rgba(0, 0, 0, 0.6);
}
.composer-form:focus-within {
  border-color: color-mix(in srgb, var(--ember) 45%, var(--line));
}
.composer-form textarea {
  width: 100%;
  min-height: 48px;
  max-height: 38vh;
  field-sizing: content;
  resize: none;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0 40px 0 0;
  font: 15px/1.6 var(--story);
  color: var(--ink);
  outline: none;
}
.composer-form textarea::placeholder {
  color: var(--dim);
}
.compose-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--dim);
  cursor: pointer;
}
@media (hover: hover) {
  .compose-close:hover {
    background: var(--raised);
    color: var(--ink);
  }
}
.ab-tag {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--soft);
}
.downed-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--soft);
}
.compose-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-top: 10px;
}
.compose-tools .actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 0 auto;
}
.count {
  font-size: 12px;
  color: var(--dim);
}
.count.warn {
  color: var(--ember);
}
.compose-tools .count {
  margin-left: auto;
}
.compose-tools .count[hidden] {
  display: none;
}
.compose-tools .count:not([hidden]) + .actions {
  margin-left: 0;
}
.compose-tools .actions button[type="submit"] {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  min-width: 40px;
  min-height: 0;
  padding: 0 11px;
  border: 0;
  border-radius: 20px;
  background: var(--ember);
  color: var(--ember-ink);
  font-size: 13.5px;
  font-weight: 650;
}
.compose-tools .actions button[type="submit"]:disabled {
  opacity: 0.6;
}
.compose-tools .actions button[data-action="cancel-edit"] {
  min-height: 40px;
  border: 0;
  background: none;
  color: var(--dim);
}

/* The held input: a label, the text in two lines, then the actions. */
.composer-held {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.composer-held .held-label {
  margin: 0;
  font-size: 12.5px;
  color: var(--dim);
}
.composer-held .input-text {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: 14px/1.4 var(--story);
  color: var(--soft);
}
.composer-held .declared {
  margin: 0;
  font-size: 12.5px;
  color: var(--dim);
}
.composer-held .held-none {
  display: none;
}
.composer-held .actions {
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
}
.composer-held .actions button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.composer-held .actions button[data-action="withdraw"] {
  border-color: transparent;
  color: var(--dim);
}
/* The party's submitted inputs, and the director's sign while the round is locked. */
.round-inputs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  max-height: 34vh;
  overflow-y: auto;
}
.round-input {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.round-input.mine {
  border-color: var(--ember);
}
.round-input p {
  margin: 0;
}
.ri-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 12.5px;
  color: var(--dim);
}
.ri-name {
  font-weight: 600;
  color: var(--soft);
}
.ri-text {
  margin-top: 2px;
  font-size: 14px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
/* Live typing: another player's unsent text, dimmer than a sent input, until it is sent. */
.round-input.is-typing {
  border-style: dashed;
}
.round-input.is-typing .ri-text {
  color: var(--dim);
}
.ri-typing {
  font-style: italic;
  font-size: 12px;
  color: var(--dim);
}
.director-at-work {
  margin: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  color: var(--dim);
  font: 14.5px var(--story);
}
.director-at-work .dots {
  display: inline-flex;
  gap: 3px;
}
.director-at-work .dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}
@media (prefers-reduced-motion: no-preference) {
  .director-at-work .dots i {
    animation: director-dot 1.4s ease-in-out infinite;
  }
  .director-at-work .dots i:nth-child(2) {
    animation-delay: 0.2s;
  }
  .director-at-work .dots i:nth-child(3) {
    animation-delay: 0.4s;
  }
}
@keyframes director-dot {
  0%,
  80%,
  100% {
    opacity: 0.25;
  }
  40% {
    opacity: 1;
  }
}

/* The ability button: a star, its name, five energy pips; Remove joins it. */
.ability-control {
  display: flex;
  align-items: center;
  min-width: 0;
}
.ability-tray {
  position: relative;
  min-width: 0;
}
.ability-tray > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  height: 38px;
  padding: 0 12px 0 10px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: var(--raised);
  color: var(--soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ability-tray > summary::-webkit-details-marker {
  display: none;
}
@media (hover: hover) {
  .ability-tray > summary:hover {
    border-color: var(--soft);
  }
}
.ability-tray[open] > summary {
  border-color: var(--ember);
}
.ab-star {
  flex: none;
  width: 15px;
  height: 15px;
}
.has-chosen .ab-star {
  color: var(--ember);
}
.ab-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ab-remove {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 38px;
  min-height: 0;
  margin-left: -10px;
  padding: 0 12px 0 10px;
  border: 1px solid color-mix(in srgb, var(--ember) 55%, var(--line));
  border-left-color: var(--line);
  border-radius: 0 19px 19px 0;
  background: var(--raised);
  color: var(--soft);
  font-size: 12.5px;
  font-weight: 600;
}
.ab-remove::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (hover: hover) {
  .ab-remove:hover {
    background: var(--surface);
    color: var(--ink);
  }
}
.has-chosen > .ability-tray > summary {
  border-color: color-mix(in srgb, var(--ember) 55%, var(--line));
  border-right-width: 0;
  border-radius: 19px 0 0 19px;
  color: var(--ink);
}
.composer .pips {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
}
.composer .pips i {
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 50%;
  background: var(--line);
}
.composer .pips i.f {
  background: var(--ember);
}
.composer .pips i.r {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--ember);
}
@media (max-width: 480px) {
  .has-chosen .ability-tray > summary .pips {
    display: none;
  }
}

/* The tray: a bottom sheet on phones, a floating panel from 900 px. */
.tray-panel {
  position: fixed;
  inset: 0;
  z-index: 40;
}
.tray-scrim {
  position: absolute;
  inset: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.5);
}
.tray-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: 78dvh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: var(--surface);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
  animation: sheet-in 0.22s ease-out;
}
@keyframes sheet-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tray-sheet {
    animation: none;
  }
}
.tray-grab {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 36px;
  height: 4px;
  margin-left: -18px;
  border-radius: 2px;
  background: var(--line);
}
.tray-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 8px 4px 16px;
}
.tray-head h3 {
  flex: 1;
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
}
.tray-head button {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ember);
  font-size: 13.5px;
  font-weight: 650;
}
@media (hover: hover) {
  .tray-head button:hover {
    background: var(--surface);
  }
}
.tray-find {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 10px 16px;
  border-bottom: 1px solid var(--line);
}
.tray-search {
  flex: 1;
  min-width: 0;
  width: auto;
  min-height: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}
.tray-search:focus {
  outline: none;
  border-color: var(--ember);
}
.tray-energy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin: 0;
  color: var(--dim);
  font-size: 11.5px;
}
.tray-results {
  flex: 1;
  min-height: 0;
  padding: 4px 10px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 900px) {
  .tray-panel {
    position: absolute;
    inset: auto;
    bottom: calc(100% + 20px);
    left: 0;
    width: 440px;
  }
  .tray-scrim {
    display: none;
  }
  .tray-sheet {
    position: static;
    max-height: none;
    padding-bottom: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 50px -10px rgba(0, 0, 0, 0.6);
    animation: none;
  }
  .tray-grab {
    display: none;
  }
  .tray-head {
    padding: 6px 6px 0 12px;
  }
  .tray-head h3 {
    color: var(--soft);
    font-size: 13px;
  }
  .tray-find {
    padding: 8px 8px 8px 10px;
  }
  .tray-results {
    max-height: min(34vh, 300px);
    padding: 4px 6px 8px;
  }
}
.tray-results h4 {
  display: flex;
  justify-content: space-between;
  margin: 10px 8px 4px;
  color: var(--dim);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ab-ready {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.ab-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) {
  .ab-row:hover:not(:disabled) {
    background: var(--surface);
  }
}
.ab-row[aria-pressed="true"] {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--ember);
}
.ab-row:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ab-main {
  flex: 1;
  min-width: 0;
  display: grid;
}
.ab-name {
  font-size: 14px;
  font-weight: 600;
}
.ab-meta {
  color: var(--dim);
  font-size: 12px;
}
.ab-side {
  display: grid;
  justify-items: end;
  gap: 3px;
  flex: none;
}
.ab-state {
  color: var(--dim);
  font-size: 11.5px;
}
.ab-row[aria-pressed="true"] .ab-state {
  color: var(--ember);
  font-weight: 600;
}
.ab-cost {
  display: inline-flex;
  gap: 3px;
  color: var(--soft);
  font-size: 11.5px;
  font-weight: 600;
}
.ab-cost i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ember);
}
.ab-none .ab-name {
  color: var(--soft);
}
.ab-empty {
  margin: 14px 8px;
  color: var(--dim);
  font-size: 13px;
}
.tag-created {
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--dim);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

/* Speaker blocks: a framed portrait beside the name, the delivery note, the line. */
.line {
  --who: var(--soft);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 1em;
}
.line p {
  margin: 0;
}
.who-0 { --who: #f2a65e; }
.who-1 { --who: #e07a7a; }
.who-2 { --who: #9aa0e8; }
.who-3 { --who: #84a6cc; }
.who-4 { --who: #8fbf7a; }
.who-5 { --who: #b483c9; }
.who-6 { --who: #5fb8b0; }
.who-7 { --who: #e3b85b; }
:root[data-theme="light"] .who-0 { --who: #b4561a; }
:root[data-theme="light"] .who-1 { --who: #b23a3a; }
:root[data-theme="light"] .who-2 { --who: #4a4fb0; }
:root[data-theme="light"] .who-3 { --who: #33618f; }
:root[data-theme="light"] .who-4 { --who: #3f7a2c; }
:root[data-theme="light"] .who-5 { --who: #7d4a94; }
:root[data-theme="light"] .who-6 { --who: #1f7a72; }
:root[data-theme="light"] .who-7 { --who: #946b00; }
.line.line-unknown,
:root[data-theme="light"] .line.line-unknown {
  --who: var(--soft);
}
.ddisc {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  border: 1.5px solid var(--who);
  border-radius: 10px;
  background: var(--surface);
  color: var(--who);
  font: 700 12px var(--ui);
}
.line-npc .ddisc,
.line-threat .ddisc,
.line-unknown .ddisc {
  border-style: dashed;
}
.dbody {
  min-width: 0;
}
.speaker {
  margin: 0 0 1px;
  font: 13px/1.4 var(--ui);
}
.speaker b {
  color: var(--who);
  font-weight: 650;
}
.speaker .note {
  font-family: var(--story);
  font-size: 14px;
  font-style: italic;
  color: var(--dim);
}
.speaker .note::before {
  content: " · ";
  font-style: normal;
}
.said-line {
  overflow-wrap: anywhere;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.text-btn {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--ember);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.listen-offer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px 4px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  font-size: 14px;
}
.listen-offer > span {
  margin-right: auto;
}
.listen-offer button {
  min-height: 44px;
}

/* Panel heads for Party and Quests: the title, its count, and what sits at the right. */
.panel-head {
  display: flex;
  align-items: baseline;
  padding-right: 44px;
  margin-bottom: 4px;
}
.panel-head h2 {
  margin: 0;
}
.panel-count {
  margin-left: 6px;
  color: var(--dim);
  font-size: 12.5px;
  font-weight: 500;
}
.panel-hint {
  margin: 0;
  color: var(--dim);
  font-size: 12px;
}

/* Party: tall portrait columns, four across, two on a phone. */
.party-head {
  align-items: center;
  margin-bottom: 10px;
}
.party-head h2 {
  align-self: baseline;
}
.party-head .panel-count {
  align-self: baseline;
}
.party-nav {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.party-page {
  display: grid;
  place-items: center;
  width: 36px;
  min-height: 0;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--raised);
  color: var(--ink);
}
.party-page:disabled {
  opacity: 0.3;
  cursor: default;
}
.party-n-1 .party-nav,
.party-n-2 .party-nav,
.party-n-3 .party-nav,
.party-n-4 .party-nav {
  display: none;
}
.party .panel-hint {
  margin: -4px 0 10px;
}
.party-cols {
  --gap: 12px;
  --show: 4;
  display: flex;
  gap: var(--gap);
  margin: 0;
  padding: 0 0 2px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.party-cols::-webkit-scrollbar {
  display: none;
}
.pcol {
  flex: 0 0 calc((100% - (var(--show) - 1) * var(--gap)) / var(--show));
  scroll-snap-align: start;
}
.pcol-face {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  aspect-ratio: 9 / 16;
  max-height: 66dvh;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--raised);
  color: #f3eee6;
  font: inherit;
  text-align: left;
  isolation: isolate;
  container-type: inline-size;
}
button.pcol-face {
  cursor: pointer;
  transition: transform 0.15s ease;
}
@media (hover: hover) {
  button.pcol-face:hover {
    transform: translateY(-2px);
  }
}
button.pcol-face:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  button.pcol-face {
    transition: none;
  }
  @media (hover: hover) {
    button.pcol-face:hover {
      transform: none;
    }
  }
}
.pcol.ready .pcol-face {
  box-shadow: inset 0 0 0 2px var(--ember);
}
.pcol-art {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.pcol-art .init {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--soft);
  font-size: 64px;
  font-weight: 800;
}
.pcol-face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, transparent 62%, rgba(8, 10, 14, 0.5) 76%, rgba(8, 10, 14, 0.9) 100%);
}
.pcol-check {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ember);
  color: var(--ember-ink);
}
.pcol-cond {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(13, 16, 21, 0.7);
  color: #9fbbe0;
  font-size: 11px;
  font-weight: 650;
}
.pcol.ready .pcol-cond {
  top: 40px;
}
.pcol-name {
  position: absolute;
  top: 12px;
  right: 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  writing-mode: vertical-rl;
  color: #f3eee6;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
.pcol-name::before {
  content: "";
  position: absolute;
  top: -12px;
  bottom: -8px;
  left: -6px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(240, 138, 75, 0.7), transparent);
}
.pcol-name b {
  font-size: 30px;
  font-weight: 760;
  font-stretch: 78%;
  letter-spacing: 0.02em;
  line-height: 1;
}
.pcol-title {
  color: rgba(243, 238, 230, 0.75);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.pcol-stats {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  padding: 0 14px 14px;
}
.pcol-level {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
  color: rgba(243, 238, 230, 0.7);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pcol-level b {
  color: #f3eee6;
  font-size: 34px;
  font-stretch: 90%;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 0.9;
  text-transform: none;
}
.pcol-hp {
  display: grid;
  grid-template-columns: 22px auto 1fr;
  column-gap: 6px;
  align-items: baseline;
  color: #e9a66b;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.06em;
}
.pcol-hp b {
  color: #f3eee6;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: normal;
}
.pcol-max {
  color: rgba(243, 238, 230, 0.6);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: normal;
}
@container (max-width: 190px) {
  .pcol-max {
    display: none;
  }
}
.pcol-bar {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
.pcol-bar span {
  display: block;
  height: 100%;
  background: var(--hp);
}
@media (max-width: 600px) {
  .party-cols {
    --gap: 8px;
    --show: 2;
  }
  .pcol-face {
    aspect-ratio: 3 / 5;
    border-radius: 12px;
  }
  .pcol-check {
    top: 6px;
    left: 6px;
    width: 18px;
    height: 18px;
  }
  .pcol-cond {
    top: 8px;
    left: 8px;
    font-size: 9.5px;
  }
  .pcol.ready .pcol-cond {
    top: 30px;
  }
  .pcol-name {
    top: 8px;
    right: 6px;
  }
  .pcol-name b {
    font-size: 19px;
  }
  .pcol-title {
    font-size: 9.5px;
  }
  .pcol-stats {
    padding: 0 8px 8px;
  }
  .pcol-level {
    font-size: 9px;
  }
  .pcol-level b {
    font-size: 24px;
  }
  .pcol-hp {
    grid-template-columns: 18px auto 1fr;
    font-size: 9px;
  }
  .pcol-hp b {
    font-size: 13px;
  }
}

/* A member's sheet: a top row with the way back and a Read only tag, then the sheet itself. */
.member-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -6px 44px 14px 0;
}
.member-top .text-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 10px 0 4px;
  border-radius: 10px;
  color: var(--soft);
  font-size: 13.5px;
  font-weight: 650;
}
@media (hover: hover) {
  .member-top .text-btn:hover {
    background: var(--raised);
    color: var(--ink);
  }
}
.member-top .chip-read-only {
  margin: 0 0 0 auto;
  padding: 3px 8px;
  border-radius: 99px;
  background: none;
  color: var(--dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.party-member .sh-face {
  cursor: default;
}

/* Quests: a job board. Weight first, then the job, then the terms. */
.quests .panel-hint {
  margin: 2px 0 0;
}
.quests .quest-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.quests .quest {
  display: grid;
  gap: 8px;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--line);
}
.quests .quest:last-child {
  border-bottom: 0;
}
.quest-weight {
  display: flex;
  align-items: center;
  gap: 7px;
}
.qweight {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.qweight i {
  width: 4px;
  border-radius: 1px;
  background: var(--line);
}
.qweight i:nth-child(1) {
  height: 5px;
}
.qweight i:nth-child(2) {
  height: 8px;
}
.qweight i:nth-child(3) {
  height: 12px;
}
.qweight i.on {
  background: var(--t6);
}
.qsize {
  color: var(--soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.track {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: none;
  color: var(--soft);
  font-size: 12.5px;
  font-weight: 650;
}
@media (hover: hover) {
  .track:hover {
    border-color: var(--soft);
    color: var(--ink);
  }
}
.track.on {
  background: var(--ember);
  border-color: var(--ember);
  color: var(--ember-ink);
}
.quests .quest-title {
  margin: 0;
  font-size: 19px;
  font-weight: 750;
  font-stretch: 86%;
  line-height: 1.2;
  text-wrap: balance;
}
.quests .quest-goal {
  margin: 0;
  color: var(--soft);
  font: 14.5px/1.55 var(--story);
}
.quest-terms {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 6px 12px;
  margin: 4px 0 0;
  font-size: 13px;
}
.quest-terms dt {
  padding-top: 1px;
  color: var(--dim);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.quest-terms dd {
  margin: 0;
  min-width: 0;
}
.quest-risk {
  color: var(--foe);
}
.quest-pay b {
  color: var(--t6);
  font-weight: 650;
}
.quest-from {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.giver-pic {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--raised);
  border: 1px dashed var(--dim);
  color: var(--soft);
  font-size: 10.5px;
  font-weight: 750;
}
.quests details.fold {
  margin: 6px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.quests details.fold > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  color: var(--dim);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  list-style: none;
  text-transform: uppercase;
}
.quests details.fold > summary::-webkit-details-marker {
  display: none;
}
.quests details.fold > summary .count {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.quests details.fold > summary .fold-chev {
  margin-left: auto;
  transition: transform 0.15s;
}
.quests details.fold[open] > summary .fold-chev {
  transform: rotate(180deg);
}
.quests details.fold > :not(summary) {
  margin: 0;
}
.quest-done {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.quest-done .quest-title {
  color: var(--soft);
  font-size: 14px;
  font-weight: 650;
}
.quest-done .chip {
  align-self: center;
  margin: 0;
  padding: 2px 8px;
  border: 0;
  border-radius: 99px;
  background: none;
  font-size: 11px;
  font-weight: 700;
}
.quest-done .chip-complete {
  background: color-mix(in srgb, var(--hp) 14%, transparent);
  color: var(--hp);
}
.quest-done .chip-failed {
  background: color-mix(in srgb, var(--foe) 14%, transparent);
  color: var(--foe);
}
.quest-done .quest-meta {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--dim);
  font-size: 12px;
}

/* --- Room shell: floating header, feed, hearth, popup, room menu --- */

.screen-room {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: none;
  padding: 0;
  overflow: hidden;
  font: 15px/1.4 var(--ui);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.room-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  pointer-events: none;
}
.room-top > *,
.room-header > * {
  pointer-events: auto;
}

/* The header: one solid band over the top of the feed, the dock and the
   where line above the cast strip, in the story column's edges. */
.room-header {
  background: var(--ground);
  border-bottom: 1px solid var(--line);
  transition: transform 0.22s ease, opacity 0.22s ease;
  will-change: transform;
}
.room-header > [data-region] {
  max-width: calc(var(--column) + 32px);
  margin: 0 auto;
}
.room-header > [data-region="header"] {
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 4px;
}
.room-top > [data-region="notice"] {
  width: min(calc(var(--column) + 32px), 100%);
  margin: 0 auto;
  padding: 8px 16px 0;
}
.room-top.is-away .room-header {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .room-header {
    transition: none;
  }
}
.story-col {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.story-col .feed-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: calc(var(--top-h, 7.5rem) + 4px) 16px 28px;
  overscroll-behavior: contain;
}

/* The hearth: the foot of the room, the quest line over the composer. */
.hearth {
  flex: none;
  z-index: 5;
  display: grid;
  gap: 8px;
  padding: 8px max(16px, calc((100% - var(--column)) / 2)) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--ground);
  border-top: 1px solid var(--line);
  max-height: 70dvh;
  overflow-y: auto;
}
@media (min-width: 900px) {
  .hearth:has(.ability-tray[open]) {
    overflow: visible;
    z-index: 8;
  }
}
.listen-wrap:empty,
.questline-wrap:empty,
.composer-wrap:empty,
[data-region="levelup"]:empty {
  display: none;
}
.quest-line {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  min-height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--soft);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}
.quest-line::after {
  content: "";
  position: absolute;
  inset: -12px 0 -8px;
}
.ql-label {
  flex: none;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.ql-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dock-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dock {
  display: flex;
  align-items: stretch;
  height: 44px;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.dock-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--soft);
  font: 600 13px var(--ui);
  white-space: nowrap;
}
.dock-btn[aria-expanded="true"] {
  background: var(--raised);
  color: var(--ink);
}
@media (hover: hover) {
  .dock-btn:hover {
    background: var(--raised);
    color: var(--ink);
  }
}
.dock-btn + .dock-btn::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: var(--line);
}
@media (hover: hover) {
  .dock-btn:hover::before,
  .dock-btn:hover + .dock-btn::before {
    opacity: 0;
  }
}
.dock-icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dock-sheet {
  padding-left: 5px;
  color: var(--ink);
}
.dock-portrait {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--raised);
  font-size: 12px;
  font-weight: 700;
}
.dock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember) 25%, transparent);
}
.dock-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--raised);
  color: var(--soft);
  font-size: 11px;
  font-weight: 750;
}
.dock-foe {
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--foe);
}
.dock-count:has(.dock-foe) {
  padding: 0 6px 0 5px;
}
.menu-btn {
  flex: none;
  width: 44px;
  height: 44px;
  min-height: 0;
  margin-left: auto;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--soft);
}
.menu-btn[aria-expanded="true"] {
  background: var(--raised);
  color: var(--ink);
}
@media (hover: hover) {
  .menu-btn:hover {
    background: var(--raised);
    color: var(--ink);
  }
}

.menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: grid;
  min-width: 200px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--raised);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.menu-room {
  display: grid;
  gap: 1px;
  margin: 4px 12px 8px;
  font-size: 13px;
}
.menu-room span {
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.menu-item {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-weight: 400;
  text-align: left;
  overflow-wrap: anywhere;
}
@media (hover: hover) {
  .menu-item:hover:not(:disabled) {
    background: var(--surface);
  }
}
.menu-item small {
  display: block;
  padding-bottom: 8px;
  color: var(--dim);
  font-weight: 400;
}
.menu-item:has(small) {
  padding-top: 8px;
}
.menu-leave {
  margin-top: 4px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  color: var(--foe);
}
.where {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--dim);
  text-wrap: balance;
}
.where-loc {
  font-weight: 600;
  color: var(--soft);
}
.where-mood {
  font-family: var(--story);
  color: var(--soft);
}
.conn-badge {
  margin: 0 0 6px;
}
.popup-wrap {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
}
.scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}
.popup {
  position: relative;
  width: min(46rem, calc(100% - 32px));
  max-height: min(88dvh, 880px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.7);
  animation: pop-in 0.18s ease-out;
}
@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
}
@media (prefers-reduced-motion: reduce) {
  .popup {
    animation: none;
  }
}
.popup:focus {
  outline: none;
}
.popup-body {
  overflow-y: auto;
  padding: 26px 18px 30px;
  border-radius: inherit;
  overscroll-behavior: contain;
}
.popup-close {
  position: absolute;
  top: 10px;
  right: 8px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 38px;
  min-height: 0;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--soft);
}
@media (hover: hover) {
  .popup-close:hover {
    color: var(--ink);
  }
}
.popup-close:focus:not(:focus-visible) {
  outline: none;
}
.panel h2 {
  margin: 2px 0 10px;
  font: 750 20px var(--ui);
  font-stretch: 88%;
}
.panel-scene h2 {
  margin: 2px 0 0;
  padding-right: 44px;
}
.scene-line {
  margin: 2px 0 4px;
  padding-right: 44px;
  color: var(--dim);
  font-size: 13px;
}
.scene-line .where-loc {
  color: inherit;
  font-weight: 400;
}
.panel-scene .panel-head {
  align-items: baseline;
  gap: 8px;
  padding-right: 0;
  margin: 18px 0 8px;
}
.panel-scene .panel-head h3 {
  margin: 0;
  font: 650 11.5px var(--ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.panel-scene .panel-count {
  margin: 0;
  font-size: 11.5px;
}
.panel-scene .empty {
  margin: 0;
  color: var(--dim);
  font-size: 13px;
}
.panel-scene .threat-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.panel-scene .threat {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  column-gap: 10px;
  align-content: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--raised);
}
.panel-scene .threat.threat-full {
  opacity: 0.6;
}
.panel-scene .threat > * {
  grid-column: 2 / -1;
}
.panel-scene .threat-pic {
  grid-column: 1;
  grid-row: 1 / span 4;
  align-self: start;
}
.panel-scene .threat-name {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel-scene .threat-meta {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  color: var(--dim);
  font-size: 11.5px;
  white-space: nowrap;
}
.panel-scene .threat-active .threat-status {
  display: none;
}
.panel-scene .threat-clock {
  display: flex;
  gap: 2px;
  margin-top: 4px;
}
.panel-scene .threat-clock i {
  flex: 1;
  height: 5px;
  border-radius: 2px;
  background: var(--line);
}
.panel-scene .threat-clock i.f {
  background: var(--foe);
}
.panel-scene .threat-numbers {
  margin: 4px 0 0;
  color: var(--dim);
  font-size: 11.5px;
  text-transform: lowercase;
}
.panel-scene .threat-rules,
.panel-scene .last-move p {
  margin: 0;
  color: var(--soft);
  font-size: 13px;
}
.panel-scene .threat-rules {
  grid-column: 1 / -1;
  margin-top: 6px;
}
.panel-scene .last-move {
  grid-column: 1 / -1;
  margin-top: 4px;
}
.panel-scene .last-move p {
  font-family: var(--story);
  font-style: italic;
}
.panel-scene .last-move ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--dim);
  font-size: 12px;
}
.panel-scene .npc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.panel-scene .npc {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 0 10px;
  align-items: center;
  min-height: 50px;
  padding: 6px 2px;
  border-bottom: 1px solid var(--line);
}
.panel-scene .npc-name {
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel-scene .npc-attitude {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 650;
}
.panel-scene .npc-friendly .npc-attitude {
  background: color-mix(in srgb, var(--hp) 14%, transparent);
  color: var(--hp);
}
.panel-scene .npc-neutral .npc-attitude {
  background: var(--raised);
  color: var(--soft);
}
.panel-scene .npc-wary .npc-attitude {
  background: color-mix(in srgb, var(--t4) 14%, transparent);
  color: var(--t4);
}
.panel-scene .npc-hostile .npc-attitude {
  background: color-mix(in srgb, var(--foe) 16%, transparent);
  color: var(--foe);
}
.panel-scene .npc-roll {
  grid-column: 2 / -1;
  margin: 2px 0 6px;
  color: var(--soft);
  font-size: 13px;
}
@media (max-width: 720px) {
  .dock-btn:not(.dock-sheet) .dock-label {
    display: none;
  }
  .dock-btn {
    gap: 6px;
    padding: 0 10px;
  }
  .dock-sheet {
    padding-left: 4px;
  }
}

/* --- Cast strip --- */

.cast-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 16px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cast-row::-webkit-scrollbar {
  display: none;
}
.cast[data-fade~="r"] .cast-row {
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.cast[data-fade~="l"] .cast-row {
  mask-image: linear-gradient(to right, transparent, #000 24px);
}
.cast[data-fade="l r"] .cast-row {
  mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 40px), transparent);
}
.pc {
  flex: none;
  display: grid;
  gap: 5px;
  width: 60px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.pc .pic {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--raised);
}
.pc.npc .pic {
  border-style: dashed;
  border-color: var(--dim);
}
.pc .init {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 750 18px var(--ui);
  color: var(--soft);
}
.pc .bar {
  display: block;
  height: 4px;
  margin: 0;
  border-radius: 2px;
  overflow: hidden;
  background: var(--line);
}
.pc .bar.none {
  background: none;
}
.pc .bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
}
.pc .bar.hp i {
  background: var(--hp);
}
.pc .bar.foe i {
  background: var(--foe);
}
.pc .bar.mood i {
  background: var(--mood);
}
.pc .nm {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
@media (hover: hover) {
  .pc:hover .pic {
    border-color: var(--soft);
  }
}

/* Readiness: ready players are lit by the fire; a player still writing keeps
   full colour and shows only the typing dots. */
.pc.full .pic .slot-img {
  filter: grayscale(0.7) brightness(0.7);
}
.pc.away .pic .slot-img {
  filter: grayscale(1) brightness(0.45);
}
.pc.down .pic .slot-img {
  filter: grayscale(1) brightness(0.35);
}
.pc.ready .pic {
  border-color: var(--ember);
  box-shadow: 0 8px 18px -10px var(--ember), inset 0 -18px 18px -14px var(--ember);
}
.pc.player .pic::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(to top, rgba(240, 138, 75, 0.28), transparent 45%);
  opacity: 0;
}
.pc.ready .pic::after {
  opacity: 1;
}
.pc .seal {
  position: absolute;
  z-index: 2;
  top: 4px;
  right: 4px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ember);
  color: var(--ember-ink);
}
.pc .typing {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(13, 16, 21, 0.75);
}
.pc .typing i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c9c3b8;
}

@media (min-width: 900px) {
  .pc {
    width: 66px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .pc .slot-img,
  .pc .pic::after {
    transition: filter 0.4s ease, opacity 0.4s ease;
  }
  .pc .seal {
    animation: seal-pop 0.3s ease-out;
  }
  .pc .typing i {
    animation: typing-dot 1.2s ease-in-out infinite;
  }
  .pc .typing i:nth-child(2) {
    animation-delay: 0.15s;
  }
  .pc .typing i:nth-child(3) {
    animation-delay: 0.3s;
  }
}
@keyframes seal-pop {
  from {
    transform: scale(0);
  }
  70% {
    transform: scale(1.25);
  }
  to {
    transform: scale(1);
  }
}
@keyframes typing-dot {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: none;
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

/* --- The sheet: one column, a head, thin bars, six tabs --- */

.sheet {
  display: block;
}
.sh-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding-right: 40px;
}
.lu ~ .sh-head,
.sheet-read-only .sh-head {
  padding-right: 0;
}
.sh-face {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--raised);
}
.sh-face .init {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 750;
}
.sh-id h2 {
  margin: 0;
  font: 750 22px var(--ui);
  font-stretch: 88%;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.sh-meta {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--dim);
}
.sh-title {
  color: var(--t6);
  font-weight: 600;
}
.sh-lv {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--dim);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.sh-lv b {
  margin-left: 2px;
  color: var(--ink);
  font-size: 15px;
}
.sh-concept {
  margin: 12px 0 0;
  font: italic 14.5px var(--story);
  color: var(--soft);
}
.sh-bars {
  display: grid;
  gap: 9px;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
}
.sh-bar {
  display: grid;
  grid-template-columns: 58px 74px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
.sh-k {
  color: var(--dim);
  font-weight: 600;
}
.sh-v {
  font-size: 13.5px;
  font-weight: 700;
  text-align: right;
}
.sh-v small {
  color: var(--dim);
  font-size: 12px;
  font-weight: 500;
}
.sh-track {
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.sh-track i {
  display: block;
  height: 100%;
  border-radius: 3px;
}
.sh-bar-hp .sh-track i {
  background: var(--hp);
}
.sh-bar-strain .sh-track i {
  background: var(--t2);
}
.sh-bar-xp .sh-track i {
  background: var(--t6);
}
.sh-segs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}
.sh-segs .seg {
  background: var(--line);
}
.sh-segs .seg.on {
  background: var(--ember);
}
.sh-tag {
  margin-left: 6px;
  color: var(--dim);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sh-lockout {
  margin: 0;
  font-size: 12.5px;
  color: var(--foe);
}
.sh-conds {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--cold);
}
.sh-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: 18px;
  margin: 18px -18px 14px;
  padding: 0 56px 0 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  touch-action: pan-x;
  scrollbar-width: none;
}
.sh-tabs::-webkit-scrollbar {
  display: none;
}
.sh-tabs button {
  flex: none;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 0;
  background: none;
  color: var(--dim);
  font: 650 13.5px var(--ui);
}
.sh-tabs button[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--ember);
}
@media (max-width: 480px) {
  .sh-tabs {
    gap: 12px;
  }
  .sh-tabs button {
    font-size: 13px;
  }
}
.sh-attrs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  text-align: center;
}
.sh-attr {
  display: grid;
  padding: 6px 0;
  border-left: 1px solid var(--line);
}
.sh-attr:first-child {
  border-left: 0;
}
.sh-attr-k {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  color: var(--dim);
}
.sh-attr b {
  font-size: 22px;
  font-weight: 720;
}
.sh-sk-group h4,
.sh-ab h4,
.sh-h {
  display: flex;
  justify-content: space-between;
  margin: 18px 0 4px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.sh-ab h4 {
  margin-bottom: 2px;
}
.sh-h {
  margin: 22px 0 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.sh-sk-group h4 span,
.sh-ab h4 span,
.sh-h span {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.sh-skills,
.sh-inv {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sh-skills li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.sk-name {
  font-size: 14px;
}
.sk-name .sh-tag {
  margin-left: 6px;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: 1px;
}
.sk-lv {
  min-width: 22px;
  font-size: 16px;
  font-weight: 750;
  text-align: right;
}
.sk-xp {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--dim);
}
.sk-xp small {
  font-size: 11px;
}
.sk-xp .sh-track {
  flex: 1;
  height: 2px;
  border-radius: 2px;
}
.sk-xp .sh-track i {
  background: var(--soft);
  border-radius: 0;
}
details.sh-fold {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
details.sh-fold > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
details.sh-fold > summary::-webkit-details-marker {
  display: none;
}
details.sh-fold > summary small {
  color: var(--dim);
  font-size: 12px;
  font-weight: 500;
}
details.sh-fold > :not(summary) {
  margin: 0 0 10px;
}
details.sh-fold > p,
.a-desc {
  font-family: var(--story);
  font-size: 14px;
  color: var(--soft);
}
.sh-traits details.sh-fold > p {
  font: 13.5px var(--ui);
}
.sh-ab details.sh-fold > summary {
  min-height: 48px;
  font-size: 15px;
  font-weight: 400;
}
.sh-ab .a-sub {
  display: block;
  color: var(--dim);
  font-size: 12px;
}
.sh-ab .a-main {
  flex: 1;
  min-width: 0;
}
.sh-ab .a-name {
  font-size: 14px;
  font-weight: 650;
}
.sh-ab .a-side {
  display: grid;
  justify-items: end;
  gap: 3px;
}
.sh-ab .a-state {
  font-size: 11.5px;
  color: var(--dim);
}
.sh-ab .a-state.ready {
  color: var(--hp);
}
.sh-ab details.sh-fold > :not(summary) {
  margin: 0 0 12px;
}
.sh-ab-actions,
.sh-row-end {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sh-ab-actions {
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 13px;
}
.sh-dot {
  color: var(--soft);
}
.sh-row-end {
  justify-content: flex-end;
}
.sheet .link {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ember);
  font: 650 13px var(--ui);
}
.sh-ab-actions .link {
  padding: 6px 0;
  margin: -6px 0;
}
.sheet .link:disabled {
  color: var(--dim);
}
.sh-learn,
.sh-create {
  display: grid;
  gap: 6px;
  padding: 12px;
  margin: 8px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--raised);
}
.sh-create {
  gap: 10px;
}
.sh-create form {
  display: grid;
  gap: 10px;
}
.sh-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--dim);
}
.sh-learn .sh-note {
  margin: 0 0 4px;
}
.sh-create .note {
  margin: 0;
  font-size: 12.5px;
  color: var(--dim);
}
.sh-create .field {
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: 12.5px;
  color: var(--dim);
}
.sh-create input,
.sh-create select,
.sh-create textarea {
  min-height: 0;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
}
.sh-create textarea {
  font-family: var(--story);
  resize: vertical;
}
.sh-learn > button[data-action="sheet-close"],
.sh-row-end button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  color: var(--dim);
  font-size: 13px;
  font-weight: 600;
}
.sh-learn > button[data-action="sheet-close"] {
  justify-self: start;
}
.sh-row-end button[type="submit"] {
  min-width: 120px;
  border-color: var(--ember);
  background: var(--ember);
  color: var(--ember-ink);
}
.sh-row-end button[type="submit"]:disabled {
  opacity: 0.45;
}
.rungs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.rung {
  display: grid;
  width: 100%;
  min-height: 48px;
  padding: 6px 12px;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
@media (hover: hover) {
  .rung:hover:not(:disabled) {
    border-color: var(--ember);
  }
}
.rung small {
  color: var(--dim);
  font-size: 12.5px;
  font-weight: 400;
}
.cost-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--surface);
  justify-self: start;
}
.cost-opt {
  display: block;
  margin: 0;
}
.cost-opt input {
  position: absolute;
  opacity: 0;
}
.cost-opt span {
  display: grid;
  place-items: center;
  width: 40px;
  min-height: 32px;
  border-radius: 7px;
  color: var(--soft);
  font-weight: 650;
}
.cost-opt input:checked + span {
  background: var(--ember);
  color: var(--ember-ink);
}
.cost-opt input:focus-visible + span {
  outline: 2px solid var(--ember);
}
.pips {
  display: inline-flex;
  gap: 3px;
}
.pips i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
}
.pips.sm i {
  width: 7px;
  height: 7px;
}
.pips i.f {
  background: var(--ember);
}
.r-free {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--soft);
}
.sh-coin {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--raised);
}
.sh-coin small {
  color: var(--dim);
  font-size: 12px;
}
.sh-coin b {
  font-size: 24px;
  font-weight: 760;
}
.sh-inv li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  border-bottom: 1px solid var(--line);
}
.sh-inv .item-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.sh-inv .num {
  color: var(--dim);
  font-size: 13px;
}
.sh-inv .drop {
  min-height: 32px;
  margin-left: 0;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: var(--soft);
  font-size: 12.5px;
  font-weight: 600;
}
.sh-inv .drop-armed {
  color: var(--foe);
  border-color: var(--foe);
}
.sh-story h4 {
  margin: 20px 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.sh-story h4:first-child {
  margin-top: 4px;
}
.sh-prose {
  margin: 0;
  font: 15px/1.6 var(--story);
  color: var(--ink);
  white-space: pre-wrap;
}

/* The level-up notice: a quiet bar at the top of the sheet. */
.lu {
  margin: 0 48px 16px 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--t6) 40%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--t6) 7%, var(--surface));
}
.lu.banked {
  border-color: var(--line);
  background: none;
}
.lu-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: left;
  font-size: 13px;
  font-weight: 400;
  color: var(--soft);
}
.lu-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lu-text b {
  color: var(--t6);
  font-weight: 650;
}
.lu-sep {
  margin: 0 7px;
  color: var(--dim);
}
.lu-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t6);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--t6) 25%, transparent);
}
.lu.banked .lu-dot {
  background: var(--dim);
  box-shadow: none;
}
.lu-chev {
  flex: none;
  color: var(--dim);
  transition: transform 0.15s;
}
.lu-bar[aria-expanded="true"] .lu-chev {
  transform: rotate(180deg);
}
.lu-body {
  display: grid;
  gap: 6px;
  padding: 2px 12px 12px;
}
.lu-gains {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  font-size: 12.5px;
  color: var(--dim);
}
.lu-gains b {
  margin-left: 4px;
  color: var(--ink);
  font-weight: 650;
}
.lu-h {
  margin: 4px 0 2px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.lu-attrs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.lu-attrs button {
  min-height: 44px;
}
.lu-body > .link {
  justify-self: start;
  margin-top: 4px;
  font-size: 13px;
  color: var(--soft);
}
.lu-write {
  position: relative;
  display: grid;
  gap: 1px;
  min-height: 48px;
  align-content: center;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
@media (hover: hover) {
  .lu-write:hover:has(.link:not(:disabled)) {
    border-color: var(--ember);
  }
}
.lu-body .lu-write .link {
  justify-self: start;
  padding: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
.lu-write .link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.lu-write .note {
  margin: 0;
  color: var(--dim);
  font-size: 12.5px;
}
.lu-body .note {
  margin: 0;
  font-size: 12.5px;
}

/* The said text sits inside quotation marks, however many paragraphs it has. */
.said p:first-child::before {
  content: "\201C";
}
.said p:last-child::after {
  content: "\201D";
}

/* --- Join and creation (client spec, Join and Creation) ---
   Full screens of their own, without the room's header. Both set their own
   base type: 15px, tabular figures. */

.screen-join,
.screen-create {
  font-size: 15px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.screen-join .field,
.screen-create .field {
  display: grid;
  gap: 6px;
  margin: 0;
}
.screen-join .field-label,
.screen-create .field-label {
  margin: 0;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--soft);
}
.screen-join .field input,
.screen-create .field input,
.screen-create .field textarea,
.screen-create .cr-find {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
}
.screen-create .field textarea {
  font-family: var(--story);
  line-height: 1.55;
}
.screen-join .field input:focus,
.screen-create .field input:focus,
.screen-create .field textarea:focus,
.screen-create .cr-find:focus,
.screen-create .cr-sel select:focus {
  border-color: var(--ember);
  outline: none;
}
.screen-create .cr-find {
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
}

/* Join: one centred column, an eighth of the way down. */
.screen-join {
  display: grid;
  gap: 18px;
  align-content: start;
  max-width: 26rem;
  margin: 0 auto;
  padding: 12dvh 16px 40px;
}
.screen-join > *,
.join-form > * {
  margin: 0;
}
.wordmark {
  font: 780 44px/1 var(--ui);
  font-stretch: 78%;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.wordmark .ember {
  color: var(--ember);
}
.screen-join .lede {
  margin: -6px 0 6px;
  font-family: var(--story);
  font-size: 16px;
  color: var(--soft);
}
.join-form {
  display: grid;
  gap: 18px;
  margin: 0;
}
.screen-join .field .code-input {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
}
.screen-join details.fold {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.screen-join details.fold > summary {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0;
  border: 0;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--soft);
}
.screen-join details.fold > :not(summary) {
  margin: 0;
}
.join-form .primary {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 15px;
}
.screen-join .form-error {
  font-size: 13.5px;
  color: var(--foe);
}
.join-form .connecting {
  text-align: center;
  font-size: 13px;
  color: var(--dim);
}
.screen-join .note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dim);
}

/* My rooms: one row per room, a small portrait, the name and a line
   under it, and a quiet action. */
.dv {
  display: grid;
  gap: 8px;
}
.dv-h {
  margin: 0;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--soft);
}
.dv-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.dv-open {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 52px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
}
button.dv-open {
  cursor: pointer;
}
button.dv-open:focus-visible {
  border-color: var(--ember);
}
@media (hover: hover) {
  button.dv-open:hover {
    border-color: var(--ember);
  }
}
.dv-pic {
  position: relative;
  flex: none;
  width: 36px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--raised);
}
.dv-pic .init {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 750 15px var(--ui);
  color: var(--soft);
}
.dv-pic .slot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dv-who {
  display: grid;
  min-width: 0;
}
.dv-who b,
.dv-who small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dv-who small {
  font-size: 12.5px;
  color: var(--dim);
}
.dv-confirm {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--foe);
  border-radius: 12px;
}
.dv-confirm button {
  min-height: 44px;
}
.dv-confirm p {
  flex: 1 1 100%;
  margin: 0;
  font-size: 13px;
  color: var(--soft);
}

/* Creation: the top, the step's body (the only part that scrolls), the bottom bar. */
.screen-create {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.cr-top {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 14px 16px 0;
}
.cr-room,
.cr-top .key-rejected,
.cr-top .room-reset {
  margin: 0;
  font-size: 12.5px;
  color: var(--dim);
}
.cr-top .key-rejected {
  color: var(--t4);
}
.cr-room b {
  font-weight: 650;
  letter-spacing: 0.08em;
  color: var(--soft);
}
.cr-rail {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  touch-action: pan-x;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}
.cr-rail::-webkit-scrollbar {
  display: none;
}
.cr-rail ol {
  display: flex;
  list-style: none;
  gap: 4px;
  width: max-content;
  margin: 0;
  padding: 0;
}
.cr-step {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin-bottom: -1px;
  padding: 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--dim);
  font-size: 13.5px;
  font-weight: 650;
  white-space: nowrap;
}
.cr-step[aria-current="step"] {
  border-bottom-color: var(--ember);
  color: var(--ink);
}
.cr-step i,
.cr-qn {
  display: grid;
  flex: none;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-style: normal;
  font-weight: 750;
}
.cr-step i {
  width: 18px;
  height: 18px;
  font-size: 10.5px;
}
.cr-step.done i,
.cr-q.done .cr-qn {
  border-color: var(--ember);
  background: var(--ember);
  color: var(--ember-ink);
}
.cr-main {
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cr-cols {
  display: grid;
  gap: 24px;
  max-width: 64rem;
  margin: 0 auto;
  padding: 16px 16px 28px;
}
.cr-body {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}
.cr-rand {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.cr-rand button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 13px;
}
.cr-h {
  margin: 0;
  font: 760 24px/1.15 var(--ui);
  font-stretch: 84%;
  text-wrap: balance;
}
.screen-create .category-desc {
  max-width: 40rem;
  margin: -6px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--soft);
}
.cr-sub {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.cr-sub b {
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ember);
}
.screen-create .field-hint {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  color: var(--dim);
}
.screen-create .field-count {
  white-space: nowrap;
}

/* Questions: numbered headers, one open at a time. */
.cr-qs {
  display: grid;
  gap: 8px;
}
.cr-q {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.cr-q.open {
  border-color: color-mix(in srgb, var(--ember) 55%, var(--line));
}
.cr-qh {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 8px 14px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}
.cr-qn {
  width: 22px;
  height: 22px;
  font-size: 11.5px;
  color: var(--dim);
  border-color: var(--dim);
}
.cr-q.open .cr-qn {
  border-color: var(--ember);
  color: var(--ember);
}
.cr-q.done .cr-qn {
  color: var(--ember-ink);
}
.cr-qt {
  min-width: 0;
}
.cr-qt b {
  display: block;
  font-size: 15px;
  font-weight: 700;
}
.cr-qt small {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  color: var(--dim);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cr-q.done .cr-qt small {
  color: var(--soft);
}
.cr-qc {
  font-size: 12px;
  font-weight: 700;
  color: var(--dim);
}
.cr-q.done .cr-qc {
  color: var(--ember);
}
.cr-qh > svg {
  color: var(--dim);
}
.cr-qh[aria-expanded="true"] > svg {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: no-preference) {
  .cr-qh > svg {
    transition: transform 0.15s;
  }
}
.cr-qb {
  display: grid;
  gap: 10px;
  padding: 0 12px 14px;
}
.cr-qb > .category-desc {
  margin: 0 2px;
}

/* Traits: slim rows, and cards on the class step. */
.trait-list {
  display: grid;
  gap: 6px;
}
.trait-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 8px;
}
.trait {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trait-button {
  position: relative;
  display: grid;
  flex: 1;
  gap: 5px;
  align-content: start;
  width: 100%;
  min-height: 0;
  padding: 12px 40px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 400;
  text-align: left;
}
.trait-list:not(.trait-grid) .trait-button {
  gap: 3px;
  padding-block: 10px;
}
@media (hover: hover) {
  .trait-button:hover:not(:disabled) {
    border-color: var(--soft);
  }
}
.trait-button[aria-pressed="true"] {
  border-color: var(--ember);
  box-shadow: inset 0 0 0 1px var(--ember);
  background: color-mix(in srgb, var(--ember) 6%, var(--surface));
}
.trait-tick {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: transparent;
}
.trait-list:not(.trait-grid) .trait-tick {
  top: 10px;
}
.trait-multi .trait-tick {
  border-radius: 6px;
}
.trait-button[aria-pressed="true"] .trait-tick {
  border-color: var(--ember);
  background: var(--ember);
  color: var(--ember-ink);
}
.trait-name {
  font-size: 14.5px;
  font-weight: 700;
}
.trait-mods {
  font-size: 12px;
  font-weight: 650;
  color: var(--t4);
}
.trait-mods .neg {
  color: var(--foe);
}
.trait-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--soft);
}
.trait-eff {
  font-family: var(--story);
  font-size: 12px;
  font-style: italic;
  line-height: 1.45;
  color: var(--dim);
}
.trait-reason {
  font-size: 12px;
  color: var(--dim);
}
.trait-effects {
  padding: 0 4px;
  font-size: 12px;
  color: var(--dim);
}
.trait-effects summary {
  cursor: pointer;
}
.trait-effects p {
  margin: 4px 0 0;
  font-family: var(--story);
  font-style: italic;
}
.spread {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin: 4px 0 2px;
}
.spread-col {
  display: grid;
  gap: 3px;
  justify-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--dim);
}
.spread-track {
  position: relative;
  display: block;
  width: 100%;
  height: 26px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--line);
}
.spread-track b {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--ember);
}
.spread-col em {
  font-size: 11.5px;
  font-style: normal;
  letter-spacing: 0;
  color: var(--ink);
}

/* Appearance: dropdowns under four headings, then the portrait description. */
.cr-look {
  display: grid;
  gap: 12px;
}
.cr-lg {
  margin: 10px 0 -2px;
  line-height: 1.4;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.cr-look > .cr-lg:first-child {
  margin-top: 0;
}
.cr-selects {
  display: grid;
  gap: 12px;
}
.cr-sel {
  display: grid;
  gap: 6px;
  margin: 0;
}
.cr-sel > span {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--soft);
}
.cr-sel select {
  min-height: 46px;
  padding: 11px 38px 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  appearance: none;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--dim);
  font-size: 15px;
  cursor: pointer;
}
.cr-sel.set select {
  border-color: color-mix(in srgb, var(--ember) 45%, var(--line));
  color: var(--ink);
}
.cr-sel select option,
.cr-sel select optgroup {
  background: var(--surface);
  color: var(--ink);
}
.cr-portrait {
  display: grid;
  gap: 6px;
  justify-items: start;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.cr-portrait h3 {
  margin: 0;
  line-height: 1.4;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.cr-portrait p,
.cr-story p {
  margin: 0;
  font-family: var(--story);
  font-size: 15px;
  line-height: 1.55;
  color: var(--soft);
  overflow-wrap: anywhere;
}
.cr-portrait .cr-portrait-note {
  font-family: var(--ui);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dim);
}
/* The portrait generator's panel: creation's Portrait step and the framing popup. */
.dr {
  display: grid;
  gap: 10px;
}
.dr-label {
  font-size: 13px;
  color: var(--soft);
}
.dr textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}
.dr-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.dr-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dr-item {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.dr-item.is-chosen {
  border-color: var(--ember);
}
.dr-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: var(--line);
}
.dr-item.is-pending .dr-thumb {
  opacity: 0.5;
}
.dr-state {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--dim);
  overflow-wrap: anywhere;
}
.dr-acts {
  display: grid;
  gap: 6px;
  justify-items: start;
}
.fr-draw {
  margin-top: 12px;
}
.fr-draw summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--soft);
}
.fr-draw[open] summary {
  margin-bottom: 10px;
}
.cr-copy-fallback {
  font-size: 0.95rem;
}
.screen-create .secondary {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: none;
  color: var(--soft);
  font-size: 13px;
}

/* Review. */
.cr-issues {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 12px 14px 12px 32px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--foe) 9%, var(--surface));
  color: var(--ink);
  font-size: 13px;
  list-style: disc;
}
.cr-ok {
  margin: 0;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--hp);
}
.cr-story {
  display: grid;
  justify-items: start;
}
.cr-story h4 {
  margin: 10px 0 2px;
  line-height: 1.4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.cr-story p {
  font-size: 14.5px;
  white-space: pre-wrap;
}
.cr-story .secondary {
  margin-top: 8px;
}

/* The sheet as it grows: beside the steps on wide screens, a fold above the bar on phones. */
.pv {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.pv h3 {
  margin: 0;
  line-height: 1.4;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.pv-who b {
  display: block;
  font-size: 18px;
  font-weight: 760;
  font-stretch: 86%;
}
.pv-who span {
  font-size: 12.5px;
  color: var(--dim);
}
.pv-attrs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  text-align: center;
}
.pv-attrs div {
  padding: 4px 0;
  border-left: 1px solid var(--line);
}
.pv-attrs div:first-child {
  border-left: 0;
}
.pv-attrs small {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--dim);
}
.pv-attrs b {
  font-size: 19px;
  font-weight: 720;
}
.pv-attrs .cap b,
.pv-attrs em {
  color: var(--t6);
}
.pv-attrs em {
  display: block;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.pv-skills {
  display: grid;
  gap: 4px;
  font-size: 13px;
}
.pv-skills div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid var(--line);
}
.pv-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pv-traits span {
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--raised);
  color: var(--soft);
  font-size: 12px;
}
.pv-empty {
  margin: 0;
  font-size: 12.5px;
  color: var(--dim);
}
.cr-side {
  display: none;
}

/* The bottom bar: the sheet strip, Back, Next. */
.cr-bar {
  position: relative;
  border-top: 1px solid var(--line);
  background: var(--ground);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.cr-bar-in {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 64rem;
  margin: 0 auto;
  padding: 10px 16px 12px;
}
.cr-bar-in button {
  min-width: 0;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
}
.cr-bar-in .primary {
  min-width: 120px;
}
.cr-bar-in .secondary {
  border-color: transparent;
  color: var(--dim);
  font-size: 14px;
}
.cr-bar details.cr-pvfold {
  min-width: 0;
  margin: 0 auto 0 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.cr-bar details.cr-pvfold > summary {
  display: block;
  padding: 0;
  border: 0;
  list-style: none;
  cursor: pointer;
}
.cr-pvfold > summary::-webkit-details-marker {
  display: none;
}
.cr-bar details.cr-pvfold > :not(summary) {
  margin: 0;
}
.cr-pvfold[open] > .pv {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  max-height: 50dvh;
  overflow-y: auto;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}
.cr-strip {
  display: flex;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  color: var(--dim);
}
.cr-strip b {
  margin-left: 2px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
.cr-strip .cap b {
  color: var(--t6);
}
.cr-error {
  max-width: 64rem;
  max-height: 30dvh;
  margin: 0 auto;
  padding: 0 16px 10px;
  overflow-y: auto;
  font-size: 13px;
}
.cr-error p {
  margin: 0;
}

@media (max-width: 480px) {
  .cr-strip span:nth-child(n + 4) {
    display: none;
  }
}
@media (min-width: 600px) {
  .cr-selects {
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
  }
}
@media (min-width: 900px) {
  .cr-cols {
    grid-template-columns: minmax(0, 1fr) 19rem;
    align-items: start;
  }
  .cr-side {
    position: sticky;
    top: 16px;
    display: grid;
  }
  .cr-pvfold[open] > .pv {
    display: none;
  }
}

/* --- Portraits (client spec, Portraits) ---
   Every slot holds the name's initial and, over it, the picture. The picture
   is object-fit cover, placed by the portrait's vertical position (the
   inline object-position). If it fails to load, app.js marks its slot
   pic-failed and the initial shows. */

.slot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pic-failed .slot-img {
  display: none;
}
.giver-pic,
.sh-face,
.npc-pic,
.threat-pic {
  position: relative;
  overflow: hidden;
}
.npc-pic,
.threat-pic {
  display: grid;
  place-items: center;
  color: var(--soft);
  font-size: 13px;
  font-weight: 700;
}
.npc-pic {
  background: var(--raised);
  border: 1px dashed var(--dim);
}
.npc-pic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  align-self: center;
}
.threat-pic {
  width: 48px;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  background: var(--surface);
}
.sh-face-btn {
  display: block;
  padding: 0;
  cursor: pointer;
  color: inherit;
}
.sh-pencil {
  position: absolute;
  z-index: 2;
  right: 4px;
  bottom: 4px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(13, 16, 21, 0.8);
  color: #ede7dd;
  opacity: 0.85;
}
@media (hover: hover) {
  .sh-face-btn:hover .sh-pencil {
    opacity: 1;
  }
}
.sh-note.is-error,
.fr-note.is-error {
  color: var(--foe);
}

/* The framing popup: one position for every frame. */
.fr-wrap {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
}
.fr-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}
.fr {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(30rem, calc(100% - 32px));
  max-height: min(92dvh, 760px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 20px 20px 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.7);
}
.fr h2 {
  margin: 0;
  padding-right: 44px;
  font: 750 20px var(--ui);
  font-stretch: 88%;
}
.fr-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  min-height: 0;
  background: var(--raised);
  color: var(--soft);
}
.fr-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.fr-big {
  position: relative;
  width: 150px;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: var(--raised);
  box-shadow: 0 0 0 1px var(--line);
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.fr-big:active {
  cursor: grabbing;
}
.fr-big .init,
.fr-pv .init {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 750;
  font-size: 2.5rem;
  color: var(--soft);
}
.fr-pv .init {
  font-size: 1rem;
}
.fr-big .slot-img,
.fr-pv .slot-img {
  pointer-events: none;
}
.fr-hint {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(13, 16, 21, 0.75);
  color: #ede7dd;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
}
.fr-side {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.fr-side p,
.fr-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--dim);
}
.fr-pvs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.fr-pvs figure {
  display: grid;
  gap: 4px;
  justify-items: center;
  margin: 0;
  font-size: 11px;
  color: var(--dim);
}
.fr-pv {
  position: relative;
  overflow: hidden;
  background: var(--raised);
  box-shadow: 0 0 0 1px var(--line);
}
.fr-pv.cast {
  width: 54px;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
}
.fr-pv.line {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.fr-pv.dock {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.fr-range {
  display: grid;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--soft);
}
.fr-range input {
  min-height: 0;
  padding: 0;
  accent-color: var(--ember);
}
.fr-range span {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 500;
  color: var(--dim);
}
.fr-range i {
  font-style: normal;
}
.fr-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.fr-pick {
  margin-right: auto;
  min-height: 44px;
  padding: 0 4px;
  color: var(--ember);
  font-size: 14px;
  font-weight: 650;
}
.fr-foot button:not(.fr-pick) {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  color: var(--dim);
  font-size: 14px;
  font-weight: 600;
}
.fr-foot button[data-action="frame-save"] {
  min-width: 120px;
  border-color: var(--ember);
  background: var(--ember);
  color: var(--ember-ink);
}
.fr-foot button:disabled {
  opacity: 0.45;
}
@media (max-width: 420px) {
  .fr-main {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .fr-big {
    width: 170px;
  }
  .fr-side {
    justify-items: stretch;
    width: 100%;
  }
}
/* A Defense row names who pressed whom, in the cold colour, as the prototype does. */
.reveal-row .row-press {
  color: var(--cold);
}
/* A way back to Join from creation, now that the app bar is gone. */
.cr-room {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.cr-leave {
  margin-left: auto;
  min-height: 32px;
  font-size: 12.5px;
}

/* E5, until the experience designer shapes these screens: the existing
   notice, list and pill language. */
.fix-proposal {
  margin: 0 48px 16px 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--t6) 40%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--t6) 7%, var(--surface));
  font-size: 13px;
}
.fix-proposal p {
  margin: 0 0 8px;
}
.fix-proposal h4 {
  margin: 8px 0 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.fix-proposal button {
  margin: 6px 10px 0 0;
}
.zone-list {
  display: grid;
  gap: 6px;
  margin: 4px 0 14px;
  padding: 0;
  list-style: none;
}
.zone {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
}
.zone-name {
  font-weight: 650;
}
.edited {
  margin-left: 6px;
  font: 600 10.5px var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}

/* --- Spoken narration: Listen on the latest scene, the sheet's voice
   choice, and the host panel. --- */
.tts-play {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 8px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.sil {
  display: none;
}
.tts-play.on {
  border-color: var(--accent);
  color: var(--accent);
}
.voice-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.voice-opt {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.voice-opt.on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-text);
}
.panel-host form {
  display: grid;
  gap: 12px;
  margin: 12px 0;
}
.panel-host label {
  display: grid;
  gap: 4px;
}
.panel-host .host-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel-host input[type="text"],
.panel-host input[type="password"],
.panel-host textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 16px;
}
.host-list {
  margin: 4px 0 12px;
  padding-left: 18px;
}
.host-error {
  color: var(--warn);
}
.host-players {
  padding-left: 0;
  list-style: none;
}
.host-player {
  display: grid;
  gap: 4px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  min-width: 0;
}
.host-player-line {
  overflow-wrap: anywhere;
}
.host-tag {
  margin-left: 4px;
  color: var(--soft);
  font-size: 14px;
}
.host-tag.on {
  color: var(--ember);
}
.host-player-seen {
  color: var(--soft);
  font-size: 14px;
}
.host-player-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.host-player-acts button,
.host-lock {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.host-player-acts button:disabled,
.host-lock:disabled {
  opacity: 0.5;
  cursor: default;
}
.kicked-badge {
  display: block;
}

/* --- Phones: a taller feed, steady foot, 44px targets ---
   The cast strip is one short row of small cards, the hearth reserves its
   height so the feed never jumps, and every control is at
   least 44px in its smaller dimension. */
@media (max-width: 899px) {
  .tts-play,
  .voice-opt,
  .host-player-acts button,
  .host-lock {
    min-height: 44px;
  }
  .where {
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-wrap: nowrap;
  }
  .cast-row {
    gap: 6px;
    padding: 6px 16px 8px;
  }
  .pc {
    gap: 3px;
    width: 48px;
  }
  .pc .pic {
    aspect-ratio: 1;
  }
  .pc .init {
    font-size: 16px;
  }
  .pc .bar {
    height: 3px;
  }
  .pc .nm {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
  }
  .pc .seal {
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
  }

  .hearth {
    gap: 6px;
    padding-top: 6px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .listen-offer {
    min-height: 56px;
  }
  .composer-wrap {
    min-height: 56px;
  }
  /* The party's inputs above your own box stay compact: a short, scrolling list. */
  .round-inputs {
    max-height: 26vh;
    gap: 4px;
  }
  .round-input {
    padding: 6px 10px;
    border-radius: 10px;
  }
  .ri-text {
    font-size: 13.5px;
    line-height: 1.35;
  }

  .dock {
    height: 46px;
    padding: 0;
    gap: 0;
  }
  .dock-btn {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  .dock-btn + .dock-btn::before {
    left: 0;
  }
  .quest-line {
    min-height: 44px;
    margin-block: -12px;
    align-items: center;
  }
  .quest-line::after {
    inset: 0;
  }
  .sh-tabs {
    gap: 6px;
  }
  .sh-tabs button {
    min-width: 44px;
    min-height: 44px;
    padding: 0 6px;
  }
  .track,
  .cr-step,
  .cr-rand button,
  .cr-leave,
  .screen-create button,
  .screen-create .secondary,
  .screen-create .cr-find {
    min-height: 44px;
  }
  .cr-leave {
    min-width: 44px;
  }
  .compose-tools .actions button[type="submit"] {
    height: 44px;
    min-width: 44px;
    border-radius: 22px;
  }
  .popup-close,
  .compose-close {
    width: 44px;
    height: 44px;
  }
  .popup-close {
    top: 6px;
    right: 4px;
  }
  .compose-close {
    top: 4px;
    right: 4px;
  }
  details.fold > summary,
  .reveal .turn details.fold > summary,
  .ability-tray > summary,
  .trait-effects > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .notice button {
    min-height: 44px;
  }
}

/* --- Mobile shell: the page never scrolls; the story feed does ---
   html and body are pinned to the visual viewport, so nothing drags the shell
   (rubber-band, pull to refresh, the keyboard's scroll-into-view). --app-h is
   the shell's height: dynamic viewport units, or the visual viewport's height
   while the on-screen keyboard is open (app.js sets it, Safari ignores
   interactive-widget). Every screen's own content area scrolls, never the page. */
@media (max-width: 899px) {
  :root {
    --app-h: 100vh;
  }
  @supports (height: 100dvh) {
    :root {
      --app-h: 100dvh;
    }
  }
  html,
  body {
    height: var(--app-h);
    overflow: hidden;
    overscroll-behavior: none;
  }
  /* While the iOS keyboard is up, the shell follows the visual viewport iOS
     panned to the field (--app-y, set by app.js) instead of the page
     scrolling back under it. */
  body {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    transform: translateY(var(--app-y, 0px));
  }
  #app {
    height: var(--app-h);
    max-width: 100%;
    overflow: hidden;
  }
  #app > .screen {
    max-height: var(--app-h);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .screen-room,
  .screen-create {
    height: var(--app-h);
    max-height: var(--app-h);
    overflow: hidden;
  }
  .screen-join {
    box-sizing: border-box;
    height: var(--app-h);
    padding-top: min(12dvh, 12vh);
  }
  .story-col .feed-scroll,
  .hearth,
  .popup-body,
  .cr-main {
    overscroll-behavior: contain;
  }
  /* The sheet popup: the head, bars and tab row stay put; only the tab's
     panel scrolls, so a drag on the tabs moves nothing. */
  .popup-body:has(.sheet) {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 0;
  }
  .popup-body:has(.sheet) > .panel,
  .popup-body:has(.sheet) .party-member,
  .popup-body:has(.sheet) .sheet {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }
  .popup-body:has(.sheet) .sheet > * {
    flex: none;
  }
  .popup-body:has(.sheet) .sheet > .sh-panel {
    flex: 1 1 auto;
    min-height: 8rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 30px;
  }
  /* The header, scene and party bars stay where they are. */
  .room-top.is-away .room-header {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  /* 16px: Safari zooms the page into any smaller field it focuses. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select,
  .composer-form textarea,
  .tray-search,
  .sh-create input,
  .sh-create select,
  .sh-create textarea,
  .screen-join .field input,
  .screen-create .field input,
  .screen-create .field textarea,
  .screen-create .cr-find,
  .cr-sel select {
    font-size: 16px;
  }
}

/* Phones skip the scrim blur: it costs a full-screen blur pass per frame. */
@media (min-width: 900px) {
  .scrim,
  .fr-scrim {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}
.dock-sheet .dock-label {
  max-width: 9em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --- Room v3 shell (room-v3.md, section 2, gap 2) ---
   From 1024px on a fine pointer the room is a grid: header across the top,
   then rail, feed and moves column. Below that, and on any touch device, none
   of this applies and the room stacks as before. The composer wrap is a grid
   at every width so the moves list and the composer keep the old 8px gap. */
.composer-wrap {
  display: grid;
  gap: 8px;
}
.moves:empty,
.room-rail {
  display: none;
}
@media (min-width: 1024px) and (pointer: fine) {
  .screen-room.room-v3 {
    --r3-rail-w: 0px;
    --r3-moves-w: 400px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--r3-moves-w);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "header header" "feed moves";
    row-gap: 14px;
    /* The board's red and teal glows over its paper wash (a pre-rendered
       tile of the board's two feTurbulence layers). */
    background:
      radial-gradient(ellipse 60% 55% at 18% 0%, rgba(var(--r3-glow-a), 0.2), transparent 70%) fixed,
      radial-gradient(ellipse 55% 60% at 92% 100%, rgba(var(--r3-glow-b), 0.14), transparent 70%) fixed,
      url("/img/room-wash.webp") 0 0 / 1024px 1024px repeat fixed,
      var(--r3-ground);
  }
  .room-v3 > [data-region="popup"],
  .room-v3 > [data-region="frame"] {
    display: contents;
  }
  .room-v3 .room-top {
    grid-area: header;
    position: relative;
    border-bottom: 1px solid rgba(var(--r3-rule-rgb), 0.5);
  }
  /* The header stays put: nothing slides away on a desktop. */
  .room-v3 .room-top.is-away .room-header {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .room-v3 .room-header > [data-region],
  .room-v3 .room-top > [data-region="notice"] {
    max-width: none;
    width: auto;
    margin: 0;
  }
  .room-v3 .room-header > [data-region="header"] {
    padding-inline: 40px 0;
  }
  .room-v3 .room-top > [data-region="notice"]:empty {
    padding: 0;
  }
  .room-v3 .room-header {
    background: transparent;
    border-bottom: 0;
  }
  .room-v3 .room-rail {
    grid-area: rail;
    min-height: 0;
    overflow: hidden;
    border-right: 1px solid rgba(var(--r3-rule-rgb), 0.35);
  }
  .room-v3 .story-col {
    grid-area: feed;
    min-width: 0;
  }
  .room-v3 .story-col .feed-scroll {
    padding: 24px 56px 48px;
  }
  .room-v3 .hearth {
    grid-area: moves;
    box-sizing: border-box;
    min-height: 0;
    max-height: none;
    align-content: end;
    overflow-y: auto;
    padding: 20px 28px 16px 26px;
    background: rgba(17, 17, 17, 0.72);
    border-top: 0;
    border-left: 1px solid rgba(var(--r3-rule-rgb), 0.35);
  }
  .room-v3 .hearth:has(.ability-tray[open]) {
    overflow: visible;
  }
  .room-v3 .round-inputs {
    max-height: none;
    overflow: visible;
  }
}
@media (min-width: 1280px) and (pointer: fine) {
  .screen-room.room-v3 {
    --r3-moves-w: 440px;
  }
}
@media (min-width: 1024px) and (max-width: 1799.98px) and (pointer: fine) {
  .screen-room.room-v3 .scene-group {
    max-width: 800px;
  }
}
@media (min-width: 1500px) and (pointer: fine) {
  .screen-room.room-v3 {
    --r3-rail-w: 64px;
    --r3-moves-w: 440px;
    grid-template-columns: var(--r3-rail-w) minmax(0, 1fr) var(--r3-moves-w);
    grid-template-areas: "header header header" "rail feed moves";
  }
  .room-v3 .room-rail {
    display: block;
  }
}
@media (min-width: 1800px) and (pointer: fine) {
  .screen-room.room-v3 {
    --r3-rail-w: 300px;
    --r3-moves-w: 520px;
  }
}

/* --- Room v3 feed (room-v3.md, 3.6 to 3.9, section 5 steps 4 and 5) ---
   The same feed markup, restyled from 1024px on a fine pointer: round
   banners with a hairline, the scene title in Gloock, speaker blocks with a
   spine, dashed asides, the empty feed, and the results row. The results row
   is its own markup (results.js) beside today's reveal; below the breakpoint
   it is hidden and the old reveal shows, so the narrow room is unchanged.
   Chips and spines are clip-path parallelograms, not skews, so text and
   portraits stay upright. Motion plays once, on the post that brought the
   reveal in (ui.justRevealed), and never under reduced motion. */
.r3-rule,
.r3-results {
  display: none;
}
@media (min-width: 1024px) and (pointer: fine) {
  .room-v3 .feed {
    max-width: none;
  }
  /* The prose column is the whole feed (the board's 1108px at 2040 wide,
     800px below 1800): prose, speaker blocks, asides and results share it. */
  .room-v3 .scene-group {
    max-width: 1108px;
    margin: 0 auto 72px;
    padding: 0;
    display: grid;
    gap: 20px;
  }
  .room-v3 .scene-group > * {
    min-width: 0;
  }
  .room-v3 .scene-break {
    display: none;
  }
  .room-v3 .scene-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0 16px;
  }
  .room-v3 .scene-kicker {
    display: inline-block;
    margin: 0;
    padding: 5px 30px 5px 26px;
    background: var(--r3-accent);
    color: var(--r3-on-accent);
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
    font: italic 800 20px/1.2 var(--r3-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .room-v3 .scene-kicker .edited {
    color: var(--r3-on-accent);
    font-size: 13px;
  }
  .room-v3 .r3-rule {
    display: block;
    height: 1px;
    background: rgba(var(--r3-rule-rgb), 0.45);
  }
  .room-v3 .scene-title {
    grid-column: 1 / -1;
    margin: 14px 0 0;
    font: 400 30px/1.15 var(--r3-display);
    letter-spacing: 0;
    color: var(--r3-ink-h1);
    text-wrap: balance;
  }
  /* Prose, speaker blocks, asides. */
  .room-v3 .story-text,
  .room-v3 .scene-extras {
    max-width: none;
  }
  .room-v3 .story-text {
    font: 400 var(--r3-prose-size) / 1.7 var(--r3-prose-font);
    color: var(--r3-prose);
  }
  .room-v3 .story-text p {
    margin: 0 0 0.85em;
  }
  .room-v3 .story-text strong {
    font-weight: 700;
  }
  .room-v3 .line {
    --who: var(--r3-npc);
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    margin: 0 0 1.1em;
  }
  .room-v3 .line-threat {
    --who: var(--r3-threat-text);
  }
  .room-v3 .line.who-0 { --who: #ee6a4d; }
  .room-v3 .line.who-1 { --who: #6fb4f0; }
  .room-v3 .line.who-2 { --who: #9bd94a; }
  .room-v3 .line.who-3 { --who: #c593ff; }
  .room-v3 .line.who-4 { --who: #e8c25b; }
  .room-v3 .line.who-5 { --who: #5fd0c6; }
  .room-v3 .line.who-6 { --who: #ff9ec4; }
  .room-v3 .line.who-7 { --who: #ffa24f; }
  .room-v3 .line.line-npc,
  .room-v3 .line.line-unknown {
    --who: var(--r3-npc);
  }
  .room-v3 .line.line-threat {
    --who: var(--r3-threat-text);
  }
  .room-v3 .ddisc {
    position: relative;
    align-self: stretch;
    width: 44px;
    height: auto;
    min-height: 78px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #1b1b1b;
    color: var(--r3-muted);
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
    font: 400 22px var(--r3-display);
  }
  /* The speaker's colour runs down the slanted left edge, as the board's
     spine does (a 3px inset on the portrait). */
  .room-v3 .ddisc::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--who);
    clip-path: polygon(12px 0, 15px 0, 3px 100%, 0 100%);
    pointer-events: none;
  }
  /* No portrait: a small fixed mark in the same frame, the initial muted
     on the well, never a tall slab. */
  .room-v3 .ddisc:not(:has(.slot-img)) {
    align-self: start;
    height: 78px;
  }
  .room-v3 .ddisc .slot-img {
    position: absolute;
    top: -2%;
    left: -85%;
    width: 270%;
    max-width: none;
    height: auto;
    min-height: 102%;
    object-fit: cover;
  }
  .room-v3 .story-text .line p {
    margin: 0;
  }
  .room-v3 .dbody {
    padding: 2px 0 4px;
  }
  .room-v3 .speaker {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
    margin: 0;
    font: italic 800 23px/1.2 var(--r3-label);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .room-v3 .speaker b {
    font-weight: 800;
    color: var(--who);
  }
  .room-v3 .speaker .note {
    font: italic 500 16px/1.4 var(--r3-prose-font);
    letter-spacing: 0;
    text-transform: none;
    color: #a9a9a9;
  }
  .room-v3 .speaker .note::before {
    content: none;
  }
  .room-v3 .said-line {
    margin: 0;
    font: 400 var(--r3-prose-size) / 1.6 var(--r3-prose-font);
    color: #eee;
  }
  .room-v3 .aside {
    margin: 0 0 18px;
    padding-top: 14px;
    border-top: 1px dashed rgba(var(--r3-rule-rgb), 0.45);
    font: italic 400 17px/1.65 var(--r3-prose-font);
    color: var(--r3-note);
  }
  .room-v3 .aside::before {
    content: none;
  }
  .room-v3 .system {
    margin: 0 0 14px;
    font: italic 600 14px/1.4 var(--r3-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--r3-dim);
  }
  .room-v3 .feed > .empty {
    margin: 64px 0;
    font: italic 400 20px/1.6 var(--r3-prose-font);
    text-align: center;
    color: var(--r3-note);
  }
  /* Replay narration and the new-scene offer (3.9). */
  .room-v3 .tts-row {
    display: flex;
    justify-content: flex-end;
  }
  .room-v3 .tts-play {
    flex: none;
    justify-content: center;
    gap: 9px;
    width: 176px;
    height: 36px;
    margin: 0;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid rgba(var(--r3-rule-rgb), 0.6);
    border-radius: 0;
    background: rgba(10, 10, 10, 0.94);
    color: #e3e3e3;
    font: italic 800 15px/1 var(--r3-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .room-v3 .tts-play svg {
    flex: none;
  }
  .room-v3 .tts-play.on {
    border-color: var(--r3-accent);
    color: var(--r3-accent-text);
  }
  .room-v3 .listen-offer {
    padding: 8px 30px;
    border: 0;
    border-top: 3px solid var(--r3-accent);
    border-radius: 0;
    background: var(--r3-well);
    clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
    color: var(--r3-ink);
    font: italic 700 17px var(--r3-label);
    letter-spacing: 0.04em;
  }
  .room-v3 .listen-offer [data-action="tts-play"] {
    border: 0;
    border-radius: 0;
    background: var(--r3-accent);
    color: var(--r3-on-accent);
    font: italic 800 15px var(--r3-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  /* The results row (3.8). */
  .room-v3 .reveal {
    display: none;
  }
  .room-v3 .r3-results {
    display: grid;
    gap: 0;
    font-family: var(--r3-label);
  }
  .room-v3 .r3-res-fold {
    border: 0;
    padding: 0;
    margin: 0;
  }
  .room-v3 .r3-res-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(227, 227, 227, 0.28);
    list-style: none;
    cursor: pointer;
  }
  .room-v3 .r3-res-head::-webkit-details-marker {
    display: none;
  }
  .room-v3 .r3-res-head h3 {
    margin: 0;
    font: 400 30px/1.15 var(--r3-display);
    color: var(--r3-ink-h1);
  }
  .room-v3 .r3-res-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font: italic 700 15px var(--r3-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--r3-ink);
  }
  .room-v3 .r3-res-fold[open] .when-closed,
  .room-v3 .r3-res-fold:not([open]) .when-open {
    display: none;
  }
  .room-v3 .r3-chev {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }
  .room-v3 .r3-res-fold[open] .r3-chev {
    transform: translateY(2px) rotate(225deg);
  }
  .room-v3 .r3-res-head:focus-visible {
    outline: 3px solid #f2f2f2;
    outline-offset: 3px;
  }
  .room-v3 .r3-results.is-old > .r3-res-fold:not([open]) ~ * {
    display: none;
  }
  .room-v3 .r3-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .room-v3 .r3-col {
    --who: var(--r3-ink);
    min-width: 0;
    padding: 16px 14px;
    border-left: 1px solid rgba(227, 227, 227, 0.12);
  }
  .room-v3 .r3-col:first-child {
    padding-left: 0;
    border-left: 0;
  }
  .room-v3 .r3-col.who-0 { --who: #ee6a4d; }
  .room-v3 .r3-col.who-1 { --who: #6fb4f0; }
  .room-v3 .r3-col.who-2 { --who: #9bd94a; }
  .room-v3 .r3-col.who-3 { --who: #c593ff; }
  .room-v3 .r3-col.who-4 { --who: #e8c25b; }
  .room-v3 .r3-col.who-5 { --who: #5fd0c6; }
  .room-v3 .r3-col.who-6 { --who: #ff9ec4; }
  .room-v3 .r3-col.who-7 { --who: #ffa24f; }
  .room-v3 .r3-name {
    margin: 0;
    font: italic 700 17px/1.3 var(--r3-label);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--who);
    overflow-wrap: anywhere;
  }
  .room-v3 .r3-skill {
    margin: 2px 0 6px;
    font: italic 600 15px/1.3 var(--r3-label);
    color: var(--r3-dim);
  }
  .room-v3 .r3-tier {
    margin: 0 0 10px;
    font: italic 400 28px/1.15 var(--r3-display);
    color: var(--r3-ink);
  }
  .room-v3 .r3-crit .r3-tier {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    text-decoration-color: var(--r3-crit-rule);
  }
  .room-v3 .r3-pips {
    display: flex;
    gap: 3px;
  }
  .room-v3 .r3-pips i {
    width: 14px;
    height: 4px;
    background: rgba(227, 227, 227, 0.16);
  }
  .room-v3 .r3-pips i.on {
    background: #eaeaea;
  }
  .room-v3 .r3-crit .r3-pips i.on {
    background: var(--r3-crit-rule);
  }
  .room-v3 .r3-drawer {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
  }
  .room-v3 .r3-drawer-in {
    min-height: 0;
    overflow: hidden;
  }
  .room-v3 .r3-res-fold[open] ~ .r3-cols .r3-drawer,
  .room-v3 .r3-res-fold[open] ~ .r3-changes {
    grid-template-rows: 1fr;
    visibility: visible;
  }
  .room-v3 .r3-math {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: baseline;
    margin: 12px 0 0;
  }
  .room-v3 .r3-math dt {
    font: italic 600 13px var(--r3-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--r3-dim);
  }
  .room-v3 .r3-math dd {
    margin: 0;
    font: 400 18px var(--r3-display);
    color: var(--r3-ink);
  }
  .room-v3 .r3-math .r3-score {
    font-size: 24px;
  }
  .room-v3 .r3-sub {
    text-transform: none;
    letter-spacing: 0;
    color: var(--r3-note);
  }
  .room-v3 .r3-nat {
    font: italic 700 13px var(--r3-label);
    color: var(--r3-accent-text);
  }
  .room-v3 .r3-said {
    margin: 12px 0 0;
    font: italic 400 16px/1.5 var(--r3-prose-font);
    color: var(--r3-note);
  }
  .room-v3 .r3-results .level-ups {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font: italic 400 16px/1.5 var(--r3-prose-font);
    color: var(--r3-ink);
  }
  .room-v3 .r3-fxrow {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 12px 0 0;
    padding: 12px 0 0;
    list-style: none;
    border-top: 1px dashed rgba(227, 227, 227, 0.22);
  }
  .room-v3 .r3-fx {
    --fx-fg: var(--r3-ink);
    --fx-bg: rgba(227, 227, 227, 0.06);
    --fx-bd: rgba(227, 227, 227, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 2px;
    border: 1px solid var(--fx-bd);
    background: var(--fx-bg);
    color: var(--fx-fg);
    font: italic 800 14px/1.1 var(--r3-label);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .room-v3 .r3-fx b {
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
  }
  .room-v3 .r3-fx.fx-hurt { --fx-fg: #ff9484; --fx-bg: rgba(224, 86, 63, 0.16); --fx-bd: rgba(224, 86, 63, 0.7); }
  .room-v3 .r3-fx.fx-heal { --fx-fg: #86dca9; --fx-bg: rgba(95, 184, 154, 0.14); --fx-bd: rgba(95, 184, 154, 0.6); }
  .room-v3 .r3-fx.fx-xp { --fx-fg: #ecc86f; --fx-bg: rgba(236, 200, 111, 0.12); --fx-bd: rgba(236, 200, 111, 0.55); }
  .room-v3 .r3-fx.fx-add { --fx-fg: #cfb0ff; --fx-bg: rgba(181, 123, 255, 0.14); --fx-bd: rgba(181, 123, 255, 0.6); }
  .room-v3 .r3-fx.fx-rem { --fx-fg: #b8b8b8; --fx-bg: #161616; --fx-bd: #555555; text-decoration: line-through; }
  .room-v3 .r3-fx.fx-cd { --fx-fg: #93c8ec; --fx-bg: rgba(120, 180, 230, 0.1); --fx-bd: rgba(120, 180, 230, 0.5); }
  .room-v3 .r3-fx.fx-lvl { --fx-fg: var(--r3-on-accent, #fff); --fx-bg: var(--r3-accent); --fx-bd: var(--r3-accent); }
  .room-v3 .r3-changes .r3-threats,
  .room-v3 .r3-changes .r3-more {
    display: grid;
    gap: 10px;
    margin-top: 2px;
    padding: 14px 14px 16px 0;
    border-top: 1px solid rgba(227, 227, 227, 0.28);
  }
  .room-v3 .r3-threats-h {
    margin: 0;
    font: italic 700 15px/1 var(--r3-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6fd1b0;
  }
  .room-v3 .r3-pr-list,
  .room-v3 .r3-pr-hits {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .room-v3 .r3-pr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    padding: 8px 12px;
    background: rgba(4, 20, 15, 0.9);
    border-left: 4px solid #5fb89a;
  }
  .room-v3 .r3-pr-who,
  .room-v3 .r3-more-who {
    font: italic 800 18px/1 var(--r3-label);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6fd1b0;
  }
  .room-v3 .r3-pr-mv {
    font: italic 400 16px/1.2 var(--r3-prose-font);
    color: #d0d0d0;
  }
  .room-v3 .r3-pr-hits {
    flex: 1 0 100%;
    gap: 6px;
  }
  .room-v3 .r3-pr-hit {
    --who: var(--r3-ink);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
  }
  .room-v3 .r3-pr-hit.who-0 { --who: #ee6a4d; }
  .room-v3 .r3-pr-hit.who-1 { --who: #6fb4f0; }
  .room-v3 .r3-pr-hit.who-2 { --who: #9bd94a; }
  .room-v3 .r3-pr-hit.who-3 { --who: #c593ff; }
  .room-v3 .r3-pr-hit.who-4 { --who: #e8c25b; }
  .room-v3 .r3-pr-hit.who-5 { --who: #5fd0c6; }
  .room-v3 .r3-pr-hit.who-6 { --who: #ff9ec4; }
  .room-v3 .r3-pr-hit.who-7 { --who: #ffa24f; }
  .room-v3 .r3-pr-name {
    font: italic 700 17px/1.3 var(--r3-label);
    color: var(--who);
  }
  .room-v3 .r3-pr-tier {
    font: italic 400 18px/1.2 var(--r3-display);
    color: var(--r3-ink);
  }
  .room-v3 .r3-pr-hit .r3-fxrow {
    margin: 0;
    padding: 0;
    border-top: 0;
  }
  .room-v3 .r3-pr-math {
    flex: 1 0 100%;
  }
  .room-v3 .r3-more-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
  }
  .room-v3 .r3-more-row .r3-fxrow {
    margin: 0;
    padding: 0;
    border-top: 0;
  }
}
@media (min-width: 1024px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .room-v3 .r3-drawer {
    transition: grid-template-rows 0.2s var(--r3-ease), visibility 0s 0.2s;
  }
  .room-v3 .r3-res-fold[open] ~ .r3-cols .r3-drawer,
  .room-v3 .r3-res-fold[open] ~ .r3-changes {
    transition: grid-template-rows 0.2s var(--r3-ease), visibility 0s;
  }
  .room-v3 .r3-chev {
    transition: transform 0.2s;
  }
  .room-v3 .feed:has(> .scene-group.is-fresh) > .scene-group:last-child .scene-heading {
    animation: r3-slam 0.9s var(--r3-ease) 0.25s both;
  }
  .room-v3 .r3-results.is-fresh .r3-res-head {
    animation: r3-wipe 0.35s var(--r3-ease) 0.5s both;
  }
  .room-v3 .r3-results.is-fresh .r3-col {
    --d: 1s;
    animation: r3-colin 0.2s ease-out calc(var(--d) - 0.2s) both;
  }
  .room-v3 .r3-results.is-fresh .r3-col:nth-child(1) { --d: 1s; }
  .room-v3 .r3-results.is-fresh .r3-col:nth-child(2) { --d: 1.09s; }
  .room-v3 .r3-results.is-fresh .r3-col:nth-child(3) { --d: 1.18s; }
  .room-v3 .r3-results.is-fresh .r3-col:nth-child(n + 4) { --d: 1.27s; }
  .room-v3 .r3-results.is-fresh .r3-tier {
    animation: r3-tier 0.42s var(--r3-ease) var(--d) both;
  }
  .room-v3 .r3-results.is-fresh .r3-crit .r3-tier {
    animation: r3-tier-crit 0.7s var(--r3-ease) var(--d) both, r3-jolt 0.12s steps(1) calc(var(--d) + 0.42s);
  }
  .room-v3 .r3-results.is-fresh .r3-pips i.on {
    animation: r3-pip 0.04s steps(2) calc(var(--d) + 0.3s + var(--k) * 0.04s) both;
  }
}
@keyframes r3-slam {
  from {
    clip-path: inset(0 100% 0 0);
    transform: translateX(-90px);
  }
  to {
    clip-path: inset(0);
    transform: none;
  }
}
@keyframes r3-wipe {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}
@keyframes r3-colin {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes r3-tier {
  from {
    clip-path: inset(0 100% 0 0);
    transform: skewX(-12deg);
  }
  to {
    clip-path: inset(0);
    transform: none;
  }
}
@keyframes r3-tier-crit {
  0% {
    clip-path: polygon(0 0, 0 0, 0 calc(100% - 5px), 0 calc(100% - 5px), 0 100%, 0 100%);
    transform: skewX(-12deg);
  }
  60% {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), 0 calc(100% - 5px), 0 100%, 0 100%);
    transform: none;
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), 100% calc(100% - 5px), 100% 100%, 0 100%);
    transform: none;
  }
}
@keyframes r3-jolt {
  0%,
  49.9% {
    translate: 3px 0;
  }
  50%,
  100% {
    translate: 0 0;
  }
}
@keyframes r3-pip {
  from {
    opacity: 0;
    transform: scaleX(0.4);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Room v3 header (room-v3.md, 3.1 to 3.3) ---
   The v3 place, date, quest, sky and cast lanes sit in the same regions as
   today's header and cast strip. Below the desktop breakpoint they are
   hidden and nothing else changes; from it, today's where line, cast strip
   and quest line are hidden instead. The weather is its own block below. */
.r3-info,
.r3-sky,
.r3-lanes {
  display: none;
}
@media (min-width: 1024px) and (pointer: fine) {
  .room-v3 .room-header {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 34px;
    min-height: 169px;
    padding-right: 36px;
    box-sizing: border-box;
  }
  .room-v3 .room-header > [data-region="header"] {
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding-block: 8px;
  }
  .room-v3 .room-header > [data-region="cast"] {
    flex: none;
    position: relative;
    z-index: 1;
  }
  .room-v3 .where,
  .room-v3 .cast,
  .room-v3 .questline-wrap {
    display: none;
  }
  /* The room menu's functions live in Tidemark's Settings; display: none
     also takes the button and the open menu out of the tab order. */
  .room-v3 .menu-btn,
  .room-v3 .menu {
    display: none;
  }
  .room-v3 .dock-row {
    position: relative;
    z-index: 2;
  }
  .room-v3 .r3-info {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    min-width: 0;
  }
  .room-v3 .r3-lanes {
    display: flex;
    gap: 34px;
  }
  .room-v3 .r3-sky {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--r3-frame) 14%, var(--r3-ground)), color-mix(in srgb, var(--r3-frame) 2%, var(--r3-ground)) 55%, var(--r3-ground));
  }
  .room-v3 .r3-sky-day {
    background: linear-gradient(to bottom, color-mix(in srgb, var(--r3-frame) 32%, var(--r3-ground)), color-mix(in srgb, var(--r3-frame) 14%, var(--r3-ground)) 55%, color-mix(in srgb, var(--r3-frame) 4%, var(--r3-ground)));
  }
  .room-v3 .r3-sky-night::before,
  .room-v3 .r3-sky-day::before {
    content: "";
    position: absolute;
    inset: 0;
  }
  .room-v3 .r3-sky-night::before {
    background: radial-gradient(ellipse 360px 300px at 90% -30%, rgba(236, 236, 236, 0.16), transparent 70%);
  }
  .room-v3 .r3-sky-day::before {
    background: radial-gradient(ellipse 420px 320px at 90% -35%, rgba(255, 244, 214, 0.2), transparent 70%);
  }
  .room-v3 .r3-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #ececec;
    opacity: 0.55;
  }
  .room-v3 .r3-star:nth-child(3n) {
    width: 3px;
    height: 3px;
    opacity: 0.8;
  }

  .room-v3 .r3-place {
    margin: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font: 400 46px/1.05 var(--r3-display);
    color: var(--r3-ink-h1);
  }
  .room-v3 .r3-dateline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    min-width: 0;
    font: italic 700 18px/1.15 var(--r3-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #cdcdcd;
  }
  .room-v3 .r3-info:has(~ .r3-sky-night) .r3-part {
    color: #c0c0c0;
  }
  .room-v3 .r3-date,
  .room-v3 .r3-quest-tag {
    flex: none;
    display: inline-block;
    padding: 3px 14px;
    background: var(--r3-accent);
    color: var(--r3-on-accent);
    font-weight: 800;
    transform: skewX(var(--r3-skew-round));
  }
  .room-v3 .r3-date > span,
  .room-v3 .r3-quest-tag > span {
    display: block;
    transform: skewX(calc(-1 * var(--r3-skew-round)));
    white-space: nowrap;
  }
  .room-v3 .r3-quest {
    display: flex;
    align-items: center;
    position: relative;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    margin: 2px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: #e0e0e0;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .room-v3 .r3-quest::before {
    content: "";
    position: absolute;
    inset: -9px 0;
  }
  .room-v3 .r3-quest-tag {
    padding: 3px 14px;
    background: var(--r3-chip);
    color: var(--r3-on-chip);
    font: italic 800 17px/1.2 var(--r3-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: skewX(var(--r3-skew-chip));
  }
  .room-v3 .r3-quest-tag > span {
    transform: skewX(calc(-1 * var(--r3-skew-chip)));
  }
  .room-v3 .r3-quest-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 500 17px/1.3 var(--r3-prose-font);
  }
  .room-v3 .r3-quest:focus-visible {
    outline: 3px solid #f2f2f2;
    outline-offset: 3px;
  }

  /* Lanes, ported from the board's header: a 26px tab row over a 143px
     strip, exactly four slots (124px wide, 97px apart) in a 415px lane;
     the strip has the card's 30px slant at both ends. */
  .room-v3 .r3-lane {
    --r3-slots: 4;
    flex: none;
    width: calc(124px + (var(--r3-slots) - 1) * 97px);
    min-width: 0;
  }
  .room-v3 .r3-tabs {
    display: flex;
    align-items: flex-end;
    height: 26px;
    box-sizing: border-box;
    padding: 0 12px 4px 0;
  }
  .room-v3 .r3-tab {
    flex: none;
    margin-left: 30px;
    padding: 2px 12px;
    background: var(--r3-accent);
    color: var(--r3-on-accent);
    font: italic 800 15px/1.2 var(--r3-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transform: skewX(var(--r3-skew-tab));
  }
  .room-v3 .r3-tab > span {
    display: block;
    transform: skewX(calc(-1 * var(--r3-skew-tab)));
  }
  .room-v3 .r3-lane-npcs .r3-tab {
    background: #e3e3e3;
  }
  .room-v3 .r3-lane-threats .r3-tab {
    background: var(--r3-threat);
    color: var(--r3-on-threat);
  }
  .room-v3 .r3-count {
    flex: none;
    margin-left: 10px;
    font: italic 700 15px/1.2 var(--r3-label);
    color: #9a9a9a;
  }
  .room-v3 .r3-more {
    flex: none;
    margin: 0 0 0 auto;
    padding: 0;
    height: auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    border: 0;
    background: none;
    color: var(--r3-accent-text);
    font: italic 700 14px/1.2 var(--r3-label);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .room-v3 .r3-more:focus-visible {
    outline: 3px solid #f2f2f2;
    outline-offset: 1px;
  }
  .room-v3 .r3-strip {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 143px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    clip-path: polygon(var(--r3-slant) 0, 100% 0, calc(100% - var(--r3-slant)) 100%, 0 100%);
  }
  .room-v3 .r3-strip::-webkit-scrollbar {
    display: none;
  }
  .room-v3 .r3-item,
  .room-v3 .r3-slot {
    flex: none;
    width: 124px;
    height: 143px;
    margin-left: -27px;
    scroll-snap-align: start;
  }
  .room-v3 .r3-strip > .r3-slot,
  .room-v3 .r3-strip > .r3-item + .r3-item {
    margin-left: -27px;
  }
  .room-v3 .r3-strip > :first-child {
    margin-left: 0;
  }
  .room-v3 .r3-item:has(:focus-visible) {
    outline: 2px solid var(--r3-accent-text);
    outline-offset: -3px;
  }
  .room-v3 .r3-card {
    position: relative;
    display: block;
    width: 124px;
    height: 143px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--r3-ink);
    font: inherit;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    clip-path: polygon(var(--r3-slant) 0, 100% 0, calc(100% - var(--r3-slant)) 100%, 0 100%);
  }
  .room-v3 .r3-card:focus-visible {
    outline: 0;
  }
  .room-v3 .r3-slot {
    position: relative;
    overflow: hidden;
    background: #080808;
    cursor: default;
    clip-path: polygon(var(--r3-slant) 0, 100% 0, calc(100% - var(--r3-slant)) 100%, 0 100%);
    pointer-events: none;
  }
  .room-v3 .r3-pic {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #0f0f11;
    transition: background-color 0.18s;
  }
  .room-v3 .r3-pic .init {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 400 22px var(--r3-display);
    color: var(--r3-dim);
  }
  /* A card with no picture, as the board draws it: a head-and-shoulders
     silhouette on a near-black well with the initial faint above the
     shoulders. The empty slot is the same drawing, darker. */
  .room-v3 .r3-pic .sil,
  .room-v3 .r3-slot .sil {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    color: #2a2a30;
  }
  .room-v3 .r3-pic:has(.sil) .init {
    inset: 38px 14px auto;
    display: block;
    text-align: center;
    font: 400 60px/1 var(--r3-display);
    color: rgba(236, 236, 236, 0.17);
  }
  .room-v3 .r3-threat .r3-pic:has(.sil) {
    background: radial-gradient(ellipse at 50% 40%, #1f3a31, #0b1411 75%);
  }
  .room-v3 .r3-threat .r3-pic .sil {
    color: #1a2d26;
  }
  .room-v3 .r3-slot .sil {
    color: #141414;
  }
  /* The board's crops. A portrait is a full-length 2:3 sprite: players and
     NPCs show its head and shoulders (230% wide, shifted left 65% and up
     2%); a threat covers the slot at 50% 45%. */
  .room-v3 .r3-pic .slot-img {
    transition: filter 0.18s;
  }
  .room-v3 .r3-player .r3-pic .slot-img,
  .room-v3 .r3-npc .r3-pic .slot-img {
    inset: auto;
    top: -2%;
    left: -65%;
    width: 230%;
    height: auto;
    max-width: none;
    object-fit: fill;
  }
  .room-v3 .r3-threat .r3-pic .slot-img {
    object-fit: cover;
    object-position: 50% 45% !important;
  }
  .room-v3 .r3-scrim {
    position: absolute;
    inset: auto 0 0;
    height: 60px;
    background: linear-gradient(to top, rgba(6, 6, 6, 0.85), transparent);
  }
  .room-v3 .r3-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    height: 4px;
    display: block;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.65);
  }
  .room-v3 .r3-bar i {
    display: block;
    height: 100%;
    background: #ececec;
  }
  .room-v3 .r3-threat .r3-bar i {
    background: var(--r3-threat);
  }
  .room-v3 .r3-nameplate {
    position: absolute;
    inset: auto 0 0;
    height: 28px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background: rgba(8, 8, 8, 0.9);
    color: #ececec;
    font: italic 800 17px/1.1 var(--r3-label);
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .room-v3 .r3-nameplate > span {
    display: block;
    margin-left: 6px;
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .room-v3 .r3-nameplate-s {
    font-size: 14px;
    letter-spacing: 0;
  }
  .room-v3 .r3-player .r3-nameplate {
    color: #0a0a0a;
  }
  .room-v3 .r3-you .r3-nameplate {
    background: var(--r3-accent);
    color: var(--r3-on-accent);
  }
  .room-v3 .r3-p0 .r3-nameplate { background: #ffa24f; }
  .room-v3 .r3-p1 .r3-nameplate { background: var(--r3-p1); }
  .room-v3 .r3-p2 .r3-nameplate { background: var(--r3-p2); }
  .room-v3 .r3-p3 .r3-nameplate { background: var(--r3-p3); }
  .room-v3 .r3-p4 .r3-nameplate { background: #f0c24a; }
  .room-v3 .r3-p5 .r3-nameplate { background: #4fd1c5; }
  .room-v3 .r3-p6 .r3-nameplate { background: #ff9ec4; }
  .room-v3 .r3-p7 .r3-nameplate { background: #8aa4ff; }
  .room-v3 .r3-tag {
    position: absolute;
    top: 6px;
    left: 36px;
    padding: 1px 6px;
    background: #0a0a0a;
    color: var(--r3-accent-text);
    font: italic 800 12px/1.2 var(--r3-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transform: skewX(-12deg);
  }
  .room-v3 .r3-tag > span {
    display: block;
    transform: skewX(12deg);
  }
  .room-v3 .r3-seal {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 22px;
    height: 22px;
  }
  .room-v3 .r3-seal-disc {
    fill: var(--r3-chip);
    stroke: var(--r3-well);
  }
  .room-v3 .r3-seal-ring,
  .room-v3 .r3-seal-tick {
    stroke: var(--r3-well);
  }
  .room-v3 .r3-down .slot-img {
    filter: grayscale(0.85) brightness(0.55);
  }
  .room-v3 .r3-away {
    opacity: 0.55;
  }
  .room-v3 .r3-npc .r3-nameplate {
    background: var(--r3-npc-plate);
    color: #ececec;
  }
  .room-v3 .r3-threat .r3-nameplate {
    background: var(--r3-threat);
    color: #0a0a0a;
  }
  .room-v3 .r3-full .slot-img {
    filter: grayscale(0.7) brightness(0.7);
  }
}
@media (hover: hover) {
  .room-v3 .r3-quest:hover .r3-quest-title {
    text-decoration: underline;
  }
  .room-v3 .r3-card:hover .r3-pic {
    background-color: #1a1a1a;
  }
  .room-v3 .r3-card:hover .slot-img {
    filter: brightness(1.12);
  }
}
/* The board's 1600 frame (1500 to 1799): a lane shows three slots (318px)
   and scrolls to the fourth; lanes 26px apart, header 24px, title 38px. */
@media (min-width: 1024px) and (max-width: 1799.98px) and (pointer: fine) {
  .room-v3 .r3-lane {
    --r3-slots: 3;
  }
  .room-v3 .room-header {
    gap: 24px;
  }
  .room-v3 .r3-lanes {
    gap: 26px;
  }
  .room-v3 .r3-place {
    font-size: 38px;
  }
}
/* 1024 to 1279: two cards a lane, so the place, date and quest keep
   room beside the lanes. Each strip still scrolls to the rest. */
@media (min-width: 1024px) and (max-width: 1279.98px) and (pointer: fine) {
  .room-v3 .room-header > [data-region="header"] {
    padding-inline: 28px 0;
  }
  .room-v3 .room-header {
    gap: 20px;
    padding-right: 24px;
  }
  .room-v3 .r3-lanes {
    gap: 14px;
  }
  .room-v3 .r3-lane {
    --r3-slots: 2;
  }
}
@media (min-width: 1024px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .room-v3 .r3-star {
    animation: r3-twinkle 3s ease-in-out infinite alternate;
  }
  .r3-hidden .room-v3 .r3-star {
    animation-play-state: paused;
  }
}
@keyframes r3-twinkle {
  from {
    opacity: 0.15;
  }
  to {
    opacity: 0.9;
  }
}

/* --- Room v3 weather (room-v3.md, 3.1, gap 11) ---
   scene.weather picks .r3-wx-<word> on the sky; absent is clear. Only a
   clear sky has the moon or sun and the stars; any other day sky is a
   duller gradient. The weather is a tint on .r3-fx and two gradient layers
   (.r3-fx-a near, .r3-fx-b far), each a few tiled gradients, one drop or
   flake per tile, that move by transform only; no node per drop. A tile
   is one header tall (170px) and a layer loops by moving one tile, so the
   loop has no seam. --r3-drops is the spec's count for a 1600px header:
   the tile widths come from it (the tiles' 1/k sum to 0.7885, so one unit
   is 1600px * 0.7885 / drops). Thunder adds a white flash every 3.5s; fog
   is two blobs drifting for 6s. Drops, flakes and the flash show only
   without a reduced-motion request, and pause while the tab is hidden
   (.r3-hidden); a reduced-motion sky keeps the tint and still fog. */
@media (min-width: 1024px) and (pointer: fine) {
  .room-v3 .r3-sky-day:not(.r3-wx-clear) {
    background: linear-gradient(to bottom, color-mix(in srgb, var(--r3-frame) 26%, var(--r3-ground)), color-mix(in srgb, var(--r3-frame) 10%, var(--r3-ground)) 55%, color-mix(in srgb, var(--r3-frame) 3%, var(--r3-ground)));
  }
  .room-v3 .r3-sky:not(.r3-wx-clear)::before {
    content: none;
  }
  .room-v3 .r3-wx-light-rain {
    --r3-drops: 90;
    --r3-speed: 1.1;
    --r3-tint: linear-gradient(to bottom, rgba(150, 170, 150, 0.08), rgba(150, 170, 150, 0) 80%);
  }
  .room-v3 .r3-wx-heavy-rain {
    --r3-drops: 220;
    --r3-speed: 0.75;
    --r3-tint: linear-gradient(to bottom, rgba(150, 170, 150, 0.14), rgba(150, 170, 150, 0) 85%);
  }
  .room-v3 .r3-wx-thunder {
    --r3-drops: 240;
    --r3-speed: 0.65;
    --r3-tint: linear-gradient(to bottom, rgba(120, 140, 130, 0.2), rgba(120, 140, 130, 0) 85%);
  }
  .room-v3 .r3-wx-snow {
    --r3-drops: 90;
    --r3-tint: linear-gradient(to bottom, rgba(230, 230, 230, 0.06), rgba(230, 230, 230, 0) 80%);
  }
  .room-v3 .r3-wx-fog {
    --r3-tint: linear-gradient(to bottom, rgba(200, 200, 200, 0.07), rgba(200, 200, 200, 0.03));
  }
  .room-v3 .r3-fx {
    --r3-u: calc(1261.6px / var(--r3-drops, 90));
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--r3-tint, none);
  }
  .room-v3 .r3-fx-a,
  .room-v3 .r3-fx-b,
  .room-v3 .r3-flash {
    display: none;
    position: absolute;
  }
  .room-v3 .r3-wx-fog .r3-fx-a,
  .room-v3 .r3-wx-fog .r3-fx-b {
    display: block;
    inset: -20px -30%;
  }
  .room-v3 .r3-wx-fog .r3-fx-a {
    background: radial-gradient(ellipse 30% 60% at 25% 60%, rgba(215, 215, 215, 0.2), transparent 70%);
  }
  .room-v3 .r3-wx-fog .r3-fx-b {
    background: radial-gradient(ellipse 35% 55% at 70% 40%, rgba(215, 215, 215, 0.15), transparent 70%);
  }
}
@media (min-width: 1024px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .room-v3 .r3-wx-light-rain .r3-fx-a,
  .room-v3 .r3-wx-light-rain .r3-fx-b,
  .room-v3 .r3-wx-heavy-rain .r3-fx-a,
  .room-v3 .r3-wx-heavy-rain .r3-fx-b,
  .room-v3 .r3-wx-thunder .r3-fx-a,
  .room-v3 .r3-wx-thunder .r3-fx-b,
  .room-v3 .r3-wx-snow .r3-fx-a,
  .room-v3 .r3-wx-snow .r3-fx-b {
    display: block;
    left: -15%;
    right: -15%;
    top: -170px;
    height: calc(100% + 340px);
    will-change: transform;
  }
  .room-v3 .r3-wx-light-rain .r3-fx-a,
  .room-v3 .r3-wx-heavy-rain .r3-fx-a,
  .room-v3 .r3-wx-thunder .r3-fx-a {
    background:
      radial-gradient(1px 13px at 50% 50%, rgba(225, 225, 205, 0.5), transparent) 0 0 / calc(var(--r3-u) * 5) 170px,
      radial-gradient(1px 11px at 50% 50%, rgba(225, 225, 205, 0.42), transparent) calc(var(--r3-u) * 2) 61px / calc(var(--r3-u) * 7) 170px,
      radial-gradient(1px 15px at 50% 50%, rgba(225, 225, 205, 0.55), transparent) calc(var(--r3-u) * 4) 119px / calc(var(--r3-u) * 11) 170px;
    animation: r3-rain calc(0.7s * var(--r3-speed)) linear infinite;
  }
  .room-v3 .r3-wx-light-rain .r3-fx-b,
  .room-v3 .r3-wx-heavy-rain .r3-fx-b,
  .room-v3 .r3-wx-thunder .r3-fx-b {
    background:
      radial-gradient(1px 9px at 50% 50%, rgba(225, 225, 205, 0.3), transparent) calc(var(--r3-u) * 3) 37px / calc(var(--r3-u) * 6) 170px,
      radial-gradient(1px 8px at 50% 50%, rgba(225, 225, 205, 0.26), transparent) var(--r3-u) 97px / calc(var(--r3-u) * 9) 170px,
      radial-gradient(1px 10px at 50% 50%, rgba(225, 225, 205, 0.32), transparent) calc(var(--r3-u) * 5) 143px / calc(var(--r3-u) * 13) 170px;
    animation: r3-rain calc(1s * var(--r3-speed)) linear -0.4s infinite;
  }
  .room-v3 .r3-wx-snow .r3-fx-a {
    background:
      radial-gradient(circle at 50% 50%, rgba(240, 236, 222, 0.7) 1.6px, transparent 2.4px) 0 0 / calc(var(--r3-u) * 5) 170px,
      radial-gradient(circle at 50% 50%, rgba(240, 236, 222, 0.55) 1.2px, transparent 2px) calc(var(--r3-u) * 2) 61px / calc(var(--r3-u) * 7) 170px,
      radial-gradient(circle at 50% 50%, rgba(240, 236, 222, 0.75) 2px, transparent 2.8px) calc(var(--r3-u) * 4) 119px / calc(var(--r3-u) * 11) 170px;
    animation: r3-snow 3.4s linear infinite;
  }
  .room-v3 .r3-wx-snow .r3-fx-b {
    background:
      radial-gradient(circle at 50% 50%, rgba(240, 236, 222, 0.45) 1px, transparent 1.6px) calc(var(--r3-u) * 3) 37px / calc(var(--r3-u) * 6) 170px,
      radial-gradient(circle at 50% 50%, rgba(240, 236, 222, 0.4) 1.2px, transparent 1.8px) var(--r3-u) 97px / calc(var(--r3-u) * 9) 170px,
      radial-gradient(circle at 50% 50%, rgba(240, 236, 222, 0.5) 1px, transparent 1.6px) calc(var(--r3-u) * 5) 143px / calc(var(--r3-u) * 13) 170px;
    animation: r3-snow 4.8s linear -2s infinite;
  }
  .room-v3 .r3-wx-fog .r3-fx-a {
    animation: r3-fog 6s ease-in-out infinite alternate;
  }
  .room-v3 .r3-wx-fog .r3-fx-b {
    animation: r3-fog 6s ease-in-out -3s infinite alternate-reverse;
  }
  .room-v3 .r3-flash {
    display: block;
    inset: 0;
    background: #ececec;
    opacity: 0;
    animation: r3-flash 3.5s linear infinite;
  }
  .r3-hidden .room-v3 .r3-fx-a,
  .r3-hidden .room-v3 .r3-fx-b,
  .r3-hidden .room-v3 .r3-flash {
    animation-play-state: paused;
  }
}
@keyframes r3-rain {
  from {
    transform: skewX(-12deg) translateY(-170px);
  }
  to {
    transform: skewX(-12deg) translateY(0);
  }
}
@keyframes r3-snow {
  from {
    transform: translate(0, -170px);
  }
  50% {
    transform: translate(14px, -85px);
  }
  to {
    transform: translate(0, 0);
  }
}
@keyframes r3-fog {
  from {
    transform: translateX(-25%);
  }
  to {
    transform: translateX(25%);
  }
}
@keyframes r3-flash {
  0%,
  93%,
  100% {
    opacity: 0;
  }
  94% {
    opacity: 0.3;
  }
  95% {
    opacity: 0;
  }
  96.5% {
    opacity: 0.2;
  }
  98% {
    opacity: 0;
  }
}

/* --- Room v3 moves column and composer (room-v3.md, 3.10 to 3.12, gaps 8,
   9, 10, 19, 22, 25) ---
   The banner, the moves rows, the dock / sent / locked card, the status bar
   and the composer modal. Hidden below the desktop breakpoint, where today's
   moves list and composer stay exactly as they are; from it, today's moves
   list and composer are hidden instead. Skewed shapes are drawn on a
   pseudo-element so labels, text and focus outlines stay upright. */
.r3m-col,
.r3c-host {
  display: none;
}
@media (min-width: 1024px) and (pointer: fine) {
  .room-v3 .hearth {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .room-v3 .composer-wrap {
    display: none;
  }
  .room-v3 .r3m-col,
  .room-v3 .r3m,
  .room-v3 .r3c-host {
    display: contents;
  }
  .room-v3 .r3m-banner { order: 1; }
  .room-v3 .r3m-list { order: 2; }
  .room-v3 .hearth > .listen-wrap,
  .room-v3 .hearth > [data-region="levelup"] { order: 3; }
  .room-v3 .r3m-error { order: 4; }
  .room-v3 .r3c-card { order: 5; }
  .room-v3 .r3m-status { order: 6; }
  .room-v3 .r3m button,
  .room-v3 .r3c-dim button {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
  }
  .room-v3 .r3m :focus-visible,
  .room-v3 .r3c-dim :focus-visible {
    outline: 3px solid #f2f2f2;
    outline-offset: 3px;
  }

  /* The "Round N · Moves so far" banner (board v161): a red round tile,
     then the title on an inset plate, corner flourishes, skewed -8deg. */
  .room-v3 .r3m-banner {
    flex: none;
    position: relative;
    display: flex;
    align-items: stretch;
    height: 100px;
    margin: 0 8px 0 10px;
    transform: skewX(var(--r3-skew));
    color: var(--r3-corner);
  }
  .room-v3 .r3m-corner {
    position: absolute;
    z-index: 1;
  }
  .room-v3 .r3m-corner-tl { left: 3px; top: 3px; }
  .room-v3 .r3m-corner-tr { right: 3px; top: 3px; transform: scaleX(-1); }
  .room-v3 .r3m-corner-bl { left: 3px; bottom: 3px; transform: scaleY(-1); }
  .room-v3 .r3m-corner-br { right: 3px; bottom: 3px; transform: scale(-1, -1); }
  .room-v3 .r3m-round {
    flex: none;
    width: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding-left: 8px;
    box-sizing: border-box;
    background: var(--r3-panel);
    color: var(--r3-on-panel);
  }
  .room-v3 .r3m-round span {
    font: 800 italic 15px/1 var(--r3-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: var(--r3-on-panel2);
  }
  .room-v3 .r3m-round b {
    font: 400 82px/1 var(--r3-display);
  }
  .room-v3 .r3m-title {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 22px 14px;
    background: var(--r3-inset);
    border-block: 1px solid var(--r3-rule);
    font: 400 32px/1.02 var(--r3-display);
    color: var(--r3-ink);
    text-wrap: balance;
  }
  .room-v3 .r3m-title::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 26px;
    bottom: 9px;
    height: 2px;
    background: var(--r3-rule);
  }

  /* Moves so far: the only part of the column that scrolls. */
  .room-v3 .r3m-list {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 -10px 0 -12px;
    padding: 8px 18px 10px 22px;
    list-style: none;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--r3-thumb2) transparent;
    mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 10px), transparent);
    font: 400 16.5px/1.5 var(--r3-prose-font);
  }
  .room-v3 .r3m-empty {
    justify-content: center;
  }
  .room-v3 .r3m-empty p {
    margin: 0;
    font-style: italic;
    color: var(--r3-dim);
    text-align: center;
  }
  .room-v3 .r3m-move {
    --r3m-c: var(--r3-ink);
    position: relative;
    flex: none;
    display: flex;
    align-items: flex-start;
    min-height: 92px;
    box-sizing: border-box;
    padding: 9px 18px 9px 132px;
  }
  .room-v3 .r3m-move::before,
  .room-v3 .r3m-move::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: skewX(var(--r3-skew));
    pointer-events: none;
  }
  .room-v3 .r3m-move::before {
    background: rgba(227, 227, 227, 0.05);
    border: 1px solid rgba(var(--r3-rule-rgb), 0.35);
  }
  .room-v3 .r3m-move::after {
    background: rgba(236, 236, 236, 0.06);
    transform: skewX(var(--r3-skew)) scaleX(0);
    transform-origin: 0 50%;
  }
  .room-v3 .r3m-open {
    padding-left: 150px;
  }
  .room-v3 .r3m-c0 { --r3m-c: #ee6a4d; }
  .room-v3 .r3m-c1 { --r3m-c: var(--r3-p1); }
  .room-v3 .r3m-c2 { --r3m-c: var(--r3-p2); }
  .room-v3 .r3m-c3 { --r3m-c: var(--r3-p3); }
  .room-v3 .r3m-c4 { --r3m-c: #f0c24a; }
  .room-v3 .r3m-c5 { --r3m-c: #4fd1c5; }
  .room-v3 .r3m-c6 { --r3m-c: #ff9ec4; }
  .room-v3 .r3m-c7 { --r3m-c: #8aa4ff; }
  .room-v3 .r3m-you {
    --r3m-c: var(--r3-accent-text);
  }
  .room-v3 .r3m-you::before {
    background: rgba(var(--r3-accent-rgb), 0.14);
    border-color: var(--r3-accent);
  }
  .room-v3 .r3m-face {
    position: absolute;
    inset: 0 auto 0 0;
    width: 108px;
    overflow: hidden;
    background: var(--r3-well);
    transform: skewX(var(--r3-skew));
    box-shadow: inset 0 -6px 0 var(--r3m-c);
  }
  .room-v3 .r3m-pic {
    position: absolute;
    inset: 0 -24px;
    transform: skewX(8deg);
  }
  .room-v3 .r3m-pic .slot-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .room-v3 .r3m-pic .init {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 400 40px var(--r3-display);
    color: var(--r3-muted);
  }
  .room-v3 .r3m-face::after {
    content: "";
    position: absolute;
    inset: auto 0 6px;
    height: 36px;
    background: linear-gradient(to top, rgba(6, 6, 6, 0.6), transparent);
  }
  .room-v3 .r3m-seal {
    position: absolute;
    top: 6px;
    left: 58px;
    z-index: 1;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--r3-chip);
    color: var(--r3-well);
  }
  .room-v3 .r3m-body {
    position: relative;
    flex: 1;
    min-width: 0;
  }
  .room-v3 .r3m-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin: 0 0 2px;
  }
  .room-v3 .r3m-name {
    font: italic 800 18px/1.1 var(--r3-label);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--r3m-c);
  }
  .room-v3 .r3m-ab,
  .room-v3 .r3c-chip {
    flex: none;
    padding: 1px 9px;
    background: var(--r3-chip);
    color: var(--r3-on-chip);
    font: italic 800 14px/1.2 var(--r3-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transform: skewX(var(--r3-skew-chip));
  }
  .room-v3 .r3m-ab > span,
  .room-v3 .r3c-chip > span {
    display: block;
    transform: skewX(10deg);
  }
  .room-v3 .r3m-sub,
  .room-v3 .r3m-writing,
  .room-v3 .r3c-sub {
    font: italic 700 13px/1.1 var(--r3-label);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #b0b0b0;
  }
  .room-v3 .r3m-writing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .room-v3 .r3m-dots,
  .room-v3 .r3m-dia {
    display: inline-flex;
    gap: 6px;
  }
  .room-v3 .r3m-dots i,
  .room-v3 .r3m-dia i {
    width: 6px;
    height: 6px;
    background: var(--r3-accent-text);
    transform: rotate(45deg);
  }
  .room-v3 .r3m-dia i {
    width: 8px;
    height: 8px;
  }
  .room-v3 .r3m-more {
    margin-left: auto;
    min-height: 24px;
    color: var(--r3-accent-text);
    font: italic 800 15px/1.1 var(--r3-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .room-v3 .r3m-text {
    margin: 0;
    color: #d0d0d0;
    overflow-wrap: anywhere;
  }
  .room-v3 .r3m-clamp .r3m-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .room-v3 .r3m-typing .r3m-text {
    color: var(--r3-dim);
    font-style: italic;
  }

  /* Errors (gap 8): above the card, and in the modal under the text. */
  .room-v3 .r3m-error,
  .room-v3 .r3c-error {
    flex: none;
    margin: 0 8px 0 10px;
  }
  .room-v3 .r3m-error .composer-error,
  .room-v3 .r3c-error .composer-error {
    display: grid;
    gap: 6px;
    padding: 10px 14px;
    border: 1px solid var(--r3-accent);
    border-left-width: 6px;
    border-radius: 0;
    background: #140807;
    color: var(--r3-ink);
    font: italic 700 16px/1.25 var(--r3-label);
    letter-spacing: 0.03em;
  }
  .room-v3 .r3c-error {
    margin: 0 22px 8px;
  }
  .room-v3 .r3m-error .composer-error ul,
  .room-v3 .r3c-error .composer-error ul {
    margin: 0;
    padding-left: 1.1em;
  }
  .room-v3 .r3m-error [data-action="dismiss-error"],
  .room-v3 .r3c-error [data-action="dismiss-error"] {
    justify-self: start;
    min-height: 32px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid rgba(var(--r3-rule-rgb), 0.9);
    color: var(--r3-ink);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* Your card: dock (write), sent, locked, or a note. */
  .room-v3 .r3c-card {
    flex: none;
    position: relative;
    display: grid;
    gap: 12px;
    margin: auto 8px 0 10px;
    padding: 14px 24px 16px 26px;
    color: var(--r3-ink);
    text-align: left;
  }
  .room-v3 .r3c-card::before,
  .room-v3 .r3c-card::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: skewX(var(--r3-skew));
    pointer-events: none;
  }
  .room-v3 .r3c-card::before {
    background: #141414;
    border: 1px solid rgba(var(--r3-rule-rgb), 0.6);
  }
  .room-v3 .r3c-card::after {
    right: auto;
    width: 8px;
    background: var(--r3-accent);
  }
  .room-v3 .r3c-card > * {
    position: relative;
    margin: 0;
  }
  .room-v3 .r3c-card:focus {
    outline: 0;
  }
  .room-v3 .r3c-card:focus-visible {
    outline: 3px solid #f2f2f2;
    outline-offset: 3px;
  }
  .room-v3 .r3c-dock {
    width: auto;
    cursor: pointer;
  }
  .room-v3 .r3m .r3c-dock {
    padding: 14px 24px 16px 26px;
    color: var(--r3-ink);
  }
  .room-v3 .r3m .r3m-more {
    min-height: 24px;
  }
  .room-v3 .r3c-dim .r3c-ta:focus-visible {
    outline: none;
  }
  .room-v3 .r3c-dock::before {
    border-color: var(--r3-accent);
  }
  .room-v3 .r3c-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
  }
  .room-v3 .r3c-who {
    align-self: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: italic 800 30px/1 var(--r3-label);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--r3-accent-text);
  }
  .room-v3 .r3c-en {
    display: grid;
    gap: 6px;
    justify-items: end;
  }
  .room-v3 .r3c-enl,
  .room-v3 .r3c-label,
  .room-v3 .r3c-statl {
    font: italic 800 14px/1 var(--r3-label);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c0c0c0;
  }
  .room-v3 .r3c-me {
    color: var(--r3-accent-text);
  }
  .room-v3 .r3c-enrow {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .room-v3 .r3c-num,
  .room-v3 .r3c-ennum {
    font: 400 24px/1 var(--r3-display);
    font-variant-numeric: tabular-nums;
    color: var(--r3-accent-text);
    white-space: nowrap;
  }
  .room-v3 .r3c-num > span,
  .room-v3 .r3c-ennum > span + span {
    color: var(--r3-dim2);
  }
  .room-v3 .r3m .pips,
  .room-v3 .r3c-dim .pips {
    display: flex;
    gap: 6px;
  }
  .room-v3 .r3m .pips i,
  .room-v3 .r3c-dim .pips i {
    flex: none;
    box-sizing: border-box;
    width: 30px;
    height: 14px;
    border-radius: 0;
    transform: skewX(var(--r3-skew-bar));
    background: var(--r3-inset);
    border: 1px solid rgba(var(--r3-rule-rgb), 0.7);
  }
  .room-v3 .r3m .pips i.f,
  .room-v3 .r3c-dim .pips i.f {
    background: var(--r3-accent-text);
    border: 2px solid var(--r3-accent-text);
  }
  .room-v3 .r3m .pips i.r,
  .room-v3 .r3c-dim .pips i.r {
    background: transparent;
    border: 2px dashed var(--r3-accent-text);
  }
  .room-v3 .r3c-draft,
  .room-v3 .r3c-text {
    display: block;
    padding: 7px 14px;
    border: 1px solid rgba(var(--r3-rule-rgb), 0.45);
    border-left: 3px solid var(--r3-accent-text);
    background: #0c0c0c;
    color: #ececec;
    font: 500 16px/1.4 var(--r3-prose-font);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .room-v3 .r3c-text {
    white-space: normal;
  }
  .room-v3 .r3c-text > span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .room-v3 .r3c-none {
    color: var(--r3-dim);
    font-style: italic;
  }
  .room-v3 .r3c-abrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  .room-v3 .r3c-abrow .r3c-chip {
    padding: 2px 12px;
    font-size: 17px;
  }
  .room-v3 .r3c-chip-none {
    background: #2a2a2a;
    color: #cfcfcf;
  }
  .room-v3 .r3c-abrow .r3c-sub {
    font-size: 15px;
  }
  .room-v3 .r3c-costl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #e3e3e3;
  }
  .room-v3 .r3c-cost {
    display: inline-flex;
    gap: 4px;
  }
  .room-v3 .r3c-cost i {
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    border: 1px solid #6d6d6d;
    transform: skewX(var(--r3-skew-bar));
  }
  .room-v3 .r3c-cost i.f {
    background: var(--r3-accent-text);
    border-color: var(--r3-accent-text);
  }
  .room-v3 .r3c-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    background: var(--r3-send-bg);
    color: var(--r3-send-fg);
    transform: skewX(var(--r3-skew-chip));
    overflow: hidden;
  }
  .room-v3 .r3c-cta > span {
    position: relative;
    transform: skewX(10deg);
    font: italic 800 26px/1 var(--r3-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .room-v3 .r3c-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--r3-send-sweep);
    transform: translateX(-101%);
  }
  .room-v3 .r3c-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .room-v3 .r3c-tag {
    padding: 3px 9px;
    border: 1px solid rgba(var(--r3-rule-rgb), 0.6);
    font: italic 800 14px/1 var(--r3-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #c6c6c6;
  }
  .room-v3 .r3c-acts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
  }
  .room-v3 .r3c-acts .actions {
    display: flex;
    gap: 14px;
  }
  .room-v3 .r3c-acts [data-action="edit"] {
    order: -1;
  }
  .room-v3 .r3c-acts .actions button {
    position: relative;
    min-height: 44px;
    padding: 0 22px;
    font: italic 800 19px/1.1 var(--r3-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #e3e3e3;
    cursor: pointer;
  }
  .room-v3 .r3c-acts .actions button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: skewX(var(--r3-skew-chip));
    border: 1px solid rgba(var(--r3-rule-rgb), 0.9);
  }
  .room-v3 .r3c-acts .actions button {
    isolation: isolate;
  }
  .room-v3 .r3c-acts [data-action="edit"] {
    color: var(--r3-on-accent);
  }
  .room-v3 .r3c-acts [data-action="edit"]::before {
    background: var(--r3-accent);
    border-color: var(--r3-accent);
  }
  .room-v3 .r3c-until {
    font: italic 700 14px/1.2 var(--r3-label);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--r3-dim2);
  }
  .room-v3 .r3c-note p:not(.r3c-label) {
    font: italic 500 16px/1.4 var(--r3-prose-font);
    color: var(--r3-body);
  }

  /* Status bar. */
  .room-v3 .r3m-status {
    flex: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    height: 48px;
    box-sizing: border-box;
    margin: 0 8px 0 10px;
    padding: 0 26px 0 22px;
    white-space: nowrap;
  }
  .room-v3 .r3m-status::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: skewX(var(--r3-skew));
    background: var(--r3-inset);
    border-block: 1px solid var(--r3-rule);
  }
  .room-v3 .r3m-main,
  .room-v3 .r3m-side {
    position: relative;
    font: italic 800 19px/1 var(--r3-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #e3e3e3;
  }
  .room-v3 .r3m-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .room-v3 .r3m-side {
    font-size: 17px;
    color: #c6c6c6;
  }

  /* The composer modal. */
  .room-v3 .r3c-dim {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    /* The blur is its own desktop-only block at the end of this file:
       style.css keeps backdrop blur off every page a phone can load
       (test/mobile-shell.test.mjs). */
    background: rgba(5, 5, 5, 0.62);
  }
  .room-v3 .r3c-pop {
    position: relative;
    box-sizing: border-box;
    width: min(1240px, 100vw - 48px);
    height: min(780px, 100dvh - 48px);
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 16px 44px;
    margin: 0;
    padding: 100px 58px 28px 54px;
    color: var(--r3-iv);
  }
  .room-v3 .r3c-shell,
  .room-v3 .r3c-band {
    position: absolute;
    inset: 0;
    transform: skewX(-4deg);
    pointer-events: none;
  }
  .room-v3 .r3c-shell {
    overflow: hidden;
    background: #0b0b0b;
    border: 3px solid var(--r3-accent);
    box-shadow: var(--r3-shadow-pop);
  }
  .room-v3 .r3c-shell::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 320px;
    height: 260px;
    background: radial-gradient(circle, var(--r3-accent) 2.4px, transparent 3px) 0 0 / 11px 11px;
    opacity: 0.32;
    mask: linear-gradient(to top left, #000, transparent 75%);
  }
  .room-v3 .r3c-band {
    bottom: auto;
    height: 76px;
    box-sizing: border-box;
    transform-origin: 50% 390px;
    background:
      repeating-linear-gradient(115deg, transparent 0 9px, rgba(0, 0, 0, 0.11) 9px 18px) right / 360px 100% no-repeat,
      var(--r3-accent);
    border-bottom: 5px solid var(--r3-k);
  }
  .room-v3 .r3c-title {
    position: absolute;
    inset: 0 0 auto;
    height: 71px;
    box-sizing: border-box;
    padding: 0 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--r3-k);
  }
  .room-v3 .r3c-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 400 54px/1 var(--r3-pop);
    letter-spacing: 0.05em;
  }
  .room-v3 .r3c-keys {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .room-v3 .r3c-keys kbd {
    padding: 4px 8px 3px;
    border: 2px solid var(--r3-k);
    font: italic 800 14px/1 var(--r3-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .room-v3 .r3c-dim .r3c-collapse {
    min-height: 44px;
    padding: 7px 18px 5px;
    background: var(--r3-k);
    color: var(--r3-iv);
    transform: skewX(var(--r3-skew-chip));
    box-shadow: 4px 4px 0 var(--r3-iv);
    font: 400 30px/1 var(--r3-pop);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .room-v3 .r3c-collapse > span {
    display: flex;
    align-items: center;
    gap: 10px;
    transform: skewX(10deg);
  }
  .room-v3 .r3c-stats {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 22px;
  }
  .room-v3 .r3c-bars {
    flex: none;
    width: 196px;
    display: grid;
    gap: 10px;
  }
  .room-v3 .r3c-stat {
    display: grid;
    gap: 4px;
  }
  .room-v3 .r3c-statl {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    letter-spacing: 0.1em;
    color: #cfcfcf;
    white-space: nowrap;
  }
  .room-v3 .r3c-statn {
    font: 400 18px/1 var(--r3-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    color: var(--r3-iv);
  }
  .room-v3 .r3c-statn > span {
    color: #a0a0a0;
  }
  .room-v3 .r3c-track {
    position: relative;
    height: 11px;
    box-sizing: border-box;
    transform: skewX(var(--r3-skew-bar));
    background: #232323;
    border: 2px solid #4a4a4a;
  }
  .room-v3 .r3c-track i {
    display: block;
    height: 100%;
    background: var(--r3-iv);
  }
  .room-v3 .r3c-strain .r3c-track i {
    background: var(--r3-accent);
  }
  .room-v3 .r3c-track b {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 2px;
    background: var(--r3-iv);
  }
  .room-v3 .r3c-energy {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 7px;
  }
  .room-v3 .r3c-uses {
    color: var(--r3-accent-text);
    letter-spacing: 0.05em;
  }
  .room-v3 .r3c-energy .pips {
    padding-left: 4px;
  }
  .room-v3 .r3c-energy .pips i {
    width: 32px;
    height: 18px;
  }
  .room-v3 .r3c-ennum {
    margin: 0;
    font-size: 20px;
  }
  .room-v3 .r3c-mvp {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 10px 8px 0;
    background: var(--r3-mv);
    border: 3px solid var(--r3-mv-bd);
    border-radius: 12px;
    box-shadow: 9px 9px 0 var(--r3-accent), 9px 9px 0 3px var(--r3-k);
    overflow: hidden;
  }
  .room-v3 .r3c-mvh {
    flex: none;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0 16px;
    background: var(--r3-k);
    color: var(--r3-iv);
    font: italic 800 18px/1 var(--r3-label);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .room-v3 .r3c-count {
    font-size: 17px;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
  }
  .room-v3 .r3c-count.warn {
    color: var(--r3-accent-text);
  }
  .room-v3 .r3c-dim .r3c-ta {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 14px 22px 8px;
    resize: none;
    border: 0;
    border-radius: 0;
    outline: none;
    color: var(--r3-iv);
    caret-color: var(--r3-accent);
    font: 500 21px/34px var(--r3-prose-font);
    background-color: transparent;
    background-image: linear-gradient(to bottom, transparent 33px, rgba(240, 236, 228, 0.08) 33px);
    background-size: 100% 34px;
    background-position: 0 14px;
    background-attachment: local;
    scrollbar-width: thin;
    scrollbar-color: #4a4a4a transparent;
  }
  .room-v3 .r3c-ta::placeholder {
    font: 400 36px/34px var(--r3-pop);
    letter-spacing: 0.04em;
    color: #5a5a5a;
    opacity: 1;
  }
  .room-v3 .r3c-ta::selection,
  .room-v3 .r3c-search::selection {
    background: var(--r3-accent);
    color: var(--r3-k);
  }
  .room-v3 .r3c-hint {
    flex: none;
    margin: 0;
    padding: 4px 22px 10px;
    font: italic 500 15px/1.3 var(--r3-prose-font);
    color: var(--r3-dim2);
  }
  .room-v3 .r3c-foot {
    flex: none;
    box-sizing: border-box;
    min-height: 92px;
    padding: 11px 18px 13px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--r3-k);
    border-top: 5px solid var(--r3-accent);
  }
  .room-v3 .r3c-with,
  .room-v3 .r3c-price {
    min-width: 0;
    display: grid;
    gap: 4px;
  }
  .room-v3 .r3c-price {
    flex: none;
    justify-items: end;
    gap: 7px;
  }
  .room-v3 .r3c-pricer {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .room-v3 .r3c-withl,
  .room-v3 .r3c-cd {
    font: italic 800 15px/1 var(--r3-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #cfcfcf;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .room-v3 .r3c-withn {
    font: 400 40px/1 var(--r3-pop);
    letter-spacing: 0.05em;
    color: var(--r3-iv);
    text-shadow: 3px 3px 0 var(--r3-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .room-v3 .r3c-withnone {
    color: #a0a0a0;
    text-shadow: none;
  }
  .room-v3 .r3c-tier {
    display: inline-block;
    padding: 3px 9px 2px;
    background: var(--r3-iv);
    color: var(--r3-k);
    transform: skewX(var(--r3-skew-chip));
    font: italic 800 18px/1 var(--r3-label);
    letter-spacing: 0.06em;
  }
  .room-v3 .r3c-dim .r3c-send {
    grid-column: 1;
    grid-row: 3;
    height: 70px;
    margin: 0 10px 6px 0;
    background: var(--r3-send-bg);
    color: var(--r3-send-fg);
    transform: skewX(var(--r3-skew));
    box-shadow: 6px 6px 0 var(--r3-k), 6px 6px 0 2px var(--r3-iv);
    cursor: pointer;
  }
  .room-v3 .r3c-send > span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    transform: skewX(8deg);
    padding-top: 3px;
    font: 400 46px/1 var(--r3-pop);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .room-v3 .r3c-dim .r3c-send:focus-visible {
    outline-offset: 6px;
  }
  .room-v3 .r3c-abilities {
    grid-column: 2;
    grid-row: 1 / 4;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .room-v3 .r3c-abhead {
    display: flex;
    align-items: baseline;
    gap: 14px;
  }
  .room-v3 .r3c-abh {
    margin: 0;
    font: 400 38px/1 var(--r3-pop);
    letter-spacing: 0.05em;
    color: var(--r3-iv);
    text-shadow: 3px 3px 0 var(--r3-accent);
  }
  .room-v3 .r3c-held,
  .room-v3 .r3c-lv {
    font: italic 800 15px/1.1 var(--r3-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b0b0b0;
    white-space: nowrap;
  }
  .room-v3 .r3c-dim .r3c-noab {
    position: relative;
    align-self: center;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 20px 0 16px;
    isolation: isolate;
    cursor: pointer;
    font: italic 800 18px/1 var(--r3-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--r3-iv);
  }
  .room-v3 .r3c-noab::before {
    content: "";
    position: absolute;
    inset: 3px 0;
    z-index: -1;
    transform: skewX(var(--r3-skew-chip));
    background: var(--r3-card);
    border: 2px solid rgba(240, 236, 228, 0.34);
  }
  .room-v3 .r3c-noab > i {
    width: 11px;
    height: 11px;
    box-sizing: border-box;
    transform: rotate(45deg);
    border: 2px solid var(--r3-muted);
  }
  .room-v3 .r3c-dim .r3c-noab.is-on {
    color: var(--r3-k);
  }
  .room-v3 .r3c-noab.is-on::before {
    background: var(--r3-accent);
    border-color: var(--r3-k);
    box-shadow: 4px 4px 0 var(--r3-iv);
  }
  .room-v3 .r3c-noab.is-on > i {
    background: var(--r3-k);
    border-color: var(--r3-k);
  }
  .room-v3 .r3c-find {
    flex: none;
    margin: 0 6px 0 3px;
  }
  .room-v3 .r3c-dim .r3c-search {
    display: block;
    width: 100%;
    height: 44px;
    min-height: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0 12px 0 40px;
    border: 2px solid rgba(240, 236, 228, 0.4);
    border-radius: 0;
    background: var(--r3-card-off) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2.4' stroke-linecap='square'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='M15 15l6 6'/%3E%3C/svg%3E") 12px 50% no-repeat;
    color: var(--r3-iv);
    caret-color: var(--r3-accent-text);
    font: 500 16px/1 var(--r3-prose-font);
    appearance: none;
  }
  .room-v3 .r3c-search::placeholder {
    color: var(--r3-dim2);
    opacity: 1;
  }
  .room-v3 .r3c-list {
    flex: 1 1 0;
    min-height: 0;
    box-sizing: border-box;
    display: grid;
    align-content: start;
    gap: 18px;
    padding: 6px 16px 18px 6px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--r3-ph) transparent;
    mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
  }
  .room-v3 .r3c-group {
    display: grid;
    gap: 10px;
  }
  .room-v3 .r3c-ghead {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    white-space: nowrap;
    font: italic 800 18px/1.1 var(--r3-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--r3-iv);
  }
  .room-v3 .r3c-ghead > i {
    flex: none;
    width: 9px;
    height: 9px;
    transform: rotate(45deg);
    background: var(--r3-accent);
  }
  .room-v3 .r3c-power {
    padding: 1px 6px;
    background: var(--r3-accent);
    color: var(--r3-k);
    transform: skewX(var(--r3-skew-chip));
    font-size: 13px;
    line-height: 15px;
    letter-spacing: 0.08em;
  }
  .room-v3 .r3c-power > span {
    display: block;
    transform: skewX(10deg);
  }
  .room-v3 .r3c-lv {
    margin-left: auto;
  }
  .room-v3 .r3c-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 66px;
    gap: 14px 16px;
  }
  .room-v3 .r3c-dim .r3c-ab {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 4px 8px 4px 14px;
    isolation: isolate;
    text-align: left;
    cursor: pointer;
    color: var(--r3-iv);
  }
  .room-v3 .r3c-ab::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: skewX(-6deg);
    background: var(--r3-card);
    border: 2px solid rgba(240, 236, 228, 0.34);
    box-shadow: 4px 4px 0 rgba(240, 236, 228, 0.12);
  }
  .room-v3 .r3c-ab.is-on {
    color: var(--r3-k);
  }
  .room-v3 .r3c-ab.is-on::before {
    background: var(--r3-accent);
    border-color: var(--r3-k);
    box-shadow: 5px 5px 0 var(--r3-iv);
  }
  .room-v3 .r3c-dim .r3c-ab:disabled {
    opacity: 1;
    color: #7d7d7d;
    cursor: not-allowed;
  }
  .room-v3 .r3c-ab:disabled::before {
    background: var(--r3-card-off);
    border: 2px dashed rgba(240, 236, 228, 0.2);
    box-shadow: none;
  }
  .room-v3 .r3c-abname {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 400 19px/1.05 var(--r3-pop);
  }
  .room-v3 .r3c-abmeta {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    white-space: nowrap;
    font: italic 800 13px/1.1 var(--r3-label);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #c4c4c4;
  }
  .room-v3 .r3c-abmeta .r3c-tier {
    padding: 1px 5px;
    font-size: 13px;
  }
  .room-v3 .r3c-ab.is-on .r3c-abmeta {
    color: var(--r3-k);
  }
  .room-v3 .r3c-ab.is-on .r3c-tier {
    background: var(--r3-k);
    color: var(--r3-iv);
  }
  .room-v3 .r3c-ab.is-on .r3c-cost i.f {
    background: var(--r3-on-accent);
    border-color: var(--r3-on-accent);
  }
  .room-v3 .r3c-ab:disabled .r3c-abmeta {
    color: #8a8a8a;
  }
  .room-v3 .r3c-ab:disabled .r3c-tier {
    background: #2a2a2a;
    color: #8a8a8a;
  }
  .room-v3 .r3c-ab:disabled .r3c-cost i.f {
    background: #7a7a7a;
    border-color: #7a7a7a;
  }
  .room-v3 .r3c-why {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--r3-accent-text);
  }
  .room-v3 .r3c-abnote {
    margin: 0;
    padding: 18px 4px;
    font: 500 16px/1.4 var(--r3-prose-font);
    color: #a0a0a0;
  }
}
/* Gap 2 and 22: a narrower desktop gives the modal a narrower write column;
   a short window shrinks its title band gap and lets the move card take
   what is left. Below 1024px the room is today's and none of this shows. */
@media (min-width: 1024px) and (max-width: 1499.98px) and (pointer: fine) {
  .room-v3 .r3c-pop {
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    column-gap: 32px;
    padding-inline: 44px 40px;
  }
  .room-v3 .r3c-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .room-v3 .r3m-move {
    padding-left: 112px;
  }
  .room-v3 .r3m-face {
    width: 92px;
  }
  .room-v3 .r3m-seal {
    left: 42px;
  }
}
@media (min-width: 1024px) and (max-height: 820px) and (pointer: fine) {
  .room-v3 .r3c-pop {
    padding-top: 92px;
    row-gap: 12px;
  }
  .room-v3 .r3c-foot {
    min-height: 72px;
  }
  .room-v3 .r3c-withn {
    font-size: 32px;
  }
  .room-v3 .r3c-dim .r3c-send {
    height: 58px;
  }
}
@media (hover: hover) {
  .room-v3 .r3m-move:hover::after {
    transform: skewX(var(--r3-skew)) scaleX(1);
    transition-duration: 0.12s;
  }
  .room-v3 .r3c-dock:hover .r3c-cta::before {
    transform: translateX(0);
  }
  .room-v3 .r3c-dock:hover .r3c-cta {
    background: var(--r3-send-hover);
  }
  .room-v3 .r3c-dim .r3c-send:hover:not(:disabled) {
    translate: -2px -3px;
    box-shadow: 9px 10px 0 var(--r3-k), 9px 10px 0 2px var(--r3-iv);
  }
  .room-v3 .r3c-dim .r3c-collapse:hover {
    translate: -2px -2px;
    box-shadow: 6px 6px 0 var(--r3-iv);
  }
  .room-v3 .r3c-ab:not(:disabled):hover::before,
  .room-v3 .r3c-noab:hover::before {
    border-color: var(--r3-iv);
    translate: -2px -2px;
  }
}
@media (min-width: 1024px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .room-v3 .r3m-move::after {
    transition: transform 0.18s var(--r3-ease);
  }
  .room-v3 .r3c-cta::before {
    transition: transform 0.2s var(--r3-ease);
  }
  .room-v3 .r3c-dock::before {
    animation: r3-edge 2.8s ease-in-out infinite;
  }
  .room-v3 .r3m-dia i,
  .room-v3 .r3m-dots i {
    animation: r3-dots 1.2s ease-in-out infinite;
  }
  .room-v3 .r3m-dia i:nth-child(2),
  .room-v3 .r3m-dots i:nth-child(2) {
    animation-delay: 0.2s;
  }
  .room-v3 .r3m-dia i:nth-child(3),
  .room-v3 .r3m-dots i:nth-child(3) {
    animation-delay: 0.4s;
  }
  .room-v3 .r3c-dim {
    animation: r3-fade 0.2s ease-out;
  }
  .room-v3 .r3c-pop {
    animation: r3-rise 0.22s ease-out;
  }
  .room-v3 .r3c-dim .r3c-send,
  .room-v3 .r3c-dim .r3c-collapse {
    transition: translate 0.08s, box-shadow 0.12s var(--r3-ease);
  }
  .room-v3 .r3c-dim .r3c-send:active:not(:disabled) {
    translate: 4px 5px;
    box-shadow: 2px 2px 0 var(--r3-k), 2px 2px 0 2px var(--r3-iv);
  }
  .room-v3 .r3c-ab::before,
  .room-v3 .r3c-noab::before {
    transition: translate 0.12s var(--r3-ease), border-color 0.12s ease;
  }
  .room-v3 .r3c-mvh {
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .r3-hidden .room-v3 .r3c-dock::before,
  .r3-hidden .room-v3 .r3m-dia i,
  .r3-hidden .room-v3 .r3m-dots i {
    animation-play-state: paused;
  }
}
@keyframes r3-edge {
  0%,
  100% {
    border-color: rgba(var(--r3-accent-rgb), 0.55);
  }
  50% {
    border-color: var(--r3-accent);
  }
}
@keyframes r3-dots {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}
@keyframes r3-fade {
  from {
    opacity: 0;
  }
}
@keyframes r3-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
}

/* --- Room v3 rail (room-v3.md, 3.5 and 3.6, build step 8) ---
   The rail is 300px from 1800px; from 1500 to 1799 it is a 64px strip that
   opens over the feed on hover or focus and stays open when pinned; from
   1024 to 1499 it is a drawer that the "Acts" button opens over a scrim
   (the block at the end of this section). Below 1024, and on a touch device,
   it stays display:none, so the narrow room is unchanged. */
@media (min-width: 1024px) and (pointer: fine) {
  .room-v3 .room-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    padding: 26px 8px 26px 12px;
    font-family: var(--r3-label);
  }
  .room-v3 .scene-group[id] {
    scroll-margin-top: 24px;
  }
  .room-v3 .cf-acts-nav {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .room-v3 .cf-loc,
  .room-v3 .cf-acts-top,
  .room-v3 .cf-now,
  .room-v3 .cf-acts-empty {
    display: none;
  }
  .room-v3 .cf-acts {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .room-v3 .cf-acts::-webkit-scrollbar {
    display: none;
  }
  .room-v3 .cf-acts:not(.cf-attop) {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 32px);
  }
  .room-v3 .cf-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex: 0 0 auto;
    min-height: 50px;
    padding: 4px 12px;
    overflow: hidden;
    color: var(--r3-ink);
    text-decoration: none;
    transform: skewX(var(--r3-skew));
    border-left: 3px solid rgba(var(--r3-rule-rgb), 0.35);
  }
  .room-v3 .cf-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--r3-iv);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.18s var(--r3-ease);
    z-index: 0;
  }
  .room-v3 .cf-nav:focus-visible::before {
    transform: scaleX(1);
    transition-duration: 0.12s;
  }
  .room-v3 .cf-nav:focus-visible {
    color: #0b0b0b;
  }
  .room-v3 .cf-nav:focus-visible {
    outline: 2px solid var(--r3-accent-text);
    outline-offset: 2px;
  }
  .room-v3 .cf-nav > * {
    position: relative;
    z-index: 1;
    transform: skewX(calc(var(--r3-skew) * -1));
  }
  .room-v3 .cf-nav.is-current {
    min-height: 64px;
    background: var(--r3-panel);
    color: var(--r3-on-panel);
    border-left-color: var(--r3-panel);
  }
  .room-v3 .cf-nav.is-current::before {
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
    transform: translateX(-120%) scaleX(1);
    transition: none;
  }
  .room-v3 .cf-nav-n {
    font: 400 34px/1 var(--r3-display);
  }
  .room-v3 .cf-nav.is-current .cf-nav-n {
    font-size: 44px;
  }
  .room-v3 .cf-nav-t {
    display: none;
  }
}
@media (hover: hover) {
  .room-v3 .r3m .r3m-host:hover {
    border-color: var(--r3-accent);
    color: #fff;
  }
  .room-v3 .cf-railtog:hover,
  .room-v3 .cf-railclose:hover {
    color: #ececec;
    border-color: var(--r3-accent);
  }
  .room-v3 .cf-railopen:hover {
    background: #1a1a1a;
    border-color: var(--r3-accent);
  }
  .room-v3 .cf-tmbtn:hover {
    background: #1a1a1a;
    border-color: var(--r3-accent);
  }
  .room-v3 .cf-nav:hover::before {
    transform: scaleX(1);
    transition-duration: 0.12s;
  }
  .room-v3 .cf-nav:hover {
    color: #0b0b0b;
  }
}
/* The full rail's looks: shown from 1800px, on hover, focus or the pin from
   1500 to 1799, and in the drawer below 1500 (blocks at the end of this
   section). */
@media (min-width: 1024px) and (pointer: fine) {
  .room-v3 .cf-now {
    display: block;
  }
  .room-v3 .cf-acts-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 12px;
  }
  .room-v3 .cf-acts-h {
    margin: 0;
    font: 400 36px/1 var(--r3-display);
    color: var(--r3-ink);
  }
  .room-v3 .cf-tmbtn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 0 12px 0 11px;
    background: #0c0c0c;
    color: #ececec;
    border: 1px solid rgba(var(--r3-rule-rgb), 0.55);
    border-bottom: 3px solid var(--r3-accent);
    border-radius: 0;
    cursor: pointer;
    font: 800 italic 17px/1 var(--r3-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: skewX(var(--r3-skew));
    transition: background 0.12s, border-color 0.12s;
  }
  .room-v3 .cf-tmbtn > * {
    transform: skewX(calc(var(--r3-skew) * -1));
  }
  .room-v3 .cf-tmbtn:focus-visible {
    outline: 3px solid #ececec;
    outline-offset: 3px;
  }
  .room-v3 .cf-tmbdg {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 12px;
    background: var(--r3-accent);
    color: var(--r3-on-accent);
    font: 800 italic 15px/1 var(--r3-label);
    letter-spacing: 0.02em;
  }
  .room-v3 .cf-acts-empty {
    display: block;
    margin: 0;
    font: 600 italic 18px/1.3 var(--r3-label);
    text-transform: uppercase;
    color: var(--r3-dim);
  }
  .room-v3 .cf-nav {
    justify-content: flex-start;
  }
  .room-v3 .cf-nav-t {
    display: block;
    font: 800 italic 22px/1.05 var(--r3-label);
    text-transform: uppercase;
    text-wrap: balance;
  }
  .room-v3 .cf-nav-r {
    display: block;
    margin-top: 4px;
    font: 600 italic 13px/1.2 var(--r3-label);
    letter-spacing: 0.08em;
    color: inherit;
    opacity: 0.72;
  }
  .room-v3 .cf-now {
    flex: 0 0 auto;
    margin: 0;
    display: grid;
    gap: 13px;
  }
  .room-v3 .cf-now span {
    justify-self: start;
    padding: 3px 10px;
    background: var(--r3-chip);
    color: var(--r3-on-chip);
    font: 800 italic 13px/1.2 var(--r3-label);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    transform: skewX(var(--r3-skew-chip));
  }
  .room-v3 .cf-now b {
    font: 800 italic 22px/1.1 var(--r3-label);
    text-transform: uppercase;
    color: var(--r3-ink);
  }
  /* Place art (board v161): the slanted 250 by 300 plate over the caption,
     which then sits on one row with its chip. No art, no plate: the caption
     alone, as before. */
  .room-v3 .cf-loc {
    display: block;
    position: relative;
    flex: 0 0 auto;
    width: 250px;
    max-width: 100%;
    aspect-ratio: 250 / 300;
    margin: 14px 0 10px;
    color: var(--r3-frame);
  }
  .room-v3 .cf-loc-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
    clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%);
    background: var(--r3-barbg);
  }
  .room-v3 .cf-loc-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }
  .room-v3 .cf-loc-corners {
    color: var(--r3-npc);
  }
  .room-v3 .cf-loc + .cf-now {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .room-v3 .cf-loc + .cf-now span {
    flex: none;
  }
}
@media (min-width: 1024px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .room-v3 .cf-nav.is-current::before {
    animation: cf-shim 5s linear infinite;
  }
}
@keyframes cf-shim {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(120%);
  }
}

/* Rail states (room-v3.md, 3.5; board v161 "WIDTH" demo). The wrapper owns
   the padding. 1500 to 1799: a 64px strip (Tidemark with its unread badge, the
   act numbers, the pin) that opens to the full rail over the feed on hover or
   focus, and stays open when pinned. 1024 to 1499: no rail in the grid; the
   "Acts" button at the feed's top left opens it as a drawer over a scrim. */
.cf-railctl,
.cf-railclose,
.cf-railtog {
  display: none;
}
@media (min-width: 1024px) and (pointer: fine) {
  .room-v3 .room-rail {
    padding: 0;
  }
  .room-v3 .cf-rail-in {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    padding: 26px 22px 26px 26px;
    background: #090909;
  }
  .room-v3 .cf-acts-top {
    flex-wrap: wrap;
  }
  .room-v3 .cf-railtog,
  .room-v3 .cf-railclose {
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    padding: 0;
    background: transparent;
    color: #bdbdbd;
    border: 1px dashed #5a564f;
    border-radius: 0;
    cursor: pointer;
  }
  .room-v3 .cf-railtog:focus-visible,
  .room-v3 .cf-railclose:focus-visible {
    color: #ececec;
    border-color: var(--r3-accent);
  }
  .room-v3 .cf-railtog:focus-visible,
  .room-v3 .cf-railclose:focus-visible {
    outline: 2px solid #ececec;
    outline-offset: 2px;
  }
  .room-v3 .cf-railtog[aria-pressed="true"] {
    color: var(--r3-accent-text);
    border-style: solid;
    border-color: var(--r3-accent);
  }
}
@media (min-width: 1500px) and (max-width: 1799.98px) and (pointer: fine) {
  .room-v3 .room-rail {
    position: relative;
    z-index: 30;
    overflow: visible;
  }
  .room-v3 .cf-rail-in {
    position: absolute;
    inset: 0 auto 0 0;
    width: 300px;
    height: auto;
    overflow: hidden;
    box-shadow: 12px 0 28px rgba(0, 0, 0, 0.6);
    border-right: 1px solid rgba(var(--r3-rule-rgb), 0.35);
  }
  /* The Tidemark button sits in the strip: the dock's handset steps aside. */
  .room-v3 .dock-handset {
    display: none;
  }
  .room-v3 .cf-railtog {
    display: inline-flex;
  }
}
@media (hover: hover) and (min-width: 1500px) and (max-width: 1799.98px) and (pointer: fine) {
  .room-v3 .cf-rail-in:not(:hover):not(:focus-within):not([data-pinned="true"]) {
    width: 64px;
    padding: 12px 0;
    gap: 6px;
    align-items: center;
    box-shadow: none;
  }
  .room-v3 .cf-rail-in:not(:hover):not(:focus-within):not([data-pinned="true"]) .cf-acts-nav {
    width: 100%;
    padding: 0 8px;
    box-sizing: border-box;
  }
  .room-v3 .cf-rail-in:not(:hover):not(:focus-within):not([data-pinned="true"]) .cf-acts-top {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0 0 6px;
  }
  .room-v3 .cf-rail-in:not(:hover):not(:focus-within):not([data-pinned="true"]) .cf-acts-h,
  .room-v3 .cf-rail-in:not(:hover):not(:focus-within):not([data-pinned="true"]) .cf-acts-empty,
  .room-v3 .cf-rail-in:not(:hover):not(:focus-within):not([data-pinned="true"]) .cf-now,
  .room-v3 .cf-rail-in:not(:hover):not(:focus-within):not([data-pinned="true"]) .cf-loc,
  .room-v3 .cf-rail-in:not(:hover):not(:focus-within):not([data-pinned="true"]) .cf-nav-t,
  .room-v3 .cf-rail-in:not(:hover):not(:focus-within):not([data-pinned="true"]) .cf-tmbtn > span:not(.cf-tmbdg) {
    display: none;
  }
  .room-v3 .cf-rail-in:not(:hover):not(:focus-within):not([data-pinned="true"]) .cf-tmbtn {
    order: 1;
    min-height: 36px;
    padding: 0 9px;
    gap: 5px;
  }
  .room-v3 .cf-rail-in:not(:hover):not(:focus-within):not([data-pinned="true"]) .cf-railtog {
    order: 2;
  }
  .room-v3 .cf-rail-in:not(:hover):not(:focus-within):not([data-pinned="true"]) .cf-nav {
    justify-content: center;
    gap: 0;
    padding: 4px 0;
  }
}
@media (min-width: 1800px) and (pointer: fine) {
  /* The dock's buttons have homes here: Tidemark beside "Acts", the cast
     cards for Party and Scene, the quest chip for Quests. */
  .room-v3 .dock-row {
    display: none;
  }
  .room-v3 .cf-railctl,
  .room-v3 .cf-railclose,
  .room-v3 .cf-railtog {
    display: none;
  }
}
@media (min-width: 1024px) and (max-width: 1499.98px) and (pointer: fine) {
  .room-v3 .story-col {
    position: relative;
  }
  .room-v3 .story-col .feed-scroll {
    padding-top: 68px;
  }
  .room-v3 .cf-railctl {
    display: block;
  }
  .room-v3 .cf-railopen {
    position: absolute;
    left: 14px;
    top: 12px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 0 12px 0 11px;
    background: #0c0c0c;
    color: #ececec;
    border: 1px solid rgba(var(--r3-rule-rgb), 0.55);
    border-bottom: 3px solid var(--r3-accent);
    border-radius: 0;
    cursor: pointer;
    font: 800 italic 16px/1 var(--r3-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transform: skewX(var(--r3-skew));
  }
  .room-v3 .cf-railopen > * {
    transform: skewX(calc(var(--r3-skew) * -1));
  }
  .room-v3 .cf-railopen:focus-visible {
    outline: 3px solid #ececec;
    outline-offset: 3px;
  }
  .room-v3 .cf-railopen .cf-tmbdg {
    min-width: 22px;
    height: 22px;
    font-size: 14px;
  }
  .room-v3 .cf-railscrim {
    position: fixed;
    inset: 0;
    z-index: 44;
    background: rgba(0, 0, 0, 0.55);
  }
  .room-v3 .room-rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 45;
    display: block;
    width: min(300px, 86vw);
    overflow: hidden;
    background: #090909;
    box-shadow: 12px 0 28px rgba(0, 0, 0, 0.6);
    transform: translateX(-106%);
    visibility: hidden;
    transition: transform 0.22s var(--r3-ease), visibility 0s linear 0.22s;
  }
  .room-v3 .room-rail:has(.cf-rail-in[data-open="true"]) {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }
  .room-v3 .cf-rail-in {
    width: 100%;
    padding: 20px 18px 24px 20px;
  }
  .room-v3 .cf-acts-top {
    flex-wrap: nowrap;
  }
  .room-v3 .cf-acts-h {
    font-size: 32px;
  }
  .room-v3 .cf-railclose {
    display: inline-flex;
  }
}
@media (min-width: 1024px) and (max-width: 1499.98px) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .room-v3 .room-rail {
    transition: none;
  }
}

/* The host's entry in the moves column (round flow, frame 4): a small
   "Host" button with the queue count, under the status bar. */
@media (min-width: 1024px) and (pointer: fine) {
  .room-v3 .r3m-hostrow {
    order: 7;
    display: flex;
    justify-content: flex-end;
    margin: 6px 8px 0 10px;
  }
  .room-v3 .r3m .r3m-host {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid rgba(var(--r3-rule-rgb), 0.7);
    background: #0c0c0c;
    color: #e3e3e3;
    cursor: pointer;
    font: 800 italic 15px/1 var(--r3-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .room-v3 .r3m .r3m-host:focus-visible {
    border-color: var(--r3-accent);
    color: #fff;
  }
  .room-v3 .r3m-hostn {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    box-sizing: border-box;
    background: var(--r3-accent);
    color: var(--r3-on-accent);
    font: 800 italic 14px/1 var(--r3-label);
    letter-spacing: 0;
  }

  /* While the composer is open the list is one slim row of who has moved. */
  .room-v3 .r3m-slim {
    order: 2;
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 8px 0 10px;
    padding: 5px 18px 5px 14px;
    min-height: 42px;
    box-sizing: border-box;
  }
  .room-v3 .r3m-slim::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: skewX(var(--r3-skew));
    background: rgba(227, 227, 227, 0.05);
    border: 1px solid rgba(var(--r3-rule-rgb), 0.35);
  }
  .room-v3 .r3m-slimfs {
    position: relative;
    flex: none;
    display: flex;
    gap: 6px;
  }
  .room-v3 .r3m-slimf {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    overflow: hidden;
    background: var(--r3-well);
    clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  }
  .room-v3 .r3m-slimf .r3m-pic {
    inset: 0;
    transform: none;
  }
  .room-v3 .r3m-slimf .r3m-pic .init {
    font-size: 16px;
  }
  .room-v3 .r3m-slimt {
    position: relative;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 800 italic 17px/1.1 var(--r3-label);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #d2d2d2;
  }
}

/* --- Round flow, frame 1: dice on the table (board v161) ---
   Resolve puts the round's results row at the top of its block, with a
   quiet line in Mincho where the scene will land. When the scene posts,
   the newest round's row leads it (.r3-lead) and the prose slides in under
   it (.is-landed); the row does not play again. A paragraph that resolves
   a roll carries a 4px marker in the player's colour that lights its
   column on hover or focus and scrolls to it on a tap. */
.r3-mk {
  display: none;
}
@media (min-width: 1024px) and (pointer: fine) {
  .room-v3 .r3-wr {
    max-width: none;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 0 10px;
    border-top: 1px dashed rgba(var(--r3-rule-rgb), 0.5);
    font: italic 500 22px/1.5 var(--r3-prose-font);
    color: #b3b3b3;
  }
  .room-v3 .r3-wd {
    display: flex;
    gap: 7px;
  }
  .room-v3 .r3-wd i {
    width: 8px;
    height: 8px;
    background: var(--r3-accent-text);
    transform: rotate(45deg);
  }
  .room-v3 .r3-pw {
    position: relative;
  }
  .room-v3 .r3-mk {
    --who: var(--r3-ink);
    display: block;
    position: absolute;
    left: -18px;
    top: 6px;
    bottom: 6px;
    width: 4px;
    padding: 0;
    border: 0;
    background: var(--who);
    cursor: pointer;
    transform-origin: 100% 50%;
  }
  .room-v3 .r3-mk::before {
    content: "";
    position: absolute;
    inset: -4px -10px;
  }
  .room-v3 .r3-mk:focus-visible {
    transform: scaleX(2);
    outline: 2px solid #f2f2f2;
    outline-offset: 3px;
  }
  .room-v3 .r3-mk.who-0 { --who: #ee6a4d; }
  .room-v3 .r3-mk.who-1 { --who: #6fb4f0; }
  .room-v3 .r3-mk.who-2 { --who: #9bd94a; }
  .room-v3 .r3-mk.who-3 { --who: #c593ff; }
  .room-v3 .r3-mk.who-4 { --who: #e8c25b; }
  .room-v3 .r3-mk.who-5 { --who: #5fd0c6; }
  .room-v3 .r3-mk.who-6 { --who: #ff9ec4; }
  .room-v3 .r3-mk.who-7 { --who: #ffa24f; }
  .room-v3 .scene-group:has(.r3-mk[data-col="0"]:focus-visible) .r3-lead .r3-col[data-col="0"],
  .room-v3 .scene-group:has(.r3-mk[data-col="1"]:focus-visible) .r3-lead .r3-col[data-col="1"],
  .room-v3 .scene-group:has(.r3-mk[data-col="2"]:focus-visible) .r3-lead .r3-col[data-col="2"],
  .room-v3 .scene-group:has(.r3-mk[data-col="3"]:focus-visible) .r3-lead .r3-col[data-col="3"],
  .room-v3 .scene-group:has(.r3-mk[data-col="4"]:focus-visible) .r3-lead .r3-col[data-col="4"],
  .room-v3 .scene-group:has(.r3-mk[data-col="5"]:focus-visible) .r3-lead .r3-col[data-col="5"],
  .room-v3 .scene-group:has(.r3-mk[data-col="6"]:focus-visible) .r3-lead .r3-col[data-col="6"],
  .room-v3 .scene-group:has(.r3-mk[data-col="7"]:focus-visible) .r3-lead .r3-col[data-col="7"] {
    background: rgba(var(--r3-accent-rgb), 0.13);
    box-shadow: inset 0 3px 0 var(--who);
  }
}
@media (hover: hover) {
  .room-v3 .r3-mk:hover {
    transform: scaleX(2);
  }
  .room-v3 .scene-group:has(.r3-mk[data-col="0"]:hover) .r3-lead .r3-col[data-col="0"],
  .room-v3 .scene-group:has(.r3-mk[data-col="1"]:hover) .r3-lead .r3-col[data-col="1"],
  .room-v3 .scene-group:has(.r3-mk[data-col="2"]:hover) .r3-lead .r3-col[data-col="2"],
  .room-v3 .scene-group:has(.r3-mk[data-col="3"]:hover) .r3-lead .r3-col[data-col="3"],
  .room-v3 .scene-group:has(.r3-mk[data-col="4"]:hover) .r3-lead .r3-col[data-col="4"],
  .room-v3 .scene-group:has(.r3-mk[data-col="5"]:hover) .r3-lead .r3-col[data-col="5"],
  .room-v3 .scene-group:has(.r3-mk[data-col="6"]:hover) .r3-lead .r3-col[data-col="6"],
  .room-v3 .scene-group:has(.r3-mk[data-col="7"]:hover) .r3-lead .r3-col[data-col="7"] {
    background: rgba(var(--r3-accent-rgb), 0.13);
    box-shadow: inset 0 3px 0 var(--who);
  }
}
@media (min-width: 1024px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .room-v3 .r3-wd i {
    animation: r3-dots 1.2s ease-in-out infinite;
  }
  .room-v3 .r3-wd i:nth-child(2) {
    animation-delay: 0.2s;
  }
  .room-v3 .r3-wd i:nth-child(3) {
    animation-delay: 0.4s;
  }
  .r3-hidden .room-v3 .r3-wd i {
    animation-play-state: paused;
  }
  .room-v3 .r3-mk {
    transition: transform 0.15s ease-out;
  }
  .room-v3 .r3-lead .r3-col {
    transition: background-color 0.15s;
  }
  /* The dice land at resolve: the row drops in, then its columns play as a live reveal's would, sooner. */
  .room-v3 .r3-rolls.is-fresh {
    animation: r3-rowin 0.55s var(--r3-ease) backwards;
  }
  .room-v3 .r3-rolls.is-fresh .r3-res-head {
    animation-delay: 0.1s;
  }
  .room-v3 .r3-rolls.is-fresh .r3-col:nth-child(1) { --d: 0.5s; }
  .room-v3 .r3-rolls.is-fresh .r3-col:nth-child(2) { --d: 0.59s; }
  .room-v3 .r3-rolls.is-fresh .r3-col:nth-child(3) { --d: 0.68s; }
  .room-v3 .r3-rolls.is-fresh .r3-col:nth-child(n + 4) { --d: 0.77s; }
  .room-v3 .scene-group.is-landed > .story-text {
    animation: r3-land 0.5s var(--r3-ease) backwards;
  }
}
@media (min-width: 1024px) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .room-v3 .scene-group.is-landed > .story-text {
    animation: r3-fade 0.15s ease-out both;
  }
}
@keyframes r3-rowin {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes r3-land {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Round flow, frame 5: amended and voided rolls (board v161) ---
   In the results row a corrected roll keeps its column: the new tier word
   in place with the old one small and struck above it, the pips lit to the
   new tier, and a chip that says who changed it. A void reads "Voided"
   with no pip lit. The host's note, when there is one, heads the column's
   drawer ("Host: ..."). The plain corrected list under the round stays for
   the narrow room, where the results row is hidden; here the columns carry
   it. */
@media (min-width: 1024px) and (pointer: fine) {
  .room-v3 .r3-corrected {
    display: none;
  }
  .room-v3 .rf-old {
    display: block;
    margin: 0 0 2px;
    font: italic 400 15px/1.1 var(--r3-display);
    color: #8d8d8d;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
  }
  .room-v3 .rf-chip {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 9px;
    border: 1px solid var(--r3-accent-text);
    color: var(--r3-accent-text);
    background: rgba(var(--r3-accent-rgb), 0.12);
    font: italic 800 12px/1.2 var(--r3-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .room-v3 .rf-chip.rf-void {
    border-color: #8a8a8a;
    color: #b4b4b4;
    background: #141414;
  }
  .room-v3 .rf-note {
    margin: 12px 0 0;
    font: italic 400 16px/1.5 var(--r3-prose-font);
    color: var(--r3-note);
    overflow-wrap: anywhere;
  }
}
.r3-corrected-note {
  font-style: italic;
  overflow-wrap: anywhere;
}

/* --- Round flow, frame 2: the director is writing (board v161) ---
   From the lock until the post the round's banner carries the run line,
   "Locked at 21:10 · The director is writing", with a diamond that pulses;
   the status bar sets its longer line a size down. Phones keep their own
   locked state, so the line is desktop only. */
.r3-sys {
  display: none;
}
@media (min-width: 1024px) and (pointer: fine) {
  .room-v3 .r3-sys {
    margin: -14px 0 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font: italic 700 17px/1.3 var(--r3-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--r3-npc);
  }
  .room-v3 .r3-sys-d {
    flex: none;
    width: 8px;
    height: 8px;
    background: var(--r3-accent-text);
    transform: rotate(45deg);
  }
  .room-v3 .r3m-long {
    gap: 10px;
    padding: 0 20px 0 18px;
  }
  .room-v3 .r3m-long .r3m-main {
    gap: 10px;
    font-size: 14.5px;
    letter-spacing: 0.03em;
  }
  .room-v3 .r3m-long .r3m-side {
    font-size: 12.5px;
    letter-spacing: 0.03em;
  }
  .room-v3 .scene-group.r3-writing {
    width: 100%;
  }
}
@media (min-width: 1024px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .room-v3 .r3-sys.is-run .r3-sys-d {
    animation: r3-dots 1.2s ease-in-out infinite;
  }
  .r3-hidden .room-v3 .r3-sys.is-run .r3-sys-d {
    animation-play-state: paused;
  }
}

/* --- Round flow, frame 6: the abandoned run (board v161) ---
   After the host abandons, the round's banner carries a quiet system line,
   "The round was restarted by the host · 21:34" (the run line's diamond,
   without the pulse), and the plain system line is not repeated. Phones keep
   the plain line. */
.r3-abandoned {
  display: none;
}
@media (min-width: 1024px) and (pointer: fine) {
  .room-v3 .scene-group.r3-abandoned {
    display: grid;
  }
  .room-v3 .system.r3-abandoned-raw {
    display: none;
  }
}

/* --- Round flow, frame 3: the submit check and Flag (board v161) ---
   Send reads the move first: the button says "Reading your move" with
   three diamonds, then the answer sits under the text in Mincho 17 with
   its two buttons, and Send dims until the player picks one. A posted
   scene or aside carries a flag glyph at its right edge (always there on
   phones); its note field opens under the text, "Flagged" or "Edited"
   goes in the margin, and a declined flag shows the host's reason.
   .r3-b is the round flow's skewed button, here and in the host panel. */
.r3-fw {
  position: relative;
}
.r3-fl {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--soft);
}
.r3-flagged {
  display: block;
  text-align: right;
  font-weight: 700;
  color: var(--ember);
}
/* Flags on one paragraph: the glyph sits at the paragraph's right edge, by
   its first line, and the paragraph leaves room for it. An aside's dash
   moves into its first paragraph, which stays inline after it. */
.r3-pf {
  padding-right: 44px;
}
.r3-pf > .r3-fl {
  position: absolute;
  top: 0;
  right: 0;
}
.aside:has(> .r3-pf:first-child)::before {
  content: none;
}
.aside > .r3-pf:first-child > p:first-child::before {
  content: "— ";
  color: var(--dim);
}
.aside > .r3-pf + .r3-pf {
  margin-top: 0.4em;
}
.r3-note {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
}
.r3-note .r3-ta {
  width: 100%;
  box-sizing: border-box;
}
.r3-nrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.r3-sp {
  flex: 1;
}
.r3-decl {
  margin: 8px 0 0;
  font-style: italic;
  color: var(--soft);
}
@media (min-width: 1024px) and (pointer: fine) {
  .room-v3 button.r3-b {
    position: relative;
    flex: none;
    min-height: 0;
    padding: 5px 18px;
    border: 1px solid rgba(var(--r3-rule-rgb), 0.9);
    border-radius: 0;
    background: transparent;
    color: var(--r3-frame);
    cursor: pointer;
    font: italic 800 16px/1.1 var(--r3-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transform: skewX(var(--r3-skew-chip));
    white-space: nowrap;
  }
  .room-v3 .r3-b > span {
    display: block;
    transform: skewX(10deg);
  }
  .room-v3 .r3-b.pri {
    background: var(--r3-accent);
    border-color: var(--r3-accent);
    color: var(--r3-on-accent);
  }
  .room-v3 .r3-b:focus-visible,
  .room-v3 .r3-fl:focus-visible {
    outline: 2px solid #f2f2f2;
    outline-offset: 3px;
  }
  .room-v3 .r3-b:disabled,
  .room-v3 .r3-b[aria-disabled="true"] {
    opacity: 0.42;
    cursor: not-allowed;
    border-style: dashed;
  }
  .room-v3 .r3-nrow {
    gap: 12px;
  }
  .room-v3 .r3-cnt {
    white-space: nowrap;
    font: italic 700 14px/1 var(--r3-label);
    letter-spacing: 0.08em;
    color: var(--r3-dim2);
    font-variant-numeric: tabular-nums;
  }
  .room-v3 .r3-ta {
    color-scheme: dark;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 0;
    padding: 7px 10px;
    border: 1px solid rgba(var(--r3-rule-rgb), 0.45);
    border-radius: 0;
    background: var(--r3-inset);
    color: #ececec;
    font: 500 16px/1.45 var(--r3-prose-font);
  }
  .room-v3 .r3-ta:focus {
    outline: 0;
    border-color: rgba(var(--r3-accent-rgb), 0.8);
    box-shadow: 0 0 0 1px rgba(var(--r3-accent-rgb), 0.35);
  }
  /* The submit check, under the move's text. */
  .room-v3 .r3-chk {
    flex: none;
    display: grid;
    gap: 10px;
    padding: 10px 22px 12px;
    border-top: 1px dashed rgba(240, 236, 228, 0.28);
    background: #0d0d0d;
  }
  .room-v3 .r3-chk p {
    margin: 0;
    font: 500 17px/1.5 var(--r3-prose-font);
    color: var(--r3-iv);
  }
  .room-v3 .r3-chk.no p {
    color: #f3d6d0;
  }
  .room-v3 .r3-chk .r3-b {
    color: var(--r3-iv);
  }
  .room-v3 .r3-chk .r3-b.pri {
    color: var(--r3-on-accent);
  }
  .room-v3 .r3c-dim .r3c-send.r3-dim {
    opacity: 0.4;
    pointer-events: none;
  }
  .room-v3 .r3c-dim .r3c-send.r3c-reading {
    opacity: 1;
    cursor: progress;
  }
  .room-v3 .r3c-reading > span {
    font-size: 40px;
  }
  .room-v3 .r3c-wd {
    display: flex;
    gap: 9px;
  }
  .room-v3 .r3c-wd i {
    width: 11px;
    height: 11px;
    background: currentColor;
    transform: rotate(45deg);
  }
  /* Flag: the glyph at the text's right edge, its note, the margin tag. */
  .room-v3 .r3-fl {
    position: absolute;
    right: -42px;
    top: 4px;
    width: 30px;
    height: 30px;
    margin: 0;
    border: 1px solid transparent;
    color: var(--r3-note);
    cursor: pointer;
    opacity: 0.55;
  }
  .room-v3 .r3-pf {
    padding-right: 0;
  }
  .room-v3 .aside > .r3-pf:first-child > p:first-child::before {
    content: none;
  }
  .room-v3 .aside > .r3-pf + .r3-pf {
    margin-top: 0;
  }
  .room-v3 .r3-fw:focus-within > .r3-fl {
    opacity: 1;
  }
  .room-v3 .r3-flagged {
    position: absolute;
    right: -52px;
    top: 8px;
    width: 48px;
    padding-top: 3px;
    border-top: 2px solid var(--r3-accent);
    text-align: left;
    font: italic 800 12px/1 var(--r3-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--r3-accent-text);
  }
  .room-v3 .r3-note {
    max-width: none;
    box-sizing: border-box;
    margin: -8px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(var(--r3-rule-rgb), 0.5);
    border-left: 3px solid var(--r3-accent-text);
    background: #0c0c0c;
  }
  .room-v3 .r3-note:has(.r3-ta:placeholder-shown) .r3-b.pri {
    opacity: 0.42;
    border-style: dashed;
  }
  .room-v3 .r3-decl {
    max-width: none;
    box-sizing: border-box;
    margin: -8px 0 0;
    padding: 6px 10px;
    border-left: 3px solid var(--r3-ph);
    background: #0c0c0c;
    font: italic 500 15px/1.4 var(--r3-prose-font);
    color: #cfcfcf;
  }
}
@media (hover: hover) {
  .room-v3 .r3-fw:hover > .r3-fl {
    opacity: 1;
  }
  .room-v3 .r3-fl:hover {
    color: var(--r3-accent-text);
    border-color: rgba(var(--r3-rule-rgb), 0.6);
  }
  .room-v3 .r3-b:hover {
    border-color: var(--r3-accent-text);
  }
  .room-v3 .r3-b.pri:hover {
    background: var(--r3-send-hover);
  }
}
@media (min-width: 1024px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .room-v3 .r3c-wd i {
    animation: r3-dots 1.2s ease-in-out infinite;
  }
  .room-v3 .r3c-wd i:nth-child(2) {
    animation-delay: 0.2s;
  }
  .room-v3 .r3c-wd i:nth-child(3) {
    animation-delay: 0.4s;
  }
  .room-v3 .r3-fl {
    transition: opacity 0.15s;
  }
}

/* --- Round flow, frame 4: the host panel (board v161) ---
   On the desktop room the host popup is the board's right-hand drawer, 780px:
   a top bar (Host tag, "Host panel", Close), then the run banner while the
   director writes, the queue (flag cards, a Decided fold of one-line rows,
   "Nothing to decide"), the newest round's rulings as a compact results row
   with Amend and Void, narration, and the players. Structural controls are
   disabled during a run with the reason. Phones and the Tidemark copy keep
   the plain popup, with the phone-safe base rules just below. */
.hp-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.hp-h {
  margin: 0;
}
.hp-tag {
  flex: none;
  padding: 2px 10px;
  border: 1px solid var(--line);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--soft);
}
.hp-body {
  display: grid;
  gap: 18px;
  min-width: 0;
}
.hp-blk,
.hp-queue {
  min-width: 0;
}
.hp-sh {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.hp-sh h3 {
  margin: 0;
}
.hp-qc {
  margin-left: auto;
  color: var(--soft);
  font-size: 14px;
}
.hp-run {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left-width: 5px;
}
.hp-run-t,
.hp-conf,
.hp-nrow,
.hp-ch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.hp-wd {
  display: flex;
  gap: 6px;
}
.hp-wd i {
  width: 8px;
  height: 8px;
  background: currentColor;
  transform: rotate(45deg);
}
.hp-cards,
.hp-dec,
.hp-rl,
.hp-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hp-cards {
  display: grid;
  gap: 10px;
}
.hp-card {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--who, var(--line));
  min-width: 0;
}
.hp-ch b,
.hp-rcn,
.hp-rn,
.hp-dec b {
  color: var(--who, inherit);
}
.hp-when {
  margin-left: auto;
  color: var(--soft);
  font-size: 14px;
}
.hp-kind {
  padding: 0 6px;
  border: 1px solid var(--line);
  font-size: 12px;
  text-transform: uppercase;
}
.hp-quote,
.hp-qnote {
  margin: 0;
  overflow-wrap: anywhere;
}
.hp-quote {
  padding: 4px 10px;
  border-left: 3px solid var(--line);
}
.hp-note,
.hp-amend {
  display: grid;
  gap: 8px;
}
.hp-note label,
.hp-amend label {
  display: grid;
  gap: 4px;
}
.hp-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hp-empty {
  margin: 0;
  padding: 18px 0;
  text-align: center;
  color: var(--soft);
  border: 1px dashed var(--line);
}
.hp-fold summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  cursor: pointer;
}
.hp-chev {
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.hp-fold[open] .hp-chev {
  transform: rotate(-135deg);
}
.hp-dec {
  display: grid;
  gap: 6px;
}
.hp-dec li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 8px;
  border-left: 4px solid var(--who, var(--line));
}
.hp-dec li span {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.hp-dec li i {
  flex: none;
  color: var(--soft);
  font-size: 13px;
}
.hp-rl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.hp-rc {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--who, var(--line));
  min-width: 0;
}
.hp-rt {
  font-size: 20px;
}
.hp-old {
  display: block;
  font-size: 13px;
  font-style: normal;
  text-decoration: line-through;
  color: var(--soft);
}
.hp-pips {
  display: flex;
  gap: 3px;
}
.hp-pips i {
  width: 14px;
  height: 4px;
  background: var(--line);
}
.hp-pips i.on {
  background: var(--text);
}
.hp-chip {
  justify-self: start;
  padding: 0 8px;
  border: 1px solid currentColor;
  font-size: 12px;
  text-transform: uppercase;
}
.hp-ra {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.hp-amend {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
}
.hp-live {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.hp-live-old {
  text-decoration: line-through;
  color: var(--soft);
}
.hp-rwhy {
  margin: 0 0 6px;
  color: var(--soft);
}
.hp-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.hp-rn {
  flex: none;
  font-weight: 700;
}
.hp-rv {
  flex: 1 1 12rem;
  min-width: 0;
}
.hp-rows {
  padding: 0;
}
.hp-sub {
  margin: 12px 0 4px;
}
.hp-err,
.hp-msg {
  margin: 0;
}
.menu-badge {
  display: inline-block;
  min-width: 1.4em;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ember);
  color: var(--bg);
  font-size: 12px;
  text-align: center;
}
@media (min-width: 1024px) and (pointer: fine) {
  .room-v3 .popup-wrap:has(> .popup-host) {
    grid-template-rows: minmax(0, 1fr);
    place-items: stretch end;
  }
  .room-v3 .popup-wrap:has(> .popup-host) > .scrim {
    background: rgba(0, 0, 0, 0.62);
  }
  .room-v3 .popup-host {
    width: 780px;
    max-width: 100%;
    max-height: 100dvh;
    height: 100%;
    box-sizing: border-box;
    border: 0;
    border-left: 1px solid rgba(var(--r3-rule-rgb), 0.6);
    border-radius: 0;
    background: #0b0b0b;
    box-shadow: -24px 0 48px rgba(0, 0, 0, 0.5);
    animation: none;
  }
  .room-v3 .popup-host .who-0 { --who: #ee6a4d; }
  .room-v3 .popup-host .who-1 { --who: #6fb4f0; }
  .room-v3 .popup-host .who-2 { --who: #9bd94a; }
  .room-v3 .popup-host .who-3 { --who: #c593ff; }
  .room-v3 .popup-host .who-4 { --who: #e8c25b; }
  .room-v3 .popup-host .who-5 { --who: #5fd0c6; }
  .room-v3 .popup-host .who-6 { --who: #ff9ec4; }
  .room-v3 .popup-host .who-7 { --who: #ffa24f; }
  .room-v3 .popup-host .popup-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }
  .room-v3 .popup-host .hp {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--r3-body);
  }
  .room-v3 .popup-host .popup-close {
    top: 22px;
    right: 32px;
    width: auto;
    height: auto;
    padding: 5px 18px;
    border: 1px solid rgba(var(--r3-rule-rgb), 0.9);
    border-radius: 0;
    background: transparent;
    color: var(--r3-frame);
    font: italic 800 16px/1.1 var(--r3-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transform: skewX(var(--r3-skew-chip));
  }
  .room-v3 .popup-host .popup-close svg {
    display: none;
  }
  .room-v3 .popup-host .popup-close::after {
    content: "Close";
    display: block;
    transform: skewX(10deg);
  }
  .room-v3 .popup-host .popup-close:focus-visible {
    outline: 2px solid #f2f2f2;
    outline-offset: 3px;
  }
  .room-v3 .hp-top {
    flex: none;
    gap: 16px;
    margin: 0;
    padding: 22px 32px 16px;
    border-bottom: 1px solid rgba(var(--r3-rule-rgb), 0.4);
  }
  .room-v3 .hp-h {
    font: 400 38px/1.1 var(--r3-display);
    color: var(--r3-ink);
  }
  .room-v3 .hp-tag {
    padding: 4px 16px;
    border: 0;
    background: var(--r3-accent);
    color: var(--r3-on-accent);
    transform: skewX(-12deg);
  }
  .room-v3 .hp-tag span {
    display: block;
    transform: skewX(12deg);
    font: italic 800 19px/1 var(--r3-label);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .room-v3 .hp-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    align-content: start;
    gap: 26px;
    padding: 22px 32px 32px;
    overscroll-behavior: contain;
  }
  .room-v3 .hp-lede,
  .room-v3 .hp-body .note {
    margin: 0;
    font: 500 italic 16px/1.5 var(--r3-prose-font);
    color: #cfcfcf;
  }
  .room-v3 .hp-unlock {
    display: grid;
    gap: 12px;
    margin: 0;
  }
  .room-v3 .hp-body label > span:first-child {
    font: italic 800 12px/1.2 var(--r3-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a9a9a9;
  }
  .room-v3 .hp-body input:not([type="checkbox"]) {
    color-scheme: dark;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid rgba(var(--r3-rule-rgb), 0.45);
    border-radius: 0;
    background: var(--r3-inset);
    color: #ececec;
    font: 500 16px/1.45 var(--r3-prose-font);
  }
  .room-v3 .hp-body input:focus,
  .room-v3 .hp-sel:focus {
    outline: 2px solid var(--r3-accent-text);
    outline-offset: 1px;
  }
  .room-v3 .hp-run {
    gap: 12px 20px;
    padding: 14px 18px;
    background: #141414;
    border: 1px solid rgba(var(--r3-rule-rgb), 0.6);
    border-left: 6px solid var(--r3-accent);
  }
  .room-v3 .hp-run-t {
    gap: 14px;
    font: italic 800 19px/1.2 var(--r3-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #e3e3e3;
  }
  .room-v3 .hp-wd {
    color: var(--r3-accent-text);
  }
  .room-v3 .hp-conf {
    gap: 12px;
    font: 500 italic 17px/1.3 var(--r3-prose-font);
    color: #ececec;
  }
  .room-v3 .hp-msg {
    margin: -8px 0 0;
    padding: 8px 14px;
    border-left: 3px solid var(--r3-ph);
    background: #101010;
    font: italic 500 16px/1.4 var(--r3-prose-font);
    color: #cfcfcf;
  }
  .room-v3 .hp-err {
    margin: -8px 0 0;
    padding: 8px 14px;
    border-left: 3px solid var(--r3-accent-text);
    background: #101010;
    font: italic 500 16px/1.4 var(--r3-prose-font);
    color: #f3d6d0;
  }
  .room-v3 .hp-sh {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(227, 227, 227, 0.28);
  }
  .room-v3 .hp-sh h3 {
    font: 400 28px/1.1 var(--r3-display);
    color: var(--r3-ink);
  }
  .room-v3 .hp-qc {
    font: italic 700 14px/1 var(--r3-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a9a9a9;
  }
  .room-v3 .hp-qc .text-btn {
    margin-left: 10px;
    color: var(--r3-accent-text);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
  }
  .room-v3 .hp-empty {
    padding: 26px 0;
    border: 1px dashed rgba(var(--r3-rule-rgb), 0.45);
    font: italic 500 20px/1.4 var(--r3-prose-font);
    color: var(--r3-ph);
  }
  .room-v3 .hp-cards {
    gap: 12px;
  }
  .room-v3 .hp-card {
    position: relative;
    gap: 9px;
    padding: 14px 18px 14px 24px;
    border: 1px solid rgba(var(--r3-rule-rgb), 0.5);
    background: #141414;
  }
  .room-v3 .hp-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--who, var(--r3-rule));
  }
  .room-v3 .hp-ch {
    flex-wrap: nowrap;
    align-items: baseline;
  }
  .room-v3 .hp-ch b {
    font: italic 800 21px/1.1 var(--r3-label);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .room-v3 .hp-kind {
    padding: 1px 9px;
    border: 1px solid rgba(var(--r3-rule-rgb), 0.7);
    font: italic 800 12px/1.4 var(--r3-label);
    letter-spacing: 0.12em;
    color: #c6c6c6;
  }
  .room-v3 .hp-when {
    font: italic 700 14px/1 var(--r3-label);
    letter-spacing: 0.08em;
    color: var(--r3-dim);
    font-variant-numeric: tabular-nums;
  }
  .room-v3 .hp-quote {
    padding: 8px 14px;
    border-left: 3px solid rgba(var(--r3-rule-rgb), 0.7);
    background: #0c0c0c;
    font: 500 16px/1.6 var(--r3-prose-font);
    color: #cfcfcf;
  }
  .room-v3 .hp-qnote {
    font: 500 italic 17px/1.55 var(--r3-prose-font);
    color: #ececec;
  }
  .room-v3 .hp-note,
  .room-v3 .hp-amend {
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(var(--r3-rule-rgb), 0.5);
    background: #0c0c0c;
  }
  .room-v3 .hp-note {
    margin: 0;
  }
  .room-v3 .hp-ta-ed {
    min-height: 8em;
  }
  .room-v3 .hp-nrow {
    gap: 12px;
  }
  .room-v3 .hp-fold {
    margin-top: 4px;
  }
  .room-v3 .hp-fold summary {
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid rgba(var(--r3-rule-rgb), 0.35);
    font: italic 700 15px/1 var(--r3-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #d1d1d1;
    list-style: none;
  }
  .room-v3 .hp-fold summary::-webkit-details-marker {
    display: none;
  }
  .room-v3 .hp-fold summary b {
    color: var(--r3-accent-text);
  }
  .room-v3 .hp-fold summary:focus-visible {
    outline: 2px solid #f2f2f2;
    outline-offset: 3px;
  }
  .room-v3 .hp-dec li {
    gap: 12px;
    padding: 7px 12px;
    background: #101010;
    font: 500 italic 15px/1.4 var(--r3-prose-font);
    color: #cfcfcf;
  }
  .room-v3 .hp-dec li b {
    flex: none;
    font: italic 800 16px/1.2 var(--r3-label);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .room-v3 .hp-dec li i {
    font: italic 700 13px/1 var(--r3-label);
    letter-spacing: 0.08em;
    color: #8f8f8f;
  }
  .room-v3 .hp-rl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
  .room-v3 .hp-rc {
    gap: 6px;
    padding: 10px 10px 12px;
    background: #141414;
    border: 1px solid rgba(var(--r3-rule-rgb), 0.5);
    border-top: 4px solid var(--who, var(--r3-rule));
  }
  .room-v3 .hp-rcn {
    font: italic 800 19px/1.1 var(--r3-label);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }
  .room-v3 .hp-rk {
    min-height: 32px;
    font: italic 600 13px/1.25 var(--r3-label);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #a9a9a9;
  }
  .room-v3 .hp-die {
    display: block;
    color: var(--r3-dim);
    font-variant-numeric: tabular-nums;
  }
  .room-v3 .hp-rt {
    min-height: 46px;
    font: italic 400 24px/1.05 var(--r3-display);
    color: #eaeaea;
  }
  .room-v3 .hp-old {
    margin: 0 0 2px;
    font: italic 400 14px/1.1 var(--r3-display);
    text-decoration-thickness: 1px;
    color: #8d8d8d;
  }
  .room-v3 .hp-pips i {
    background: rgba(227, 227, 227, 0.16);
  }
  .room-v3 .hp-pips i.on {
    background: #eaeaea;
  }
  .room-v3 .hp-chip {
    padding: 2px 9px;
    border: 1px solid var(--r3-accent-text);
    background: rgba(var(--r3-accent-rgb), 0.12);
    font: italic 800 12px/1.2 var(--r3-label);
    letter-spacing: 0.1em;
    color: var(--r3-accent-text);
  }
  .room-v3 .hp-chip.hp-void {
    border-color: #8a8a8a;
    background: #141414;
    color: #b4b4b4;
  }
  .room-v3 .hp-rc[data-status="void"] .hp-rt {
    color: #b4b4b4;
  }
  .room-v3 .hp-rwhy {
    margin: 0 0 10px;
    font: italic 500 15px/1.4 var(--r3-prose-font);
    color: #cfcfcf;
  }
  .room-v3 .hp-amend {
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    margin-top: 12px;
  }
  .room-v3 .hp-amend > .hp-rwhy,
  .room-v3 .hp-amend > .hp-reason,
  .room-v3 .hp-live,
  .room-v3 .hp-amend > .hp-nrow {
    grid-column: 1 / -1;
  }
  .room-v3 .hp-amend > .hp-rwhy {
    margin: 0;
  }
  .room-v3 .hp-sel {
    color-scheme: dark;
    height: 36px;
    max-width: 100%;
    padding: 0 8px;
    border: 1px solid rgba(var(--r3-rule-rgb), 0.6);
    border-radius: 0;
    background: #070707;
    color: #ececec;
    font: italic 600 16px/1 var(--r3-label);
    letter-spacing: 0.04em;
  }
  .room-v3 .hp-sel:disabled {
    opacity: 0.5;
  }
  .room-v3 .hp-live {
    gap: 6px 12px;
    padding: 8px 0;
    border-top: 1px solid rgba(227, 227, 227, 0.16);
    font: italic 600 14px/1.2 var(--r3-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--r3-dim);
  }
  .room-v3 .hp-live-old {
    font: italic 400 17px/1 var(--r3-display);
    text-transform: none;
    color: #8d8d8d;
  }
  .room-v3 .hp-live-new {
    font: italic 400 28px/1 var(--r3-display);
    text-transform: none;
    color: #f0f0f0;
  }
  .room-v3 .hp-live-n {
    font: italic 500 14px/1.2 var(--r3-prose-font);
    letter-spacing: 0;
    text-transform: none;
    color: #a9a9a9;
  }
  .room-v3 .hp-form {
    display: grid;
    gap: 14px;
    margin: 0 0 8px;
  }
  .room-v3 .hp-form .host-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 500 16px/1.4 var(--r3-prose-font);
    color: #ececec;
  }
  .room-v3 .hp-form .host-switch input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--r3-accent);
  }
  .room-v3 .hp-sub {
    margin: 14px 0 4px;
    font: italic 800 14px/1.2 var(--r3-label);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #a9a9a9;
  }
  .room-v3 .hp-list {
    margin: 0 0 4px;
    padding-left: 18px;
    font: 500 15px/1.5 var(--r3-prose-font);
    color: #cfcfcf;
  }
  .room-v3 .hp-body .host-error {
    margin: 0 0 8px;
    padding: 6px 12px;
    border-left: 3px solid var(--r3-accent-text);
    background: #101010;
    font: italic 500 15px/1.4 var(--r3-prose-font);
    color: #f3d6d0;
  }
  .room-v3 .hp-row {
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(227, 227, 227, 0.12);
  }
  .room-v3 .hp-rn {
    min-width: 150px;
    font: italic 800 19px/1.1 var(--r3-label);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--who, #e3e3e3);
  }
  .room-v3 .hp-start .hp-rn {
    color: #e3e3e3;
  }
  .room-v3 .hp-rv {
    font: italic 500 15px/1.3 var(--r3-prose-font);
    color: #a9a9a9;
  }
  .room-v3 .hp-rv .host-tag {
    margin: 0 6px 0 0;
    padding: 1px 8px;
    border: 1px solid rgba(var(--r3-rule-rgb), 0.5);
    font: italic 800 12px/1.3 var(--r3-label);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c6c6c6;
  }
  .room-v3 .hp-rv .host-tag.on {
    border-color: var(--r3-accent-text);
    color: var(--r3-accent-text);
  }
  .room-v3 .host-player-acts,
  .room-v3 .hp-ra {
    display: flex;
    gap: 8px;
  }
  .room-v3 .hp-body .r3-b.sm,
  .room-v3 .host-player-acts .r3-b {
    padding: 3px 14px;
    font-size: 14px;
  }
  .room-v3 .hp-body .host-lock.r3-b {
    min-height: 0;
    padding: 5px 18px;
    border-radius: 0;
    font-size: 16px;
  }
  .room-v3 .hp-body .host-lock.r3-b.pri {
    background: var(--r3-accent);
    color: var(--r3-on-accent);
  }
  .room-v3 .hp-body .host-lock.r3-b:disabled,
  .room-v3 .hp-body .host-player-acts .r3-b:disabled {
    opacity: 0.42;
    border-style: dashed;
  }
  .room-v3 .hp-out {
    justify-self: start;
    color: #a9a9a9;
    font: italic 600 15px/1.2 var(--r3-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .room-v3 .menu-badge {
    background: var(--r3-accent);
    color: var(--r3-on-accent);
  }
}
@media (hover: hover) {
  .room-v3 .popup-host .popup-close:hover {
    border-color: var(--r3-accent-text);
    color: var(--r3-frame);
  }
  .room-v3 .hp-fold summary:hover {
    color: #f0f0f0;
  }
}
@media (min-width: 1024px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .room-v3 .popup-host {
    animation: hp-in 0.2s ease-out backwards;
  }
  .room-v3 .hp-wd i {
    animation: r3-dots 1.2s ease-in-out infinite;
  }
  .room-v3 .hp-wd i:nth-child(2) {
    animation-delay: 0.2s;
  }
  .room-v3 .hp-wd i:nth-child(3) {
    animation-delay: 0.4s;
  }
}
@keyframes hp-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}

/* --- The live GM on the API: the player's status line, the story as it streams, and the host's Live GM and Memory --- */
.gm-stage {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.gm-stage.is-failed {
  font-style: italic;
}
.story-streaming {
  opacity: 0.92;
}
.story-cursor {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--accent);
  opacity: 0.6;
}
@media (prefers-reduced-motion: no-preference) {
  .story-cursor {
    animation: gm-blink 1.1s steps(2, start) infinite;
  }
}
@keyframes gm-blink {
  to {
    visibility: hidden;
  }
}
.gm-meter {
  margin: 4px 0 8px;
}
.gm-bar {
  height: 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.gm-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
}
.gm-bar.is-capped i {
  background: var(--muted);
}
.gm-round {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gm-status {
  margin: 0 0 8px;
}
.gm-status div {
  display: flex;
  gap: 10px;
}
.gm-status dt {
  min-width: 4rem;
  color: var(--muted);
}
.gm-status dd {
  margin: 0;
}
.gm-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 10px;
}
.gm-filters label {
  display: grid;
  gap: 2px;
}
.gm-round-in {
  width: 5rem;
}
.gm-rec-text {
  margin: 4px 0;
}
.gm-rk {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gm-avoid-line {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
}

/* --- Room v3 motion (room-v3.md, 3.2, 3.6, 3.8, 3.10, gap 20) ---
   Play-once motion is gated by flags the client keeps in its store and
   clears once the motion has run: .r3-deal on the room while ui.firstLoad
   holds (the room's first snapshot, never a reconnect) deals the cast in
   and slams the newest round banner; .is-fresh (ui.justRevealed, a reveal
   that came in live) plays the results row and the slam. Only transform,
   opacity and clip-path animate. Under reduced motion the deal-in and the
   results row fade in for .15s and nothing else moves. Phones never get
   .room-v3 rules: every block sits behind the desktop breakpoint. */
@media (min-width: 1024px) and (max-width: 1799.98px) and (pointer: fine) {
  /* The moves column is 440px or less here: the dock card and the status
     bar are set a size down so Combat energy, Write and the count stay inside. */
  .room-v3 .r3c-card {
    min-width: 0;
    padding: 14px 20px 16px 22px;
  }
  .room-v3 .r3c-who {
    font-size: 26px;
  }
  .room-v3 .r3c-top {
    gap: 10px;
  }
  .room-v3 .r3c-enrow {
    gap: 8px;
  }
  .room-v3 .r3m .pips {
    gap: 4px;
  }
  .room-v3 .r3m .pips i {
    width: 20px;
  }
  .room-v3 .r3c-cta > span {
    font-size: 24px;
  }
  .room-v3 .r3m-status {
    gap: 10px;
    padding: 0 20px 0 16px;
  }
  .room-v3 .r3m-main {
    gap: 10px;
    font-size: 16px;
    letter-spacing: 0.04em;
  }
  .room-v3 .r3m-side {
    flex: none;
    font-size: 15px;
    letter-spacing: 0.04em;
  }
}
@media (min-width: 1024px) and (max-width: 1799.98px) and (pointer: fine) {
  .room-v3 .dock-row { display: none; }
  .room-v3 .r3-quest-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    line-height: 1.25;
  }
}
/* The composer's backdrop blurs on a desktop only (a phone never loads this). */
@media (min-width: 1024px) and (pointer: fine) {
  .room-v3 .r3c-dim {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}
@media (min-width: 1024px) and (max-width: 1499.98px) and (pointer: fine) {
  .room-v3 .r3-place {
    font-size: 30px;
  }
  .room-v3 .room-header {
    gap: 22px;
    padding-right: 24px;
  }
  .room-v3 .room-header > [data-region="header"] {
    padding-inline: 28px 0;
  }
  .room-v3 .r3-lanes {
    gap: 14px;
  }
}
/* Room v3 header and rail fixes after the owner's look at a sparse room.
   A long place name wraps and steps down; the Acts list sits at the top
   under its heading and grows downward, a long one still opening on its
   newest act (the list scrolls from the bottom). */
@media (min-width: 1024px) and (pointer: fine) {
  .room-v3 .r3-place {
    -webkit-line-clamp: 3;
  }
  .room-v3 .r3-place-m {
    font-size: 36px;
  }
  .room-v3 .r3-place-s {
    font-size: 28px;
    line-height: 1.12;
  }
  .room-v3 .cf-acts-in {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: auto;
  }
}
@media (min-width: 1024px) and (max-width: 1799.98px) and (pointer: fine) {
  .room-v3 .r3-place-m {
    font-size: 30px;
  }
  .room-v3 .r3-place-s {
    font-size: 25px;
  }
}
@media (min-width: 1024px) and (max-width: 1499.98px) and (pointer: fine) {
  .room-v3 .r3-place-m {
    font-size: 26px;
  }
  .room-v3 .r3-place-s {
    font-size: 23px;
  }
}

@media (min-width: 1024px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .room-v3 .r3-lane-party { --g: 0; }
  .room-v3 .r3-lane-npcs { --g: 4; }
  .room-v3 .r3-lane-threats { --g: 7; }
  .room-v3 .r3-strip > :nth-child(2) { --n: 1; }
  .room-v3 .r3-strip > :nth-child(3) { --n: 2; }
  .room-v3 .r3-strip > :nth-child(4) { --n: 3; }
  .room-v3 .r3-strip > :nth-child(5) { --n: 4; }
  .room-v3 .r3-strip > :nth-child(6) { --n: 5; }
  .room-v3 .r3-strip > :nth-child(n + 7) { --n: 6; }
  .room-v3.r3-deal .r3-strip > .r3-item,
  .room-v3.r3-deal .r3-strip > .r3-slot {
    animation: r3-slice 0.28s var(--r3-ease) calc(0.05s + (var(--g, 0) + var(--n, 0)) * 0.03s) backwards;
  }
  .room-v3.r3-deal .feed > .scene-group:last-child .scene-heading {
    animation: r3-slam 0.9s var(--r3-ease) 0.25s both;
  }
}
@media (min-width: 1024px) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .room-v3 .r3m-move::after {
    transition: none;
  }
  .room-v3.r3-deal .r3-strip > .r3-item,
  .room-v3.r3-deal .r3-strip > .r3-slot,
  .room-v3 .r3-results.is-fresh {
    animation: r3-fade 0.15s ease-out both;
  }
}
@keyframes r3-slice {
  from {
    opacity: 0;
    transform: translateX(-22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}



/* The visual-novel replay of a round (views/vn.js). Desktop room only: the
   button and the region stay hidden below 1024px and on touch. */
.room-v3 .vn-replay,
.room-v3 [data-region="vn"] {
  display: none;
}
@media (min-width: 1024px) and (pointer: fine) {
  .room-v3 [data-region="vn"] {
    display: block;
  }
  .room-v3 .scene-heading:has(.vn-replay) {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .room-v3 .vn-replay {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 18px;
    border: 1px solid rgba(var(--r3-rule-rgb), 0.7);
    background: transparent;
    color: var(--r3-ink);
    font: italic 800 17px/1 var(--r3-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transform: skewX(-8deg);
  }
  .room-v3 .vn-replay > * {
    transform: skewX(8deg);
  }
  .room-v3 .vn-replay:focus-visible {
    background: var(--r3-accent);
    border-color: var(--r3-accent);
    color: var(--r3-on-accent);
  }

  .room-v3 .vn {
    position: fixed;
    inset: 0;
    z-index: 90;
    color: var(--r3-ink);
    font-variant-numeric: tabular-nums;
  }
  .room-v3 .vn :focus-visible {
    outline: 2px solid var(--r3-iv, #f0ece4);
    outline-offset: 3px;
  }
  .room-v3 .vn-listwrap {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .room-v3 .vn-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.74);
  }
  .room-v3 .vn-card {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 880px;
    max-width: calc(100% - 80px);
    max-height: calc(100% - 80px);
    padding: 26px 40px 24px;
    background: #0b0b0b;
    border: 1px solid rgba(var(--r3-rule-rgb), 0.5);
    border-top: 3px solid var(--r3-accent);
    box-shadow: var(--r3-shadow-pop);
  }
  .room-v3 .vn-btn {
    flex: none;
    height: 40px;
    padding: 0 22px;
    border: 1px solid rgba(236, 236, 236, 0.5);
    background: transparent;
    color: #ececec;
    cursor: pointer;
    transform: skewX(-8deg);
  }
  .room-v3 .vn-btn > span {
    display: flex;
    align-items: center;
    gap: 10px;
    transform: skewX(8deg);
    font: italic 800 19px/1 var(--r3-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .room-v3 .vn-btn[aria-pressed="true"] {
    background: rgba(236, 236, 236, 0.14);
  }
  .room-v3 .vn-btn.pri {
    height: 48px;
    padding: 0 30px;
    border-color: var(--r3-accent);
    background: var(--r3-accent);
    color: var(--r3-on-accent);
  }
  .room-v3 .vn-btn.pri > span {
    font-size: 22px;
  }
  .room-v3 .vn-chip {
    flex: none;
    transform: skewX(-12deg);
    padding: 4px 18px;
    background: var(--r3-accent);
    color: var(--r3-on-accent);
    font: italic 800 22px/1.2 var(--r3-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .room-v3 .vn-chip > span {
    display: block;
    transform: skewX(12deg);
  }
  .room-v3 .vn-lhead {
    flex: none;
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .room-v3 .vn-lhead h3,
  .room-v3 .vn-endhead h3 {
    margin: 0;
    font: 400 40px/1.1 var(--r3-display);
    color: #eaeaea;
  }
  .room-v3 .vn-sum {
    flex: 1;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font: italic 700 19px/1.25 var(--r3-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a9a9a9;
  }
  .room-v3 .vn-playrow {
    flex: none;
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 20px 0 6px;
  }
  .room-v3 .vn-hint {
    font: italic 500 17px/1.4 var(--r3-prose-font);
    color: #9a9a9a;
  }
  .room-v3 .vn-rows {
    flex: 1 1 auto;
    min-height: 0;
    margin: 4px 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
  }
  .room-v3 .vn-row {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(var(--r3-rule-rgb), 0.25);
  }
  .room-v3 .vn-thumb {
    position: relative;
    display: block;
    width: 148px;
    height: 84px;
    overflow: hidden;
    background: #0c0c0c;
    clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  }
  .room-v3 .vn-nobg {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: repeating-linear-gradient(115deg, rgba(236, 236, 236, 0.04) 0 2px, rgba(236, 236, 236, 0) 2px 14px), #101010;
    color: #6f6b62;
    font: italic 800 12px/1.2 var(--r3-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
  }
  .room-v3 .vn-rowhead {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .room-v3 .vn-rown {
    flex: none;
    font: italic 800 16px/1 var(--r3-label);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--r3-accent);
  }
  .room-v3 .vn-place {
    min-width: 0;
    font: 400 28px/1.1 var(--r3-display);
    color: #eaeaea;
  }
  .room-v3 .vn-meta {
    margin-top: 6px;
    font: italic 600 16px/1.3 var(--r3-label);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #a9a9a9;
  }

  /* The reader. */
  .room-v3 .vn-stage {
    overflow: hidden;
    background: #000;
  }
  .room-v3 .vn-bg,
  .room-v3 .vn-bg > i {
    position: absolute;
    inset: 0;
  }
  .room-v3 .vn-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .room-v3 .vn-bg-fill {
    background: repeating-linear-gradient(115deg, rgba(236, 236, 236, 0.028) 0 2px, rgba(236, 236, 236, 0) 2px 26px), radial-gradient(ellipse 70% 60% at 50% 36%, #1a1a1a 0, #0b0b0b 62%, #000 100%);
  }
  .room-v3 .vn-vig {
    background: radial-gradient(ellipse 70% 80% at 50% 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0) 52%);
  }
  .room-v3 .vn-bg-name {
    position: absolute;
    inset: 11% 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .room-v3 .vn-nobg-tag {
    padding: 5px 16px;
    border: 1px dashed #5a564f;
    background: #0c0c0c;
    color: #8f8a80;
    font: italic 800 17px/1 var(--r3-label);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .room-v3 .vn-bg-place {
    padding: 0 40px;
    text-align: center;
    font: 400 clamp(36px, 4.4vw, 62px) / 1.05 var(--r3-display);
    color: #d2d2d2;
    text-shadow: 0 2px 14px #000;
  }
  .room-v3 .vn-sprites {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .room-v3 .vn-spr {
    position: absolute;
    left: 50%;
    bottom: 276px;
    width: min(17vw, 260px);
    aspect-ratio: 2 / 3;
    margin-left: calc(min(17vw, 260px) / -2);
    overflow: hidden;
    box-sizing: border-box;
    background: #0c0c0c;
    border: 4px solid var(--r3-rule);
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.6);
    transform: skewX(-8deg);
  }
  .room-v3 .vn-spr img {
    position: absolute;
    left: -12%;
    top: 0;
    width: 124%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transform: skewX(8deg);
  }
  .room-v3 .vn-spr .vn-init {
    position: absolute;
    inset: 0 0 34px;
    display: grid;
    place-items: center;
    transform: skewX(8deg);
    font: 400 clamp(70px, 7vw, 120px) / 1 var(--r3-display);
    color: #3a3a3a;
  }
  .room-v3 .vn-nospr {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 7px 0 8px;
    text-align: center;
    background: rgba(0, 0, 0, 0.72);
    color: #9a968c;
    font: italic 800 14px/1 var(--r3-label);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .room-v3 .vn-adv {
    position: absolute;
    inset: 96px 0 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .room-v3 .vn-adv:focus-visible {
    outline: none;
  }
  .room-v3 .vn-top {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    padding: 24px 40px 14px 44px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0, rgba(0, 0, 0, 0.42) 60%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
  }
  .room-v3 .vn-top .vn-btn {
    pointer-events: auto;
  }
  .room-v3 .vn-where {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
    white-space: nowrap;
  }
  .room-v3 .vn-where .vn-chip {
    font-size: 26px;
    padding: 4px 22px;
  }
  .room-v3 .vn-pl {
    font: italic 800 32px/1.1 var(--r3-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f0f0f0;
    text-shadow: 0 2px 10px #000;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .room-v3 .vn-sc {
    font: italic 700 22px/1.1 var(--r3-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #bdbdbd;
    text-shadow: 0 2px 10px #000;
  }
  .room-v3 .vn-box {
    position: absolute;
    left: 7%;
    right: 7%;
    bottom: 96px;
    z-index: 2;
    box-sizing: border-box;
    min-height: 168px;
    padding: 20px 44px 26px;
    background: rgba(8, 8, 8, 0.9);
    border: 1px solid rgba(var(--r3-rule-rgb), 0.45);
    border-top: 3px solid var(--r3-accent);
    pointer-events: none;
  }
  .room-v3 .vn-plates {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: -38px 0 12px;
  }
  .room-v3 .vn-plate {
    transform: skewX(-12deg);
    padding: 4px 22px;
    background: var(--r3-plate);
    color: var(--r3-on-plate);
    font: italic 800 26px/1.2 var(--r3-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  }
  .room-v3 .vn-plate > span {
    display: block;
    transform: skewX(12deg);
  }
  .room-v3 .vn-plate.narr {
    background: #2a2a2a;
    color: #cfcfcf;
  }
  .room-v3 .vn-note {
    font: italic 600 18px/1 var(--r3-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a9a9a9;
  }
  .room-v3 .vn-line {
    margin: 0;
    font: 500 clamp(20px, 1.7vw, 28px) / 1.6 var(--r3-prose-font);
    color: #f0f0f0;
  }
  .room-v3 .vn-chev {
    position: absolute;
    right: 28px;
    bottom: 12px;
    color: var(--r3-accent);
  }
  .room-v3 .vn-bar {
    position: absolute;
    inset: auto 7% 24px;
    z-index: 3;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 22px;
  }
  .room-v3 .vn-ctl {
    display: flex;
    gap: 14px;
  }
  .room-v3 .vn-bar .vn-btn {
    height: 40px;
  }
  .room-v3 .vn-set {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
  }
  .room-v3 .vn-setl {
    margin: 0 4px 0 12px;
    font: italic 700 15px/1 var(--r3-label);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8f8f8f;
  }
  .room-v3 .vn-opt {
    height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(236, 236, 236, 0.3);
    background: transparent;
    color: #cfcfcf;
    font: italic 700 15px/1 var(--r3-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .room-v3 .vn-opt[aria-pressed="true"] {
    background: #ececec;
    border-color: #ececec;
    color: #0a0a0a;
  }
  .room-v3 .vn-count {
    margin-left: auto;
    font: italic 700 18px/1 var(--r3-label);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #bdbdbd;
  }
  .room-v3 .vn-log {
    position: absolute;
    inset: 96px 7% 90px auto;
    z-index: 4;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: min(560px, 86%);
    padding: 18px 24px;
    background: rgba(8, 8, 8, 0.96);
    border: 1px solid rgba(var(--r3-rule-rgb), 0.5);
    border-top: 3px solid var(--r3-accent);
  }
  .room-v3 .vn-lg-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .room-v3 .vn-lg-top h4 {
    margin: 0;
    font: 400 28px/1.1 var(--r3-display);
  }
  .room-v3 .vn-lg-list {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
  }
  .room-v3 .vn-lg-scene {
    margin: 12px 0 6px;
    font: italic 800 15px/1 var(--r3-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--r3-accent);
  }
  .room-v3 .vn-lg-line {
    padding: 6px 0;
    font: 500 17px/1.5 var(--r3-prose-font);
    color: #dcdcdc;
  }
  .room-v3 .vn-lg-who {
    display: block;
    font: italic 800 15px/1.2 var(--r3-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #f0f0f0;
  }
  .room-v3 .vn-lg-who.dim {
    color: #8f8f8f;
  }

  /* The end of the round: the results card. */
  .room-v3 .vn-endwrap {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .room-v3 .vn-end {
    z-index: 3;
    width: min(1280px, calc(100% - 80px));
    overflow-y: auto;
  }
  .room-v3 .vn-endhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
  }
  .room-v3 .vn-noroll {
    margin: 0;
    font: italic 500 18px/1.4 var(--r3-prose-font);
    color: #9a9a9a;
  }
}
@keyframes vn-c {
  to {
    opacity: 1;
  }
}
.room-v3 .vn-typing .vn-c {
  opacity: 0;
  animation: vn-c 1ms linear both;
  animation-delay: calc(var(--i) * var(--ms, 0ms));
}
@media (hover: hover) and (min-width: 1024px) and (pointer: fine) {
  .room-v3 .vn-replay:hover {
    background: var(--r3-accent);
    border-color: var(--r3-accent);
    color: var(--r3-on-accent);
  }
  .room-v3 .vn-btn:hover {
    background: rgba(236, 236, 236, 0.14);
  }
  .room-v3 .vn-btn.pri:hover {
    background: var(--r3-accent);
    filter: brightness(1.12);
  }
}
@media (min-width: 1024px) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .room-v3 .vn-typing .vn-c {
    animation-name: none;
    opacity: 1;
  }
}