/* redthread — The Glassbridge Society · v1.1
   Gaslit amber-on-charcoal. The lens-ring is the motif; restraint is the rule.
   Typography is the budget. The half-second-late reflection is the soul. */

:root {
  --prose-scale: 1.1;          /* reading-text multiplier (A−/A+ in the header) */
  --ink:        #100d09;
  --ink-1:      #14110c;
  --ink-2:      #1c1812;
  --panel:      #1f1a13;
  --panel-2:    #261f16;
  --panel-3:    #2d2417;
  --edge:       #3a2f20;
  --edge-soft:  #2c2418;
  --edge-hair:  #241d14;
  --parchment:  #ece1c9;
  --parch-dim:  #c3b495;
  --muted-txt:  #8c7c60;
  --faint:      #6a5d46;
  --amber:      #d9a441;
  --amber-lo:   #b78638;
  --amber-glow: #f4d590;
  --amber-deep: #8a6526;
  --thread:     #b23a4c;
  --thread-lo:  #7e2735;
  --thread-glow:#e2697a;
  --good:       #6fae84;
  --bad:        #c4604f;
  --shadow:     0 12px 40px rgba(0,0,0,.55);
  --shadow-sm:  0 4px 16px rgba(0,0,0,.4);
  --serif:      "EB Garamond", Georgia, serif;
  --display:    "Cinzel", serif;
  --smallcaps:  "IM Fell English SC", "EB Garamond", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--parchment);
  font-family: var(--serif);
  font-size: 18px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* atmosphere layers — lamp-glow + vignette + a breath of grain */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1300px 900px at 72% -12%, rgba(60,44,22,.55) 0%, rgba(36,27,16,0) 58%),
    radial-gradient(1000px 800px at 8% 112%, rgba(40,32,20,.5) 0%, rgba(29,24,16,0) 55%),
    radial-gradient(140% 120% at 50% 42%, rgba(0,0,0,0) 56%, rgba(0,0,0,.5) 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
#app { height: 100%; position: relative; z-index: 1; }

/* ── screens ────────────────────────────────── */
.screen { display: none; height: 100%; }
.screen.active { display: block; animation: screen-in .7s cubic-bezier(.2,.7,.2,1) both; }
#screen-game.active { display: flex; flex-direction: column; }
.hidden { display: none !important; }
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── buttons ────────────────────────────────── */
button { font-family: inherit; cursor: pointer; border: none; }
.btn-primary {
  position: relative;
  background: linear-gradient(180deg, var(--amber-glow) 0%, var(--amber) 42%, var(--amber-lo) 100%);
  color: #20160a; font-weight: 600; letter-spacing: .08em;
  padding: .7em 1.6em; border-radius: 3px; font-size: .82rem;
  font-family: var(--display); text-transform: uppercase;
  box-shadow: 0 2px 0 var(--amber-deep), var(--shadow-sm);
  transition: transform .08s, filter .18s, box-shadow .18s;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.09); box-shadow: 0 2px 0 var(--amber-deep), 0 0 26px rgba(244,213,144,.28), var(--shadow-sm); }
.btn-primary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 var(--amber-deep); }
.btn-primary:disabled { opacity: .3; cursor: default; filter: saturate(.5); }
.btn-ghost {
  background: transparent; color: var(--amber);
  border: 1px solid var(--edge); padding: .58em 1.1em; border-radius: 3px;
  font-family: var(--display); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  transition: border-color .18s, background .18s, color .18s;
}
.btn-ghost:hover { border-color: var(--amber-lo); background: rgba(217,164,65,.07); color: var(--amber-glow); }
.btn-icon { background: transparent; color: var(--parch-dim); font-size: 1.25rem; padding: .2em .45em; border-radius: 3px; transition: color .18s, background .18s; }
.btn-icon:hover { color: var(--amber); background: rgba(217,164,65,.06); }
.btn-icon.active { color: var(--amber-glow); background: rgba(217,164,65,.1); box-shadow: inset 0 0 0 1px var(--edge); }

/* ── lens-ring motif ────────────────────────── */
.lens-ring { position: relative; width: 240px; height: 240px; margin: 0 auto; }
.lens-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lens-ring .ring-rot { transform-origin: 120px 120px; animation: ring-spin 64s linear infinite; }
.lens-ring .ring-ghost { transform-origin: 120px 120px; animation: ring-spin 64s linear infinite; animation-delay: -.45s; opacity: .26; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
.lens-ring .lens { fill: rgba(244,213,144,.05); stroke: var(--amber-lo); stroke-width: 1; }
.lens-ring .lens-lit { fill: rgba(244,213,144,.16); stroke: var(--amber-glow); filter: drop-shadow(0 0 6px rgba(244,213,144,.5)); animation: lens-gutter 5s ease-in-out infinite; }
@keyframes lens-gutter { 0%,100% { opacity: .9; } 45% { opacity: .55; } 70% { opacity: 1; } }
.lens-ring .ring-core { fill: none; stroke: var(--edge); stroke-width: .75; opacity: .6; }

/* ── title screen ───────────────────────────── */
.title-inner {
  max-width: 760px; margin: 0 auto; min-height: 100%; padding: 4vh 24px 6vh;
  display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center;
}
.title-ring-wrap { position: relative; margin-bottom: -54px; }
.brand {
  font-family: var(--display); font-weight: 700; position: relative;
  font-size: clamp(2.9rem, 9vw, 5.4rem); letter-spacing: .16em; margin: 0; padding-left: .16em;
  color: var(--amber-glow); text-shadow: 0 0 30px rgba(244,213,144,.3), 0 2px 0 rgba(0,0,0,.4);
}
.brand .late {
  position: absolute; left: 0; top: 0; right: 0; color: var(--thread); opacity: .0;
  letter-spacing: .16em; padding-left: .16em; transform: translate(2px,1px);
  animation: late-reflection 7s ease-in-out infinite; pointer-events: none;
}
@keyframes late-reflection { 0%,86%,100% { opacity: 0; } 90% { opacity: .22; } 94% { opacity: .05; } }
.subbrand { font-family: var(--smallcaps); font-variant: small-caps; letter-spacing: .34em; color: var(--amber); font-size: .9rem; margin: .5em 0 0; opacity: .85; }
.tagline { color: var(--parch-dim); font-style: italic; max-width: 32em; margin: 1em 0 2.4em; }
.rule-orn { display: flex; align-items: center; gap: 14px; color: var(--edge); width: 100%; max-width: 420px; margin: 0 auto 1.8em; }
.rule-orn::before, .rule-orn::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--edge), transparent); }
.rule-orn .dot { color: var(--amber-lo); font-size: .7rem; }
.campaign-card {
  width: 100%; background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--edge); border-radius: 7px; padding: 1.7em 1.9em; text-align: left;
  box-shadow: var(--shadow); margin-bottom: 1.9em; position: relative; overflow: hidden;
}
.campaign-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--amber), var(--amber-deep)); opacity: .8; }
.campaign-card h3 { font-family: var(--display); color: var(--amber-glow); margin: 0 0 .15em; letter-spacing: .04em; font-size: 1.45rem; }
.campaign-card .setting { color: var(--muted-txt); font-style: italic; font-size: .92rem; font-variant: small-caps; letter-spacing: .06em; }
.campaign-card .blurb { margin: .9em 0 0; color: var(--parch-dim); }
.campaign-card .meta-row { display: flex; gap: 18px; margin-top: 1.1em; padding-top: 1em; border-top: 1px solid var(--edge-hair); flex-wrap: wrap; }
.campaign-card .meta-row .m { font-size: .76rem; color: var(--muted-txt); letter-spacing: .04em; }
.campaign-card .meta-row .m b { color: var(--amber); font-weight: 600; font-variant: small-caps; font-size: .9rem; }
.title-actions { margin-bottom: 1.4em; }
.resume-wrap { width: 100%; text-align: left; border-top: 1px solid var(--edge-soft); padding-top: 1.2em; }
.resume-wrap h4 { font-family: var(--display); color: var(--muted-txt); font-weight: 500; letter-spacing: .08em; margin: 0 0 .7em; text-transform: uppercase; font-size: .78rem; }
.resume-row { display: flex; justify-content: space-between; align-items: center; padding: .6em .9em; border: 1px solid var(--edge-soft); border-radius: 4px; margin-bottom: .45em; cursor: pointer; transition: border-color .18s, background .18s; }
.resume-row:hover { border-color: var(--amber-lo); background: rgba(217,164,65,.05); }
.resume-row .when { color: var(--muted-txt); font-size: .82rem; }
.loading { color: var(--muted-txt); font-style: italic; }
.demo-note { margin-top: 1.6em; color: var(--faint); font-size: .78rem; font-style: italic; max-width: 34em; }

/* ── character select (v1.1 — shared claimable roster) ── */
.select-inner { max-width: 1120px; margin: 0 auto; padding: 4.5vh 28px 5vh; }
.select-head-wrap { text-align: center; margin-bottom: 1.6em; }
.screen-head { font-family: var(--display); color: var(--amber-glow); letter-spacing: .07em; margin: .2em 0; font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.screen-sub { color: var(--parch-dim); font-style: italic; max-width: 44em; margin: .4em auto 0; }

/* the two seat plates */
.seat-plates { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 760px; margin: 0 auto 2em; }
.seat-plate {
  display: flex; align-items: center; gap: 14px; padding: .9em 1.1em;
  border: 1px solid var(--edge); border-radius: 7px; background: linear-gradient(180deg, var(--panel-2), var(--panel));
  transition: border-color .2s, box-shadow .2s; position: relative;
}
.seat-plate.is-active { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber-lo), 0 0 24px rgba(217,164,65,.14); }
.seat-plate.is-filled { border-color: var(--amber-lo); }
.seat-plate .seat-no { font-family: var(--display); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); white-space: nowrap; }
.seat-plate .player-name {
  background: var(--ink-2); color: var(--parchment); border: 1px solid var(--edge-soft);
  border-radius: 3px; padding: .42em .65em; font-family: var(--serif); font-size: 1rem; width: 8.5em; min-width: 0;
}
.seat-plate .player-name:focus { outline: none; border-color: var(--amber-lo); }
.seat-plate .claimed { flex: 1; min-width: 0; }
.seat-plate .claimed .c-name { font-family: var(--display); color: var(--amber-glow); font-size: 1.02rem; line-height: 1.1; }
.seat-plate .claimed .c-arch { color: var(--muted-txt); font-style: italic; font-size: .82rem; font-variant: small-caps; letter-spacing: .04em; }
.seat-plate .claimed.empty-slot { color: var(--faint); font-style: italic; font-size: .9rem; }
.seat-plate .unclaim { background: transparent; border: 1px solid var(--edge); color: var(--muted-txt); border-radius: 999px; width: 26px; height: 26px; font-size: .9rem; line-height: 1; flex: 0 0 auto; transition: color .15s, border-color .15s; }
.seat-plate .unclaim:hover { color: var(--bad); border-color: var(--bad); }
.seat-hint { text-align: center; color: var(--muted-txt); font-style: italic; font-size: .9rem; margin: -1em auto 1.6em; min-height: 1.3em; }
.party-preview {
  max-width: 820px; margin: -1em auto 1.5em; border: 1px solid var(--edge-soft);
  border-radius: 7px; background: linear-gradient(180deg, rgba(217,164,65,.055), rgba(31,26,19,.62));
  padding: 10px 12px; min-height: 54px;
}
.pp-empty { color: var(--faint); font-style: italic; text-align: center; font-size: .86rem; padding: 5px 0; }
.pp-roster { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pp-seat {
  display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 6px 8px;
  border: 1px dashed var(--edge); border-radius: 5px; color: var(--faint);
}
.pp-seat.filled { border-style: solid; border-color: var(--amber-deep); background: rgba(217,164,65,.04); }
.pp-seat span { font-family: var(--display); color: var(--amber-lo); font-size: .7rem; }
.pp-seat b { color: var(--parchment); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-seat em { margin-left: auto; color: var(--muted-txt); font-size: .78rem; font-variant: small-caps; letter-spacing: .04em; }
.pp-read {
  display: flex; justify-content: center; gap: 14px; margin-top: 8px; color: var(--muted-txt);
  font-family: var(--smallcaps); font-variant: small-caps; letter-spacing: .05em; font-size: .78rem;
}

/* the roster of four characters */
.roster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.char-card {
  position: relative; text-align: left; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--edge-soft);
  border-radius: 8px; padding: 0; overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s;
}
.char-card:hover:not(.is-taken) { border-color: var(--amber-lo); transform: translateY(-3px); box-shadow: var(--shadow); }
.char-card.is-taken { opacity: .46; filter: saturate(.5); }
.char-card .sigil-band { height: 92px; position: relative; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 140% at 50% 0%, rgba(217,164,65,.14), rgba(0,0,0,0) 70%), var(--ink-2);
  border-bottom: 1px solid var(--edge-hair); }
.char-card .sigil { width: 56px; height: 56px; color: var(--amber); opacity: .9; }
.char-card .sigil-mark { font-size: 2.25rem; color: var(--amber); text-shadow: 0 0 18px rgba(244,213,144,.22); }
.char-card .taken-stamp { position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  font-family: var(--smallcaps); font-variant: small-caps; letter-spacing: .12em; color: var(--amber-glow);
  background: rgba(16,13,9,.66); font-size: .92rem; }
.char-card.is-taken .taken-stamp { display: flex; }
.char-card .cc-body { padding: .9em 1em 1em; display: flex; flex-direction: column; flex: 1; }
.char-card .cc-name { font-family: var(--display); color: var(--amber-glow); font-size: 1.08rem; line-height: 1.12; }
.char-card .cc-arch { color: var(--amber-lo); font-variant: small-caps; letter-spacing: .08em; font-size: .76rem; margin: .15em 0 .5em; }
.char-card .cc-style { display: flex; flex-wrap: wrap; gap: 5px; margin: -.25em 0 .55em; }
.char-card .cc-style span {
  border: 1px solid var(--edge); border-radius: 999px; color: var(--muted-txt);
  font-size: .66rem; line-height: 1; padding: .22em .58em; font-family: var(--smallcaps);
  font-variant: small-caps; letter-spacing: .04em;
}
.char-card .cc-role { color: var(--muted-txt); font-style: italic; font-size: .82rem; line-height: 1.4; margin-bottom: .6em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.char-card .cc-pitch { color: var(--parch-dim); font-size: .9rem; line-height: 1.5; flex: 1; }
.char-card .cc-traits { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; margin: .8em 0 0; padding-top: .7em; border-top: 1px solid var(--edge-hair); }
.char-card .cc-traits .tt { display: flex; justify-content: space-between; font-size: .76rem; }
.char-card .cc-traits .tt .n { color: var(--muted-txt); font-variant: small-caps; letter-spacing: .03em; }
.char-card .cc-traits .tt .p { color: var(--amber); letter-spacing: 1px; }
.char-card .cc-secret { margin-top: .7em; font-size: .76rem; color: var(--thread-glow); font-style: italic; display: flex; gap: .4em; align-items: baseline; }
.char-card .cc-more { margin-top: .8em; align-self: flex-start; background: transparent; border: none; color: var(--amber-lo); font-family: var(--display); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; padding: .2em 0; display: inline-flex; gap: .4em; align-items: center; cursor: pointer; transition: color .15s; }
.char-card .cc-more:hover { color: var(--amber-glow); }
.char-card .cc-more .chev { font-size: .9em; }
.char-card .cc-briefing { margin-top: .5em; padding-top: .7em; border-top: 1px solid var(--edge-hair); font-size: .84rem; line-height: 1.55; color: var(--parch-dim); animation: entry-in .4s both; }
.char-card .cc-claim { display: flex; gap: 8px; padding: 0 1em 1em; }
.char-card .cc-claim .claim-btn {
  flex: 1; background: var(--panel-3); border: 1px solid var(--edge); color: var(--parch-dim);
  border-radius: 4px; padding: .5em; font-family: var(--display); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
  transition: all .15s;
}
.char-card .cc-claim .claim-btn:hover:not(:disabled) { border-color: var(--amber); color: var(--amber-glow); background: rgba(217,164,65,.08); }
.char-card .cc-claim .claim-btn:disabled { opacity: .35; cursor: default; }
.char-card .cc-claim .claim-btn.mine { background: linear-gradient(180deg, var(--amber), var(--amber-lo)); color: #20160a; border-color: var(--amber); }

.select-actions { display: flex; gap: 14px; margin-top: 2.2em; justify-content: center; align-items: center; }
.begin-status { margin-top: 1em; color: var(--muted-txt); font-style: italic; min-height: 1.4em; text-align: center; }

/* ── game header ────────────────────────────── */
#game-header {
  display: flex; align-items: center; gap: 16px;
  padding: 11px 20px; border-bottom: 1px solid var(--edge);
  background: linear-gradient(180deg, var(--ink-2), var(--ink-1)); flex: 0 0 auto; z-index: 5;
}
#scene-banner { font-family: var(--display); letter-spacing: .08em; color: var(--muted-txt); font-size: .82rem; flex: 0 0 auto; text-transform: uppercase; }
#act-label { color: var(--amber); }
#scene-title { color: var(--amber-glow); font-variant: normal; text-transform: none; font-family: var(--smallcaps); letter-spacing: .02em; font-size: 1.05rem; }
.brand-mini { font-family: var(--display); color: var(--amber); letter-spacing: .12em; font-size: .9rem; margin-right: 4px; }
.seat-switch { display: flex; gap: 8px; margin-left: auto; }
.seat-btn {
  display: flex; align-items: center; gap: .5em;
  background: var(--panel); color: var(--parch-dim); border: 1px solid var(--edge);
  border-radius: 999px; padding: .35em .95em; font-family: var(--display); font-size: .74rem; letter-spacing: .04em;
  transition: all .18s;
}
.seat-btn .who-player { color: var(--faint); font-size: .9em; }
.seat-btn:hover { border-color: var(--amber-lo); }
.seat-btn.active { background: linear-gradient(180deg, var(--amber), var(--amber-lo)); color: #20160a; border-color: var(--amber); font-weight: 600; }
.seat-btn.active .who-player { color: #4a3410; }

/* ── game body ──────────────────────────────── */
#game-body { flex: 1; display: flex; min-height: 0; }
#chat-pane { flex: 1.7; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--edge); position: relative; overflow: hidden; }
#chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 24px max(24px, 5%) 14px; scroll-behavior: smooth; }

/* chat entries */
.entry { margin: 0 auto 1.6em; max-width: 42em; animation: entry-in .65s cubic-bezier(.2,.7,.2,1) both; }
@keyframes entry-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.entry.narrator .prose > p { margin: 0 0 1em; }
.entry.narrator .prose { color: var(--parchment); font-size: calc(1.16rem * var(--prose-scale)); line-height: 1.75; overflow-wrap: break-word; }
.entry.narrator .prose em { color: var(--parch-dim); }
.entry.narrator .prose strong { color: var(--amber-glow); font-weight: 600; }
.entry.scene-open .prose > p:first-child::first-letter {
  float: left; font-family: var(--display); font-size: 3.8em; line-height: .7;
  padding: .04em .14em 0 0; color: var(--amber); text-shadow: 0 0 22px rgba(244,213,144,.35);
}
.npc-name { font-family: var(--smallcaps); font-variant: small-caps; color: var(--amber); letter-spacing: .02em; }
.entry.pc { border-left: 2px solid var(--edge); padding-left: 1.1em; }
.entry.pc .who { font-family: var(--display); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-lo); margin-bottom: .15em; }
.entry.pc .who .kind { color: var(--faint); }
.entry.pc .said { color: var(--parch-dim); font-style: italic; font-size: 1.04rem; }
.entry.system { text-align: center; color: var(--muted-txt); font-style: italic; font-size: .9rem; }
.entry.tarot-cast { text-align: center; }
.entry.scene-divider { text-align: center; color: var(--amber-lo); font-family: var(--display); letter-spacing: .14em; font-size: .82rem; text-transform: uppercase; margin: 2.4em auto; max-width: 46em; }
.entry.scene-divider span { display: inline-block; padding: 0 1em; }
.entry.scene-divider::before, .entry.scene-divider::after { content: "✦"; color: var(--edge); margin: 0 .2em; }

/* thinking — a guttering lens */
.thinking { display: flex; align-items: center; gap: 12px; padding: 6px max(24px,5%) 12px; color: var(--muted-txt); font-style: italic; max-width: 46em; margin: 0 auto; width: 100%; }
.thinking .gutter-lens { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--amber-lo); position: relative; flex: 0 0 auto; }
.thinking .gutter-lens::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--amber-glow), var(--amber-deep)); animation: gutter 1.3s ease-in-out infinite; }
@keyframes gutter { 0%,100% { opacity: .9; transform: scale(1); } 45% { opacity: .35; transform: scale(.82); } 70% { opacity: 1; transform: scale(1.05); } }

/* action bar */
#action-bar { border-top: 1px solid var(--edge); background: linear-gradient(180deg, var(--ink-1), var(--ink-2)); padding: 10px max(16px,4%) 12px; flex: 0 0 auto; }
.quick-actions { display: flex; flex-wrap: nowrap; gap: 8px; margin-bottom: 8px; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; scrollbar-width: thin; }
.quick-actions .qa { flex: 0 0 auto; }
.qa {
  background: var(--panel); border: 1px solid var(--edge); color: var(--parch-dim);
  border-radius: 999px; padding: .42em 1.05em; font-family: var(--serif); font-size: .94rem;
  transition: all .15s; animation: entry-in .5s both;
}
.qa:hover { border-color: var(--amber); color: var(--amber-glow); background: rgba(217,164,65,.08); }
.qa.qa-tarot { border-color: var(--thread-lo); color: var(--thread-glow); }
.qa.qa-tarot:hover { border-color: var(--thread); background: rgba(178,58,76,.1); }
#input-row { display: flex; gap: 8px; align-items: flex-end; max-width: 52em; }
#action-kind { background: var(--panel); color: var(--amber); border: 1px solid var(--edge); border-radius: 3px; padding: .62em .4em; font-family: var(--display); font-size: .72rem; letter-spacing: .04em; align-self: stretch; }
#player-input {
  flex: 1; resize: none; background: var(--ink); color: var(--parchment);
  border: 1px solid var(--edge); border-radius: 4px; padding: .65em .85em;
  font-family: var(--serif); font-size: 1.06rem; line-height: 1.4; max-height: 160px; overflow-y: auto;
}
#player-input::placeholder { color: var(--faint); font-style: italic; }
#player-input:focus { outline: none; border-color: var(--amber-lo); box-shadow: 0 0 0 1px rgba(183,134,56,.3); }

/* ── dashboard ──────────────────────────────── */
#dashboard { flex: 1; min-width: 320px; max-width: 470px; overflow-y: auto; padding: 18px; background: linear-gradient(180deg, var(--ink-1), var(--ink-2)); }
.panel { background: var(--panel); border: 1px solid var(--edge-soft); border-radius: 7px; padding: 13px 15px; margin-bottom: 15px; box-shadow: var(--shadow-sm); }
.panel-head { display: flex; align-items: center; gap: .6em; font-family: var(--display); color: var(--amber); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .8em; border-bottom: 1px solid var(--edge-soft); padding-bottom: .5em; }
.panel-head .ph-orn { color: var(--edge); font-size: .8em; }
.panel-head .ph-count { margin-left: auto; color: var(--faint); font-size: .9em; letter-spacing: 0; }

/* pc sheets */
.pc-sheet { margin-bottom: 15px; padding-bottom: 14px; border-bottom: 1px dashed var(--edge-hair); }
.pc-sheet:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.pc-sheet.is-acting { }
.pc-head { display: flex; align-items: baseline; gap: .5em; }
.pc-name { font-family: var(--display); color: var(--amber-glow); font-size: 1.04rem; }
.pc-acting-tag { font-family: var(--smallcaps); font-variant: small-caps; font-size: .64rem; color: var(--amber); letter-spacing: .08em; margin-left: auto; white-space: nowrap; border: 1px solid var(--edge); border-radius: 999px; padding: .1em .7em; align-self: center; }
.pc-role { color: var(--muted-txt); font-style: italic; font-size: .82rem; margin: .25em 0 .5em; }
.traits { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; margin: .5em 0; }
.trait { display: flex; justify-content: space-between; align-items: center; font-size: .86rem; }
.trait .t-name { color: var(--parch-dim); font-variant: small-caps; letter-spacing: .04em; }
.pips { letter-spacing: 1.5px; color: var(--amber); font-size: .9em; }
.pip-off { color: var(--edge); }
.pip-up { animation: pip-light .9s ease; }
@keyframes pip-light { 0% { color: var(--amber-glow); text-shadow: 0 0 10px var(--amber-glow); } 100% { color: var(--amber); text-shadow: none; } }
.secret-toggle { font-size: .8rem; color: var(--thread); cursor: pointer; font-style: italic; margin-top: .5em; display: inline-flex; gap: .35em; align-items: center; transition: color .15s; }
.secret-toggle:hover { color: var(--thread-glow); }
.secret-body { font-size: .86rem; color: var(--parch-dim); border-left: 2px solid var(--thread-lo); padding-left: .8em; margin-top: .5em; background: rgba(178,58,76,.04); padding: .6em .85em; border-radius: 0 4px 4px 0; }
.secret-body p { margin: 0 0 .6em; }
.secret-body p:last-child { margin-bottom: 0; }
.secret-twist { margin-top: .7em; padding: .55em .75em; border: 1px solid var(--thread-lo); border-radius: 4px; background: rgba(178,58,76,.07); }
.secret-twist .tw-label { display: block; font-family: var(--smallcaps); font-variant: small-caps; letter-spacing: .06em; color: var(--thread-glow); font-size: .82rem; margin-bottom: .35em; }
.secret-twist p { margin: 0 0 .5em; color: var(--parchment); }
.secret-twist p:last-child { margin-bottom: 0; }
.mini-list { list-style: none; padding: 0; margin: .4em 0 0; }
.mini-list li { font-size: .86rem; color: var(--parch-dim); padding: .14em 0; }
.mini-list li .sig { color: var(--amber); }
.scar { color: var(--bad); }
.empty { color: var(--faint); font-style: italic; font-size: .84rem; }

/* case board */
#case-board { position: relative; }
#red-string { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.case-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; z-index: 1; }
.case-col h4 { font-family: var(--display); color: var(--muted-txt); font-weight: 500; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .6em; }
.suspect, .clue {
  background: var(--panel-2); border: 1px solid var(--edge-soft); border-radius: 4px;
  padding: .55em .65em; margin-bottom: 9px; position: relative; animation: entry-in .5s both;
}
.suspect, .clue { cursor: pointer; transition: border-color .16s, box-shadow .16s, transform .12s, background .16s; }
.suspect { box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.suspect:hover, .clue:hover { border-color: var(--amber-deep); background: rgba(217,164,65,.04); }
.clue.selected {
  border-color: var(--amber); box-shadow: 0 0 18px -10px var(--amber-glow), inset 0 0 0 1px rgba(244,213,144,.1);
}
#case-board.selecting .suspect.can-link { border-style: dashed; }
#case-board.selecting .suspect.can-link:hover {
  border-color: var(--thread); transform: translateY(-1px); box-shadow: 0 0 16px -10px var(--thread-glow);
}
.suspect.linked-to-selected {
  border-color: var(--thread); background: rgba(178,58,76,.08);
  box-shadow: 0 0 18px -11px var(--thread-glow);
}
.suspect .s-name { font-family: var(--smallcaps); font-variant: small-caps; color: var(--amber-glow); font-size: .96rem; }
.suspect .s-role { color: var(--muted-txt); font-size: .74rem; font-style: italic; line-height: 1.35; }
.suspect .s-foot { color: var(--faint); font-size: .68rem; font-variant: small-caps; letter-spacing: .04em; margin-top: .12em; }
.disp-meter { height: 4px; border-radius: 2px; background: var(--edge); margin-top: .45em; position: relative; overflow: hidden; }
.disp-meter > i { position: absolute; top: 0; bottom: 0; transition: width .5s, left .5s; }
.clue .c-title { color: var(--parchment); font-size: .88rem; font-weight: 600; line-height: 1.25; }
.clue .c-desc { color: var(--muted-txt); font-size: .78rem; line-height: 1.4; margin-top: .1em; }
.clue .c-theory { margin-top: .35em; padding-top: .32em; border-top: 1px dashed var(--edge);
  color: var(--amber-lo); font-size: .74rem; font-style: italic; line-height: 1.35; }
.clue-theory {
  float: right; margin-left: .4em; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--edge); background: rgba(16,13,9,.45); color: var(--muted-txt);
  font-size: .72rem; line-height: 1; transition: color .15s, border-color .15s, background .15s;
}
.clue-theory:hover { color: var(--amber-glow); border-color: var(--amber-lo); background: rgba(217,164,65,.08); }
.imp { float: right; color: var(--amber); letter-spacing: 1px; font-size: .78rem; }
.pin { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--thread-glow), var(--thread)); top: 9px; box-shadow: 0 0 4px rgba(178,58,76,.6); }
.suspect .pin { right: -4px; } .clue .pin { left: -4px; }
#red-string path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: string-draw .9s ease forwards; }
@keyframes string-draw { to { stroke-dashoffset: 0; } }

/* dossiers */
.dossier { color: var(--parchment); }
.dossier-kicker {
  font-family: var(--smallcaps); font-variant: small-caps; color: var(--amber-lo);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
}
.dossier-title {
  font-family: var(--display); color: var(--amber-glow); font-size: 1.55rem;
  margin: .15em 0 .25em; line-height: 1.15;
}
.dossier-meta { display: flex; gap: 12px; color: var(--muted-txt); font-size: .82rem; margin-bottom: .85em; }
.dossier-body { color: var(--parch-dim); font-size: .98rem; line-height: 1.55; overflow-wrap: anywhere; }
.dossier-section { margin-top: 1.1em; padding-top: .9em; border-top: 1px solid var(--edge-soft); }
.dossier-section h3 {
  font-family: var(--display); color: var(--amber); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .65em;
}
.dossier-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.dossier-chip, .dossier-row {
  border: 1px solid var(--edge); background: var(--panel); color: var(--parch-dim);
  border-radius: 999px; padding: .35em .85em; font-family: var(--smallcaps);
  font-variant: small-caps; font-size: .8rem; letter-spacing: .04em;
}
.dossier-chip:hover, .dossier-row:hover { border-color: var(--amber-lo); color: var(--amber-glow); background: rgba(217,164,65,.07); }
.dossier-list { display: flex; flex-direction: column; gap: 7px; }
.dossier-row {
  width: 100%; border-radius: 5px; display: flex; justify-content: space-between; gap: 12px;
  text-align: left; align-items: center;
}
.dossier-row.static { cursor: default; }
.dossier-empty { color: var(--faint); font-size: .86rem; font-style: italic; }
#clue-theory-field {
  width: 100%; resize: vertical; min-height: 120px; max-height: 280px;
  background: var(--ink); color: var(--parchment); border: 1px solid var(--edge);
  border-radius: 5px; padding: .7em .85em; font-family: var(--serif); font-size: 1rem; line-height: 1.45;
}
#clue-theory-field:focus { outline: none; border-color: var(--amber-lo); box-shadow: 0 0 0 1px rgba(217,164,65,.16); }
.dossier-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: .75em; }
.dossier-meter {
  height: 8px; border: 1px solid var(--edge); border-radius: 5px; overflow: hidden;
  background: var(--ink);
}
.dossier-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--thread-lo), var(--amber), var(--good)); }
.dossier-sub { margin-top: .4em; color: var(--muted-txt); font-size: .84rem; font-style: italic; }

/* bonds */
.bond { font-size: .86rem; margin-bottom: .7em; }
.bond:last-child { margin-bottom: 0; }
.bond .b-who { color: var(--parch-dim); display: flex; justify-content: space-between; gap: .5em; }
.bond .b-nature { color: var(--amber); font-variant: small-caps; font-size: .82rem; letter-spacing: .04em; }
.bond-meter { height: 5px; background: var(--edge); border-radius: 2px; margin-top: .28em; position: relative; }
.bond-meter > i { position: absolute; top: 0; bottom: 0; left: 50%; background: var(--amber); border-radius: 2px; transition: width .5s, left .5s; }
.bond-meter .zero { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--muted-txt); }

/* clock */
#panel-clock { border-color: var(--thread-lo); }
#clock-body .clock-label { color: var(--parch-dim); font-style: italic; font-size: .92rem; }
.clock-track { display: flex; gap: 4px; margin-top: .5em; }
.clock-track > i { flex: 1; height: 9px; border-radius: 2px; background: var(--edge); transition: background .4s; }
.clock-track > i.lit { background: linear-gradient(180deg, var(--amber-glow), var(--amber-lo)); }
.clock-track > i.spent { background: var(--thread-lo); }

/* tarot */
.tarot-strip { display: flex; flex-direction: column; gap: 9px; }
.tcard { border: 1px solid var(--edge-soft); border-radius: 5px; padding: .55em .7em; background: linear-gradient(180deg, var(--panel-2), var(--panel)); position: relative; }
.tcard.fresh { animation: tarot-flip .8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes tarot-flip { 0% { transform: rotateY(90deg) scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }
.tcard .tc-name { font-family: var(--display); color: var(--amber-glow); font-size: .92rem; display: flex; align-items: baseline; gap: .4em; }
.tcard .tc-name .glyph { color: var(--amber-lo); }
.tcard .tc-rev { color: var(--thread); font-size: .72rem; font-style: italic; }
.tcard .tc-who { color: var(--faint); font-size: .72rem; font-variant: small-caps; letter-spacing: .04em; }
.tcard .tc-mean { color: var(--muted-txt); font-size: .82rem; font-style: italic; margin-top: .15em; }
.omen-card {
  margin-bottom: 10px; padding: .75em .85em; border: 1px solid var(--amber-deep); border-radius: 6px;
  background: radial-gradient(130% 160% at 10% 0%, rgba(244,213,144,.14), rgba(38,31,22,.78));
  box-shadow: 0 0 20px -12px var(--amber-glow), inset 0 1px 0 rgba(244,213,144,.12);
}
.omen-card.shadow {
  border-color: var(--thread-lo);
  background: radial-gradient(130% 160% at 10% 0%, rgba(178,58,76,.18), rgba(38,31,22,.8));
  box-shadow: 0 0 22px -12px var(--thread-glow), inset 0 1px 0 rgba(226,105,122,.12);
}
.omen-card.wild { border-color: color-mix(in srgb, var(--amber) 55%, var(--thread)); }
.omen-kicker {
  font-family: var(--smallcaps); font-variant: small-caps; color: var(--faint);
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
}
.omen-name { font-family: var(--display); color: var(--amber-glow); font-size: 1rem; line-height: 1.15; }
.omen-card.shadow .omen-name { color: var(--thread-glow); }
.omen-label { color: var(--amber); font-variant: small-caps; font-size: .82rem; letter-spacing: .04em; margin-top: .14em; }
.omen-card.shadow .omen-label { color: var(--thread-glow); }
.omen-text { color: var(--parch-dim); font-size: .84rem; line-height: 1.35; margin-top: .22em; }

.tarot-reveal {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center;
  background: rgba(8,6,4,.34); backdrop-filter: blur(1px);
  animation: tarot-reveal-in .22s ease both; cursor: pointer; pointer-events: auto;
}
.tarot-reveal.out { animation: tarot-reveal-out .28s ease forwards; }
.tr-card {
  width: min(340px, 86vw); min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 30px 28px; text-align: center; border: 1px solid var(--amber); border-radius: 8px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(244,213,144,.18), transparent 58%),
    linear-gradient(180deg, var(--panel-2), var(--ink-2));
  box-shadow: 0 30px 90px rgba(0,0,0,.72), 0 0 34px -12px var(--amber-glow), inset 0 0 0 1px rgba(244,213,144,.08);
  animation: tarot-card-in .42s cubic-bezier(.2,.7,.2,1) both;
}
.tarot-reveal.shadow .tr-card {
  border-color: var(--thread);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(178,58,76,.22), transparent 58%),
    linear-gradient(180deg, var(--panel-2), var(--ink-2));
  box-shadow: 0 30px 90px rgba(0,0,0,.72), 0 0 38px -12px var(--thread-glow), inset 0 0 0 1px rgba(226,105,122,.08);
}
.tr-glyph { color: var(--amber); font-size: 2rem; margin-bottom: 18px; text-shadow: 0 0 18px var(--amber-glow); }
.tarot-reveal.shadow .tr-glyph { color: var(--thread-glow); text-shadow: 0 0 18px var(--thread); }
.tr-kicker {
  font-family: var(--smallcaps); font-variant: small-caps; color: var(--faint);
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
}
.tr-name { margin-top: 6px; font-family: var(--display); color: var(--amber-glow); font-size: 1.55rem; line-height: 1.15; }
.tarot-reveal.shadow .tr-name { color: var(--thread-glow); }
.tr-effect { margin-top: 12px; color: var(--amber); font-variant: small-caps; letter-spacing: .06em; }
.tarot-reveal.shadow .tr-effect { color: var(--thread-glow); }
.tr-text { margin-top: 10px; color: var(--parch-dim); font-style: italic; max-width: 22em; line-height: 1.45; }
@keyframes tarot-reveal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tarot-reveal-out { to { opacity: 0; } }
@keyframes tarot-card-in {
  from { opacity: 0; transform: translateY(18px) rotateY(72deg) scale(.92); }
  to { opacity: 1; transform: none; }
}

/* scrollbars */
#chat-log::-webkit-scrollbar, #dashboard::-webkit-scrollbar { width: 10px; }
#chat-log::-webkit-scrollbar-track, #dashboard::-webkit-scrollbar-track { background: transparent; }
#chat-log::-webkit-scrollbar-thumb, #dashboard::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
#chat-log::-webkit-scrollbar-thumb:hover, #dashboard::-webkit-scrollbar-thumb:hover { background: var(--amber-deep); background-clip: padding-box; }

/* ── responsive / TV casting ───────────────── */
@media (max-width: 1180px) {
  #dashboard { max-width: 410px; padding: 14px; }
  .panel { padding: 12px 13px; }
  .case-cols { grid-template-columns: 1fr; }
  #red-string { display: none; }
}
@media (max-width: 1080px) { .roster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .seat-plates { grid-template-columns: 1fr; }
  #game-body { flex-direction: column; }
  #chat-pane { flex: none; height: 60%; border-right: none; border-bottom: 1px solid var(--edge); }
  #dashboard { max-width: none; width: 100%; height: 40%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
  #dashboard .panel { margin-bottom: 0; }
  #panel-case, #panel-tarot { grid-column: 1 / -1; }
  #input-row { max-width: none; }
}
@media (max-width: 680px) {
  #game-header { gap: 8px; padding: 9px 10px; }
  .header-tools { width: 100%; justify-content: flex-end; }
  #scene-banner { flex: 1 1 100%; }
  #dashboard { grid-template-columns: 1fr; height: 42%; padding: 12px; }
  #input-row { flex-wrap: wrap; }
  #action-kind { flex: 0 0 92px; }
  #player-input { flex: 1 1 calc(100% - 100px); }
  #btn-send, #btn-tarot, #btn-yield { flex: 1 1 auto; }
  .pulse-metrics, .artifact-dock, .pp-roster { grid-template-columns: 1fr; }
  .pp-read { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 560px) {
  .roster { grid-template-columns: 1fr; }
  .title-inner { justify-content: flex-start; padding-top: 20px; }
  .brand { font-size: clamp(2.1rem, 15vw, 3rem); }
  .campaign-card { padding: 1.2em 1.25em; }
  .seat-plate { flex-wrap: wrap; }
  .seat-plate .player-name { width: 100%; }
  .char-card .sigil-band { height: 72px; }
  .artifact-shell.is-dossier { width: 96vw; }
}

/* fullscreen casting — bump scale for the TV across the room */
:fullscreen #chat-log, body.casting #chat-log { font-size: 1.18rem; }
:fullscreen .entry, body.casting .entry { max-width: 50em; }
:fullscreen #game-header, body.casting #game-header { padding: 16px 28px; }

/* ════════════════════════════════════════════════════════════════
   v2 · THE LIVING TABLE — streaming, artifacts, timeline, the gate
   ════════════════════════════════════════════════════════════════ */

/* ── the unlock gate ─────────────────────────── */
.gate-inner { max-width: 520px; margin: 0 auto; min-height: 100%; padding: 6vh 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.lens-ring.small { width: 150px; height: 150px; margin-bottom: 1.4em; }
.gate-title { font-family: var(--display); color: var(--amber-glow); letter-spacing: .05em; font-size: clamp(1.7rem, 4vw, 2.4rem); margin: .2em 0; }
.gate-sub { color: var(--parch-dim); font-style: italic; max-width: 30em; margin: .3em 0 1.8em; }
.gate-row { display: flex; gap: 10px; width: 100%; max-width: 400px; }
#gate-field { flex: 1; background: var(--ink); color: var(--parchment); border: 1px solid var(--edge); border-radius: 4px; padding: .7em .9em; font-family: var(--serif); font-size: 1.05rem; letter-spacing: .12em; }
#gate-field:focus { outline: none; border-color: var(--amber-lo); box-shadow: 0 0 0 1px rgba(183,134,56,.3); }
.gate-err { color: var(--bad); font-style: italic; font-size: .9rem; margin-top: 1em; min-height: 1.2em; }

/* ── header tools ────────────────────────────── */
.header-tools { display: flex; gap: 2px; align-items: center; margin-left: 8px; }
.header-tools .btn-icon { font-size: 1.15rem; line-height: 1; }

/* ── streaming narration: the live cursor ─────── */
.entry.narrator.streaming .prose { color: var(--parchment); font-size: calc(1.16rem * var(--prose-scale)); line-height: 1.75; }
.entry.narrator.streaming .stream-text strong { color: var(--amber-glow); font-weight: 600; }
.entry.narrator.streaming .stream-text em { color: var(--parch-dim); }
.stream-cursor { display: inline-block; width: .5em; height: 1.05em; margin-left: .06em; vertical-align: -.18em;
  background: radial-gradient(circle at 50% 40%, var(--amber-glow), var(--amber-lo)); border-radius: 1px;
  box-shadow: 0 0 8px rgba(244,213,144,.7); animation: stream-gutter 1.05s ease-in-out infinite; }
@keyframes stream-gutter { 0%,100% { opacity: .95; transform: scaleY(1); } 48% { opacity: .3; transform: scaleY(.8); } 72% { opacity: 1; transform: scaleY(1.04); } }

/* ── the interlude ("since you were last here") ── */
.entry.interlude { max-width: 46em; margin: 2.2em auto; border: 1px solid var(--thread-lo); border-radius: 8px; padding: 1.1em 1.4em 1.2em; background: linear-gradient(180deg, rgba(178,58,76,.06), rgba(0,0,0,0)); position: relative; }
.entry.interlude .interlude-mark { font-family: var(--display); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--thread-glow); margin-bottom: .5em; }
.entry.interlude .prose { color: var(--parch-dim); font-size: calc(1.0rem * var(--prose-scale)); line-height: 1.7; }
.entry.interlude .prose strong { color: var(--amber); }
.entry.interlude .prose > p:first-child::first-letter { float: none; font-size: inherit; padding: 0; color: var(--thread-glow); }

/* ── the artifact dock ───────────────────────── */
.artifact-dock { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.dock-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .15em; text-align: left;
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--edge-soft); border-radius: 6px; padding: .7em .8em; transition: border-color .15s, transform .12s, box-shadow .15s; }
.dock-tile:hover:not(:disabled) { border-color: var(--amber-lo); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.dock-tile:disabled { opacity: .4; cursor: default; }
.dock-tile .dt-glyph { font-size: 1.25rem; color: var(--amber); line-height: 1; }
.dock-tile .dt-label { font-family: var(--display); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--parch-dim); }
.dock-tile .dt-badge { position: absolute; top: .55em; right: .6em; font-size: .64rem; font-variant: small-caps; letter-spacing: .04em; color: var(--muted-txt); border: 1px solid var(--edge); border-radius: 999px; padding: .05em .55em; }
.dock-tile .dt-badge.alert { color: var(--thread-glow); border-color: var(--thread-lo); background: rgba(178,58,76,.12); animation: badge-pulse 2.4s ease-in-out infinite; }
@keyframes badge-pulse { 0%,100% { box-shadow: 0 0 0 rgba(178,58,76,0); } 50% { box-shadow: 0 0 10px rgba(178,58,76,.4); } }

/* pc tools */
.pc-tools { margin-top: .6em; }
.pc-journal { background: transparent; border: 1px solid var(--edge-soft); color: var(--muted-txt); border-radius: 999px; padding: .25em .85em; font-family: var(--display); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; transition: all .15s; }
.pc-journal:hover { border-color: var(--amber-lo); color: var(--amber-glow); }

/* fresh clue flare */
.clue.fresh { animation: clue-flare 1.4s ease both; }
@keyframes clue-flare { 0% { border-color: var(--amber); box-shadow: 0 0 18px rgba(244,213,144,.4); } 100% { border-color: var(--edge-soft); box-shadow: none; } }

/* ── artifact modal stage ────────────────────── */
#artifact-stage { position: fixed; inset: 0; z-index: 200; display: none; }
#artifact-stage.open { display: block; }
.artifact-backdrop { position: absolute; inset: 0; background: rgba(8,6,4,.74); backdrop-filter: blur(3px); animation: fade-in .3s both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.artifact-shell { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(640px, 92vw); max-height: 88vh; overflow: hidden;
  background: linear-gradient(180deg, var(--panel-2), var(--ink-2)); border: 1px solid var(--edge); border-radius: 10px; box-shadow: var(--shadow); animation: artifact-rise .4s cubic-bezier(.2,.7,.2,1) both; display: flex; flex-direction: column; }
@keyframes artifact-rise { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.artifact-close { position: absolute; top: 10px; right: 12px; z-index: 3; background: transparent; border: none; color: var(--muted-txt); font-size: 1.1rem; padding: .25em .5em; border-radius: 4px; transition: color .15s, background .15s; }
.artifact-close:hover { color: var(--amber); background: rgba(217,164,65,.08); }
.artifact-content { overflow-y: auto; overflow-x: hidden; padding: 26px 28px 28px; }
.artifact-shell.is-map .artifact-content, .artifact-shell.is-letter .artifact-content { padding: 0; }
.artifact-shell.is-dossier { width: min(620px, 94vw); }

/* ── the letter box ──────────────────────────── */
.artifact-shell.is-letter { width: min(600px, 92vw); }
.letter-rail { display: flex; gap: 6px; padding: 12px 14px 0; }
.letter-tab { background: var(--panel); border: 1px solid var(--edge); color: var(--muted-txt); border-radius: 5px 5px 0 0; padding: .35em .8em; font-family: var(--display); font-size: .68rem; letter-spacing: .06em; transition: all .15s; }
.letter-tab.active { color: var(--amber-glow); border-color: var(--amber-lo); background: var(--panel-2); }
.letter-tab.is-sealed { color: var(--thread-glow); }
.letter-paper { margin: 14px; padding: 26px 30px 30px; border-radius: 4px; position: relative;
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(120,96,56,.16), rgba(0,0,0,0) 60%),
    linear-gradient(170deg, #efe4cb 0%, #e3d4b3 60%, #d8c7a3 100%);
  color: #2b2418; box-shadow: inset 0 0 60px rgba(120,90,50,.18), var(--shadow);
  font-family: var(--serif); }
.letter-paper::after { content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none; box-shadow: inset 0 0 1px rgba(60,44,22,.5); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .05; mix-blend-mode: multiply; }
.letter-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5em; font-size: .82rem; color: #5a4a30; }
.letter-from { flex: 1 1 auto; min-width: 0; }
.letter-to { flex: 0 0 auto; text-align: right; }
.letter-from, .letter-to { font-variant: small-caps; letter-spacing: .03em; line-height: 1.35; }
.letter-head .lf-label { color: #937c52; font-style: italic; margin-right: .3em; }
.letter-scene { font-size: .72rem; color: #937c52; font-style: italic; margin-top: .6em; }
.letter-rule { height: 1px; background: linear-gradient(90deg, transparent, #b09a6e, transparent); margin: .9em 0 1.1em; }
.letter-body { font-size: 1.06rem; line-height: 1.66; color: #2b2418; }
.letter-body p { margin: 0 0 .9em; }
.letter-body.reply { font-style: italic; color: #4a3c24; }
.wax-gate { text-align: center; padding: 1.4em 0 .8em; }
.wax-seal { display: inline-block; cursor: pointer; transition: transform .15s; }
.wax-seal svg { width: 84px; height: 84px; }
.wax-seal .wax-disc { fill: #7a1f2b; stroke: #5a141d; stroke-width: 2; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.wax-seal .wax-mark { fill: #5a141d; opacity: .8; }
.wax-seal:hover { transform: scale(1.05) rotate(-2deg); }
.wax-seal.breaking { animation: wax-break .6s ease forwards; }
@keyframes wax-break { 0% { transform: scale(1); } 40% { transform: scale(1.12) rotate(3deg); } 100% { transform: scale(.4) rotate(-14deg); opacity: 0; } }
.wax-hint { color: #6a583a; font-style: italic; margin-top: .8em; font-size: .92rem; }
.letter-reply { margin-top: 1.4em; border-top: 1px dashed #b09a6e; padding-top: 1em; }
.letter-reply .lr-label { display: block; font-variant: small-caps; letter-spacing: .04em; color: #6a583a; font-size: .82rem; margin-bottom: .4em; }
.letter-reply .lr-opt { font-style: italic; color: #937c52; }
#letter-reply-field { width: 100%; background: rgba(255,250,238,.6); border: 1px solid #b09a6e; border-radius: 3px; padding: .6em .7em; font-family: var(--serif); font-size: 1rem; color: #2b2418; resize: vertical; }
#letter-reply-field:focus { outline: none; border-color: #7a1f2b; }
.lr-actions { display: flex; justify-content: flex-end; margin-top: .6em; }
.lr-send { color: #7a1f2b; border-color: #b09a6e; }
.lr-send:hover { background: rgba(122,31,43,.08); border-color: #7a1f2b; color: #5a141d; }
.letter-replied { margin-top: 1.2em; border-top: 1px dashed #b09a6e; padding-top: 1em; }
.letter-replied .lr-label { font-variant: small-caps; color: #6a583a; font-size: .8rem; }

/* ── the cipher ──────────────────────────────── */
.cipher-sheet { }
.cipher-sheet.wrong { animation: shake .4s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.cipher-kicker { font-family: var(--display); font-size: .66rem; letter-spacing: .14em; color: var(--amber-lo); text-transform: uppercase; }
.cipher-title { font-family: var(--display); color: var(--amber-glow); margin: .25em 0 .8em; font-size: 1.3rem; }
.cipher-cipher { font-family: "Courier New", monospace; font-size: 1.5rem; letter-spacing: .22em; color: var(--thread-glow); text-align: center; padding: .7em; background: var(--ink); border: 1px solid var(--edge); border-radius: 5px; }
.cipher-tools { margin-top: 1.1em; }
.shift-row { display: flex; align-items: center; gap: 12px; }
.shift-label { font-variant: small-caps; letter-spacing: .04em; color: var(--muted-txt); font-size: .84rem; white-space: nowrap; }
#cipher-shift { flex: 1; accent-color: var(--amber); }
.shift-val { font-family: "Courier New", monospace; color: var(--amber); width: 2.4em; text-align: right; }
.cipher-preview { font-family: "Courier New", monospace; font-size: 1.3rem; letter-spacing: .2em; color: var(--amber-glow); text-align: center; padding: .6em; margin-top: .7em; background: rgba(217,164,65,.05); border: 1px dashed var(--edge); border-radius: 5px; min-height: 1.6em; }
.cipher-hint { margin-top: .9em; }
.cipher-hint summary { cursor: pointer; color: var(--muted-txt); font-style: italic; font-size: .88rem; }
.cipher-hint summary:hover { color: var(--amber-lo); }
.cipher-hint p { color: var(--parch-dim); font-size: .9rem; margin: .5em 0 0; padding-left: 1em; border-left: 2px solid var(--edge); }
.cipher-answer { display: flex; gap: 8px; margin-top: 1.1em; }
#cipher-answer-field { flex: 1; background: var(--ink); color: var(--parchment); border: 1px solid var(--edge); border-radius: 4px; padding: .6em .8em; font-family: var(--serif); font-size: 1.05rem; letter-spacing: .03em; }
#cipher-answer-field:focus { outline: none; border-color: var(--amber-lo); }
.cipher-solved { margin-top: 1.1em; text-align: center; }
.cipher-solved .cs-label { font-family: var(--smallcaps); font-variant: small-caps; letter-spacing: .08em; color: var(--good); font-size: 1rem; }
.cipher-reveal { margin-top: .7em; text-align: left; color: var(--parch-dim); font-size: .98rem; line-height: 1.6; border-left: 2px solid var(--amber-lo); padding-left: 1em; }

/* ── the map ─────────────────────────────────── */
.artifact-shell.is-map { width: min(680px, 94vw); }
.map-wrap { padding: 18px 18px 20px; }
.map-kicker { font-family: var(--display); color: var(--amber); letter-spacing: .12em; text-transform: uppercase; font-size: .74rem; text-align: center; margin-bottom: .6em; }
.map-svg { width: 100%; height: auto; display: block; border: 1px solid var(--edge); border-radius: 8px; }
.map-river { fill: none; stroke: rgba(120,150,170,.18); stroke-width: 2.4; }
.map-edge { stroke: var(--edge); stroke-width: .4; stroke-dasharray: 1.4 1.6; }
.map-node { cursor: default; }
.map-node .map-dot { fill: var(--edge); transition: fill .2s, r .2s; }
.map-node .map-halo { fill: none; stroke: transparent; stroke-width: .8; }
.map-node .map-label { fill: var(--faint); font-family: var(--smallcaps); font-size: 3.1px; letter-spacing: .02em; transition: fill .2s; }
.map-node.known { cursor: pointer; }
.map-node.known .map-dot { fill: var(--amber); }
.map-node.known .map-label { fill: var(--parch-dim); }
.map-node.known:hover .map-dot { fill: var(--amber-glow); }
.map-node.known:hover .map-halo { stroke: var(--amber-lo); }
.map-node.here .map-dot { fill: var(--thread-glow); }
.map-node.here .map-halo { stroke: var(--thread); animation: map-here 2s ease-in-out infinite; }
@keyframes map-here { 0%,100% { stroke-opacity: .8; } 50% { stroke-opacity: .25; } }
.map-node.here .map-label { fill: var(--thread-glow); }
.map-node.veiled { opacity: .55; }
.map-readout { margin-top: .9em; min-height: 4.5em; border-top: 1px solid var(--edge-soft); padding-top: .8em; }
.map-readout .mr-empty { color: var(--faint); font-style: italic; font-size: .9rem; }
.map-readout .mr-name { font-family: var(--display); color: var(--amber-glow); font-size: 1.05rem; }
.map-readout .mr-intel { color: var(--parch-dim); font-size: .92rem; line-height: 1.5; margin: .25em 0 .6em; }
.map-readout .mr-here { color: var(--thread-glow); font-style: italic; font-size: .9rem; }

/* ── the journal ─────────────────────────────── */
.journal-head { display: flex; align-items: center; gap: 1em; margin-bottom: 1em; flex-wrap: wrap; }
.jr-kicker { font-family: var(--display); color: var(--amber); letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; }
.jr-tabs { display: flex; gap: 6px; margin-left: auto; }
.jr-tab { background: var(--panel); border: 1px solid var(--edge); color: var(--muted-txt); border-radius: 999px; padding: .3em .9em; font-family: var(--display); font-size: .66rem; letter-spacing: .06em; transition: all .15s; }
.jr-tab.active { color: #20160a; background: linear-gradient(180deg, var(--amber), var(--amber-lo)); border-color: var(--amber); }
.journal-scroll { max-height: 60vh; }
.jr-entry { border-left: 2px solid var(--thread-lo); padding: .2em 0 .9em 1em; margin-bottom: 1.1em; position: relative; }
.jr-entry .jr-scene { font-family: var(--smallcaps); font-variant: small-caps; color: var(--amber-lo); font-size: .76rem; letter-spacing: .04em; margin-bottom: .3em; }
.jr-entry .jr-text { color: var(--parch-dim); font-style: italic; font-size: 1.0rem; line-height: 1.62; }
.jr-empty { padding: 1.5em 0; }

/* ── the timeline ────────────────────────────── */
.tl-kicker { font-family: var(--display); color: var(--amber); letter-spacing: .12em; text-transform: uppercase; font-size: .76rem; }
.tl-blurb { color: var(--parch-dim); font-size: .92rem; line-height: 1.55; margin: .6em 0 1.1em; }
.tl-save { display: flex; gap: 8px; }
#tl-label { flex: 1; background: var(--ink); color: var(--parchment); border: 1px solid var(--edge); border-radius: 4px; padding: .55em .75em; font-family: var(--serif); font-size: .98rem; }
#tl-label:focus { outline: none; border-color: var(--amber-lo); }
.tl-divider { display: flex; align-items: center; gap: 10px; color: var(--faint); font-family: var(--display); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; margin: 1.3em 0 .8em; }
.tl-divider::before, .tl-divider::after { content: ""; height: 1px; flex: 1; background: var(--edge-soft); }
.tl-list { display: flex; flex-direction: column; }
.tl-row { display: flex; align-items: center; gap: 11px; padding: .6em .2em; border-bottom: 1px solid var(--edge-hair); flex-wrap: wrap; }
.tl-row:last-child { border-bottom: none; }
.tl-row .tl-mark { width: 1.2em; text-align: center; color: var(--faint); font-size: 1rem; }
.tl-row.manual .tl-mark { color: var(--amber); }
.tl-meta { flex: 1; min-width: 0; }
.tl-row .tl-label { color: var(--parchment); font-size: .94rem; }
.tl-row.auto .tl-label { color: var(--muted-txt); }
.tl-row .tl-sub { color: var(--faint); font-size: .74rem; font-variant: small-caps; letter-spacing: .03em; }
.tl-acts { display: flex; gap: 6px; }
.btn-ghost.tiny { padding: .35em .7em; font-size: .6rem; }
.tl-world { width: 100%; justify-content: center; }

/* ── toasts ──────────────────────────────────── */
#toast-host { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--edge); color: var(--parch-dim); border-radius: 999px; padding: .55em 1.3em; font-family: var(--serif); font-style: italic; font-size: .95rem; box-shadow: var(--shadow); animation: toast-in .4s cubic-bezier(.2,.7,.2,1) both; max-width: 90vw; text-align: center; }
.toast.good { border-color: var(--amber-lo); color: var(--amber-glow); }
.toast.bad { border-color: var(--thread-lo); color: var(--thread-glow); }
.toast.out { animation: toast-out .5s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } }

/* mobile: artifact dock single column, modal full-ish */
@media (max-width: 900px) {
  .header-tools { margin-left: 4px; }
  .artifact-shell { width: 96vw; max-height: 92vh; }
}

/* ═══════════════ v4 FLOW: turns, the Way-Forward, crossings ═══════════════ */

/* — Spotlight rail (whose turn it is; not a free toggle) — */
#seat-switch .seat-btn { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  cursor: default; transition: opacity .25s, border-color .25s; }
#seat-switch .seat-btn.dimmed { opacity: .42; }
#seat-switch .seat-btn.holder { opacity: 1; border-color: var(--thread); box-shadow: 0 0 10px -2px var(--thread); }
#seat-switch .seat-btn .turn-flag { font-family: var(--smallcaps); font-size: .58rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); }
#seat-switch .seat-btn.holder .turn-flag { color: var(--thread-glow); }

/* — Scene / Objective panel — */
.panel-scene { border-bottom: 1px solid var(--edge); background: linear-gradient(180deg, rgba(217,164,65,.04), transparent);
  padding: 12px 18px 10px; }
.panel-scene:empty { display: none; }
.scene-plate {
  display: flex; align-items: center; gap: 9px; margin-bottom: 8px; min-width: 0;
  color: var(--muted-txt); font-family: var(--smallcaps); font-variant: small-caps;
  letter-spacing: .08em; font-size: .72rem;
}
.scene-plate .sp-sigil {
  width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center;
  border: 1px solid var(--edge); border-radius: 50%; color: var(--amber);
  background: radial-gradient(circle at 50% 0%, rgba(244,213,144,.14), rgba(16,13,9,.2));
}
.scene-plate.glass .sp-sigil { color: #9fc7c7; border-color: rgba(159,199,199,.35); }
.scene-plate.house .sp-sigil { color: var(--amber-lo); }
.scene-plate.rite .sp-sigil { color: var(--thread-glow); border-color: var(--thread-lo); }
.scene-plate.street .sp-sigil { color: var(--good); border-color: rgba(111,174,132,.38); }
.scene-plate .sp-title { color: var(--parch-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-plate .sp-line { height: 1px; flex: 1; background: linear-gradient(90deg, var(--edge), transparent); min-width: 30px; }
.event-strip { display: none; gap: 7px; align-items: center; padding: 7px 18px 5px;
  border-bottom: 1px solid var(--edge-hair); background: rgba(217,164,65,.025); overflow-x: auto; scrollbar-width: thin; }
.event-strip.show { display: flex; }
.event-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45em;
  border: 1px solid var(--edge); border-radius: 999px; background: var(--panel);
  color: var(--parch-dim); padding: .24em .72em; font-size: .78rem; line-height: 1.2;
  animation: entry-in .38s cubic-bezier(.2,.7,.2,1) both; }
.event-pill .event-mark { color: var(--amber); font-family: var(--display); font-size: .8rem; }
.event-pill.clue, .event-pill.lead { border-color: var(--amber-deep); }
.event-pill.gate { border-color: var(--amber); color: var(--amber-glow); box-shadow: 0 0 14px -8px var(--amber-glow); }
.event-pill.danger { border-color: var(--thread-lo); color: var(--thread-glow); background: rgba(178,58,76,.08); }
.event-pill.tarot { border-color: var(--thread-lo); color: var(--parchment); }
.event-pill.artifact { border-color: var(--amber-lo); }
.event-pill.bond { border-color: var(--good); }
.event-pill.ward { border-color: var(--good); color: var(--good); background: rgba(111,174,132,.08); }

/* Table Pulse: compact status, danger, and next-action surface */
#panel-pulse { border-color: rgba(178,58,76,.34); }
#table-pulse { display: flex; flex-direction: column; gap: 10px; }
.pulse-hero {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 10px 11px; border: 1px solid var(--edge-soft); border-radius: 6px;
  background: radial-gradient(120% 160% at 0% 0%, rgba(217,164,65,.11), rgba(31,26,19,.48));
  position: relative; overflow: hidden;
}
.pulse-hero::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: linear-gradient(180deg, var(--amber), var(--thread)); opacity: .65;
}
.pulse-hero.hot { border-color: var(--thread-lo); background: radial-gradient(130% 150% at 0% 0%, rgba(178,58,76,.16), rgba(31,26,19,.56)); }
.pulse-hero.danger { border-color: var(--thread); box-shadow: 0 0 22px -12px var(--thread-glow); }
.pulse-copy { min-width: 0; }
.pulse-kicker {
  font-family: var(--smallcaps); font-variant: small-caps; color: var(--amber-lo);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
}
.pulse-mood { color: var(--parchment); line-height: 1.28; font-size: .98rem; overflow-wrap: anywhere; }
.pulse-spark {
  flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--thread-lo); color: var(--thread-glow);
  font-family: var(--display); font-size: .95rem; background: rgba(178,58,76,.08);
  box-shadow: inset 0 0 12px rgba(178,58,76,.12);
}
.pulse-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pulse-metric {
  padding: 7px 8px; border: 1px solid var(--edge-soft); border-radius: 5px;
  background: rgba(16,13,9,.28); min-width: 0;
}
.pm-label {
  display: block; color: var(--faint); font-family: var(--smallcaps); font-variant: small-caps;
  font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
}
.pm-value { display: block; color: var(--parch-dim); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pulse-meter {
  display: block; height: 6px; margin-top: 5px; border-radius: 4px; overflow: hidden;
  background: var(--ink); border: 1px solid var(--edge); position: relative;
}
.pulse-meter i { display: block; height: 100%; width: 0; transition: width .55s ease; }
.pulse-meter.evidence i { background: linear-gradient(90deg, var(--amber-lo), var(--amber-glow)); }
.pulse-meter.heat i { background: linear-gradient(90deg, var(--amber-deep), var(--amber-lo)); }
.pulse-meter.heat.near i { background: linear-gradient(90deg, var(--thread-lo), var(--thread)); }
.pulse-meter.heat.full i { background: var(--thread-glow); box-shadow: 0 0 8px var(--thread); }
.pulse-events { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.pulse-event {
  flex: 0 0 auto; max-width: 220px; display: inline-flex; align-items: center; gap: .38em;
  border: 1px solid var(--edge); border-radius: 999px; color: var(--muted-txt);
  padding: .18em .62em; font-size: .76rem; line-height: 1.2; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; background: rgba(16,13,9,.32);
}
.pulse-event b { color: var(--amber); font-family: var(--display); font-size: .78rem; }
.pulse-event.danger { border-color: var(--thread-lo); color: var(--thread-glow); }
.pulse-event.gate, .pulse-event.lead, .pulse-event.clue { border-color: var(--amber-deep); color: var(--parch-dim); }
.pulse-event.ward { border-color: var(--good); color: var(--good); }
.pulse-empty { color: var(--faint); font-size: .82rem; font-style: italic; }
.pulse-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.pulse-action {
  max-width: 100%; min-height: 30px; padding: .34em .8em; border-radius: 999px;
  border: 1px solid var(--edge); background: var(--panel-2); color: var(--parch-dim);
  font-family: var(--smallcaps); font-variant: small-caps; font-size: .76rem; letter-spacing: .035em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color .16s, color .16s, background .16s, transform .12s;
}
.pulse-action:hover {
  border-color: var(--amber-lo); color: var(--amber-glow); background: rgba(217,164,65,.08); transform: translateY(-1px);
}
.pulse-action.tarot, .pulse-action.finale { border-color: var(--thread-lo); color: var(--thread-glow); }
.pulse-action.input { border-color: var(--amber-deep); }
.scene-q { font-family: var(--display); font-size: 1.04rem; color: var(--amber-glow); letter-spacing: .01em;
  line-height: 1.35; margin-bottom: 9px; text-shadow: 0 0 14px rgba(244,213,144,.12); }
.lead-track { display: flex; flex-direction: column; gap: 4px; }
.lead { display: flex; align-items: baseline; gap: 8px; font-size: .9rem; color: var(--parch-dim); }
.lead .diamond { color: var(--faint); font-size: .8rem; flex: none; }
.lead.next .lead-text { color: var(--amber-glow); }
.lead.next .diamond { color: var(--amber); animation: lead-glow 2.4s ease-in-out infinite; }
.lead.filled .diamond { color: var(--amber); }
.lead.filled .lead-text { color: var(--amber-lo); text-decoration: line-through; text-decoration-color: var(--amber-deep); }
.lead.veiled .lead-text { color: var(--faint); font-style: italic; }
.lead.provisional .lead-text { color: var(--muted-txt); font-style: italic; opacity: .8; }
@keyframes lead-glow { 0%,100% { text-shadow: none; } 50% { text-shadow: 0 0 8px var(--amber-glow); } }
.track-meta { margin-top: 7px; font-family: var(--smallcaps); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); }
.track-judged { font-style: italic; color: var(--muted-txt); font-size: .9rem; }

/* the Press On escape hatch */
.press-on-btn { margin-top: 9px; font-family: var(--smallcaps); font-size: .76rem; letter-spacing: .06em;
  background: rgba(178,58,76,.1); border: 1px solid var(--thread); color: var(--thread-glow);
  padding: 5px 12px; border-radius: 3px; cursor: pointer; transition: background .2s; }
.press-on-btn:hover { background: rgba(178,58,76,.22); }
.press-on-btn .po-cost { color: var(--faint); font-style: italic; }

/* — The Renewal pressure meter (fills warm; distinct from the diegetic clock) — */
.rite-meter { margin-top: 11px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rite-label { font-family: var(--smallcaps); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.rite-track { display: inline-flex; gap: 3px; }
.rite-track i { width: 9px; height: 9px; border-radius: 50%; background: transparent; border: 1px solid var(--edge);
  transition: background .4s, box-shadow .4s; }
.rite-track i.lit { background: var(--amber-deep); border-color: var(--amber-lo); }
.rite-meter.near .rite-track i.lit { background: var(--thread); border-color: var(--thread-glow); }
.rite-meter.full .rite-track i.lit { background: var(--thread-glow); box-shadow: 0 0 6px var(--thread); }
.rite-meter.near, .rite-meter.full { animation: rite-pulse 3s ease-in-out infinite; }
.rite-warn { font-family: var(--smallcaps); font-size: .62rem; letter-spacing: .06em; color: var(--thread-glow); font-style: italic; }
@keyframes rite-pulse { 0%,100% { opacity: 1; } 50% { opacity: .72; } }

/* — The threshold plate (gate open / finale) — */
.threshold-plate { margin: 4px 0 2px; padding: 12px 14px; border: 1px solid var(--amber-deep); border-radius: 4px;
  background: radial-gradient(120% 140% at 50% 0%, rgba(244,213,144,.1), rgba(31,26,19,.4));
  box-shadow: 0 0 22px -8px var(--amber-glow); text-align: center; animation: plate-rise .5s ease; }
.threshold-plate.finale { border-color: var(--thread); box-shadow: 0 0 26px -6px var(--thread); }
.tp-label { font-family: var(--smallcaps); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber-glow); margin-bottom: 9px; }
.threshold-plate.finale .tp-label { color: var(--thread-glow); letter-spacing: .26em; }
.doors { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.door-btn { font-family: var(--serif); font-size: .92rem; color: var(--amber-glow); cursor: pointer;
  background: rgba(217,164,65,.08); border: 1px solid var(--amber-deep); padding: 8px 16px; border-radius: 3px;
  transition: background .2s, box-shadow .2s; }
.door-btn:hover { background: rgba(217,164,65,.2); box-shadow: 0 0 12px -3px var(--amber-glow); }
.door-btn.rite { border-color: var(--thread); color: var(--thread-glow); background: rgba(178,58,76,.12); }
.door-btn.rite:hover { background: rgba(178,58,76,.26); box-shadow: 0 0 14px -3px var(--thread); }
@keyframes plate-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* — The turn bar (holder + the off-turn partner's affordances) — */
.turn-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 4px 2px 8px;
  font-size: .82rem; color: var(--muted-txt); border-bottom: 1px dashed var(--edge-soft); margin-bottom: 8px; }
.turn-bar:empty { display: none; }
.tb-holder b { color: var(--amber-glow); }
.tb-partner { color: var(--faint); }
.tb-partner b { color: var(--parch-dim); }
.tb-cross { color: var(--amber-glow); font-style: italic; }
.tb-act { font-family: var(--smallcaps); font-size: .72rem; letter-spacing: .05em; cursor: pointer;
  background: transparent; border: 1px solid var(--edge); color: var(--parch-dim); padding: 3px 9px; border-radius: 3px;
  margin-left: 6px; transition: border-color .2s, color .2s; }
.tb-act:hover { border-color: var(--amber-lo); color: var(--amber-glow); }

/* — Threshold curtain in the transcript — */
.entry.threshold-curtain { text-align: center; margin: 20px 0; }
.entry.threshold-curtain .curtain-rule { height: 1px; margin: 0 auto 12px; width: 60%;
  background: linear-gradient(90deg, transparent, var(--amber-deep), transparent); }
.entry.threshold-curtain .curtain-rule:last-child { margin: 12px auto 0; }
.entry.threshold-curtain .curtain-title { font-family: var(--display); font-size: 1.3rem; color: var(--amber-glow);
  letter-spacing: .04em; text-shadow: 0 0 16px rgba(244,213,144,.2); margin-bottom: 4px; }
.entry.threshold-curtain .curtain-stinger { font-family: var(--smallcaps); font-size: .8rem; color: var(--muted-txt);
  font-style: italic; margin-bottom: 10px; }
.entry.threshold-curtain .prose { color: var(--parch-dim); font-style: italic; max-width: 46ch; margin: 0 auto; }
.entry.threshold-curtain.is-ending .curtain-rule { background: linear-gradient(90deg, transparent, var(--thread), transparent); }
.entry.threshold-curtain.is-ending .prose { color: var(--parchment); font-style: normal; }

/* — Lean-in murmur + interject beat in the transcript — */
.entry.pc-aside { font-size: .82rem; color: var(--faint); font-style: italic; margin: 4px 0 4px 8px;
  border-left: 2px solid var(--edge); padding-left: 10px; }
.entry.pc-aside .aside-mark { font-family: var(--smallcaps); color: var(--muted-txt); font-style: normal;
  font-size: .68rem; letter-spacing: .06em; }
.entry.pc.is-interject { border-left: 2px solid var(--thread); }
.entry.pc.is-interject .kind { color: var(--thread-glow); }

/* casting (TV) — enlarge the flow surfaces so the room always knows the state */
body.casting .scene-q { font-size: 1.5rem; }
body.casting .lead { font-size: 1.15rem; }
body.casting #seat-switch .seat-btn { font-size: 1.1rem; }
body.casting .rite-track i { width: 12px; height: 12px; }

/* ════════════════════════════════════════════════════════════════
   v4 ART PASS — "The Living Table," dressed for the room
   Elevates the flow surfaces: playbill scene header, the lead track on a
   red-thread spine, ornate threshold doors, the Renewal dread-gauge, lit
   spotlight nameplates, the inline composer, cinematic curtains.
   ════════════════════════════════════════════════════════════════ */

/* — The scene panel as a playbill — */
.panel-scene { flex: 0 0 auto; max-height: 32vh; overflow-y: auto; overflow-x: hidden;
  border-bottom: 1px solid var(--edge); padding: 10px 22px 9px; position: relative;
  background: linear-gradient(180deg, rgba(217,164,65,.06), rgba(20,17,12,0) 72%), var(--ink-1); }
#panel-scene.collapsed { overflow: visible; }
.panel-scene::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--amber), var(--amber-deep) 40%, transparent); opacity: .55; }
.scene-kicker { font-family: var(--smallcaps); font-variant: small-caps; letter-spacing: .16em; font-size: .66rem;
  color: var(--amber-lo); text-transform: uppercase; display: flex; align-items: center; gap: .5em; margin-bottom: .42em; }
.scene-kicker .sk-orn { color: var(--edge); font-size: .9em; }
.scene-q { font-family: var(--display); font-size: 1.05rem; color: var(--amber-glow); line-height: 1.28;
  letter-spacing: .005em; margin-bottom: 7px; text-shadow: 0 0 16px rgba(244,213,144,.14); max-width: 62ch; }

/* — The lead track, strung on a red thread — */
.lead-track { position: relative; display: flex; flex-direction: column; padding-left: 3px; margin-bottom: 2px; }
.lead-track::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 12px; width: 1px;
  background: linear-gradient(180deg, var(--amber-deep), var(--thread-lo) 70%, var(--edge)); opacity: .5; }
.lead { display: flex; align-items: flex-start; gap: 11px; font-size: .86rem; position: relative; margin-bottom: 5px; }
.lead:last-child { margin-bottom: 0; }
.lead .diamond { color: var(--faint); font-size: .72rem; flex: none; width: 9px; text-align: center; margin-top: .26em;
  z-index: 1; background: var(--ink-1); }
.lead-body { display: block; min-width: 0; }
.lead-text { display: block; color: var(--parch-dim); line-height: 1.32; }
.lead-proof { display: block; margin-top: 2px; color: var(--amber-lo); font-style: italic; font-size: .82rem; line-height: 1.42; }
.lead.next .diamond { color: var(--amber); animation: lead-glow 2.4s ease-in-out infinite; }
.lead.next .lead-text { color: var(--amber-glow); }
.lead.filled .diamond { color: var(--amber); text-shadow: 0 0 7px var(--amber-glow); }
.lead.filled .lead-text { color: var(--muted-txt); text-decoration: line-through; text-decoration-color: var(--amber-deep); text-decoration-thickness: 1px; }
.lead.veiled { opacity: .58; }
.lead.veiled .lead-text { color: var(--faint); font-style: italic; }
.lead-prov { font-family: var(--smallcaps); font-variant: small-caps; font-size: .64rem; letter-spacing: .05em;
  color: var(--thread-glow); border: 1px solid var(--thread-lo); border-radius: 3px; padding: 0 .42em; margin-left: .35em; }
@keyframes lead-glow { 0%,100% { text-shadow: none; } 50% { text-shadow: 0 0 9px var(--amber-glow); } }
.track-meta { margin-top: 6px; font-family: var(--smallcaps); font-variant: small-caps; font-size: .74rem;
  letter-spacing: .06em; color: var(--muted-txt); }
.track-judged { color: var(--parch-dim); font-style: italic; font-size: .92rem; }

/* — Press On — */
.press-on-btn { margin-top: 12px; font-family: var(--smallcaps); font-variant: small-caps; font-size: .84rem; letter-spacing: .04em;
  background: linear-gradient(180deg, rgba(178,58,76,.16), rgba(178,58,76,.05)); border: 1px solid var(--thread-lo);
  color: var(--thread-glow); padding: .5em 1.05em; border-radius: 4px; cursor: pointer; transition: all .18s; }
.press-on-btn:hover { background: rgba(178,58,76,.26); border-color: var(--thread); box-shadow: 0 0 16px -6px var(--thread); }
.press-on-btn .po-cost { color: var(--faint); font-style: italic; font-variant: normal; }

/* — The Renewal: a dread-gauge — */
.rite-meter { margin-top: 7px; }
.rite-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin-bottom: 5px; }
.rite-label { font-family: var(--smallcaps); font-variant: small-caps; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-lo); }
.rite-warn { font-family: var(--smallcaps); font-variant: small-caps; font-size: .66rem; letter-spacing: .03em; color: var(--faint); font-style: italic; }
.rite-track { display: flex; gap: 3px; height: 10px; }
.rite-track i { flex: 1; border-radius: 1px; background: var(--ink); border: 1px solid var(--edge);
  transition: background .5s, box-shadow .5s, border-color .5s; }
.rite-track i.lit { background: linear-gradient(180deg, var(--amber-lo), var(--amber-deep)); border-color: var(--amber-lo); }
.rite-meter.near .rite-warn, .rite-meter.full .rite-warn { color: var(--thread-glow); }
.rite-meter.near .rite-track i.lit { background: linear-gradient(180deg, var(--thread), var(--thread-lo)); border-color: var(--thread); }
.rite-meter.full .rite-track i.lit { background: var(--thread-glow); border-color: var(--thread-glow); box-shadow: 0 0 7px var(--thread); }
.rite-meter.near, .rite-meter.full { animation: rite-pulse 2.6s ease-in-out infinite; }
@keyframes rite-pulse { 0%,100% { opacity: 1; } 50% { opacity: .78; } }

/* — The threshold plate + doors — */
.threshold-plate { margin: 6px 0 2px; padding: 14px 16px; border: 1px solid var(--amber-deep); border-radius: 6px;
  background: radial-gradient(130% 160% at 50% 0%, rgba(244,213,144,.13), rgba(31,26,19,.5));
  box-shadow: 0 0 28px -10px var(--amber-glow), inset 0 1px 0 rgba(244,213,144,.12); text-align: center; animation: plate-rise .5s ease; }
.threshold-plate.finale { border-color: var(--thread); box-shadow: 0 0 32px -8px var(--thread), inset 0 1px 0 rgba(226,105,122,.16); }
.tp-label { font-family: var(--smallcaps); font-variant: small-caps; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amber-glow); margin-bottom: 11px; }
.threshold-plate.finale .tp-label { color: var(--thread-glow); letter-spacing: .3em; }
.doors { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.door-btn { display: inline-flex; align-items: center; gap: .6em; font-family: var(--serif); font-size: .96rem; color: var(--amber-glow); cursor: pointer;
  background: linear-gradient(180deg, rgba(217,164,65,.13), rgba(217,164,65,.04)); border: 1px solid var(--amber-deep); padding: .6em 1.1em; border-radius: 4px;
  transition: background .2s, box-shadow .2s, transform .12s; }
.door-btn:hover { background: rgba(217,164,65,.22); box-shadow: 0 0 16px -4px var(--amber-glow); transform: translateY(-1px); }
.door-btn .door-key { color: var(--amber-lo); font-size: .9em; }
.door-btn .door-arrow { color: var(--amber); transition: transform .2s; }
.door-btn:hover .door-arrow { transform: translateX(3px); }
.door-btn.rite { border-color: var(--thread); color: var(--thread-glow); background: linear-gradient(180deg, rgba(178,58,76,.18), rgba(178,58,76,.06)); }
.door-btn.rite:hover { background: rgba(178,58,76,.3); box-shadow: 0 0 18px -4px var(--thread); }
.door-btn.rite .door-key, .door-btn.rite .door-arrow { color: var(--thread-glow); }
@keyframes plate-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* — The spotlight rail: lit brass nameplates — */
.seat-switch { display: flex; gap: 9px; margin-left: auto; flex: 0 1 auto; min-width: 0; }
.seat-btn { display: flex; align-items: center; gap: .55em; background: var(--panel); color: var(--parch-dim);
  border: 1px solid var(--edge); border-radius: 6px; padding: .32em .8em; cursor: default; position: relative; overflow: hidden;
  transition: border-color .25s, background .25s, box-shadow .25s; }
.seat-btn .sb-spot { font-size: .7rem; color: var(--faint); flex: none; }
.seat-btn .sb-id { display: flex; flex-direction: column; line-height: 1.04; }
.seat-btn .sb-name { font-family: var(--display); font-size: .86rem; color: var(--parch-dim); letter-spacing: .02em; }
.seat-btn .who-player { color: var(--faint); font-size: .64rem; font-variant: small-caps; letter-spacing: .04em; }
.seat-btn .turn-flag { font-family: var(--smallcaps); font-variant: small-caps; font-size: .58rem; letter-spacing: .08em;
  color: var(--faint); border-left: 1px solid var(--edge); padding-left: .55em; margin-left: .15em; white-space: nowrap; }
.seat-btn.holder { border-color: var(--amber); background: linear-gradient(180deg, rgba(244,213,144,.16), rgba(217,164,65,.05));
  box-shadow: 0 0 20px -6px var(--amber-glow), inset 0 1px 0 rgba(244,213,144,.2); }
.seat-btn.holder::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 18% -10%, rgba(244,213,144,.18), transparent 60%); pointer-events: none; }
.seat-btn.holder .sb-spot { color: var(--amber); text-shadow: 0 0 8px var(--amber-glow); animation: lead-glow 2.6s ease-in-out infinite; }
.seat-btn.holder .sb-name { color: var(--amber-glow); }
.seat-btn.holder .who-player { color: var(--amber-lo); }
.seat-btn.holder .turn-flag { color: var(--amber); border-left-color: var(--amber-deep); }
.seat-btn.dimmed { opacity: .6; }

/* — The turn bar — */
.turn-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 5px 2px 6px; font-size: .84rem;
  color: var(--muted-txt); border-bottom: 1px solid var(--edge-soft); margin-bottom: 7px; }
.tb-holder { display: inline-flex; align-items: center; gap: .4em; }
.tb-holder b { color: var(--amber-glow); font-family: var(--display); font-weight: 600; }
.tb-partner { color: var(--faint); display: inline-flex; align-items: center; gap: .45em; flex-wrap: wrap; }
.tb-partner b { color: var(--parch-dim); }
.tb-cross { color: var(--amber-glow); font-style: italic; font-family: var(--display); }
.tb-act { font-family: var(--smallcaps); font-variant: small-caps; font-size: .74rem; letter-spacing: .04em; white-space: nowrap;
  cursor: pointer; background: transparent; border: 1px solid var(--edge); color: var(--parch-dim); padding: .2em .75em; border-radius: 999px;
  margin-left: 0; transition: all .18s; }
.tb-act:hover { border-color: var(--amber-lo); color: var(--amber-glow); background: rgba(217,164,65,.06); }

/* — The inline composer (replaces window.prompt) — */
.flow-composer { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--amber-deep); border-radius: 8px;
  padding: 11px 13px; margin-bottom: 11px; box-shadow: var(--shadow); animation: composer-rise .28s cubic-bezier(.2,.7,.2,1) both; }
.flow-composer.hidden { display: none; }
.flow-composer.is-interject { border-color: var(--thread-lo); box-shadow: 0 0 22px -10px var(--thread), var(--shadow); }
@keyframes composer-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fc-head { display: flex; align-items: center; gap: .5em; margin-bottom: 7px; }
.fc-mark { font-size: 1rem; color: var(--amber); }
.flow-composer.is-interject .fc-mark { color: var(--thread-glow); }
.fc-title { font-family: var(--display); font-size: .94rem; color: var(--amber-glow); letter-spacing: .02em; }
.flow-composer.is-interject .fc-title { color: var(--thread-glow); }
.fc-cancel { margin-left: auto; background: transparent; border: none; color: var(--muted-txt); font-size: .95rem; cursor: pointer; padding: .1em .4em; border-radius: 3px; transition: color .15s; }
.fc-cancel:hover { color: var(--bad); }
#fc-field { width: 100%; background: var(--ink); color: var(--parchment); border: 1px solid var(--edge); border-radius: 5px;
  padding: .55em .75em; font-family: var(--serif); font-size: 1.02rem; line-height: 1.4; resize: none; max-height: 140px; }
#fc-field::placeholder { color: var(--faint); font-style: italic; }
#fc-field:focus { outline: none; border-color: var(--amber-lo); }
.flow-composer.is-interject #fc-field:focus { border-color: var(--thread); }
.fc-actions { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: 7px; }
.fc-hint { color: var(--faint); font-style: italic; font-size: .8rem; }
.fc-send { padding: .5em 1.2em; }
.flow-composer.is-interject .fc-send { background: linear-gradient(180deg, var(--thread-glow), var(--thread)); box-shadow: 0 2px 0 var(--thread-lo), var(--shadow-sm); color: #1c0d10; }

/* — Curtain / ending, a touch more cinematic — */
.entry.threshold-curtain .curtain-stinger { color: var(--amber-lo); }
.entry.threshold-curtain.is-ending { background: radial-gradient(120% 120% at 50% 0%, rgba(178,58,76,.09), transparent 70%); padding: 20px 0 24px; border-radius: 8px; }
.entry.threshold-curtain.is-ending .curtain-title, .entry.threshold-curtain.is-ending .curtain-stinger { color: var(--thread-glow); }

/* — a hair of depth on every panel — */
.panel { box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(244,213,144,.04); }

/* — keep the header honest on narrow widths — */
#game-header { flex-wrap: wrap; row-gap: 8px; }
#scene-banner { min-width: 0; }

@media (max-width: 900px) {
  .seat-btn .turn-flag { display: none; }
  .panel-scene { padding: 12px 16px; }
}

/* ═══════════════ THE BRIEFING (player orientation) ═══════════════ */
.briefing-link { display: inline-flex; align-items: baseline; gap: 4px; margin-top: 12px;
  font-family: var(--smallcaps); font-size: .82rem; letter-spacing: .04em; cursor: pointer;
  background: rgba(217,164,65,.07); border: 1px solid var(--amber-deep); color: var(--amber-glow);
  padding: 7px 16px; border-radius: 3px; transition: background .2s, box-shadow .2s; }
.briefing-link:hover { background: rgba(217,164,65,.18); box-shadow: 0 0 14px -4px var(--amber-glow); }
.briefing-link .bl-sub { color: var(--faint); font-style: italic; }

.artifact-shell.is-briefing { max-width: 640px; }
.briefing-sheet { padding: 6px 4px; }
.briefing-kicker { font-family: var(--smallcaps); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--amber-lo); text-align: center; margin-bottom: 4px; }
.briefing-title { font-family: var(--display); font-size: 1.7rem; color: var(--amber-glow); text-align: center;
  letter-spacing: .03em; text-shadow: 0 0 18px rgba(244,213,144,.18); margin: 0 0 4px; }
.briefing-title::after { content: ""; display: block; width: 90px; height: 1px; margin: 12px auto 0;
  background: linear-gradient(90deg, transparent, var(--amber-deep), transparent); }
.briefing-body { font-family: var(--serif); font-size: 1.02rem; line-height: 1.62; color: var(--parchment);
  margin-top: 14px; max-width: 56ch; margin-left: auto; margin-right: auto; }
.briefing-body p { margin: 0 0 .85em; }
.briefing-body strong { color: var(--amber-glow); font-weight: 600; }
.briefing-foot { font-family: var(--smallcaps); font-size: .74rem; color: var(--faint); font-style: italic;
  text-align: center; margin-top: 16px; }
body.casting .briefing-title { font-size: 2.2rem; }
body.casting .briefing-body { font-size: 1.2rem; }

/* text-size stepper in the header */
.header-tools .btn-size { font-size: .92rem; font-family: var(--serif); font-weight: 600; letter-spacing: .01em; }

/* collapsible objective panel — fold the lead track away for more story */
.scene-collapse { float: right; background: none; border: 1px solid var(--edge); border-radius: 999px; color: var(--amber-lo); cursor: pointer;
  font-family: var(--smallcaps); font-variant: small-caps; font-size: .68rem; letter-spacing: .04em; line-height: 1; padding: .2em .7em; transition: color .15s, border-color .15s, background .15s; }
.scene-collapse:hover { color: var(--amber-glow); border-color: var(--amber-lo); background: rgba(217,164,65,.06); }
#panel-scene.collapsed .lead-track,
#panel-scene.collapsed .rite-meter,
#panel-scene.collapsed .track-meta,
#panel-scene.collapsed .track-judged,
#panel-scene.collapsed .press-on-btn { display: none; }
#panel-scene.collapsed .scene-q { margin-bottom: 6px; }

/* the compact rail — leads-at-a-glance + a slim Renewal, shown only when folded */
.scene-rail { display: none; }
#panel-scene.collapsed .scene-rail { display: flex; align-items: center; gap: .7em; flex-wrap: nowrap;
  font-family: var(--smallcaps); font-variant: small-caps; font-size: .82rem; letter-spacing: .03em; color: var(--muted-txt); }
.scene-rail .rail-lead { color: var(--amber-lo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.scene-rail .rail-count { color: var(--parch-dim); border: 1px solid var(--edge); border-radius: 3px; padding: 0 .42em; flex: none; }
.scene-rail .rail-rite-wrap { display: inline-flex; align-items: center; gap: .45em; margin-left: auto; flex: none; }
.scene-rail .rail-rite-label { color: var(--faint); font-size: .76rem; }
.scene-rail .rail-rite { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--ink); border: 1px solid var(--edge); position: relative; overflow: hidden; }
.scene-rail .rail-rite i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--amber-lo), var(--amber-deep)); transition: width .5s; }
.scene-rail .rail-rite.near i { background: linear-gradient(90deg, var(--thread), var(--thread-lo)); }
.scene-rail .rail-rite.full i { background: var(--thread-glow); box-shadow: 0 0 6px var(--thread); }

/* markdown headings the GM may emit inside narration — styled, never a literal "#" */
.prose-h { font-family: var(--display); color: var(--amber-glow); letter-spacing: .03em; line-height: 1.2;
  margin: .1em 0 .55em; text-shadow: 0 0 14px rgba(244,213,144,.14); }
.prose-h1 { font-size: 1.12em; }
.prose-h2 { font-size: 1.04em; }
.prose-h3, .prose-h4 { font-size: .96em; color: var(--amber-lo); font-variant: small-caps; letter-spacing: .06em; }