/* ── play.css local palette (6.1 colour hoist) — this file's own colours, named and in ONE
   place so the surface can be re-tinted without hunting through the rules below. ── */
:root {
  --mp-beat-ambient-c: #6f8a6f;
  --tf-beat-combat-fg: #e0796a;
  --tf-k-combat-c: #a04438;
  --tf-unread-fg: #1a0f06;
  --tf-draft-from-fg: #c7a3ff;
  --tf-chip-tok-fg: #1a140c;
  --tf-chip-tok-bg: #b07cff;
  --tf-chip-tok-fg2: #16101f;
  --tf-hp-bg: #5da85b;
  --tf-hp-bg2: #c8543c;
  --mp-defeat-crest-fg: #b5482f;
}

/* PLAY — the bare-bones, peaceful Map screen (views/play.js). Renders a Map Wizard tile map on a canvas
   with character tokens; combat UI lives archived (play_combat.css) until it returns as an instance. */

/* Full-bleed: fill the gap between the topbar and the viewport bottom; the canvas fills the rest and the
   page never scrolls (mirrors the Lab full-height pattern in theme.css). */
body:has(.mp) footer.app-footer { display: none; }
body:has(.mp) main.app-main {
  flex: 0 0 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0;
  height: calc(100dvh - var(--topbar-h, 3.5rem)); max-height: calc(100dvh - var(--topbar-h, 3.5rem));
}
body:has(.mp) main.app-main > #app { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* ── THE TABLE FEED shell (docs/play-ui.md P0): feed column | board, party dock under both.
   The feed is the signature — the DM's reading column; all other chrome is summoned, never parked. ── */
.mp { display: grid; grid-template-columns: 24rem minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "feed board" "dock dock"; position: relative; flex: 1 1 auto; min-height: 0;
  width: 100%; overflow: hidden; background: var(--bg); }
.mp.tf-closed { grid-template-columns: 2rem minmax(0, 1fr); }
@media (max-width: 68.75rem) { .mp { grid-template-columns: 18rem minmax(0, 1fr); } } /* slim feed when narrow (full collapse polish in P4) */
.mp-stage { position: absolute; inset: 0; cursor: grab; }
.mp-stage:active { cursor: grabbing; }
.mp-stage.mp-aim { cursor: crosshair; }
.mp-canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* The feed column */
.tf-feed { grid-area: feed; display: flex; flex-direction: column; min-height: 0; min-width: 0;
  border-right: 0.0625rem solid var(--border);
  background: linear-gradient(180deg, rgba(var(--glass-rgb), .96), rgba(var(--glass-rgb), .98)); }
.tf-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-6);
  border-bottom: 0.0625rem solid var(--border); }
.tf-fold { background: none; border: none; color: var(--muted); cursor: pointer; font-size: var(--fs-base); padding: 0 var(--sp-2); }
.tf-fold:hover { color: var(--gold); }
.tf-title { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sp-3);
  font: 600 var(--fs-sm)/1.2 var(--font-mono); letter-spacing: .05em; color: var(--gold); }
.tf-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-speak .ui-switch { font-size: var(--fs-sm); }
.tf-edgetab { grid-area: feed; border: none; border-right: 0.0625rem solid var(--border); background: rgba(18, 14, 9, .95);
  color: var(--gold); cursor: pointer; writing-mode: vertical-rl; font: 600 var(--fs-xs)/1 var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase; padding: var(--sp-6) 0; }
.tf-edgetab:hover { color: var(--accent); }

/* The stream — the DM's voice reads in the book face; declares/rolls stay utilitarian mono */
.tf-stream { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-7);
  display: flex; flex-direction: column; gap: var(--sp-7); }
.tf-beat { border-left: 0.125rem solid rgba(var(--gold-rgb), .25); padding-left: var(--sp-6); }
.tf-beat-act { font: 500 var(--fs-xs)/1.35 var(--font-mono); color: var(--muted); margin-bottom: var(--sp-2); }
.tf-beat-act b { color: var(--gold); font-weight: 600; }
.tf-beat-text { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.55; color: var(--text); }
.tf-beat.mp-beat-ambient { border-left-color: var(--mp-beat-ambient-c); }
.tf-beat.mp-beat-ambient .tf-beat-text { font-style: italic; color: var(--muted); }
.tf-quiet { color: var(--muted); font-size: var(--fs-sm); font-style: italic; }

/* The declare foot — input and reply are ONE conversation */
.tf-foot { border-top: 0.0625rem solid var(--border); padding: var(--sp-5) var(--sp-6); }
.tf-declare { display: flex; gap: var(--sp-4); }
.tf-declare input { flex: 1; min-width: 0; font: inherit; font-size: var(--fs-smplus); color: inherit;
  background: var(--panel-2); border: 0.0625rem solid var(--border); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); }
.tf-foot .mp-act-wait, .tf-foot .mp-act-offline { margin: 0 0 var(--sp-4); }
.tf-foot-watch { color: var(--muted); font-size: var(--fs-sm); font-style: italic; display: flex; gap: var(--sp-3); align-items: center; }

/* The board region + on-canvas view cluster */
.tf-boardwrap { grid-area: board; position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.tf-viewcluster { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 7; display: flex; gap: var(--sp-3); }

/* Click-toggled popovers: the PRIMITIVE (.tf-pop/.tf-popmenu) now lives in ui.css — it is kit,
   used outside play (the Library grid's settings). Only play's own variants stay here. */
.tf-viewpop .tf-popmenu { width: 13rem; display: flex; flex-direction: column; gap: var(--sp-5); }
.tf-rulespop .tf-popmenu { width: 22rem; left: 0; right: auto; }   /* left-side button: anchor LEFT or the panel clips off-screen (crawl find 2026-08-07) */

/* ── The feed proper (play-ui P1): typed beats · inline DM drafts · unread pill ── */
.tf-mode { font: 600 var(--fs-2xs)/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); background: var(--panel-2); border: 0.0625rem solid var(--border);
  border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-4); white-space: nowrap; }
/* interactives P2: the declared-action sheet — board-docked (aim-strip family), never a modal */
.mp-intersheet { position: absolute; left: 50%; transform: translateX(-50%); bottom: 4.5rem; z-index: 24;
  width: min(26rem, calc(100% - 2rem)); background: rgba(var(--glass-rgb), .97);
  border: 0.0625rem solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-drop-md); padding: var(--sp-4) var(--sp-5); }
.mp-is-head { display: flex; align-items: center; gap: var(--sp-3); }
.mp-is-head b { font-family: var(--font-display); font-size: var(--fs-md); }
.mp-is-state { color: var(--muted); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .05em; }
.mp-is-x { margin-left: auto; }
.mp-is-result { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--text); font-style: italic; }
.mp-is-roll { color: var(--gold); font-style: normal; font-family: var(--font-mono); font-size: var(--fs-2xs); }
.mp-is-acts { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }

/* #19: the DM's mode picker (emoji segments, titles carry the names) + the AI's Accept/Stay ask */
.tf-modeseg > button { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); line-height: 1; }
.tf-modeask { display: inline-flex; align-items: center; gap: var(--sp-3); white-space: nowrap;
  font-size: var(--fs-sm); color: var(--gold); }
.tf-modewrap { display: inline-flex; align-items: center; gap: var(--sp-2); }
.tf-modepin { padding: 0 var(--sp-2); }
.tf-head2 { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-6);
  border-bottom: 0.0625rem solid var(--border); }
.tf-autoseg { flex: 1 1 auto; }
.tf-autoseg > button { flex: 1; font-size: var(--fs-2xs); padding: var(--sp-2) var(--sp-2); text-transform: capitalize; }
.tf-guidepop .tf-popmenu { width: 19rem; display: flex; flex-direction: column; gap: var(--sp-4); }
.tf-guide-ta { width: 100%; box-sizing: border-box; min-height: 4.5rem; resize: vertical;
  background: var(--panel-2); border: 0.0625rem solid var(--border); color: var(--text);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm); font-family: inherit; }

.tf-beat-fact { font: 500 var(--fs-sm)/1.4 var(--font-mono); color: var(--text); }
.tf-beat-fact b { color: var(--gold); }
.tf-k-roll { border-left-color: rgba(var(--gold-rgb), .5); }
.tf-beat-combat { color: var(--tf-beat-combat-fg); }
.tf-k-combat { border-left-color: var(--tf-k-combat-c); }
.tf-beat-note, .tf-k-system .tf-beat-note { font-size: var(--fs-sm); color: var(--muted); }
.tf-k-system { border-left-color: transparent; }
.tf-beat-dm { font-style: italic; color: var(--muted); }
.tf-k-dm { border-left-color: var(--mp-beat-ambient-c); }
.tf-beat-say .tf-say-who { color: var(--gold); font-style: normal; }
.tf-recap { background: rgba(var(--gold-rgb), .06); border: 0.0625rem solid rgba(var(--gold-rgb), .25);
  border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6); }
.tf-recap-h { display: block; font: 600 var(--fs-2xs)/1 var(--font-mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: var(--sp-3); }
.tf-k-recap { border-left: none; padding-left: 0; }

/* Fact CLUSTERS — runs of dice/system/combat lines fold into one quiet block (anti-clutter,
   operator 2026-08-06): prose keeps the stage, table chatter reads as a single margin note. */
.tf-cluster { border-left: 0.125rem solid rgba(var(--gold-rgb), .18); padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
  display: flex; flex-direction: column; gap: 0.1875rem; }
.tf-cluster .tf-beat { border-left: none; padding-left: 0; }
.tf-cluster .tf-beat-fact { font-size: var(--fs-xs); opacity: .85; }
.tf-cluster .tf-beat-note { font-size: var(--fs-xs); }
.tf-densityseg > button { font-size: var(--fs-2xs); padding: var(--sp-1) var(--sp-3); }

.tf-loadmore { align-self: center; background: none; border: 0.0625rem solid var(--border);
  border-radius: var(--r-pill); color: var(--muted); cursor: pointer; font-size: var(--fs-xs);
  padding: var(--sp-2) var(--sp-6); }
.tf-loadmore:hover { color: var(--gold); border-color: var(--gold); }
.tf-unread { position: absolute; left: 50%; transform: translateX(-50%); bottom: 4.25rem; z-index: 8;
  background: var(--accent); color: var(--tf-unread-fg); border: none; border-radius: var(--r-pill); cursor: pointer;
  font: 600 var(--fs-xs)/1 var(--font-mono); padding: var(--sp-3) var(--sp-7);
  box-shadow: var(--shadow-drop-sm); }
.tf-feed { position: relative; }   /* anchors the unread pill */

/* Inline DM drafts — approval cards sit IN the stream where the beat will land */
.tf-draft { border: 0.0625rem solid rgba(176, 124, 255, .4); background: rgba(176, 124, 255, .07);
  border-radius: var(--r-lg); padding: var(--sp-5); }
.tf-draft-from { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--sp-3); }
.tf-draft-from b { color: var(--tf-draft-from-fg); font-weight: 600; }
.tf-draft-decl { font-style: italic; }
.tf-draft-text { width: 100%; box-sizing: border-box; min-height: 5rem; resize: vertical;
  background: var(--panel-2); border: 0.0625rem solid var(--border); color: var(--text);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); font-size: var(--fs-smplus);
  line-height: 1.45; font-family: inherit; }
.tf-draft-acts { display: flex; gap: var(--sp-4); margin-top: var(--sp-4); }
.tf-draft-acts .btn-primary { flex: 1; }
/* Hand PROPOSALS — the DM wants to ACT (approve/decline, never text-released) */
.tf-hand { border-color: rgba(var(--gold-rgb), .45); background: rgba(var(--gold-rgb), .07); }
.tf-hand .tf-draft-from b { color: var(--gold); }
.tf-hand-why { font-size: var(--fs-sm); color: var(--muted); font-style: italic; margin-bottom: var(--sp-3); }

/* The party dock — sheets along the table's edge */
.tf-dock { grid-area: dock; display: flex; align-items: center; gap: var(--sp-5); min-height: 3.5rem;
  padding: var(--sp-4) var(--sp-6); border-top: 0.0625rem solid var(--border); background: rgba(15, 12, 8, .97); }
.tf-chips { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sp-4); overflow-x: auto; }
.tf-chip { display: inline-flex; align-items: center; gap: var(--sp-3); background: var(--panel-2);
  border: 0.0625rem solid var(--border); border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-2); color: var(--text); font-size: var(--fs-sm); white-space: nowrap; }
button.tf-chip { cursor: pointer; transition: border-color .12s, background .12s; }
button.tf-chip:hover { border-color: var(--accent); }
.tf-chip.open { border-color: var(--gold); background: rgba(var(--gold-rgb), .10); }
.tf-chip-tok { display: inline-flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem;
  border-radius: var(--r-round); background: var(--gold); color: var(--tf-chip-tok-fg); font-weight: 700; font-size: var(--fs-2xs); }
.tf-chip.me .tf-chip-tok { background: var(--accent); }
.tf-chip-away { opacity: .55; }
.tf-chip-flag { font-size: var(--fs-sm); }
.tf-chip-dm .tf-chip-tok { background: var(--tf-chip-tok-bg); color: var(--tf-chip-tok-fg2); }
.tf-chip-focus { box-shadow: 0 0 0 0.125rem var(--gold); }   /* whose scene this is (2026-08-15) */
.tf-dockright { display: flex; align-items: center; gap: var(--sp-4); }
.tf-joinchip { border-radius: var(--r-pill); }

/* ── P2: vitals chips (exact for self/DM, BANDS for allies) + peeks ── */
.tf-chip-col { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.1875rem; min-width: 0; }
.tf-hp { display: block; width: 100%; min-width: 3.5rem; height: 0.25rem; border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .12); overflow: hidden; }
.tf-hp i { display: block; height: 100%; border-radius: inherit; background: var(--tf-hp-bg); transition: width .25s; }
.tf-hp[data-band="wounded"] i { background: var(--gold); }
.tf-hp[data-band="bloodied"] i { background: var(--tf-hp-bg2); }
.tf-hp[data-band="down"] { background: rgba(200, 84, 60, .35); }
.tf-chip-hp { font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--muted); }
.tf-chip.me .tf-chip-hp { color: var(--gold); }
.tf-chip-else { opacity: .65; }
.tf-chips .tf-pop { display: inline-flex; flex: 0 0 auto; }
.tf-peek .tf-popmenu { width: 14rem; max-height: none; overflow: visible; }
.tf-peek-name { font-family: var(--font-display); font-size: var(--fs-base); color: var(--text); margin-bottom: var(--sp-3); }
.tf-peek-name i { font: 500 var(--fs-2xs) var(--font-mono); font-style: normal; color: var(--muted); }
.tf-peek-row { font: 500 var(--fs-sm)/1.5 var(--font-mono); color: var(--muted); }

/* HUD panels use the SHARED command-deck chrome (.cb-hud / .cb-panel / .cb-ph) from panels.css and the
   shared component in views/_panels.js. Only Play's per-panel CONTENT is styled below. */

/* Table card (Phase-5 pivot): the roster + View / Story / Rules fold into ONE tabbed card so the play
   surface holds ≤3 chrome objects (full-bleed board + actor card + this). Seg = tab strip; body = face. */
/* Current board name — the identity the retired Overworld Map panel used to carry (5.4). */

/* Panel bodies */
.mp-prow { font-size: var(--fs-smplus); color: var(--muted); margin-bottom: var(--sp-5); }
.mp-prow b { color: var(--gold); font-weight: 600; }
/* .mp-pbtn folded onto the kit (2.1): `btn mp-pbtn`; full-width chunky panel-button deltas only. The old
   `.mp-pbtn-primary` gold emphasis is now a filled `btn-primary` (ember = primary ACTION). */
.mp-pbtn { width: 100%; padding: var(--sp-5) var(--sp-7); border-radius: var(--r-lg); }
/* Stance picker (Run / Play / Watch) — the seat at the table. Uses the global .seg primitive; just size it. */
.mp-prow-dm { color: var(--gold); }
.mp-prow-watch { color: var(--muted); font-style: italic; }
.mp-rtok-dm { background: var(--tf-chip-tok-bg); color: var(--tf-chip-tok-fg2); }        /* DM running the session */
.mp-rtok-spectator { background: transparent; border: 0.0625rem solid var(--border); color: var(--muted); font-size: var(--fs-xs); }
.mp-roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3125rem; max-height: 8rem; overflow-y: auto; }
.mp-seatlink { margin-top: var(--sp-5); background: none; border: none; color: var(--muted); font-size: var(--fs-xs); cursor: pointer; padding: var(--sp-1) 0; text-decoration: underline; text-underline-offset: 0.125rem; }
.mp-metrow { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); font-size: var(--fs-xs); }
.mp-metlbl { color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-2xs, 0.625rem); }
.mp-metname { color: var(--fg); cursor: default; border-bottom: 1px dotted var(--muted); }
.mp-seatlink:hover { color: var(--accent); }
.mp-rrow { display: flex; align-items: center; gap: var(--sp-5); font-size: var(--fs-smplus); }
.mp-rtok { display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; flex: 0 0 auto;
  border-radius: var(--r-round); background: var(--gold); color: var(--tf-chip-tok-fg); font-weight: 700; font-size: var(--fs-2xs); }
.mp-rrow.me .mp-rtok { background: var(--accent); }
.mp-rname { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-rrow.me .mp-rname { color: var(--gold); }
.mp-empty { color: var(--muted); font-size: var(--fs-sm); }
/* .mp-vbtn folded onto the kit (2.1): `btn mp-vbtn`; min-width delta only. `.mp-vbtn.on` stays RED
   (destructive-active — operator 2026-08-02) below. */
.mp-vbtn { min-width: 2rem; }
/* Live push-to-talk caption — the words as they are heard, so a silent mic is visibly
   different from a broken one (that ambiguity is what made STT look dead). */
.mp-mic-live { flex:1 1 100%; min-height:1.05rem; font-size:var(--fs-sm); line-height:1.3;
  color:var(--gold); opacity:.85; font-style:italic; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }

.mp-vbtn-wide { flex: 1; font-size: var(--fs-sm); }
/* View: zoom actions + a real Grid Switch (the boolean control) */
.mp-zoom { display: flex; gap: var(--sp-4); margin-bottom: 0.5625rem; }

/* Weather · the time-of-day dial (shows AND sets time) + inline control rows */
.mp-wnow { display: flex; align-items: baseline; gap: 0.5625rem; margin-bottom: 0.6875rem; }
.mp-wnow b { font-family: var(--font-display); font-size: var(--fs-sub); color: var(--gold); font-weight: 600; }
.mp-wcond { font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mp-todseg { width: 100%; }
.mp-todseg button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: 0.4375rem var(--sp-1); }
.mp-tod-ico { font-size: var(--fs-lg); line-height: 1; filter: grayscale(.5) opacity(.6); transition: filter .15s; }
.mp-todseg button.on .mp-tod-ico { filter: none; }
.mp-tod-lbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.mp-todseg button.on .mp-tod-lbl { color: var(--gold); }
.mp-wrow { display: flex; align-items: center; gap: var(--sp-5); margin-top: 0.5625rem; }
.mp-wtag { flex: 0 0 3.375rem; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mp-chip { background: var(--panel-2); border: 0.0625rem solid var(--border); color: var(--text); border-radius: var(--r-pill);
  padding: var(--sp-3) 0.6875rem; font-size: var(--fs-xs); cursor: pointer; transition: border-color .12s, color .12s; }
.mp-chip:hover { border-color: var(--accent); color: var(--accent); }
.mp-wsel { flex: 1; min-width: 0; background: var(--panel-2); border: 0.0625rem solid var(--border); color: var(--text);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm); cursor: pointer; }
.mp-wsel:hover { border-color: var(--accent); }

/* Flash / error toast */
.mp-flash { position: absolute; top: 3.75rem; left: 50%; transform: translateX(-50%); z-index: 6;
  background: rgba(12,10,7,.8); border: 0.0625rem solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-9);
  font-size: var(--fs-smplus); color: var(--muted); }

/* Join chooser modal */
.mp-modal-bg { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: rgba(8,6,3,.66); backdrop-filter: blur(0.1875rem); }
.mp-card { position: relative; width: min(26.25rem, 92vw); max-height: 86%; display: flex; flex-direction: column;
  text-align: center; padding: var(--sp-11) var(--sp-11) 1.375rem; border: 0.0625rem solid var(--border); border-radius: var(--r-2xl);
  background: radial-gradient(135% 130% at 50% 0%, rgba(var(--accent-rgb),.08), transparent 60%), linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow: var(--shadow-drop-lg); }
.mp-card > * { flex: 0 0 auto; }
.mp-eyebrow { display: block; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); opacity: .85; }
.mp-h { margin: var(--sp-3) 0 var(--sp-3); font-family: var(--font-display); font-size: var(--fs-card); color: var(--text); }
.mp-sub { margin: 0 0 var(--sp-8); color: var(--muted); font-size: var(--fs-smplus); }
.mp-muted { color: var(--muted); font-size: var(--fs-base); margin: var(--sp-6) 0 var(--sp-1); }
.mp-choices { display: flex; flex-direction: column; gap: var(--sp-5); text-align: left;
  flex: 0 1 auto; min-height: 0; max-height: 16.5rem; overflow-y: auto; padding-right: var(--sp-3); }
.mp-choice { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); cursor: pointer;
  background: var(--panel-2); border: 0.0625rem solid var(--border); border-radius: var(--r-lg); padding: 0.6875rem var(--sp-8);
  transition: border-color .12s, transform .08s; }
.mp-choice:hover { border-color: var(--accent); transform: translateX(0.125rem); }
.mp-choice-name { font-family: var(--font-display); font-size: var(--fs-md); color: var(--text); }
.mp-choice-detail { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--muted); }
.mp-card-close { position: absolute; top: 0.625rem; right: 0.75rem; background: none; border: none; color: var(--muted);
  font-size: var(--fs-md); cursor: pointer; }
.mp-card-close:hover { color: var(--text); }

/* ── entry seat-gate (Run / Play / Watch) ──────────────────────────────────── */
.mp-seats { display: flex; flex-direction: column; gap: var(--sp-6); margin-top: var(--sp-7); }
.mp-seat { display: grid; grid-template-columns: 2rem 1fr; grid-template-rows: auto auto; column-gap: var(--sp-7);
  align-items: center; text-align: left; cursor: pointer; background: var(--panel-2); border: 0.0625rem solid var(--border);
  border-radius: var(--r-xl); padding: var(--sp-7) var(--sp-8); transition: border-color .12s, transform .12s, background .12s; }
.mp-seat:hover { border-color: var(--accent); transform: translateX(0.125rem); }
.mp-seat-ico { grid-row: 1 / 3; font-size: var(--fs-modal); text-align: center; }
.mp-seat-name { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text); }
.mp-seat-sub { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--muted); }

/* Rules panel — document-grounded lookups (restructure P12). */
.mp-rules-ask { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.mp-rules-ask input { flex: 1; min-width: 0; font: inherit; font-size: var(--fs-sm); color: inherit;
  background: transparent; border: 0.0625rem solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-5); }
.mp-rules-hits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: 0.4375rem; max-height: 10.625rem; overflow-y: auto; }
.mp-rules-hits li { font-size: var(--fs-sm); line-height: 1.35; }
.mp-rules-cite { color: var(--accent); font-size: var(--fs-xs); margin-left: var(--sp-3); }
.mp-rules-sum { display: block; color: var(--muted); }

/* Campaign-with-no-maps empty state (server returned no_map) */
.mp-nomap { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  gap: var(--sp-7); text-align: center; }
.mp-nomap .roster-empty { min-width: 26.25rem; }

.mp-act-readaloud { display: flex; align-items: center; gap: 0.3125rem; font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-4); cursor: pointer; }
.mp-act-wait { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--gold); font-style: italic; }
.mp-act-offline { margin-top: var(--sp-5); font-size: var(--fs-sm); line-height: 1.45; color: var(--warn, #d9a441);
  background: color-mix(in srgb, var(--warn, #d9a441) 12%, transparent); border: 1px solid
  color-mix(in srgb, var(--warn, #d9a441) 32%, transparent); border-radius: var(--r-md); padding: 0.4rem 0.55rem; }
.mp-vbtn.on { color: var(--bad); border-color: var(--bad); }

/* ── shared Story log (all seats) ──────────────────────────────────────────── */
.mp-beat-cites { margin-top: var(--sp-2); display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* ── AI-DM console (Run seat) ──────────────────────────────────────────────── */
.mp-crow { display: flex; align-items: center; gap: 0.3125rem; margin-bottom: 0.3125rem; }
.mp-clabel { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.mp-clabel-q { margin: var(--sp-7) 0 var(--sp-4); }
.mp-queue { max-height: 13.125rem; overflow-y: auto; }
.mp-autoseg { width: 100%; margin-bottom: 0.5625rem; }
.mp-autoseg button { flex: 1; font-size: var(--fs-xs); padding: 0.3125rem var(--sp-2); }
.mp-guide { margin: 0.5625rem 0; }
.mp-guide summary { font-size: var(--fs-xs); color: var(--muted); cursor: pointer; }
.mp-guide textarea { width: 100%; box-sizing: border-box; margin-top: var(--sp-4); min-height: 3.375rem; resize: vertical;
  background: var(--panel-2); border: 0.0625rem solid var(--border); color: var(--text); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm); font-family: inherit; }
.mp-draft { border: 0.0625rem solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-5); background: rgba(176,124,255,.06); }
.mp-draft-from { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 0.3125rem; }
.mp-draft-from b { color: var(--tf-draft-from-fg); font-weight: 600; }
.mp-draft-text { width: 100%; box-sizing: border-box; min-height: 4.125rem; resize: vertical; background: var(--panel-2);
  border: 0.0625rem solid var(--border); color: var(--text); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); font-size: var(--fs-smplus); line-height: 1.45; font-family: inherit; }
.mp-draft-acts { display: flex; gap: var(--sp-4); margin-top: var(--sp-4); }
.mp-draft-acts .mp-vbtn { flex: 1; }
.mp-vbtn-go { background: rgba(var(--gold-rgb),.18); border-color: var(--gold); color: var(--gold); font-weight: 600; }
.mp-vbtn-go:hover { background: rgba(var(--gold-rgb),.28); }

/* Map navigation in the board panel (audit 2026-07-18: no way to move between boards existed) */
.mp-goparty { width: 100%; margin-top: var(--sp-4); }
.mp-mapnav { margin-top: var(--sp-4); }
.mp-mapnav .sel2 { width: 100%; }
/* Go to player (At the table) */
.mp-rrow { cursor: pointer; border: 0.0625rem solid transparent; border-radius: var(--r-md); }
.mp-rrow.sel { border-color: var(--gold); background: rgba(var(--gold-rgb), .10); }
.mp-rgrp { font: 600 var(--fs-2xs) var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: var(--sp-5) 0 var(--sp-2); }
.mp-rmap { display: block; font: 500 var(--fs-2xs) var(--font-mono); font-style: normal; color: var(--muted); }
.mp-gotoplayer { width: 100%; margin-top: 0.4375rem; }
/* Refocus catch-up shroud */
.mp-sync { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(12, 10, 7, .55); backdrop-filter: blur(0.125rem); z-index: 6; }
.mp-sync-card { font: 600 var(--fs-base) var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold); background: rgba(20, 16, 10, .9); border: 0.0625rem solid rgba(var(--gold-rgb), .35);
  border-radius: var(--r-lg); padding: var(--sp-6) 1.125rem; animation: mp-sync-pulse 1.1s ease-in-out infinite; }
@keyframes mp-sync-pulse { 50% { opacity: .55; } }
.mp-rrest { cursor: default; opacity: .75; }
/* The Table face can grow (Away/Elsewhere groups) — scroll inside the tab body, never under the card. */
/* DM table controls */
.mp-rreset { margin-left: auto; padding: 0 var(--sp-3); cursor: pointer; color: var(--muted); border-radius: var(--r-sm); }
.mp-rreset:hover { color: var(--gold); background: rgba(var(--gold-rgb), .12); }
.mp-bringparty { width: 100%; margin-top: var(--sp-4); }
.mp-rgrp-jump { cursor: pointer; color: var(--gold); }
.mp-rgrp-jump:hover { text-decoration: underline; }
/* DM party-rest control (map board panel) */
.mp-restrow { display: flex; align-items: center; gap: 0.3125rem; margin-top: 0.3125rem; }
.mp-restlbl { font: 600 var(--fs-micro)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: var(--sp-1); }
.mp-restbtn { flex: 1 1 auto; }

/* seat rows are ACTIONS (kit Modal); the current seat is marked with a text tag, not button state */
.mp-seat-cur { font: 600 var(--fs-micro)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold); }

/* Play rails — the collision-free default flow (ui-rework 3.4): panels stack in two columns */

/* the seated player's character card — a self-managed window docked bottom-right (out of combat).
   The "Act" console (Phase-5 pivot) sits ABOVE the card as part of the same chrome object. */
.mp-charcard { position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 29; display: flex; flex-direction: column; gap: var(--sp-4); align-items: stretch; }
.mp-dmcard { position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 29; }

/* MVP 2.3 — party-defeat decision overlay (honest screen for players; DM's real choice) */
.mp-defeat { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(8, 6, 4, .74); backdrop-filter: blur(3px); }
.mp-defeat-card { max-width: 30rem; padding: 1.6rem 1.8rem; text-align: center; border-radius: var(--r-2xl); }
.mp-defeat-crest { font-size: 2.4rem; color: var(--mp-defeat-crest-fg); margin-bottom: .3rem; }
.mp-defeat-h { margin: 0 0 .3rem; color: var(--gold, #e0a838); }
.mp-defeat-sub { color: var(--muted); margin: 0 0 var(--sp-9); }
.mp-defeat-q { font-weight: 600; margin: .6rem 0; }
.mp-defeat-seg { flex-wrap: wrap; justify-content: center; margin-bottom: .8rem; }
.mp-defeat-note { width: 100%; min-height: 3rem; margin-bottom: .8rem; resize: vertical; }
.mp-defeat-go { width: 100%; }
.mp-defeat-wait { color: var(--muted); font-style: italic; margin-top: .8rem; }
.mp-defeat-select { width: 100%; margin-bottom: .8rem; padding: .5rem .6rem; }

/* ── P3 COMBAT CHROME — the fight lives INSIDE the shell's board region ── */
.cb-embedded { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.cb-embedded .cb-body { position: relative; flex: 1 1 auto; min-height: 0; }
.cb-embedded .cb-stage { position: absolute; inset: 0; }

/* The initiative RIBBON — round · turn controls ONCE · portrait order · tools */
.cbr { flex: 0 0 auto; display: flex; flex-direction: column; z-index: 8;
  background: rgba(15, 12, 8, .96); border-bottom: 0.0625rem solid var(--border); }
.cbr-row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-6); min-height: 3rem; }
.cbr-round { font: 700 var(--fs-sm)/1 var(--font-mono); letter-spacing: .06em; color: var(--gold); white-space: nowrap; }
.cbr-round.pre { color: var(--muted); }
.cbr-order { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); overflow-x: auto; padding: 0 var(--sp-2); }
.cbr-chip { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 0.125rem;
  background: none; border: none; cursor: pointer; padding: 0.125rem 0.125rem 0.25rem; border-radius: var(--r-md); }
.cbr-chip:hover { background: var(--hover-bg); }
.cbr-disc { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border-radius: var(--r-round); overflow: hidden; background: var(--panel-2);
  border: 0.125rem solid var(--side, var(--border)); color: var(--text);
  font: 700 var(--fs-2xs)/1 var(--font-mono); }
.cbr-disc img { width: 100%; height: 100%; object-fit: cover; }
.cbr-chip.active .cbr-disc { box-shadow: 0 0 0 0.1875rem rgba(var(--gold-rgb), .8); }
.cbr-chip.sel .cbr-disc { box-shadow: 0 0 0 0.125rem rgba(224, 121, 44, .9); }
.cbr-chip.dead { opacity: .35; filter: grayscale(1); }
.cbr-chip.unseen { opacity: .5; }
.cbr-init { font: 600 var(--fs-micro)/1 var(--font-mono); color: var(--muted); }
.cbr-hp { width: 1.75rem; height: 0.1875rem; border-radius: var(--r-xs); background: rgba(255,255,255,.14); overflow: hidden; }
.cbr-hp i { display: block; height: 100%; background: var(--tf-hp-bg); }
.cbr-hp.blood i { background: var(--tf-hp-bg2); }
.cbr-tools { display: flex; align-items: center; gap: var(--sp-3); }
.cbr-pop .tf-popmenu { width: 17rem; }
.cbr-propose { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-6);
  background: rgba(176, 124, 255, .10); border-bottom: 0.0625rem solid rgba(176, 124, 255, .35);
  font-size: var(--fs-sm); color: var(--text); }
.cbr-viewcluster { top: 0.75rem; right: 0.75rem; }

/* The ACTION STRIP — docked to the board bottom on your turn (the ONE aim machine) */
.cb-strip { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0.75rem; z-index: 9;
  max-width: calc(100% - 1.5rem); }
.cb-strip .cb-actionbar { background: rgba(15, 12, 8, .97); border: 0.0625rem solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-drop-md);
  padding: var(--sp-4) var(--sp-6); max-height: 11rem; overflow-y: auto; }
.cb-embedded .cb-charcard { position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 30; }
.cb-embedded .cb-dmcard { position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 29; }
.cb-embedded .cb-conn { font-size: var(--fs-2xs); }

/* ── P4 polish: keyboard focus on the new chrome ── */
.tf-popbtn:focus-visible, .tf-chip:focus-visible, .cbr-chip:focus-visible, .tf-fold:focus-visible,
.tf-edgetab:focus-visible, .tf-unread:focus-visible, .tf-loadmore:focus-visible,
.tf-autoseg > button:focus-visible, .tf-densityseg > button:focus-visible,
.mp-seatlink:focus-visible, .tf-declare input:focus-visible {
  outline: 0.125rem solid var(--accent); outline-offset: 0.125rem; }
@media (prefers-reduced-motion: reduce) {
  .tf-hp i, .tf-chip, .cbr-chip { transition: none; }
}
/* Reaction prompts dock INTO the strip in embedded mode (legacy float stays for /lab/play) */
.cb-strip .cb-react { position: static; transform: none; margin: 0 0 var(--sp-3); width: auto; }