/* === AguaVault D&D Tavern === */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;800;900&family=Cinzel+Decorative:wght@700;900&family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600;700&family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
  --bg: #0a0a0f;
  --surface: #13131a;
  --surface2: #1c1c26;
  --surface3: #252535;
  --border: rgba(255,255,255,0.08);
  --border-light: rgba(255,255,255,0.15);
  --text: #f0f0f5;
  --text-dim: rgba(240,240,245,0.6);
  --muted: rgba(240,240,245,0.35);
  --agua: #4A9EFF;
  --haley: #FF6B9D;
  --cameron: #A78BFA;
  --guest: #4AFF9E;
  --gold: #FFD700;
  /* S196 — promoted to :root (was only in .ss/.pg/etc scopes). The appended
     global .btn-primary uses var(--gold-grad); in a modal rendered outside a
     gold-scope it resolved to nothing → transparent button + near-black text =
     the unreadable confirm buttons (Tyler retest #3a). */
  --gold-soft: #FFE8A0;
  --gold-grad: linear-gradient(135deg, #FFD700 0%, #FFE88A 32%, #FFD700 52%, #CC9900 100%);
  --danger: #FF4A4A;
  --success: #4AFF9E;
  --warning: #FFB84A;
  --dm: #C9A961;
  --combat-red: #FF2D2D;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --font-display: 'Cinzel', serif;
  --font-body: 'DM Sans', sans-serif;
  /* S246 feed grammar — both faces already load via the @import; promoted to
     tokens so the War Table rules stop hardcoding family strings. */
  --font-read: 'Spectral', serif;
  --mono: 'DM Mono', monospace;
  --transition: 0.2s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* === Screens === */
.screen { display: none; min-height: 100vh; flex-direction: column; }
.screen.active { display: flex; }

/* === Splash Screen === */
/* ============================================================
   SPLASH / LANDING — cinematic "tavern at night" scene.
   Redesign per docs/design/project_redesign/design_handoff_home_screen (S166).
   Background art on the right, lockup anchored lower-left. The
   `.home__*` (BEM) names mirror the handoff spec — distinct from
   the app's `#home` user-select screen + its `.home-*` classes.
   ============================================================ */
#splash.active {
  position: relative;
  min-height: 100vh;            /* fallback for engines without svh */
  min-height: 100svh;           /* small-viewport height — avoids mobile URL-bar jump (handoff spec) */
  flex-direction: row;          /* override .screen's column so flex-end = bottom, flex-start = left */
  align-items: flex-end;        /* lockup sits at the bottom ... */
  justify-content: flex-start;  /* ... left */
  overflow: hidden;
  background: var(--ink, #060507);
  isolation: isolate;           /* stacking context for the layered overlays */
  padding: 0;
}

/* Layer 1 — the art (one of three picked at random by the inline script;
   the var is the no-JS fallback). */
.home__art {
  position: absolute; inset: 0; z-index: 0;
  background: var(--scene-art, url("/art/home/street.webp")) center / cover no-repeat;
}

/* Layer 2 — scrim. Darkens left + bottom so the lockup always reads over any
   of the three (right-lit / left-shadowed) images. Load-bearing legibility. */
.home__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,3,5,0.85) 0%, rgba(4,3,5,0.50) 24%, transparent 50%),
    linear-gradient(0deg,  rgba(4,3,5,0.88) 0%, rgba(4,3,5,0.40) 22%, transparent 44%);
}

/* Layer 3 — vignette (subtle edge darkening) */
.home__vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 75% 72% at 50% 42%, transparent 38%, rgba(0,0,0,0.5) 100%);
}

/* Layer 4 — cinematic letterbox bars (optional flourish) */
.home__bar { position: absolute; left: 0; right: 0; height: 6.5%; background: #000; z-index: 3; pointer-events: none; }
.home__bar--top { top: 0; }
.home__bar--bottom { bottom: 0; }

/* Layer 5 — rising embers (decorative; spawned by the inline script) */
.home__embers { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.ember {
  position: absolute; bottom: -12px; border-radius: 50%;
  background: radial-gradient(circle, #ffd98a 0%, #ff8a2a 70%, transparent 100%);
  animation: emberRise linear infinite;
  will-change: transform, opacity;
}
@keyframes emberRise {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  8%   { opacity: 1; }
  85%  { opacity: 0.8; }
  100% { transform: translateY(-820px) translateX(var(--drift, 0px)) scale(0.25); opacity: 0; }
}

/* Layer 6 — the lockup */
.home__lockup {
  position: relative; z-index: 5;
  padding: 0 0 78px 78px;
  max-width: 620px;
  animation: lockupIn 1.1s ease-out both;
}
@keyframes lockupIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.home__eyebrow {
  width: 56px; height: 1px; margin-bottom: 16px;
  background: linear-gradient(90deg, rgba(255,205,100,0.75), transparent);
}

.home__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: 2px;
  margin-bottom: 10px;
  color: var(--gold);                 /* fallback if background-clip unsupported */
  background: linear-gradient(135deg, #FFD700 0%, #FFE88A 30%, #FFD700 50%, #CC9900 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.9)) drop-shadow(0 0 3px rgba(0,0,0,0.7));
}

.home__subtitle {
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(245,225,180,0.6);
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
  margin-bottom: 40px;
}

.home__cta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 1px;
  color: var(--gold-soft, #FFE8A0);
  padding: 15px 46px;
  border-radius: 10px;
  background: rgba(255,180,50,0.07);
  border: 1.5px solid rgba(255,190,70,0.34);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease;
  animation: ctaPulse 3.4s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%, 100% { border-color: rgba(255,190,70,0.38); box-shadow: 0 0 24px rgba(255,180,50,0.12); }
  50%      { border-color: rgba(255,200,90,0.78); box-shadow: 0 0 40px rgba(255,180,50,0.30); }
}
.home__cta:hover {
  background: rgba(255,180,50,0.15);
  border-color: rgba(255,200,90,0.75);
  box-shadow: 0 0 44px rgba(255,180,50,0.24);
  transform: translateY(-2px);
}
.home__cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.home__cta::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,228,165,0.42), transparent);
  transform: skewX(-18deg);
  animation: ctaSweep 4.5s ease-in-out infinite;
}
@keyframes ctaSweep { 0% { left: -120%; } 55%, 100% { left: 160%; } }

/* ============================================================
   APP-WIDE MOTION POLICY (S166, Tyler call) — honor prefers-reduced-motion
   consistently across the build. GATE genuine/large motion (drifting
   particles, full slides, big scale/translate entrances); KEEP decorative
   loops (opacity/glow/color pulses, localized shimmers, <=8px nudges, micro
   crit/fumble feedback). When adding a new animation: if it moves an element a
   meaningful distance / rotates / scales noticeably / drifts, gate it here;
   otherwise it may run for everyone. Entrances show their final state;
   timed dismissals keep their opacity fade. Lives mid-file so it needs
   !important to beat the base animation rules declared later. */
@media (prefers-reduced-motion: reduce) {
  /* Home / splash — embers (particles) + the lockup rise entrance.
     (The CTA shimmer + pulse are decorative and intentionally NOT gated.) */
  .home__lockup, .ember { animation: none !important; }
  .home__lockup { opacity: 1; transform: none; }

  /* Your-turn banner — drop the scale(1.6) zoom-in, but KEEP the timed
     opacity fade-out so the banner still auto-dismisses (it has no JS
     removal — the animation IS the dismissal). */
  .your-turn-banner { animation: turnBannerOut 0.6s ease 3s forwards !important; }

  /* Toast — appears in place instead of sliding in from off-screen. */
  .toast { animation: none !important; }

  /* Maintenance banner — drop the slide-down entrance; the countdown variant
     keeps its red glow pulse (decorative + signals an active warning). */
  .maintenance-banner { animation: none !important; }
  .maintenance-banner.countdown { animation: maintBannerPulse 1.6s ease-in-out infinite !important; }

  /* Quest Complete modal — appears instead of animating in; drop ember motion. */
  .qc-modal, .qc-reward { animation: none !important; opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .home__lockup { padding: 0 24px 56px; max-width: 100%; }
  .home__subtitle { letter-spacing: 3px; }
}

/* === Home Screen === */
#home {
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 40px 20px;
}

.home-title {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  background: linear-gradient(135deg, var(--gold), #FFE4A0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

.home-subtitle {
  color: var(--text-dim);
  font-size: 1.1rem;
  margin-top: -32px;
  text-align: center;
}

.user-cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.user-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 40px;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
  min-width: 140px;
}

.user-card:hover {
  border-color: var(--border-light);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.user-card .avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 auto 12px;
  color: #000;
}

.user-card .name {
  font-weight: 600;
  font-size: 1.1rem;
}

/* === PIN Screen === */
#pin-screen {
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 40px 20px;
}

.pin-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold);
}

.pin-dots {
  display: flex;
  gap: 16px;
}

.pin-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-light);
  transition: all var(--transition);
}

.pin-dot.filled {
  background: var(--gold);
  border-color: var(--gold);
}

.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 72px);
  gap: 12px;
}

.pin-key {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: var(--surface);
  color: var(--text);
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pin-key:hover { background: var(--surface2); }
.pin-key:active { transform: scale(0.95); }
.pin-key.backspace { font-size: 1.2rem; }

.pin-error {
  color: var(--danger);
  font-size: 0.9rem;
  height: 20px;
}

.pin-hint {
  color: var(--muted);
  font-size: 0.85rem;
}

/* === Lobby Screen === */
#lobby {
  padding: 40px;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
  gap: 32px;
}

/* Two-column layout: patch notes sidebar on the left, campaign list on the right.
   Stacks vertically on genuinely narrow viewports (phones). Replaces the prior
   pre-login modal popup — patch notes now live inline after the user logs in. */
/* v1.8.25 — three-column lobby. Col 1 (left): roadmap + patch notes.
   Col 2 (main): campaigns list only. Col 3 (right): admin panels + playtest
   + bug reports. Previous 2-col layout stuffed everything admin-related into
   the main column, pushing campaigns below the fold. */
.lobby-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
  width: 100%;
}
@media (max-width: 1280px) {
  /* Medium viewports: collapse to 2-col. Right sidebar wraps below main. */
  .lobby-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 20px; }
  .lobby-right-sidebar { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
}
@media (max-width: 720px) {
  /* Phones: single column stack. Right-sidebar blocks also stack. */
  .lobby-layout { grid-template-columns: 1fr; }
  .lobby-right-sidebar { grid-column: auto; grid-template-columns: 1fr; }
}

/* Right sidebar on wide viewports: vertical stack, sticky scroll within
   each block, matches the left sidebar treatment. */
.lobby-right-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Lobby sidebar — stacked blocks (Roadmap on top, Patch Notes on bottom).
   No sticky / no outer scroll — each block owns its own scroll region so the
   page behaves predictably even when the combined content is tall. */
.lobby-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lobby-sidebar-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Roadmap block: internal scroll capped at a friendly height so it doesn't
   dominate the page. The full list is still one click away via the modal. */
#lobby-roadmap .rm-sidebar-body {
  max-height: 460px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 4px;
}
/* Patch notes body — internal scroll when the list grows long */
#lobby-patch-notes .lobby-sidebar-body {
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 4px;
}
.lobby-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.lobby-sidebar-header .lobby-sidebar-title {
  margin: 0;
  border-bottom: 0;
  padding-bottom: 0;
}
.lobby-sidebar-title {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1.1rem;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.lobby-sidebar-body {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.5;
  /* Long technical identifiers (function names, etc.) must wrap instead of
     punching through the sidebar width and spawning a horizontal scrollbar. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.lobby-sidebar-body .patch-release {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.lobby-sidebar-body .patch-release:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.lobby-sidebar-body .patch-release-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.lobby-sidebar-body .patch-release-ver {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--gold);
}
.lobby-sidebar-body .patch-release-date {
  font-size: 0.72rem;
  color: var(--muted);
}
.lobby-sidebar-body .patch-new-badge {
  background: var(--success);
  color: #061;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 1px;
}
.lobby-sidebar-body ul {
  padding-left: 18px;
  margin: 0;
}
.lobby-sidebar-body li {
  margin-bottom: 3px;
  line-height: 1.45;
}

.lobby-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.lobby-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lobby-header h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold);
}

.btn {
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold), #DAA520);
  color: #000;
}

.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }

.btn-secondary {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border-light);
}

.btn-secondary:hover { background: var(--surface3); }

.btn-danger {
  background: rgba(255,74,74,0.15);
  color: var(--danger);
  border: 1px solid rgba(255,74,74,0.3);
}

.btn-danger:hover { background: rgba(255,74,74,0.25); }

.btn-sm { padding: 6px 14px; font-size: 0.85rem; }

/* Online players bar */
.online-players-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.online-label {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.online-player-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}
.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.online-name { color: var(--text); font-weight: 500; }
.online-activity { color: var(--text-dim); font-size: 0.8rem; }

.campaign-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.campaign-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  cursor: pointer;
  transition: all var(--transition);
}

.campaign-card:hover {
  border-color: var(--gold);
  box-shadow: 0 4px 20px rgba(201,169,97,0.1);
}

.campaign-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold);
  margin-bottom: 8px;
}

.campaign-card .meta {
  color: var(--text-dim);
  font-size: 0.9rem;
  display: flex;
  gap: 16px;
}

.campaign-card .meta span { display: flex; align-items: center; gap: 4px; }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

.empty-state h3 { font-family: var(--font-display); font-size: 1.3rem; color: var(--text-dim); margin-bottom: 8px; }

/* === Campaign Create === */
#campaign-create {
  padding: 40px;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
  gap: 24px;
}

#campaign-create h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold);
}

.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label { font-weight: 500; color: var(--text-dim); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; }

.form-input, .form-select, .form-textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color var(--transition);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.form-textarea { resize: vertical; min-height: 100px; }
.form-select { cursor: pointer; }

.radio-group {
  display: flex;
  gap: 12px;
}

.radio-option {
  flex: 1;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  transition: all var(--transition);
  font-size: 0.9rem;
}

.radio-option:hover { border-color: var(--border-light); }
.radio-option.selected { border-color: var(--gold); background: rgba(201,169,97,0.1); color: var(--gold); }

.form-actions { display: flex; gap: 12px; margin-top: 12px; }

/* === Game Screen === */
#game {
  height: 100vh;
  flex-direction: column;
}

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  min-height: 56px;
}

.game-header .campaign-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--gold);
}

.game-header .header-actions { display: flex; gap: 8px; align-items: center; }

.game-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* Left sidebar — character sheet */
.sidebar-left {
  width: 240px;
  min-width: 240px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.9rem;
}

/* Center — narrative feed */
.center-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 400px;
  overflow: hidden;
}

.narrative-feed {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Narrative messages */
.narrative-msg {
  max-width: 90%;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* (Feed redesign S5: the legacy .narrative-msg.dm card + .dm-label rules were
   retired — DM narration is the nf-w-card, § War Table grammar below.) */
.tts-speaker-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 2px;
  opacity: 0.3;
  transition: opacity 0.2s;
  line-height: 1;
}
.tts-speaker-btn:hover { opacity: 1 !important; }

/* Hearthlight stop-narration pill (M6 redesign). Default = a ceremonial
   "now narrating" pill: warm gradient surface, gold hairline, an ember
   equalizer pulsing while the voice speaks + a mono "Narrating" label.
   Hover = the cancel affordance: danger tint, the bars give way to a
   rounded stop square, label flips to "Stop". Theme-token driven, so it
   tracks every theme. Placement kept (bottom-right, clear of audio ctrls). */
.tts-stop-btn {
  position: absolute;
  bottom: 124px;
  right: 24px;
  display: none;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 15px 0 13px;
  background: linear-gradient(180deg, rgba(40,33,20,0.96), rgba(24,19,11,0.97));
  color: var(--gold-soft, #FFE8A0);
  border: 1px solid var(--gold-deep, #CC9900);
  border-radius: 999px;
  cursor: pointer;
  touch-action: none; /* drag-to-move (S242) — don't let touch scroll the page */
  z-index: 100;
  font: 600 11px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(0,0,0,0.42), inset 0 0 0 1px rgba(255,215,0,0.07);
  transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.tts-stop-btn.visible { display: inline-flex; }

/* ember equalizer — live signal while narrating */
.tts-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.tts-eq i {
  width: 2.5px;
  border-radius: 1px;
  background: var(--gold, #FFD700);
  transform-origin: bottom;
  animation: ttsEq 0.9s ease-in-out infinite;
}
.tts-eq i:nth-child(1) { height: 45%; animation-delay: 0s; }
.tts-eq i:nth-child(2) { height: 90%; animation-delay: 0.16s; }
.tts-eq i:nth-child(3) { height: 60%; animation-delay: 0.32s; }
.tts-eq i:nth-child(4) { height: 100%; animation-delay: 0.48s; }
@keyframes ttsEq { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }

.tts-stop-icon { display: none; }
.tts-stop-label--stop { display: none; }

/* hover/focus → cancel affordance */
.tts-stop-btn:hover,
.tts-stop-btn:focus-visible {
  background: linear-gradient(180deg, rgba(92,24,24,0.97), rgba(58,13,13,0.98));
  color: #fff;
  border-color: var(--danger, #FF4A4A);
  box-shadow: 0 5px 18px rgba(0,0,0,0.46), 0 0 0 1px rgba(255,74,74,0.28);
  transform: translateY(-1px);
  outline: none;
}
.tts-stop-btn:hover .tts-eq,
.tts-stop-btn:focus-visible .tts-eq,
.tts-stop-btn:hover .tts-stop-label--live,
.tts-stop-btn:focus-visible .tts-stop-label--live { display: none; }
.tts-stop-btn:hover .tts-stop-icon,
.tts-stop-btn:focus-visible .tts-stop-icon { display: inline-block; }
.tts-stop-btn:hover .tts-stop-label--stop,
.tts-stop-btn:focus-visible .tts-stop-label--stop { display: inline; }
.tts-stop-btn:active { transform: translateY(0) scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .tts-eq i { animation: none; }
}

/* ♪ Lobby header audio menu (replaces the old bottom-left floating control).
   Popover anchored to the header button — mirrors .cl-usermenu-pop. */
.cl-audiomenu { position: relative; display: inline-block; }
.cl-audiobtn { font-size: 1.05rem; line-height: 1; }
.cl-audiomenu-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--surface, #1a1d24); border: 1px solid var(--border, rgba(255,255,255,0.1)); border-radius: 10px; padding: 12px 14px; z-index: 1200; box-shadow: 0 10px 28px rgba(0,0,0,0.45); }
.cl-audiomenu-title { font-family: var(--font-display, inherit); font-size: 0.7rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--gold, #FFD700); margin-bottom: 10px; }
.audio-slider-row { margin-bottom: 8px; }
.audio-slider-row:last-child { margin-bottom: 0; }
.audio-slider-row label {
  display: block; font-size: 0.75rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;
}
.audio-slider-row input[type="range"] {
  width: 100%; accent-color: var(--gold); height: 4px;
}

/* (Feed redesign S5: the legacy .narrative-msg.player chip, the v1.8.935
   ally/enemy pill containers, the S230 .beat rule, and the OI-30
   dice-pill-batch cluster were retired — player actions are nf-p-chip, dice
   are nf-roll pills in nf-rollgroup/nf-egroup containers, beats are
   .nf-tabletext.beat; § War Table grammar below. The .dice-line format
   survives ONLY as the right-rail Activity Log mirror; the outcome-chip
   rules below still serve those mirror lines.) */

/* Outcome chips */
.outcome-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 10px;
  letter-spacing: 0.4px;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.outcome-chip.hit     { background: rgba(74, 255, 158, 0.15); color: #4AFF9E; border-color: rgba(74, 255, 158, 0.3); }
.outcome-chip.miss    { background: rgba(240, 240, 245, 0.08); color: var(--text-dim); border-color: rgba(240, 240, 245, 0.15); }
.outcome-chip.success { background: rgba(74, 255, 158, 0.15); color: #4AFF9E; border-color: rgba(74, 255, 158, 0.3); }
.outcome-chip.failure { background: rgba(255, 74, 74, 0.12); color: var(--danger); border-color: rgba(255, 74, 74, 0.25); }
.outcome-chip.crit    { background: rgba(255, 215, 0, 0.18); color: var(--gold); border-color: rgba(255, 215, 0, 0.5); animation: dicePillCritPulse 1s ease-out 1; }
.outcome-chip.fumble  { background: rgba(255, 74, 74, 0.18); color: var(--danger); border-color: rgba(255, 74, 74, 0.5); animation: dicePillFumbleShake 0.5s ease-in-out 1; }

/* C3 — one-time crit + fumble animations. Play once on chip render. */
@keyframes dicePillCritPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.6); transform: scale(1); }
  50%  { box-shadow: 0 0 12px 4px rgba(255, 215, 0, 0.6); transform: scale(1.08); }
  100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); transform: scale(1); }
}
@keyframes dicePillFumbleShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-3px); }
  40%      { transform: translateX(3px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}

/* CS5a: mini-avatar next to the PC name in player-action feed entries.
   Shares the .pc-link class with the text link, so clicks bubble to the
   same delegated handler that opens the sheet modal. Border-bottom
   override cancels .pc-link's dotted underline (which looks awful on imgs). */
.player-avatar-mini {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
img.pc-link, img.pc-link:hover { border-bottom: none; }
img.journal-link, img.journal-link:hover { border-bottom: none; }

/* CS5b: inline NPC dialogue blocks inside DM narrative. When Claude wraps
   dialogue in [NPC Name]...[/NPC Name] tags, each tagged segment renders
   as a portrait + "Speaker:" + dialog line, making multi-NPC scenes feel
   like a comic panel instead of a wall of prose. The avatar + name both
   open the journal entry when one exists (shared .journal-link handler). */
.dm-segment { margin: 0 0 10px; }
.dm-segment:last-child { margin-bottom: 0; }
/* (Feed redesign S5: the legacy .npc-segment cluster, .player-label pc-link
   overrides, .narrative-msg.system/.admin variants, .dice-inline spans, and
   the .adv-chip cluster were retired — NPC dialogue is nf-npc-card, system
   lines are nf-tabletext, admin is the warning nf-cap, dice math lives in
   the nf-roll detail row, adv/dis chips are nf-adv.) */
/* (Feed redesign S5: .adv-chip variants, .narrative-msg.scene-image, and the
   .typing-indicator pulse treatment retired — nf-adv / nf-scene / nf-typing.) */

/* Action input */
.action-bar {
  padding: 16px 24px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 12px;
  align-items: center;
}

.action-input {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color var(--transition);
}

.action-input:focus { outline: none; border-color: var(--gold); }

.action-input::placeholder { color: var(--muted); }

.action-send {
  /* v1.8.892 (OI-88 follow-up) — re-tuned for text labels ("Skip" / "Send")
     after v1.8.891 swapped from glyph (`»»` / `→`). Pre-fix the button was
     `width: 48px; font-size: 1.3rem` — sized for a single glyph; text
     labels rendered oversized + bold + visually mismatched with the
     surrounding action-bar UI (Tyler Session 137 live-test feedback). */
  min-width: 64px;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--gold), #DAA520);
  border: none;
  color: #000;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.action-send:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
/* v1.7.31 — proper greyed-out state when input is empty: flat surface color,
   muted icon, cursor hints non-interactive. Skipping is the Continue button's
   job now, not this one. */
.action-send:disabled {
  background: var(--surface2);
  color: var(--muted);
  cursor: not-allowed;
  transform: none;
  filter: none;
  opacity: 1;
}

/* Right sidebar — session info */
.sidebar-right {
  width: 280px;
  min-width: 280px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-section h3 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--dm);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

/* Player list in sidebar */
.player-list { display: flex; flex-direction: column; gap: 6px; }

/* v1.7.26 (UI-3) — denser party rows, character name primary, HP bar on its
   own row so width no longer varies with name length. Clickable rows open
   the character sheet (desktop + keyboard accessible). */
.player-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px;
  background: var(--surface2);
  border-radius: var(--radius-xs);
  transition: background var(--transition), outline-color var(--transition);
  outline: 1px solid transparent;
}
.player-item.clickable { cursor: pointer; }
.player-item.clickable:hover { background: var(--surface); outline-color: var(--border); }
.player-item.clickable:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; }

.player-row-top { display: flex; align-items: center; gap: 8px; }

.player-item .pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.player-portrait {
  width: 32px;
  height: 32px;
  min-width: 32px;
  max-width: 32px;
  min-height: 32px;
  max-height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  flex-shrink: 0;
}

.player-item .player-info { flex: 1; min-width: 0; }
/* Character name = primary emphasis (was the secondary line previously) */
.player-item .char-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Player (account) name = secondary subtitle */
.player-item .player-name {
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.2;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.party-crown { font-size: 0.8rem; flex-shrink: 0; }

/* HP bar — width:100% of the player-item block (not sharing a row with the
   name), so it's consistent across rows regardless of name length */
.hp-bar-container {
  background: var(--surface2);
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
  width: 100%;
}

.hp-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* v1.7.28 (UI-3 followup) — unified inventory open button. First pass
   (v1.7.26) stacked two spans in a bare button with inline styles and no
   hover state, which read as "decoration" rather than a control. This adds
   proper button affordance: border, hover background, gold accent on the
   View label. */
.inventory-open-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 6px 10px;
  font-size: 0.78rem;
  color: var(--text-dim);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  text-align: left;
  font-family: inherit;
}
.inventory-open-strip:hover {
  background: var(--surface);
  border-color: var(--gold);
  color: var(--text);
}
.inventory-open-strip-count { flex: 1; }
.inventory-open-strip-view {
  font-size: 0.72rem;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.hp-bar.healthy { background: var(--success); }
.hp-bar.bloodied { background: var(--warning); }
.hp-bar.critical { background: var(--danger); }

/* Condition badges */
.condition-badges { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; width: 100%; }
.condition-badge {
  font-size: 0.65rem; padding: 1px 5px; border-radius: 3px;
  background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border);
  text-transform: capitalize; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: default;
}
.condition-badge.critical { background: rgba(220, 38, 38, 0.25); color: #fca5a5; border-color: rgba(220, 38, 38, 0.5); }
.condition-badge.severe { background: rgba(249, 115, 22, 0.25); color: #fdba74; border-color: rgba(249, 115, 22, 0.5); }
.condition-badge.warning { background: rgba(234, 179, 8, 0.25); color: #fde047; border-color: rgba(234, 179, 8, 0.5); }

/* v1.7.39 — concentration badge. Same footprint as .condition-badge but
   gold-toned to read as an active beneficial state, not a debuff. */
.concentration-badge {
  font-size: 0.65rem; padding: 1px 5px; border-radius: 3px;
  background: rgba(255, 215, 0, 0.15); color: #FFE4A0; border: 1px solid rgba(255, 215, 0, 0.35);
  text-transform: capitalize; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: default;
}

/* v1.7.49 — party panel spell effect chips. Compact badges rendered on each
   PC row (below condition badges) mirroring the initiative-bar effect dots.
   Shares footprint with .condition-badge (0.65rem, 1px 5px padding, 3px
   radius) and uses the same gold/purple/red palette as
   .initiative-effect-dot. Tooltip on hover shows spell name, caster, rounds
   left, and condition/modifier summary. */
.party-effect-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 3px;
  width: 100%;
}
.party-effect-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--surface2);
  color: var(--text-dim);
  border: 1px solid var(--border);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}
.party-effect-chip.beneficial {
  background: rgba(255, 215, 0, 0.15);
  color: #FFE4A0;
  border-color: rgba(255, 215, 0, 0.4);
}
.party-effect-chip.harmful-control {
  background: rgba(168, 85, 247, 0.2);
  color: #d8b4fe;
  border-color: rgba(168, 85, 247, 0.5);
}
.party-effect-chip.harmful-debuff {
  background: rgba(255, 74, 74, 0.18);
  color: #FCA5A5;
  border-color: rgba(255, 74, 74, 0.45);
}
.party-effect-chip-name { font-weight: 600; }
.party-effect-chip-rounds {
  font-size: 0.6rem;
  font-weight: 700;
  opacity: 0.85;
  letter-spacing: 0.4px;
}

/* v1.8.511 (OI-35) — Active Party Auras row. Surfaces passive Paladin
   auras (Protection / Courage / Devotion / Warding) at the top of the
   party panel. Auto-hides when no auras are active (the row HTML is
   absent from innerHTML in that case, so no display:none needed). Tooltip
   on hover lists the contributing paladin(s) + level + RAW effect summary.
   Distinct from .party-effect-chip — auras are passive party-wide gates
   while the paladin is conscious; effect chips are per-PC spell buffs. */
.party-auras-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 10px;
  margin-bottom: 4px;
  background: rgba(255, 215, 0, 0.06);
  border-bottom: 1px solid rgba(255, 215, 0, 0.18);
}
.party-aura-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255, 215, 0, 0.14);
  color: #FFE4A0;
  border: 1px solid rgba(255, 215, 0, 0.38);
  cursor: help;
  white-space: nowrap;
}
.party-aura-chip-icon { font-size: 0.85rem; line-height: 1; }
.party-aura-chip-name { font-weight: 600; letter-spacing: 0.2px; }

/* v1.7.45 — "Your Effects" panel. Sits above the combat action button row,
   shows the current player's concentration + active spell effects. Replaces
   the concentration badge that previously lived in the party sidebar. Uses
   the same gold/red/amber palette as .concentration-badge / .condition-badge
   for visual consistency. */
.effects-panel {
  display: none;
  margin: 4px 16px 0;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 0.75rem;
  flex-direction: column;
  gap: 4px;
}
.effects-panel.visible { display: flex; }
.effects-panel-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.effects-panel-conc {
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--border);
}
.effects-panel-conc-label {
  color: #FFE4A0;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.effects-panel-conc-spell {
  color: var(--gold);
  font-weight: 600;
}
.effects-panel-conc-meta {
  color: var(--text-dim);
  font-weight: 400;
  font-size: 0.7rem;
}
.effects-panel-end-btn {
  margin-left: auto;
  font-size: 0.7rem;
  padding: 2px 10px;
  background: var(--surface2);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  letter-spacing: 0.3px;
}
.effects-panel-end-btn:hover {
  color: #FFE4A0;
  border-color: rgba(255, 215, 0, 0.4);
  background: rgba(255, 215, 0, 0.08);
}
.effects-panel-empty {
  color: var(--text-dim);
  font-style: italic;
  font-size: 0.7rem;
}
.effect-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: 0.7rem;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
  cursor: default;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.effect-chip.beneficial {
  background: rgba(255, 215, 0, 0.12);
  color: #FFE4A0;
  border-color: rgba(255, 215, 0, 0.35);
}
.effect-chip.harmful-control,
.effect-chip.harmful-debuff {
  background: rgba(255, 74, 74, 0.15);
  color: #FCA5A5;
  border-color: rgba(255, 74, 74, 0.4);
}
.effect-chip-name { font-weight: 600; }
.effect-chip-rounds {
  font-size: 0.65rem;
  opacity: 0.85;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* v1.7.41 — inline concentration tag. Compact "C" chip rendered next to a
   spell name anywhere it appears (sidebar list, combat picker, level-up
   modal, character creation, character sheet, admin grant). Same gold
   palette as .concentration-badge for visual consistency, but smaller
   footprint so it doesn't crowd the spell name. */
.spell-conc-tag {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  margin-left: 4px;
  border-radius: 3px;
  background: rgba(255, 215, 0, 0.18);
  color: #FFE4A0;
  border: 1px solid rgba(255, 215, 0, 0.4);
  vertical-align: middle;
  cursor: default;
  letter-spacing: 0.5px;
}

.spell-narrative-tag {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  margin-left: 4px;
  border-radius: 3px;
  background: rgba(168, 85, 247, 0.18);
  color: #E9D5FF;
  border: 1px solid rgba(168, 85, 247, 0.4);
  vertical-align: middle;
  cursor: default;
  letter-spacing: 0.5px;
}

/* v1.8.178 — ritual spell tag (R chip). Teal/cyan palette distinct from
   gold concentration (C) and purple narrative (N). */
.spell-ritual-tag {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  margin-left: 4px;
  border-radius: 3px;
  background: rgba(45, 212, 191, 0.18);
  color: #99F6E4;
  border: 1px solid rgba(45, 212, 191, 0.4);
  vertical-align: middle;
  cursor: default;
  letter-spacing: 0.5px;
}

/* v1.8.229 — reaction-only spell tag (⚡ chip). Red/orange palette, distinct
   from C/N/R. Marks spells that cast automatically via the reaction pipeline
   — Counterspell, Shield, Hellish Rebuke, Absorb Elements — so they can't
   be picked as a primary action in the combat modal or sidebar. */
.spell-reaction-tag {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  margin-left: 4px;
  border-radius: 3px;
  background: rgba(239, 68, 68, 0.18);
  color: #FECACA;
  border: 1px solid rgba(239, 68, 68, 0.4);
  vertical-align: middle;
  cursor: default;
  letter-spacing: 0.5px;
}

/* === Initiative Tracker (combat) === */
.initiative-bar {
  display: none;
  background: var(--surface);
  border-bottom: 2px solid var(--combat-red);
  padding: 8px 16px;
  overflow-x: auto;
  white-space: nowrap;
}

.initiative-bar.visible { display: flex; gap: 8px; align-items: center; }

.initiative-entry {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 6px 12px;
  background: var(--surface2);
  border-radius: var(--radius-xs);
  font-size: 0.85rem;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.initiative-entry .initiative-entry-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.initiative-entry.active {
  border-color: var(--gold);
  background: rgba(201,169,97,0.15);
}

.initiative-entry.enemy { border-color: rgba(255,45,45,0.3); }
.initiative-entry .init-num { color: var(--muted); font-size: 0.75rem; }

/* v1.7.45 — initiative-bar active spell-effect dots. One small color-coded
   dot per active_effect on a combat order entry (PC or enemy). Sits in its
   own row below the name + HP. Tooltip on the container lists every effect
   with source + rounds remaining + condition/modifier summary. Color rules:
     beneficial         → gold (matches .concentration-badge palette)
     harmful + control  → purple (paralyzed/stunned/incapacitated)
     harmful + debuff   → red    (matches --danger palette)
   No empty container is rendered for entries without effects. */
.initiative-effect-dots {
  display: flex;
  align-items: center;
  gap: 2px;
  cursor: default;
  padding-top: 1px;
}

.initiative-effect-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  border: 1px solid rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.initiative-effect-dot.beneficial {
  background: rgba(255, 215, 0, 0.85);
  border-color: rgba(255, 215, 0, 0.55);
  box-shadow: 0 0 3px rgba(255, 215, 0, 0.5);
}

.initiative-effect-dot.harmful-control {
  background: #a855f7;
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 3px rgba(168, 85, 247, 0.55);
}

.initiative-effect-dot.harmful-debuff {
  background: var(--danger);
  border-color: rgba(255, 74, 74, 0.55);
  box-shadow: 0 0 3px rgba(255, 74, 74, 0.5);
}

.initiative-effect-overflow {
  font-size: 0.6rem;
  color: var(--text-dim);
  margin-left: 2px;
  line-height: 1;
}

/* === Phase 3: Feats === */
.ability-btn.feat-btn {
  /* Feats use a slightly purple tint to distinguish from class abilities (gold-tinted) */
  border-color: rgba(170, 120, 230, 0.35);
}
.ability-btn.feat-btn.active {
  background: rgba(170, 120, 230, 0.18);
  border-color: rgba(170, 120, 230, 0.6);
  color: rgb(200, 160, 240);
}
.feat-entry {
  /* v1.8.1335 (S183 live-test F1) — reskinned from the legacy purple chip to
     the current design tokens (Tyler: "run it through the new design"). */
  padding: 7px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius-xs);
}

/* === Phase 2: Session Lobby === */
.session-lobby {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.lobby-container {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.lobby-header {
  /* Grid ensures the Leave button has its own column and can't overlap the title.
     Back button | title (centered) | spacer (to center the title optically). */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 16px;
  padding: 20px 0 8px;
}
.lobby-header .lobby-title,
.lobby-header .lobby-subtitle {
  grid-column: 2;
  text-align: center;
}
.lobby-leave-btn {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  z-index: 2;
}
.lobby-title {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 2.2rem;
  margin: 0;
  letter-spacing: 1px;
}
.lobby-subtitle {
  color: var(--text-dim);
  font-size: 0.95rem;
  margin-top: 6px;
}
.lobby-body {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 24px;
}
@media (max-width: 900px) {
  .lobby-body { grid-template-columns: 1fr; }
}
.lobby-left, .lobby-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lobby-section-title {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0 0 4px;
}
.lobby-players {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lobby-player-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s;
}
.lobby-player-card.ready {
  border-color: rgba(80, 180, 90, 0.5);
  background: linear-gradient(90deg, rgba(80, 180, 90, 0.08), var(--surface) 40%);
}
.lobby-portrait {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--border);
  object-fit: cover;
  flex-shrink: 0;
}
.lobby-portrait-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.2rem;
}
.lobby-player-info {
  flex: 1;
  min-width: 0;
}
.lobby-player-name {
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.lobby-char-name {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lobby-ready-pill {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 5px 12px;
  border-radius: 12px;
  background: rgba(120, 120, 120, 0.15);
  color: var(--text-dim);
  border: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lobby-ready-pill.ready {
  background: rgba(80, 180, 90, 0.18);
  color: var(--success, #5ab46b);
  border-color: rgba(80, 180, 90, 0.4);
}
.lobby-ready-pill:not(.ready):hover {
  background: rgba(255, 215, 0, 0.1);
  color: var(--gold);
  border-color: rgba(255, 215, 0, 0.3);
}
.lobby-leader-controls {
  margin-top: 16px;
}
.lobby-start-btn {
  width: 100%;
  padding: 14px 20px;
  font-size: 1.1rem;
  font-family: var(--font-display);
  letter-spacing: 1px;
}
.lobby-start-btn.disabled,
.lobby-start-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.6);
  pointer-events: auto; /* keep tooltip hover working */
}
.lobby-start-btn.disabled:hover,
.lobby-start-btn[disabled]:hover {
  background: inherit;
  transform: none;
}
.lobby-premise {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 16px 20px;
}
.lobby-premise h3 {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 0.95rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.lobby-premise p {
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0;
}
.lobby-guidance {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
}
.guidance-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.guidance-input-row .form-input { flex: 1; }
.guidance-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
}
.guidance-suggestion {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 215, 0, 0.04);
  border-left: 2px solid rgba(255, 215, 0, 0.3);
  border-radius: 4px;
}
.guidance-suggestion-body { flex: 1; min-width: 0; }
.guidance-suggestion-text {
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.4;
  word-wrap: break-word;
}
.guidance-suggestion-meta {
  color: var(--text-dim);
  font-size: 0.75rem;
  margin-top: 3px;
}
.guidance-remove {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
}
.guidance-remove:hover { color: var(--combat-red); }
.guidance-finalized {
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 12px;
  color: var(--text);
  line-height: 1.5;
}
.guidance-finalized-label {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* v1.7.25 (UI-2) — Persistent turn-reminder banner. Replaces the auto-dismissing
   toast so a distracted player can't miss their turn. Sticky top of the center
   stage, amber pulse so it reads as urgent without being full-screen. */
.turn-reminder-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(90deg, rgba(255, 200, 60, 0.18), rgba(255, 170, 40, 0.22), rgba(255, 200, 60, 0.18));
  color: var(--gold);
  border-bottom: 1px solid rgba(255, 200, 60, 0.45);
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  animation: turn-reminder-pulse 2s ease-in-out infinite;
  user-select: none;
  flex-shrink: 0;
}
.turn-reminder-banner-icon { font-size: 1.2rem; }
@keyframes turn-reminder-pulse {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(255, 200, 60, 0); }
  50%      { box-shadow: inset 0 0 20px 0 rgba(255, 200, 60, 0.25); }
}

/* === Economy Slice Ship 11.3 (v1.8.578) — Loot Pile sticky banner === */
.loot-pile-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(180, 60, 50, 0.16), rgba(140, 40, 35, 0.24), rgba(180, 60, 50, 0.16));
  color: #f5d36b;
  border-bottom: 1px solid rgba(180, 60, 50, 0.45);
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.4px;
  user-select: none;
  flex-shrink: 0;
}
.loot-pile-banner-icon { font-size: 1.15rem; }
.loot-pile-banner-text { flex: 0 1 auto; }

/* M6 — reopen-shop banner. Mirrors the loot-pile banner layout but in a warm
   gold/amber so it reads as a helpful "the shop is still here" cue, not the
   red urgency of the loot pile. */
.vendor-reopen-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(150, 110, 40, 0.14), rgba(190, 145, 55, 0.22), rgba(150, 110, 40, 0.14));
  color: #f5d36b;
  border-bottom: 1px solid rgba(200, 160, 70, 0.45);
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.4px;
  user-select: none;
  flex-shrink: 0;
}
.vendor-reopen-banner-icon { font-size: 1.15rem; }
.vendor-reopen-banner-text { flex: 0 1 auto; }
.vendor-reopen-banner-x {
  background: transparent;
  border: none;
  color: #f5d36b;
  opacity: 0.7;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 2px 6px;
}
.vendor-reopen-banner-x:hover { opacity: 1; }

/* === Phase 1: Winding-Down Badge (session pacing) === */
.winding-down-badge {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 200, 60, 0.15);
  color: var(--gold);
  border: 1px solid rgba(255, 200, 60, 0.4);
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  z-index: 200;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  user-select: none;
  pointer-events: auto;
  white-space: nowrap;
}
.winding-down-badge:hover {
  background: rgba(255, 200, 60, 0.22);
}
/* v1.7.16: non-leaders see the badge for awareness but it isn't interactive.
   Kill the hover brighten + soften opacity so it doesn't look clickable. */
.winding-down-badge.non-leader {
  opacity: 0.75;
  cursor: default;
}
.winding-down-badge.non-leader:hover {
  background: rgba(255, 200, 60, 0.15);
}

/* === Phase 1: Party Leader Badge === */
.leader-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
}
.leader-indicator {
  font-size: 0.85rem;
  color: var(--gold);
  font-weight: 600;
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.25);
  padding: 4px 10px;
  border-radius: 12px;
  white-space: nowrap;
}
/* When the leader badge is a clickable menu trigger (leader's own view) */
.leader-menu-btn {
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.15s, border-color 0.15s;
}
.leader-menu-btn:hover {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.45);
}

/* === One-time leader coachmarks (M6) ===
 * Light, lantern-styled spotlights shown ONCE each (mirrors the avatar-intro localStorage
 * pattern). Reuses the Lantern Path's warm gold breathing-glow on an anchor element + a small
 * popover card. A TRANSPARENT click-catcher (no full dim) keeps it robust against nested
 * stacking contexts — the glow alone carries the focus. Two primers share this engine:
 * lobby → Session Guidance card; in-game → the 👑 crown. */
.cd-coach-catch {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 1200;
}
/* Breathing gold ring on the spotlit anchor — the "look here" cue. Follows the element's radius. */
.cd-coach-glow {
  animation: cdCoachBreath 1.9s ease-in-out infinite;
}
.cd-coach {
  position: fixed;
  z-index: 1202;
  width: min(340px, calc(100vw - 24px));
  background: var(--surface);
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 215, 0, 0.1);
  padding: 16px 16px 14px;
  animation: cdCoachPop 0.22s ease-out;
}
.cd-coach::before {
  /* arrow pointing up toward the anchor (below-placement only) */
  content: "";
  position: absolute;
  top: -7px;
  right: 22px;
  width: 12px;
  height: 12px;
  background: var(--surface);
  border-left: 1px solid rgba(255, 215, 0, 0.35);
  border-top: 1px solid rgba(255, 215, 0, 0.35);
  transform: rotate(45deg);
}
.cd-coach.cd-coach-side::before { display: none; } /* beside a tall anchor — no up-arrow */
.cd-coach h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1.05rem;
}
.cd-coach p.lp-intro {
  margin: 0 0 10px;
  color: var(--text-dim);
  font-size: 0.86rem;
  line-height: 1.45;
}
.cd-coach ul {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.cd-coach li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.84rem;
  line-height: 1.4;
  padding: 4px 0;
}
.cd-coach li .lp-ic {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.cd-coach li b { color: var(--text); font-weight: 600; }
.cd-coach .lp-actions { display: flex; justify-content: flex-end; }
@keyframes cdCoachPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cdCoachBreath {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(255, 226, 138, 0.85), 0 0 26px 3px rgba(255, 178, 64, 0.5); }
  50% { box-shadow: 0 0 0 1.5px rgba(255, 226, 138, 0.95), 0 0 36px 6px rgba(255, 178, 64, 0.62); }
}
/* Reduced-flashing a11y: drop the breathing pulse to a steady glow (mirrors html[data-reduced-flash]). */
html[data-reduced-flash="1"] .cd-coach-glow {
  animation: none;
  box-shadow: 0 0 0 1.5px rgba(255, 226, 138, 0.9), 0 0 30px 4px rgba(255, 178, 64, 0.55);
}

/* === Leader Menu Dropdown === */
.leader-menu-dropdown {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 215, 0, 0.08);
  z-index: 1000;
  min-width: min(280px, calc(100vw - 16px));
  max-width: min(340px, calc(100vw - 16px));
  padding: 6px;
  animation: leaderMenuFadeIn 0.15s ease-out;
}
@keyframes leaderMenuFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.leader-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
  font-family: var(--font-body);
}
.leader-menu-item:hover {
  background: rgba(255, 215, 0, 0.08);
}
.leader-menu-item:focus {
  outline: none;
  background: rgba(255, 215, 0, 0.12);
}
.leader-menu-icon {
  font-size: 1.3rem;
  width: 28px;
  text-align: center;
  color: var(--gold);
  flex-shrink: 0;
}
.leader-menu-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}
.leader-menu-desc {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 2px;
}
.leader-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 8px;
}

/* (Feed redesign S5: the feed's Previously-On recap banner was REMOVED
   entirely per Tyler S246 — the lobby owns recaps. The lobby's own recap
   surfaces are separate components and untouched.) */

/* Pulse animation — used to draw attention (e.g. End Turn button after an action lands) */
@keyframes pulseHighlight {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 45, 45, 0); }
  50% { box-shadow: 0 0 0 8px rgba(255, 45, 45, 0.4); }
}
.pulse { animation: pulseHighlight 0.8s ease-in-out 3; }

/* === Action Economy Pills (turn banner) === */
.action-economy-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 8px; font-size: 0.75rem;
}
.action-economy-divider {
  width: 1px; height: 18px; background: var(--border); margin: 0 4px;
}
.action-pill {
  padding: 3px 9px; border-radius: 10px; font-weight: 600; letter-spacing: 0.3px;
  border: 1px solid; transition: opacity 0.2s;
  white-space: nowrap;
}
.action-pill.available {
  background: rgba(80, 180, 90, 0.12);
  color: var(--success, #5ab46b);
  border-color: rgba(80, 180, 90, 0.35);
}
.action-pill.used {
  background: rgba(120, 120, 120, 0.1);
  color: var(--muted);
  border-color: rgba(120, 120, 120, 0.25);
  text-decoration: line-through;
  opacity: 0.6;
}

/* === Class Ability Panel ===
   v1.8.14 — lives inside #combat-action-form now (first child). Horizontal
   padding comes from the parent form (16px 24px), so the panel only adds a
   subtle bottom border to visually separate abilities from action buttons. */
.class-ability-panel {
  display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 10px;
  margin-bottom: 4px; border-bottom: 1px solid var(--border);
  align-items: center; width: 100%;
}
.class-ability-panel:empty { display: none; }
.ability-label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-right: 4px; width: 100%; }
.ability-btn {
  padding: 4px 10px; font-size: 0.8rem; border-radius: 4px; cursor: pointer;
  background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border);
  transition: all 0.2s;
}
.ability-btn:hover:not(:disabled) { background: var(--surface3); color: var(--text); border-color: var(--gold); }
.ability-btn.active { background: rgba(234, 179, 8, 0.2); color: var(--gold); border-color: var(--gold); }
.ability-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ability-uses { font-size: 0.7rem; opacity: 0.7; margin-left: 4px; }
.ability-passive { font-size: 0.8rem; color: var(--text-dim); padding: 4px 10px; background: var(--surface2); border-radius: 4px; border: 1px solid var(--border); }
.ability-auto { font-size: 0.7rem; color: var(--muted); }

/* === Combat Action Form === */
.combat-form {
  display: none;
  padding: 16px 24px;
  background: var(--surface);
  border-top: 2px solid var(--combat-red);
  gap: 12px;
  flex-direction: column;
}

.combat-form.visible { display: flex; }

.combat-form-row { display: flex; gap: 12px; }

/* === Phase C2: Action button row === */
.combat-action-btn {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 8px 14px;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  white-space: nowrap;
}
.combat-action-btn:hover { background: var(--surface); border-color: var(--gold); }
.combat-action-btn:active { transform: scale(0.97); }
.combat-action-btn.combat-action-primary {
  background: rgba(255, 45, 45, 0.12);
  color: var(--combat-red);
  border-color: rgba(255, 45, 45, 0.4);
  font-weight: 600;
}
.combat-action-btn.combat-action-primary:hover {
  background: rgba(255, 45, 45, 0.22);
  border-color: var(--combat-red);
}
/* v1.8.39 Phase 1A R2 — Bonus-action variant for Off-hand Attack (TWF).
   Purple tint distinguishes bonus-action buttons from primary action (red)
   and utility (neutral) buttons at a glance. Same interaction states as
   combat-action-primary but swapped hue. */
.combat-action-btn.combat-action-bonus {
  background: rgba(168, 85, 247, 0.12);
  color: #c4a0ff;
  border-color: rgba(168, 85, 247, 0.4);
  font-weight: 600;
}
.combat-action-btn.combat-action-bonus:hover {
  background: rgba(168, 85, 247, 0.22);
  border-color: #a855f7;
}
.combat-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* === Phase C2: Target card grid in action modal === */
.target-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.target-card {
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 10px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  position: relative;
}
.target-card:hover { border-color: var(--gold); background: var(--surface); }
.target-card.selected {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.1);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3);
}
.target-card.dead {
  opacity: 0.55;
}
.target-card.enemy { border-left: 4px solid var(--combat-red); }
.target-card.ally { border-left: 4px solid var(--agua); }
.target-card.self { border-left: 4px solid var(--gold); }
.target-card-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* M6 enemy avatars — target-card portrait medallion (S242 language: dark-bg
   circle, mirrors .cbt-avatar on the init bar + the .af-med option medallion).
   Scoped to .target-card only; the monogram fallback keeps the side color. */
.target-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.target-card-head .target-card-name { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
.target-card-avatar {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface3); border: 1px solid var(--border-light);
}
.target-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.target-card-avatar-mono {
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--text-dim);
}
.target-card.enemy .target-card-avatar { border-color: rgba(255, 107, 107, 0.4); }
.target-card.enemy .target-card-avatar-mono { color: var(--combat-red); }
.target-card.ally .target-card-avatar-mono { color: var(--agua); }
.target-card.self .target-card-avatar-mono { color: var(--gold); }
.target-card-hp {
  height: 6px;
  background: var(--surface);
  border-radius: 99px;
  overflow: hidden;
  margin: 4px 0;
}
.target-card-hp-fill {
  height: 100%;
  background: var(--success);
  transition: width 0.2s;
}
.target-card-hp-fill.bloodied { background: var(--warning); }
.target-card-hp-fill.critical { background: var(--combat-red); }
.target-card-hp-fill.dead { background: var(--muted); }
.target-card-hp-text {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 2px;
}
/* Phase E1 — HP + AC on one meta row, plus a selected-state check pip. */
.target-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.target-card-meta .target-card-hp-text { margin-top: 0; }
.target-card-ac { font-size: 0.72rem; color: var(--text-dim); font-family: var(--mono); white-space: nowrap; }
.target-card-check {
  position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%;
  display: none; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800;
  background: var(--gold); color: #1a1208;
}
.target-card.selected .target-card-check { display: flex; }
.target-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.target-card-badge {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--surface);
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.target-card-badge.unconscious { color: var(--warning); border-color: rgba(255, 152, 0, 0.4); }
.target-card-badge.dead { color: var(--combat-red); border-color: rgba(255, 45, 45, 0.4); }

/* Weapon / spell / item selector grid in modal */
.modal-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.modal-option-btn {
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  color: var(--text);
}
.modal-option-btn:hover { border-color: var(--gold); background: var(--surface); }
.modal-option-btn.selected {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.1);
}
.modal-option-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.modal-option-btn .opt-title { font-weight: 600; font-size: 0.9rem; }
.modal-option-btn .opt-meta { font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; }
.modal-section-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin: 14px 0 6px 0;
}
.modal-section-label:first-child { margin-top: 0; }
.modal-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.modal-toggle {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.modal-toggle:hover { border-color: var(--gold); }
.modal-toggle.on {
  background: rgba(30, 255, 0, 0.1);
  color: var(--success);
  border-color: rgba(30, 255, 0, 0.4);
}
.combat-form-row .form-group { flex: 1; }

/* === Dice Tray === */
/* v1.7.31 — the 3D dice roll animation is now center-screen with a dimmed
   backdrop. Prior layout (350x300, bottom-right) was easy to miss and too
   small for players to see what they rolled. Earlier v1.7.28 changed the
   dice RESULT popup (the number card that shows AFTER the roll) but left
   the actual physics animation in the corner — we needed to move both.
   Size is clamped so it's big on a 1080p+ screen but still fits on laptops. */
.dice-tray {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 80vw);
  height: min(540px, 70vh);
  z-index: 190;
  pointer-events: none;
  display: none;
  border: none;
  overflow: hidden;
}

.dice-tray.visible { display: block; }

/* Backdrop dim — appears behind the dice tray while it's visible so the roll
   pops off the game UI. v1.7.33: pointer-events is now auto + cursor: pointer
   so a click anywhere dismisses the tray early instead of forcing the player
   to wait out the physics timeout. The 3D tray itself stays pointer-events:
   none so dice physics aren't disrupted by stray clicks. */
.dice-tray-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 189;
  display: none;
  pointer-events: auto;
  cursor: pointer;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.dice-tray-backdrop.visible { display: block; }

/* v1.7.28 (UI-4) — dice result moved to center screen with a backdrop dim so
   the roll actually reads at a glance. Prior layout (v1.6.2 moved it to the
   bottom with 2.5rem) was less intrusive but easy to miss during fast combat.
   Click anywhere on the backdrop or the card to dismiss early. */
.dice-result-popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 600;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: dicePopIn 0.25s ease;
  transition: opacity 0.2s ease;
}
.dice-result-popup-inner {
  background: rgba(12, 10, 10, 0.96);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  padding: 28px 48px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  min-width: 260px;
}

.dice-result-popup.visible { display: flex; }
.dice-result-popup.critical .dice-result-popup-inner { border-color: var(--success); }
.dice-result-popup.fumble .dice-result-popup-inner { border-color: var(--danger); }

@keyframes dicePopIn { from { opacity: 0; } to { opacity: 1; } }

.dice-result-popup .result-number {
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}

.dice-result-popup.critical .result-number {
  color: var(--success);
  animation: critSparkle 0.5s ease-in-out 3;
}
.dice-result-popup.fumble .result-number {
  color: var(--danger);
  animation: fumbleShake 0.3s ease-in-out 2;
}

@keyframes critSparkle {
  0% { text-shadow: 0 0 10px var(--success); }
  50% { text-shadow: 0 0 30px var(--success), 0 0 60px var(--success); }
  100% { text-shadow: 0 0 10px var(--success); }
}

@keyframes fumbleShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.dice-result-popup .result-detail {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin-top: 4px;
}

/* OI-31 (v1.8.468) — popup batch grouping + actor-typed color theming.
   The new structure stacks multiple `.dice-result-popup-roll` blocks inside
   a single `.dice-result-popup-inner` so attack + damage from the same
   actor (within ~500ms) merge into ONE card with two roll segments instead
   of replacing the previous popup mid-read.
   Actor color comes from the rolling user's chat color via the inline
   --actor-color custom property (set in showResultPopup); enemy rolls fall
   back to a hostile red defined in .actor-enemy. */
.dice-result-popup-roll {
  padding: 8px 0;
}
.dice-result-popup-roll + .dice-result-popup-roll {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 8px;
}
.dice-result-popup-roll .result-purpose {
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 6px;
}

.dice-result-popup.actor-player .dice-result-popup-inner {
  border-color: var(--actor-color, var(--gold));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 24px var(--actor-color, transparent);
}
.dice-result-popup.actor-enemy .dice-result-popup-inner {
  border-color: #cc2233;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 24px rgba(204, 34, 51, 0.4);
  background: rgba(40, 8, 12, 0.96);
}
.dice-result-popup.actor-companion .dice-result-popup-inner {
  border-color: #5577cc;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 24px rgba(85, 119, 204, 0.4);
}
/* Crit / fumble overrides win against actor color (the dramatic moment trumps
   the identity tint). Mirrors the pre-OI-31 .critical / .fumble rules but
   applies to the new nested structure. */
.dice-result-popup.critical .dice-result-popup-inner {
  border-color: var(--success);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 28px rgba(74, 222, 128, 0.5);
}
.dice-result-popup.fumble .dice-result-popup-inner {
  border-color: var(--danger);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 28px rgba(248, 113, 113, 0.4);
}
/* Per-roll-segment crit/fumble class on the inner result-number so a card
   with both a normal hit AND a crit on a follow-up roll still surfaces both. */
.dice-result-popup-roll .result-number.critical { color: var(--success); }
.dice-result-popup-roll .result-number.fumble { color: var(--danger); }

/* === Toast notifications === */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  padding: 12px 20px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.9rem;
  animation: slideIn 0.3s ease;
  max-width: 400px;
}

.toast.error { border-color: var(--danger); color: var(--danger); }
.toast.success { border-color: var(--success); }

@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* === Previously On Modal === */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-overlay.visible { display: flex; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative; /* v1.7.24 — anchors absolute-positioned .modal-close */
}

/* v1.7.24 (UI-1) — shared modal chrome. The .modal-header class was used in
   HTML across the journal, duplicates, report detail, combat action, session
   control etc. but had no CSS — relying on inline flex in some, raw block
   flow in others. That's why the × sometimes wrapped below the title. One
   rule, one layout, every modal. */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-right: 40px; /* reserve space for absolute-positioned × */
  margin-bottom: 16px;
}
.modal-header h2 { margin: 0; }

/* v1.8.51 — More visible default color + subtle background so the button
   reads as a clickable element, not ambient text. Keith reported DM Tools
   "not clear how to exit" — the × was there but blended into the header
   at muted-text opacity. Bumped to text-color with tinted-surface background.
   Hover still escalates to gold. */
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
  padding: 0;
}
.modal-close:hover {
  color: var(--gold);
  background: rgba(255, 200, 60, 0.12);
  border-color: rgba(255, 200, 60, 0.4);
}

.modal h2 {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1.5rem;
  margin-bottom: 16px;
}

.modal p {
  line-height: 1.7;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.modal .modal-actions { margin-top: 24px; display: flex; justify-content: flex-end; }

/* === Connection indicator === */
.connection-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  transition: background var(--transition);
}

.connection-status.connected { background: var(--success); }

/* === Scrollbar === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* === Utility === */
/* (M7 OOC Slice 5, D7: the .roll-request / .btn-roll feed-button styles were
   retired with the legacy client-roll path — every check/save is a
   server-owned pending card now.) */

/* === Turn alert (30s reminder) === */
body.turn-alert { animation: turnAlertFlash 0.5s ease 4; }
@keyframes turnAlertFlash {
  0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
  50% { box-shadow: inset 0 0 60px rgba(255, 215, 0, 0.3); }
}

/* === Collapsible sidebar sections ===
   Any .sidebar-section with .collapsible gets a clickable header + caret. Adding
   .collapsed hides every non-<h3> child via display:none. Toggle is driven by
   DndGame.toggleSection() which also persists state in localStorage. */
.sidebar-section.collapsible > h3 {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
}
.sidebar-section.collapsible > h3::after {
  content: '▾';
  font-size: 0.75rem;
  color: var(--text-dim);
  transition: transform 0.18s ease;
  margin-left: 8px;
}
.sidebar-section.collapsible.collapsed > h3 {
  margin-bottom: 0;
}
.sidebar-section.collapsible.collapsed > h3::after {
  transform: rotate(-90deg);
}
.sidebar-section.collapsible.collapsed > *:not(h3) {
  display: none !important;
}

/* === YOUR TURN indicator (C5 refresh) === */
/* Big attention-grab overlay that fires ONCE when the turn starts.
   Settles into a persistent reminder via .combat-turn-banner below. */
.your-turn-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  display: none;
  justify-content: center;
  padding-top: 80px;
  pointer-events: none;
}

.your-turn-overlay.visible { display: flex; }

.your-turn-banner {
  font-family: var(--font-display);
  font-size: 3.25rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(255,215,0,0.7), 0 0 80px rgba(255,215,0,0.35);
  animation: turnBannerIn 0.5s ease, turnBannerOut 0.6s ease 3s forwards;
  letter-spacing: 6px;
  padding: 14px 48px;
  background: rgba(15, 12, 5, 0.8);
  border: 3px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(255,215,0,0.4);
}

@keyframes turnBannerIn {
  from { opacity: 0; transform: scale(1.6); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes turnBannerOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* === Persistent combat turn banner (C5) ===
   Replaces the old single-line banner. Colored by context: gold = your turn,
   red = enemy turn, neutral = waiting on another player. Stays visible the
   whole turn so there's always a reference. */
.combat-turn-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px;
  background: var(--surface);
  border-top: 2px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  font-family: var(--font-body);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.combat-turn-banner .turn-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.combat-turn-banner .turn-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}
.combat-turn-banner .turn-who {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.3px;
}
.combat-turn-banner .turn-hint {
  color: var(--text-dim);
  font-size: 0.85rem;
  font-style: italic;
}
.combat-turn-banner .turn-round {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  flex-shrink: 0;
}
.combat-turn-banner .turn-pills {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Your turn: prominent gold treatment + sustained pulse so the banner
   keeps drawing the eye until you act. */
.combat-turn-banner.is-mine {
  background: linear-gradient(180deg, rgba(212,175,55,0.18), rgba(212,175,55,0.08));
  border-top-color: var(--gold);
  border-bottom-color: rgba(212,175,55,0.4);
  animation: turnBannerPulse 2s ease-in-out infinite;
}
.combat-turn-banner.is-mine .turn-icon { color: var(--gold); }
.combat-turn-banner.is-mine .turn-who { color: var(--gold); font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 1px; }

.combat-turn-banner.is-enemy {
  background: linear-gradient(180deg, rgba(255,45,45,0.14), rgba(255,45,45,0.05));
  border-top-color: var(--combat-red);
  border-bottom-color: rgba(255,45,45,0.3);
}
.combat-turn-banner.is-enemy .turn-icon { color: var(--combat-red); }
.combat-turn-banner.is-enemy .turn-who { color: var(--combat-red); }

.combat-turn-banner.is-waiting {
  background: var(--surface);
}
.combat-turn-banner.is-waiting .turn-icon { color: var(--text-dim); }

@keyframes turnBannerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
  50%      { box-shadow: 0 0 0 3px rgba(212,175,55,0.18), inset 0 0 24px rgba(212,175,55,0.1); }
}

/* Action bar glow when it's your turn (stronger than before) */
.action-bar.your-turn {
  border-top: 2px solid var(--gold);
  box-shadow: 0 -4px 28px rgba(255,215,0,0.25);
}

.combat-form.your-turn {
  border-top-color: var(--gold);
  box-shadow: 0 -4px 28px rgba(255,215,0,0.25);
}

/* Pending-roll host — consistent gold treatment so the roll button reads as
   urgent action required. */
#combat-pending-roll-host:not(:empty) {
  padding: 10px 16px 4px;
}

/* === Admin Panel (DM Tools) ===
   Converted from a right-side drawer to a centered modal. Content outgrew the
   320px sidebar width — too much scrolling for a common-use panel during sessions.
   Rendered inside #admin-panel-overlay which owns the .visible toggle. */
.admin-panel {
  background: var(--surface);
  border: 2px solid var(--warning);
  border-radius: var(--radius);
  padding: 24px;
  width: 90vw;
  max-width: 720px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

/* v1.8.845 — Admin panel tab nav. Tabs replace the prior 380-LOC single-scroll
   layout. 5 tabs: Character / Combat / Companions / Audio / Campaign. */
.admin-tab-btn {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  padding: 6px 12px;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: var(--font-body);
  transition: var(--transition);
}
.admin-tab-btn:hover { color: var(--text); background: var(--surface2); }
.admin-tab-btn.active {
  color: var(--warning);
  background: var(--surface);
  border-color: var(--surface3);
  border-bottom-color: var(--surface);
  font-weight: 600;
  margin-bottom: -1px;
}
.admin-tab-content { display: none; }
.admin-tab-content.active { display: block; }

/* Sub-section dividers within Character tab. Groups related fields visually
   without nested tabs (kept flat to minimize click depth). */
.admin-subheader {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 14px;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--surface3);
}
.admin-subheader:first-of-type { margin-top: 4px; }

/* Two-column layout inside the DM Tools modal: character controls on the left,
   session controls (music + combat) on the right. Stacks on narrow viewports. */
@media (min-width: 720px) {
  #admin-panel .admin-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

/* === Character Creation Wizard === */
.wizard-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 24px 16px;
  width: 100%;
}
.wizard-title {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1.5rem;
  margin-bottom: 20px;
}
.wizard-progress {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 28px;
  gap: 0;
  overflow-x: auto;
  white-space: nowrap;
}
.wizard-step-dot {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.wizard-step-dot .dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface2);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  transition: all var(--transition);
}
.wizard-step-dot.active .dot {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(255,215,0,0.1);
}
.wizard-step-dot.completed .dot {
  border-color: var(--success);
  color: var(--success);
  background: rgba(74,255,158,0.1);
}
.wizard-step-dot .dot-label {
  font-size: 0.6rem;
  color: var(--muted);
  max-width: 52px;
  text-align: center;
  line-height: 1.1;
  white-space: normal;
}
.wizard-step-dot.active .dot-label { color: var(--gold); }
.wizard-step-line {
  width: 16px;
  height: 2px;
  background: var(--border);
  margin: 0 2px;
  margin-top: 13px;
  flex-shrink: 0;
}
.wizard-step-line.completed { background: var(--success); }

.wizard-content { min-height: 300px; }
.wizard-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Wizard card grids */
.wizard-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.race-card, .class-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}
.race-card:hover, .class-card:hover {
  border-color: var(--border-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.race-card.selected, .class-card.selected {
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(255,215,0,0.15);
  background: rgba(255,215,0,0.04);
}
.card-icon { font-size: 2rem; margin-bottom: 8px; }
.card-title { font-family: var(--font-display); color: var(--gold); font-size: 1rem; margin-bottom: 4px; }
.card-role { font-size: 0.75rem; color: var(--dm); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.card-subtitle { font-size: 0.75rem; color: var(--text-dim); margin-bottom: 6px; }
.card-desc { font-size: 0.7rem; color: var(--muted); line-height: 1.4; display: none; }
.race-card.selected .card-desc, .class-card.selected .card-desc,
.race-card:hover .card-desc, .class-card:hover .card-desc { display: block; }

/* === Spell Book (sidebar) === */
.spell-book { display: flex; flex-direction: column; gap: 2px; }
.spell-group-label {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 0 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.spell-card {
  padding: 6px 8px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--transition);
}
.spell-card:hover { background: var(--surface2); }
.spell-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}
.spell-card .spell-name {
  font-size: 0.85rem;
  color: var(--text);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
/* .spell-cast-icon (the per-spell ✨ cast button) removed S232 — OOC casting
   moved to the 🔮 picker; the sidebar spell list is details-only. */
.spell-card .spell-chevron {
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform var(--transition);
}
.spell-card.expanded .spell-chevron { transform: rotate(90deg); }
.spell-card .spell-desc {
  display: none;
  font-size: 0.75rem;
  color: var(--text-dim);
  padding: 4px 0 2px;
  line-height: 1.4;
}
.spell-card.expanded .spell-desc { display: block; }

/* === Spell Picker (exploration mode) === */
.spell-picker-panel {
  display: none;
  max-height: 300px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
.spell-picker-panel.visible { display: block; }
.spell-picker-group { padding: 8px 16px; }
.spell-picker-group h4 {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.spell-picker-item {
  padding: 8px 12px;
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: background var(--transition);
}
.spell-picker-item:hover { background: var(--surface2); }
.spell-picker-item.disabled { opacity: 0.35; pointer-events: none; }
.spell-picker-search-wrap {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.spell-picker-search {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  outline: none;
}
.spell-picker-search:focus { border-color: var(--gold); }
.spell-picker-search::placeholder { color: var(--muted); }
.btn-spell {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  flex-shrink: 0;
}
.btn-spell:hover {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(255,215,0,0.15);
}

/* === Version Badge === */
.version-badge {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.version-badge:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.hidden { display: none !important; }
.flex { display: flex; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.mt-auto { margin-top: auto; }

/* === Settings Panel === */
.settings-panel {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: none;
}
.settings-panel.visible { display: flex; justify-content: center; align-items: center; }

.settings-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
}

.settings-content {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  width: 90%;
  max-width: 640px;
  max-height: 85vh;
  overflow-y: auto;
  z-index: 1;
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.settings-header h2 {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1.4rem;
}
.settings-close-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.settings-close-btn:hover { color: var(--text); }

.settings-tab-btn {
  background: transparent;
  color: var(--muted);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 18px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.settings-tab-btn:hover { color: var(--text); }
.settings-tab-btn.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.settings-tab-body { animation: fadeInTab 0.15s ease-out; }
@keyframes fadeInTab { from { opacity: 0.4; } to { opacity: 1; } }

.settings-section {
  margin-bottom: 28px;
}
.settings-section h3 {
  font-family: var(--font-display);
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.settings-hint {
  color: var(--muted);
  font-size: 0.8rem;
  margin-bottom: 10px;
}

/* Dice colorset cards */
.settings-dice-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}
@media (max-width: 600px) {
  .settings-dice-grid { grid-template-columns: repeat(3, 1fr); }
}

.settings-dice-card {
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
}
.settings-dice-card:hover {
  border-color: var(--border-light);
  transform: translateY(-2px);
}
.settings-dice-card.active {
  border-color: var(--gold);
  background: rgba(255,215,0,0.06);
}

.dice-color-preview {
  width: 100%;
  height: 48px;
  border-radius: var(--radius-xs);
  margin-bottom: 6px;
}

.settings-dice-label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--text);
  margin-bottom: 1px;
}
.settings-dice-desc {
  font-size: 0.65rem;
  color: var(--muted);
  line-height: 1.2;
}

/* Theme cards */
.settings-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 600px) {
  .settings-theme-grid { grid-template-columns: 1fr; }
}

.settings-theme-card {
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
}
.settings-theme-card:hover { border-color: var(--border-light); }
.settings-theme-card.active { border-color: var(--gold); }

.theme-preview-strip {
  display: flex;
  height: 28px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  margin-bottom: 8px;
}

.settings-theme-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 2px;
}

/* === Theme: Parchment === */
[data-theme="parchment"] {
  --bg: #f4ead5;
  --surface: #e8dcc8;
  --surface2: #ddd0b8;
  --surface3: #d2c4aa;
  --border: rgba(60,40,20,0.15);
  --border-light: rgba(60,40,20,0.25);
  --text: #2c1810;
  --text-dim: rgba(44,24,16,0.65);
  --muted: rgba(44,24,16,0.4);
  --gold: #8B6914;
  --dm: #8B6914;
}

/* === Theme: Midnight === */
[data-theme="midnight"] {
  --bg: #0a0e1a;
  --surface: #111828;
  --surface2: #1a2238;
  --surface3: #243050;
  --border: rgba(150,170,220,0.1);
  --border-light: rgba(150,170,220,0.2);
  --text: #d0d8f0;
  --text-dim: rgba(208,216,240,0.6);
  --muted: rgba(208,216,240,0.35);
  --gold: #C0C0C0;
  --dm: #A0B0D0;
}

/* === Phase J2: Journal === */
/* Right-sidebar summary — slim replacement for the old scrappy textarea panel */
.journal-sidebar { display: flex; flex-direction: column; gap: 6px; }
.journal-sidebar-stats { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.journal-pinned-count { color: var(--gold); }
.journal-sidebar-recent { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--text-dim); max-height: 200px; overflow-y: auto; }
.journal-sidebar-recent .journal-sidebar-row { display: flex; justify-content: space-between; gap: 6px; padding: 4px 6px; background: var(--surface2); border-radius: var(--radius-xs); cursor: pointer; border: 1px solid transparent; }
.journal-sidebar-recent .journal-sidebar-row:hover { border-color: var(--border-light); }
.journal-sidebar-recent .jsr-name { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journal-sidebar-recent .jsr-cat { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; flex-shrink: 0; }

/* Modal shell — wider than default so list+detail both breathe.
   v1.8.668 (live-play hot-fix) — `overflow: hidden` overrides the
   parent .modal's `overflow-y: auto`. Without this, when the modal
   content exceeds 85vh, the WHOLE modal scrolls and the tabs strip
   gets clipped/scrolled out of view. The internal .journal-body
   already handles its own scrolling (list pane + detail pane each
   have overflow-y:auto), so the modal shell itself shouldn't scroll.
   Tyler 2026-05-06: "the modal shouldnt resize, it should be the size
   in the snip and the tabs should always be visible". */
.journal-modal { max-width: 960px; width: 95vw; height: 85vh; padding: 24px; display: flex; flex-direction: column; overflow: hidden; }

/* Tab strip — mirrors settings-tab-btn pattern (underline on active, gold highlight) */
.journal-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 12px 0 0; overflow-x: auto; }
.journal-tab-btn { background: transparent; color: var(--muted); border: none; border-bottom: 2px solid transparent; padding: 10px 14px; font-family: var(--font-display); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; white-space: nowrap; transition: color var(--transition), border-color var(--transition); }
.journal-tab-btn:hover { color: var(--text-dim); }
.journal-tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }
.journal-tab-count { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 8px; background: var(--surface2); color: var(--text-dim); font-size: 0.7rem; font-family: var(--font-body); }
.journal-tab-btn.active .journal-tab-count { background: var(--surface3); color: var(--gold); }

/* Toolbar — search + new entry button */
.journal-toolbar { display: flex; gap: 8px; padding: 12px 0; align-items: center; }
.journal-search-input { flex: 1; padding: 8px 12px; font-size: 0.9rem; }

/* Two-pane body */
.journal-body { display: grid; grid-template-columns: 300px 1fr; gap: 12px; flex: 1; min-height: 0; overflow: hidden; }
.journal-list { background: var(--surface2); border-radius: var(--radius-sm); overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-height: 280px; }
.journal-detail { background: var(--surface2); border-radius: var(--radius-sm); padding: 18px; overflow-y: auto; min-height: 280px; }
.journal-empty { color: var(--muted); font-style: italic; text-align: center; padding: 40px 16px; }

/* List rows */
.journal-row { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--radius-xs); cursor: pointer; border: 1px solid transparent; transition: background var(--transition), border-color var(--transition); }
.journal-row:hover { background: var(--surface3); border-color: var(--border); }
.journal-row.selected { background: var(--surface3); border-color: var(--gold); }
.journal-row.recent { border-left: 3px solid var(--success); padding-left: 8px; }
.journal-row.recent.selected { border-left-color: var(--gold); }
/* v1.8.844 OI-76 — auto-edited vs player-edited distinction. Green = Claude
   touched it; cyan = player touched it; gradient = hybrid (Claude wrote, player
   edited). Selected always wins (gold border). */
.journal-row.recent-manual { border-left-color: #5DA9FF; } /* player blue */
.journal-row.recent-hybrid { border-left-color: #5AE0D0; } /* hybrid teal */
.journal-row.recent-auto   { border-left-color: var(--success); } /* unchanged — Claude green */
.journal-row.recent.selected { border-left-color: var(--gold); }
.journal-row-top { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.journal-row-name { color: var(--text); font-weight: 500; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journal-row-badges { display: flex; gap: 3px; flex-shrink: 0; font-size: 0.7rem; }
.journal-row-hint { color: var(--muted); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Badges — auto/edited/pinned/placeholder */
.journal-badge { display: inline-block; padding: 1px 6px; border-radius: 8px; background: var(--surface); color: var(--text-dim); font-size: 0.7rem; line-height: 1.3; border: 1px solid var(--border); }
.journal-badge.pinned { background: rgba(255,215,0,0.14); color: var(--gold); border-color: rgba(255,215,0,0.3); }
.journal-badge.auto { background: rgba(110,170,255,0.14); color: #7fb0ff; border-color: rgba(110,170,255,0.3); }
.journal-badge.hybrid { background: rgba(160,110,255,0.14); color: #b48dff; border-color: rgba(160,110,255,0.3); }
/* OI-76 — "your entry, auto-updated by the Chronicler": gold (yours) tint,
   distinct from the blue auto / purple hybrid badges. */
.journal-badge.autoupdated { background: rgba(255,215,0,0.12); color: var(--gold); border-color: rgba(255,215,0,0.3); }
.journal-badge.placeholder { background: rgba(255,170,70,0.14); color: var(--warning); border-color: rgba(255,170,70,0.3); }
/* v1.7.34 — quest status badges */
.journal-badge.quest-complete { background: rgba(90, 200, 120, 0.16); color: var(--success); border-color: rgba(90, 200, 120, 0.35); }
.journal-badge.quest-failed   { background: rgba(230, 80, 90, 0.16);  color: var(--danger);  border-color: rgba(230, 80, 90, 0.35); }
/* Row accent for completed/failed quests so they read as "done" at a glance */
.journal-row.quest-complete { opacity: 0.75; }
.journal-row.quest-complete .journal-row-name { text-decoration: line-through; text-decoration-color: rgba(90, 200, 120, 0.6); text-decoration-thickness: 2px; }
.journal-row.quest-failed { opacity: 0.7; }
.journal-row.quest-failed .journal-row-name { text-decoration: line-through; text-decoration-color: rgba(230, 80, 90, 0.6); text-decoration-thickness: 2px; }

/* Detail view */
.journal-detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.journal-detail-title { font-family: var(--font-display); color: var(--gold); font-size: 1.3rem; margin: 0; }
.journal-detail-cat { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.journal-detail-actions { display: flex; gap: 6px; flex-shrink: 0; }
.journal-detail-body { color: var(--text); line-height: 1.6; font-size: 0.92rem; white-space: pre-wrap; word-wrap: break-word; }
.journal-detail-meta { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
/* v1.7.34 — grid columns replace flex + min-width. Long keys ("last seen
   location" was 14 chars, overflowing the 110px floor and shunting the value
   rightward inconsistently) now align cleanly; values wrap below the key on
   narrow viewports. */
.journal-detail-meta-row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; margin-bottom: 4px; font-size: 0.85rem; align-items: start; }
.journal-detail-meta-key { color: var(--muted); text-transform: capitalize; }
.journal-detail-meta-val { color: var(--text-dim); word-break: break-word; }
.journal-detail-tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px; }
.journal-detail-tag { background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); padding: 2px 8px; border-radius: 8px; font-size: 0.75rem; }
.journal-detail-footer { margin-top: 14px; color: var(--muted); font-size: 0.72rem; font-style: italic; }

/* Vendor / fence / appraiser flag chips on NPC entries (v1.8.722) */
.journal-flags-row { margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.journal-flag-chip {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 3px 9px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
}
.journal-flag-vendor    { background: rgba(212,175,55,0.15);  color: #d4af37;  border-color: rgba(212,175,55,0.45); }
.journal-flag-fence     { background: rgba(255,140,0,0.15);   color: #ff8c00;  border-color: rgba(255,140,0,0.50); }
.journal-flag-appraiser { background: rgba(80,180,255,0.15);  color: #50b4ff;  border-color: rgba(80,180,255,0.45); }

/* Inline edit form */
.journal-edit-form { display: flex; flex-direction: column; gap: 10px; }
.journal-edit-form label { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.journal-edit-form input, .journal-edit-form textarea, .journal-edit-form select { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: var(--radius-xs); font-family: var(--font-body); font-size: 0.9rem; }
.journal-edit-form textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.journal-edit-form .journal-edit-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.journal-edit-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Responsive — stack panes on narrow screens */
@media (max-width: 720px) {
  .journal-body { grid-template-columns: 1fr; }
  .journal-list { max-height: 180px; min-height: 0; }
  .journal-edit-meta-grid { grid-template-columns: 1fr; }
}

/* Phase J5: clickable journal names in narrative / cross-refs. Subtle dotted
   underline so the prose stays readable; hover brightens to gold to make the
   interaction obvious. Inline display so it never breaks flow across <strong>
   or <em> wrappers. */
.journal-link {
  cursor: pointer;
  border-bottom: 1px dotted var(--border-light);
  color: inherit;
  transition: color var(--transition), border-color var(--transition);
}
.journal-link:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* CS4: PC-name links — visually distinct from journal (NPC) links via a
   subtle cyan accent so players can tell at a glance whether a clickable
   name is "friendly party member" vs "journal entry". Hover matches the
   gold language of the rest of the app for consistency. */
.pc-link {
  cursor: pointer;
  border-bottom: 1px dotted var(--agua, #6fbfd6);
  color: var(--agua, #6fbfd6);
  transition: color var(--transition), border-color var(--transition);
}
.pc-link:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* Phase J6: NPC portrait block in the detail view + mini avatars in list rows /
   sidebar recent rows. Full portrait is 200px square with a rounded corner +
   subtle border. Hover hints at the lightbox-zoom behavior. */
.journal-portrait-wrap { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.journal-portrait-img { width: 160px; height: 160px; object-fit: cover; border-radius: var(--radius-xs); border: 1px solid var(--border); cursor: zoom-in; transition: transform var(--transition); }
.journal-portrait-img:hover { transform: scale(1.02); border-color: var(--gold); }
.journal-portrait-placeholder { width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-xs); border: 1px dashed var(--border-light); color: var(--muted); font-size: 0.8rem; font-style: italic; }
/* v1.8.340 — location portraits use 16:9 wide environmental framing instead
   of the NPC head-and-shoulders square. 288×162 keeps the same vertical
   footprint as the 160×160 NPC tile but goes wider (matches the prompt
   builder's aspect_ratio:'16:9'). */
.journal-portrait-img--wide { width: 288px; height: 162px; }
.journal-portrait-placeholder.journal-portrait-img--wide { width: 288px; height: 162px; }

/* Mini avatars in journal-list rows */
.journal-row-name-wrap { display: inline-flex; align-items: center; gap: 6px; flex: 1; overflow: hidden; }
.journal-row-avatar { width: 24px; height: 24px; object-fit: cover; border-radius: 50%; border: 1px solid var(--border); flex-shrink: 0; }

/* Mini avatars in right-sidebar "recent" rows */
.jsr-name-wrap { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.journal-sidebar-avatar { width: 18px; height: 18px; object-fit: cover; border-radius: 50%; border: 1px solid var(--border); flex-shrink: 0; }

/* === Maintenance mode overlays === */
/* Pinned-to-top banner shown to everyone during countdown (red) and to admins
   while maintenance is active (amber). Full-width, non-dismissable.
   `!important` on the gradient + color because theme overrides (parchment,
   midnight) re-declare background/color on body + .screen descendants with
   higher specificity; without !important the banner can wash out to the
   parchment cream. Intentional hammer — this banner MUST read as urgent. */
.maintenance-banner {
  /* v1.8.7 — reverted to position:fixed. Sticky was leaving body overflow
     unchanged, so on the game screen (#game height:100vh) the banner pushed
     game-header below the fold; scrolling the document then hid the whole
     top bar. Fixed + body padding-top compensation is the reliable pattern —
     banner lives above document flow, body reserves the banner's height so
     nothing gets clipped. #game height reduced via calc() so the scroll area
     stays inside the viewport. */
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 16px;
  font-family: var(--font-body);
  border-bottom: 2px solid rgba(0,0,0,0.3);
  animation: maintBannerSlide 0.3s ease-out;
}
/* Compensation so nothing below the banner gets covered. Applied via JS
   when the banner is visible (body.maint-banner-visible).
   v1.8.8 — also shrinks .screen min-height. Without this, .screen's base
   min-height:100vh + body padding-top:64px = body overflows by 64px, so
   scrolling the document pushes the screen's top row (game-header etc.)
   under the fixed banner. Reducing .screen to calc(100vh - 64px) means
   body height matches viewport exactly — no document scroll, no tuck. */
body.maint-banner-visible { padding-top: 64px; }
body.maint-banner-visible .screen { min-height: calc(100vh - 64px); }
body.maint-banner-visible #game { height: calc(100vh - 64px); }
@keyframes maintBannerSlide { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* Email-confirm play-gate banner (M4) — a proper header that pushes content down
   (mirrors the maintenance banner's body-offset pattern, not an overlay). */
.email-confirm-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  min-height: 44px; box-sizing: border-box; padding: 8px 16px;
  background: linear-gradient(90deg, #3a2a0a, #4a3510); color: #ffe8a0;
  border-bottom: 1px solid rgba(255,215,0,0.4); box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  font-family: var(--font-body); font-size: 0.88rem;
  animation: maintBannerSlide 0.3s ease-out;
}
.email-confirm-banner .ecb-btn {
  background: rgba(255,215,0,0.15); color: #ffe8a0; border: 1px solid rgba(255,215,0,0.5);
  border-radius: 6px; padding: 4px 12px; cursor: pointer; font-size: 0.82rem;
}
.email-confirm-banner .ecb-btn:hover { background: rgba(255,215,0,0.28); }
.email-confirm-banner .ecb-x { background: none; border: none; color: #ffe8a0; cursor: pointer; font-size: 1rem; opacity: 0.7; line-height: 1; }
.email-confirm-banner .ecb-x:hover { opacity: 1; }
body.email-confirm-visible { padding-top: 44px; }
body.email-confirm-visible .screen { min-height: calc(100vh - 44px); }
body.email-confirm-visible #game { height: calc(100vh - 44px); }
.maintenance-banner.countdown {
  background: linear-gradient(90deg, #8a1a1a, #c42626, #8a1a1a) !important;
  color: #fff !important;
  animation: maintBannerSlide 0.3s ease-out, maintBannerPulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(196, 38, 38, 0.6);
}
@keyframes maintBannerPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(196, 38, 38, 0.6); }
  50% { box-shadow: 0 0 32px rgba(255, 60, 60, 0.9); }
}
.maintenance-banner.active-admin {
  background: linear-gradient(90deg, #7a5a0e, #c48f1a, #7a5a0e) !important;
  color: #fff !important;
}
/* Force white text for all children too — the banner's text color must not
   be overridden by theme-scoped rules that target .screen > * etc. */
.maintenance-banner * { color: #fff !important; }
.maint-banner-inner {
  display: flex; align-items: center; gap: 14px;
  max-width: 1200px; width: 100%;
}
.maint-banner-icon { font-size: 1.8rem; line-height: 1; flex-shrink: 0; }
.maint-banner-text { flex: 1; }
.maint-banner-title { font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; text-transform: uppercase; }
.maint-banner-title #maint-countdown { font-family: var(--font-display); font-size: 1.2rem; margin-left: 4px; }
.maint-banner-sub { font-size: 0.8rem; opacity: 0.9; margin-top: 2px; }
.maint-banner-btn {
  background: rgba(0,0,0,0.35); color: #fff; border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-xs); padding: 6px 14px; font-size: 0.85rem;
  cursor: pointer; font-weight: 600; transition: var(--transition);
}
.maint-banner-btn:hover { background: rgba(0,0,0,0.55); border-color: #fff; }

/* v1.8.7 — compensation rules above. */

/* Full-screen maintenance page — non-admins only, shown when maintenance is active */
#maintenance-page {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 100, 50, 0.06) 0%, transparent 60%), #0a0808;
  padding: 20px;
}
.maint-page-card {
  max-width: 520px; width: 100%; text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 40px 32px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
.maint-page-icon { font-size: 3.5rem; margin-bottom: 16px; }
.maint-page-card h1 {
  font-family: var(--font-display); color: var(--warning);
  margin-bottom: 12px; font-size: 2rem;
}
.maint-page-reason {
  color: var(--gold); font-size: 1rem; margin-bottom: 20px;
  font-style: italic;
}
.maint-page-body {
  color: var(--text-dim); font-size: 0.95rem; margin-bottom: 28px;
  line-height: 1.5;
}
body.maint-page-visible { overflow: hidden; }

/* === Admin report detail modal === */
.report-detail-section { margin-bottom: 18px; }
.report-detail-section h3 {
  font-family: var(--font-display); color: var(--gold);
  font-size: 0.9rem; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em;
}
.report-detail-meta {
  display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.82rem;
  color: var(--text-dim); margin-bottom: 4px;
}
.report-detail-meta span { background: var(--surface2); padding: 3px 8px; border-radius: var(--radius-xs); }
.report-detail-text {
  background: var(--surface2); padding: 12px; border-radius: var(--radius-xs);
  white-space: pre-wrap; line-height: 1.5; font-size: 0.9rem;
  border: 1px solid var(--border);
}
.report-detail-screenshot {
  width: 100%; max-height: 360px; object-fit: contain;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  cursor: zoom-in; background: #000;
}
.report-detail-context-list {
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-xs);
  max-height: 200px; overflow-y: auto; padding: 8px 12px;
}
.report-detail-context-item {
  padding: 4px 0; border-bottom: 1px dashed var(--border);
  font-size: 0.82rem; color: var(--text-dim); line-height: 1.4;
}
.report-detail-context-item:last-child { border-bottom: none; }
.report-detail-context-empty {
  color: var(--muted); font-style: italic; font-size: 0.82rem;
  padding: 8px 0; text-align: center;
}

/* Clickable report row in the admin panel */
.admin-report-row { cursor: pointer; transition: var(--transition); }
.admin-report-row:hover { border-color: var(--gold) !important; background: var(--surface3) !important; }
.admin-report-row .admin-report-screenshot-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(74,158,255,0.15); color: var(--agua);
  padding: 2px 7px; border-radius: var(--radius-xs);
  font-size: 0.7rem; font-weight: 600;
}

/* === Post-combat summary modal === */
.combat-summary-header-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 18px;
}
.combat-summary-hstat {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: 10px 8px;
  text-align: center;
}
.combat-summary-hstat-val {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 700;
  color: var(--text);
}
.combat-summary-hstat-label {
  font-size: 0.7rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-top: 2px;
}
.combat-summary-mvps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 18px;
}
.combat-summary-mvp {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: 12px 8px;
  text-align: center;
}
.combat-summary-mvp-icon { font-size: 1.6rem; line-height: 1; }
.combat-summary-mvp-title {
  font-size: 0.72rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-top: 4px;
}
.combat-summary-mvp-name {
  font-family: var(--font-display); font-size: 0.95rem;
  font-weight: 600; margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.combat-summary-mvp-value {
  font-size: 0.85rem; color: var(--gold);
  font-weight: 600; margin-top: 2px;
}
.combat-summary-section-title {
  font-family: var(--font-display); color: var(--gold);
  font-size: 0.9rem; margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.combat-summary-table-wrap {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-xs); overflow: hidden;
}
.combat-summary-table {
  width: 100%; border-collapse: collapse; font-size: 0.85rem;
}
.combat-summary-table th {
  background: var(--surface3); padding: 8px 10px;
  text-align: center; font-weight: 600;
  color: var(--text-dim); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.combat-summary-table th:first-child { text-align: left; }
.combat-summary-table td {
  padding: 8px 10px; border-top: 1px solid var(--border);
  text-align: center; color: var(--text);
}
.combat-summary-table .combat-summary-name {
  text-align: left; font-weight: 600;
}
@media (max-width: 600px) {
  .combat-summary-header-stats, .combat-summary-mvps { grid-template-columns: repeat(2, 1fr); }
}

/* === Active Quests sidebar card === */
.quest-sidebar { display: flex; flex-direction: column; gap: 6px; }
.quest-sidebar-row {
  background: var(--surface2); border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-xs); padding: 8px 10px;
  cursor: pointer; transition: var(--transition);
}
.quest-sidebar-row:hover { border-color: var(--border-light); background: var(--surface3); }
.quest-sidebar-row:hover { border-left-color: var(--gold); }
/* S258 quest tier-dim (quest-design §4e) — a quest anchored elsewhere (Tier 2
   in injection) reads quiet: dimmed row, neutral spine, a soft (background)
   tag. Hover restores full presence (it's still clickable). */
.quest-sidebar-row.quest-bg { opacity: 0.55; border-left-color: var(--border-light); }
.quest-sidebar-row.quest-bg:hover { opacity: 1; }
.quest-bg-tag { margin-left: 6px; font-size: 0.68rem; font-weight: 400; color: var(--text-dim); font-style: italic; }
.quest-sidebar-name {
  color: var(--text); font-weight: 600; font-size: 0.85rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.quest-sidebar-objective {
  color: var(--text-dim); font-size: 0.75rem; margin-top: 3px;
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Slice 4 — tracker row head: name + term badge on the left, leader controls
   (pin toggle / abandon ✕) on the right. */
.quest-sidebar-head { display: flex; align-items: center; gap: 6px; }
.quest-sidebar-head .quest-sidebar-name { flex: 1; min-width: 0; }
.quest-term { font-size: 0.8rem; margin-right: 4px; flex-shrink: 0; }
.quest-sidebar-ctrls { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.quest-ctrl {
  background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: var(--radius-xs);
  font-size: 0.78rem; line-height: 1; opacity: 0.55; transition: var(--transition); color: var(--text-dim);
}
button.quest-ctrl:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }
.quest-pin.on { opacity: 1; filter: drop-shadow(0 0 4px rgba(255, 200, 60, 0.55)); }
button.quest-abandon:hover { color: var(--danger); }

/* === v1.7.0 Character Sheet modal (CS1) ===
 * Tabbed modal. Personality tab locks during session_active (server-enforced,
 * client mirrors by disabling inputs). Secrets tab is only rendered for owner
 * or admin. All other tabs follow the same visual language as the journal modal.
 */
.sheet-modal {
  /* v1.7.24 (UI-1) — lock height so the modal doesn't resize (and jerk
     vertically when content is shorter) as the user switches between tabs.
     The body retains flex:1 + overflow-y:auto, so short tabs have empty
     space at the bottom instead of collapsing the whole modal. */
  max-width: 960px; width: 95vw; height: 88vh;
  padding: 20px; display: flex; flex-direction: column;
}
.sheet-modal-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.sheet-modal-identity { display: flex; align-items: center; gap: 14px; }
/* v1.8.341 — portrait + regen button stack in a column. The button only
   shows for owner/admin (visibility toggled in render()). */
.sheet-modal-portrait-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sheet-modal-portrait {
  width: 72px; height: 72px; border-radius: 50%;
  border: 2px solid var(--gold); object-fit: cover; background: var(--surface2);
}
.sheet-portrait-regen-btn { font-size: 0.7rem; padding: 3px 8px; white-space: nowrap; }
.sheet-modal-header h2 { margin: 0; font-family: var(--font-display); color: var(--gold); font-size: 1.4rem; }
.sheet-modal-subtitle { color: var(--text-dim); font-size: 0.9rem; margin-top: 2px; }

/* v1.8.848 OI-86 — char-sheet tabs no longer require horizontal scroll. Pre-fix
   used `overflow-x: auto`, so at typical viewport widths the user had to scroll
   the strip horizontally to reach the right-hand tabs (Inventory / Spells /
   Transactions / Orders). Flex-wrap allows all tabs to be visible at once on
   2 rows; tightened padding + smaller font shrink the per-tab footprint so
   they pack more comfortably. */
.sheet-modal-tabs {
  display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--border);
  margin: 12px 0 0;
}
.sheet-tab {
  background: transparent; color: var(--muted); border: none;
  border-bottom: 2px solid transparent; padding: 7px 10px;
  font-family: var(--font-display); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.02em;
  cursor: pointer; white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.sheet-tab:hover { color: var(--text-dim); }
.sheet-tab.active { color: var(--gold); border-bottom-color: var(--gold); }

.sheet-modal-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 18px 4px 4px;
}

/* Shared layout helpers inside tabs */
.sheet-section { margin-bottom: 14px; }
.sheet-section-label {
  color: var(--muted); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 4px;
}
.sheet-section-value { color: var(--text); font-size: 0.95rem; }
.sheet-section-value.sheet-prose { line-height: 1.55; color: var(--text-dim); }
.sheet-two-col {
  display: grid; grid-template-columns: 260px 1fr; gap: 24px;
}
@media (max-width: 720px) { .sheet-two-col { grid-template-columns: 1fr; } }

.sheet-form { display: flex; flex-direction: column; gap: 12px; }
.sheet-form-field label {
  display: block; font-size: 0.8rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px;
}
.sheet-form-actions { margin-top: 14px; display: flex; justify-content: flex-end; }
.sheet-status {
  margin-top: 10px; min-height: 1.1em;
  color: var(--text-dim); font-size: 0.82rem;
}

.sheet-lock-banner {
  background: rgba(255,170,70,0.1); border: 1px solid rgba(255,170,70,0.3);
  color: var(--warning); padding: 8px 12px; border-radius: var(--radius-xs);
  margin-bottom: 12px; font-size: 0.85rem;
}
.sheet-info {
  color: var(--text-dim); font-size: 0.82rem; font-style: italic;
  padding: 8px 10px; background: var(--surface2); border-radius: var(--radius-xs);
  margin-bottom: 12px;
}
.sheet-empty { color: var(--muted); padding: 12px 4px; }

/* Transactions tab (v1.8.712 — Phase 6 Ship 7.1) — per-PC narrative_transactions feed */
.tx-list { display: flex; flex-direction: column; gap: 6px; }
.tx-row {
  padding: 8px 10px; background: var(--surface2); border-radius: var(--radius-xs);
  border-left: 3px solid var(--surface3);
}
.tx-row:hover { border-left-color: var(--accent); }
.tx-line { font-size: 0.88rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.tx-turn { color: var(--muted); font-family: var(--font-mono, monospace); font-size: 0.76rem; min-width: 26px; }
.tx-icon { font-size: 0.95rem; }
.tx-type { color: var(--text-dim); text-transform: capitalize; }
.tx-amount { color: var(--text); font-weight: 600; }
.tx-source { color: var(--muted); font-size: 0.78rem; }
.tx-flag { color: var(--warning, #d4a056); }
.tx-narrative { color: var(--text-dim); font-size: 0.8rem; font-style: italic; margin-top: 4px; padding-left: 32px; }

/* Orders tab (v1.8.785 — Slice 5b of elevated-gear-design.md) — per-PC commissions panel */
.order-list { display: flex; flex-direction: column; gap: 8px; }
.order-row {
  padding: 10px 12px; background: var(--surface2); border-radius: var(--radius-xs);
  border-left: 3px solid var(--surface3);
}
.order-row:hover { border-left-color: var(--accent); }
.order-line {
  font-size: 0.95rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
}
.order-vendor { font-weight: 600; color: var(--text); }
.order-item { color: var(--text); }
.order-meta { color: var(--muted); font-size: 0.8rem; margin-top: 4px; }
.order-actions { margin-top: 8px; display: flex; gap: 8px; }
.order-action { font-size: 0.85rem; }
.order-status {
  display: inline-block; margin-left: auto; padding: 2px 8px;
  border-radius: 12px; font-size: 0.78rem; font-weight: 600;
}
.order-status-pending   { background: rgba(212, 160, 86, 0.18); color: var(--warning, #d4a056); }
.order-status-ready     { background: rgba(92, 184, 92, 0.20); color: var(--success, #5cb85c); }
.order-status-completed { background: var(--surface3); color: var(--muted); }
.order-status-cancelled { background: var(--surface3); color: var(--muted); text-decoration: line-through; }
.order-status-voided    { background: rgba(217, 83, 79, 0.18); color: var(--danger, #d9534f); }

/* Stats tab — ability cards */
.sheet-stats-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 18px;
}
@media (max-width: 720px) { .sheet-stats-grid { grid-template-columns: repeat(3, 1fr); } }
.sheet-stat-card {
  background: var(--surface2); padding: 10px; border-radius: var(--radius-sm);
  text-align: center; border: 1px solid transparent;
}
.sheet-stat-card.modified { border-color: var(--gold); }
.sheet-stat-label {
  color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.sheet-stat-score { font-size: 1.5rem; font-weight: 700; color: var(--text); }
.sheet-stat-card.modified .sheet-stat-score { color: var(--gold); }
.sheet-stat-mod { color: var(--text-dim); font-size: 0.9rem; }
.sheet-stat-base { color: var(--muted); font-size: 0.7rem; margin-top: 2px; }
.sheet-stats-rows { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; color: var(--text); }

/* List rows — shared by goals / secrets / fears / relationships */
.sheet-add-form {
  display: flex; gap: 6px; margin-bottom: 10px; align-items: center;
}
.sheet-list-row {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 10px; background: var(--surface2);
  border-radius: var(--radius-xs); margin-bottom: 6px;
  border: 1px solid transparent;
}
.sheet-list-row:hover { border-color: var(--border); }
.sheet-goal-text { flex: 1; color: var(--text); font-size: 0.9rem; }
.sheet-goal-cat {
  color: var(--gold); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.05em; flex-shrink: 0;
}
.sheet-row-actions { display: flex; gap: 4px; flex-shrink: 0; }

.sheet-bucket { margin-bottom: 18px; }
.sheet-bucket h4 {
  font-family: var(--font-display); color: var(--gold);
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0 0 8px;
}

/* Secrets badges */
.sheet-secret-badge {
  font-size: 0.7rem; padding: 2px 8px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0;
}
.sheet-secret-badge.hidden   { background: rgba(120,120,140,0.18); color: var(--muted); }
.sheet-secret-badge.revealed { background: rgba(110,170,255,0.14); color: #7fb0ff; }

.sheet-rel-relation { color: var(--text-dim); font-size: 0.85rem; }
.sheet-rel-status   { color: var(--muted);    font-size: 0.85rem; }
.sheet-rel-notes    { color: var(--text-dim); font-size: 0.8rem; margin-top: 2px; font-style: italic; }

/* CS2a: badge on relationship rows linking to the auto-created journal
   NPC entry. Clickable via the shared .journal-link delegated handler. */
.sheet-rel-journal-badge {
  display: inline-block;
  font-size: 0.72rem;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(255, 215, 0, 0.12);
  color: var(--gold);
  border: 1px solid rgba(255, 215, 0, 0.25);
  vertical-align: middle;
  margin-left: 4px;
  white-space: nowrap;
}

/* v1.7.8: compact textareas for RP profile fields. The default .form-textarea
   min-height (100px) is way too tall for single-line-ish persona values —
   these start at ~2 rows and grow naturally as the user types, so long
   personality text ("Desperate to prove the power isn't a curse") stays fully
   visible instead of getting chopped at the input boundary. */
textarea.rp-textarea {
  min-height: 40px;
  padding: 8px 12px;
  line-height: 1.4;
  font-size: 0.95rem;
  resize: vertical;
}

/* (Feed redesign S5: the v1.7.8 session-resumed notice retired — it renders
   as the green nf-resume-card, § War Table grammar below.) */

.sheet-subsection { margin-bottom: 22px; }
.sheet-subsection h3 {
  font-family: var(--font-display); color: var(--gold);
  font-size: 0.95rem; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.05em;
}

/* =================================================================
   ROADMAP — sidebar teaser (compact) + full-screen modal
   Uses --rm-accent inline per milestone to color the left edge.
   ================================================================= */

/* ---- Launch countdown badge in sidebar header ---- */
.rm-launch-countdown-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  background: linear-gradient(135deg, rgba(255,215,0,0.18), rgba(255,215,0,0.08));
  border: 1px solid rgba(255,215,0,0.35);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* ---- Sidebar body container ---- */
.rm-sidebar-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  font-size: 0.85rem;
}

/* ---- Sidebar milestone rows (compact, no right-side status column) ---- */
.rm-sidebar-row {
  --rm-accent: var(--gold);
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  column-gap: 10px;
  padding: 7px 10px 7px 11px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--rm-accent);
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, background 0.12s;
  user-select: none;
}
.rm-sidebar-row:hover,
.rm-sidebar-row:focus-visible {
  transform: translateX(2px);
  border-color: var(--border-light);
  border-left-color: var(--rm-accent);
  background: var(--surface3);
  outline: none;
}
/* v1.8.1 — shipped milestones get a celebratory green treatment instead of
   muted strikethrough. Left accent bar and badge go green, subtle green tint
   on the row bg, and the ✓ gets a glow. Name stays fully legible (no more
   strikethrough) since shipped milestones are reference material, not cruft. */
.rm-sidebar-row.rm-shipped {
  --rm-accent: var(--success) !important;
  background: linear-gradient(90deg, rgba(81,207,156,0.12) 0%, var(--surface2) 70%);
  border-color: rgba(81,207,156,0.35);
}
.rm-sidebar-row.rm-shipped .rm-sidebar-m {
  color: var(--success);
}
.rm-sidebar-row.rm-shipped::after {
  content: '✓';
  position: absolute;
  top: 6px; right: 8px;
  color: var(--success);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  text-shadow: 0 0 8px rgba(81,207,156,0.6);
}
.rm-sidebar-row.rm-active {
  background: linear-gradient(90deg, rgba(255,215,0,0.10) 0%, var(--surface2) 60%);
  border-color: rgba(255,215,0,0.35);
  box-shadow: 0 0 0 1px rgba(255,215,0,0.1), 0 0 18px rgba(255,215,0,0.08);
}
.rm-sidebar-row.rm-active::before {
  content: '';
  position: absolute;
  left: -3px; top: 0; bottom: 0;
  width: 3px;
  background: var(--rm-accent);
  animation: rm-pulse 1.8s ease-in-out infinite;
  border-radius: 3px;
}
@keyframes rm-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--rm-accent); }
  50%       { opacity: 0.5; box-shadow: 0 0 2px var(--rm-accent); }
}

.rm-sidebar-icon {
  font-size: 1.05rem;
  text-align: center;
  line-height: 1;
}
.rm-sidebar-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rm-sidebar-title-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.rm-sidebar-m {
  font-family: var(--font-display);
  color: var(--rm-accent);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.rm-sidebar-name {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.25;
  min-width: 0;
  /* Allow up to 2 lines, ellipsis after */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.rm-weeks-badge {
  font-size: 0.58rem;
  color: #ff9866;
  background: rgba(255,107,53,0.15);
  border: 1px solid rgba(255,107,53,0.35);
  border-radius: 3px;
  padding: 0 4px;
  font-weight: 700;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  align-self: center;
}
.rm-sidebar-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--muted);
}
.rm-sidebar-date { color: var(--text-dim); white-space: nowrap; }
.rm-sidebar-ver {
  font-family: 'Monaco', 'Menlo', monospace;
  color: var(--muted);
  font-size: 0.65rem;
  opacity: 0.7;
  white-space: nowrap;
}
.rm-sidebar-meta-sep { color: var(--muted); opacity: 0.4; }

.rm-open-full-btn {
  margin-top: 10px;
  width: 100%;
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  color: var(--gold) !important;
  border-color: rgba(255,215,0,0.35) !important;
}
.rm-open-full-btn:hover {
  background: rgba(255,215,0,0.08) !important;
  border-color: var(--gold) !important;
}

/* =================================================================
   ROADMAP MODAL — full-screen detailed view
   ================================================================= */

.rm-modal-overlay {
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(4px);
}
.rm-modal-content {
  width: min(1100px, 95vw);
  max-height: 92vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0b0b14 0%, #12121c 100%);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 10px;
  box-shadow: 0 0 60px rgba(255,215,0,0.08), 0 20px 40px rgba(0,0,0,0.6);
  overflow: hidden;
}
.rm-modal-close {
  position: absolute;
  top: 12px; right: 16px;
  font-size: 1.8rem;
  background: none;
  border: 0;
  color: var(--text-dim);
  cursor: pointer;
  z-index: 2;
  line-height: 1;
  transition: color 0.15s;
}
.rm-modal-close:hover { color: var(--gold); }

.rm-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse at top left, rgba(255,215,0,0.08), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(81,207,156,0.05), transparent 60%);
}
.rm-modal-title {
  font-family: var(--font-display);
  color: var(--gold);
  margin: 0 0 4px;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}
.rm-modal-subtitle {
  color: var(--text-dim);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.rm-modal-launch-banner {
  text-align: right;
  padding: 10px 16px;
  border: 1px solid rgba(255,215,0,0.35);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,215,0,0.02));
  min-width: 200px;
}
.rm-modal-launch-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 2px;
}
.rm-modal-launch-date {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 4px;
}
.rm-modal-launch-count {
  font-size: 0.8rem;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.rm-modal-legend {
  display: flex;
  gap: 18px;
  padding: 12px 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  flex-wrap: wrap;
}
.rm-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.rm-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--rm-accent);
  box-shadow: 0 0 8px var(--rm-accent);
}

.rm-modal-body {
  overflow-y: auto;
  padding: 20px 28px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
/* v1.8.2 — timeline stem retired. The gradient stem at opacity 0.35 read as
   a stray "gray bar" on dark backgrounds (Agua flagged it). The section
   accent bar on each card's left edge already does the color-coding job
   without running through the gaps between cards. */

/* ---- Milestone card ---- */
.rm-card {
  --rm-accent: var(--gold);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  padding: 16px 18px 16px 70px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--rm-accent);
  border-radius: 8px;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.rm-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-light);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
/* v1.8.1 — shipped cards get a celebratory green treatment (matches the
   sidebar). Left accent bar + title accent go green, subtle green glow, and
   the ✓ scales up with text-shadow. Content stays fully legible — we want
   players to be able to read what M1 actually shipped after the fact. */
.rm-card.rm-shipped {
  --rm-accent: var(--success) !important;
  background: linear-gradient(135deg, rgba(81,207,156,0.08), var(--surface));
  border-color: rgba(81,207,156,0.35);
  box-shadow: 0 0 24px rgba(81,207,156,0.1);
}
.rm-card.rm-shipped .rm-card-icon {
  background: rgba(81,207,156,0.18) !important;
  color: var(--success) !important;
}
.rm-card.rm-shipped .rm-card-m,
.rm-card.rm-shipped .rm-card-section {
  color: var(--success) !important;
}
.rm-card.rm-shipped::after {
  content: '✓';
  position: absolute;
  top: 14px; right: 14px;
  color: var(--success);
  font-size: 1.6rem;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(81,207,156,0.6);
  z-index: 2;
}
/* v1.8.2 — give the shipped date enough right padding so it clears the
   absolute-positioned ✓ badge in the top-right corner. Without this, the
   "Shipped Apr 19, 2026" text slides under the checkmark on narrow cards. */
.rm-card.rm-shipped .rm-card-date { padding-right: 28px; }
.rm-card.rm-active {
  border-color: rgba(255,215,0,0.45);
  background: linear-gradient(135deg, rgba(255,215,0,0.06), var(--surface));
  box-shadow: 0 0 24px rgba(255,215,0,0.1);
}
.rm-card.rm-highlight {
  box-shadow: 0 0 0 2px var(--gold), 0 0 40px rgba(255,215,0,0.25);
  animation: rm-card-highlight 1.4s ease-out;
}
@keyframes rm-card-highlight {
  0%   { box-shadow: 0 0 0 4px var(--gold), 0 0 50px rgba(255,215,0,0.4); }
  100% { box-shadow: 0 0 0 2px var(--gold), 0 0 40px rgba(255,215,0,0.25); }
}

/* Milestone icon circle — anchored to the timeline stem */
.rm-card-icon {
  position: absolute;
  left: 24px;
  top: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  border: 2px solid currentColor;
  background: var(--surface2);
  z-index: 1;
  box-shadow: 0 0 0 4px var(--surface);
}

.rm-card-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin-bottom: 8px;
  align-items: start;
  grid-column: 1 / -1;
}
.rm-card-title-block { min-width: 0; }
.rm-card-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.rm-card-m {
  font-family: var(--font-display);
  color: var(--rm-accent);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.rm-card-name {
  font-family: var(--font-display);
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 600;
}
.rm-card-weeks {
  font-size: 0.65rem;
  color: #ff9866;
  background: rgba(255,107,53,0.12);
  border: 1px solid rgba(255,107,53,0.35);
  border-radius: 3px;
  padding: 1px 6px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rm-card-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.rm-card-section {
  font-weight: 700;
  letter-spacing: 0.04em;
}
.rm-card-sep { color: var(--muted); opacity: 0.5; }
.rm-card-ver {
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 0.72rem;
  color: var(--muted);
}
.rm-card-status {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.68rem;
}
.rm-card.rm-shipped  .rm-card-status { color: var(--success); }
.rm-card.rm-active   .rm-card-status { color: var(--gold); }
.rm-card.rm-upcoming .rm-card-status { color: var(--muted); }
.rm-card-date {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-align: right;
  white-space: nowrap;
  font-style: italic;
}
.rm-card-theme {
  grid-column: 1 / -1;
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid var(--rm-accent);
  border-radius: 3px;
}
.rm-card-ships-label {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--rm-accent);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.rm-card-ships {
  grid-column: 1 / -1;
  margin: 0 0 12px;
  padding-left: 20px;
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.55;
}
.rm-card-ships li { margin-bottom: 2px; }
.rm-card-gate {
  grid-column: 1 / -1;
  padding: 8px 12px;
  background: var(--surface2);
  border: 1px dashed var(--border-light);
  border-radius: 4px;
  font-size: 0.82rem;
  line-height: 1.5;
}
.rm-card-gate-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-right: 6px;
}
.rm-card-gate-body { color: var(--text-dim); }

/* ---- Launch card at bottom of modal ---- */
.rm-launch-card {
  margin-top: 8px;
  padding: 28px 18px;
  text-align: center;
  background:
    radial-gradient(circle at center, rgba(255,215,0,0.15), transparent 70%),
    var(--surface);
  border: 2px solid var(--gold);
  border-radius: 10px;
  position: relative;
  box-shadow: 0 0 40px rgba(255,215,0,0.2);
}
.rm-launch-rocket {
  font-size: 3rem;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 12px rgba(255,215,0,0.5));
}
.rm-launch-label {
  font-family: var(--font-display);
  font-size: 1.8rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(255,215,0,0.4);
}
.rm-launch-date {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text);
  margin-top: 8px;
  margin-bottom: 6px;
}
.rm-launch-countdown {
  font-size: 0.9rem;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* ---- Modal overlay visibility ---- */
.rm-modal-overlay:not(.visible) { display: none; }
.rm-modal-overlay.visible {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Responsive — roadmap modal on mobile ---- */
@media (max-width: 720px) {
  .rm-modal-header {
    flex-direction: column;
    align-items: stretch;
  }
  .rm-modal-launch-banner { text-align: center; }
  .rm-modal-body { padding: 16px 14px; }
  .rm-modal-body::before { left: 30px; }
  .rm-card { padding: 14px 14px 14px 56px; }
  .rm-card-icon { left: 14px; width: 32px; height: 32px; font-size: 1.1rem; }
  .rm-card-header { grid-template-columns: 1fr; }
  .rm-card-date { text-align: left; }
  .rm-modal-title { font-size: 1.3rem; }
}

/* =================================================================
   PATCH NOTES — "See all" button + history modal
   ================================================================= */

.pn-more-btn {
  margin-top: 10px;
  width: 100%;
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  color: var(--gold) !important;
  border-color: rgba(255,215,0,0.35) !important;
}
.pn-more-btn:hover {
  background: rgba(255,215,0,0.08) !important;
  border-color: var(--gold) !important;
}

.pn-modal-overlay {
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(4px);
}
.pn-modal-overlay:not(.visible) { display: none; }
.pn-modal-overlay.visible {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pn-modal-content {
  width: min(800px, 95vw);
  max-height: 88vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0b0b14 0%, #12121c 100%);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 10px;
  box-shadow: 0 0 60px rgba(255,215,0,0.08), 0 20px 40px rgba(0,0,0,0.6);
  overflow: hidden;
  position: relative;
}
.pn-modal-close {
  position: absolute;
  top: 12px; right: 16px;
  font-size: 1.8rem;
  background: none;
  border: 0;
  color: var(--text-dim);
  cursor: pointer;
  z-index: 2;
  line-height: 1;
  transition: color 0.15s;
}
.pn-modal-close:hover { color: var(--gold); }
.pn-modal-header {
  padding: 22px 28px 14px;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(ellipse at top left, rgba(255,215,0,0.06), transparent 60%);
}
.pn-modal-title {
  font-family: var(--font-display);
  color: var(--gold);
  margin: 0 0 4px;
  font-size: 1.5rem;
}
.pn-modal-subtitle {
  color: var(--text-dim);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
}
.pn-modal-body {
  overflow-y: auto;
  padding: 16px 20px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Collapsible release (native <details>) */
.pn-release {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  transition: border-color 0.15s, background 0.15s;
}
.pn-release:hover { border-color: var(--border-light); }
.pn-release[open] {
  background: var(--surface2);
  border-color: rgba(255,215,0,0.25);
}
.pn-summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 14px auto auto 1fr;
  gap: 10px;
  align-items: baseline;
  user-select: none;
}
.pn-summary::-webkit-details-marker { display: none; }
.pn-summary::marker { display: none; }
.pn-caret {
  color: var(--gold);
  font-size: 0.85rem;
  transition: transform 0.15s;
  line-height: 1;
  display: inline-block;
}
.pn-release[open] .pn-caret { transform: rotate(90deg); }
.pn-ver {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--gold);
  font-weight: 600;
}
.pn-date {
  font-size: 0.75rem;
  color: var(--muted);
  font-family: 'Monaco', 'Menlo', monospace;
}
.pn-count {
  justify-self: end;
  font-size: 0.7rem;
  color: var(--text-dim);
  font-style: italic;
  letter-spacing: 0.02em;
}
.pn-changes {
  margin: 0;
  padding: 4px 16px 14px 40px;
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.55;
  border-top: 1px dashed var(--border);
}
.pn-changes li { margin-bottom: 5px; }
.pn-changes li:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .pn-summary { grid-template-columns: 14px 1fr auto; }
  .pn-date { grid-column: 2 / 3; margin-top: 2px; font-size: 0.68rem; }
  .pn-count { grid-column: 3 / 4; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * v1.8.552 — Item-grant slice Ship 3.3: Quest reward scroll (parchment).
 * RuneScape-style scroll modal opened for the whole party when a journal
 * quest entry transitions to status:'complete'. Cream parchment background,
 * dark-brown body text, gold ornate border + curl detailing top/bottom.
 * Pops in with a brief reveal animation; click "Claim Rewards" to dismiss.
 * ───────────────────────────────────────────────────────────────────────── */
/* ===========================================================================
   QUEST COMPLETE modal — atmospheric-hearth reskin (S171, v1.8.1203;
   docs/design/project_redesign/design_handoff_questcomplete). Replaces the old
   parchment scroll. Overlay carries `.ss` for the shared token set; the rules
   below use the app's design tokens at the design's exact values. */
.qc-overlay { z-index: 800; } /* above inventory modal (700) so a quest fire mid-inv-open wins */

/* ambient embers (injected by _renderQuestEmbers; reduced-motion → hidden) */
.qc-ember {
  position: absolute; bottom: -12px; width: 3px; height: 3px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,210,120,0.95), rgba(255,150,50,0) 70%);
  animation: qcEm linear infinite; opacity: 0; z-index: 1; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .qc-ember { display: none; } }
@keyframes qcEm {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-86vh) translateX(28px); opacity: 0; }
}

/* modal shell */
.qc-modal {
  position: relative; z-index: 3; width: min(520px, 92vw); max-height: 90vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg2) 100%);
  border: 1px solid rgba(255,215,0,0.32); border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 100px -20px rgba(0,0,0,0.85), 0 0 80px -20px rgba(255,200,60,0.34), inset 0 1px 0 rgba(255,255,255,0.04);
  animation: qcIn 0.42s cubic-bezier(0.2,0.7,0.2,1) both;
}
@keyframes qcIn { from { transform: translateY(14px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* top seal — thin gold pill with hairlines either side */
.qc-seal { position: relative; padding: 28px 32px 0; text-align: center; }
.qc-seal::before, .qc-seal::after {
  content: ''; position: absolute; top: 48px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.5), transparent);
}
.qc-seal::before { left: 32px; right: 50%; margin-right: 78px; }
.qc-seal::after { left: 50%; right: 32px; margin-left: 78px; }
.qc-seal-mark {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 3px; text-transform: uppercase; color: var(--gold-soft);
  padding: 8px 16px; border: 1px solid rgba(255,215,0,0.4); border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,215,0,0.10), rgba(255,215,0,0.04));
}
.qc-seal-mark .glyph { font-size: 0.78rem; color: var(--gold); }

/* title + tagline */
.qc-body { padding: 22px 32px 0; text-align: center; }
.qc-ttl {
  font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1.05; margin: 0;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 24px rgba(255,180,60,0.18);
}
.qc-rule { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px auto 12px; }
.qc-rule .ln { flex: 1; max-width: 130px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,215,0,0.42), transparent); }
.qc-rule .em { color: var(--gold); font-size: 0.86rem; }
.qc-tagline { font-family: var(--font-read); font-style: italic; font-size: 1rem; line-height: 1.6; color: var(--text-dim); margin: 0; }
.qc-tagline:empty { display: none; }
.qc-tagline em, .qc-tagline strong { color: var(--gold-soft); font-style: normal; font-weight: 600; }

/* rewards */
.qc-rewards { padding: 24px 28px; }
.qc-rewards-h {
  font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 2.6px; text-transform: uppercase; color: var(--gold-soft);
  text-align: center; margin: 0 0 14px; display: flex; align-items: center; gap: 12px; justify-content: center;
}
.qc-rewards-h::before, .qc-rewards-h::after {
  content: ''; flex: 1; max-width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.32), transparent);
}
.qc-rewards-list { display: flex; flex-direction: column; gap: 9px; }
.qc-reward {
  display: flex; align-items: center; gap: 14px; padding: 13px 17px;
  background: linear-gradient(90deg, rgba(255,215,0,0.04), var(--surface2) 70%);
  border: 1px solid rgba(255,215,0,0.18); border-radius: 11px; transition: all 0.14s;
  animation: qcReward 0.5s cubic-bezier(0.2,0.7,0.2,1) both;
}
.qc-reward:nth-child(1) { animation-delay: 0.1s; }
.qc-reward:nth-child(2) { animation-delay: 0.18s; }
.qc-reward:nth-child(3) { animation-delay: 0.26s; }
.qc-reward:nth-child(4) { animation-delay: 0.34s; }
.qc-reward:nth-child(5) { animation-delay: 0.42s; }
@keyframes qcReward { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.qc-reward .ico {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; background: rgba(255,215,0,0.10); border: 1px solid rgba(255,215,0,0.28); flex-shrink: 0;
}
.qc-reward.gold .ico { background: rgba(255,215,0,0.16); border-color: rgba(255,215,0,0.42); }
.qc-reward .nm { font-family: var(--font-body); font-weight: 600; font-size: 0.96rem; color: var(--text); flex: 1; min-width: 0; }
.qc-reward .qty { font-family: var(--mono); font-size: 0.86rem; color: var(--gold-soft); letter-spacing: 0.5px; white-space: nowrap; }
.qc-reward .rar {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid; flex-shrink: 0;
}
.qc-reward .rar.common { color: #b9c2cc; border-color: rgba(185,194,204,0.32); }
.qc-reward .rar.uncommon { color: var(--green); border-color: rgba(74,255,158,0.32); }
.qc-reward .rar.rare { color: var(--blue); border-color: rgba(74,158,255,0.32); }
.qc-reward .rar.legendary { color: var(--gold); border-color: rgba(255,215,0,0.42); }
/* app-state additions the mockup didn't depict (preserve existing behavior) */
.qc-empty { font-family: var(--font-read); font-style: italic; color: var(--text-dim); font-size: 0.92rem; text-align: center; padding: 6px 0; }
.qc-cap-note {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.3px; color: var(--amber);
  background: rgba(255,184,74,0.08); border: 1px solid rgba(255,184,74,0.28); border-radius: 8px;
  padding: 7px 11px; margin-top: 10px; text-align: center; line-height: 1.4;
}

/* foot — Claim CTA */
.qc-foot { padding: 18px 28px 26px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.qc-claim {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 2px; text-transform: uppercase;
  padding: 15px 26px; border-radius: 12px; border: none; cursor: pointer; color: #1a1205;
  background: var(--gold-grad); box-shadow: 0 6px 24px -10px rgba(255,200,60,0.7), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform 0.14s, filter 0.14s;
}
.qc-claim:hover { filter: brightness(1.07); transform: translateY(-1px); }
.qc-claim:active { transform: translateY(0); }
.qc-claim:disabled { filter: grayscale(0.4) brightness(0.78); cursor: not-allowed; transform: none; }
.qc-meta { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.5px; color: var(--muted); text-align: center; }

@media (max-width: 600px) {
  .qc-ttl { font-size: 1.6rem; }
  .qc-seal, .qc-body { padding-left: 20px; padding-right: 20px; }
  .qc-rewards, .qc-foot { padding-left: 18px; padding-right: 18px; }
}

/* ===========================================================================
   CREATION DESIGN SYSTEM (.cc-*) — Campaign & Character creation redesign
   (S171, design_handoff_creation). Atmospheric-hearth components reused across
   the campaign-create form (Ship 2), the Workshop builder, and the reskinned
   Wizard. Used inside a `.ss` token scope (which supplies --gold*/--surface*/
   fonts); values ported from the design's creation.css. */
.cc-wrap { max-width: 760px; margin: 0 auto; padding: 40px 28px 80px; }
.cc-wrap.wide { max-width: 980px; }
.cc-h1 { font-family: var(--font-display); font-weight: 700; font-size: 2rem; letter-spacing: 0.5px;
  color: var(--gold); margin: 0; text-shadow: 0 2px 18px rgba(255,180,60,0.18); }
.cc-h1.grad { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cc-sub { color: var(--text-dim); font-size: 0.98rem; line-height: 1.55; margin: 12px 0 0; max-width: 60ch; }
.cc-sub b, .cc-sub strong { color: var(--gold); font-weight: 600; }

.cc-field { margin-bottom: 22px; }
.cc-label { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 9px; display: block; }
.cc-label .opt { color: rgba(241,238,245,0.26); font-weight: 500; letter-spacing: 0.5px; text-transform: none; }
.cc-input, .cc-textarea, .cc-select {
  width: 100%; font-family: var(--font-body); font-size: 0.98rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  padding: 13px 15px; transition: border-color .16s, box-shadow .16s; outline: none; }
.cc-input::placeholder, .cc-textarea::placeholder { color: rgba(241,238,245,0.28); }
.cc-input:focus, .cc-textarea:focus, .cc-select:focus { border-color: rgba(255,215,0,0.5); box-shadow: 0 0 0 3px rgba(255,215,0,0.10); }
.cc-textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.cc-select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23807d86' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; padding-right: 38px; }
.cc-setting-desc { font-size: 0.86rem; color: var(--text-dim); line-height: 1.5; margin: 10px 0 0; padding-left: 12px; border-left: 2px solid rgba(255,215,0,0.4); }

/* segmented control — reuses the existing .radio-option + selectRadio mechanism
   (selectRadio toggles .selected globally by data-group), restyled to the
   design's Seg look so no handler change is needed. */
.cc-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.cc-seg .radio-option { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: var(--text-dim);
  background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  padding: 13px 10px; cursor: pointer; transition: all .15s; text-align: center; }
.cc-seg .radio-option:hover { color: var(--text); border-color: rgba(255,255,255,0.22); }
.cc-seg .radio-option.selected { color: var(--gold); border-color: rgba(255,215,0,0.6);
  background: linear-gradient(180deg, rgba(255,215,0,0.10), rgba(255,215,0,0.03)); box-shadow: inset 0 0 0 1px rgba(255,215,0,0.18); }

.cc-btn { font-family: var(--font-body); font-weight: 600; font-size: 0.92rem;
  padding: 12px 22px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--border-light); background: var(--surface2); color: var(--text);
  transition: all .16s ease; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.cc-btn:hover { background: var(--surface3); border-color: var(--border-light); }
.cc-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cc-btn.gold { background: var(--gold-grad); color: #1a1205; border-color: transparent; font-weight: 700; box-shadow: 0 4px 20px -8px rgba(255,200,60,0.5); }
.cc-btn.gold:hover:not(:disabled) { filter: brightness(1.07); }
.cc-btn.gold:disabled { background: var(--surface2); color: var(--muted); box-shadow: none; }
.cc-btn.ghost { background: rgba(255,215,0,0.06); color: var(--gold-soft); border-color: rgba(255,215,0,0.30); }
.cc-btn.ghost:hover:not(:disabled) { background: rgba(255,215,0,0.13); border-color: rgba(255,215,0,0.5); }
.cc-btn.sm { padding: 8px 13px; font-size: 0.8rem; }
.cc-btn.lg { padding: 14px 30px; font-size: 1rem; }

.cc-ai { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap;
  font-family: var(--font-body); font-weight: 600; font-size: 0.82rem; color: var(--purple);
  background: rgba(167,139,250,0.08); border: 1px solid rgba(167,139,250,0.32);
  padding: 8px 13px; border-radius: var(--radius-sm); transition: all .16s; }
.cc-ai:hover { background: rgba(167,139,250,0.16); }
.cc-ai:disabled { opacity: 0.5; cursor: not-allowed; }
.cc-ai.dice { color: var(--gold-soft); background: rgba(255,215,0,0.07); border-color: rgba(255,215,0,0.3); }
.cc-ai.dice:hover { background: rgba(255,215,0,0.14); }

.cc-mono-note { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); }
.cc-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 32px; }

/* --- creation: split layout / stepper / option cards / live sheet (React Wizard + Workshop) --- */
.cc-ws-host { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); overflow: hidden; }
.cc-ws-split { display: grid; grid-template-columns: minmax(0,1fr) 384px; flex: 1; min-height: 0; }
.cc-ws-main { min-height: 0; overflow-y: auto; }
.cc-ws-inner { max-width: 820px; margin: 0 auto; padding: 28px 30px 80px; }
.cc-2up { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* stepper */
.cc-stepper { display: flex; align-items: flex-start; justify-content: center; gap: 0; padding: 28px 12px 8px; flex-wrap: nowrap; }
.cc-step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.cc-step .node { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.9rem; font-weight: 500; flex-shrink: 0;
  border: 2px solid var(--border-light); background: var(--surface); color: var(--muted); transition: all .25s; }
.cc-step .lab { font-size: 0.7rem; line-height: 1.2; text-align: center; color: var(--muted); max-width: 76px; transition: color .25s; }
.cc-step.active .node { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 4px rgba(255,215,0,0.12); }
.cc-step.active .lab { color: var(--gold); font-weight: 600; }
.cc-step.done .node { border-color: var(--green); color: var(--green); background: rgba(74,255,158,0.08); }
.cc-step.done .lab { color: var(--text-dim); }
.cc-step.clickable { cursor: pointer; }
.cc-cs-hint { font-size: 0.84rem; color: var(--muted); font-style: italic; }
.cc-cs-hint b { color: var(--gold-soft); font-style: normal; font-weight: 600; }

/* option cards (race / class) */
.cc-optgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cc-optgrid.three { grid-template-columns: repeat(3, 1fr); }
.cc-opt { position: relative; text-align: left; cursor: pointer; background: var(--surface);
  border: 1px solid var(--border-light); border-radius: var(--radius); padding: 22px 20px;
  display: flex; flex-direction: column; gap: 8px; transition: transform .16s, border-color .16s, background .16s; }
.cc-opt:hover { transform: translateY(-2px); border-color: rgba(255,215,0,0.4); background: var(--surface2); }
.cc-opt.on { border-color: var(--gold); background: linear-gradient(180deg, rgba(255,215,0,0.08), rgba(255,215,0,0.02));
  box-shadow: 0 0 0 1px rgba(255,215,0,0.3), 0 10px 30px -16px rgba(255,200,60,0.5); }
.cc-opt.locked { cursor: not-allowed; opacity: 0.5; filter: saturate(0.5); }
.cc-opt.locked:hover { transform: none; border-color: var(--border-light); background: var(--surface); }
.cc-opt .ico { font-size: 1.9rem; line-height: 1; }
.cc-opt .nm { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--gold); letter-spacing: 0.4px; }
.cc-opt .role { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--amber); }
.cc-opt .meta { font-size: 0.86rem; color: var(--text-dim); line-height: 1.45; }
.cc-opt .hd { font-family: var(--mono); font-size: 0.78rem; color: var(--text-dim); }
.cc-opt .hd b { color: var(--text); font-weight: 500; }
.cc-opt .pick { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold); color: #1a1205; display: none; align-items: center; justify-content: center; font-size: 0.74rem; font-weight: 800; }
.cc-opt.on .pick { display: flex; }
.cc-soon { position: absolute; top: 12px; right: 12px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--border-light); border-radius: 999px; padding: 3px 9px; }

/* 🔒 / placeholder hint line */
.cc-lock { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; color: var(--muted);
  background: var(--surface); border: 1px dashed var(--border-light); border-radius: var(--radius-sm); padding: 12px 15px; }
.cc-lock .ic { color: var(--gold-soft); }

/* live sheet rail */
.cc-sheet { background: var(--bg2); display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--border); }
.cc-sheet-head { padding: 18px 22px 14px; border-bottom: 1px solid var(--border); }
.cc-sheet-head .t { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold-soft); }
.cc-sheet-head .p { font-size: 0.78rem; color: var(--muted); margin-top: 4px; }
.cc-sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; }
.cc-sheet-pf { width: 100%; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--surface2);
  border: 1px solid var(--border-light); position: relative; display: flex; align-items: center; justify-content: center; }
.cc-sheet-pf img { width: 100%; height: 100%; object-fit: cover; }
.cc-sheet-pf .ph { color: var(--muted); font-size: 0.8rem; text-align: center; padding: 20px; }
.cc-srow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.cc-srow:last-child { border-bottom: none; }
.cc-srow .k { font-size: 0.74rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.cc-srow .v { font-size: 0.95rem; color: var(--text); font-weight: 600; text-align: right; }
.cc-srow .v.pending { color: var(--muted); font-weight: 400; font-style: italic; }
.cc-sheet-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.cc-sheet-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 8px 4px; text-align: center; }
.cc-sheet-stat .k { font-size: 0.6rem; letter-spacing: 1px; color: var(--muted); }
.cc-sheet-stat .v { font-family: var(--mono); font-size: 1.05rem; color: var(--text); }
.cc-sheet-foot { padding: 16px 22px; border-top: 1px solid var(--border); }

/* --- creation: full-screen shell + scroll + stepper lines + tags + CharSelect --- */
/* .cc-root mirrors the design's `.cc` layout (the wizard owns the whole screen,
   flex column, internal scroll), so `.cc-wrap` centers correctly inside it. */
.cc-root { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); overflow: hidden; }
.cc-scroll { flex: 1; min-height: 0; overflow-y: auto; }
/* belt-and-suspenders: guarantee the wizard column stays centered + capped even
   if some app rule shadows the base .cc-wrap max-width (higher specificity). */
.cc-root .cc-wrap { max-width: 760px; margin: 0 auto; }
.cc-root .cc-wrap.wide { max-width: 980px; }
/* Cover-gen uses a BARE .cc-wrap directly under .screen.ss (no .cc-root), so the
   same shadowing rule makes it full-width + unpadded — the header clips to the
   top-left and .cc-nav flings its buttons to the viewport edges. Restore the
   intended cap/center/padding for the direct-child case too (specificity 0,3,0
   beats the shadower; does not touch the .cc-root wizard/workshop column). */
.screen.ss > .cc-wrap { max-width: 760px; margin: 0 auto; padding: 40px 28px 80px; }
.screen.ss > .cc-wrap.wide { max-width: 980px; }
.cc-stepline { flex: 0 1 46px; height: 2px; margin: 18px -2px 0; background: var(--border-light); align-self: flex-start; transition: background .25s; }
.cc-stepline.done { background: var(--green); }

.cc-tag { font-size: 0.74rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: rgba(255,215,0,0.08); color: var(--gold-soft); border: 1px solid rgba(255,215,0,0.22); }
.cc-tag.purple { background: rgba(167,139,250,0.1); color: var(--purple); border-color: rgba(167,139,250,0.28); }
.cc-tag.green { background: rgba(74,255,158,0.08); color: var(--green); border-color: rgba(74,255,158,0.24); }

/* CharSelect — race/class cinematic picker (left list + right splash) */
.cc-cs { display: grid; grid-template-columns: 256px 1fr; gap: 18px; align-items: start; }
.cc-cs-list { display: flex; flex-direction: column; gap: 8px; max-height: 488px; overflow-y: auto; padding-right: 4px; }
.cc-cs-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; transition: all .14s; text-align: left; }
.cc-cs-row:hover { border-color: rgba(255,215,0,0.42); background: var(--surface2); transform: translateX(2px); }
.cc-cs-row.on { border-color: var(--gold); background: linear-gradient(90deg, rgba(255,215,0,0.12), transparent 80%); }
.cc-cs-row.locked { opacity: 0.42; cursor: not-allowed; }
.cc-cs-row.locked:hover { transform: none; border-color: var(--border-light); background: var(--surface); }
.cc-cs-row .ic { font-size: 1.5rem; flex-shrink: 0; transition: filter .15s; }
.cc-cs-row:hover .ic { filter: drop-shadow(0 0 6px rgba(255,215,0,0.55)); }
.cc-cs-row.on .ic { filter: drop-shadow(0 0 7px rgba(255,215,0,0.7)); }
.cc-cs-row.locked:hover .ic { filter: none; }
.cc-cs-row .nm { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 1rem; display: block; line-height: 1.1; }
.cc-cs-row.on .nm { color: var(--gold); }
.cc-cs-row .mt { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); white-space: nowrap; }
.cc-cs-row .seltick { margin-left: auto; color: var(--gold); font-weight: 800; flex-shrink: 0; }
.cc-cs-row .soon { margin-left: auto; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border-light); border-radius: 999px; padding: 2px 7px; flex-shrink: 0; }
/* Fixed splash height per kind so the preview panel never resizes ("bounces") as
   you hover through the list — class/race blurbs + the What-to-expect / Level-1
   boxes vary in length, so a min-height let the panel grow per option. Heights are
   sized to the tallest-rendered option (+ headroom) so nothing clips; shorter
   options show breathing room with the CTA pinned to the bottom (Tyler S232). */
.cc-cs-splash { position: relative; border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; background: var(--surface); }
.cc-cs--class .cc-cs-splash { height: 730px; }
.cc-cs--race .cc-cs-splash { height: 496px; }
.cc-cs-art { position: relative; height: 240px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate; background: radial-gradient(120% 90% at 50% 8%, #1d1a26 0%, #15131c 46%, #0d0c12 100%); box-shadow: inset 0 0 90px rgba(0,0,0,0.55); }
.cc-cs-art::before { content: ""; position: absolute; inset: 0; opacity: 0.32; pointer-events: none; background: radial-gradient(58% 72% at 50% 24%, var(--tint, #FFD700), transparent 60%), radial-gradient(80% 60% at 50% 100%, color-mix(in srgb, var(--tint, #FFD700) 40%, transparent), transparent 70%); }
.cc-cs-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none; background: linear-gradient(transparent, var(--surface)); }
/* Painted splash key-art behind the medallion (M6 creation splash —
   art/creation/splash/<kind>-<id>.webp, scripts/gen-creation-splash.mjs).
   z-index: -1 inside the isolated .cc-cs-art context slots the image above the
   niche's own radial background but UNDER every existing layer (tint ::before,
   fade-to-surface ::after, medallion) — the niche keeps framing exactly as
   before, art or no art. The brightness pull-down + radial edge mask (fading
   the art into the dark niche) stand in for the inset box-shadow vignette the
   opaque image would otherwise cover, so the medallion + per-class tint still
   read on top. On 404 the island unmounts the img (imgErr) → today's tinted
   niche, untouched. */
.cc-cs-art .splash-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; pointer-events: none; filter: brightness(0.78) saturate(0.95); -webkit-mask-image: radial-gradient(130% 115% at 50% 42%, #000 52%, transparent 98%); mask-image: radial-gradient(130% 115% at 50% 42%, #000 52%, transparent 98%); }
/* Medallion — 168px circle (bumped from 122px in S173 Slice 1 review for stronger
   presence in the splash). The art container grew to 240px to keep the medallion
   visually balanced against the radial tint backdrop + fade-to-surface footer. */
.cc-cs-medallion { position: relative; z-index: 1; width: 168px; height: 168px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(255,255,255,0.08), #100f15 78%); border: 2px solid var(--tint, #FFD700); box-shadow: 0 0 48px -8px var(--tint, #FFD700), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 30px rgba(0,0,0,0.55); overflow: hidden; }
.cc-cs-medallion .emblem { font-size: 4.6rem; line-height: 1; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.6)); }
/* Class sigil / race portrait — webp asset clipped to the medallion circle.
   object-fit: cover fills the circle. Assets ship with painted content edge-to-edge
   (Human-female was ffmpeg-cropped to its painted-circle bbox at integration time).
   Slice 1 (S173); see docs/design/ui-redesign/class-race-icons-design.md. */
.cc-cs-medallion img.emblem { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* Rail-row chip — 2.4rem (~38px) circle so painted sigils/portraits keep enough
   detail to read against the colorful emoji rows. brightness+saturate lifts the
   painted gold-and-iron palette out of the dark row background; on the active
   row a stronger gold halo replaces the lift. Bumped in S173 Slice 1 review;
   prior 1.5rem made painted sigils look "muted" next to emoji classes. */
.cc-cs-row img.ic { width: 2.4rem; height: 2.4rem; object-fit: cover; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255,215,0,0.18); filter: brightness(1.18) saturate(1.08); transition: filter .15s, border-color .15s; }
.cc-cs-row:hover img.ic { filter: brightness(1.28) saturate(1.15) drop-shadow(0 0 7px rgba(255,215,0,0.55)); border-color: rgba(255,215,0,0.45); }
.cc-cs-row.on img.ic { filter: brightness(1.32) saturate(1.2) drop-shadow(0 0 9px rgba(255,215,0,0.7)); border-color: var(--gold); }
.cc-cs-info { padding: 18px 26px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; min-height: 0; }
.cc-cs-titlerow { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cc-cs-info .nm { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: #fff; margin: 0; line-height: 1; text-shadow: 0 2px 20px rgba(0,0,0,0.6); }
.cc-cs-role { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--amber); }
.cc-cs-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-cs-blurb { font-family: var(--font-read); font-style: italic; font-size: 1rem; color: var(--text-dim); line-height: 1.55; margin: 0; }
.cc-cs-play { display: flex; flex-direction: column; gap: 4px; padding: 12px 15px; border-radius: var(--radius-sm); background: var(--surface2); border: 1px solid var(--border); }
.cc-cs-play .lab { font-family: var(--font-body); font-size: 0.62rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--amber); }
.cc-cs-play .txt { font-size: 0.92rem; color: var(--text-dim); line-height: 1.5; }
.cc-cs-feat { display: flex; align-items: baseline; gap: 12px; padding: 12px 15px; border-radius: var(--radius-sm); background: var(--surface2); border: 1px solid var(--border); }
.cc-cs-feat .fl { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); flex-shrink: 0; }
.cc-cs-feat .fv { font-weight: 600; color: var(--gold-soft); font-size: 0.94rem; }
/* Starting-gear preview (class cards) — the L1 loadout the player will receive,
   shown as compact chips so they can compare loadouts while choosing (S232). */
.cc-cs-gear { display: flex; flex-direction: column; gap: 7px; }
.cc-cs-gear .lab { font-family: var(--font-body); font-size: 0.62rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--amber); }
.cc-cs-gear .items { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-cs-gear .gchip { font-size: 0.78rem; color: var(--text-dim); background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 9px; }
.cc-cs-cta { margin-top: auto; padding-top: 6px; }

/* creation: personality panel + portrait (Appearance & Portrait steps) */
.cc-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.cc-panel + .cc-panel { margin-top: 18px; }
.cc-panelhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cc-panelhead .t { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--gold-soft); letter-spacing: 0.5px; }
.cc-panelhead .t .opt { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; font-weight: 500; margin-left: 8px; }
.cc-portrait { width: 280px; height: 280px; border-radius: var(--radius); overflow: hidden; margin: 0 auto; border: 2px solid rgba(255,215,0,0.4); box-shadow: 0 18px 50px -20px rgba(0,0,0,0.8); position: relative; background: var(--surface2); display: flex; align-items: center; justify-content: center; }
.cc-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-portrait.gen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,215,0,0.18) 50%, transparent 70%); background-size: 220% 100%; animation: ccShimmer 1.1s linear infinite; }
@keyframes ccShimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .cc-portrait.gen::after { animation: none; } }

/* creation: Review card */
.cc-statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.cc-statbox { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 8px; text-align: center; }
.cc-statbox .k { font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 1.2px; color: var(--muted); }
.cc-statbox .v { font-family: var(--mono); font-size: 1.3rem; font-weight: 500; color: var(--text); margin-top: 2px; }
.cc-statbox .m { font-family: var(--mono); font-size: 0.7rem; color: var(--gold-soft); }
.cc-rev-hero { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 22px; }
.cc-rev-hero .pf { width: 150px; height: 150px; border-radius: var(--radius); overflow: hidden; border: 2px solid rgba(255,215,0,0.5); flex-shrink: 0; }
.cc-rev-hero .pf img { width: 100%; height: 100%; object-fit: cover; }
.cc-rev-hero .pf .ph { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: 0.8rem; }
.cc-rev-id .nm { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--gold); margin: 0; line-height: 1; }
.cc-rev-id .sub { color: var(--text-dim); margin: 6px 0 10px; }
.cc-rev-vitals { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 14px; }
.cc-vital { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 9px 6px; text-align: center; }
.cc-vital .vk { font-size: 0.58rem; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.cc-vital .vv { font-family: var(--mono); font-size: 1.05rem; color: var(--text); margin-top: 3px; }
.cc-vital .vv.green { color: var(--green); }
.cc-rev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.cc-rev-sec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.cc-rev-h { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 12px; }
.cc-saverow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cc-save { display: flex; align-items: center; gap: 7px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 8px 10px; }
.cc-save .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--surface3); border: 1px solid var(--border-light); flex-shrink: 0; }
.cc-save.prof .dot { background: var(--gold); border-color: var(--gold); }
.cc-save .sk { font-size: 0.72rem; letter-spacing: 0.5px; color: var(--text-dim); }
.cc-save .sv { font-family: var(--mono); font-size: 0.84rem; color: var(--text); margin-left: auto; }
.cc-save.prof .sv { color: var(--gold-soft); }
.cc-skilllist { display: flex; flex-direction: column; gap: 6px; }
.cc-skillrow { display: flex; align-items: center; gap: 10px; padding: 7px 11px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-xs); }
.cc-skillrow .sn { font-weight: 600; font-size: 0.9rem; color: var(--text); }
.cc-skillrow .sa { font-family: var(--mono); font-size: 0.64rem; color: var(--muted); }
.cc-skillrow .sm { font-family: var(--mono); font-size: 0.84rem; color: var(--gold-soft); margin-left: auto; }
.cc-persona { display: flex; flex-direction: column; gap: 8px; }
.cc-persona .pr { display: flex; gap: 12px; align-items: baseline; }
.cc-persona .pl { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); width: 52px; flex-shrink: 0; }
.cc-persona .pr > span:last-child { color: var(--text-dim); font-size: 0.92rem; line-height: 1.45; }
@media (max-width: 820px) { .cc-rev-vitals { grid-template-columns: repeat(3, 1fr); } .cc-rev-grid { grid-template-columns: 1fr; } }

/* creation: Ability Scores step (standard-array chips + 3-col ability grid) */
.cc-arraychips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.cc-arraychip { font-family: var(--mono); font-size: 0.92rem; padding: 6px 13px; border-radius: 8px; border: 1px solid var(--border-light); background: var(--surface); color: var(--text); transition: opacity .15s; }
.cc-arraychip.used { opacity: 0.3; text-decoration: line-through; }
.cc-abilrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cc-abil { display: flex; flex-direction: column; gap: 8px; }
.cc-abil .ak { font-family: var(--font-body); font-size: 0.74rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-dim); }
.cc-abil.primary .ak { color: var(--gold); font-weight: 700; }
.cc-abil .mod { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); }
@media (max-width: 700px) { .cc-abilrow { grid-template-columns: repeat(2, 1fr); } }

/* === Level-1 choices modal + list-pick rows (React creation island) =======
   Ported from project_redesign/creation/creation.css; design --accent* tokens
   translated to our .ss --gold* scope (--accent → --gold etc.). */
/* NOTE: .cc-root is already `position: absolute; inset: 0` (line ~5140) — a
   positioned ancestor — so .cc-modal-scrim's absolute inset:0 resolves against
   the full island. Do NOT re-declare .cc-root position here (it overrode the
   absolute → collapsed the island to a small box + broke the modal; v1.8.1221). */
.cc-rows { display: flex; flex-direction: column; gap: 8px; }
.cc-rows.cc-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cc-prow { text-align: left; cursor: pointer; background: var(--surface2); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 12px 15px; transition: all .14s; }
.cc-prow:hover { border-color: rgba(255,215,0,0.4); }
.cc-prow.on { border-color: var(--gold); background: linear-gradient(180deg, rgba(255,215,0,0.08), rgba(255,215,0,0.02)); }
.cc-prow.disabled { opacity: 0.4; cursor: not-allowed; }
.cc-prow .nm { font-weight: 600; font-size: 0.96rem; color: var(--text); }
.cc-prow.on .nm { color: var(--gold); }
.cc-prow .sub { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.cc-pickhint { font-size: 0.8rem; color: var(--muted); margin-bottom: 12px; }

.cc-modal-scrim { position: absolute; inset: 0; z-index: 40; background: rgba(4,3,6,0.72); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 32px; animation: ccFade .2s ease; }
@keyframes ccFade { from { opacity: 0; } to { opacity: 1; } }
.cc-modal { width: min(760px, 100%); max-height: 88%; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,0.9); overflow: hidden; }
.cc-modal.lg { width: min(880px, 100%); }
.cc-modal-head { padding: 24px 28px 0; }
.cc-modal-body { padding: 18px 28px; overflow-y: auto; }
.cc-modal-foot { padding: 18px 28px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.cc-meter { height: 5px; border-radius: 3px; background: var(--surface3); overflow: hidden; }
.cc-meter > i { display: block; height: 100%; background: var(--gold-grad); border-radius: 3px; transition: width .4s ease; }

.cc-l1emblem { font-size: 1.5rem; }
.cc-l1prog { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.cc-l1sec { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg2); margin-bottom: 14px; overflow: hidden; }
.cc-l1sec.done { border-color: rgba(74,255,158,0.25); }
.cc-l1head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.cc-l1head .ix { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border-light); color: var(--muted);
  display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.8rem; flex-shrink: 0; }
.cc-l1sec.done .cc-l1head .ix { border-color: var(--green); color: var(--green); background: rgba(74,255,158,0.08); }
.cc-l1head .tt { min-width: 0; flex: 1; }
.cc-l1head .t { font-family: var(--font-display); font-weight: 600; color: var(--gold); font-size: 1rem; }
.cc-l1head .h { font-size: 0.78rem; color: var(--muted); margin-top: 1px; }
.cc-l1head .ct { font-family: var(--mono); font-size: 0.76rem; color: var(--muted); border: 1px solid var(--border-light);
  border-radius: 999px; padding: 3px 10px; flex-shrink: 0; }
.cc-l1head .ct.ok { color: var(--green); border-color: rgba(74,255,158,0.3); }
.cc-l1body { padding: 14px 16px; }

/* class-step entry card that opens the L1 modal */
.cc-l1entry { width: 100%; margin-top: 20px; display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--gold); border-radius: var(--radius-sm); padding: 16px 18px; transition: all .14s; }
.cc-l1entry:hover { background: linear-gradient(180deg, rgba(255,215,0,0.08), rgba(255,215,0,0.02)); }
.cc-l1entry.done { border-color: rgba(74,255,158,0.4); }
.cc-l1entry .ic { font-size: 1.3rem; flex-shrink: 0; color: var(--gold); }
.cc-l1entry.done .ic { color: var(--green); }
.cc-l1entry .tt { flex: 1; min-width: 0; }
.cc-l1entry .t { font-family: var(--font-display); font-weight: 600; color: var(--gold); font-size: 1.02rem; }
.cc-l1entry .h { font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
.cc-btn.sm { padding: 7px 14px; font-size: 0.85rem; flex-shrink: 0; }

@media (max-width: 700px) { .cc-rows.cc-grid2 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cc-modal-scrim { animation: none; } .cc-meter > i { transition: none; } }

/* === App shell — top-bar with mode toggle (Guided ⇄ Workshop) ==============
   Ported from project_redesign/creation/creation.css; --accent → --gold scope. */
.cc-stage { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cc-topbar { display: flex; align-items: center; gap: 16px; padding: 14px 24px; flex-shrink: 0;
  border-bottom: 1px solid var(--border); background: rgba(8,7,10,0.92); z-index: 2; }
.cc-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: 1px; white-space: nowrap;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.cc-brand .sm { font-family: var(--font-body); -webkit-text-fill-color: var(--muted); color: var(--muted);
  font-weight: 400; font-size: 0.85rem; letter-spacing: 0.5px; margin-left: 12px; text-transform: uppercase; }
.cc-spacer { flex: 1; }
.cc-dirswitch { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--border-light);
  border-radius: 999px; padding: 4px; }
.cc-dirswitch button { font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; color: var(--text-dim); white-space: nowrap;
  padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: all .14s; background: transparent; border: none; display: inline-flex; align-items: center; gap: 6px; }
.cc-dirswitch button:hover { color: var(--text); }
.cc-dirswitch button.on { color: #1a1205; background: var(--gold-grad); font-weight: 700; }

/* === Workshop direction (single-screen builder) — React creation island ====
   Ported from project_redesign/creation/creation.css; design --accent* tokens
   translated to our --gold* scope to match the existing cc-* block above. */
.cc-picklabel { font-family: var(--font-display); font-size: 1.05rem; color: var(--gold-soft); margin: 22px 0 6px; font-weight: 600; }
.cc-pickhint { font-size: 0.8rem; color: var(--muted); margin-bottom: 12px; }

.cc-chipbtn { font-family: var(--font-body); font-size: 0.84rem; color: var(--gold-soft); cursor: pointer;
  background: rgba(255,215,0,0.06); border: 1px solid rgba(255,215,0,0.28); border-radius: 999px; padding: 6px 12px; transition: all .14s; }
.cc-chipbtn:hover { background: rgba(255,215,0,0.14); }

/* intro + jump grid */
.cc-ws-intro { margin-bottom: 22px; }
.cc-ws-jump { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.cc-ws-jump button { font-family: var(--font-body); font-size: 0.78rem; color: var(--text-dim); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-light); border-radius: 999px; padding: 6px 13px; transition: all .14s; display: inline-flex; align-items: center; gap: 6px; }
.cc-ws-jump button:hover { color: var(--text); border-color: rgba(255,215,0,0.4); }
.cc-ws-jump button.done { color: var(--text); border-color: rgba(74,255,158,0.3); }
.cc-ws-jump button .tick { color: var(--green); font-size: 0.7rem; }
.cc-ws-jump button .num { font-family: var(--mono); color: var(--muted); font-size: 0.7rem; }

/* collapsible section cards */
.cc-sec { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 16px; overflow: hidden; scroll-margin-top: 14px; }
.cc-sec.done { border-color: rgba(74,255,158,0.22); }
.cc-sechead { display: flex; align-items: center; gap: 14px; padding: 18px 22px; cursor: pointer; user-select: none; }
.cc-sechead .idx { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.82rem; border: 2px solid var(--border-light); color: var(--muted); }
.cc-sec.done .cc-sechead .idx { border-color: var(--green); color: var(--green); background: rgba(74,255,158,0.08); }
.cc-sechead .ttl { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--gold); letter-spacing: 0.4px; }
.cc-sechead .summ { font-size: 0.85rem; color: var(--text-dim); margin-top: 2px; }
.cc-sechead .summ.empty { color: var(--muted); font-style: italic; }
.cc-sechead .chev { margin-left: auto; color: var(--muted); font-size: 0.7rem; transition: transform .2s; flex-shrink: 0; }
.cc-sec.open .cc-sechead .chev { transform: rotate(90deg); }
.cc-secbody { padding: 0 22px 22px; }
.cc-secbody.tight { padding-top: 4px; }
.cc-sec-confirm { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.cc-sec-confirm .cc-btn:disabled { opacity: 0.4; }

/* === Campaign-create CoverGen step (S172) — between New Campaign and Character.
   Auto-gens the cover, shows the brief in a mono panel, reuses the cover-
   feedback modal for ⟳ regenerate. Ported from project_redesign/creation/
   creation.css. */
.cc-cover-stage { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 8px; }
.cc-cover { width: 100%; max-width: 620px; aspect-ratio: 16/10; border-radius: var(--radius); overflow: hidden;
  position: relative; border: 1px solid var(--border-light); background: var(--surface2); }
.cc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-cover .name-grad { position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(8,7,10,0.9)); }
.cc-cover .cname { position: absolute; left: 20px; right: 20px; bottom: 16px; font-family: var(--font-display); font-weight: 700;
  font-size: 1.35rem; line-height: 1.12; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,0.9); }
.cc-cover.gen::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,215,0,0.16) 50%, transparent 70%);
  background-size: 220% 100%; animation: ccShimmer 1.1s linear infinite; }
.cc-coverbrief { font-family: var(--mono); font-size: 0.82rem; color: var(--text-dim); line-height: 1.5;
  background: var(--surface); border: 1px solid var(--border); border-left: 2px solid rgba(255,215,0,0.4);
  border-radius: var(--radius-sm); padding: 13px 16px; max-width: 620px; width: 100%; box-sizing: border-box; }
.cc-coverbrief .lab { color: var(--muted); letter-spacing: 1px; text-transform: uppercase; font-size: 0.66rem; }
@media (prefers-reduced-motion: reduce) { .cc-cover.gen::after { animation: none; } }

@media (max-width: 1080px) { .cc-ws-split { grid-template-columns: 1fr; } .cc-sheet { border-left: none; border-top: 1px solid var(--border); } }

/* ===========================================================================
   CAMPAIGNS / LOBBY redesign — "Game Library" (Option B), S166 handoff
   (docs/design/project_redesign/design_handoff_campaigns_lobby). Scoped under .cl so the
   generic component names (.panel/.tag/.status/.camp-tile/etc.) never leak.
   #lobby carries class="cl"; display stays owned by the .screen system
   (so .cl never sets `display`, which would defeat .screen{display:none}).
   =========================================================================== */
#lobby.cl {
  --cl-bg: #08070a;
  --cl-surface: #121117; --cl-surface2: #1a1922; --cl-surface3: #23222e;
  --cl-border: rgba(255,255,255,0.08); --cl-border-light: rgba(255,255,255,0.14);
  --cl-text: #f1eef5; --cl-dim: rgba(241,238,245,0.62); --cl-muted: rgba(241,238,245,0.36);
  --cl-gold: #FFD700; --cl-gold-soft: #FFE8A0;
  --cl-gold-grad: linear-gradient(135deg, #FFD700 0%, #FFE88A 32%, #FFD700 52%, #CC9900 100%);
  --cl-green: #4AFF9E; --cl-blue: #4A9EFF; --cl-amber: #FFB84A; --cl-danger: #FF6B6B;
  --cl-radius: 16px; --cl-radius-sm: 11px; --cl-radius-xs: 7px;
  --cl-mono: 'DM Mono', ui-monospace, Menlo, monospace;
  position: relative; flex-direction: column; overflow: hidden;
  /* Override the legacy #lobby container caps so the redesign is full-bleed
     (the old rule set padding:40px; max-width:1600px; margin:0 auto; gap:32px).
     FIXED height (not just min-height) so the header + rail stay put and the
     campaign grid + rail scroll independently inside. */
  padding: 0; margin: 0; width: 100%; max-width: none; gap: 0;
  height: 100vh; height: 100dvh;
  /* Solid base; the wood texture (.cl-texture) supplies the warmth. The
     handoff's orange radial glows were a no-texture flourish — they fought the
     texture and made the top band uneven, so they're dropped. */
  background: var(--cl-bg);
  color: var(--cl-text); font-family: var(--font-body); -webkit-font-smoothing: antialiased;
}
/* Wood-grain background texture (art/lobby/wood.webp) — full-bleed layer behind
   all content; cards/panels stay opaque on top. Exact spec from the design. */
.cl .cl-texture { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.22; mix-blend-mode: normal; }
.cl .cl-texture-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-head, .cl-body { position: relative; z-index: 1; }
.cl ::-webkit-scrollbar { width: 9px; height: 9px; }
.cl ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 6px; }
.cl ::-webkit-scrollbar-track { background: transparent; }

/* Header */
.cl-head { display: flex; align-items: center; gap: 18px; padding: 20px 28px; flex-shrink: 0;
  border-bottom: 1px solid var(--cl-border); background: linear-gradient(180deg, rgba(255,180,60,0.04), transparent); }
.cl-title { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; letter-spacing: 0.5px;
  background: var(--cl-gold-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--cl-gold); filter: drop-shadow(0 1px 8px rgba(255,170,50,0.25)); margin: 0; }
.cl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cl-green); box-shadow: 0 0 8px var(--cl-green); flex-shrink: 0; }
.cl-badge { font-family: var(--cl-mono); font-size: 0.72rem; letter-spacing: 0.3px; color: var(--cl-dim);
  background: var(--cl-surface2); border: 1px solid var(--cl-border); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.cl-spacer { flex: 1; }
.cl-online-inline { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--cl-dim); white-space: nowrap; }
.cl-online-inline .who { color: var(--cl-text); font-weight: 600; }
.cl-btn { font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; padding: 10px 18px;
  border-radius: var(--cl-radius-sm); cursor: pointer; border: 1px solid transparent; transition: all .2s ease;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.cl-btn-primary { background: var(--cl-gold-grad); color: #1a1205; box-shadow: 0 2px 14px rgba(255,180,50,0.18); }
.cl-btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.cl-btn-ghost { background: var(--cl-surface2); color: var(--cl-text); border-color: var(--cl-border-light); }
.cl-btn-ghost:hover { background: var(--cl-surface3); }
.cl-btn-sm { padding: 7px 13px; font-size: 0.82rem; }
/* M4 social — Social-button notification badge (count of unread DMs + requests + invites + approvals) */
.cl-navbtn { position: relative; }
.cl-navbadge { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #FF6B6B; color: #fff; font-size: 0.6rem; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.5); pointer-events: none; }
.cl-devtoggle { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--cl-amber);
  background: rgba(255,184,74,0.08); border: 1px solid rgba(255,184,74,0.28); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: all .2s; }
.cl-devtoggle:hover { background: rgba(255,184,74,0.15); }
.cl-devtoggle .sw { width: 26px; height: 15px; border-radius: 999px; background: rgba(255,184,74,0.3); position: relative; }
.cl-devtoggle .sw::after { content:""; position:absolute; top:2px; left:2px; width:11px; height:11px; border-radius:50%; background:var(--cl-amber); transition:left .2s; }
.cl-devtoggle.on .sw::after { left: 13px; }

/* Body + Library layout */
.cl-body { flex: 1; min-height: 0; overflow: hidden; }
.cl .lay-lib { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 22px; padding: 22px 28px; height: 100%; overflow: hidden; }
.cl .lib-main { min-height: 0; overflow-y: auto; padding-bottom: 8px; }
.cl .lib-section-title { font-family: var(--font-display); font-size: 0.82rem; line-height: 1; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cl-dim); margin: 0 0 14px; }
.cl .camp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
/* margin-top ≈ the "Your Campaigns" label footprint (0.82rem + 14px) so the
   Online panel lines up with the first campaign tile, not the label. */
.cl .lib-rail { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding-bottom: 8px; margin-top: 27px; }
/* Don't let the flex column shrink panels (that clipped expanded Patch Notes +
   the Dev panel) — panels keep natural height and the RAIL scrolls instead. */
.cl .lib-rail > .panel { flex-shrink: 0; }
@media (max-width: 920px) { .cl .lay-lib { grid-template-columns: 1fr; } .cl .camp-grid { grid-template-columns: 1fr; } .cl .lib-rail { margin-top: 0; } }
/* Maintenance banner pushes content down 64px — shrink the lobby to match. */
body.maint-banner-visible #lobby.cl { height: calc(100vh - 64px); height: calc(100dvh - 64px); }

/* Panels (Online / Roadmap / Patch / Developer) */
.cl .panel { background: var(--cl-surface); border: 1px solid var(--cl-border); border-radius: var(--cl-radius); display: flex; flex-direction: column; min-height: 0; }
.cl .panel-head { display: flex; align-items: center; gap: 8px; padding: 13px 15px; border-bottom: 1px solid var(--cl-border); }
.cl .panel.collapsible > .panel-head { width: 100%; cursor: pointer; background: transparent; border-left: 0; border-right: 0; border-top: 0; font: inherit; color: inherit; text-align: left; }
.cl .panel.collapsible:not(.open) > .panel-head { border-bottom: 0; }
.cl .panel.collapsible > .panel-head:hover { background: rgba(255,255,255,0.02); }
.cl .panel-chev { margin-left: auto; color: var(--cl-muted); font-size: 0.8rem; transition: transform .2s ease; }
.cl .panel.open .panel-chev { transform: rotate(90deg); }
.cl .panel.collapsible:not(.open) > .panel-body { display: none; }
.cl .panel-head .ico { font-size: 0.95rem; }
.cl .panel-head h3 { font-family: var(--font-display); font-size: 0.92rem; letter-spacing: 0.5px; color: var(--cl-gold-soft); margin: 0; flex: 1; }
.cl .panel-head .pill { font-size: 0.66rem; color: var(--cl-dim); background: var(--cl-surface2); border: 1px solid var(--cl-border); border-radius: 999px; padding: 2px 8px; }
.cl .panel-body { padding: 12px 14px; overflow-y: auto; font-size: 0.85rem; color: var(--cl-dim); }
/* (S211) the server-wide .online-panel / .online-row rail styles were removed with the panel —
   the Friends summary card (.fr-sum-*) replaces it. */
/* M4 social — lobby rail "Friends" summary card. */
.cl .fr-sum-line { font-size: 0.84rem; color: var(--cl-text); }
.cl .fr-sum-line b { color: var(--cl-gold-soft); }
.cl .fr-sum-avs { display: flex; align-items: center; gap: 5px; margin: 10px 0; flex-wrap: wrap; }
.cl .fr-sum-av { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; color: #0a0a0f; flex-shrink: 0; box-shadow: 0 0 0 2px var(--cl-surface); }
.cl .fr-sum-more { font-size: 0.74rem; color: var(--cl-muted); font-weight: 600; margin-left: 2px; }
.cl .fr-sum-open { width: 100%; margin-top: 4px; padding: 8px 10px; background: var(--cl-surface2); border: 1px solid var(--cl-border); border-radius: var(--cl-radius-xs); color: var(--cl-gold-soft); font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.4px; cursor: pointer; transition: all .15s ease; }
.cl .fr-sum-open:hover { border-color: rgba(255,215,0,0.4); background: rgba(255,215,0,0.06); }
/* Patch-notes rows re-skinned to the new panel tokens (the renderer's
   .patch-release markup lost its old scoped styling in the redesign). */
.cl .panel-body .patch-release { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--cl-border); }
.cl .panel-body .patch-release:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.cl .panel-body .patch-release-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
.cl .panel-body .patch-release-ver { font-family: var(--font-display); color: var(--cl-gold-soft); font-size: 0.9rem; }
.cl .panel-body .patch-release-date { font-family: var(--cl-mono); font-size: 0.68rem; color: var(--cl-muted); }
.cl .panel-body .patch-new-badge { font-size: 0.6rem; font-weight: 700; color: #1a1205; background: var(--cl-gold); border-radius: 5px; padding: 1px 6px; letter-spacing: 0.5px; text-transform: uppercase; }
.cl .panel-body .patch-release ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 6px; }
.cl .panel-body .patch-release li { line-height: 1.45; font-size: 0.8rem; color: var(--cl-dim); }
.cl .panel-body .patch-release li::marker { color: var(--cl-gold); }

/* Campaign tiles */
.cl .camp-tile { position: relative; display: flex; flex-direction: column; cursor: pointer; background: var(--cl-surface);
  border: 1px solid var(--cl-border); border-radius: var(--cl-radius); overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; }
.cl .camp-tile:hover { border-color: rgba(255,215,0,0.4); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.cl .tile-cover { position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; }
.cl .tile-cover .crest-art-default { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .4s ease; }
.cl .camp-tile:hover .tile-cover .crest-art-default { transform: scale(1.05); }
.cl .crest-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; overflow: hidden; }
.cl .tile-cover .crest-fallback::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 10px); }
.cl .tile-cover .crest-fallback::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 75% 65% at 50% 38%, transparent 28%, rgba(0,0,0,0.5)); }
.cl .crest-sigil { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 7px; transform: rotate(45deg); background: linear-gradient(135deg, #FFE88A, #CC9900); opacity: 0.92; box-shadow: 0 0 20px rgba(255,205,110,0.4); }
.cl .crest-sigil::after { content: ""; position: absolute; inset: -9px; border-radius: 11px; border: 1px solid rgba(255,215,140,0.28); }
.cl .crest-cap { position: relative; z-index: 1; font-family: var(--cl-mono); font-size: 0.62rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,224,176,0.5); }
.cl .tile-cover::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 45%, rgba(8,7,10,0.85)); z-index: 2; }
.cl .tile-cover-name { position: absolute; left: 14px; bottom: 11px; z-index: 3; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.8); }
.cl .tile-cover-lock { position: absolute; top: 11px; left: 11px; z-index: 5; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; font-size: 0.8rem; background: rgba(10,8,12,0.62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border: 1px solid var(--cl-border-light); }
/* ⟳ regenerate cover (rate-limited once/24h, server-enforced) — icon-only at rest, label on hover */
/* Bottom-right of the cover (opposite the name, clear of the top-right ⋯ menu). */
.cl .cover-regen-wrap { position: absolute; bottom: 10px; right: 10px; z-index: 4; }
.cl .cover-regen-tip { position: absolute; bottom: calc(100% + 8px); right: 0; width: 198px; background: rgba(10,8,12,0.96); border: 1px solid var(--cl-border-light); border-radius: 8px; padding: 8px 11px; font-size: 0.72rem; line-height: 1.4; color: var(--cl-dim); opacity: 0; pointer-events: none; transition: opacity .15s; box-shadow: 0 8px 24px rgba(0,0,0,0.55); z-index: 30; }
.cl .cover-regen-wrap:hover .cover-regen-tip { opacity: 1; }
.cl .cover-regen { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; color: var(--cl-gold-soft); background: rgba(10,8,12,0.62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border: 1px solid rgba(255,215,0,0.32); border-radius: 999px; padding: 5px 10px; cursor: pointer; opacity: 0.85; transition: opacity .2s, background .2s, border-color .2s; }
.cl .tile-cover:hover .cover-regen { opacity: 1; }
.cl .cover-regen:hover:not(:disabled) { background: rgba(255,180,50,0.2); border-color: rgba(255,200,90,0.65); }
.cl .cover-regen:active:not(:disabled) .ic { transform: rotate(180deg); }
.cl .cover-regen:disabled { color: var(--cl-muted); border-color: var(--cl-border); background: rgba(10,8,12,0.62); cursor: not-allowed; opacity: 0.7; }
.cl .cover-regen .ic { font-size: 0.9rem; line-height: 1; transition: transform .3s ease; }
.cl .cover-regen-count { font-family: var(--cl-mono); opacity: 0.85; display: none; }
.cl .tile-cover:hover .cover-regen-count { display: inline; }

/* ===========================================================================
   PRE-GAME LOBBY (session staging) — .pg design system (Direction D).
   Shares the atmospheric-hearth language with the Campaigns lobby (.cl).
   #session-lobby carries .pg as a full-viewport overlay (replaces the legacy
   .session-lobby positioning). Scoped under .pg.
   =========================================================================== */
.pg {
  --bg: #08070a; --surface: #121117; --surface2: #1a1922; --surface3: #23222e;
  --border: rgba(255,255,255,0.08); --border-light: rgba(255,255,255,0.14);
  --text: #f1eef5; --text-dim: rgba(241,238,245,0.62); --muted: rgba(241,238,245,0.36);
  --gold: #FFD700; --gold-soft: #FFE8A0;
  --gold-grad: linear-gradient(135deg, #FFD700 0%, #FFE88A 32%, #FFD700 52%, #CC9900 100%);
  --danger: #FF6B6B; --green: #4AFF9E; --blue: #4A9EFF; --purple: #A78BFA; --amber: #FFB84A;
  --radius: 16px; --radius-sm: 11px; --radius-xs: 7px;
  --font-display: 'Cinzel', serif; --font-body: 'DM Sans', sans-serif; --mono: 'DM Mono', ui-monospace, Menlo, monospace;
  position: fixed; inset: 0; z-index: 50; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 44% at 50% -6%, rgba(255,150,46,0.16) 0%, transparent 58%),
    radial-gradient(ellipse 60% 40% at 50% 110%, rgba(255,120,30,0.07) 0%, transparent 60%),
    var(--bg);
  color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased;
  flex-direction: column;
}
.pg * { box-sizing: border-box; }
.pg ::-webkit-scrollbar { width: 9px; height: 9px; }
.pg ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 6px; }
.pg ::-webkit-scrollbar-track { background: transparent; }
.pg-texture { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.22; }
.pg-texture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg > *:not(.pg-texture):not(.pg-grain) { position: relative; z-index: 1; }

.pg .pg-btn { font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; padding: 10px 18px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; transition: all .2s ease; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.pg .pg-btn-ghost { background: var(--surface2); border-color: var(--border-light); }
.pg .pg-btn-ghost:hover { background: var(--surface3); }
.pg .pg-btn-sm { padding: 7px 12px; font-size: 0.8rem; }
.pg .pg-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.pg .section-label { font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-soft); margin: 0 0 14px; }
.pg .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }

.pg .pmember { display: flex; align-items: center; gap: 13px; padding: 13px 15px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color .2s; }
.pg .pmember.ready { border-color: rgba(74,255,158,0.35); box-shadow: inset 0 0 22px rgba(74,255,158,0.05); }
.pg .pmember.you { background: linear-gradient(120deg, rgba(74,158,255,0.06), transparent 60%); }
.pg .pmember-av { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: #0a0a0f; border: 2px solid var(--surface3); }
.pg .pmember-info { flex: 1; min-width: 0; }
.pg .pmember-name { display: flex; align-items: center; gap: 7px; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text); white-space: nowrap; overflow: hidden; }
.pg .pmember-name .crown { font-size: 0.85rem; flex-shrink: 0; }
.pg .pmember-cls { font-size: 0.78rem; color: var(--text-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg .pmember-cls .lv { color: var(--gold-soft); font-family: var(--mono); }
/* M6 avatars Slice 5 — "played by <player>" attribution under the character name (layout C). Single-line, truncates. */
.pg .pmember-by { font-size: 0.72rem; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg .pmember-by-ic { font-size: 0.7rem; opacity: 0.8; margin-right: 4px; }
/* Right-side actions stacked (ready chip + leader retire) so they don't squeeze the info column → no wrap/clip. */
.pg .pmember-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.pg .ready-chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 0.8rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.pg .ready-chip.is-ready { color: var(--green); background: rgba(74,255,158,0.1); border: 1px solid rgba(74,255,158,0.35); }
.pg .ready-chip.is-waiting { color: var(--amber); background: rgba(255,184,74,0.08); border: 1px solid rgba(255,184,74,0.28); }
.pg .ready-chip.is-offline { color: var(--text-dim); background: rgba(255,255,255,0.03); border: 1px solid var(--border); }
.pg .ready-chip.is-offline .pulse { background: var(--text-dim); animation: none; }
/* OI-181 — offline (absent) teammate rows + the leader-only retire affordance. */
.pg .pmember.absent { opacity: 0.6; }
.pg .pmember.absent .pmember-av { filter: grayscale(0.45); }
.pg .pmember-retire { flex-shrink: 0; background: transparent; border: 1px solid var(--border); color: var(--text-dim); border-radius: var(--radius-sm); padding: 5px 9px; font-size: 0.95rem; line-height: 1; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.pg .pmember-retire:hover { border-color: var(--combat-red); color: var(--combat-red); background: rgba(229,57,53,0.08); }
.pg .ready-chip.is-away { color: var(--muted); background: var(--surface2); border: 1px solid var(--border); }
.pg .ready-chip .pulse { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pg .ready-chip.is-ready .pulse { box-shadow: 0 0 7px var(--green); }
.pg .ready-summary { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--text-dim); }
.pg .ready-track { flex: 1; height: 6px; border-radius: 999px; background: var(--surface3); overflow: hidden; min-width: 56px; }
.pg .ready-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green), #2fd97f); transition: width .4s ease; }

.pg .start-btn { width: 100%; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: 1px; color: #1a1205; background: var(--gold-grad); border: none; border-radius: var(--radius-sm); padding: 18px; cursor: pointer; box-shadow: 0 4px 22px rgba(255,180,50,0.22); transition: filter .2s, transform .2s; display: flex; align-items: center; justify-content: center; gap: 10px; }
.pg .start-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.pg .start-btn:disabled { filter: grayscale(0.4) brightness(0.78); cursor: not-allowed; transform: none; box-shadow: none; }
.pg .start-btn .sub { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.5px; color: rgba(26,18,5,0.7); margin-top: 3px; }
.pg .start-note { text-align: center; font-size: 0.76rem; color: var(--muted); margin-top: 10px; }

.pg .recap { position: relative; overflow: hidden; }
.pg .recap-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.pg .recap-head h3 { font-family: var(--font-display); font-size: 1rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-soft); margin: 0; flex: 1; }
.pg .recap-regen-wrap { position: relative; }
.pg .recap-regen-tip { position: absolute; top: calc(100% + 8px); right: 0; width: 210px; z-index: 30; background: rgba(10,8,12,0.96); border: 1px solid var(--border-light); border-radius: 8px; padding: 8px 11px; font-size: 0.72rem; line-height: 1.4; color: var(--text-dim); opacity: 0; pointer-events: none; transition: opacity .15s; box-shadow: 0 8px 24px rgba(0,0,0,0.55); }
.pg .recap-regen-wrap:hover .recap-regen-tip { opacity: 1; }
.pg .recap-body { padding: 22px 26px; overflow-y: auto; }
.pg .recap-body p { font-size: 0.98rem; line-height: 1.72; color: var(--text-dim); margin: 0 0 16px; font-style: italic; text-wrap: pretty; }
.pg .recap-body p:first-child::first-letter { font-family: 'Cinzel Decorative', var(--font-display); font-weight: 900; font-size: 4.2rem; float: left;
  line-height: 0.7; margin: 8px 14px 2px 0; padding: 10px 14px 8px; color: var(--gold); font-style: normal;
  background: radial-gradient(ellipse 70% 70% at 50% 40%, rgba(255,180,60,0.16), rgba(255,180,60,0.03) 70%, transparent);
  border: 1px solid rgba(255,215,0,0.28); border-radius: 8px; text-shadow: 0 2px 12px rgba(255,170,50,0.45); }
.pg .recap-body p:last-child { color: var(--gold-soft); font-style: normal; font-weight: 500; margin-bottom: 0; }
/* P-LOBBY-STALE-RECAP (S258) — the "chronicler is gathering the tale…" wait state.
   Placed after the :last-child rule (equal specificity → source order wins) and
   opts out of the drop-cap so the leading quill doesn't render as a giant boxed
   first-letter. Gentle pulse signals work-in-progress. */
.pg .recap-body p.recap-generating { color: var(--text-dim); font-style: italic; font-weight: 400;
  animation: recap-gen-pulse 2.4s ease-in-out infinite; }
.pg .recap-body p.recap-generating::first-letter { font-family: inherit; font-weight: inherit; font-size: inherit;
  float: none; margin: 0; padding: 0; color: inherit; background: none; border: none; border-radius: 0; text-shadow: none; }
.pg .recap-body .recap-quill { display: inline-block; margin-right: 6px; animation: recap-quill-bob 1.6s ease-in-out infinite; }
@keyframes recap-gen-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } }
@keyframes recap-quill-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
  .pg .recap-body p.recap-generating, .pg .recap-body .recap-quill { animation: none; }
}

.pg .guide-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pg .guide-head h3 { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-soft); margin: 0; flex: 1; }
.pg .guide-count { font-size: 0.68rem; font-weight: 600; color: var(--green); background: rgba(74,255,158,0.1); border: 1px solid rgba(74,255,158,0.35); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.pg .guide-sub { font-size: 0.84rem; color: var(--text-dim); line-height: 1.5; margin: 0 0 16px; }
.pg .guide-item { display: flex; gap: 11px; padding: 12px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; transition: opacity .2s, border-color .2s; }
.pg .guide-item.is-accepted { border-color: rgba(74,255,158,0.32); background: rgba(74,255,158,0.05); }
.pg .guide-item.is-dismissed { opacity: 0.5; }
.pg .guide-av { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: #0a0a0f; }
.pg .guide-main { flex: 1; min-width: 0; }
.pg .guide-whorow { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.pg .guide-who { font-size: 0.8rem; font-weight: 600; color: var(--text); }
.pg .guide-badge { font-size: 0.64rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pg .guide-badge.accepted { color: var(--green); background: rgba(74,255,158,0.12); border: 1px solid rgba(74,255,158,0.35); }
.pg .guide-badge.dismissed { color: var(--muted); background: var(--surface3); border: 1px solid var(--border); }
.pg .guide-text { font-size: 0.86rem; color: var(--text-dim); line-height: 1.5; }
.pg .guide-actions { display: flex; gap: 8px; margin-top: 10px; }
.pg .guide-act { font-family: var(--font-body); font-weight: 600; font-size: 0.76rem; padding: 6px 12px; border-radius: var(--radius-xs); cursor: pointer; border: 1px solid transparent; transition: all .15s; white-space: nowrap; }
.pg .guide-act.implement { color: var(--green); background: rgba(74,255,158,0.1); border-color: rgba(74,255,158,0.35); }
.pg .guide-act.implement:hover { background: rgba(74,255,158,0.2); }
.pg .guide-act.dismiss { color: var(--text-dim); background: var(--surface3); border-color: var(--border); }
.pg .guide-act.dismiss:hover { color: var(--danger); border-color: rgba(255,107,107,0.4); }
.pg .guide-undo { margin-top: 8px; font-family: var(--font-body); font-size: 0.72rem; color: var(--muted); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.pg .guide-undo:hover { color: var(--text-dim); }
.pg .guide-input { display: flex; gap: 10px; margin-top: 14px; }
.pg .guide-input input { flex: 1; font-family: var(--font-body); font-size: 0.88rem; color: var(--text); background: var(--surface2); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 11px 14px; outline: none; }
.pg .guide-input input::placeholder { color: var(--muted); }
.pg .guide-input input:focus { border-color: rgba(255,215,0,0.4); }
.pg .guide-add { font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; color: var(--gold-soft); background: rgba(255,215,0,0.08); border: 1px solid rgba(255,215,0,0.3); border-radius: var(--radius-sm); padding: 0 18px; cursor: pointer; white-space: nowrap; }
.pg .guide-add:hover { background: rgba(255,215,0,0.15); }
.pg .guide-finalize { margin-top: 8px; font-size: 0.76rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }

.pg .layD { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.pg .layD-hero { position: relative; height: 158px; flex-shrink: 0; overflow: hidden; border-bottom: 1px solid var(--border); }
.pg .layD-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
.pg .layD-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,7,10,0.45) 0%, rgba(8,7,10,0.2) 40%, rgba(8,7,10,0.96) 100%), radial-gradient(ellipse 60% 100% at 50% 0%, rgba(255,150,46,0.18), transparent 70%); }
.pg .layD-hero-inner { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.pg .layD-title { font-family: var(--font-display); font-weight: 900; font-size: 2.8rem; letter-spacing: 2px; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 14px rgba(255,170,50,0.3)); line-height: 1; }
.pg .layD-sub { font-size: 0.88rem; color: rgba(245,225,180,0.7); letter-spacing: 0.5px; margin-top: 8px; }
.pg .layD-leave { position: absolute; top: 18px; left: 22px; z-index: 3; }
.pg .layD-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 330px minmax(0,1fr) 384px; gap: 20px; padding: 20px 26px; overflow: hidden; }
.pg .layD-col { min-height: 0; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.pg .layD-col.scroll { overflow-y: auto; padding-bottom: 4px; }
.pg .pg-leave { font-family: var(--font-body); font-weight: 600; font-size: 0.88rem; color: var(--text); background: var(--surface2); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 9px 16px; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; }
.pg .pg-leave:hover { background: var(--surface3); }

/* ===========================================================================
   Pre-Game Lobby — v3 CEREMONIAL OVERLAY (M6 tier-3 "Hearthlight", S238).
   Layers on the .pg lobby above. Chrome elevation ONLY — layout + every behavior
   unchanged (vanilla, rendered by DndGame.renderLobby; Tyler S238 disposition:
   keep auto-regen, no manual recap button). Ported from the handoff pregame-v3.css
   with deviations: the handoff's corner filigree was DROPPED on the lobby (Tyler
   S238 — the 3 dense panels have headers/meter/text in every corner, so it only
   clutters; kept on the modals where there's clean dead space). The handoff's
   .start-btn::before "▶" is also dropped — the live button already renders an
   inline ▶.
   =========================================================================== */
/* ambient: grain over the whole hearth + drifting embers in the hero */
.pg-grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.4; mix-blend-mode: overlay;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); }
.pg .layD { position: relative; }
.pg .layD-hero { z-index: 1; }
.pg .layD-grid { position: relative; z-index: 1; }
.pg .pg-embers { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.pg .pg-ember { position: absolute; bottom: -8px; width: 3px; height: 3px; border-radius: 50%;
  background: radial-gradient(circle, #ffd27a, rgba(255,150,40,0.2) 70%, transparent);
  box-shadow: 0 0 6px 1px rgba(255,170,60,0.5); animation: pgRise linear infinite; opacity: 0; }
@keyframes pgRise {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  14% { opacity: 0.85; } 72% { opacity: 0.5; }
  100% { transform: translateY(-150px) translateX(var(--drift,12px)) scale(0.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .pg .pg-ember { animation: none !important; display: none; } }
/* hero: warmer ceremonial gradient + deeper title shadow + center glow */
.pg .layD-hero::after { background:
  linear-gradient(180deg, rgba(8,7,10,0.42) 0%, rgba(8,7,10,0.18) 38%, rgba(8,7,10,0.97) 100%),
  radial-gradient(ellipse 64% 116% at 50% -4%, rgba(255,160,52,0.26), transparent 68%); }
.pg .layD-title { filter: drop-shadow(0 2px 16px rgba(255,170,50,0.42)); }
.pg .layD-hero-inner::before { content: ""; position: absolute; top: 50%; left: 50%; width: 360px; height: 120px;
  transform: translate(-50%,-46%); z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,170,60,0.12), transparent 70%); }
/* matted card depth + ceremonial frame (the 3 panels) */
.pg .layD .card { position: relative; border-color: rgba(255,215,0,0.22);
  background: radial-gradient(ellipse 80% 44% at 50% 0%, rgba(255,180,60,0.05) 0%, transparent 52%), linear-gradient(180deg, #14121a 0%, #100f15 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 18px 50px -22px rgba(0,0,0,0.8), 0 40px 120px -50px rgba(255,140,40,0.16); }
/* Quiet inlaid bracket (S238 kit refresh): bracket-only, nested concentric in the
   card's --radius:16px corner (inset 7px → elbow radius 16−7=9px), 20px arms, z-0
   below content so it never covers the header text/meter or clips on the scrolling
   recap. The earlier diamond-on-a-square-footprint read as clutter; this traces the
   card curve as a quiet accent. */
.pg .pg-corner { position: absolute; width: 20px; height: 20px; z-index: 0; pointer-events: none; opacity: 0.6; }
.pg .pg-corner::before { content: ""; position: absolute; inset: 0; border-top: 1.5px solid rgba(255,215,0,0.42); border-left: 1.5px solid rgba(255,215,0,0.42); border-top-left-radius: 9px; }
.pg .pg-corner.pg-tl { inset: 7px auto auto 7px; }
.pg .pg-corner.pg-tr { inset: 7px 7px auto auto; transform: scaleX(-1); }
.pg .pg-corner.pg-bl { inset: auto auto 7px 7px; transform: scaleY(-1); }
.pg .pg-corner.pg-br { inset: auto 7px 7px auto; transform: scale(-1,-1); }
.pg .layD .card > *:not(.pg-corner) { position: relative; z-index: 1; }
/* gold-grad section headers (match the modals' ceremonial heads) */
.pg .section-label, .pg .recap-head h3, .pg .guide-head h3 {
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold-soft); }
.pg .recap-head { border-bottom-color: rgba(255,215,0,0.16); }
/* illuminated drop-cap: now that renderLobby wraps the recap in real <p>, the base
   rule .recap-body p:first-child::first-letter (above) drives it (boxed Cinzel
   Decorative) — this v3 override is no longer needed. */
/* ready-up gold ceremony */
.pg .ready-track { background: rgba(0,0,0,0.4); border: 1px solid var(--border); height: 7px; }
.pg .ready-fill { background: linear-gradient(90deg, #c79a3a, #FFE8A0 60%, #FFD700); box-shadow: 0 0 10px rgba(255,215,0,0.4); position: relative; overflow: hidden; }
.pg .ready-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); transform: translateX(-100%); animation: pgShimmer 2.6s ease-in-out infinite; }
@keyframes pgShimmer { 0%,60% { transform: translateX(-100%); } 100% { transform: translateX(220%); } }
@media (prefers-reduced-motion: reduce) { .pg .ready-fill::after { animation: none; opacity: 0; } }
.pg .ready-summary > span:first-child { color: var(--gold-soft) !important; font-family: var(--mono); }
/* start button: armed gold ceremony (arrow stays inline in the markup) */
.pg .start-btn { box-shadow: 0 4px 22px rgba(255,180,50,0.26), inset 0 0 0 1px rgba(255,255,255,0.16); }
/* guidance accept/dismiss polish */
.pg .guide-item { position: relative; padding-left: 14px; }
.pg .guide-item.is-accepted { border-color: rgba(74,255,158,0.4); background: linear-gradient(120deg, rgba(74,255,158,0.09), rgba(74,255,158,0.02) 60%); box-shadow: inset 3px 0 0 0 var(--green); }
.pg .guide-item.is-dismissed { opacity: 0.42; box-shadow: inset 3px 0 0 0 rgba(255,255,255,0.12); }
.pg .guide-item.is-dismissed .guide-text { text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.3); }
.pg .guide-badge.accepted { box-shadow: 0 0 10px rgba(74,255,158,0.25); }
.pg .guide-count { box-shadow: 0 0 10px rgba(74,255,158,0.2); }
.pg .guide-act.implement:hover { box-shadow: 0 0 12px rgba(74,255,158,0.3); }
/* leave button: subtle ceremonial frame */
.pg .layD-leave { box-shadow: inset 0 0 0 1px rgba(255,215,0,0.12); }

/* ===========================================================================
   IN-GAME / SESSION SCREEN — .ss design system (LayoutHybrid).
   Atmospheric-hearth language shared with .cl/.pg. Scoped under .ss; #game
   carries .ss. Container layout defers to the .screen show/hide system (do NOT
   set display/position on bare .ss — it would override .screen's display:none).
   Per docs/design/project_redesign/design_handoff_session (starter handoff). Combat layer is OUT
   of scope this pass and keeps its existing classes.
   =========================================================================== */
.ss {
  --bg: #08070a; --bg2: #0c0b10;
  --surface: #121117; --surface2: #1a1922; --surface3: #23222e;
  --border: rgba(255,255,255,0.07); --border-light: rgba(255,255,255,0.13);
  --text: #f1eef5; --text-dim: rgba(241,238,245,0.62); --muted: rgba(241,238,245,0.34);
  --gold: #FFD700; --gold-soft: #FFE8A0;
  --gold-grad: linear-gradient(135deg, #FFD700 0%, #FFE88A 32%, #FFD700 52%, #CC9900 100%);
  --green: #4AFF9E; --blue: #4A9EFF; --purple: #A78BFA; --amber: #FFB84A; --danger: #FF6B6B;
  --radius: 14px; --radius-sm: 10px; --radius-xs: 7px;
  --font-display: 'Cinzel', serif; --font-body: 'DM Sans', sans-serif;
  --font-read: 'Spectral', Georgia, serif; --mono: 'DM Mono', ui-monospace, Menlo, monospace;
  color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased;
}
/* .ss is a pure token scope (no forced background) so it's safe to add to modal
   overlays for the .cs-*/.iv-* design. #game.ss owns the screen background. */
/* Lock the screen to the viewport (cockpit: internal scroll, not page growth).
   .screen.active already gives display:flex + flex-direction:column. */
#game.ss { position: relative; height: 100vh; min-height: 0; overflow: hidden; padding: 0; background: var(--bg); }
body.maint-banner-visible #game.ss { height: calc(100vh - 64px); }
.ss * { box-sizing: border-box; }
.ss ::-webkit-scrollbar { width: 9px; height: 9px; }
.ss ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 6px; }
.ss ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }
.ss ::-webkit-scrollbar-track { background: transparent; }
.ss-texture { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.09; }
.ss-texture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- shared atoms ---------- */
.ss .ss-collapse-h { display: flex; align-items: center; gap: 8px; width: 100%; font-family: var(--font-display); font-size: 0.74rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold-soft); background: none; border: none; cursor: pointer; padding: 0; text-align: left; }
.ss .ss-collapse-h .chev { margin-left: auto; color: var(--muted); font-size: 0.62rem; transition: transform .2s; }
.ss .ss-collapse-h.closed .chev { transform: rotate(-90deg); }
.ss .ss-collapse-h .count { color: var(--muted); font-size: 0.66rem; letter-spacing: 0.5px; font-family: var(--mono); }
.ss .ss-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.ss .ss-btn { font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; padding: 9px 15px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--border-light); background: var(--surface2); color: var(--text); transition: all .18s; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.ss .ss-btn:hover { background: var(--surface3); }
.ss .ss-btn.gold { background: var(--gold-grad); color: #1a1205; border-color: transparent; font-weight: 700; }
.ss .ss-btn.gold:hover { filter: brightness(1.07); }
.ss .ss-btn.gold-ghost { background: rgba(255,215,0,0.07); color: var(--gold-soft); border-color: rgba(255,215,0,0.32); font-weight: 600; }
.ss .ss-btn.gold-ghost:hover { background: rgba(255,215,0,0.14); border-color: rgba(255,215,0,0.5); }
.ss .ss-btn.danger { color: var(--danger); border-color: rgba(255,107,107,0.4); background: rgba(255,107,107,0.06); }
.ss .ss-btn.danger:hover { background: rgba(255,107,107,0.14); }
.ss .ss-btn.sm { padding: 6px 11px; font-size: 0.78rem; }
/* Semantic action variants — keep the inventory detail-action color cues on the .ss-btn component
   (equip=blue / unequip=amber / use=green / arcane=purple for off-hand + identify; drop reuses .danger, give reuses .gold). */
.ss .ss-btn.equip { color: var(--agua); border-color: rgba(74,158,255,0.4); background: rgba(74,158,255,0.1); }
.ss .ss-btn.equip:hover { background: rgba(74,158,255,0.18); }
.ss .ss-btn.unequip { color: var(--warning); border-color: rgba(255,184,74,0.4); background: rgba(255,184,74,0.1); }
.ss .ss-btn.unequip:hover { background: rgba(255,184,74,0.18); }
.ss .ss-btn.use { color: var(--success); border-color: rgba(74,255,158,0.4); background: rgba(74,255,158,0.1); }
.ss .ss-btn.use:hover { background: rgba(74,255,158,0.18); }
.ss .ss-btn.arcane { color: #c4a0ff; border-color: rgba(168,85,247,0.4); background: rgba(168,85,247,0.12); }
.ss .ss-btn.arcane:hover { background: rgba(168,85,247,0.2); }
.ss .ss-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ss .ss-iconbtn { width: 38px; height: 38px; padding: 0; justify-content: center; font-size: 1rem; }
/* uniform top-bar button row height (icon buttons matched the .sm pills) */
.ss .ss-topactions .ss-btn { height: 34px; }
.ss .ss-topactions .ss-iconbtn { width: 34px; height: 34px; }

/* ===== Companion stat-block modal (.cmp-*) — ported from redesign session.css, S169.
   Reused inside the existing .modal-overlay shell (fixed/inset:0), so no .cmp-overlay needed.
   Drops the prototype's hardcoded green hp glow (fill color is data-driven 50/25 thresholds).
   .cmp-conds/.cmp-cond/.cmp-note dress live features the screenshot-based mockup never saw. */
.ss .cmp-modal { width: min(560px, 94vw); max-height: calc(100vh - 80px); overflow-y: auto; background: linear-gradient(180deg, #16151d, #100f15); border: 1px solid var(--border-light); border-radius: var(--radius); box-shadow: 0 30px 90px rgba(0,0,0,0.72); position: relative; padding: 26px 28px 22px; }
.ss .cmp-close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.95rem; background: var(--surface2); border: 1px solid var(--border-light); color: var(--text-dim); }
.ss .cmp-close:hover { background: var(--surface3); color: var(--text); }
.ss .cmp-title { font-family: var(--font-display); font-weight: 800; font-size: 1.85rem; letter-spacing: 1px; text-transform: uppercase; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.05; display: flex; align-items: center; gap: 12px; padding-right: 42px; }
.ss .cmp-titleico { -webkit-text-fill-color: initial; font-size: 1.35rem; }
.ss .cmp-meta { font-family: var(--font-read); font-size: 1rem; color: var(--text-dim); margin: 8px 0 20px; text-transform: capitalize; }
.ss .cmp-hpcard { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 22px; }
.ss .cmp-hprow { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.ss .cmp-hplabel { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text); }
.ss .cmp-hpval { font-family: var(--mono); font-weight: 700; font-size: 1.3rem; }
.ss .cmp-hpbar { height: 10px; border-radius: 999px; background: var(--surface); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.5); }
.ss .cmp-hpfill { height: 100%; border-radius: 999px; transition: width .3s; }
.ss .cmp-vitals { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 0.98rem; color: var(--text-dim); flex-wrap: wrap; }
.ss .cmp-vitals strong { color: var(--text); font-family: var(--mono); }
.ss .cmp-dot { color: var(--muted); }
.ss .cmp-spectral { font-size: 0.92rem; color: var(--text-dim); font-style: italic; }
.ss .cmp-senses { font-size: 0.92rem; color: var(--text-dim); margin-top: 8px; }
.ss .cmp-senses strong { color: var(--text); font-weight: 600; }
.ss .cmp-conds { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.ss .cmp-cond { background: rgba(255,107,107,0.14); color: var(--danger); border: 1px solid rgba(255,107,107,0.3); padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; }
.ss .cmp-note { font-size: 0.82rem; color: var(--muted); font-style: italic; margin-top: 12px; }
.ss .cmp-seclabel { font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 11px; }
.ss .cmp-saves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-bottom: 24px; }
.ss .cmp-save { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 8px; text-align: center; }
.ss .cmp-save-k { font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 1.2px; color: var(--muted); text-transform: uppercase; }
.ss .cmp-save-v { font-family: var(--mono); font-weight: 700; font-size: 1.25rem; color: var(--text); margin-top: 5px; }
.ss .cmp-attacks { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.ss .cmp-attack { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 16px; }
.ss .cmp-attack-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text); }
.ss .cmp-attack-line { font-family: var(--mono); font-size: 0.86rem; color: var(--text-dim); margin-top: 4px; }
.ss .cmp-footer { display: flex; justify-content: flex-end; align-items: center; gap: 11px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.ss .cmp-footer .ss-btn { padding: 11px 26px; font-size: 0.92rem; }
.ss .cmp-leaderhint { margin-right: auto; font-size: 0.84rem; font-style: italic; color: var(--muted); }
.ss .ss-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }

/* ---------- top bar ---------- */
.ss .ss-topbar { display: flex; align-items: center; gap: 14px; padding: 12px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0; z-index: 5; background: linear-gradient(180deg, rgba(255,180,60,0.035), transparent); }
.ss .ss-brand { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.ss .ss-brand .name { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: 1px; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; }
.ss .ss-brand .timer { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
/* Subtle sandbox indicator chip (replaced the full-width banner, S238). */
.ss .ss-sandbox-chip { align-self: center; font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--amber, #FFB84A); background: rgba(255,152,0,0.12); border: 1px solid rgba(255,152,0,0.38); border-radius: 999px; padding: 2px 9px; white-space: nowrap; cursor: help; }
.ss .ss-topbar .spacer { flex: 1; }
.ss .ss-topactions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ss .ss-leader-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 999px; background: rgba(255,215,0,0.1); border: 1px solid rgba(255,215,0,0.32); cursor: pointer; }
.ss .ss-leader-pill .av { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; color: #1a1205; background: var(--gold-grad); }
.ss .ss-leader-pill .crown { font-size: 0.78rem; }

/* ---------- HYBRID layout shell ---------- */
.ss .layH { flex: 1; min-height: 0; display: grid; grid-template-rows: auto 1fr; position: relative; z-index: 1; }
.ss .layH-body { display: grid; grid-template-columns: var(--railL-w, 312px) minmax(0,1fr) var(--railR-w, 322px); min-height: 0; overflow: hidden; position: relative; }
.ss .layH-body > .charrail { border-right: 1px solid var(--border); min-width: 0; grid-column: 1; }
.ss .layH-body > .layH-feed { grid-column: 2; }
.ss .layH-body > .inforail { border-left: 1px solid var(--border); min-width: 0; grid-column: 3; }

/* ---------- M6 S244 — rail resize + collapse (Keith QoL) ----------
   Rail widths live in --railL-w / --railR-w, set inline on .layH-body by
   js/session-layout.js (per-user localStorage). Grid columns, handles and
   chevron toggles all derive from the same vars so they track in lockstep.
   Handles/toggles are absolute children of .layH-body — never inside the
   rails (React createRoot hosts). Collapse = display:none on the rail
   (content stays mounted → live updates keep landing while hidden). */
.ss .rail-handle { position: absolute; top: 0; bottom: 0; width: 9px; cursor: col-resize; z-index: 30; }
.ss .rail-handle-l { left: calc(var(--railL-w, 312px) - 4px); }
.ss .rail-handle-r { right: calc(var(--railR-w, 322px) - 4px); }
.ss .rail-handle::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: transparent; transition: background 0.15s ease; }
.ss .rail-handle:hover::after, .ss .rail-handle.dragging::after { background: rgba(255,215,0,0.35); }
body.rail-dragging { cursor: col-resize; user-select: none; -webkit-user-select: none; }
body.rail-dragging * { cursor: col-resize; }
.ss .rail-toggle { position: absolute; top: 16px; width: 20px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; background: var(--surface2); border: 1px solid var(--border); color: var(--gold-soft); cursor: pointer; z-index: 31; opacity: 0.5; transition: opacity 0.15s ease, color 0.15s ease; }
.ss .rail-toggle:hover { opacity: 1; color: var(--gold); }
.ss .rail-toggle-l { left: var(--railL-w, 312px); border-left: none; border-radius: 0 7px 7px 0; }
.ss .rail-toggle-r { right: var(--railR-w, 322px); border-right: none; border-radius: 7px 0 0 7px; }
.ss .rail-toggle.is-collapsed svg { transform: scaleX(-1); }
.ss .rail-toggle.is-collapsed { opacity: 0.8; }
.ss .layH-body.railL-collapsed > .charrail, .ss .layH-body.railL-collapsed > .rail-handle-l { display: none; }
.ss .layH-body.railR-collapsed > .inforail, .ss .layH-body.railR-collapsed > .rail-handle-r { display: none; }
/* Small screens: no width to trade — hide the drag handles (session-layout.js
   also no-ops the drag below this width). The collapse chevrons stay active
   at every width; tucking a rail away IS the small-screen win. Keep the 900px
   value in sync with HANDLE_DISABLE_MQ in js/session-layout.js. */
@media (max-width: 900px) {
  .ss .rail-handle { display: none; }
}
.ss .layH-feed { display: flex; flex-direction: column; min-height: 0; background: radial-gradient(ellipse 85% 45% at 50% 4%, rgba(255,150,46,0.06), transparent 58%); }
.ss .layH .feed-inner { max-width: 720px; }
.ss .layH .prose p { font-size: 1.17rem; line-height: 1.82; }
.ss .layH .charrail .charhud-vitals { margin-top: -2px; }

/* ---------- character rail (hybrid HUD) ---------- */
.ss .charrail { display: flex; flex-direction: column; gap: 14px; padding: 18px; overflow-y: auto; }
.ss .charhud-head { display: flex; gap: 12px; align-items: center; }
.ss .charh-portrait { width: 66px; height: 66px; border-radius: 14px; overflow: hidden; flex-shrink: 0; position: relative; border: 2px solid rgba(255,215,0,0.5); box-shadow: 0 0 20px rgba(255,170,50,0.2); }
.ss .charh-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.ss .charh-portrait .mono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--gold-soft); background: linear-gradient(140deg, #2b2540, #15131d); }
.ss .charhud-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ss .char-name { font-family: var(--font-display); font-weight: 700; letter-spacing: 1px; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.1; }
.ss .charhud-sub { font-size: 0.74rem; color: var(--text-dim); line-height: 1.3; }
.ss .sec { display: flex; flex-direction: column; gap: 11px; }
.ss .sec-body { display: flex; flex-direction: column; gap: 9px; }
.ss .hp-block { display: flex; flex-direction: column; gap: 8px; }
.ss .hp-num { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--green); letter-spacing: 1px; }
.ss .hp-num .sep { color: var(--muted); font-weight: 400; }
.ss .hp-label { font-size: 0.72rem; color: var(--muted); font-family: var(--font-body); font-weight: 500; }
.ss .hp-bar { height: 9px; border-radius: 999px; background: var(--surface3); overflow: hidden; border: 1px solid var(--border); }
.ss .hp-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2fd97f, var(--green)); box-shadow: 0 0 10px rgba(74,255,158,0.4); }
/* Party-panel / target HP bars use .hp-bar-container > .hp-bar.{healthy|bloodied|critical} as a
   colored FILL (different pattern from the rail's .hp-bar track + .hp-fill child above). The
   .ss .hp-bar rule would otherwise clobber that fill with the dark track bg + 9px height — re-assert
   the fill here at higher specificity so its color + sizing survive inside .ss. */
.ss .hp-bar-container .hp-bar { height: 100%; border: none; border-radius: 4px; }
.ss .hp-bar-container .hp-bar.healthy { background: var(--success); }
.ss .hp-bar-container .hp-bar.bloodied { background: var(--warning); }
.ss .hp-bar-container .hp-bar.critical { background: var(--danger); }
/* M6 cockpit party-row polish (S238) — gold "you" tint on your own row + an explicit
   downed treatment at 0 HP (replaces the empty bar). Shared by the vanilla rail + the
   DndSessionRail island (both render .player-item via renderPlayerList). */
.ss .player-item.you { border-color: rgba(255,215,0,0.32); background: linear-gradient(180deg, rgba(255,215,0,0.05), transparent), var(--surface2); }
.ss .party-downed { margin-top: 5px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--danger); display: flex; align-items: center; gap: 5px; }
.ss .charhud-vitals { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.ss .vital { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 8px 4px; text-align: center; }
.ss .vital .k { font-size: 0.58rem; letter-spacing: 1px; color: var(--muted); }
.ss .vital .v { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text); }
.ss .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ss .stat { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 8px 4px; text-align: center; }
.ss .stat .k { font-size: 0.6rem; letter-spacing: 1px; color: var(--muted); }
.ss .stat .v { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--text); line-height: 1.1; }
.ss .stat .mod { font-size: 0.66rem; color: var(--gold-soft); font-family: var(--mono); }
/* Character rail compact-HUD top block (S169) — markup the live renderSheet now emits.
   .charhud-head/meta/sub/vitals/.vital/.stat/.hp-num/.hp-bar/.hp-fill ship above; these fill the gaps. */
.ss .charhud-portrait { width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--radius-sm); border: 1px solid var(--gold-soft); background: var(--surface2); overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--gold-soft); }
.ss .charhud-portrait img { width: 100%; height: 100%; object-fit: cover; }
.ss .charhud-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--gold); line-height: 1.12; }
.ss .charhud-hp { display: flex; flex-direction: column; gap: 6px; }
.ss .charhud-hp .hp-num { font-size: 1.7rem; }
.ss .charhud-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ss .charhud-open { margin-top: 2px; }
/* ===========================================================================
   Post-Combat — "The Reckoning" (M6 v3 tier-3 POLISH, S238). Combat Summary +
   Loot Pile, elevated to the ceremonial Hearthlight chrome. VANILLA (not a React
   island, per Tyler's S238 disposition) — the modals stay wired to game.js /
   inventory.js. Self-contained .pcx wrapper that defines its own token block +
   shell + atoms, mirroring the .amx ability-modal shell so NOTHING collides with
   the shipped islands' global .csx-*/.iv-* rules. Corner classes renamed .pc-tl..br
   with the `inset` shorthand (the S237 corner-collapse fix). Supersedes the S169
   .cms-*/.lp-* tier-2 reskins (markup rewritten to .pc-* in this same ship).
   =========================================================================== */
.pcx {
  --bg: #08070a; --surface: #121117; --surface2: #1a1922; --surface3: #23222e;
  --border: rgba(255,255,255,0.08); --border-light: rgba(255,255,255,0.14);
  --text: #f1eef5; --dim: rgba(241,238,245,0.62); --muted: rgba(241,238,245,0.34);
  --gold: #FFD700; --gold-soft: #FFE8A0; --gold-deep: #CC9900;
  --gold-grad: linear-gradient(135deg, #FFD700 0%, #FFE88A 32%, #FFD700 52%, #CC9900 100%);
  --green: #4AFF9E; --blue: #4A9EFF; --purple: #A78BFA; --amber: #FFB84A; --danger: #FF6B6B;
  --display: 'Cinzel', serif; --body: 'DM Sans', sans-serif;
  --prose: 'Spectral', Georgia, serif; --mono: 'DM Mono', ui-monospace, Menlo, monospace;
  color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; width: 100%; height: 100%;
}
.pcx *, .pcx *::before, .pcx *::after { box-sizing: border-box; }

/* ceremonial modal shell (from the shipped islands' .csx kit) */
.pcx.pc-modal { position: relative; isolation: isolate; display: flex; flex-direction: column; max-height: calc(100vh - 80px); overflow: hidden;
  border: 1px solid rgba(255,215,0,0.26); border-radius: 14px;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,180,60,0.06) 0%, transparent 55%), linear-gradient(180deg, #14121a 0%, #0d0c12 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 7px rgba(20,16,10,0.55), 0 0 0 8px rgba(255,215,0,0.10), 0 30px 80px -20px rgba(0,0,0,0.8), 0 80px 200px -40px rgba(255,140,40,0.18); }
.pcx.pc-cms { width: min(720px, 94vw); }
.pcx.pc-lp { width: min(640px, 94vw); }
.pcx .pc-amb { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; overflow: hidden; }
.pcx .pc-amb .vig { position: absolute; inset: 0; background: radial-gradient(ellipse 120% 84% at 50% 36%, transparent 48%, rgba(0,0,0,0.5) 100%); }
.pcx .pc-amb .grain { position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: overlay;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); }
.pcx .pc-embers { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.pcx .pc-ember { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
  background: radial-gradient(circle, #ffd27a, rgba(255,150,40,0.2) 70%, transparent);
  box-shadow: 0 0 6px 1px rgba(255,170,60,0.5); animation: pcxRise linear infinite; opacity: 0; }
@keyframes pcxRise {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  14% { opacity: 0.85; } 72% { opacity: 0.55; }
  100% { transform: translateY(-520px) translateX(var(--drift,12px)) scale(0.4); opacity: 0; }
}
.pcx.pc-modal > *:not(.pc-amb):not(.pc-embers):not(.pc-corner):not(.pc-close) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .pcx .pc-ember { animation: none !important; } }
/* corner filigree — bracket + diamond; inset shorthand immune to leaked inset:0 (S237 fix) */
/* Quiet inlaid bracket (S238 kit refresh): bracket-only (no diamond), nested
   concentric in the modal's 14px radius — inset 7px, elbow radius 14−7=7px — 20px
   arms, z-0 so it rides below content (never covers text / clips on overflow). */
.pcx .pc-corner { position: absolute; width: 20px; height: 20px; z-index: 0; pointer-events: none; opacity: 0.6; }
.pcx .pc-corner::before { content: ""; position: absolute; inset: 0; border-top: 1.5px solid rgba(255,215,0,0.42); border-left: 1.5px solid rgba(255,215,0,0.42); border-top-left-radius: 7px; }
.pcx .pc-corner.pc-tl { inset: 7px auto auto 7px; }
.pcx .pc-corner.pc-tr { inset: 7px 7px auto auto; transform: scaleX(-1); }
.pcx .pc-corner.pc-bl { inset: auto auto 7px 7px; transform: scaleY(-1); }
.pcx .pc-corner.pc-br { inset: auto 7px 7px auto; transform: scale(-1,-1); }
.pcx .pc-close { position: absolute; top: 14px; right: 14px; z-index: 6; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; line-height: 1; cursor: pointer;
  color: var(--gold-soft); background: rgba(10,8,12,0.66); border: 1px solid rgba(255,215,0,0.30);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transition: all .15s; }
.pcx .pc-close:hover { background: rgba(255,180,50,0.18); border-color: rgba(255,200,90,0.6); color: #fff; }

/* shared buttons (from the .csx kit, scoped under .pcx) */
.pcx .csx-btn { font-family: var(--body); font-weight: 600; font-size: 0.84rem; padding: 9px 15px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border-light); background: var(--surface2); color: var(--text); transition: all .15s;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.pcx .csx-btn:hover { background: var(--surface3); border-color: rgba(255,215,0,0.4); }
.pcx .csx-btn.gold { background: var(--gold-grad); color: #1a1205; border-color: rgba(255,215,0,0.7);
  box-shadow: 0 2px 14px rgba(255,180,50,0.22), inset 0 1px 0 rgba(255,255,255,0.4); }
.pcx .csx-btn.gold:hover { filter: brightness(1.06); transform: translateY(-1px); }
.pcx .csx-btn.sm { padding: 6px 11px; font-size: 0.76rem; }
.pcx .csx-btn.danger { color: var(--danger); border-color: rgba(255,107,107,0.3); }
.pcx .csx-btn.danger:hover { background: rgba(255,107,107,0.1); border-color: rgba(255,107,107,0.5); }
.pcx .csx-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; transform: none; }

/* ===================== COMBAT SUMMARY (.pc-cms / .pc-stat / .pc-award / .pc-table) ===================== */
.pcx .pc-cms-head { display: flex; align-items: center; gap: 13px; padding: 22px 26px 16px; }
.pcx .pc-cms-ico { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
  background: radial-gradient(circle at 40% 32%, rgba(255,120,90,0.28), transparent 66%); border: 1px solid rgba(255,120,90,0.4); }
.pcx .pc-cms-title { font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: 0.5px;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold); }
.pcx .pc-cms-sub { font-family: var(--prose); font-style: italic; font-size: 0.84rem; color: var(--dim); margin-top: 1px; }
.pcx .pc-cms-body { padding: 4px 26px 22px; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 18px; }
.pcx .pc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pcx .pc-stat { text-align: center; padding: 15px 8px; border-radius: 12px; background: linear-gradient(180deg, var(--surface3), var(--surface)); border: 1px solid var(--border); }
.pcx .pc-stat .v { font-family: var(--display); font-weight: 800; font-size: 1.7rem; color: var(--text); line-height: 1; }
.pcx .pc-stat .v.gold { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pcx .pc-stat .l { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.pcx .pc-awards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pcx .pc-award { position: relative; text-align: center; padding: 14px 8px 13px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border); overflow: hidden; }
.pcx .pc-award.empty { opacity: 0.5; }
.pcx .pc-award .ico { font-size: 1.3rem; filter: grayscale(0.2); }
.pcx .pc-award .l { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.7px; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
.pcx .pc-award .who { font-family: var(--display); font-weight: 700; font-size: 0.92rem; color: var(--text); margin-top: 6px; }
.pcx .pc-award .detail { font-family: var(--mono); font-size: 0.66rem; color: var(--dim); margin-top: 1px; }
.pcx .pc-award .none { font-family: var(--prose); font-style: italic; font-size: 0.8rem; color: var(--muted); margin-top: 8px; }
.pcx .pc-award.mvp { border-color: rgba(255,215,0,0.5); background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255,215,0,0.12), transparent 60%), var(--surface2);
  box-shadow: 0 0 22px -6px rgba(255,170,50,0.5), inset 0 0 0 1px rgba(255,215,0,0.1); }
.pcx .pc-award.mvp::before { content: "★ MVP"; position: absolute; top: 7px; right: 7px; font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.5px;
  color: #1a1205; background: var(--gold-grad); border-radius: 999px; padding: 1px 6px; }
.pcx .pc-award.mvp .who { color: var(--gold-soft); }
.pcx .pc-tablabel { font-family: var(--display); font-size: 0.74rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-soft);
  display: flex; align-items: center; gap: 12px; }
.pcx .pc-tablabel::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,215,0,0.3), transparent); }
.pcx .pc-tablewrap { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.pcx .pc-table { width: 100%; border-collapse: collapse; }
.pcx .pc-table th { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); font-weight: 400;
  padding: 10px 8px; background: var(--surface3); text-align: center; }
.pcx .pc-table th.l, .pcx .pc-table td.l { text-align: left; padding-left: 14px; }
.pcx .pc-table td { font-family: var(--mono); font-size: 0.82rem; color: var(--text); padding: 10px 8px; text-align: center; border-top: 1px solid var(--border); background: var(--surface2); }
.pcx .pc-table tr:nth-child(even) td { background: rgba(0,0,0,0.18); }
.pcx .pc-table td.name { font-family: var(--display); font-weight: 700; color: var(--text); }
.pcx .pc-table td.hot { color: var(--amber); } .pcx .pc-table td.heal { color: var(--green); } .pcx .pc-table td.crit { color: var(--gold-soft); }
.pcx .pc-table td.z { color: var(--muted); }
.pcx .pc-cms-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 26px; border-top: 1px solid var(--border); background: rgba(0,0,0,0.22); }

/* ===================== LOOT PILE (.pc-lp / .pc-loot-item / .pc-cointray) ===================== */
.pcx .pc-lp-head { display: flex; align-items: flex-start; gap: 16px; padding: 22px 26px 16px; border-bottom: 1px solid var(--border);
  background: radial-gradient(ellipse 60% 130% at 14% 0%, rgba(255,170,50,0.08), transparent 60%); }
.pcx .pc-lp-ico { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  background: radial-gradient(circle at 40% 32%, rgba(255,200,90,0.2), transparent 66%); border: 1px solid rgba(255,215,0,0.3); }
.pcx .pc-lp-title { font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: 0.5px;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold); }
.pcx .pc-lp-sub { font-family: var(--prose); font-style: italic; font-size: 0.84rem; color: var(--dim); margin-top: 3px; }
.pcx .pc-lp-total { margin-left: auto; text-align: right; flex-shrink: 0; padding-right: 42px; }
.pcx .pc-lp-total .k { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.pcx .pc-lp-total .v { font-family: var(--mono); font-size: 1rem; font-weight: 600; color: var(--gold-soft); }
.pcx .pc-lp-body { padding: 18px 26px 20px; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 20px; }
.pcx .pc-lp-sec { display: flex; flex-direction: column; gap: 11px; }
.pcx .pc-lp-sechead { font-family: var(--display); font-size: 0.74rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-soft);
  display: flex; align-items: baseline; gap: 10px; }
.pcx .pc-lp-sechead .ct { font-family: var(--body); font-size: 0.72rem; letter-spacing: 0; text-transform: none; font-style: italic; color: var(--muted); }
.pcx .pc-loot { display: flex; flex-direction: column; gap: 8px; }
.pcx .pc-loot-item { --rc: #9d9d9d; display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: 11px; background: var(--surface2); border: 1px solid var(--border); transition: border-color .14s, opacity .14s, background .14s; cursor: pointer; }
.pcx .pc-loot-item.rar-common { --rc: #9d9d9d; } .pcx .pc-loot-item.rar-uncommon { --rc: #1eff00; }
.pcx .pc-loot-item.rar-rare { --rc: #0070dd; } .pcx .pc-loot-item.rar-very_rare { --rc: #a335ee; }
.pcx .pc-loot-item.rar-legendary { --rc: #ff8000; } .pcx .pc-loot-item.rar-artifact { --rc: #e6cc80; }
.pcx .pc-loot-item.rar-unidentified { --rc: #9d9d9d; }
.pcx .pc-loot-item:has(input:checked) { border-color: rgba(255,215,0,0.5); background: rgba(255,215,0,0.05); }
.pcx .pc-loot-item.claimed { opacity: 0.5; }
.pcx .pc-loot-ico { position: relative; width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; background: radial-gradient(ellipse 70% 70% at 50% 38%, color-mix(in oklab, var(--rc) 18%, var(--surface3)), var(--surface));
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--rc) 65%, transparent); }
.pcx .pc-loot-main { flex: 1; min-width: 0; }
.pcx .pc-loot-name { font-family: var(--display); font-weight: 700; font-size: 0.98rem; color: var(--text); }
.pcx .pc-loot-meta { display: flex; align-items: center; gap: 9px; margin-top: 3px; flex-wrap: wrap; }
.pcx .pc-loot-rar { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.3px; text-transform: capitalize; color: var(--rc); }
.pcx .pc-loot-cat { font-size: 0.76rem; color: var(--dim); }
.pcx .pc-loot-val { font-family: var(--mono); font-size: 0.74rem; color: var(--gold-soft); }
.pcx .pc-loot-unid { font-size: 0.76rem; font-style: italic; color: var(--muted); }
.pcx .pc-loot-check { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--gold); cursor: pointer; }
.pcx .pc-cointray { display: flex; flex-direction: column; gap: 11px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 15px 16px; }
.pcx .pc-coinrow { display: flex; align-items: center; gap: 12px; }
.pcx .pc-coin { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 0.72rem; color: rgba(26,18,5,0.8); }
.pcx .pc-coin-avail { flex: 1; font-size: 0.88rem; color: var(--dim); }
.pcx .pc-coin-avail b { font-family: var(--mono); }
.pcx .pc-stepper { display: flex; align-items: center; border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.pcx .pc-stepper button { width: 28px; height: 28px; background: var(--surface3); border: 0; color: var(--text); cursor: pointer; font-size: 0.95rem; transition: background .12s; }
.pcx .pc-stepper button:hover { background: rgba(255,215,0,0.15); }
.pcx .pc-stepper input { width: 42px; height: 28px; text-align: center; font-family: var(--mono); font-size: 0.82rem; color: var(--gold-soft); background: rgba(0,0,0,0.3); border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); -moz-appearance: textfield; }
.pcx .pc-stepper input::-webkit-outer-spin-button, .pcx .pc-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pcx .pc-allbtn { font-family: var(--body); font-size: 0.72rem; font-weight: 600; color: var(--dim); background: var(--surface3); border: 1px solid var(--border); border-radius: 7px; padding: 5px 11px; cursor: pointer; flex-shrink: 0; transition: all .13s; }
.pcx .pc-allbtn:hover { color: var(--gold-soft); border-color: rgba(255,215,0,0.4); }
.pcx .pc-takesummary { display: flex; align-items: center; gap: 9px; padding-top: 11px; border-top: 1px dashed var(--border); font-size: 0.84rem; color: var(--dim); flex-wrap: wrap; }
.pcx .pc-takesummary b { color: var(--gold-soft); font-family: var(--mono); }
.pcx .pc-takeall { font-size: 0.76rem; color: var(--gold-soft); cursor: pointer; font-weight: 600; background: none; border: 0; }
.pcx .pc-takeall:hover { text-decoration: underline; }
.pcx .pc-coinactions { margin-left: auto; display: inline-flex; align-items: center; gap: 16px; }
.pcx .pc-lp-empty { font-family: var(--prose); font-style: italic; font-size: 0.9rem; color: var(--muted); }
.pcx .pc-note { padding: 6px 10px; border: 1px solid rgba(255,184,74,0.4); background: rgba(255,184,74,0.08); border-radius: 8px; font-size: 0.84rem; font-style: italic; color: var(--dim); }
.pcx .pc-lp-foot { display: flex; align-items: center; gap: 10px; padding: 14px 26px; border-top: 1px solid var(--border); background: rgba(0,0,0,0.22); }
.pcx .pc-lp-foot .spacer { flex: 1; }
.pcx .pc-leaderhint { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-style: italic; color: var(--muted); }
/* ===== Level-Up modal (.lu-*) — faithful port of redesign session.css (S169). Rendered inside the
   shared #modal-content wrapped in .ss; native inputs hidden, custom .lu-mark + state via :has(). */
.ss .lu-close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.95rem; background: var(--surface2); border: 1px solid var(--border-light); color: var(--text-dim); }
.ss .lu-close:hover { background: var(--surface3); color: var(--text); }
.ss .lu-title { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; letter-spacing: 1.5px; text-transform: uppercase; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.05; margin-bottom: 12px; text-align: center; }
.ss .lu-sub { font-family: var(--font-read); font-size: 1.32rem; color: var(--text-dim); margin-bottom: 26px; text-align: center; }
.ss .lu-sub strong { color: var(--gold); font-weight: 700; font-style: normal; }
.ss .lu-body { text-align: left; display: flex; flex-direction: column; gap: 26px; }
.ss .lu-seclabel { font-family: var(--font-display); font-weight: 700; font-size: 0.94rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 13px; }
.ss .lu-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 20px; }
.ss .lu-card + .lu-card { margin-top: 12px; }
.ss .lu-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; color: var(--text); }
.ss .lu-card-desc { font-family: var(--font-read); font-size: 1.02rem; color: var(--text-dim); margin-top: 7px; line-height: 1.5; }
.ss .lu-choice { margin-top: 15px; background: rgba(0,0,0,0.32); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 16px 18px; }
.ss .lu-choice-label { font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; color: var(--gold-soft); margin-bottom: 13px; }
.ss .lu-options { display: flex; flex-direction: column; gap: 10px; max-height: 280px; overflow-y: auto; }
.ss .lu-opt { display: flex; align-items: flex-start; gap: 13px; width: 100%; text-align: left; cursor: pointer; transition: all .15s; background: rgba(0,0,0,0.32); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 15px 17px; }
.ss .lu-opt:hover { border-color: var(--border-light); background: rgba(255,255,255,0.02); }
.ss .lu-opt:has(input:checked) { border-color: rgba(255,215,0,0.55); background: rgba(255,215,0,0.06); box-shadow: inset 0 0 26px rgba(255,215,0,0.04); }
.ss .lu-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.ss .lu-mark { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--muted); flex-shrink: 0; margin-top: 2px; transition: all .15s; position: relative; }
.ss .lu-mark.box { border-radius: 5px; }
.ss .lu-opt:hover .lu-mark { border-color: var(--text-dim); }
.ss .lu-opt:has(input:checked) .lu-mark { border-color: var(--gold); }
.ss .lu-opt:has(input:checked) .lu-mark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(255,215,0,0.6); }
.ss .lu-opt:has(input:checked) .lu-mark.box::after { border-radius: 2px; inset: 2px; }
.ss .lu-opt-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ss .lu-opt-name { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; color: var(--text); }
.ss .lu-opt-desc { font-family: var(--font-read); font-size: 0.98rem; color: var(--text-dim); line-height: 1.45; }
/* v1.8.1301 — grid-deferred options offered but DISABLED with a "Coming soon"
   note (Battle Master Evasive Footwork; the feat picker reuses .lu-opt too).
   feedback_no_inert_pickable_options / grid-dependencies.md:438. */
.ss .lu-opt.lu-soon { opacity: .5; cursor: not-allowed; filter: grayscale(.5); }
.ss .lu-opt.lu-soon:hover { border-color: var(--border); background: rgba(0,0,0,0.32); }
.ss .lu-opt-soon { font-size: .72rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--amber); margin-top: 3px; }
.ss .lu-chip { display: inline-flex; align-items: flex-start; gap: 6px; cursor: pointer; transition: all .15s; background: rgba(0,0,0,0.32); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 0.85rem; }
.ss .lu-chip:hover { border-color: var(--border-light); }
.ss .lu-chip:has(input:checked) { border-color: rgba(255,215,0,0.55); background: rgba(255,215,0,0.06); }
.ss .lu-chip input { margin-top: 3px; flex-shrink: 0; accent-color: var(--gold); }
.ss .lu-footer { display: flex; justify-content: flex-end; margin-top: 26px; }
.ss .lu-confirm { padding: 14px 32px; font-size: 1.05rem; }
/* (Loot Pile .lp-* tier-2 block removed S238 — superseded by the .pcx kit above;
   markup rewritten to .pc-* in js/inventory.js + index.html.) */
/* ===== Settings modal (.set-*) — ported from redesign session.css, S169. Keeps the .settings-panel
   show wrapper + .settings-overlay scrim; swaps the card to .set-modal. Per-control TTS gating preserved. */
.ss.settings-panel .set-modal, .ss .set-modal { width: min(900px, 94vw); max-height: min(860px, 92vh); display: flex; flex-direction: column; background: linear-gradient(180deg,#14131a,#0e0d12); border: 1px solid var(--border-light); border-radius: var(--radius); box-shadow: 0 30px 90px rgba(0,0,0,0.7); position: relative; overflow: hidden; z-index: 1; }
.ss .set-close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 9px; z-index: 3; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.95rem; background: transparent; border: none; color: var(--muted); }
.ss .set-close:hover { color: var(--text); }
.ss .set-titlebar { padding: 24px 30px 16px; }
.ss .set-title { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; letter-spacing: 1.5px; text-transform: uppercase; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.ss .set-tabs { display: flex; gap: 32px; padding: 0 30px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ss .set-tab { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; padding: 12px 2px 14px; margin-bottom: -1px; cursor: pointer; }
.ss .set-tab:hover { color: var(--text-dim); }
.ss .set-tab.active { color: var(--gold-soft); border-bottom-color: var(--gold); }
.ss .set-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.ss .set-scroll { padding: 26px 30px 32px; }
.ss .set-section { margin-bottom: 30px; }
.ss .set-section:last-child { margin-bottom: 0; }
.ss .set-seclabel { font-family: var(--font-display); font-size: 1rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text); margin-bottom: 16px; font-weight: 700; }
.ss .set-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ss .set-theme { text-align: left; cursor: pointer; padding: 0; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .15s; }
.ss .set-theme:hover { border-color: var(--border-light); }
.ss .set-theme.active { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(255,215,0,0.3), 0 0 22px rgba(255,170,50,0.12); }
.ss .set-theme-sw { display: flex; height: 54px; }
.ss .set-theme-sw > div { flex: 1; }
.ss .set-theme-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--text); text-align: center; margin-top: 12px; }
.ss .set-theme-desc { font-size: 0.82rem; color: var(--text-dim); text-align: center; padding: 4px 12px 16px; }
.ss .set-dice { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.ss .set-dicecard { cursor: pointer; padding: 12px; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm); transition: border-color .15s; text-align: center; }
.ss .set-dicecard:hover { border-color: var(--border-light); }
.ss .set-dicecard.active { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(255,215,0,0.3); }
.ss .set-dice-sw { height: 58px; border-radius: var(--radius-xs); margin-bottom: 10px; box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), 0 2px 8px rgba(0,0,0,0.3); }
.ss .set-dice-name { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; color: var(--text); letter-spacing: 0.5px; }
.ss .set-dice-desc { font-size: 0.74rem; color: var(--text-dim); margin-top: 3px; line-height: 1.35; }
.ss .set-seg { display: flex; gap: 12px; flex-wrap: wrap; }
.ss .set-segbtn { font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; padding: 11px 24px; border-radius: var(--radius-sm); cursor: pointer; background: var(--surface2); border: 1px solid var(--border-light); color: var(--text); transition: all .15s; }
.ss .set-segbtn:hover { background: var(--surface3); }
.ss .set-segbtn.active { background: var(--gold-grad); color: #1a1205; border-color: transparent; font-weight: 700; }
.ss .set-vol { margin-bottom: 22px; }
.ss .set-vol-label { font-size: 0.92rem; color: var(--text-dim); margin-bottom: 10px; }
.ss .set-pw { color: var(--muted); font-size: 0.84em; }
.ss .set-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px; outline: none; cursor: pointer; background: linear-gradient(90deg, #fff 0%, #fff var(--pct, 0%), var(--surface3) var(--pct, 0%), var(--surface3) 100%); }
.ss .set-range.gold { background: linear-gradient(90deg, var(--gold) 0%, var(--gold) var(--pct, 0%), var(--surface3) var(--pct, 0%), var(--surface3) 100%); }
.ss .set-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #e8e8ec; border: 1px solid rgba(0,0,0,0.3); box-shadow: 0 1px 4px rgba(0,0,0,0.5); cursor: pointer; }
.ss .set-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #e8e8ec; border: 1px solid rgba(0,0,0,0.3); cursor: pointer; }
.ss .set-range:disabled::-webkit-slider-thumb { background: var(--muted); cursor: not-allowed; }
.ss .set-note { font-size: 0.86rem; color: var(--text-dim); line-height: 1.5; margin-top: 4px; }
.ss .set-leader-banner { font-size: 0.92rem; color: var(--gold-soft); background: rgba(255,215,0,0.05); border: 1px solid rgba(255,215,0,0.18); border-left: 3px solid var(--gold); border-radius: var(--radius-xs); padding: 13px 16px; margin-bottom: 20px; }
.ss .set-leader-banner.locked { color: var(--text-dim); background: var(--surface2); border-color: var(--border-light); border-left-color: var(--muted); }
.ss .set-checkrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.ss .set-check { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 1rem; color: var(--text); }
.ss .set-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.ss .set-checkbox { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border-light); background: var(--surface2); flex-shrink: 0; position: relative; transition: all .15s; }
.ss .set-check input:checked + .set-checkbox { background: var(--blue); border-color: var(--blue); }
.ss .set-check input:checked + .set-checkbox::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.82rem; font-weight: 700; }
.ss .set-check.is-locked { opacity: 0.55; cursor: default; }
.ss .set-narr-controls { transition: opacity .2s; }
.ss .set-narr-controls.disabled { opacity: 0.4; pointer-events: none; }
.ss .set-voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 6px; }
.ss .set-field { display: flex; flex-direction: column; gap: 7px; }
.ss .set-flabel { font-size: 0.88rem; color: var(--text-dim); }
.ss .set-select { width: 100%; height: 44px; }
.ss .set-locked { position: relative; opacity: 0.55; }
/* M6 — player-avatars Slice 1: Account-tab display-name row + color swatch picker. */
.ss .set-name-row { display: flex; gap: 8px; align-items: stretch; }
.ss .set-name-row .cs-input { flex: 1; }
/* M6 Settings plumbing — inline Account forms (change password / email). Display toggled inline. */
.ss .set-acct-form { flex-direction: column; gap: 8px; margin: 8px 0 6px; }
.ss .set-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.ss .set-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25); transition: transform 0.12s ease, border-color 0.12s ease; }
.ss .set-swatch:hover { transform: scale(1.1); }
.ss .set-swatch.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), inset 0 0 0 1px rgba(0,0,0,0.25); }
/* M6 avatars — the "choose your face" picker grid (shared: Settings Account tab + the post-signup intro). */
.av-sec-lbl { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); margin: 12px 0 8px; }
.av-sec-lbl:first-child { margin-top: 0; }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, 56px); gap: 10px; }
.av-tile { position: relative; width: 56px; height: 56px; border-radius: 12px; border: 2px solid var(--border-light, #2a2320); background: var(--surface2, #1a1714); overflow: hidden; cursor: pointer; padding: 0; transition: border-color 0.12s ease, transform 0.12s ease; }
.av-tile:hover { transform: scale(1.05); border-color: var(--text-dim); }
.av-tile.active { border-color: var(--gold, #FFD700); box-shadow: 0 0 0 2px rgba(255,215,0,0.25); }
.av-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-tile.av-mono { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; color: var(--text-dim); letter-spacing: 0.02em; }
.ss .set-locked input, .ss .set-locked select { pointer-events: none; }
.ss .set-lockicon { margin-left: 7px; font-size: 0.82em; filter: grayscale(0.3); }
/* ===== Vendor / Shop modal (.vd-*) — full port of redesign session.css (S169). Reuses .modal-overlay
   backdrops; keeps the live staging machine + qty steppers + stolen/fence/preferred badges + restock. */
.ss .vd-modal { width: min(1080px, 96vw); max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: linear-gradient(180deg,#16151d,#100f15); border: 1px solid var(--border-light); border-radius: var(--radius); box-shadow: 0 30px 90px rgba(0,0,0,0.72); position: relative; overflow: hidden; }
.ss .vd-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 9px; z-index: 4; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.95rem; background: var(--surface2); border: 1px solid var(--border-light); color: var(--text-dim); }
.ss .vd-close:hover { background: var(--surface3); color: var(--text); }
.ss .vd-header { padding: 22px 26px 14px; }
.ss .vd-title { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; letter-spacing: 1px; text-transform: uppercase; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.05; display: flex; align-items: center; gap: 12px; padding-right: 42px; }
.ss .vd-shopico { -webkit-text-fill-color: initial; font-size: 1.4rem; }
.ss .vd-purses { display: flex; justify-content: space-between; padding: 11px 26px; background: rgba(0,0,0,0.28); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 0.95rem; color: var(--text-dim); flex-wrap: wrap; gap: 6px; }
.ss .vd-purse strong { color: var(--gold-soft); font-family: var(--mono); font-weight: 600; }
.ss .vd-cols { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.ss .vd-col { padding: 18px 20px 22px; min-width: 0; }
.ss .vd-col:first-child { border-right: 1px solid var(--border); }
.ss .vd-colhead { font-family: var(--font-display); font-size: 0.74rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 13px; }
.ss .vd-list { display: flex; flex-direction: column; gap: 9px; }
.ss .vd-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 13px 15px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: all .15s; flex-wrap: wrap; }
.ss .vd-row:hover { border-color: var(--border-light); background: var(--surface3); }
.ss .vd-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--muted); flex-shrink: 0; transition: all .15s; }
.ss .vd-row.staged { background: rgba(255,215,0,0.06); border-color: rgba(255,215,0,0.4); }
.ss .vd-row.staged.sell { background: rgba(74,255,158,0.06); border-color: rgba(74,255,158,0.4); }
.ss .vd-row.staged .vd-radio { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 7px rgba(255,215,0,0.5); }
.ss .vd-row.staged.sell .vd-radio { border-color: var(--green); background: var(--green); box-shadow: 0 0 7px rgba(74,255,158,0.5); }
.ss .vd-rowico { font-size: 1.05rem; flex-shrink: 0; }
.ss .vd-rowname { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss .vd-info { font-size: 0.82rem; color: var(--muted); cursor: help; flex-shrink: 0; background: none; border: none; padding: 0; }
.ss .vd-info:hover { color: var(--text-dim); }
.ss .vd-preferred { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.3px; color: var(--green); background: rgba(74,255,158,0.1); border: 1px solid rgba(74,255,158,0.32); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.ss .vd-credit { font-family: var(--mono); font-size: 0.92rem; font-weight: 600; color: var(--green); flex-shrink: 0; }
.ss .vd-preferred + .vd-credit { margin-left: 8px; }
.ss .vd-barterico { font-size: 0.92rem; flex-shrink: 0; opacity: 0.8; background: none; border: none; cursor: pointer; }
.ss .vd-price { font-family: var(--mono); font-size: 0.95rem; font-weight: 600; color: var(--gold-soft); flex-shrink: 0; }
.ss .vd-rowright { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ss .vd-barterico + .vd-price { margin-left: 10px; }
.ss .vd-fence { font-size: 0.66rem; font-weight: 600; color: #ff8c00; background: rgba(255,140,0,0.14); border: 1px solid rgba(255,140,0,0.4); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.ss .vd-stolen { font-size: 0.82rem; flex-shrink: 0; }
.ss .vd-qty { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ss .vd-qty button { width: 24px; height: 24px; border: 1px solid var(--border-light); background: var(--surface3); color: var(--text-dim); border-radius: var(--radius-xs); cursor: pointer; font-size: 0.9rem; line-height: 1; }
.ss .vd-qty button:hover:not(:disabled) { background: var(--surface2); color: var(--text); }
.ss .vd-qty button:disabled { opacity: 0.4; cursor: not-allowed; }
.ss .vd-qty .q { font-family: var(--mono); font-size: 0.85rem; min-width: 18px; text-align: center; }
.ss .vd-stagebar { padding: 14px 26px; background: rgba(0,0,0,0.25); border-top: 1px solid var(--border); }
.ss .vd-stagebar.active { background: rgba(255,215,0,0.04); }
.ss .vd-hint { font-family: var(--font-read); font-style: italic; font-size: 0.95rem; color: var(--muted); }
.ss .vd-stage-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ss .vd-stage-lines { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; color: var(--text-dim); min-width: 0; }
.ss .vd-stage-line em { font-family: var(--font-display); font-style: normal; font-size: 0.66rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.ss .vd-stage-line b { font-family: var(--mono); font-weight: 600; }
.ss .vd-stage-line b.g, .ss .vd-net strong.g { color: var(--green); }
.ss .vd-stage-line b.c, .ss .vd-net strong.c { color: var(--gold-soft); }
.ss .vd-net { flex-shrink: 0; display: flex; align-items: baseline; gap: 8px; }
.ss .vd-net span { font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.ss .vd-net strong { font-family: var(--mono); font-size: 1.15rem; font-weight: 700; }
.ss .vd-warn { color: var(--danger); font-size: 0.82rem; margin-top: 4px; }
.ss .vd-footer { display: flex; align-items: center; gap: 10px; padding: 15px 26px; border-top: 1px solid var(--border); background: rgba(0,0,0,0.22); flex-wrap: wrap; }
.ss .vd-footer-spacer { flex: 1; }
.ss .vd-restock { padding: 10px 26px; background: rgba(212,175,55,0.10); border-bottom: 1px solid var(--border); font-size: 0.82rem; color: var(--text-dim); }
/* nested Ask / Barter dialogs */
.ss .vd-dlg { width: min(720px, 94vw); max-height: calc(100vh - 80px); display: flex; flex-direction: column; background: linear-gradient(180deg,#1a1822,#121119); border: 1px solid var(--border-light); border-radius: var(--radius); box-shadow: 0 30px 90px rgba(0,0,0,0.75); position: relative; overflow: hidden; }
.ss .vd-dlg-title { font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; letter-spacing: 1px; text-transform: uppercase; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.05; display: flex; align-items: center; gap: 11px; padding: 24px 26px 18px; padding-right: 46px; }
.ss .vd-dlg-ico { -webkit-text-fill-color: initial; font-size: 1.2rem; }
.ss .vd-dlg-body { padding: 28px 26px 30px; }
.ss .vd-dlg-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.ss .vd-dlg-lead { font-family: var(--font-read); font-style: italic; font-size: 1.15rem; color: var(--text); margin: 0 0 8px; }
.ss .vd-dlg-sub { font-family: var(--font-read); font-style: italic; font-size: 0.98rem; color: var(--text-dim); margin: 0; line-height: 1.5; }
.ss .vd-dlg-sub strong { color: var(--gold-soft); font-style: normal; }
.ss .vd-dlg-divider { height: 1px; background: var(--border); margin: 0 26px; }
.ss .vd-barter-summary { margin: 0 26px; padding: 15px 18px; background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 7px; font-size: 0.95rem; color: var(--text-dim); }
.ss .vd-barter-summary strong { color: var(--text); font-weight: 700; }
.ss .vd-barter-summary .g { color: var(--gold-soft); font-family: var(--mono); }
.ss .vd-barter-sep { color: var(--muted); margin: 0 7px; }
.ss .vd-field { padding: 18px 26px 4px; position: relative; }
.ss .vd-field textarea { width: 100%; min-height: 92px; resize: vertical; padding: 13px 15px; font-family: var(--font-body); font-size: 0.98rem; line-height: 1.5; color: var(--text); background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-sm); box-sizing: border-box; }
.ss .vd-field textarea:focus { outline: none; border-color: rgba(255,215,0,0.5); box-shadow: 0 0 0 3px rgba(255,215,0,0.12); }
.ss .vd-field textarea::placeholder { color: var(--muted); }
.ss .vd-count { display: block; text-align: right; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); margin-top: 6px; }
.ss .vd-dlg-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 26px 22px; }
.ss .vd-msg { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 10px; font-size: 0.92rem; line-height: 1.5; }
.ss .vd-msg.player { background: rgba(74,158,255,0.08); border: 1px solid rgba(74,158,255,0.25); color: var(--text); }
.ss .vd-msg.vendor { background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim); }
/* ===== Journal modal (.jr-*) — full port of redesign session.css (S169). Reuses .modal-overlay
   backdrop; keeps all live features (6 tabs, search, badges, portraits, duplicate-merge, sidebar). */
.ss .jr-modal { width: min(1140px, 96vw); height: calc(100vh - 36px); max-height: 880px; display: flex; flex-direction: column; background: linear-gradient(180deg,#16151d,#100f15); border: 1px solid var(--border-light); border-radius: var(--radius); box-shadow: 0 30px 90px rgba(0,0,0,0.7); position: relative; overflow: hidden; }
.ss .jr-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 9px; z-index: 3; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.95rem; background: var(--surface2); border: 1px solid var(--border-light); color: var(--text-dim); }
.ss .jr-close:hover { background: var(--surface3); color: var(--text); }
.ss .jr-titlebar { padding: 22px 26px 14px; }
.ss .jr-title { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; letter-spacing: 1px; text-transform: uppercase; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.ss .jr-tabs { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 0 26px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ss .jr-tab { font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; padding: 11px 8px; cursor: pointer; transition: color .15s; display: inline-flex; align-items: center; gap: 7px; }
.ss .jr-tab:hover { color: var(--text-dim); }
.ss .jr-tab.active { color: var(--gold-soft); border-bottom-color: var(--gold); }
.ss .jr-tab .ti { color: var(--gold); }
.ss .jr-tabcount { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; }
.ss .jr-tab.active .jr-tabcount { color: var(--gold-soft); border-color: rgba(255,215,0,0.3); }
.ss .jr-toolbar { display: flex; gap: 10px; padding: 16px 26px; flex-shrink: 0; }
.ss .jr-search { flex: 1; background: var(--surface2); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 11px 15px; color: var(--text); font-family: var(--font-body); font-size: 0.92rem; outline: none; }
.ss .jr-search::placeholder { color: var(--muted); }
.ss .jr-search:focus { border-color: rgba(255,215,0,0.4); }
.ss .jr-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px 1fr; gap: 18px; padding: 0 26px 24px; }
.ss .jr-list { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 2px; }
.ss .jr-listitem { display: flex; align-items: center; gap: 11px; padding: 13px 15px; text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: all .15s; }
.ss .jr-listitem:hover { border-color: var(--border-light); background: var(--surface2); }
.ss .jr-listitem.active { border-color: rgba(255,215,0,0.6); background: rgba(255,215,0,0.05); }
/* Live-feature preservation: recently-edited highlight + quest status (kept from .journal-row) */
.ss .jr-listitem.recent { border-left: 3px solid var(--green); }
.ss .jr-listitem.recent-manual { border-left-color: var(--gold); }
.ss .jr-listitem.recent-hybrid { border-left-color: var(--blue); }
.ss .jr-listitem.quest-complete .jr-li-name { text-decoration: line-through; opacity: 0.65; }
.ss .jr-listitem.quest-failed .jr-li-name { text-decoration: line-through; opacity: 0.65; color: var(--danger); }
.ss .jr-li-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ss .jr-li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ss .jr-li-name { font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; color: var(--text); }
.ss .jr-li-sub { font-size: 0.76rem; color: var(--text-dim); }
.ss .jr-ai { font-size: 0.8rem; color: var(--blue); background: rgba(74,158,255,0.12); border: 1px solid rgba(74,158,255,0.35); border-radius: 6px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ss .jr-detail { min-height: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ss .jr-detailinner { height: 100%; display: flex; flex-direction: column; }
.ss .jr-detailhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 16px; border-bottom: 1px solid var(--border); }
.ss .jr-dname { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: 0.5px; text-transform: uppercase; line-height: 1.1; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-flex; align-items: center; gap: 10px; }
.ss .jr-dname .jr-ai { -webkit-text-fill-color: var(--blue); }
.ss .jr-dkind { font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 5px; opacity: 0.85; }
.ss .jr-dactions { display: flex; gap: 8px; flex-shrink: 0; padding-right: 8px; flex-wrap: wrap; }
.ss .jr-dscroll { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px 24px; }
.ss .jr-media-row { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; flex-wrap: wrap; }
.ss .jr-image { width: 280px; flex-shrink: 0; aspect-ratio: 16 / 11; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-light); }
.ss .jr-image img { width: 100%; height: 100%; object-fit: cover; }
.ss .jr-image-ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 2.4rem; background: radial-gradient(ellipse at 50% 0%, rgba(74,158,255,0.12), transparent 70%), linear-gradient(160deg, #1d2433, #14131b); color: rgba(255,255,255,0.4); }
.ss .jr-image-ph span { font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase; }
.ss .jr-portrait { width: 150px; height: 150px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-light); }
.ss .jr-portrait img { width: 100%; height: 100%; object-fit: cover; }
.ss .jr-portrait-empty { width: 150px; height: 150px; flex-shrink: 0; border: 1px dashed var(--border-light); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-style: italic; color: var(--muted); font-size: 0.86rem; text-align: center; }
.ss .jr-regen { align-self: flex-start; }
.ss .jr-ddesc { font-family: var(--font-read); font-size: 1.08rem; line-height: 1.65; color: rgba(241,238,245,0.88); text-wrap: pretty; }
.ss .jr-divider { height: 1px; background: var(--border); margin: 20px 0; }
.ss .jr-fields { display: flex; flex-direction: column; gap: 10px; }
.ss .jr-frow { display: flex; align-items: baseline; gap: 18px; }
.ss .jr-fk { font-size: 0.9rem; color: var(--muted); min-width: 130px; }
.ss .jr-fv { font-size: 0.95rem; color: var(--text); font-weight: 500; }
.ss .jr-fv.green { color: var(--green); }
.ss .jr-fv.gold { color: var(--gold-soft); }
.ss .jr-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.ss .jr-tag { font-size: 0.78rem; color: var(--text-dim); background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; }
.ss .jr-meta { font-size: 0.78rem; color: var(--muted); font-style: italic; margin-top: 18px; }
/* M6 NPC history — the "Appearances" timeline in the NPC journal detail. */
.ss .jr-appearances { display: flex; flex-direction: column; gap: 8px; }
.ss .jr-appearances-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--gold-soft); font-weight: 700; }
.ss .jr-appearances-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.ss .jr-appearances-list li { display: flex; align-items: baseline; gap: 10px; font-size: 0.88rem; padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.ss .jr-appearances-list li:last-child { border-bottom: none; }
.ss .jr-app-turn { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 58px; flex-shrink: 0; }
.ss .jr-app-loc { color: var(--text); }
.ss .jr-empty { font-size: 0.88rem; color: var(--muted); font-style: italic; padding: 18px 6px; text-align: center; }
.ss .jr-empty.big { display: flex; align-items: center; justify-content: center; height: 100%; }
.ss .jr-form-head { padding: 20px 24px 14px; border-bottom: 1px solid var(--border); }
.ss .jr-form-title { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: 0.5px; text-transform: uppercase; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ss .jr-form { display: flex; flex-direction: column; gap: 16px; }
.ss .jr-field { display: flex; flex-direction: column; gap: 6px; }
.ss .jr-flabel { font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.ss .jr-flabel-hint { letter-spacing: 0; text-transform: none; opacity: 0.8; }
.ss .jr-input { font-family: var(--font-body); font-size: 0.95rem; color: var(--text); background: var(--surface2); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 11px 14px; outline: none; width: 100%; box-sizing: border-box; }
.ss .jr-input::placeholder { color: var(--muted); }
.ss .jr-input:focus { border-color: rgba(255,215,0,0.4); }
.ss .jr-textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.ss .jr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ss .jr-form-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--border); }
.ss .jr-dname-plain { -webkit-text-fill-color: var(--text); }
.ss .jr-dupe-group { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 14px; }
.ss .jr-dupe-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--gold-soft); display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ss .jr-dupe-count { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; color: var(--amber); background: rgba(255,184,74,0.1); border: 1px solid rgba(255,184,74,0.35); border-radius: 999px; padding: 3px 10px; }
.ss .jr-dupe-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ss .jr-dupe-row:last-of-type { border-bottom: none; }
.ss .jr-dupe-cat { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); min-width: 80px; }
.ss .jr-dupe-sub { font-size: 0.84rem; color: var(--muted); }
.ss .jr-dupe-merge { margin-top: 12px; }
.ss .jr-dupe-clean { text-align: center; padding: 50px 24px; }
.ss .jr-dupe-clean-ico { width: 52px; height: 52px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--green); background: rgba(74,255,158,0.1); border: 1px solid rgba(74,255,158,0.4); }
.ss .jr-dupe-clean-t { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.5px; color: var(--gold-soft); margin: 14px 0 8px; }
.ss .jr-dupe-clean-s { font-size: 0.88rem; color: var(--text-dim); line-height: 1.55; max-width: 400px; margin: 0 auto; }
/* ===== DM Tools / Admin panel (.dm-*) — S169. Shell/tabs/section-heads/buttons on the design
   components; the 500-line form body is restyled via scoped .dm-modal overrides (Character-Sheet
   pattern) so all 40 input ids + handlers stay intact. */
.ss .dm-modal { width: min(1100px, 96vw); max-width: min(1100px, 96vw); max-height: calc(100vh - 30px); overflow: hidden; display: flex; flex-direction: column; background: #0c0b10; border-radius: 18px; position: relative; padding: 30px 34px 4px; border: 1.5px solid rgba(255,184,74,0.55); box-shadow: 0 0 0 1px rgba(255,215,0,0.12), 0 0 46px rgba(255,170,60,0.16), 0 30px 90px rgba(0,0,0,0.72); }
.ss .dm-close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 9px; z-index: 3; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.95rem; background: var(--surface2); border: 1px solid var(--border-light); color: var(--text-dim); }
.ss .dm-close:hover { background: var(--surface3); color: var(--text); }
.ss .dm-title { font-family: var(--font-display); font-weight: 800; font-size: 2.05rem; letter-spacing: 0.5px; font-variant-caps: small-caps; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.ss .dm-tabs { display: flex; gap: 6px; margin: 18px 0 0; border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap; }
.ss .dm-tab { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 11px 11px 0 0; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 1.02rem; color: var(--text-dim); background: transparent; border: 1px solid transparent; border-bottom: none; transition: all .15s; margin-bottom: -1px; }
.ss .dm-tab:hover { color: var(--text); }
.ss .dm-tab.active { color: var(--gold); background: var(--surface2); border-color: var(--border-light); }
.ss .dm-tab-ico { font-size: 1.02rem; }
.ss .dm-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 2px 26px; }
/* section heads — live .admin-subheader restyled to the .dm-sechead look */
.ss .dm-modal .admin-subheader { display: flex; align-items: center; gap: 10px; margin: 24px 0 10px; padding-top: 18px; border-top: 1px solid var(--border); font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: 1.2px; font-variant-caps: small-caps; color: var(--gold-soft); }
.ss .dm-modal .admin-subheader:first-child { margin-top: 6px; padding-top: 0; border-top: none; }
.ss .dm-modal .form-label, .ss .dm-modal .form-group > label { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); }
/* form controls — design dm-text/dm-select look applied to live .form-input/.form-select (ids preserved) */
.ss .dm-modal .form-input, .ss .dm-modal .form-select, .ss .dm-modal input[type="number"], .ss .dm-modal input[type="text"] { background: #15141c; border: 1px solid var(--border-light); border-radius: 11px; padding: 11px 14px; color: var(--text); font-family: var(--font-body); font-size: 1rem; outline: none; box-sizing: border-box; }
.ss .dm-modal .form-input:focus, .ss .dm-modal .form-select:focus, .ss .dm-modal input:focus { border-color: rgba(255,215,0,0.5); }
.ss .dm-modal textarea.form-input { min-height: 92px; line-height: 1.5; resize: vertical; }
.ss .dm-modal .form-input::placeholder { color: var(--muted); }
/* buttons — design gold/soft look applied to live .btn variants */
.ss .dm-modal .btn-primary { background: var(--gold-grad); color: #1a1206; border: none; font-weight: 700; border-radius: 11px; }
.ss .dm-modal .btn-primary:hover { filter: brightness(1.07); }
.ss .dm-modal .btn-secondary, .ss .dm-modal .btn:not(.btn-primary):not(.btn-danger) { background: var(--surface); border: 1px solid var(--border-light); color: var(--text); border-radius: 11px; font-weight: 600; }
.ss .dm-modal .btn-secondary:hover { background: var(--surface2); }
.ss .dm-modal .btn-danger { background: rgba(255,107,107,0.07); border: 1px solid rgba(255,107,107,0.4); color: var(--danger); border-radius: 11px; font-weight: 600; }
.ss .dm-modal .btn-sm { padding: 9px 16px; font-size: 0.92rem; }
/* sandbox toggle (Campaign tab) */
.ss .dm-sandbox { display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--border-light); border-radius: 12px; padding: 18px 20px; transition: all .15s; }
.ss .dm-sandbox:hover { background: var(--surface2); }
.ss .dm-sandbox.on, .ss .dm-sandbox:has(input:checked) { background: rgba(74,158,255,0.05); border-color: rgba(120,170,255,0.28); }
.ss .dm-sandbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.ss .dm-check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--muted); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 800; color: transparent; margin-top: 1px; }
.ss .dm-sandbox:has(input:checked) .dm-check { background: var(--green); border-color: var(--green); color: #07140e; box-shadow: 0 0 9px rgba(74,255,158,0.4); }
.ss .dm-sandbox-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ss .dm-sandbox-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: 1px; font-variant-caps: small-caps; color: var(--gold-soft); }
.ss .dm-sandbox-desc { font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.5px; line-height: 1.55; color: var(--text-dim); }
/* ===== Ability-activation modals (.ab-modal) — S169. No bespoke handoff; reskinned to the built
   .ss language. Shared scoped block restyles the legacy .modal chrome + JS-rendered body controls
   (section labels, selects/inputs/ranges, .btn buttons) so there's zero render-fn churn. Scoped to
   .ab-modal so it never bleeds to other modals. Add `ss` to the overlay + `ab-modal` to the .modal. */
.ss .ab-modal { background: linear-gradient(180deg,#16151d,#100f15); border: 1px solid var(--border-light); border-radius: var(--radius); box-shadow: 0 24px 70px rgba(0,0,0,0.6); }
.ss .ab-modal .modal-header { border-bottom: 1px solid var(--border); }
.ss .ab-modal .modal-header h2 { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-caps: small-caps; letter-spacing: 0.5px; }
.ss .ab-modal .modal-close { background: var(--surface2); border: 1px solid var(--border-light); color: var(--text-dim); border-radius: 9px; width: 32px; height: 32px; }
.ss .ab-modal .modal-close:hover { background: var(--surface3); color: var(--text); }
.ss .ab-modal .modal-section-label { font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); font-weight: 600; margin: 14px 0 7px; }
/* !important: the legacy render fns inline-style these controls (background/border/radius), so the
   override must beat inline. Contained to .ab-modal — no bleed to other modals. */
.ss .ab-modal select, .ss .ab-modal input[type="text"], .ss .ab-modal input[type="number"], .ss .ab-modal textarea { background: var(--surface2) !important; border: 1px solid var(--border-light) !important; border-radius: var(--radius-sm) !important; color: var(--text); outline: none; box-sizing: border-box; font-family: var(--font-body); }
.ss .ab-modal select:focus, .ss .ab-modal input:focus, .ss .ab-modal textarea:focus { border-color: rgba(255,215,0,0.4) !important; }
.ss .ab-modal input[type="range"] { accent-color: var(--gold); }
.ss .ab-modal .modal-footer { border-top: 1px solid var(--border); }
.ss .ab-modal .btn-primary { background: var(--gold-grad); color: #1a1206; border: none; font-weight: 700; border-radius: var(--radius-sm); }
.ss .ab-modal .btn-primary:hover:not(:disabled) { filter: brightness(1.07); }
.ss .ab-modal .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.ss .ab-modal .btn-secondary, .ss .ab-modal .btn:not(.btn-primary) { background: var(--surface2); border: 1px solid var(--border-light); color: var(--text); border-radius: var(--radius-sm); font-weight: 600; }
.ss .ab-modal .btn-secondary:hover { background: var(--surface3); }
.ss .details { display: flex; flex-direction: column; gap: 7px; }
.ss .details .row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 0.82rem; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ss .details .row:last-child { border-bottom: none; padding-bottom: 0; }
.ss .details .row .k { color: var(--muted); white-space: nowrap; }
.ss .details .row .v { color: var(--text); font-weight: 600; text-align: right; white-space: nowrap; }
.ss .details .row .v.gold { color: var(--gold-soft); }
.ss .inv-row, .ss .abil-row { display: flex; align-items: center; gap: 9px; padding: 8px 11px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-xs); font-size: 0.82rem; }
.ss .inv-row .ic { color: var(--gold-soft); }
.ss .abil-row .uses { margin-left: auto; font-size: 0.7rem; color: var(--muted); font-family: var(--mono); }
.ss .abil-row .uses.gold { color: var(--gold-soft); }
.ss .subtle-label { font-size: 0.62rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.ss .inline-link { font-size: 0.78rem; color: var(--blue); cursor: pointer; }

/* ---------- narrative feed ---------- */
.ss .feed-wrap { display: flex; flex-direction: column; min-height: 0; position: relative; }
.ss .feed { flex: 1; min-height: 0; overflow-y: auto; padding: 30px 40px 16px; }
.ss .feed-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }
.ss .msg-dm .who { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 12px; display: flex; align-items: center; gap: 9px; }
.ss .msg-dm .who::before { content: "✦"; color: var(--gold); }
.ss .prose p { font-family: var(--font-read); font-size: 1.12rem; line-height: 1.76; color: rgba(241,238,245,0.9); margin: 0 0 15px; text-wrap: pretty; }
.ss .prose p:last-child { margin-bottom: 0; }
.ss .prose .notice { display: block; font-style: italic; color: var(--gold-soft); border-left: 2px solid rgba(255,215,0,0.4); padding-left: 16px; margin: 4px 0; }
.ss .prose strong { color: var(--text); font-weight: 600; }
.ss .prose .charname { color: var(--blue); font-weight: 600; font-family: var(--font-body); }
.ss .msg-npc { display: flex; gap: 13px; padding: 15px 17px; background: linear-gradient(120deg, rgba(255,184,74,0.07), transparent 70%); border: 1px solid rgba(255,184,74,0.2); border-left: 3px solid var(--amber); border-radius: var(--radius-sm); }
.ss .msg-npc .av { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; color: #1a1205; }
.ss .msg-npc .npc-name { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.5px; color: var(--amber); text-transform: uppercase; }
.ss .msg-npc .emotion { font-style: italic; color: var(--muted); font-size: 0.82rem; margin-left: 7px; font-family: var(--font-body); text-transform: none; letter-spacing: 0; }
.ss .msg-npc .npc-text { font-family: var(--font-read); font-size: 1.06rem; line-height: 1.6; color: var(--text); margin-top: 5px; }
/* (Feed redesign S5: .ss .msg-player retired — consolidated into nf-p-chip.) */
.ss .msg-system { align-self: center; font-family: var(--mono); font-size: 0.78rem; color: var(--gold-soft); background: rgba(255,215,0,0.05); border: 1px dashed rgba(255,215,0,0.3); border-radius: var(--radius-xs); padding: 7px 14px; }
.ss .feed-status { text-align: center; font-family: var(--font-read); font-style: italic; color: var(--muted); font-size: 1rem; padding: 6px 0 2px; }
.ss .feed-status .dots::after { content: ""; animation: ssDots 1.4s steps(4, end) infinite; }
@keyframes ssDots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* ---------- input bar ---------- */
.ss .feed-input { flex-shrink: 0; border-top: 1px solid var(--border); padding: 14px 22px; background: linear-gradient(0deg, rgba(255,180,60,0.03), transparent); }
.ss .feed-input-inner { max-width: 820px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.ss .feed-orb { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; background: radial-gradient(circle at 35% 30%, #7a4aff, #3a1d7a); box-shadow: 0 0 18px rgba(122,74,255,0.4); cursor: pointer; }
.ss .feed-field { flex: 1; display: flex; align-items: center; background: var(--surface2); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 0 6px 0 16px; }
.ss .feed-field input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-family: var(--font-body); font-size: 0.98rem; padding: 13px 0; }
.ss .feed-field input::placeholder { color: var(--muted); }
.ss .waiting-row { max-width: 820px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.82rem; color: var(--muted); font-style: italic; }
.ss .afk-toggle { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 0.76rem; color: var(--text-dim); background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; cursor: pointer; }

/* ---------- right rail ---------- */
.ss .inforail { display: flex; flex-direction: column; gap: 14px; padding: 18px; overflow-y: auto; }
.ss .party-row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ss .party-row .av { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; color: #0a0a0f; position: relative; }
.ss .party-row .info { flex: 1; min-width: 0; }
.ss .party-row .nm { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }
.ss .party-row .nm .crown { font-size: 0.72rem; }
.ss .party-row .sb { font-size: 0.74rem; color: var(--text-dim); }
.ss .party-row .mini-hp { height: 5px; border-radius: 999px; background: var(--surface3); margin-top: 5px; overflow: hidden; }
.ss .party-row .mini-hp i { display: block; height: 100%; background: linear-gradient(90deg, #2fd97f, var(--green)); }
.ss .quest { padding: 12px 14px; background: rgba(255,215,0,0.05); border: 1px solid rgba(255,215,0,0.22); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); }
.ss .quest .qt { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; color: var(--gold-soft); }
.ss .quest .qd { font-size: 0.8rem; color: var(--text-dim); line-height: 1.45; margin-top: 5px; }
.ss .jrow { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--radius-xs); cursor: pointer; transition: background .15s; }
.ss .jrow:hover { background: var(--surface2); }
.ss .jrow .jdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ss .jrow .jn { flex: 1; font-size: 0.86rem; color: var(--text); }
.ss .jrow .jk { font-size: 0.62rem; letter-spacing: 1px; color: var(--muted); }
.ss .log-empty { font-size: 0.84rem; color: var(--muted); font-style: italic; line-height: 1.5; text-align: center; padding: 16px 8px; }

/* ---------- toasts ---------- */
.ss-toast-stack { position: fixed; top: 18px; right: 18px; z-index: 4000; display: flex; flex-direction: column; gap: 11px; }
.ss-toast { display: flex; align-items: center; gap: 12px; width: 300px; padding: 12px 14px; border-radius: 10px; background: rgba(18,17,23,0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.13); border-left: 3px solid var(--ss-accent, #FFD700); box-shadow: 0 10px 34px rgba(0,0,0,0.5); font-family: 'DM Sans', sans-serif; }
.ss-toast .ticon { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--ss-accent, #FFD700); background: color-mix(in srgb, var(--ss-accent, #FFD700) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ss-accent, #FFD700) 36%, transparent); }
.ss-toast .tmain { flex: 1; min-width: 0; }
.ss-toast .tt { font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.9rem; color: #f1eef5; letter-spacing: 0.3px; }
.ss-toast .tsb { font-size: 0.76rem; color: rgba(241,238,245,0.62); margin-top: 1px; }
.ss-toast .tx { color: rgba(241,238,245,0.34); cursor: pointer; font-size: 0.9rem; align-self: flex-start; }
.ss-toast .tx:hover { color: #f1eef5; }

/* ---------- character sheet modal ---------- */
.ss .cs-overlay { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(4,3,6,0.74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 40px; }
.ss .cs-modal { width: min(1040px, 100%); height: 88vh; max-height: calc(100% - 40px); display: flex; flex-direction: column; background: linear-gradient(180deg, #16151d, #100f15); border: 1px solid var(--border-light); border-radius: var(--radius); box-shadow: 0 30px 90px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,215,0,0.05); position: relative; overflow: hidden; }
.ss .cs-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 9px; z-index: 3; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.95rem; background: var(--surface2); border: 1px solid var(--border-light); color: var(--text-dim); }
.ss .cs-close:hover { background: var(--surface3); color: var(--text); }
.ss .cs-header { display: flex; gap: 18px; align-items: center; padding: 24px 28px 18px; background: radial-gradient(ellipse 60% 120% at 12% 0%, rgba(255,170,50,0.08), transparent 60%); }
.ss .cs-portrait { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; flex-shrink: 0; position: relative; border: 2px solid rgba(255,215,0,0.55); box-shadow: 0 0 24px rgba(255,170,50,0.25); }
.ss .cs-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.ss .cs-portrait .mono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: var(--gold-soft); background: linear-gradient(140deg, #2b2540, #15131d); }
.ss .cs-headmeta { flex: 1; min-width: 0; }
.ss .cs-name { font-family: var(--font-display); font-weight: 800; font-size: 2rem; letter-spacing: 1.5px; text-transform: uppercase; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.05; }
.ss .cs-tagline { font-size: 0.95rem; color: var(--text-dim); margin-top: 3px; }
/* Portrait regenerate badge (S174) — an ALWAYS-VISIBLE 🎨 badge on the portrait's
   bottom-right corner (the intuitive home + discoverable at a glance, not hover-
   gated). The wrap is the non-clipping positioning context so the badge can sit
   on the ring edge without being clipped by the portrait's overflow:hidden.
   Replaces the buried .cs-regen text button the reskin moved into the headmeta. */
.ss .cs-portrait-wrap { position: relative; flex-shrink: 0; }
.ss .cs-portrait-regen { position: absolute; bottom: -2px; right: -2px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #15131d; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; line-height: 1; cursor: pointer; color: #1a1205; background: var(--gold-grad); box-shadow: 0 2px 7px rgba(0,0,0,0.55); transition: transform .12s; }
.ss .cs-portrait-regen:hover { transform: scale(1.12); }
.ss .cs-tabs { display: flex; flex-wrap: wrap; gap: 2px 4px; padding: 0 26px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ss .cs-tab { font-family: var(--font-display); font-size: 0.76rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; padding: 11px 10px; cursor: pointer; transition: color .15s; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ss .cs-tab .ti { font-size: 0.8rem; }
.ss .cs-tab:hover { color: var(--text-dim); }
.ss .cs-tab.active { color: var(--gold-soft); border-bottom-color: var(--gold); }
.ss .cs-body { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 28px 28px; }
.ss .cs-tabwrap { display: flex; flex-direction: column; gap: 22px; }
.ss .cs-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ss .cs-fields { display: flex; flex-direction: column; gap: 16px; }
.ss .cs-field { display: flex; flex-direction: column; gap: 4px; }
.ss .cs-flabel { font-size: 0.66rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.ss .cs-fval { font-size: 1.05rem; color: var(--text); font-weight: 500; }
.ss .cs-fval.green { color: var(--green); font-family: var(--font-display); }
.ss .cs-fval.prose-val { font-family: var(--font-read); font-size: 1.05rem; line-height: 1.6; color: var(--text-dim); font-weight: 400; }
.ss .cs-subsection { display: flex; flex-direction: column; gap: 12px; }
.ss .cs-subhead { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-soft); }
.ss .cs-empty { font-size: 0.9rem; color: var(--muted); font-style: italic; }
.ss .cs-statcards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.ss .cs-statcard { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 6px; text-align: center; }
.ss .cs-statcard .k { font-size: 0.64rem; letter-spacing: 1.5px; color: var(--muted); }
.ss .cs-statcard .v { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--text); line-height: 1.1; margin: 2px 0; }
.ss .cs-statcard .mod { font-size: 0.82rem; color: var(--gold-soft); font-family: var(--mono); }
.ss .cs-derived { display: flex; flex-direction: column; gap: 9px; }
.ss .cs-drow { display: flex; align-items: baseline; gap: 8px; font-size: 0.95rem; }
.ss .cs-dk { color: var(--text); font-weight: 600; }
.ss .cs-dk::after { content: ":"; color: var(--muted); }
.ss .cs-dv { color: var(--text); font-weight: 700; }
.ss .cs-dv.gold { color: var(--gold-soft); }
.ss .cs-dnote { color: var(--muted); font-size: 0.85rem; }
.ss .cs-saves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 24px; }
.ss .cs-save { display: flex; align-items: center; gap: 9px; font-size: 0.92rem; }
.ss .cs-save .dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--muted); flex-shrink: 0; }
.ss .cs-save.prof .dot { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 7px rgba(255,215,0,0.5); }
.ss .cs-save .sk { color: var(--text-dim); }
.ss .cs-save .sv { margin-left: auto; font-family: var(--mono); color: var(--text); font-weight: 600; }
.ss .cs-save.prof .sv { color: var(--gold-soft); }
.ss .cs-banner { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 16px; font-size: 0.86rem; line-height: 1.55; color: var(--text-dim); font-style: italic; }
.ss .cs-banner strong { color: var(--gold-soft); font-style: normal; font-weight: 600; }
.ss .cs-legend { font-style: normal; display: inline-flex; align-items: center; gap: 5px; margin-right: 12px; color: var(--text-dim); }
.ss .cs-subhead-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ss .cs-addrow { display: flex; gap: 10px; align-items: stretch; }
.ss .cs-addrow.rel { flex-wrap: wrap; }
.ss .cs-addrow.rel .cs-input { flex: 1 1 140px; }
.ss .cs-input { flex: 1; min-width: 0; background: var(--surface2); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 11px 14px; color: var(--text); font-family: var(--font-body); font-size: 0.9rem; outline: none; }
.ss .cs-input::placeholder { color: var(--muted); }
.ss .cs-input:focus { border-color: rgba(255,215,0,0.4); }
.ss .cs-select { background: var(--surface2); border: 1px solid var(--border-light); border-radius: var(--radius-sm); color: var(--text); padding: 0 12px; font-family: var(--font-body); font-size: 0.88rem; cursor: pointer; }
.ss .cs-add { padding-left: 22px; padding-right: 22px; }
.ss .cs-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ss .cs-textarea { width: 100%; min-height: 84px; resize: vertical; background: var(--surface2); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 12px 14px; color: var(--text); font-family: var(--font-body); font-size: 0.9rem; line-height: 1.5; outline: none; }
.ss .cs-textarea::placeholder { color: var(--muted); }
.ss .cs-textarea:focus { border-color: rgba(255,215,0,0.4); }
.ss .sk-dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--muted); display: inline-block; }
.ss .sk-dot.proficient { background: #fff; border-color: #fff; }
.ss .sk-dot.expertise { background: var(--gold); border-color: var(--gold); border-radius: 3px; transform: rotate(45deg); box-shadow: 0 0 7px rgba(255,215,0,0.5); }
.ss .cs-skills { display: flex; flex-direction: column; gap: 7px; }
.ss .cs-skillrow { display: flex; align-items: center; gap: 12px; padding: 11px 15px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color .15s; }
.ss .cs-skillrow:hover { border-color: var(--border-light); }
.ss .cs-skillrow.proficient, .ss .cs-skillrow.expertise { background: rgba(255,215,0,0.04); border-color: rgba(255,215,0,0.18); }
.ss .cs-skillrow .sk-name { font-family: var(--font-display); font-weight: 700; font-size: 0.96rem; color: var(--text); }
.ss .cs-skillrow .sk-abil { font-size: 0.72rem; letter-spacing: 1px; color: var(--text-dim); }
.ss .cs-skillrow .sk-src { font-size: 0.74rem; color: var(--muted); }
.ss .cs-skillrow .sk-mod { margin-left: auto; font-family: var(--mono); font-size: 1.05rem; font-weight: 600; color: var(--text); }
.ss .cs-skillrow.proficient .sk-mod, .ss .cs-skillrow.expertise .sk-mod { color: var(--gold-soft); }
.ss .cs-itemchips { display: flex; flex-wrap: wrap; gap: 8px; }
.ss .cs-itemchip { font-size: 0.9rem; color: var(--text); background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 8px 13px; }
.ss .cs-itemchip.equipped { color: var(--gold-soft); border-color: rgba(255,215,0,0.28); background: rgba(255,215,0,0.05); }
.ss .cs-slots { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ss .cs-slotgroup { display: inline-flex; align-items: center; gap: 7px; }
.ss .cs-slotlv { font-family: var(--mono); font-size: 0.82rem; color: var(--text-dim); }
.ss .cs-slotdots { display: inline-flex; gap: 4px; }
.ss .cs-slotdot { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #cfc4ff); box-shadow: 0 0 6px rgba(167,139,250,0.5); }
.ss .cs-count { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); font-weight: 400; letter-spacing: 0; margin-left: 2px; }
.ss .cs-taglegend { display: flex; gap: 14px; }
.ss .cs-taglegend .cs-legend { font-size: 0.72rem; font-style: normal; margin: 0; color: var(--muted); }
/* S231 (OI-91) — Class Abilities render as compact chips (reusing .cs-spellchip, the
   spell-grid look): name + an optional uses counter (x/x), click → description popover.
   `.cs-ability-uses` is the little mono counter badge (e.g. Lay on Hands 100/100). */
.ss .cs-ability-chip { justify-content: space-between; }
.ss .cs-ability-uses { flex-shrink: 0; font-family: var(--mono); font-size: 0.72rem; color: var(--gold-soft); background: rgba(255,215,0,0.08); border: 1px solid rgba(255,215,0,0.22); border-radius: 999px; padding: 1px 7px; }
/* S231 (OI-91) — give the spell `cs-field` blocks the same vertical rhythm as the
   `.sheet-section` blocks (Class Abilities / Feats), so "Spells Prepared / None."
   no longer butts up against the Feats header. */
.ss .cs-body .cs-field { margin-bottom: 18px; }
.ss .cs-spellgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.ss .cs-spellchip { display: flex; align-items: center; gap: 7px; padding: 9px 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-xs); font-size: 0.9rem; color: var(--text); min-width: 0; }
.ss .cs-spellchip:hover { border-color: var(--border-light); }
.ss .cs-spellname { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss .cs-spelltags { display: inline-flex; gap: 3px; margin-left: auto; flex-shrink: 0; }
.ss .cs-spelllevels { display: flex; flex-direction: column; gap: 12px; }
.ss .cs-spelllevel-block { display: flex; flex-direction: column; gap: 9px; }
.ss .cs-lvl-header { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: none; cursor: pointer; padding: 4px 0; text-align: left; }
.ss .cs-lvl-header .chev { font-size: 0.6rem; color: var(--muted); transition: transform .2s; }
.ss .cs-lvl-header.closed .chev { transform: rotate(-90deg); }
/* S196 density — closed levels read as "tucked away," not inactive. */
.ss .cs-lvl-header.closed { opacity: 0.85; }
.ss .cs-lvl-header.closed:hover { opacity: 1; }
/* Expand-all / Collapse-all toggle in the Spells-Prepared subhead row. */
.ss .cs-tool-btn { margin-left: auto; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--muted); background: none; border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 3px 9px; cursor: pointer; transition: all .15s; }
.ss .cs-tool-btn:hover { color: var(--gold-soft); border-color: rgba(255,215,0,0.3); }
.ss .cs-lvl-name { font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-soft); }
.ss .cs-lvl-count { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.ss .cs-lvl-header:hover .cs-lvl-name { color: var(--gold); }
.ss button.cs-spellchip { cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.ss button.cs-spellchip:hover { border-color: rgba(255,215,0,0.4); background: var(--surface3); }
.ss .cs-tag { font-family: var(--mono); font-size: 0.62rem; font-weight: 600; width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; color: var(--tg); background: color-mix(in srgb, var(--tg) 16%, transparent); border: 1px solid color-mix(in srgb, var(--tg) 40%, transparent); }
.ss .cs-spelldetail-overlay { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(4,3,6,0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); padding: 32px; }
.ss .cs-spelldetail { width: min(460px, 100%); position: relative; background: linear-gradient(180deg, #1b1a23, #131219); border: 1px solid var(--border-light); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0,0,0,0.6); padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.ss .cs-sd-close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 7px; cursor: pointer; background: var(--surface2); border: 1px solid var(--border-light); color: var(--text-dim); font-size: 0.82rem; }
.ss .cs-sd-close:hover { color: var(--text); background: var(--surface3); }
.ss .cs-sd-head { display: flex; flex-direction: column; gap: 5px; padding-right: 30px; }
.ss .cs-sd-name { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; color: var(--gold-soft); line-height: 1.1; }
.ss .cs-sd-sub { font-size: 0.86rem; color: var(--text-dim); }
.ss .cs-sd-tags { display: flex; gap: 5px; margin-top: 3px; }
.ss .cs-sd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ss .cs-sd-stat .k { font-size: 0.64rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.ss .cs-sd-stat .v { font-size: 0.95rem; color: var(--text); font-weight: 600; margin-top: 2px; }
.ss .cs-sd-desc { font-family: var(--font-read); font-size: 1rem; line-height: 1.6; color: var(--text-dim); }

/* ---------- inventory modal ---------- */
.ss .iv-overlay { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(4,3,6,0.74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 40px; }
.ss .iv-modal { width: min(1080px, 100%); max-height: calc(100% - 40px); display: flex; flex-direction: column; background: linear-gradient(180deg, #16151d, #100f15); border: 1px solid var(--border-light); border-radius: var(--radius); box-shadow: 0 30px 90px rgba(0,0,0,0.7); position: relative; overflow: hidden; }
.ss .iv-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 9px; z-index: 3; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.95rem; background: var(--surface2); border: 1px solid var(--border-light); color: var(--text-dim); }
.ss .iv-close:hover { background: var(--surface3); color: var(--text); }
.ss .iv-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 26px 16px; border-bottom: 1px solid var(--border); background: radial-gradient(ellipse 50% 120% at 8% 0%, rgba(255,170,50,0.07), transparent 60%); }
.ss .iv-title { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; letter-spacing: 1px; text-transform: uppercase; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.1; }
.ss .iv-sub { font-size: 0.86rem; color: var(--text-dim); margin-top: 4px; }
.ss .iv-headactions { display: flex; gap: 9px; flex-shrink: 0; padding-right: 44px; }
.ss .iv-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 26px 26px; }
.ss .iv-slots-label, .ss .iv-sort span { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.ss .iv-slots-label { margin-bottom: 12px; }
.ss .iv-slots { display: grid; grid-template-columns: repeat(9, 1fr); gap: 10px; margin-bottom: 24px; }
/* Equipped slot — art full-bleed (S174). Empty slots stay visible (dash). */
.ss .iv-slot { position: relative; aspect-ratio: 1 / 1; overflow: hidden; isolation: isolate; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6px; }
.ss .iv-slot.filled { border-color: transparent; cursor: pointer; padding: 0; }
.ss .iv-slot-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ss .iv-slot-fallico { font-size: 1.4rem; line-height: 1; color: var(--gold-soft); z-index: 1; }
.ss .iv-slot-dash { font-size: 1.3rem; color: var(--muted); line-height: 1; }
.ss .iv-slot .iv-floor { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 75% 60% at 50% 42%, transparent 42%, rgba(8,7,10,0.55)); }
.ss .iv-slot .iv-scrim { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 12px 4px 4px; background: linear-gradient(transparent, rgba(8,7,10,0.92)); }
.ss .iv-slot-label { font-size: 0.6rem; color: var(--muted); line-height: 1.15; }
.ss .iv-slot.filled .iv-slot-label { color: var(--gold-soft); font-weight: 600; }
.ss .iv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.ss .iv-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.ss .iv-filter { font-family: var(--font-body); font-weight: 600; font-size: 0.82rem; padding: 8px 15px; border-radius: 999px; cursor: pointer; background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim); transition: all .15s; }
.ss .iv-filter:hover { color: var(--text); border-color: var(--border-light); }
.ss .iv-filter.active { background: var(--gold-grad); color: #1a1205; border-color: transparent; font-weight: 700; }
.ss .iv-sort { display: flex; align-items: center; gap: 9px; }
.ss .iv-sort span { color: var(--text-dim); }
.ss .iv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
/* Item tile — generated art rendered full-bleed with a rarity-coloured ring + a
   bottom name scrim (S174 art-treatment reskin). Replaces the old centered-emoji
   + rarity underline-bar + gold corner-dot layout. Equipped is signalled once via
   the gold tab; rarity via the ring colour (--rc). The art IS the surface, so the
   tile has no padding/border — the ring overlays the edge. */
.ss .iv-item { position: relative; aspect-ratio: 1 / 1; overflow: hidden; isolation: isolate; background: var(--surface2); border: none; border-radius: var(--radius-sm); cursor: pointer; transition: transform .15s; }
.ss .iv-item:hover { transform: translateY(-2px); }
/* Rarity ring colour token — 6 tiers (matches RARITY_COLOR in inventory.js).
   `unidentified` forces neutral grey so an un-IDed item never leaks its rarity. */
.ss .iv-item.common,    .ss .iv-detail-ico.common    { --rc: #9d9d9d; }
.ss .iv-item.uncommon,  .ss .iv-detail-ico.uncommon  { --rc: #1eff00; }
.ss .iv-item.rare,      .ss .iv-detail-ico.rare      { --rc: #0070dd; }
.ss .iv-item.very_rare, .ss .iv-detail-ico.very_rare { --rc: #a335ee; }
.ss .iv-item.legendary, .ss .iv-detail-ico.legendary { --rc: #ff8000; }
.ss .iv-item.artifact,  .ss .iv-detail-ico.artifact  { --rc: #e6cc80; }
.ss .iv-item.unidentified, .ss .iv-detail-ico.unidentified { --rc: #9d9d9d; }
/* Magic items (uncommon+) get a resting rarity-coloured halo around the tile —
   an at-a-glance "this is special". Common + unidentified do NOT glow. Same --rc
   as the ring, so rarity reads as one signal. Because a "+N" weapon/armor is
   uncommon+ via the DMG ladder (helpers.js _enchantmentRarity), enchant tier
   falls out of this automatically — no separate enchant-glow system needed. */
.ss .iv-item.uncommon, .ss .iv-item.rare, .ss .iv-item.very_rare,
.ss .iv-item.legendary, .ss .iv-item.artifact { box-shadow: 0 0 15px -3px var(--rc); }
.ss .iv-item.uncommon:hover, .ss .iv-item.rare:hover, .ss .iv-item.very_rare:hover,
.ss .iv-item.legendary:hover, .ss .iv-item.artifact:hover { box-shadow: 0 0 22px -2px var(--rc); }
.ss .iv-detail-ico.uncommon, .ss .iv-detail-ico.rare, .ss .iv-detail-ico.very_rare,
.ss .iv-detail-ico.legendary, .ss .iv-detail-ico.artifact { box-shadow: inset 0 0 0 2px var(--rc), 0 0 16px -3px var(--rc); }
.ss .iv-item-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ss .iv-fallglyph { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; line-height: 1; }
.ss .iv-unknown { font-family: var(--font-display); font-weight: 700; color: var(--muted); opacity: 0.75; }
.ss .iv-floor { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 75% 60% at 50% 42%, transparent 42%, rgba(8,7,10,0.5)); }
.ss .iv-ring { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--rc, #9d9d9d); transition: box-shadow .15s; }
.ss .iv-item:hover .iv-ring { box-shadow: inset 0 0 0 2px var(--rc, #9d9d9d), 0 0 22px -3px var(--rc, #9d9d9d); }
.ss .iv-ring-gold { box-shadow: inset 0 0 0 2px rgba(255,215,0,0.5); }
.ss .iv-eqtab { position: absolute; top: 0; left: 0; z-index: 3; font-family: var(--font-display); font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #1a1205; background: var(--gold-grad); padding: 3px 8px 4px; border-bottom-right-radius: 8px; }
.ss .iv-stolen { position: absolute; top: 3px; right: 4px; z-index: 3; font-size: 0.9rem; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.85)); }
.ss .iv-item .iv-scrim { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 24px 11px 10px; background: linear-gradient(transparent, rgba(8,7,10,0.6) 38%, rgba(8,7,10,0.93)); }
.ss .iv-item-name { font-size: 0.84rem; font-weight: 600; color: var(--text); text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
.ss .iv-item-qty { color: #ffe8a0; font-family: var(--mono); font-size: 0.74rem; }
/* Consume button — floats top-right (free corner on consumables) so the name
   keeps the full scrim width (S174 v1.8.1245). Nudged below the 🔥 when stolen. */
.ss .iv-use { position: absolute; top: 5px; right: 5px; z-index: 4; background: rgba(30,255,0,0.2); color: var(--success); border: 1px solid rgba(30,255,0,0.5); border-radius: 6px; padding: 3px 7px; cursor: pointer; font-size: 0.82rem; line-height: 1; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.ss .iv-use:hover { background: rgba(30,255,0,0.35); border-color: rgba(30,255,0,0.7); }
.ss .iv-use.iv-use-lower { top: 30px; }
.ss .iv-detail-overlay { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(4,3,6,0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); padding: 32px; }
.ss .iv-detail { width: min(440px, 100%); position: relative; background: radial-gradient(120% 78% at 50% 0%, rgba(255,215,0,0.05), transparent 58%), linear-gradient(180deg, #1a1822, #110f16); border: 1px solid rgba(255,215,0,0.22); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,215,0,0.07); padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
/* Hearthlight ceremonial bracket corners (shared M6 motif — z-0 behind content, like .pg-corner). */
.ss .iv-detail > *:not(.iv-detail-corner) { position: relative; z-index: 1; }
.ss .iv-detail-corner { position: absolute; width: 18px; height: 18px; z-index: 0; pointer-events: none; opacity: 0.5; }
.ss .iv-detail-corner::before { content: ""; position: absolute; inset: 0; border-top: 1.5px solid rgba(255,215,0,0.5); border-left: 1.5px solid rgba(255,215,0,0.5); border-top-left-radius: 7px; }
.ss .iv-detail-corner.ctl { inset: 8px auto auto 8px; }
.ss .iv-detail-corner.ctr { inset: 8px 8px auto auto; transform: scaleX(-1); }
.ss .iv-detail-corner.cbl { inset: auto auto 8px 8px; transform: scaleY(-1); }
.ss .iv-detail-corner.cbr { inset: auto 8px 8px auto; transform: scale(-1,-1); }
.ss .iv-detail-head { display: flex; align-items: center; gap: 14px; padding-right: 30px; }
.ss .iv-detail-ico { position: relative; font-size: 2.2rem; width: 64px; height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--surface2); border-radius: var(--radius-sm); box-shadow: inset 0 0 0 2px var(--rc, var(--border-light)); }
.ss .iv-detail-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss .iv-detail-headmeta { min-width: 0; }
.ss .iv-detail-name { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: 0.5px; text-transform: uppercase; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.1; }
.ss .iv-detail-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 6px; }
.ss .iv-type { font-size: 0.82rem; color: var(--text-dim); }
.ss .iv-rarity, .ss .iv-source { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.3px; padding: 2px 9px; border-radius: 999px; border: 1px solid; }
.ss .iv-rarity { color: var(--text-dim); border-color: var(--border-light); background: var(--surface2); }
.ss .iv-rarity.uncommon { color: var(--green); border-color: rgba(74,255,158,0.4); background: rgba(74,255,158,0.08); }
.ss .iv-rarity.rare { color: var(--blue); border-color: rgba(74,158,255,0.4); background: rgba(74,158,255,0.08); }
.ss .iv-rarity.legendary { color: var(--amber); border-color: rgba(255,184,74,0.4); background: rgba(255,184,74,0.08); }
.ss .iv-source { color: var(--blue); border-color: rgba(74,158,255,0.4); background: rgba(74,158,255,0.06); }
.ss .iv-eq-badge { font-family: var(--font-body); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.5px; color: var(--gold); background: rgba(255,215,0,0.12); border: 1px solid rgba(255,215,0,0.4); border-radius: 999px; padding: 2px 9px; }
.ss .iv-stattable { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 16px; }
.ss .iv-statrow { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ss .iv-statrow:last-child { border-bottom: none; }
.ss .iv-statk { font-size: 0.9rem; color: var(--text-dim); }
.ss .iv-statv { font-size: 0.95rem; color: var(--text); text-align: right; }
.ss .iv-statv strong { font-weight: 700; }
.ss .iv-statnote { color: var(--muted); font-size: 0.85rem; }
.ss .iv-statsuffix { color: var(--text-dim); }
.ss .iv-prop-pill { font-size: 0.78rem; color: var(--text); background: var(--surface3); border: 1px solid var(--border-light); border-radius: 999px; padding: 3px 11px; }
.ss .iv-detail-desc { font-family: var(--font-read); font-style: italic; font-size: 1rem; line-height: 1.6; color: var(--text-dim); }
.ss .iv-detail-divider { height: 1px; background: var(--border); }
.ss .iv-detail-actions { display: flex; gap: 10px; }

/* ---------- narrative feed reskin (overrides the existing .narrative-msg.* classes
   onto the .ss look — pure CSS, render logic unchanged; #narrative-feed stays the
   scroller so autoscroll is untouched). .ss prefix wins on specificity + source order. */
.ss .narrative-feed { max-width: 1760px; margin: 0 auto; padding: 30px 48px 18px; gap: 26px; }
/* (Feed redesign S5: the .ss feed reskin overrides for .narrative-msg.dm /
   .npc-segment / .narrative-msg.player retired — the nf- War Table grammar
   is the single feed treatment now, unscoped so it renders identically in
   and out of the .ss shell.) */

/* ---------- character sheet modal: interim body polish (the tab bodies still emit
   .sheet-* internally — align them to the .cs- language; per-tab structure conversion
   (6-col statcards / spell-level collapse / popover) is a follow-on). ---------- */
.ss .cs-body .sheet-section { margin-bottom: 20px; }
.ss .cs-body .sheet-section-label { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 8px; }
.ss .cs-body .sheet-list-row { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 15px; margin-bottom: 7px; }
.ss .cs-body .sheet-list-row:hover { border-color: var(--border-light); }
/* Stats tab — 6-col stat cards + derived rows + saves */
.ss .cs-body .sheet-stats-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 22px; }
.ss .cs-body .sheet-stat-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 6px; text-align: center; }
.ss .cs-body .sheet-stat-label { font-size: 0.64rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.ss .cs-body .sheet-stat-score { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--text); line-height: 1.1; margin: 2px 0; }
.ss .cs-body .sheet-stat-mod { font-size: 0.82rem; color: var(--gold-soft); font-family: var(--mono); }
.ss .cs-body .sheet-stat-base { font-size: 0.58rem; color: var(--muted); }
.ss .cs-body .sheet-stats-rows { display: flex; flex-direction: column; gap: 10px; font-size: 0.95rem; }
.ss .cs-body .sheet-stats-rows > div strong { color: var(--text); font-weight: 600; }
/* RP form tabs (Personality / Goals / Secrets / Social) */
.ss .cs-body .sheet-form-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.ss .cs-body .sheet-form-field > label { font-size: 0.66rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.ss .cs-body .form-input, .ss .cs-body .form-select, .ss .cs-body .form-textarea { background: var(--surface2); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 11px 14px; color: var(--text); font-family: var(--font-body); font-size: 0.9rem; outline: none; }
.ss .cs-body .form-input:focus, .ss .cs-body .form-textarea:focus, .ss .cs-body .form-select:focus { border-color: rgba(255,215,0,0.4); }
.ss .cs-body .sheet-add-form { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; margin-bottom: 14px; }
.ss .cs-body .sheet-info, .ss .cs-body .sheet-lock-banner { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 16px; font-size: 0.86rem; line-height: 1.5; color: var(--text-dim); font-style: italic; margin-bottom: 14px; }
.ss .cs-body .sheet-subsection { margin-bottom: 22px; }
.ss .cs-body .sheet-subsection > h3, .ss .cs-body .sheet-bucket > h4 { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-soft); margin: 0 0 10px; }
.ss .cs-body .sheet-bucket { margin-bottom: 18px; }
.ss .cs-body .sheet-empty { font-size: 0.9rem; color: var(--muted); font-style: italic; }
.ss .cs-body .btn-primary { background: var(--gold-grad); color: #1a1205; border-color: transparent; font-weight: 700; }
/* spell slots → orb dots */
.ss .cs-body .cs-slotdot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; background: radial-gradient(circle at 35% 30%, #fff, #cfc4ff); box-shadow: 0 0 6px rgba(167,139,250,0.5); }
.ss .cs-body .cs-slotdot.used { background: var(--surface3); box-shadow: none; opacity: 0.5; }
/* system / DM-override → centered mono dashed */
/* (Feed redesign S5: .ss .narrative-msg.system + the .ss #typing-indicator
   override retired — system lines are nf-tabletext, the DM indicator is the
   nf-typing streaming status.) */

/* ---------- input bar reskin (.action-bar → .feed-input look) ---------- */
.ss .action-bar { border-top: 1px solid var(--border); padding: 14px 22px; gap: 12px; background: linear-gradient(0deg, rgba(255,180,60,0.03), transparent); }
.ss .action-bar .action-input { background: var(--surface2); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 13px 16px; color: var(--text); font-family: var(--font-body); font-size: 0.98rem; }
.ss .action-bar .action-input:focus { border-color: rgba(255,215,0,0.4); }
.ss .action-bar .action-send { background: var(--gold-grad); color: #1a1205; border: none; border-radius: var(--radius-sm); font-weight: 700; }
.ss #spell-picker-btn { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7a4aff, #3a1d7a); box-shadow: 0 0 18px rgba(122,74,255,0.4); border: none; font-size: 1.2rem; flex-shrink: 0; }

/* ---------- inforail section headers + party rows ---------- */
.ss .inforail .sidebar-section, .ss .charrail .sidebar-section { border: none; padding: 0; margin-bottom: 4px; }
.ss .inforail .sidebar-section > h3, .ss .charrail .sidebar-section > h3 { font-family: var(--font-display); font-size: 0.74rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold-soft); }
.ss .inforail .player-item { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; }
.ss .inforail .quest-sidebar-list > * { background: rgba(255,215,0,0.05); border: 1px solid rgba(255,215,0,0.22); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); }
.cl .tile-presence { position: absolute; top: 11px; left: 11px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600; color: #d6ffe8; background: rgba(8,30,18,0.7); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border: 1px solid rgba(74,255,158,0.4); border-radius: 999px; padding: 4px 10px; }
.cl .tile-presence.with-lock { left: 47px; }
.cl .tile-presence .pdot { width: 7px; height: 7px; border-radius: 50%; background: var(--cl-green); box-shadow: 0 0 7px var(--cl-green); animation: presencePulse 2s ease-in-out infinite; }
@keyframes presencePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.cl .tile-play { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%) scale(0.92); z-index: 5; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: #1a1205; background: var(--cl-gold-grad); padding: 11px 24px; border-radius: var(--cl-radius-sm); white-space: nowrap; opacity: 0; transition: opacity .2s ease, transform .2s ease; box-shadow: 0 6px 20px rgba(0,0,0,0.4); pointer-events: none; }
.cl .camp-tile:hover .tile-play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.cl .tile-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 10px; }
.cl .tile-desc { font-size: 0.82rem; color: var(--cl-dim); line-height: 1.45; margin: 0; }
.cl .tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cl .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.cl .tag { font-size: 0.7rem; letter-spacing: 0.3px; padding: 3px 9px; border-radius: 999px; background: var(--cl-surface2); border: 1px solid var(--cl-border); color: var(--cl-dim); white-space: nowrap; }
.cl .tag.genre { color: var(--cl-gold-soft); border-color: rgba(255,215,0,0.22); background: rgba(255,215,0,0.06); }
.cl .tag.tone-comedic { color: var(--cl-amber); border-color: rgba(255,184,74,0.25); background: rgba(255,184,74,0.07); }
.cl .status { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.cl .status.new { color: var(--cl-gold-soft); background: rgba(255,215,0,0.1); border: 1px solid rgba(255,215,0,0.28); }
.cl .status.active { color: var(--cl-dim); background: var(--cl-surface2); border: 1px solid var(--cl-border); }
.cl .tile-lastplayed { font-size: 0.72rem; color: var(--cl-muted); display: inline-flex; align-items: center; gap: 5px; }
/* ⋯ menu */
.cl .camp-menu { position: absolute; top: 12px; right: 12px; z-index: 6; }
.cl .camp-menu-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: rgba(10,8,12,0.55); color: #fff; cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: all .15s; opacity: 0; }
.cl .camp-tile:hover .camp-menu-btn { opacity: 1; }
.cl .camp-menu-btn:hover { background: var(--cl-surface3); }
.cl .camp-menu-pop { position: absolute; top: 34px; right: 0; min-width: 132px; z-index: 20; background: var(--cl-surface2); border: 1px solid var(--cl-border-light); border-radius: var(--cl-radius-xs); box-shadow: 0 10px 30px rgba(0,0,0,0.5); padding: 5px; display: none; }
.cl .camp-menu.open .camp-menu-pop { display: block; }
.cl .menu-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; font-size: 0.82rem; color: var(--cl-dim); cursor: pointer; }
.cl .menu-item:hover { background: var(--cl-surface3); color: var(--cl-text); }
.cl .menu-item.disabled { opacity: 0.45; cursor: not-allowed; }
.cl .menu-item.danger { color: var(--cl-danger); }
.cl .menu-item.danger:hover { background: rgba(255,107,107,0.12); }
/* Create tile */
.cl .create-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 200px; cursor: pointer; color: var(--cl-gold-soft); background: rgba(255,215,0,0.03); border: 1.5px dashed rgba(255,215,0,0.3); border-radius: var(--cl-radius); transition: all .2s; font-family: var(--font-display); }
.cl .create-tile:hover { background: rgba(255,215,0,0.08); border-color: rgba(255,215,0,0.55); }
.cl .create-tile .plus { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
/* Developer panel re-homes the existing admin markup; just give it a tinted frame */
.cl .cl-devpanel { border-color: rgba(255,184,74,0.3); }
.cl .cl-devpanel .panel-body { color: var(--cl-text); }

/* ===== Combat transition splash (.cbt-trans-*) — Phase A, ported from combat-redesign/combat.css, S170 ===== */
/* One-shot "Roll for Initiative" splash over the cockpit at combat start. Purely additive:
   combat is already live underneath. JS skips the overlay entirely under prefers-reduced-motion.
   Note: the design's token-cascade beat targets the new .cbt-toks strip (Phase B) — wired then. */
.ss .cbt-trans-overlay { position: fixed; inset: 0; z-index: 700; pointer-events: auto; }
.ss .cbt-trans-overlay.fading { opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.ss .cbt-trans-vignette { position: absolute; inset: 0; z-index: 20; pointer-events: none;
  box-shadow: inset 0 0 200px 40px rgba(180,30,30,0.0); transition: box-shadow .8s ease; }
.ss .cbt-trans-vignette.on { box-shadow: inset 0 0 230px 70px rgba(180,30,30,0.55); }
.ss .cbt-trans-card { position: absolute; inset: 0; z-index: 26; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(40,4,4,0.78), rgba(6,4,6,0.94));
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ss .cbt-trans-card.play { opacity: 1; }
.ss .cbt-trans-kicker { font-family: var(--font-display); font-weight: 700; letter-spacing: 7px; text-transform: uppercase;
  font-size: 0.9rem; color: var(--danger); }
.ss .cbt-trans-title { font-family: var(--font-display); font-weight: 900; letter-spacing: 6px; text-transform: uppercase; font-size: 4.2rem;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 60px rgba(255,170,50,0.35); line-height: 1; }
.ss .cbt-trans-enc { font-family: var(--font-read); font-style: italic; color: var(--gold-soft); font-size: 1.15rem; }
.ss .cbt-trans-d20 { font-size: 2.2rem; margin-bottom: 4px; filter: drop-shadow(0 0 16px rgba(255,200,60,0.6)); }
@media (prefers-reduced-motion: no-preference) {
  .ss .cbt-trans-card.play .cbt-trans-kicker { animation: cbtKick .5s ease both; }
  .ss .cbt-trans-card.play .cbt-trans-title { animation: cbtStrike .55s cubic-bezier(.2,1.3,.4,1) .12s both; }
  .ss .cbt-trans-card.play .cbt-trans-enc { animation: cbtKick .5s ease .4s both; }
  .ss .cbt-trans-card.shake { animation: cbtShake .4s ease; }
}
@keyframes cbtKick { from { opacity: 0; transform: translateY(8px); letter-spacing: 2px; } to { opacity: 1; } }
@keyframes cbtStrike { 0% { opacity: 0; transform: scale(1.7); filter: blur(8px); } 60% { opacity: 1; } 100% { transform: scale(1); filter: blur(0); } }
@keyframes cbtShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

/* ===== Combat initiative strip (.cbt-track/.cbt-toks/.cbt-tok) — Phase B, ported from combat-redesign/combat.css, S170 ===== */
/* The legacy #initiative-bar becomes a bare passthrough; .cbt-track owns its own
   frame (head + horizontally-scrolling token row). Neutralize the old flex/pad/
   border so it doesn't fight the new component. */
.ss .initiative-bar { background: none; border-bottom: none; padding: 0; overflow: visible; white-space: normal; }
.ss .initiative-bar.visible { display: block; gap: 0; }
.ss .cbt-track { flex-shrink: 0; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,107,107,0.05), transparent); }
.ss .cbt-track-head { display: flex; align-items: center; gap: 12px; padding: 9px 18px 8px; }
.ss .cbt-round { display: inline-flex; align-items: baseline; gap: 7px; font-family: var(--font-display);
  font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-soft); font-size: 0.82rem; }
.ss .cbt-round .n { font-family: var(--mono); font-size: 1.05rem; color: var(--gold);
  background: rgba(255,215,0,0.12); border: 1px solid rgba(255,215,0,0.3); border-radius: 7px; padding: 1px 9px; }
.ss .cbt-enc { font-size: 0.8rem; color: var(--text-dim); }
.ss .cbt-enc b { color: var(--text); font-weight: 600; }
.ss .cbt-track-head .spacer { flex: 1; }
.ss .cbt-leadctl { display: flex; align-items: center; gap: 7px; }
.ss .cbt-lockhint { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-style: italic;
  color: var(--muted); border: 1px dashed var(--border-light); border-radius: 999px; padding: 5px 11px; }
/* top padding clears the .youtag (top:-8px) — overflow-x:auto forces overflow-y to clip */
.ss .cbt-toks { display: flex; align-items: flex-start; gap: 9px; padding: 12px 18px 11px; overflow-x: auto; }
/* S230 — compact HORIZONTAL token (avatar left, info right). Was a tall vertical
   card (~138px) that starved the feed; now ~one avatar tall (~56px). */
.ss .cbt-tok { position: relative; flex-shrink: 0; width: 190px; padding: 7px 10px;
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  border-top: 3px solid var(--side, var(--muted)); transition: transform .15s, box-shadow .15s, opacity .2s; }
.ss .cbt-tok-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ss .cbt-tok-top { display: flex; align-items: center; gap: 7px; }
.ss .cbt-tok-top .sp { flex: 1; }
.ss .cbt-tok .init { width: 26px; height: 26px; flex-shrink: 0; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 500; font-size: 0.82rem; color: var(--text);
  background: var(--surface3); border: 1px solid var(--border-light); }
/* S230 — wrap to 2 lines instead of clipping; full names matter ("Young Red Dragon"
   shouldn't become "Young re…"). Caps at 2 lines so an extreme name can't balloon the
   token, but every real SRD name fits in two. */
.ss .cbt-tok .nm { margin-top: 0; font-family: var(--font-display); font-weight: 700; font-size: 0.76rem; line-height: 1.15; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
  /* S230 — reserve 2 lines always so a 1-line name (e.g. "Agua") makes the SAME token
     height as a wrapping 2-line name ("Iron Training Dummy"). Uniform init strip. */
  min-height: 2.3em; }
.ss .cbt-tok .nm .tag { color: var(--muted); font-weight: 400; }
.ss .cbt-tok .av { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; font-family: var(--font-display); color: #0a0a0f; flex-shrink: 0; }
/* M6 enemy avatars — small portrait at the top of an enemy token (creature art or monogram fallback). */
.ss .cbt-tok .cbt-avatar { width: 38px; height: 38px; margin: 0; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: var(--surface3); border: 1px solid var(--border-light); }
.ss .cbt-tok .cbt-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss .cbt-tok .cbt-avatar-mono { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--danger); }
.ss .cbt-tok.enemy .cbt-avatar { border-color: rgba(255, 107, 107, 0.4); }
.ss .cbt-tok .hp { margin-top: 0; display: flex; align-items: center; gap: 7px; }
.ss .cbt-tok .hp-bar { flex: 1; height: 6px; display: block; }
/* display:block — the fill is a <span>; the base .ss .hp-fill sets no display, so
   inline it would ignore width/height and collapse to the bare gray track. */
.ss .cbt-tok .hp-fill { display: block; height: 100%; background: linear-gradient(90deg, #2fd97f, var(--green)); box-shadow: none; }
.ss .cbt-tok.enemy .hp-fill { background: linear-gradient(90deg, #b23b3b, var(--danger)); }
.ss .cbt-tok .hp-txt { font-family: var(--mono); font-size: 0.66rem; color: var(--text-dim); white-space: nowrap; }
.ss .cbt-tok .meta { margin-top: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ss .cbt-tok .ac { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); font-size: 0.66rem; color: var(--text-dim); }
.ss .cbt-tok .ac .sh { color: var(--muted); }
.ss .cbt-cond { font-size: 0.6rem; letter-spacing: 0.4px; text-transform: uppercase; color: var(--amber);
  background: rgba(255,184,74,0.12); border: 1px solid rgba(255,184,74,0.3); border-radius: 999px; padding: 1px 6px; }
.ss .cbt-cond.bad { color: var(--danger); background: rgba(255,107,107,0.12); border-color: rgba(255,107,107,0.3); }
.ss .cbt-tok.done { opacity: 0.42; }
.ss .cbt-tok.active { border-color: rgba(255,215,0,0.55); box-shadow: 0 0 0 1px rgba(255,215,0,0.4), 0 0 22px rgba(255,170,50,0.22);
  transform: translateY(-3px); background: linear-gradient(180deg, rgba(255,215,0,0.06), var(--surface)); }
.ss .cbt-tok.active .init { background: var(--gold-grad); color: #1a1205; border-color: transparent; font-weight: 600; }
.ss .cbt-tok .youtag { position: absolute; top: -8px; right: 8px; font-size: 0.54rem; letter-spacing: 1px; text-transform: uppercase;
  font-weight: 700; color: #0a0a0f; background: var(--gold-grad); border-radius: 999px; padding: 1px 7px; }
.ss .cbt-tok .ownertag { font-size: 0.6rem; color: var(--purple); }
/* targeting/picker states — used when the strip doubles as the target picker (Phase E) */
.ss .cbt-toks.targeting .cbt-tok { opacity: 0.4; }
.ss .cbt-toks.targeting .cbt-tok.targetable { opacity: 1; cursor: pointer; border-color: rgba(255,107,107,0.5);
  box-shadow: 0 0 0 1px rgba(255,107,107,0.35); }
.ss .cbt-toks.targeting .cbt-tok.targetable:hover { box-shadow: 0 0 0 2px var(--danger), 0 0 20px rgba(255,107,107,0.3); transform: translateY(-3px); }
.ss .cbt-toks.targeting .cbt-tok.picked { opacity: 1; border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger), 0 0 24px rgba(255,107,107,0.4); }
.ss .cbt-tok .pickmark { position: absolute; top: 7px; right: 7px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--danger); color: #1a0606; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; }

/* ===== Combat YOUR TURN panel — actions/reactions/creative (.cbt-act/.cbt-react/.cbt-creative) — Phase C1, ported from combat-redesign/combat.css, S170 ===== */
.ss .cbt-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.ss .cbt-act { font-family: var(--font-body); font-weight: 600; font-size: 0.86rem; padding: 10px 15px; border-radius: var(--radius-sm);
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; transition: all .15s; border: 1px solid var(--border-light);
  background: var(--surface2); color: var(--text); }
.ss .cbt-act:hover { background: var(--surface3); transform: translateY(-1px); }
.ss .cbt-act .ai { font-size: 0.95rem; }
.ss .cbt-act.offense { color: #ffd9d9; border-color: rgba(255,107,107,0.4); background: rgba(255,107,107,0.09); }
.ss .cbt-act.offense:hover { background: rgba(255,107,107,0.17); border-color: rgba(255,107,107,0.6); }
.ss .cbt-act.offense .ai { color: var(--danger); }
.ss .cbt-act.spent { opacity: 0.4; cursor: not-allowed; }
.ss .cbt-act.spent:hover { transform: none; background: var(--surface2); }
/* S243 — Dash/Disengage disabled pending the tactical grid (no movement/OA model
   in gridless combat). Grey + non-interactive; tooltip explains. */
.ss .cbt-act:disabled { opacity: 0.38; cursor: not-allowed; }
.ss .cbt-act:disabled:hover { transform: none; background: var(--surface2); border-color: var(--border-light); }
.ss .cbt-act:disabled { opacity: 0.4; cursor: not-allowed; }
.ss .cbt-act:disabled:hover { transform: none; }
.ss .cbt-act.offense:disabled:hover { background: rgba(255,107,107,0.09); border-color: rgba(255,107,107,0.4); }
/* Spell-like ally special actions (heal/aoe/buff) — arcane violet variant (M3 follow-up C). */
.ss .cbt-act.arcane { color: #e3d6ff; border-color: rgba(167,139,250,0.45); background: rgba(167,139,250,0.10); }
.ss .cbt-act.arcane:hover { background: rgba(167,139,250,0.18); border-color: rgba(167,139,250,0.65); }
.ss .cbt-act.arcane .ai { color: #a78bfa; }
.ss .cbt-actions .grow { flex: 1; }
.ss .cbt-act.danger-solid { background: var(--danger); color: #2a0808; border-color: transparent; font-weight: 700; }
.ss .cbt-act.danger-solid:hover { filter: brightness(1.08); background: var(--danger); }
.ss .cbt-act.danger-solid:disabled { filter: none; }
/* reaction row + creative input */
.ss .cbt-divider { height: 1px; background: var(--border); margin: 2px 0; }
.ss .cbt-react { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ss .cbt-react .lbl { font-size: 0.64rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.ss .cbt-rchip { font-size: 0.78rem; font-weight: 600; color: var(--text-dim); background: var(--surface2);
  border: 1px solid var(--border-light); border-radius: 999px; padding: 6px 13px; cursor: pointer; transition: all .14s; }
.ss .cbt-rchip:hover { background: var(--surface3); color: var(--text); border-color: var(--blue); }
.ss .cbt-creative { display: flex; align-items: center; gap: 10px; }
.ss .cbt-creative .cf { flex: 1; display: flex; align-items: center; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 6px 0 14px; }
.ss .cbt-creative .cf input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-family: var(--font-body);
  font-size: 0.9rem; padding: 11px 0; }
.ss .cbt-creative .cf input::placeholder { color: var(--muted); }
.ss .cbt-creative-note { font-size: 0.72rem; color: var(--muted); font-style: italic; }

/* ===== Combat YOUR TURN head + economy pips (.cbt-turn-head/.cbt-econ) — Phase C2, ported from combat-redesign/combat.css, S170 ===== */
/* The #combat-turn-banner becomes the design's .cbt-turn-head on your turn. Override
   the legacy banner layout/bg/pulse when in head mode (enemy/waiting keep legacy until C5). */
.ss .combat-turn-banner.cbt-turn-head { justify-content: flex-start; gap: 12px; padding: 13px 16px 11px;
  background: none; border-top: none; border-bottom: 1px solid var(--border); animation: none; }
.ss .cbt-turn-head .spacer { flex: 1; }
.ss .cbt-turn-orb { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; background: radial-gradient(circle at 35% 30%, #ffe27a, #b88a00); box-shadow: 0 0 16px rgba(255,200,60,0.4); color: #2a1a00; }
.ss .cbt-turn-title { font-family: var(--font-display); font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; font-size: 1rem;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ss .cbt-turn-hint { font-family: var(--font-read); font-style: italic; color: var(--text-dim); font-size: 0.9rem; }
.ss .cbt-econ { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ss .econ-pip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 0.74rem; font-weight: 600;
  border: 1px solid rgba(74,255,158,0.4); color: var(--green); background: rgba(74,255,158,0.07); }
.ss .econ-pip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px rgba(74,255,158,0.6); }
.ss .econ-pip.spent { color: var(--muted); border-color: var(--border-light); background: var(--surface2); text-decoration: line-through; }
.ss .econ-pip.spent .dot { background: var(--muted); box-shadow: none; }
.ss .econ-pip.move { color: var(--text-dim); border-color: var(--border-light); background: var(--surface2); }
.ss .econ-pip.move .mv { font-family: var(--mono); color: var(--text); }
.ss .cbt-roundbadge { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); border: 1px solid var(--border-light);
  border-radius: 7px; padding: 4px 9px; white-space: nowrap; }

/* ===== Combat effects row (.cbt-effects/.cbt-effchip) — Phase C3, ported from combat-redesign/combat.css, S170 ===== */
/* Neutralize the legacy #combat-effects-panel container; .cbt-effects owns the row. */
.ss .effects-panel { margin: 0; padding: 11px 16px; background: none; border: none; border-radius: 0; }
.ss .effects-panel.visible { display: block; }
.ss .cbt-effects { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 26px; }
.ss .cbt-effects .lbl { font-size: 0.66rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.ss .cbt-effchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 600;
  color: var(--gold-soft); background: rgba(255,215,0,0.08); border: 1px solid rgba(255,215,0,0.28); }
.ss .cbt-effchip .en { color: var(--muted); font-weight: 400; font-size: 0.68rem; }
.ss .cbt-effchip.empty { color: var(--muted); font-style: italic; background: none; border-color: transparent; }
/* color variants beyond the design's gold-only chip: harmful (red) + concentration (purple) */
.ss .cbt-effchip.harmful { color: #ffd9d9; background: rgba(255,107,107,0.1); border-color: rgba(255,107,107,0.3); }
.ss .cbt-effchip.conc { color: var(--purple); background: rgba(167,139,250,0.1); border-color: rgba(167,139,250,0.32); }
.ss .cbt-effend { margin-left: 2px; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--danger); background: none; border: none; cursor: pointer; padding: 0 2px; }
.ss .cbt-effend:hover { text-decoration: underline; }

/* ===== Combat YOUR TURN frame + wait panel (.cbt-turn/.cbt-wait) — Phase C4+C5, ported from combat-redesign/combat.css, S170 ===== */
/* C4 — the unifying gold-bordered panel: head (banner) + body (effects + form). */
.ss .cbt-turn { flex-shrink: 0; margin: 8px 14px 14px; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,215,0,0.05), var(--surface) 60%); border: 1px solid rgba(255,215,0,0.4);
  box-shadow: 0 -6px 30px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,215,0,0.08), 0 0 34px rgba(255,170,50,0.12); position: relative; }
.ss .cbt-turn-body { padding: 13px 16px 15px; display: flex; flex-direction: column; gap: 12px;
  /* S230 feed-readability — the your-turn panel is flex-shrink:0, so on a small (16")
     screen its action UI ate the whole column and starved the flex:1 narrative feed to
     ~1 line. Cap the body so a tall action picker scrolls WITHIN the panel (the gold
     YOUR-TURN head stays pinned above) and the feed reclaims a readable window. Only
     affects YOUR turn (#cbt-turn-panel is display:none otherwise). Tune live. */
  max-height: 40vh; overflow-y: auto; overscroll-behavior: contain; }
/* inside the frame the body owns padding/bg — strip the legacy child chrome */
.ss .cbt-turn-body .effects-panel { padding: 0; }
.ss .cbt-turn-body .combat-form { padding: 0; background: none; border-top: none; }
/* the .combat-form.your-turn gold box-shadow now lives INSIDE the .cbt-turn frame —
   kill it so its hard rectangular glow doesn't fight the panel's own glow (jagged edge). */
.ss .cbt-turn-body .combat-form.your-turn { box-shadow: none; border-top: none; }
.ss .cbt-turn-body .combat-form.visible { display: flex; }
/* C5 — enemy/ally waiting panel (replaces the .cbt-turn frame off your turn). */
.ss .cbt-wait { flex-shrink: 0; margin: 8px 14px 14px; border-radius: var(--radius); border: 1px solid var(--border-light);
  background: var(--surface); padding: 18px 18px; display: flex; align-items: center; gap: 16px; }
.ss .cbt-wait.enemy { border-color: rgba(255,107,107,0.35); background: linear-gradient(180deg, rgba(255,107,107,0.06), var(--surface)); }
.ss .cbt-wait .wav { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: #0a0a0f; font-size: 1.05rem; }
.ss .cbt-wait .wm { flex: 1; }
.ss .cbt-wait .wt { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text); letter-spacing: 0.4px; }
.ss .cbt-wait .ws { font-family: var(--font-read); font-style: italic; color: var(--text-dim); font-size: 0.9rem; margin-top: 2px; }
.ss .cbt-wait .ws .dots::after { content: ""; animation: ssDots 1.4s steps(4,end) infinite; }
.ss .cbt-wait .wready { display: flex; align-items: center; gap: 8px; }

/* (Feed redesign S5: the Phase D .cbt-turnsep / .cbt-enemyturn-h feed polish
   retired — round dividers are nf-capline capsules, the enemy header is the
   nf-egroup .eg-h.) */

/* ===== Combat click-to-roll d20 (.cbt-dice/.cbt-d20) — Phase E2, ported from combat-redesign/combat.css, S170 ===== */
.ss .cbt-dice { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 6px 4px 2px; }
.ss .cbt-dice-ctx { font-size: 0.84rem; color: var(--text-dim); text-align: center; }
.ss .cbt-dice-ctx b { color: var(--gold-soft); }
.ss .cbt-d20 { width: 88px; height: 88px; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--gold); padding: 0; outline: none;
  background: radial-gradient(circle at 38% 30%, #2a2740, #14121d); border: 2px solid rgba(255,215,0,0.45);
  clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); transition: transform .12s, box-shadow .15s; }
.ss .cbt-d20:hover { box-shadow: 0 0 26px rgba(255,200,60,0.4); transform: scale(1.04); }
.ss .cbt-d20:disabled { cursor: default; }
.ss .cbt-d20 .prompt { font-family: var(--font-body); font-size: 0.58rem; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-soft); line-height: 1.25; }
.ss .cbt-d20.rolling { animation: cbtRoll .5s cubic-bezier(.3,1.4,.5,1); }
.ss .cbt-d20.dmg { border-color: rgba(255,107,107,0.5); color: var(--danger); }
.ss .cbt-d20.dmg .prompt { color: #ffc9c9; }
.ss .cbt-d20.dmg:hover { box-shadow: 0 0 26px rgba(255,107,107,0.4); }
.ss .cbt-dice-hint { font-family: var(--mono); font-size: 0.76rem; color: var(--muted); text-align: center; }
@keyframes cbtRoll { 0% { transform: rotate(0) scale(.9); } 60% { transform: rotate(380deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } }

/* ===== Combat resolve spotlight (.cbt-resolve/.cbt-spot-*) — Phase E2, ported from combat-redesign/combat.css, S170 ===== */
.ss .cbt-resolve { position: fixed; inset: 0; z-index: 460; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; background: radial-gradient(ellipse 64% 58% at 50% 46%, rgba(40,6,6,0.55), rgba(6,4,6,0.92) 78%);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: cbtResolveIn .2s ease; }
@keyframes cbtResolveIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ss .cbt-resolve-x { position: absolute; top: 16px; right: 18px; width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
  background: var(--surface2); border: 1px solid var(--border-light); color: var(--text-dim); }
.ss .cbt-resolve-x:hover { background: var(--surface3); color: var(--text); }
.ss .cbt-resolve-tag { font-family: var(--font-display); font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  font-size: 0.82rem; color: var(--gold-soft); }
.ss .cbt-resolve-stage { display: flex; align-items: center; justify-content: center; gap: 40px; }
.ss .cbt-spot-actor { display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 150px; }
.ss .cbt-spot-actor .ring { width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; color: #0a0a0f; }
.ss .cbt-spot-actor.you .ring { box-shadow: 0 0 0 3px rgba(255,215,0,0.6), 0 0 30px rgba(255,170,50,0.35); }
.ss .cbt-spot-actor.enemy .ring { box-shadow: 0 0 0 3px rgba(255,107,107,0.6), 0 0 30px rgba(255,107,107,0.3); }
.ss .cbt-spot-actor .sn { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text); }
.ss .cbt-spot-actor .shp { font-family: var(--mono); font-size: 0.78rem; color: var(--text-dim); }
.ss .cbt-spot-tag { font-size: 0.62rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.ss .cbt-spot-vs { font-family: var(--font-display); font-weight: 800; letter-spacing: 3px; color: var(--danger); font-size: 1.4rem; }
.ss .cbt-resolve-dice { margin-top: 2px; }

/* ===== Combat victory flourish (.cbt-victory) — Phase F, ported from combat-redesign/combat.css, S170 ===== */
.ss .cbt-victory { position: fixed; inset: 0; z-index: 465; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center; background: radial-gradient(ellipse 58% 56% at 50% 44%, rgba(255,170,50,0.17), rgba(5,4,7,0.94) 68%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: cbtResolveIn .25s ease; }
.ss .cbt-victory .vmark { font-size: 2.4rem; filter: drop-shadow(0 0 18px rgba(255,200,60,0.6)); }
.ss .cbt-victory .vt { font-family: var(--font-display); font-weight: 900; letter-spacing: 8px; text-transform: uppercase; font-size: 3.4rem;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(255,170,50,0.3); }
.ss .cbt-victory .vs { font-family: var(--font-read); font-style: italic; color: var(--text-dim); font-size: 1.05rem; max-width: 460px; }
.ss .cbt-victory .vxp { font-family: var(--mono); color: var(--gold); font-size: 0.95rem; letter-spacing: 1px; }

/* ===== Combat death-save tracker (.cbt-death) — Phase F, ported from combat-redesign/combat.css, S170 ===== */
.ss .cbt-death { border-radius: var(--radius); border: 1px solid rgba(255,107,107,0.5);
  background: linear-gradient(180deg, rgba(255,107,107,0.1), var(--surface) 70%); box-shadow: 0 0 34px rgba(255,107,107,0.18);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 13px; margin-bottom: 10px; }
.ss .cbt-death-head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.ss .cbt-death-head .dt { font-family: var(--font-display); font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  font-size: 1.05rem; color: var(--danger); }
.ss .cbt-death-head .dsub { font-family: var(--font-read); font-style: italic; color: var(--text-dim); font-size: 0.9rem; }
.ss .cbt-death-rows { display: flex; gap: 26px; flex-wrap: wrap; }
.ss .cbt-dsrow { display: flex; align-items: center; gap: 11px; }
.ss .cbt-dsrow .dl { font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); width: 74px; }
.ss .cbt-pips { display: flex; gap: 7px; }
.ss .cbt-pip { width: 19px; height: 19px; border-radius: 50%; border: 2px solid var(--border-light); }
.ss .cbt-pip.succ { background: var(--green); border-color: var(--green); box-shadow: 0 0 9px rgba(74,255,158,0.5); }
.ss .cbt-pip.fail { background: var(--danger); border-color: var(--danger); box-shadow: 0 0 9px rgba(255,107,107,0.5); }
.ss .cbt-death-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ss .cbt-death-stat { font-size: 0.84rem; color: var(--text-dim); }
.ss .cbt-death-stat b.bad { color: var(--danger); }
.ss .cbt-death-stat b.good { color: var(--green); }

/* ===== Combat companion picker (.cbt-companion) — Phase F, S170 (purple-accented, .cbt-act buttons) ===== */
.ss .cbt-companion { border-radius: var(--radius-sm); border: 1px solid rgba(167,139,250,0.45);
  background: linear-gradient(180deg, rgba(167,139,250,0.08), var(--surface) 70%); box-shadow: 0 0 24px rgba(167,139,250,0.12);
  padding: 14px 16px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.ss .cbt-companion-head { display: flex; align-items: center; gap: 8px; }
.ss .cbt-companion-head .ic { font-size: 1.1rem; }
.ss .cbt-companion-head .cn { font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; letter-spacing: 0.4px;
  background: linear-gradient(135deg, #c9b3ff, #a78bfa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ss .cbt-companion .csub { font-size: 0.8rem; color: var(--text-dim); }
.ss .cbt-companion-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.ss .cbt-companion-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 0.66rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.ss .cbt-companion-fields .form-select { padding: 8px 10px; font-size: 0.9rem; border-radius: var(--radius-xs); }
.ss .cbt-companion-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== Combat ambiance + token cascade (audit gaps) — ported from combat-redesign/combat.css, S170 ===== */
/* design .cbt-center: red glow + a thin red top-rule on the play area, during combat only */
.ss .layH-feed.cbt-combat-mode { position: relative;
  background: radial-gradient(ellipse 85% 42% at 50% 0%, rgba(255,107,107,0.07), transparent 60%); }
.ss .layH-feed.cbt-combat-mode::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 4;
  pointer-events: none; background: linear-gradient(90deg, transparent, var(--danger), transparent); opacity: 0.7; }
/* S230 — during combat, hide the bottom "Or describe a creative action…" input bar;
   free-text moves to the "Creative Action" button → modal in the your-turn panel, so
   the bar's ~80px is reclaimed for the feed. Restored automatically out of combat
   (the class is removed in onCombatEnd). */
.ss .layH-feed.cbt-combat-mode #normal-action-bar { display: none; }
/* design cbtCascade: tokens stagger in on the first strip render of a combat */
@media (prefers-reduced-motion: no-preference) {
  .ss .cbt-tok.cascade { animation: cbtCascade .45s cubic-bezier(.2,1.2,.4,1) both; }
}
@keyframes cbtCascade { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } }

/* =============================================================================
 * End of Session — Tavern Table modal (.eos-*) S177 Slice 2
 * =============================================================================
 * Ported from docs/design/ui-redesign/project_redesign/design_handoff_endofsession/
 * endsession/endsession.css direction B (Tavern Table). Exact font sizes,
 * spacing, and gradients per feedback_redesign_full_fidelity. Reuses the
 * shipped .ss token set (--gold, --surface, etc.). Driven by Slice 1's
 * session:ended socket emit. Hides cards when their slice-data is empty
 * (storySoFar / tableMoments stay null/[] until later slices).
 */
/* S177 fidelity pass (2026-06-09) — Tyler called the modal-on-cockpit pattern
   wrong; design intent is a full-screen takeover that players are forced into
   when the leader ends a session. These selectors override the .modal-overlay
   centered-card defaults so .eos-overlay acts as the takeover stage. */
.eos-overlay {
  z-index: 1000;                                     /* above all in-game modals */
  background: var(--bg, #08070a);                    /* solid; not the dimmed rgba(0,0,0,.8) backdrop */
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
}
.eos-modal {
  position: relative; width: 100vw; height: 100vh;
  max-height: none;
  background: transparent;
  border: none; border-radius: 0; box-shadow: none;
  margin: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.eos-close {
  /* Retired in takeover mode — the Close Session footer button is the
     canonical exit. Kept in markup for the leave-modal scaffold to inherit
     focus styles; just hidden visually. */
  display: none;
}
/* Top bar — brand + leader pill. Mirrors the design handoff's .es-top. */
.eos-top {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-light, rgba(255,255,255,.07));
  background: linear-gradient(180deg, rgba(255,180,60,.04), transparent);
  flex-shrink: 0; position: relative; z-index: 5;
}
.eos-brand {
  font-family: 'Cinzel', serif; font-weight: 800; font-size: 1.05rem;
  letter-spacing: 1px; white-space: nowrap;
  background: linear-gradient(135deg, #FFD700, #FFE88A 32%, #FFD700 52%, #CC9900);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.eos-brand .sm {
  font-family: 'DM Sans', sans-serif;
  -webkit-text-fill-color: rgba(241,238,245,.34);
  color: rgba(241,238,245,.34);
  font-size: .72rem; font-weight: 500; letter-spacing: 1.4px;
  text-transform: uppercase; margin-left: 10px;
}
.eos-top-sp { flex: 1; }
.eos-top-pill {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: .72rem;
  color: rgba(241,238,245,.62);
  padding: 5px 11px;
  border: 1px solid var(--border-light, rgba(255,255,255,.13));
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.eos-top-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold, #FFD700);
}
/* Scrollable content body — sits between top bar and (implicit) footer. */
.eos-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  position: relative; z-index: 1;
}
.eos-wrap {
  max-width: 1240px; margin: 0 auto;
  padding: 32px 28px 48px;
}
/* Ambient background — wood-fire glow + edge vignette + drifting embers.
   Reduced-motion users get a static frame (embers display:none). */
.eos-bg {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.eos-bg .glow {
  position: absolute; left: 50%; top: -10%;
  width: 120vmax; height: 80vmax;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 0%,
    rgba(255,160,50,.16), rgba(255,140,40,.04) 38%, transparent 64%);
}
.eos-bg .vig {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%,
    transparent 38%, rgba(0,0,0,.62) 100%);
}
.eos-ember {
  position: absolute; bottom: -12px; width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,110,.9), rgba(255,150,50,0) 70%);
  animation: eosEmber linear infinite;
  opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .eos-ember { display: none; } }
@keyframes eosEmber {
  0%   { transform: translateY(0)    translateX(0);  opacity: 0;   }
  10%  { opacity: .85; }
  90%  { opacity: .55; }
  100% { transform: translateY(-92vh) translateX(28px); opacity: 0; }
}

/* Hero band — full-bleed scene art + meta overlay + auto-gen note */
.eos-hero {
  position: relative; border-radius: 14px; overflow: hidden; height: 240px;
  background: linear-gradient(180deg, rgba(255,180,60,.10), transparent), var(--surface, #121117);
  border: 1px solid var(--border-light, rgba(255,255,255,.13));
  display: flex; align-items: flex-end; padding: 24px 30px; margin-bottom: 18px;
}
.eos-hero .scn { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.eos-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,7,10,0) 30%, var(--bg, #08070a) 100%); }
.eos-hero .meta { position: relative; z-index: 1; }
.eos-hero .mark { font-family: 'DM Mono', ui-monospace, monospace; font-size: .72rem; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-soft, #FFE8A0); }
.eos-hero .ttl {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 2.2rem; line-height: 1.05; margin: 6px 0 0;
  background: linear-gradient(135deg, #FFD700 0%, #FFE88A 32%, #FFD700 52%, #CC9900 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 24px rgba(0,0,0,.6);
}
.eos-hero .sub { font-family: 'Spectral', Georgia, serif; font-style: italic; color: #e9e3f0; margin-top: 6px; }
.eos-hero-note {
  position: absolute; right: 14px; top: 12px; z-index: 1;
  font-family: 'DM Mono', ui-monospace, monospace; font-size: .62rem; letter-spacing: .5px;
  color: rgba(241,238,245,.6); background: rgba(8,7,10,.55);
  border: 1px solid rgba(255,255,255,.12); padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(4px);
}
/* S177 fidelity — admin force-regenerate hero button. Sits adjacent to
   the hero note pill in the top-right corner. Quiet by default, gold on
   hover so the destructive-cost intent is obvious. */
.eos-hero-regen {
  position: absolute; right: 14px; top: 40px; z-index: 1;
  font-family: 'DM Mono', ui-monospace, monospace; font-size: .62rem; letter-spacing: .5px;
  color: rgba(241,238,245,.7); background: rgba(8,7,10,.55);
  border: 1px solid rgba(255,215,0,.28); padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(4px);
  cursor: pointer; transition: all .15s;
}
.eos-hero-regen:hover {
  color: var(--gold, #FFD700);
  border-color: rgba(255,215,0,.6);
  background: rgba(255,215,0,.06);
}

/* 2-column grid + cards */
.eos-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
@media (max-width: 880px) { .eos-grid { grid-template-columns: 1fr; } }
.eos-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.eos-card {
  background: var(--surface, #121117);
  border: 1px solid var(--border-light, rgba(255,255,255,.13));
  border-radius: 14px; padding: 20px 22px;
}
.eos-ch { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.eos-ch .t { font-family: 'Cinzel', serif; font-size: 1rem; letter-spacing: 1px; color: var(--gold, #FFD700); }
.eos-ch .ct { font-family: 'DM Mono', ui-monospace, monospace; font-size: .7rem; color: var(--muted, rgba(241,238,245,.34)); letter-spacing: 1px; }

/* DM's Recap card — Spectral italic + drop cap on first para */
.eos-recap p {
  font-family: 'Spectral', Georgia, serif; font-style: italic; font-size: 1rem;
  line-height: 1.7; color: #ebe6f0; margin: 0 0 18px;
}
.eos-recap p:last-child { margin-bottom: 0; }
.eos-recap p:first-of-type { display: flow-root; overflow: hidden; }
.eos-recap .dropcap {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 3rem; line-height: .85;
  float: left; padding: 6px 12px 2px 0; color: var(--gold, #FFD700); font-style: normal;
}
.eos-regenbtn {
  font-family: 'DM Sans', sans-serif; font-size: .78rem; color: var(--gold-soft, #FFE8A0); cursor: pointer;
  background: rgba(255,215,0,.06); border: 1px solid rgba(255,215,0,.28);
  padding: 6px 12px; border-radius: 999px;
}
.eos-regenbtn:hover:not(:disabled) { background: rgba(255,215,0,.14); }
.eos-regenbtn:disabled { opacity: .4; cursor: not-allowed; }

/* Party + XP */
.eos-party { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 640px) { .eos-party { grid-template-columns: 1fr; } }
.eos-pc {
  background: var(--surface2, #1a1922); border: 1px solid var(--border, rgba(255,255,255,.07));
  border-radius: 10px; padding: 13px 15px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
}
.eos-pc .pf {
  width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  border: 1.5px solid var(--border-light, rgba(255,255,255,.13));
  background: var(--surface3, #23222e);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-weight: 700;
}
.eos-pc .pf img { width: 100%; height: 100%; object-fit: cover; }
.eos-pc .nm { font-family: 'Cinzel', serif; font-weight: 600; line-height: 1.1; }
.eos-pc .sub { font-size: .72rem; color: var(--muted, rgba(241,238,245,.34)); margin-top: 2px; font-family: 'DM Mono', ui-monospace, monospace; letter-spacing: .4px; }
.eos-pc .xp { font-family: 'Cinzel', serif; font-size: 1.15rem; color: var(--gold, #FFD700); text-align: right; line-height: 1; }
.eos-pc .xp .x {
  font-family: 'DM Sans', sans-serif; font-size: .56rem; letter-spacing: 1.4px;
  color: var(--muted, rgba(241,238,245,.34)); display: block; text-transform: uppercase;
}

/* Story so Far prelude card */
.eos-prelude { background: linear-gradient(180deg, rgba(255,180,60,.05), transparent); border: 1px solid rgba(255,215,0,.22); }
.eos-prelude .qt {
  font-family: 'Spectral', Georgia, serif; font-style: italic;
  color: var(--text, #f1eef5); line-height: 1.65; margin: 0;
}

/* Loot list — gold-pinned first */
.eos-loot { display: flex; flex-direction: column; gap: 7px; }
.eos-li {
  display: flex; flex-direction: column; gap: 3px; padding: 9px 12px;
  background: var(--surface2, #1a1922); border: 1px solid var(--border, rgba(255,255,255,.07));
  border-radius: 7px;
}
.eos-li-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.eos-li .nm {
  font-weight: 600; font-size: .9rem; min-width: 0; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.eos-li .meta { font-family: 'DM Mono', ui-monospace, monospace; font-size: .66rem; color: var(--muted, rgba(241,238,245,.34)); letter-spacing: .4px; }
.eos-li .rar { font-family: 'DM Mono', ui-monospace, monospace; font-size: .66rem; letter-spacing: .4px; flex-shrink: 0; }
.eos-li-bot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 1px; }
.eos-li .looter {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: .62rem; letter-spacing: .6px;
  color: var(--gold-soft, #FFE8A0);
  border: 1px solid rgba(255,215,0,.22); background: rgba(255,215,0,.06);
  padding: 2px 8px; border-radius: 999px; flex-shrink: 0;
}
.eos-li.gold {
  border-color: rgba(255,215,0,.34);
  background: linear-gradient(90deg, rgba(255,215,0,.08), var(--surface2, #1a1922) 70%);
}
.eos-li.gold .nm { color: var(--gold-soft, #FFE8A0); }

/* Quests */
.eos-qrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border, rgba(255,255,255,.07)); }
.eos-qrow:last-child { border-bottom: none; }
.eos-qrow .st {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: .58rem; letter-spacing: 1.3px;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid; flex-shrink: 0;
}
.eos-qrow .st.done { color: #4AFF9E; border-color: rgba(74,255,158,.34); background: rgba(74,255,158,.06); }
.eos-qrow .st.adv { color: #FFB84A; border-color: rgba(255,184,74,.34); background: rgba(255,184,74,.06); }
.eos-qrow .st.new { color: #4A9EFF; border-color: rgba(74,158,255,.34); background: rgba(74,158,255,.06); }
.eos-qrow .tt { font-weight: 600; font-size: .9rem; }

/* Table Moments */
.eos-mvp { display: flex; flex-direction: column; gap: 8px; }
.eos-mr {
  display: flex; gap: 10px; padding: 10px 12px;
  background: linear-gradient(135deg, rgba(167,139,250,.08), rgba(255,215,0,.04));
  border: 1px solid rgba(167,139,250,.22); border-radius: 7px;
}
.eos-mr .ico { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.eos-mr .lab { font-family: 'Cinzel', serif; font-size: .62rem; letter-spacing: 1.4px; text-transform: uppercase; color: #A78BFA; }
.eos-mr .txt { color: var(--text-dim, rgba(241,238,245,.62)); margin-top: 1px; line-height: 1.45; font-size: .86rem; }
.eos-mr .who { color: var(--gold, #FFD700); font-weight: 600; }

.eos-foot { margin-top: 20px; display: flex; gap: 12px; justify-content: flex-end; }

/* S177 fidelity pass — empty-state body for cards with no data (Loot / Quests /
   Table Moments / etc). Soft, muted, italic line under the card header so the
   card stays in the layout grid rather than collapsing + reflowing the page. */
.eos-empty {
  margin: 0;
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  color: var(--text-dim, rgba(241,238,245,.55));
  font-size: .9rem;
  line-height: 1.5;
  padding: 8px 0 2px;
}

/* S177 Slice 4 — Leave-warning modal. Tighter than the main Tavern Table;
   confirm-dialog footprint. Same .ss token system so it inherits the
   Tavern Table palette without redefining custom colors. */
.eos-leave-overlay { z-index: 950; } /* above eos-overlay (900) so it can sit on top if both rendered */
.eos-leave-modal {
  position: relative; width: min(440px, 92vw);
  background: var(--bg, #08070a); color: var(--text, #f1eef5);
  border: 1px solid var(--border-light, rgba(255,255,255,.13));
  border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
}
.eos-leave-wrap { padding: 22px 24px 20px; }
.eos-leave-head { margin-bottom: 10px; }
.eos-leave-head h2 {
  margin: 0; font-family: 'Cinzel', 'Spectral', Georgia, serif;
  font-size: 1.1rem; letter-spacing: .5px; line-height: 1.3;
  color: var(--text, #f1eef5);
}
.eos-leave-body {
  margin: 0 0 18px; color: var(--text-dim, rgba(241,238,245,.72));
  font-family: 'Spectral', Georgia, serif; font-size: .92rem; line-height: 1.55;
}
.eos-leave-actions {
  /* S258 (P-ENDSESSION-CANCEL) — the button pair was right-aligned (flex-end),
     leaving a large empty gutter on the left of the narrow 440px centered modal
     so Cancel read as off-center. Center the pair to balance under the title. */
  display: flex; gap: 10px; justify-content: center;
}
/* S258 (P-ENDSESSION-CANCEL, pass 2) — .ss-btn is inline-flex with default
   justify-content:flex-start; under this min-width a short label ("Cancel")
   hugged the button's LEFT edge while "End Session" filled its width — the
   actual off-center Tyler snipped. Center the label within the button. */
.eos-leave-actions .ss-btn { min-width: 96px; justify-content: center; }
/* S258 — the combat READY GATE card (Tyler: "Combat is starting in 30s" +
   Ready now!). Rides the Hearthlight (.hlp) kit — fixed bottom-center so the
   DM's opener stays readable in the feed above it. Only the countdown digits
   need a style of their own. */
#combat-staging-card .hlp-count { font-family: var(--hlp-mono, ui-monospace); color: var(--gold);
  font-variant-numeric: tabular-nums; }
#combat-staging-card .hlp-btn:disabled { cursor: default; opacity: 0.75; transform: none; }

/* S258 — the leader End Session "wrapping up the night…" wait state (shown in
   the leave modal until game:session_ended swaps in the Tavern Table). */
.eos-leave-wait { animation: eos-wait-pulse 2.4s ease-in-out infinite; margin-bottom: 4px; }
.eos-wait-quill { display: inline-block; margin-right: 6px; animation: eos-quill-bob 1.6s ease-in-out infinite; }
@keyframes eos-wait-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes eos-quill-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
  .eos-leave-wait, .eos-wait-quill { animation: none; }
}

/* S177 Slice 6 — Leader-pause modal (uncloseable). z-index above the Tavern
   Table (900) + the leave modal (950) so it always sits on top while armed. */
.eos-pause-overlay { z-index: 970; }
.eos-pause-modal {
  position: relative; width: min(420px, 92vw);
  padding: 30px 28px 26px; text-align: center;
  background: var(--bg, #08070a); color: var(--text, #f1eef5);
  border: 1px solid var(--border-light, rgba(255,255,255,.13));
  border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
}
.eos-pause-icon { font-size: 2.2rem; line-height: 1; opacity: .85; margin-bottom: 12px; }
.eos-pause-title {
  margin: 0 0 10px; font-family: 'Cinzel', 'Spectral', Georgia, serif;
  font-size: 1.15rem; letter-spacing: .5px; line-height: 1.3;
  color: var(--text, #f1eef5);
}
.eos-pause-body {
  margin: 0 0 18px; color: var(--text-dim, rgba(241,238,245,.72));
  font-family: 'Spectral', Georgia, serif; font-size: .92rem; line-height: 1.55;
}
.eos-pause-count {
  font-family: 'Cinzel', 'Spectral', Georgia, serif;
  font-variant-numeric: tabular-nums; font-size: 2.4rem; font-weight: 600;
  letter-spacing: 1px; line-height: 1; margin-bottom: 22px;
  color: var(--gold, #e8c87a);
}
/* .ss-btn is inline-flex with no justify-content (defaults flex-start); the
   min-width below would otherwise left-align the label. Center it. */
.eos-pause-modal .ss-btn { min-width: 150px; justify-content: center; }

/* =============================================================================
   Ascension Level-Up cinematic (React island #levelup-island) — ported verbatim
   from project_redesign/design_handoff_levelup/levelup/levelup.css (Ascension /
   Direction A + Grimoire + ASI). Direction B (.luB-*) + Council (.lu-lanes)
   excluded per the locked build. Design: ascension-levelup-design.md.
   ============================================================================= */
#levelup-island { position: fixed; inset: 0; z-index: 2000; display: none; }
.lu { --bg:#08070a; --bg2:#0c0b10; --surface:#121117; --surface2:#1a1922; --surface3:#23222e;
  --border:rgba(255,255,255,.07); --border-light:rgba(255,255,255,.13);
  --text:#f1eef5; --text-dim:rgba(241,238,245,.62); --muted:rgba(241,238,245,.34);
  --gold:#FFD700; --gold-soft:#FFE8A0; --gold-grad:linear-gradient(135deg,#FFD700 0%,#FFE88A 32%,#FFD700 52%,#CC9900 100%);
  --green:#4AFF9E; --blue:#4A9EFF; --purple:#A78BFA; --amber:#FFB84A; --danger:#FF6B6B;
  --accent:var(--gold); --accent-soft:var(--gold-soft); --accent-grad:var(--gold-grad);
  --r:14px; --rs:10px; --rxs:7px;
  --fd:'Cinzel',serif; --fb:'DM Sans',sans-serif; --fr:'Spectral',Georgia,serif; --fm:'DM Mono',ui-monospace,monospace;
  position:absolute; inset:0; overflow:hidden; background:var(--bg); color:var(--text); font-family:var(--fb); display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased; }
.lu *,.lu *::before,.lu *::after { box-sizing:border-box; }
.lu ::-webkit-scrollbar { width:9px; height:9px; } .lu ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.10); border-radius:6px; }
.lu ::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.18); }
.lu-bg { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.lu-bg .vig { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 40%, transparent 24%, rgba(0,0,0,.78) 100%); }
.lu-bg .rays { position:absolute; left:50%; top:50%; width:140vmax; height:140vmax; transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, var(--tint, #FFD700) 14%, transparent) 6deg, transparent 12deg,
    transparent 38deg, color-mix(in srgb, var(--tint, #FFD700) 10%, transparent) 44deg, transparent 50deg,
    transparent 76deg, color-mix(in srgb, var(--tint, #FFD700) 14%, transparent) 82deg, transparent 88deg,
    transparent 124deg, color-mix(in srgb, var(--tint, #FFD700) 10%, transparent) 130deg, transparent 136deg,
    transparent 172deg, color-mix(in srgb, var(--tint, #FFD700) 14%, transparent) 178deg, transparent 184deg,
    transparent 222deg, color-mix(in srgb, var(--tint, #FFD700) 10%, transparent) 228deg, transparent 234deg,
    transparent 268deg, color-mix(in srgb, var(--tint, #FFD700) 14%, transparent) 274deg, transparent 280deg,
    transparent 320deg, color-mix(in srgb, var(--tint, #FFD700) 10%, transparent) 326deg, transparent 332deg);
  opacity:.32; animation:luRay 60s linear infinite; }
@media(prefers-reduced-motion:reduce){ .lu-bg .rays { animation:none; } }
@keyframes luRay { from { transform:translate(-50%,-50%) rotate(0deg); } to { transform:translate(-50%,-50%) rotate(360deg); } }
.lu-ember { position:absolute; bottom:-12px; width:3px; height:3px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,200,110,.95), rgba(255,150,50,0) 70%);
  animation:luEm linear infinite; opacity:0; }
@media(prefers-reduced-motion:reduce){ .lu-ember { display:none; } }
@keyframes luEm { 0%{transform:translateY(0); opacity:0;} 10%{opacity:.9;} 90%{opacity:.6;} 100%{transform:translateY(-95vh) translateX(36px); opacity:0;} }
.lu-stage { position:relative; z-index:1; flex:1; min-height:0; display:flex; flex-direction:column; }
.lu-top { display:flex; align-items:center; gap:14px; padding:13px 24px; border-bottom:1px solid var(--border); flex-shrink:0; z-index:5;
  background:linear-gradient(180deg, rgba(255,180,60,.04), transparent); }
.lu-brand { font-family:var(--fd); font-weight:800; font-size:1.05rem; letter-spacing:1px; white-space:nowrap;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lu-brand .sm { font-family:var(--fb); -webkit-text-fill-color:var(--muted); color:var(--muted);
  font-size:.72rem; font-weight:500; letter-spacing:1.4px; text-transform:uppercase; margin-left:10px; }
.lu-sp { flex:1; }
.lu-pill { font-family:var(--fm); font-size:.72rem; color:var(--text-dim); padding:5px 11px; border:1px solid var(--border-light); border-radius:999px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.lu-pill .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); }
.lu-btn { font-family:var(--fb); font-weight:600; font-size:.92rem; padding:11px 20px; border-radius:var(--rs); cursor:pointer;
  border:1px solid var(--border-light); background:var(--surface2); color:var(--text); transition:all .16s; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; }
.lu-btn:hover { background:var(--surface3); }
.lu-btn:disabled { opacity:.4; cursor:not-allowed; }
.lu-btn.gold { background:var(--accent-grad); color:#1a1205; border-color:transparent; font-weight:700; box-shadow:0 4px 24px -8px rgba(255,200,60,.55); }
.lu-btn.gold:hover:not(:disabled) { filter:brightness(1.07); }
.lu-btn.ghost { background:rgba(255,215,0,.06); color:var(--accent-soft); border-color:rgba(255,215,0,.30); }
.lu-btn.lg { padding:14px 30px; font-size:1.02rem; }
.lu-mono { font-family:var(--fm); font-size:.72rem; color:var(--muted); letter-spacing:.5px; }
.lu-lvl { display:inline-flex; align-items:baseline; gap:14px; font-family:var(--fd); font-weight:700; line-height:1; }
.lu-lvl .from { color:var(--text-dim); font-size:2.2rem; }
.lu-lvl .arrow { color:var(--accent-soft); font-size:1.8rem; padding-bottom:6px; }
.lu-lvl .to { font-size:5rem; background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 4px 36px rgba(255,200,60,.45); animation:luPop .8s ease both; }
@keyframes luPop { from { transform:scale(.72); opacity:0; } to { transform:scale(1); opacity:1; } }
.lu-bigeyebrow { font-family:var(--fm); font-size:.78rem; letter-spacing:6px; text-transform:uppercase; color:var(--accent-soft); }
.lu-headline { font-family:var(--fd); font-weight:700; font-size:3rem; line-height:1; margin:0; color:#fff;
  background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 4px 30px rgba(255,180,60,.2); }
.lu-sub { font-family:var(--fr); font-style:italic; color:var(--text-dim); font-size:1.05rem; max-width:540px; line-height:1.5; }
.lu-ledger { display:flex; flex-direction:column; gap:10px; }
.lu-ldrow { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--rs); padding:13px 16px; }
.lu-ldrow.hp { border-color:rgba(74,255,158,.28); background:linear-gradient(90deg, rgba(74,255,158,.07), var(--surface) 70%); }
.lu-ldrow .ico { font-size:1.4rem; line-height:1; }
.lu-ldrow .lab { font-family:var(--fd); font-size:.8rem; letter-spacing:1.2px; text-transform:uppercase; color:var(--accent-soft); }
.lu-ldrow .v { font-family:var(--fm); font-size:.84rem; color:var(--text-dim); margin-top:2px; }
.lu-ldrow .v b { color:var(--text); font-weight:600; }
.lu-ldrow .delta { font-family:var(--fd); font-weight:700; font-size:1.3rem; color:var(--accent); text-align:right; line-height:1; white-space:nowrap; }
.lu-ldrow .delta .x { font-family:var(--fb); font-size:.56rem; letter-spacing:1.4px; color:var(--muted); display:block; text-transform:uppercase; }
.lu-ldrow.hp .delta { color:var(--green); }
.lu-domains { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
/* v1.8.1307 — center a 2-card grid (e.g. Monk's 2 Monastic Traditions) instead of
   leaving an empty third column that reads like a missing option. */
.lu-domains.two { grid-template-columns:repeat(2, minmax(0, 320px)); justify-content:center; }
/* v1.8.1307 — auto-granted-features readout (Extra Attack, Ki, Stunning Strike, …). */
.lu-featgains { display:flex; flex-direction:column; gap:10px; }
.lu-featgain { background:var(--surface); border:1px solid var(--border-light); border-left:3px solid var(--accent); border-radius:10px; padding:13px 16px; text-align:left; }
.lu-featgain-top { display:flex; align-items:center; gap:9px; margin-bottom:5px; }
.lu-featgain-top .ico { color:var(--accent); font-size:.85rem; }
.lu-featgain-top .nm { font-family:var(--fd); font-weight:700; font-size:1.08rem; color:var(--text); }
.lu-featgain .desc { color:var(--text-dim); margin:0; line-height:1.5; font-size:.92rem; }
.lu-dom { position:relative; text-align:left; cursor:pointer; background:var(--surface);
  border:1.5px solid var(--border-light); border-radius:var(--r); padding:22px 20px 20px;
  display:flex; flex-direction:column; gap:10px; transition:all .18s; overflow:hidden; }
.lu-dom::before { content:''; position:absolute; left:0; right:0; top:0; height:4px; background:var(--dtint, var(--gold)); opacity:.6; }
.lu-dom:hover { transform:translateY(-3px); border-color:var(--dtint, var(--accent)); background:var(--surface2); }
.lu-dom.on { border-color:var(--dtint, var(--accent)); background:linear-gradient(180deg, color-mix(in srgb, var(--dtint, var(--accent)) 14%, transparent), var(--surface) 60%);
  box-shadow:0 0 0 1px var(--dtint, var(--accent)), 0 12px 32px -16px var(--dtint, var(--accent)); }
.lu-dom .glyph { font-size:2rem; line-height:1; color:var(--dtint, var(--accent)); text-shadow:0 0 22px var(--dtint, var(--accent)); }
.lu-dom .role { font-family:var(--fb); font-size:.68rem; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--dtint, var(--amber)); }
.lu-dom .nm { font-family:var(--fd); font-weight:700; font-size:1.2rem; color:#fff; line-height:1; }
.lu-dom .blurb { font-family:var(--fr); font-style:italic; color:var(--text-dim); font-size:.92rem; line-height:1.5; }
/* "pick this if you like…" line — our static playstyle guidance (replaces the
   design's AI nudge per Tyler S178). Tinted like the card for cohesion. */
.lu-dom .lu-dom-pick { font-family:var(--fb); font-size:.82rem; line-height:1.45; color:var(--text-dim);
  border-top:1px solid var(--border); padding-top:10px; margin-top:2px; }
.lu-dom .lu-dom-pick .pk { font-family:var(--fm); font-size:.6rem; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--dtint, var(--accent-soft)); display:block; margin-bottom:3px; }
.lu-dom .sect { margin-top:6px; padding-top:10px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:6px; }
.lu-dom .skey { font-family:var(--fm); font-size:.58rem; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); }
.lu-dom .sval { font-size:.84rem; color:var(--text-dim); line-height:1.45; }
.lu-dom .sval b { color:var(--text); font-weight:600; }
.lu-dom .picktick { position:absolute; bottom:14px; right:14px; width:26px; height:26px; border-radius:50%;
  background:var(--dtint, var(--accent)); color:#0c0b10; display:none; align-items:center; justify-content:center; font-weight:800; font-size:.78rem; }
.lu-dom.on .picktick { display:flex; }
/* v1.8.1290 — an option already taken (e.g. a Fighting Style a Champion already
   has at L10): dimmed, non-interactive, badged "Already picked". */
.lu-dom.disabled { opacity:.42; cursor:not-allowed; filter:grayscale(.5); }
.lu-dom.disabled:hover { transform:none; border-color:var(--border); }
.lu-dom .lu-dom-note { position:absolute; top:12px; right:12px; font-family:var(--fm); font-size:.58rem; font-weight:700;
  letter-spacing:1.1px; text-transform:uppercase; color:var(--muted); border:1px solid var(--border);
  border-radius:999px; padding:3px 8px; background:rgba(0,0,0,.25); }
/* v1.8.1299 — requirement note on a PLAIN card (invocation level/Pact gate): a
   normal-flow footer pill pushed to the bottom-left, instead of the absolute
   top-right badge above, which collided with the title + clipped on these
   smaller cards (Tyler S180). */
.lu-dom .lu-dom-req { margin-top:auto; align-self:flex-start; font-family:var(--fm); font-size:.6rem; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; color:var(--muted); border:1px solid var(--border);
  border-radius:999px; padding:3px 9px; background:rgba(0,0,0,.25); white-space:nowrap; }
.lu-nav { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:30px; padding-top:24px; border-top:1px solid var(--border); }
/* v1.8.1287 Slice 9 R1 — server gate-rejection message on the live confirm path */
.lu-error { margin-top:14px; padding:10px 14px; border:1px solid rgba(220,80,80,.45); border-radius:var(--rs); background:rgba(220,80,80,.10); color:#e89090; font-size:.92rem; text-align:center; }
.luA-scroll { flex:1; min-height:0; overflow-y:auto; }
.luA-wrap { max-width:780px; margin:0 auto; padding:60px 28px 80px; text-align:center; position:relative; }
.luA-beam { position:absolute; left:50%; top:0; bottom:0; width:240px; transform:translateX(-50%);
  background:linear-gradient(180deg, color-mix(in srgb, var(--tint, #FFD700) 30%, transparent), transparent 55%);
  filter:blur(28px); pointer-events:none; opacity:.7; }
.luA-stack > * { position:relative; }
.luA-eyebrow { margin-bottom:12px; }
.luA-portrait { width:140px; height:140px; border-radius:50%; overflow:hidden; margin:0 auto 22px;
  border:2px solid var(--accent); display:flex; align-items:center; justify-content:center;
  font-family:var(--fd); font-weight:800; font-size:3rem; color:#0c0b10; background:var(--accent);
  box-shadow:0 0 80px -12px var(--accent), inset 0 1px 0 rgba(255,255,255,.1); }
.luA-portrait img { width:100%; height:100%; object-fit:cover; }
.luA-name { font-family:var(--fd); font-weight:700; font-size:1.6rem; color:var(--text); margin:0; }
.luA-meta { font-family:var(--fm); font-size:.78rem; letter-spacing:1.4px; text-transform:uppercase; color:var(--text-dim); margin:6px 0 30px; }
.luA-lvl-block { margin-bottom:36px; }
.luA-panel { max-width:760px; margin:36px auto 0; text-align:left; padding:28px 30px;
  background:var(--surface); border:1px solid var(--border-light); border-radius:var(--r); }
.luA-panelhd { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; }
.luA-panelhd .t { font-family:var(--fd); font-size:.92rem; letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); }
.luA-panelhd .ct { font-family:var(--fm); font-size:.7rem; color:var(--muted); }
.luA-section + .luA-section { margin-top:26px; padding-top:26px; border-top:1px solid var(--border); }

/* Grimoire filters + spell cards (ported verbatim — levelup.css 186-221) */
.lu-filters { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; padding:12px 14px;
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--rs); }
.lu-fbar { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.lu-flab { font-family:var(--fm); font-size:.62rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-right:4px; }
.lu-fchip { font-family:var(--fb); font-size:.74rem; font-weight:600; color:var(--text-dim); cursor:pointer; white-space:nowrap;
  background:var(--surface); border:1px solid var(--border-light); border-radius:999px; padding:5px 11px; transition:all .14s; }
.lu-fchip:hover { color:var(--text); border-color:rgba(255,215,0,.35); }
.lu-fchip.on { color:var(--accent); border-color:var(--accent); background:linear-gradient(180deg, rgba(255,215,0,.10), rgba(255,215,0,.03)); }
.lu-spellgrid { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.lu-spell { position:relative; text-align:left; cursor:pointer; background:var(--surface); border:1px solid var(--border-light);
  border-radius:var(--rs); padding:13px 15px 12px; display:flex; flex-direction:column; gap:6px; transition:all .14s; min-width:0; }
.lu-spell:hover { transform:translateY(-1px); border-color:rgba(255,215,0,.42); background:var(--surface2); }
.lu-spell.on { border-color:var(--accent); background:linear-gradient(180deg, rgba(255,215,0,.08), rgba(255,215,0,.02));
  box-shadow:0 0 0 1px var(--accent), 0 8px 22px -14px rgba(255,200,60,.5); }
.lu-spell-ai { position:absolute; top:-8px; right:12px; font-family:var(--fm); font-size:.58rem; letter-spacing:1px; color:var(--purple);
  background:#0c0b10; border:1px solid rgba(167,139,250,.42); padding:3px 8px; border-radius:999px; }
.lu-spell-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.lu-spell-top .nm { font-family:var(--fd); font-weight:600; font-size:1rem; color:var(--text); line-height:1.1; min-width:0; }
.lu-spell.on .nm { color:var(--accent); }
.lu-spell-top .tick { color:var(--accent); font-weight:800; font-size:.94rem; flex-shrink:0; }
.lu-spell-meta { display:flex; flex-wrap:wrap; gap:6px; }
.lu-spell-meta > span { font-family:var(--fm); font-size:.58rem; letter-spacing:.6px; text-transform:uppercase;
  color:var(--text-dim); border:1px solid var(--border-light); padding:2px 7px; border-radius:999px; background:var(--surface2); white-space:nowrap; }
.lu-spell-meta .schl { color:var(--accent-soft); border-color:rgba(255,215,0,.22); }
.lu-spell-meta .role { color:var(--purple); border-color:rgba(167,139,250,.28); }
.lu-spell-meta .flag { color:var(--amber); border-color:rgba(255,184,74,.32); }
.lu-spell-one { font-family:var(--fr); font-style:italic; color:var(--text-dim); margin:0; font-size:.86rem; line-height:1.45; }
.lu-spell-foot { display:flex; flex-wrap:wrap; gap:10px; font-family:var(--fm); font-size:.66rem; color:var(--muted); padding-top:6px; border-top:1px solid var(--border); }
.lu-spell-airow { display:flex; gap:7px; align-items:flex-start; margin-top:6px; padding:8px 10px;
  background:rgba(167,139,250,.07); border:1px solid rgba(167,139,250,.24); border-radius:var(--rxs); font-size:.74rem; color:var(--purple); line-height:1.4; }

/* ASI / Feat (ported verbatim — levelup.css 233-267) */
.lu-modeseg { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px; }
.lu-modeseg button { font-family:var(--fb); font-size:.92rem; font-weight:600; color:var(--text-dim);
  background:var(--surface); border:1px solid var(--border-light); border-radius:var(--rs); padding:13px 14px; cursor:pointer; transition:all .14s; }
.lu-modeseg button:hover { color:var(--text); border-color:rgba(255,255,255,.22); }
.lu-modeseg button.on { color:var(--accent); border-color:var(--accent); background:linear-gradient(180deg, rgba(255,215,0,.10), rgba(255,215,0,.03)); }
.lu-abilbump { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.lu-abilcard { background:var(--surface); border:1px solid var(--border-light); border-radius:var(--rs); padding:12px 12px 10px; text-align:center; transition:all .14s; }
.lu-abilcard.hot { border-color:var(--accent); background:linear-gradient(180deg, rgba(255,215,0,.08), rgba(255,215,0,.02)); }
.lu-abilcard .ak { font-family:var(--fb); font-size:.7rem; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--text-dim); display:flex; align-items:center; justify-content:center; gap:5px; }
.lu-abilcard .ak .prim { color:var(--accent); font-size:.74rem; }
.lu-abilcard .av { font-family:var(--fm); font-size:1.5rem; font-weight:500; color:var(--text); margin-top:2px; line-height:1.05; }
.lu-abilcard .av .ap { font-family:var(--fb); font-size:.7rem; color:var(--accent); font-weight:700; vertical-align:super; }
.lu-abilcard .amod { font-family:var(--fm); font-size:.7rem; color:var(--accent-soft); }
.lu-abilcard .abtn { display:flex; gap:6px; justify-content:center; margin-top:8px; }
.lu-abilcard .abtn button { width:28px; height:28px; border-radius:7px; font-family:var(--fb); font-size:1rem; font-weight:700;
  background:var(--surface2); color:var(--text); border:1px solid var(--border-light); cursor:pointer; transition:all .14s; }
.lu-abilcard .abtn button:hover:not(:disabled) { background:var(--surface3); border-color:var(--accent); color:var(--accent); }
.lu-abilcard .abtn button:disabled { opacity:.32; cursor:not-allowed; }
.lu-feats { display:flex; flex-direction:column; gap:10px; }
.lu-featwrap { display:flex; flex-direction:column; gap:6px; }
/* R4 — feat sub-choice pickers (Magic Initiate class, Resilient stat, …). */
.lu-featsubs { display:flex; flex-wrap:wrap; gap:8px; padding:0 4px 2px; }
.lu-featsubs select { background:var(--surface2); border:1px solid var(--border-light); color:var(--text); border-radius:6px; padding:6px 9px; font-size:.85rem; font-family:var(--fb); cursor:pointer; }
.lu-featrow { position:relative; text-align:left; cursor:pointer; background:var(--surface); border:1px solid var(--border-light);
  border-radius:var(--rs); padding:14px 18px; transition:all .14s; }
.lu-featrow:hover { border-color:rgba(255,215,0,.42); background:var(--surface2); transform:translateY(-1px); }
.lu-featrow.on { border-color:var(--accent); background:linear-gradient(180deg, rgba(255,215,0,.08), rgba(255,215,0,.02)); box-shadow:0 0 0 1px var(--accent); }
.lu-featrow .ai { position:absolute; top:-8px; right:14px; font-family:var(--fm); font-size:.58rem; letter-spacing:1px; color:var(--purple);
  background:#0c0b10; border:1px solid rgba(167,139,250,.42); padding:3px 8px; border-radius:999px; }
.lu-featrow-top { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:5px; }
.lu-featrow-top .nm { font-family:var(--fd); font-weight:700; font-size:1.1rem; color:var(--text); }
.lu-featrow.on .nm { color:var(--accent); }
.lu-featrow-top .role { font-family:var(--fb); font-size:.62rem; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--amber); }
.lu-featrow .desc { color:var(--text-dim); margin:0; line-height:1.5; font-size:.92rem; }
.lu-featrow .tick { position:absolute; top:14px; right:18px; color:var(--accent); font-weight:800; }
/* v1.8.1301 — coming-soon (grid-deferred) feats: disabled + badge (Sentinel, Mobile). */
.lu-featrow.soon { opacity:.5; cursor:not-allowed; }
.lu-featrow.soon:hover { border-color:var(--border-light); background:var(--surface); transform:none; }
.lu-featrow .soon-badge { font-family:var(--fb); font-size:.6rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--amber); border:1px solid var(--amber); border-radius:6px; padding:1px 6px; white-space:nowrap; }

/* World Setup island `.ws-*` baseline styles removed S195 — the create fork is
   now the `.nc-*` ceremonial modal and the pack picker is `.cw-*`. */

/* "Your Legend" lib-rail panel (M3 stats Slice 3) — a 2-up tile grid of the
   signed-in user's lifetime totals. Inherits the panel chrome; theme-var driven
   so it tracks the parchment/dark palettes like the rest of the rail. */
.yl-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.yl-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:10px 6px; background:var(--bg,#0a0a0f); border:1px solid var(--border,rgba(255,255,255,.08)); border-radius:9px; text-align:center; }
.yl-tile-icon { font-size:1.05rem; line-height:1; opacity:.9; }
.yl-tile-value { font-family:var(--fb,serif); font-size:1.35rem; font-weight:700; color:var(--gold,#FFD700); line-height:1.1; }
.yl-tile-label { font-size:.68rem; letter-spacing:.4px; text-transform:uppercase; color:var(--text-dim,rgba(240,240,245,.6)); }
.yl-empty { color:var(--muted,rgba(240,240,245,.35)); font-style:italic; font-size:.85rem; padding:4px 2px; }

/* === Character Retirement — "The Farewell" island (M3 Slice 4) ==============
   Ported from design_handoff_retirement/retire.css (Farewell direction only;
   the Logbook .rtB-* rules + the prototype topbar are intentionally omitted).
   `.rt` is a FIXED full-screen overlay (the prototype was a standalone page).
   Self-scoped token block so it tracks the design palette regardless of theme. */
.rt { --rbg:#08070a; --rbg2:#0c0b10; --rsurface:#121117; --rsurface2:#1a1922; --rsurface3:#23222e;
  --rborder:rgba(255,255,255,.07); --rborder-light:rgba(255,255,255,.13);
  --rtext:#f1eef5; --rtext-dim:rgba(241,238,245,.62); --rmuted:rgba(241,238,245,.34);
  --rgold-grad:linear-gradient(135deg,#FFD700,#FFE88A 32%,#FFD700 52%,#CC9900);
  --rgreen:#4AFF9E; --rblue:#4A9EFF; --rpurple:#A78BFA; --rdanger:#FF6B6B;
  --accent:#FFD700; --accent-soft:#FFE8A0; --accent-grad:var(--rgold-grad);
  --rr:14px; --rrs:10px; --rrxs:7px;
  --rfd:'Cinzel',Georgia,serif; --rfb:'DM Sans',system-ui,sans-serif; --rfr:'Spectral',Georgia,serif; --rfm:'DM Mono',ui-monospace,monospace;
  position:fixed; inset:0; z-index:10000; overflow:hidden; background:var(--rbg); color:var(--rtext);
  font-family:var(--rfb); -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; }
.rt *,.rt *::before,.rt *::after { box-sizing:border-box; }
.rt-close { position:absolute; top:14px; right:18px; z-index:20; background:none; border:none; color:var(--rtext-dim);
  font-size:1.8rem; line-height:1; cursor:pointer; padding:4px 10px; }
.rt-close:hover { color:var(--rtext); }
.rt-bg { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.rt-bg .glow { position:absolute; left:50%; top:50%; width:120vmax; height:80vmax; transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--scenario, #FFD700) 14%, transparent), transparent 55%); }
.rt-bg .vig { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 40%, transparent 28%, rgba(0,0,0,.78) 100%); }
.rt-ember { position:absolute; bottom:-12px; width:3px; height:3px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,210,120,.95), rgba(255,150,50,0) 70%); animation:rtEm linear infinite; opacity:0; }
@media(prefers-reduced-motion:reduce){ .rt-ember{ display:none; } }
@keyframes rtEm { 0%{transform:translateY(0); opacity:0;} 10%{opacity:.85;} 90%{opacity:.5;} 100%{transform:translateY(-92vh) translateX(28px); opacity:0;} }
.rt-stage { position:relative; z-index:1; flex:1; min-height:0; display:flex; flex-direction:column; }
.rt-btn { font-family:var(--rfb); font-weight:600; font-size:.92rem; padding:11px 20px; border-radius:var(--rrs); cursor:pointer;
  border:1px solid var(--rborder-light); background:var(--rsurface2); color:var(--rtext); transition:all .16s; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; }
.rt-btn:hover { background:var(--rsurface3); }
.rt-btn:disabled { opacity:.4; cursor:not-allowed; }
.rt-btn.gold { background:var(--accent-grad); color:#1a1205; border-color:transparent; font-weight:700; box-shadow:0 4px 24px -8px color-mix(in srgb, var(--scenario, #FFD700) 55%, transparent); }
.rt-btn.gold:hover:not(:disabled) { filter:brightness(1.07); }
.rt-btn.ghost { background:rgba(255,215,0,.06); color:var(--accent-soft); border-color:rgba(255,215,0,.30); }
.rt-btn.lg { padding:14px 30px; font-size:1.02rem; }
.rt-mono { font-family:var(--rfm); font-size:.72rem; color:var(--rmuted); letter-spacing:.5px; }
.rtA-scroll { flex:1; min-height:0; overflow-y:auto; }
.rtA-wrap { max-width:780px; margin:0 auto; padding:50px 28px 80px; text-align:center; position:relative; }
.rtA-beam { position:absolute; left:50%; top:0; bottom:0; width:260px; transform:translateX(-50%);
  background:linear-gradient(180deg, color-mix(in srgb, var(--scenario, #FFD700) 22%, transparent), transparent 55%); filter:blur(30px); pointer-events:none; opacity:.6; }
.rtA-stack { position:relative; }
.rtA-eyebrow { font-family:var(--rfm); font-size:.78rem; letter-spacing:6px; text-transform:uppercase; color:color-mix(in srgb, var(--scenario, #FFE8A0) 80%, white); margin-bottom:14px; }
.rtA-portrait { width:150px; height:150px; border-radius:50%; overflow:hidden; margin:0 auto 22px; border:2px solid var(--scenario, var(--accent));
  display:flex; align-items:center; justify-content:center; font-family:var(--rfd); font-weight:800; font-size:3rem; color:#0c0b10; background:var(--accent);
  box-shadow:0 0 80px -10px var(--scenario, var(--accent)); position:relative; }
.rtA-portrait img { width:100%; height:100%; object-fit:cover; }
.rtA-name { font-family:var(--rfd); font-weight:700; font-size:2.4rem; margin:0; background:var(--accent-grad);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow:0 4px 28px color-mix(in srgb, var(--scenario, #FFD700) 30%, transparent); }
.rtA-meta { font-family:var(--rfm); font-size:.84rem; letter-spacing:1.4px; text-transform:uppercase; color:var(--rtext-dim); margin:8px 0 4px; }
.rtA-meta b { color:var(--scenario, var(--accent-soft)); }
.rtA-tenure { font-family:var(--rfm); font-size:.7rem; letter-spacing:1px; color:var(--rmuted); }
.rtA-headline { font-family:var(--rfd); font-weight:700; font-size:2.2rem; line-height:1.1; margin:32px auto 0; max-width:560px; color:var(--rtext); }
.rtA-sub { font-family:var(--rfr); font-style:italic; color:var(--rtext-dim); font-size:1.05rem; line-height:1.55; margin:18px auto 0; max-width:540px; }
.rtA-panel { max-width:760px; margin:36px auto 0; text-align:left; padding:28px 32px; background:var(--rsurface); border:1px solid var(--rborder-light); border-radius:var(--rr); }
.rtA-panelhd { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:18px; }
.rtA-panelhd .t { font-family:var(--rfd); font-size:.92rem; letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); }
.rtA-panelhd .ct { font-family:var(--rfm); font-size:.7rem; color:var(--rmuted); letter-spacing:.5px; }
.rtA-section + .rtA-section { margin-top:26px; padding-top:26px; border-top:1px solid var(--rborder); }
.rt-inv { display:flex; flex-direction:column; gap:8px; }
.rt-invrow { background:var(--rsurface2); border:1px solid var(--rborder); border-radius:var(--rrs); padding:11px 14px; display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; }
.rt-invrow .ic { width:34px; height:34px; border-radius:50%; background:var(--rsurface3); border:1px solid var(--rborder-light); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.rt-invrow .nm { font-family:var(--rfb); font-weight:600; font-size:.94rem; color:var(--rtext); line-height:1.15; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rt-invrow .rar { font-family:var(--rfm); font-size:.58rem; letter-spacing:1px; text-transform:uppercase; padding:2px 7px; border-radius:999px; border:1px solid; flex-shrink:0; }
.rt-invrow .rar.common { color:#b9c2cc; border-color:rgba(185,194,204,.32); }
.rt-invrow .rar.uncommon { color:var(--rgreen); border-color:rgba(74,255,158,.32); }
.rt-invrow .rar.rare { color:var(--rblue); border-color:rgba(74,158,255,.32); }
.rt-invrow .rar.legendary { color:#FFB84A; border-color:rgba(255,184,74,.34); }
.rt-invrow .note { font-size:.78rem; color:var(--rmuted); margin-top:3px; }
.rt-invrow .act { display:flex; gap:5px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.rt-fate { font-family:var(--rfb); font-size:.7rem; font-weight:600; padding:5px 9px; border-radius:7px; background:var(--rsurface); border:1px solid var(--rborder-light); color:var(--rtext-dim); cursor:pointer; transition:all .14s; white-space:nowrap; }
.rt-fate:hover { color:var(--rtext); border-color:rgba(255,215,0,.4); }
.rt-fate.on { color:var(--accent); border-color:var(--accent); background:linear-gradient(180deg, rgba(255,215,0,.10), rgba(255,215,0,.03)); }
.rt-fate.split.on { color:var(--rgreen); border-color:var(--rgreen); background:linear-gradient(180deg, rgba(74,255,158,.10), rgba(74,255,158,.03)); }
.rt-fate.archive.on { color:var(--rpurple); border-color:var(--rpurple); background:linear-gradient(180deg, rgba(167,139,250,.10), rgba(167,139,250,.03)); }
.rt-fate.gift { display:inline-flex; align-items:center; gap:5px; }
.rt-fate.gift .av { width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--rfd); font-weight:700; font-size:.6rem; color:#0c0b10; flex-shrink:0; }
.rt-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:14px; }
.rt-stat { background:var(--rsurface2); border:1px solid var(--rborder); border-radius:var(--rrxs); padding:9px 8px; text-align:center; }
.rt-stat .k { font-family:var(--rfb); font-size:.58rem; letter-spacing:1px; color:var(--rmuted); text-transform:uppercase; }
.rt-stat .v { font-family:var(--rfm); font-size:1.05rem; color:var(--rtext); margin-top:3px; }
.rt-mom { font-family:var(--rfr); font-style:italic; color:var(--rtext-dim); font-size:.92rem; line-height:1.55; margin:0 0 9px; padding:9px 13px; background:var(--rsurface2); border-left:2px solid color-mix(in srgb, var(--scenario, #FFD700) 60%, transparent); border-radius:var(--rrxs); }
.rt-mom .ss { font-family:var(--rfm); font-style:normal; color:var(--rmuted); font-size:.6rem; letter-spacing:.6px; margin-right:8px; }
.rt-epi { background:var(--rbg2); border:1px solid var(--rborder); border-radius:var(--rrs); padding:14px 17px; }
.rt-epi-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; gap:10px; }
.rt-epi-hd .lab { font-family:var(--rfm); font-size:.66rem; letter-spacing:1.4px; text-transform:uppercase; color:var(--accent-soft); }
.rt-epi-hd .by { font-family:var(--rfm); font-size:.6rem; color:var(--rpurple); border:1px solid rgba(167,139,250,.32); padding:2px 7px; border-radius:999px; background:none; cursor:pointer; }
.rt-epi-txt { font-family:var(--rfr); font-style:italic; color:var(--rtext); line-height:1.6; font-size:.95rem; width:100%; background:transparent; border:none; outline:none; resize:vertical; min-height:74px; }
.rt-legacy { display:flex; flex-direction:column; gap:8px; }
.rt-legrow { display:flex; align-items:center; gap:11px; padding:9px 12px; background:var(--rsurface2); border:1px solid var(--rborder); border-radius:var(--rrxs); cursor:pointer; transition:all .14s; }
.rt-legrow:hover { border-color:rgba(255,215,0,.3); }
.rt-legrow.on { border-color:var(--accent); background:linear-gradient(90deg, rgba(255,215,0,.06), var(--rsurface2) 70%); }
.rt-legrow .box { width:18px; height:18px; border-radius:5px; border:2px solid var(--rborder-light); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.7rem; color:transparent; }
.rt-legrow.on .box { background:var(--accent); border-color:var(--accent); color:#0c0b10; }
.rt-legrow .txt { font-size:.88rem; color:var(--rtext); line-height:1.4; }
.rt-legrow .txt b { color:var(--accent-soft); font-weight:600; }
.rt-nav { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:30px; padding-top:24px; border-top:1px solid var(--rborder); }
.rt-sealed { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:18px; padding:40px; }
.rt-sealed .seal { width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.4rem;
  border:2px solid color-mix(in srgb, var(--scenario, #FFD700) 55%, transparent); background:color-mix(in srgb, var(--scenario, #FFD700) 6%, transparent);
  box-shadow:0 0 0 10px color-mix(in srgb, var(--scenario, #FFD700) 4%, transparent); }
.rt-sealed h1 { font-family:var(--rfd); font-weight:700; font-size:2rem; margin:0; background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.rt-sealed p { font-family:var(--rfr); font-style:italic; color:var(--rtext-dim); max-width:480px; line-height:1.55; margin:0; }

/* === Character Roster (Model A′) — selection screen island (M3 Slice 3) ===== */
.rs-overlay { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(0,0,0,.74); backdrop-filter:blur(3px); overflow:auto; }
.rs-panel { position:relative; width:100%; max-width:680px; background:var(--surface,#15151f); border:1px solid var(--border-light,rgba(255,215,0,.25)); border-radius:14px; padding:30px 32px; box-shadow:0 18px 60px rgba(0,0,0,.5); }
.rs-close { position:absolute; top:12px; right:16px; background:none; border:none; color:var(--text-dim,rgba(240,240,245,.6)); font-size:1.7rem; line-height:1; cursor:pointer; }
.rs-close:hover { color:var(--text,#f0f0f5); }
.rs-title { font-family:var(--fb,serif); font-size:1.6rem; color:var(--gold,#FFD700); margin:0 0 4px; text-align:center; }
.rs-sub { text-align:center; color:var(--text-dim,rgba(240,240,245,.62)); font-size:.92rem; margin:0 0 22px; }
.rs-grid { display:flex; flex-direction:column; gap:10px; }
.rs-card { display:flex; align-items:center; gap:14px; padding:12px 16px; background:var(--bg,#0a0a0f); border:1px solid var(--border,rgba(255,255,255,.08)); border-radius:11px; text-align:left; }
.rs-card.active { border-color:var(--gold,#FFD700); background:linear-gradient(90deg, rgba(255,215,0,.07), var(--bg,#0a0a0f) 70%); }
.rs-pf { width:46px; height:46px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden; font-family:var(--fb,serif); font-weight:700; font-size:1.2rem; color:#0c0b10; }
.rs-pf img { width:100%; height:100%; object-fit:cover; }
.rs-pf.rs-plus { background:var(--surface2,rgba(255,255,255,.05)); color:var(--gold,#FFD700); border:1px dashed var(--border-light,rgba(255,215,0,.3)); font-size:1.5rem; }
.rs-card-body { flex:1; min-width:0; }
.rs-name { font-weight:600; color:var(--text,#f0f0f5); }
.rs-meta { font-size:.8rem; color:var(--text-dim,rgba(240,240,245,.6)); }
.rs-badge { font-family:var(--fm,monospace); font-size:.72rem; color:var(--gold,#FFD700); white-space:nowrap; }
.rs-play { font-family:var(--fb,sans-serif); font-size:.82rem; font-weight:600; padding:8px 16px; border-radius:8px; border:1px solid var(--gold,#FFD700); background:transparent; color:var(--gold,#FFD700); cursor:pointer; white-space:nowrap; transition:background .15s; }
.rs-play:hover:not(:disabled) { background:rgba(255,215,0,.1); }
.rs-play:disabled { opacity:.5; cursor:not-allowed; }
.rs-retire { flex-shrink:0; background:none; border:none; color:var(--text-dim,rgba(240,240,245,.45)); font-size:1.05rem; line-height:1; cursor:pointer; padding:5px 7px; border-radius:7px; transition:color .15s, background .15s; }
.rs-retire:hover:not(:disabled) { color:var(--cl-red,#f87171); background:rgba(248,113,113,.1); }
.rs-retire:disabled { opacity:.4; cursor:not-allowed; }
/* Type-RETIRE confirmation modal (rendered inside the roster island so it sits
   above the rs-overlay z-index without the global confirm modal's z:500). */
.rs-rm-overlay { position:fixed; inset:0; z-index:10001; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(0,0,0,.66); backdrop-filter:blur(2px); }
.rs-rm-box { width:100%; max-width:420px; background:var(--surface,#15151f); border:1px solid var(--cl-red,#f87171); border-radius:13px; padding:24px 26px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.rs-rm-title { font-family:var(--fd,var(--fb,serif)); font-size:1.15rem; font-weight:700; color:var(--text,#f0f0f5); margin-bottom:10px; }
.rs-rm-warn { font-size:.86rem; line-height:1.5; color:var(--text-dim,rgba(240,240,245,.7)); margin:0 0 16px; }
.rs-rm-warn b { color:var(--cl-red,#f87171); letter-spacing:.06em; }
.rs-rm-input { width:100%; box-sizing:border-box; padding:10px 13px; font-size:.95rem; letter-spacing:.04em; background:var(--bg,#0a0a0f); border:1px solid var(--border,rgba(255,255,255,.14)); border-radius:8px; color:var(--text,#f0f0f5); margin-bottom:16px; }
.rs-rm-input:focus { outline:none; border-color:var(--cl-red,#f87171); }
.rs-rm-actions { display:flex; justify-content:flex-end; gap:10px; }
.rs-rm-cancel { font-family:var(--fb,sans-serif); font-size:.82rem; padding:9px 16px; border-radius:8px; border:1px solid var(--border,rgba(255,255,255,.14)); background:transparent; color:var(--text-dim,rgba(240,240,245,.65)); cursor:pointer; }
.rs-rm-cancel:hover { color:var(--text,#f0f0f5); }
.rs-rm-confirm { font-family:var(--fb,sans-serif); font-size:.82rem; font-weight:600; padding:9px 18px; border-radius:8px; border:1px solid var(--cl-red,#f87171); background:rgba(248,113,113,.14); color:var(--cl-red,#f87171); cursor:pointer; }
.rs-rm-confirm:hover:not(:disabled) { background:rgba(248,113,113,.26); }
.rs-rm-confirm:disabled { opacity:.4; cursor:not-allowed; }
.rs-create { cursor:pointer; border-style:dashed; }
.rs-create:hover { border-color:var(--gold,#FFD700); }
.rs-capnote { font-size:.8rem; color:var(--text-dim,rgba(240,240,245,.5)); font-style:italic; padding:8px 4px; }
.rs-history { margin-top:20px; padding-top:16px; border-top:1px solid var(--border,rgba(255,255,255,.08)); }
.rs-history-h { font-family:var(--fb,serif); font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim,rgba(240,240,245,.5)); margin-bottom:8px; }
.rs-history-list { display:flex; flex-direction:column; gap:5px; }
.rs-hist { display:flex; align-items:center; gap:9px; font-size:.82rem; color:var(--text-dim,rgba(240,240,245,.55)); }
.rs-hist-dot { width:7px; height:7px; border-radius:50%; background:var(--gold,#FFD700); flex-shrink:0; }
.rs-hist-dot[data-reason="death"] { background:var(--danger,#FF6B6B); }
.rs-hist-dot[data-reason="forced"] { background:var(--amber,#FFB84A); }
.rs-hist-name { color:var(--text,#f0f0f5); font-weight:500; }
.rs-hist-meta { color:var(--muted,rgba(240,240,245,.4)); }
.rs-foot { display:flex; justify-content:center; margin-top:24px; }
.rs-enter { font-family:var(--fb,serif); font-size:1rem; font-weight:700; padding:12px 28px; border-radius:9px; border:1px solid transparent; background:var(--gold,#FFD700); color:#1a1206; cursor:pointer; }
.rs-enter:hover { filter:brightness(1.07); }
.rs-mono { font-family:var(--fm,monospace); font-size:.8rem; color:var(--muted,rgba(240,240,245,.4)); }


/* ===== Choose a World picker (S193) — ported from the Claude-Design worldselect handoff.
   Namespaced .cw-* (was .ws-*) so it cannot collide with the existing .ws-* create fork. ===== */
/* ===========================================================================
   Choose a World — seeded prebuilt-worlds selector for the New Campaign flow.
   Atmospheric-hearth language (Cinzel + DM Sans, gold on warm near-black).
   Carries forward tokens from session.css / creation.css; scoped under .cw.
   =========================================================================== */
.cw {
  --bg: #08070a;
  --bg2: #0c0b10;
  --surface: #121117;
  --surface2: #1a1922;
  --surface3: #23222e;
  --border: rgba(255, 255, 255, 0.07);
  --border-light: rgba(255, 255, 255, 0.13);
  --text: #f1eef5;
  --text-dim: rgba(241, 238, 245, 0.62);
  --muted: rgba(241, 238, 245, 0.34);
  --gold: #FFD700;
  --gold-soft: #FFE8A0;
  --gold-grad: linear-gradient(135deg, #FFD700 0%, #FFE88A 32%, #FFD700 52%, #CC9900 100%);
  --green: #4AFF9E;
  --amber: #FFB84A;
  --purple: #A78BFA;
  --blue: #4A9EFF;
  --danger: #FF6B6B;
  --accent: var(--gold);
  --accent-soft: var(--gold-soft);
  --accent-grad: var(--gold-grad);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 7px;
  --font-display: 'Cinzel', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-read: 'Spectral', Georgia, serif;
  --mono: 'DM Mono', ui-monospace, Menlo, monospace;

  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}
.cw *,
.cw *::before,
.cw *::after { box-sizing: border-box; }
.cw ::-webkit-scrollbar { width: 9px; height: 9px; }
.cw ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 6px; }
.cw ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); }
.cw ::-webkit-scrollbar-track { background: transparent; }

/* ---------- ambient backdrop ---------- */
.cw-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cw-bg .glow {
  position: absolute; left: 50%; top: -10%; width: 120vmax; height: 80vmax; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 160, 50, 0.10), rgba(255, 140, 40, 0.03) 38%, transparent 64%);
}
.cw-bg .glow2 {
  position: absolute; right: -10%; bottom: -20%; width: 70vmax; height: 70vmax;
  background: radial-gradient(circle at 50% 50%, rgba(74, 158, 255, 0.06), transparent 60%);
}
.cw-bg .vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 38%, transparent 42%, rgba(0, 0, 0, 0.55) 100%); }
.cw-bg .grain { position: absolute; inset: 0; opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.9'/></svg>"); }
/* subtle drifting embers (no infinite-feel; few sparse, slow) */
.cw-ember { position: absolute; bottom: -10px; width: 2px; height: 2px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 110, 0.85), rgba(255, 150, 50, 0) 70%);
  animation: cwEmber linear infinite; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .cw-ember { display: none; } }
@keyframes cwEmber {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.7; } 90% { opacity: 0.4; }
  100% { transform: translateY(-90vh) translateX(20px); opacity: 0; }
}

/* ---------- top bar ---------- */
.cw-topbar { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; gap: 18px;
  padding: 16px 28px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(20, 14, 8, 0.92), rgba(8, 7, 10, 0.88));
  backdrop-filter: blur(14px); }
.cw-back { font-family: var(--font-body); font-size: 0.86rem; font-weight: 600; color: var(--text-dim);
  background: none; border: 1px solid var(--border-light); border-radius: 999px;
  padding: 8px 16px 8px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: all .15s;
  white-space: nowrap; flex-shrink: 0; }
.cw-back:hover { color: var(--text); border-color: rgba(255, 215, 0, 0.4); background: rgba(255, 215, 0, 0.05); }
.cw-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.0rem; letter-spacing: 1.2px;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  white-space: nowrap; }
.cw-brand .sm { font-family: var(--font-body); -webkit-text-fill-color: var(--muted); color: var(--muted);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; margin-left: 10px; }
.cw-spacer { flex: 1; }
.cw-rolepill { font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim); padding: 6px 13px;
  border: 1px solid var(--border-light); border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.cw-rolepill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.55); }

/* ---------- stage ---------- */
.cw-stage { position: relative; z-index: 1; flex: 1 0 auto;
  display: flex; flex-direction: column; }
.cw-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 38px 32px 40px; }

/* ---------- title ---------- */
.cw-head { text-align: center; max-width: 720px; margin: 0 auto 38px; }
.cw-eyebrow { font-family: var(--mono); font-size: 0.72rem; color: var(--accent-soft); letter-spacing: 3px;
  text-transform: uppercase; opacity: 0.85; display: inline-flex; align-items: center; gap: 12px;
  white-space: nowrap; }
.cw-eyebrow::before, .cw-eyebrow::after { content: ""; width: 42px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.45), transparent); }
.cw-title { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; letter-spacing: 1px;
  margin: 12px 0 12px; background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 28px rgba(255, 180, 60, 0.12); }
.cw-sub { color: var(--text-dim); font-size: 1.0rem; line-height: 1.55; margin: 0 auto; max-width: 60ch; }
.cw-sub b { color: var(--accent-soft); font-weight: 600; }

/* ---------- accent strip (count summary above grid) ---------- */
.cw-summary { display: flex; align-items: center; justify-content: space-between; gap: 22px;
  margin: 0 0 22px; padding: 0 2px; white-space: nowrap;
  font-family: var(--mono); font-size: 0.76rem; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.cw-summary .seg { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.cw-summary .dot { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.cw-summary .dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(74, 255, 158, 0.6); }
.cw-summary .dot.forge::before { background: var(--accent-soft); box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); }

/* ---------- length + genre filter chips (S195; modeled on the Ascension
   level-up spell filter) ---------- */
.cw-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 2px 22px; }
.cw-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.cw-flab { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); margin-right: 2px; }
.cw-fchip { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600;
  padding: 5px 13px; border-radius: 999px; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim); transition: all .15s; }
.cw-fchip:hover { border-color: rgba(255, 215, 0, 0.4); color: var(--text); }
.cw-fchip.on { background: rgba(255, 215, 0, 0.12); border-color: var(--accent); color: var(--accent-soft); }
.cw-fcount { margin-left: auto; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.5px; }

/* ---------- atlas grid ---------- */
.cw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* ---------- world card ---------- */
.cw-card { position: relative; background: var(--surface); border: 1px solid var(--border-light);
  border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s;
  display: flex; flex-direction: column; text-align: left; padding: 0; color: inherit;
  font-family: var(--font-body); }
.cw-card:hover { transform: translateY(-3px); border-color: rgba(255, 215, 0, 0.40);
  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 215, 0, 0.10); }
.cw-card.on { border-color: var(--accent);
  box-shadow: 0 18px 60px -20px rgba(255, 200, 60, 0.35), 0 0 0 1px var(--accent), inset 0 0 0 1px rgba(255, 215, 0, 0.10); }
.cw-card.forge { cursor: default; }
.cw-card.forge:hover { transform: none; border-color: var(--border-light); box-shadow: none; }
.cw-card.forge.dim { opacity: 0.62; filter: saturate(0.65); }
.cw-card.forge.hidden { display: none; }
/* villain stance — a danger treatment so an evil campaign reads unmistakably
   before commit (S195 #3; tint is the pack's red, e.g. Greymark #FF6B6B). */
.cw-card.villain { border-color: rgba(255, 107, 107, 0.34); }
.cw-card.villain:hover { border-color: rgba(255, 107, 107, 0.6);
  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 107, 107, 0.16); }
.cw-card.villain.on { border-color: var(--danger);
  box-shadow: 0 18px 60px -20px rgba(255, 80, 80, 0.34), 0 0 0 1px var(--danger), inset 0 0 0 1px rgba(255, 107, 107, 0.12); }
.cw-card.villain .cw-cover-title { color: #ffe4e4; }

/* cover (16:10) */
.cw-cover { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--surface2); }
.cw-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease; }
.cw-card:hover .cw-cover img { transform: scale(1.04); }
/* atmospheric per-world fallback (gradient + diagonal lines + crest) */
.cw-cover-fb { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; }
.cw-cover-fb::before { content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 10px),
    radial-gradient(ellipse 75% 65% at 50% 38%, var(--tint, rgba(255, 215, 0, 0.18)), transparent 62%),
    linear-gradient(180deg, rgba(8, 7, 10, 0.0), rgba(8, 7, 10, 0.85));
}
.cw-cover-fb::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 75% 65% at 50% 38%, transparent 30%, rgba(0, 0, 0, 0.5));
}
.cw-cover-fb .crest { position: relative; z-index: 1;
  width: 72px; height: 72px; border-radius: 14px;
  background: radial-gradient(circle at 50% 38%, rgba(255, 230, 170, 0.85), rgba(255, 200, 80, 0.4) 60%, rgba(255, 170, 30, 0) 75%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: rgba(255, 240, 200, 0.95);
  letter-spacing: 1px; font-size: 1.2rem;
  text-shadow: 0 0 18px rgba(255, 200, 80, 0.55);
  margin-bottom: 18px;
}
.cw-cover-fb .crest::after { content: ""; position: absolute; inset: -8px; border-radius: 16px;
  border: 1px solid rgba(255, 224, 176, 0.30); }
.cw-cover-fb .crest::before { content: ""; position: absolute; inset: -16px; border-radius: 20px;
  border: 1px solid rgba(255, 224, 176, 0.13); }
/* gradient bottom for label legibility */
.cw-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 42%, rgba(8, 7, 10, 0.78) 88%, rgba(8, 7, 10, 0.92)); }

/* badge on cover */
.cw-badge { position: absolute; top: 11px; left: 11px; z-index: 3;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 1.4px; text-transform: uppercase;
  padding: 5px 10px 5px 9px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(8, 7, 10, 0.72); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.10); color: var(--text-dim); }
.cw-badge .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px rgba(74, 255, 158, 0.7); animation: cwPulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cw-badge .pulse { animation: none; } }
@keyframes cwPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.cw-badge.forge { color: var(--accent-soft); border-color: rgba(255, 215, 0, 0.28); }
.cw-badge.forge .pulse { background: var(--accent-soft); box-shadow: 0 0 8px rgba(255, 230, 160, 0.55); animation: none; }
.cw-badge.villain { color: #ffd2d2; border-color: rgba(255, 107, 107, 0.55);
  background: rgba(46, 9, 11, 0.78); }
.cw-badge.villain .skull { font-size: 0.78rem; line-height: 1; color: #ff8a8a;
  text-shadow: 0 0 8px rgba(255, 107, 107, 0.6); }
/* villain marker anchored to the cover's bottom-right corner, opposite the Live
   badge. Two-class selector (.cw-badge.cw-villain-corner) so it outranks the
   base .cw-badge top/left — otherwise top+bottom+left+right all resolve and the
   badge stretches to fill the whole cover (the S195 red-blob bug). */
.cw-badge.cw-villain-corner { top: auto; left: auto; bottom: 12px; right: 12px; z-index: 4; }

/* sessions chip (top right) */
.cw-sessions { position: absolute; top: 11px; right: 11px; z-index: 3;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.5px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(8, 7, 10, 0.72); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.10); color: var(--text-dim); }

/* cover-mounted title */
.cw-cover-title { position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 3;
  font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: 1.32rem; line-height: 1.12; letter-spacing: 0.4px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85); }

/* body */
.cw-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px;
  flex: 1; min-height: 0; }
.cw-tagline { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--accent-soft); }
.cw-blurb { font-family: var(--font-read); font-style: italic; font-size: 0.94rem; line-height: 1.45;
  color: var(--text-dim);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  text-wrap: pretty; }
.cw-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; align-items: center; justify-content: space-between; }
.cw-chip { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.4px;
  padding: 4px 11px 4px 9px; border-radius: 999px;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  display: inline-flex; align-items: center; gap: 7px; }
.cw-chip .lab { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted); }
.cw-chip.villain { background: rgba(46, 9, 11, 0.6); border-color: rgba(255, 107, 107, 0.4); color: #ffd2d2; }
.cw-chip.villain .lab { color: rgba(255, 138, 138, 0.85); }
/* "Full briefing ▾" affordance — opens the inline drawer (S195 redesign) */
.cw-more { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted); transition: color .15s; }
.cw-card:hover .cw-more { color: var(--accent-soft); }
.cw-card.open .cw-more { color: var(--accent); }

/* ---- open card visual cue ---- */
.cw-card.open { border-color: rgba(255, 215, 0, 0.45); }
.cw-card.open .cw-cover img,
.cw-card.open .cw-cover .cw-cover-fb { filter: brightness(1.05); }
.cw-card.villain.open { border-color: rgba(255, 107, 107, 0.5); }

/* ============================================================ INLINE DRAWER */
.cw-drawer {
  grid-column: 1 / -1;
  position: relative;
  margin-top: -6px;
  padding: 0;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 215, 0, 0.04), rgba(255, 215, 0, 0) 60%),
    var(--surface);
  border: 1px solid rgba(255, 215, 0, 0.32);
  box-shadow: 0 18px 60px -28px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 215, 0, 0.06);
  overflow: hidden;
  animation: cwDrawerIn .26s ease-out;
}
@keyframes cwDrawerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .cw-drawer { animation: none; } }
/* connector tab pointing up to the opened card — purely decorative */
.cw-drawer::before {
  content: ""; position: absolute; top: -8px; left: 48px; width: 16px; height: 16px;
  background: var(--surface);
  border-left: 1px solid rgba(255, 215, 0, 0.32); border-top: 1px solid rgba(255, 215, 0, 0.32);
  transform: rotate(45deg); }
/* villain briefing — red accent instead of gold (Greymark) */
.cw-drawer.villain { border-color: rgba(255, 107, 107, 0.4);
  background: linear-gradient(180deg, rgba(255, 107, 107, 0.05), rgba(255, 107, 107, 0) 60%), var(--surface); }
.cw-drawer.villain::before { border-left-color: rgba(255, 107, 107, 0.4); border-top-color: rgba(255, 107, 107, 0.4); }

.cw-drawer-close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(8, 7, 10, 0.7);
  border: 1px solid var(--border-light); color: var(--text-dim);
  font-family: var(--mono); font-size: 0.95rem; cursor: pointer; transition: all .15s;
  display: inline-flex; align-items: center; justify-content: center; }
.cw-drawer-close:hover { background: var(--surface2); color: var(--text); border-color: rgba(255, 215, 0, 0.4); }

.cw-drawer-inner { padding: 24px 28px 26px; }
.cw-drawer-head { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px;
  align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.cw-drawer-sigil { width: 72px; height: 72px; border-radius: var(--radius-sm);
  overflow: hidden; position: relative; flex-shrink: 0; border: 1px solid var(--border-light); }
.cw-drawer-sigil img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cw-drawer-sigil .fb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 8px),
    radial-gradient(circle at 50% 40%, var(--tint, rgba(255, 215, 0, 0.3)), transparent 70%);
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  color: rgba(255, 240, 200, 0.9); letter-spacing: 0.5px; }
.cw-drawer-title { min-width: 0; position: relative; }
.cw-drawer-tagline { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--accent-soft); margin-bottom: 4px; }
.cw-drawer-name { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; letter-spacing: 0.5px;
  color: var(--text); margin: 0 0 8px; line-height: 1.1; }
.cw-drawer-badge { display: inline-flex; }
.cw-drawer-badge .cw-badge { position: static; top: auto; left: auto; }

.cw-drawer-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(220px, 1fr); gap: 28px; }
.cw-drawer-col.side { display: flex; flex-direction: column; gap: 18px;
  padding-left: 24px; border-left: 1px solid var(--border); }
.cw-drawer-lab { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.cw-drawer-blurb { font-family: var(--font-read); font-style: italic; font-size: 1.02rem; line-height: 1.6;
  color: var(--text); margin: 0 0 18px; text-wrap: pretty; }
.cw-drawer-hook { font-family: var(--font-body); font-size: 0.96rem; line-height: 1.55; color: var(--text);
  padding: 14px 16px; border-left: 2px solid var(--accent);
  background: rgba(255, 215, 0, 0.05); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.cw-drawer.villain .cw-drawer-hook { border-left-color: var(--danger); background: rgba(255, 107, 107, 0.06); }
.cw-drawer-hook-lab { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--accent-soft); display: block; margin-bottom: 6px; }
.cw-drawer-block .cw-drawer-val { font-family: var(--font-body); font-size: 1.0rem; color: var(--text); font-weight: 500; }
.cw-drawer-themes { display: flex; flex-wrap: wrap; gap: 6px; }
.cw-drawer-selected { display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--accent-soft); padding: 10px 14px; border-radius: var(--radius-sm);
  background: rgba(255, 215, 0, 0.06); border: 1px solid rgba(255, 215, 0, 0.28); }
.cw-drawer-forge { display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 1px;
  color: var(--accent-soft); padding: 10px 14px; border-radius: var(--radius-sm);
  background: rgba(255, 215, 0, 0.04); border: 1px dashed rgba(255, 215, 0, 0.28); }

/* select check (top-right of card body for selected state) */
.cw-pick { position: absolute; top: 10px; right: 10px; z-index: 4;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-grad); color: #1a1205;
  display: none; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 800;
  box-shadow: 0 6px 16px -6px rgba(255, 200, 60, 0.6); }
.cw-card.on .cw-pick { display: flex; }
.cw-card.on .cw-sessions { display: none; }

/* ============================================================ FOOTER (sticky) */
.cw-footer { position: sticky; bottom: 0; z-index: 6;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(8, 7, 10, 0.86), rgba(8, 7, 10, 0.98));
  backdrop-filter: blur(14px);
  padding: 16px 32px;
  display: flex; align-items: center; gap: 22px; }
.cw-footer-summary { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; }
.cw-footer-sigil { width: 44px; height: 44px; border-radius: var(--radius-xs); overflow: hidden;
  flex-shrink: 0; position: relative; border: 1px solid var(--border-light); }
.cw-footer-sigil img { width: 100%; height: 100%; object-fit: cover; }
.cw-footer-sigil .fb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 8px),
    radial-gradient(circle at 50% 40%, var(--tint, rgba(255, 215, 0, 0.3)), transparent 70%);
  font-family: var(--font-display); font-weight: 700; font-size: 0.74rem;
  color: rgba(255, 240, 200, 0.85); letter-spacing: 0.5px; }
.cw-footer-text { min-width: 0; }
.cw-footer-lab { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--muted); }
.cw-footer-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  color: var(--accent); margin-top: 2px; letter-spacing: 0.4px; }
.cw-footer-name .dash { color: var(--muted); font-family: var(--mono); font-size: 0.78rem;
  font-weight: 400; letter-spacing: 1px; margin-left: 8px; text-transform: none; }
.cw-footer-empty { font-family: var(--font-body); font-size: 0.9rem; color: var(--muted);
  font-style: italic; }
.cw-footer-cta { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }

/* buttons */
.cw-btn { font-family: var(--font-body); font-weight: 600; font-size: 0.92rem;
  padding: 12px 22px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--border-light); background: var(--surface2); color: var(--text);
  transition: all .15s ease; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.cw-btn:hover { background: var(--surface3); border-color: rgba(255, 255, 255, 0.22); }
.cw-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cw-btn.gold { background: var(--accent-grad); color: #1a1205; border-color: transparent; font-weight: 700;
  box-shadow: 0 6px 22px -8px rgba(255, 200, 60, 0.55); }
.cw-btn.gold:hover:not(:disabled) { filter: brightness(1.07); }
.cw-btn.gold:disabled { background: var(--surface2); color: var(--muted); box-shadow: none; }
.cw-btn.ghost { background: rgba(255, 215, 0, 0.06); color: var(--accent-soft); border-color: rgba(255, 215, 0, 0.30); }
.cw-btn.ghost:hover:not(:disabled) { background: rgba(255, 215, 0, 0.13); border-color: rgba(255, 215, 0, 0.5); }
.cw-btn.lg { padding: 14px 28px; font-size: 1rem; }
.cw-btn .k { font-family: var(--mono); font-size: 0.68rem; opacity: 0.55;
  border: 1px solid currentColor; border-radius: 5px; padding: 0 5px; margin-left: 8px; opacity: 0.5; }

/* card entrance — keyed off mount, fades in from below; non-looping */
.cw-card, .cw-railitem, .cw-detail {
  animation: cwRise 0.45s ease-out backwards;
}
.cw-card:nth-child(1) { animation-delay: 0.02s; }
.cw-card:nth-child(2) { animation-delay: 0.07s; }
.cw-card:nth-child(3) { animation-delay: 0.12s; }
.cw-card:nth-child(4) { animation-delay: 0.17s; }
.cw-card:nth-child(5) { animation-delay: 0.22s; }
.cw-card:nth-child(6) { animation-delay: 0.27s; }
@keyframes cwRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cw-card, .cw-railitem, .cw-detail { animation: none; }
}

/* Choose a World — app integration tweaks (not in the handoff):
   the picker mounts as a viewport overlay (the handoff used position:absolute
   inside a full-page host); and the campaign-name input folded into the footer
   (our create needs a name; the handoff flow had none). */
.cw { position: fixed; z-index: 10000; }
.cw-name { flex-shrink: 0; width: 230px; font-family: var(--font-body); font-size: 0.92rem;
  padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-light);
  background: var(--surface2); color: var(--text); transition: border-color .15s; }
.cw-name:focus { outline: none; border-color: rgba(255, 215, 0, 0.5); }
.cw-name::placeholder { color: var(--muted); }
@media (max-width: 720px) { .cw-name { width: 100%; } .cw-footer { flex-wrap: wrap; } }

/* ===== "Begin Your Adventure" — New Campaign create-fork modal (S195) =========
   Ported from design_handoff_newcampaign. Namespaced .nc-* (the handoff's generic
   .modal/.choice/.title/.eyebrow collide with app-wide classes). Own token scope
   like .cw, with the handoff's ceremonial palette + Spectral (--font-narr). ===== */
.nc {
  position: fixed; inset: 0; z-index: 1000;
  --bg: #08070a; --surface: #121117; --surface2: #1a1922; --surface3: #23222e;
  --border: rgba(255,255,255,0.08); --border-light: rgba(255,255,255,0.14);
  --text: #f1eef5; --text-dim: rgba(241,238,245,0.66); --muted: rgba(241,238,245,0.36);
  --gold: #FFD700; --gold-soft: #FFE8A0; --gold-deep: #B8860B;
  --gold-grad: linear-gradient(135deg, #FFD700 0%, #FFE88A 32%, #FFD700 52%, #CC9900 100%);
  --amber: #FFB84A; --green: #4AFF9E;
  --radius: 6px; --radius-card: 4px;
  --font-display: 'Cinzel', serif; --font-body: 'DM Sans', system-ui, sans-serif;
  --font-narr: 'Spectral', Georgia, serif; --mono: 'DM Mono', ui-monospace, Menlo, monospace;
  color: var(--text); font-family: var(--font-body);
}
.nc *, .nc *::before, .nc *::after { box-sizing: border-box; }

/* dim/blur veil over the lobby beneath */
.nc-veil { position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.86) 80%);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ambient ember field — between veil and modal */
.nc-embers { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.nc-ember { position: absolute; bottom: -20px; width: 2px; height: 2px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,210,120,0.95) 0%, rgba(255,160,40,0.6) 40%, transparent 70%);
  box-shadow: 0 0 6px rgba(255,180,60,0.7); animation: ncEmberRise linear infinite; opacity: 0; }
@keyframes ncEmberRise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.9; } 85% { opacity: 0.7; }
  100% { transform: translateY(-110vh) translateX(var(--drift, 30px)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nc-ember { animation: none; opacity: 0; } }

/* centering stage (top-anchors + scrolls on short viewports) */
.nc-stage { position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; }
@media (max-height: 880px) { .nc-stage { align-items: flex-start; padding-top: 24px; padding-bottom: 24px; } }

/* outer warm aura */
.nc-aura { position: absolute; left: 50%; top: 50%; width: 1100px; height: 800px;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255,180,60,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(255,140,40,0.10) 0%, transparent 70%);
  filter: blur(8px); animation: ncAuraBreathe 7s ease-in-out infinite; }
@keyframes ncAuraBreathe {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .nc-aura { animation: none; } }

/* the gold-framed modal */
.nc-modal { position: relative; width: min(1020px, calc(100vw - 80px));
  background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255,180,60,0.06) 0%, transparent 55%),
    linear-gradient(180deg, #14121a 0%, #0d0c12 100%);
  border: 1px solid rgba(255,215,0,0.28); border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 7px rgba(20,16,10,0.55), 0 0 0 8px rgba(255,215,0,0.10),
    0 30px 80px -20px rgba(0,0,0,0.8), 0 80px 200px -40px rgba(255,140,40,0.18);
  animation: ncModalIn 600ms cubic-bezier(.2,.7,.2,1) both; isolation: isolate; overflow: hidden; }
@keyframes ncModalIn {
  0% { opacity: 0; transform: translateY(14px) scale(.97); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
.nc-modal::before { content: ""; position: absolute; inset: 10px; pointer-events: none;
  border: 1px solid rgba(255,215,0,0.16); border-radius: 3px; z-index: 0; }
.nc-modal::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 50%, rgba(0,0,0,0.55) 100%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.025) 3px 4px); }

/* corner filigree */
.nc-corner { position: absolute; width: 44px; height: 44px; z-index: 2;
  color: var(--gold-soft); opacity: 0.95; pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(255,170,40,0.4)); }
.nc-corner.nc-tl { top: 4px; left: 4px; }
.nc-corner.nc-tr { top: 4px; right: 4px; transform: scaleX(-1); }
.nc-corner.nc-bl { bottom: 4px; left: 4px; transform: scaleY(-1); }
.nc-corner.nc-br { bottom: 4px; right: 4px; transform: scale(-1,-1); }

.nc-modal-inner { position: relative; z-index: 3; padding: 44px 60px 32px;
  display: flex; flex-direction: column; align-items: center; }

.nc-eyebrow { display: flex; align-items: center; gap: 16px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 5px; text-transform: uppercase;
  color: rgba(255,215,0,0.78); margin-bottom: 16px; white-space: nowrap;
  animation: ncFadeUp 600ms ease 120ms both; }
.nc-eyebrow .line { width: 56px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.6), transparent); }
.nc-eyebrow .star { width: 10px; height: 10px; transform: rotate(45deg);
  background: var(--gold); box-shadow: 0 0 8px rgba(255,200,60,0.7); }

.nc-title { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: 2px; text-align: center; margin: 0 0 14px;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold);
  filter: drop-shadow(0 2px 14px rgba(255,170,40,0.35)); animation: ncFadeUp 700ms ease 180ms both; }
.nc-sub { font-family: var(--font-narr); font-style: italic; font-size: 1.08rem; color: var(--text-dim);
  text-align: center; max-width: 580px; margin: 0 0 8px; animation: ncFadeUp 700ms ease 240ms both; text-wrap: pretty; }

.nc-divider { display: flex; align-items: center; gap: 14px; width: 320px; margin: 20px 0 28px;
  animation: ncFadeUp 700ms ease 300ms both; }
.nc-divider .seg { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,215,0,0.45), transparent); }
.nc-divider .diamond { width: 8px; height: 8px; transform: rotate(45deg);
  background: var(--gold); box-shadow: 0 0 10px rgba(255,200,60,0.8); }
.nc-divider .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,215,0,0.6); }

.nc-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; width: 100%;
  animation: ncFadeUp 700ms ease 360ms both; }

.nc-choice { position: relative;
  background: radial-gradient(ellipse 100% 80% at 50% -20%, rgba(255,180,60,0.08) 0%, transparent 60%),
    linear-gradient(180deg, #1a1820 0%, #14121a 100%);
  border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-card); padding: 0 0 28px;
  cursor: pointer; text-align: left; display: flex; flex-direction: column; align-items: flex-start;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
  overflow: hidden; isolation: isolate; color: var(--text); }
.nc-art { position: relative; width: 100%; height: 150px;
  background: repeating-linear-gradient(135deg, rgba(255,200,80,0.04) 0 14px, rgba(0,0,0,0.18) 14px 28px),
    linear-gradient(180deg, rgba(40,30,15,0.5), rgba(10,8,6,0.7));
  border-bottom: 1px solid rgba(255,215,0,0.18); overflow: hidden; flex-shrink: 0; }
.nc-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nc-art::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, rgba(13,12,18,0.9) 100%),
    radial-gradient(ellipse 80% 60% at 50% 50%, transparent 40%, rgba(0,0,0,0.5) 100%); z-index: 2; }
.nc-body { position: relative; padding: 0 28px; width: 100%;
  display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
/* S258 (Tyler) — free accounts: the Customize card reads unavailable — grayed
   art + dimmed body — but stays clickable (routes to the Founder Plan tab).
   Hover lifts it partway so it still invites the upsell click. */
.nc-choice.founder-dim { opacity: 0.55; }
.nc-choice.founder-dim .nc-art img { filter: grayscale(0.85) brightness(0.8); }
.nc-choice.founder-dim:hover { opacity: 0.85; }
.nc-choice.founder-dim:hover .nc-art img { filter: grayscale(0.5) brightness(0.9); }
.nc-choice.founder-dim .nc-cta { color: var(--gold-soft); }
.nc-choice::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,180,60,0.0) 0%, transparent 70%);
  transition: background .35s ease; }
.nc-choice::after { content: ""; position: absolute; inset: 6px; pointer-events: none;
  border: 1px solid rgba(255,215,0,0); border-radius: 2px; transition: border-color .25s ease; }
.nc-choice:hover, .nc-choice:focus-visible { transform: translateY(-3px); border-color: rgba(255,215,0,0.55);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,215,0,0.10) inset, 0 0 60px -10px rgba(255,170,40,0.25);
  outline: none; }
.nc-choice:hover::before, .nc-choice:focus-visible::before {
  background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(255,180,60,0.16) 0%, transparent 70%); }
.nc-choice:hover::after, .nc-choice:focus-visible::after { border-color: rgba(255,215,0,0.22); }

.nc-tag { position: absolute; top: 14px; right: 14px; z-index: 4;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,215,0,0.95); background: rgba(20,16,10,0.72);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255,215,0,0.4);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.nc-tag.neutral { color: rgba(241,238,245,0.75); background: rgba(20,16,10,0.72); border-color: rgba(255,255,255,0.20); }

.nc-sigil { width: 76px; height: 76px; position: relative; margin: -42px 0 18px;
  display: grid; place-items: center; color: var(--gold-soft); z-index: 3;
  background: radial-gradient(circle, #14121a 55%, transparent 70%); border-radius: 50%; }
.nc-sigil .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,215,0,0.45);
  background: radial-gradient(circle, rgba(255,180,60,0.18) 0%, rgba(255,180,60,0.04) 50%, transparent 75%);
  box-shadow: 0 0 24px -4px rgba(255,170,40,0.4), inset 0 0 16px rgba(255,170,40,0.08); }
.nc-sigil .ring::before, .nc-sigil .ring::after { content: ""; position: absolute; inset: 4px; border-radius: 50%;
  border: 1px dashed rgba(255,215,0,0.20); }
.nc-sigil .ring::after { inset: -6px; border: 1px solid rgba(255,215,0,0.15); border-style: dotted; }
.nc-sigil svg { position: relative; z-index: 1; filter: drop-shadow(0 0 6px rgba(255,180,60,0.55)); }
.nc-choice:hover .nc-sigil .ring, .nc-choice:focus-visible .nc-sigil .ring {
  box-shadow: 0 0 36px -2px rgba(255,180,50,0.65), inset 0 0 22px rgba(255,170,40,0.12); }

.nc-choice h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.55rem; letter-spacing: 1px;
  color: var(--gold-soft); margin: 0 0 10px; }
.nc-choice p { font-family: var(--font-narr); font-style: italic; font-size: 0.98rem; line-height: 1.45;
  color: var(--text-dim); margin: 0 0 18px; text-wrap: pretty; }

.nc-bullets { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.nc-bullets li { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; color: rgba(241,238,245,0.78); }
.nc-bullets li .b { width: 6px; height: 6px; transform: rotate(45deg);
  background: rgba(255,215,0,0.7); box-shadow: 0 0 6px rgba(255,200,60,0.5); flex-shrink: 0; }

.nc-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--gold); padding: 11px 18px 11px 20px;
  background: linear-gradient(180deg, rgba(255,215,0,0.06), rgba(255,215,0,0.02));
  border: 1px solid rgba(255,215,0,0.35); border-radius: 3px; transition: all .2s ease; align-self: stretch; }
.nc-cta .arrow { transition: transform .25s ease; }
.nc-choice:hover .nc-cta, .nc-choice:focus-visible .nc-cta {
  background: var(--gold-grad); color: #1a1205; border-color: rgba(255,215,0,0.85);
  box-shadow: 0 6px 22px -8px rgba(255,170,40,0.6); }
.nc-choice:hover .nc-cta .arrow, .nc-choice:focus-visible .nc-cta .arrow { transform: translateX(4px); }

.nc-footer { margin-top: 24px; display: flex; align-items: center; gap: 18px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase;
  color: var(--muted); animation: ncFadeUp 700ms ease 460ms both; }
.nc-footer .line { width: 80px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent); }
.nc-cancel { background: none; border: none; color: var(--text-dim);
  font-family: var(--font-body); font-size: 0.86rem; letter-spacing: 1px; cursor: pointer;
  padding: 6px 14px; border-radius: 3px; transition: color .2s ease, background .2s ease; }
.nc-cancel:hover { color: var(--text); background: rgba(255,255,255,0.04); }

@keyframes ncFadeUp { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) {
  .nc-modal-inner { padding: 48px 28px 32px; }
  .nc-choices { grid-template-columns: 1fr; }
  .nc-corner { width: 32px; height: 32px; }
}

/* ===== "New Campaign" form — Screen 2 of the create flow (S195) ==============
   Ported from design_handoff_newcampaign/createcampaign.css. The Customize path
   redesigned as a React island (#campaigncreate-island). Namespaced .ncf-* (own
   token scope like .nc/.cw; the legacy vanilla #campaign-create `.cc-*` form is
   kept as a fallback, so the two must not collide). A full-page route, not an
   overlay. ========================================================== */
.ncf {
  position: relative; z-index: 1000; min-height: 100vh; overflow-y: auto;
  --bg: #08070a; --surface: #121117; --surface2: #1a1922; --surface3: #23222e;
  --border: rgba(255,255,255,0.08); --border-light: rgba(255,255,255,0.14);
  --text: #f1eef5; --text-dim: rgba(241,238,245,0.66); --muted: rgba(241,238,245,0.36);
  --gold: #FFD700; --gold-soft: #FFE8A0; --gold-deep: #B8860B;
  --gold-grad: linear-gradient(135deg, #FFD700 0%, #FFE88A 32%, #FFD700 52%, #CC9900 100%);
  --amber: #FFB84A;
  --radius: 6px; --radius-input: 3px;
  --font-display: 'Cinzel', serif; --font-body: 'DM Sans', system-ui, sans-serif;
  --font-narr: 'Spectral', Georgia, serif; --mono: 'DM Mono', ui-monospace, Menlo, monospace;
  color: var(--text); font-family: var(--font-body);
}
.ncf *, .ncf *::before, .ncf *::after { box-sizing: border-box; }
/* ambient hall — warm corner glows + faint grain, no chrome */
.ncf::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 38% at 50% -10%, rgba(255,170,60,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 38% at 50% 110%, rgba(255,140,40,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 90% 50% at 10% 30%, rgba(255,120,30,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 90% 50% at 90% 70%, rgba(255,120,30,0.06) 0%, transparent 55%),
    var(--bg); }

.ncf-embers { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.ncf-ember { position: absolute; bottom: -20px; width: 2px; height: 2px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,210,120,0.95) 0%, rgba(255,160,40,0.6) 40%, transparent 70%);
  box-shadow: 0 0 6px rgba(255,180,60,0.7); animation: ncfEmberRise linear infinite; opacity: 0; }
@keyframes ncfEmberRise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.9; } 85% { opacity: 0.7; }
  100% { transform: translateY(-120vh) translateX(var(--drift, 30px)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ncf-ember { animation: none; opacity: 0; } }

.ncf-stage { position: relative; z-index: 2; min-height: 100vh;
  display: flex; justify-content: center; align-items: flex-start; padding: 56px 24px 96px; }
.ncf-aura { position: fixed; left: 50%; top: 50%; width: 900px; height: 700px; transform: translate(-50%, -50%);
  pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255,170,60,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(255,140,40,0.08) 0%, transparent 70%);
  filter: blur(10px); animation: ncfAuraBreathe 9s ease-in-out infinite; }
@keyframes ncfAuraBreathe {
  0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .ncf-aura { animation: none; } }

.ncf-page { position: relative; width: min(820px, 100%);
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,180,60,0.06) 0%, transparent 55%),
    linear-gradient(180deg, #14121a 0%, #0d0c12 100%);
  border: 1px solid rgba(255,215,0,0.28); border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 7px rgba(20,16,10,0.55), 0 0 0 8px rgba(255,215,0,0.10),
    0 30px 80px -20px rgba(0,0,0,0.8), 0 80px 200px -40px rgba(255,140,40,0.18);
  isolation: isolate; animation: ncfPageIn 700ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes ncfPageIn {
  0% { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
.ncf-page::before { content: ""; position: absolute; inset: 10px; pointer-events: none;
  border: 1px solid rgba(255,215,0,0.16); border-radius: 3px; z-index: 0; }
.ncf-page::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, transparent 60%, rgba(0,0,0,0.45) 100%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.025) 3px 4px); }

.ncf-corner { position: absolute; width: 44px; height: 44px; z-index: 2; color: var(--gold-soft);
  opacity: 0.95; pointer-events: none; filter: drop-shadow(0 0 4px rgba(255,170,40,0.4)); }
.ncf-corner.ncf-tl { top: 4px; left: 4px; }
.ncf-corner.ncf-tr { top: 4px; right: 4px; transform: scaleX(-1); }
.ncf-corner.ncf-bl { bottom: 4px; left: 4px; transform: scaleY(-1); }
.ncf-corner.ncf-br { bottom: 4px; right: 4px; transform: scale(-1,-1); }

.ncf-inner { position: relative; z-index: 3; padding: 58px 76px 44px; }
.ncf-head { text-align: center; margin-bottom: 36px; }
.ncf-eyebrow { display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 5px; text-transform: uppercase;
  color: rgba(255,215,0,0.78); margin-bottom: 18px; white-space: nowrap; animation: ncfFadeUp 600ms ease 120ms both; }
.ncf-eyebrow .line { width: 56px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,215,0,0.6), transparent); }
.ncf-eyebrow .star { width: 10px; height: 10px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 8px rgba(255,200,60,0.7); }
.ncf-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3rem);
  letter-spacing: 2px; margin: 0 0 14px; background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold);
  filter: drop-shadow(0 2px 14px rgba(255,170,40,0.35)); animation: ncfFadeUp 700ms ease 180ms both; }
.ncf-sub { font-family: var(--font-narr); font-style: italic; font-size: 1.04rem; color: var(--text-dim);
  max-width: 540px; margin: 0 auto; text-wrap: pretty; animation: ncfFadeUp 700ms ease 240ms both; }

.ncf-divider { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 320px; margin: 30px auto; }
.ncf-divider.bare { margin: 38px auto 30px; }
.ncf-divider .seg { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,215,0,0.4), transparent); }
.ncf-divider .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,215,0,0.55); }
.ncf-divider .diamond { width: 8px; height: 8px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 10px rgba(255,200,60,0.8); }

.ncf-field { margin-bottom: 26px; animation: ncfFadeUp 700ms ease 320ms both; }
.ncf-field + .ncf-field { animation-delay: 360ms; }
.ncf-label { display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,215,0,0.85); margin-bottom: 11px; }
.ncf-label::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg);
  background: rgba(255,215,0,0.7); box-shadow: 0 0 6px rgba(255,200,60,0.55); display: inline-block; position: relative; top: -1px; }
.ncf-label .opt { font-family: var(--font-narr); font-style: italic; font-weight: 400;
  font-size: 0.85rem; letter-spacing: 0; text-transform: none; color: var(--muted); }

.ncf-input, .ncf-textarea, .ncf-select { width: 100%;
  background: linear-gradient(180deg, rgba(255,180,60,0.025), transparent 40%), #100f15;
  border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-input); padding: 14px 16px;
  color: var(--text); font-family: var(--font-body); font-size: 1rem; outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.ncf-input::placeholder, .ncf-textarea::placeholder { color: rgba(241,238,245,0.30); font-style: italic; }
.ncf-input:hover, .ncf-textarea:hover, .ncf-select:hover { border-color: rgba(255,215,0,0.25); }
.ncf-input:focus, .ncf-textarea:focus, .ncf-select:focus { border-color: rgba(255,215,0,0.65);
  box-shadow: 0 0 0 3px rgba(255,180,60,0.08), inset 0 0 12px rgba(255,170,40,0.06);
  background: linear-gradient(180deg, rgba(255,180,60,0.04), transparent 40%), #14131a; }
.ncf-textarea { min-height: 130px; resize: vertical; font-family: var(--font-narr); font-size: 1.02rem; line-height: 1.55; }
.ncf-select { appearance: none; -webkit-appearance: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'><path d='M3 5 L7 9 L11 5' stroke='%23FFD700' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
    linear-gradient(180deg, rgba(255,180,60,0.025), transparent 40%),
    linear-gradient(180deg, #100f15, #100f15);
  background-repeat: no-repeat, no-repeat, no-repeat; background-position: right 18px center, 0 0, 0 0; padding-right: 46px; }
.ncf-select option { background: #14131a; color: var(--text); }
.ncf-setting-desc { font-family: var(--font-narr); font-style: italic; font-size: 0.9rem; color: var(--text-dim); margin: 10px 0 0; }
.ncf-helper { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); letter-spacing: 1px; margin: 10px 0 0; }

.ncf-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; }
.ncf-seg button { position: relative;
  background: radial-gradient(ellipse 100% 80% at 50% -30%, rgba(255,180,60,0) 0%, transparent 60%),
    linear-gradient(180deg, #15141c 0%, #100f15 100%);
  border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-input); padding: 13px 12px;
  color: var(--text-dim); font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; letter-spacing: 1px;
  cursor: pointer; transition: all .2s ease; }
.ncf-seg button:hover { border-color: rgba(255,215,0,0.30); color: var(--text); }
.ncf-seg button.active { color: var(--gold); border-color: rgba(255,215,0,0.65);
  background: radial-gradient(ellipse 100% 90% at 50% -30%, rgba(255,180,60,0.18) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255,180,60,0.05) 0%, rgba(255,140,40,0.02) 100%);
  box-shadow: inset 0 0 16px rgba(255,170,40,0.10), 0 0 22px -6px rgba(255,170,40,0.4);
  text-shadow: 0 0 12px rgba(255,200,60,0.4); }

.ncf-rand-row { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.ncf-rand { display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, rgba(255,180,60,0.06), rgba(255,180,60,0.02));
  border: 1px solid rgba(255,215,0,0.35); color: var(--gold-soft);
  font-family: var(--font-body); font-weight: 600; font-size: 0.84rem; letter-spacing: 1px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: all .2s ease; }
.ncf-rand:hover:not(:disabled) { background: linear-gradient(180deg, rgba(255,180,60,0.12), rgba(255,180,60,0.04));
  border-color: rgba(255,215,0,0.6); color: var(--gold); box-shadow: 0 0 16px -4px rgba(255,170,40,0.5); }
.ncf-rand:disabled { opacity: 0.55; cursor: default; }
.ncf-rand .die { font-size: 1rem; filter: drop-shadow(0 0 6px rgba(255,200,60,0.5)); }

.ncf-nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 40px;
  animation: ncfFadeUp 700ms ease 480ms both; }
.ncf-cancel { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.10); color: var(--text-dim);
  font-family: var(--font-body); font-weight: 500; font-size: 0.92rem; letter-spacing: 1px;
  padding: 13px 28px; border-radius: var(--radius-input); cursor: pointer; transition: all .2s ease; }
.ncf-cancel:hover { color: var(--text); border-color: rgba(255,255,255,0.20); background: rgba(255,255,255,0.05); }
.ncf-create { position: relative; display: inline-flex; align-items: center; gap: 14px;
  background: var(--gold-grad); color: #1a1205;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: 2px; text-transform: uppercase;
  padding: 15px 34px; border: 1px solid rgba(255,215,0,0.7); border-radius: var(--radius-input); cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4) inset, 0 8px 28px -8px rgba(255,170,40,0.7), 0 0 80px -10px rgba(255,170,40,0.35);
  transition: all .2s ease; overflow: hidden; }
.ncf-create::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .6s ease; pointer-events: none; }
.ncf-create:hover:not(:disabled) { transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4) inset, 0 12px 36px -8px rgba(255,170,40,0.85), 0 0 100px -10px rgba(255,170,40,0.5); }
.ncf-create:hover:not(:disabled)::before { transform: translateX(100%); }
.ncf-create:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: 0 0 0 1px rgba(0,0,0,0.4) inset; }
.ncf-create .arrow { transition: transform .2s ease; }
.ncf-create:hover:not(:disabled) .arrow { transform: translateX(4px); }
.ncf-create .sigil-mini { width: 16px; height: 16px; display: inline-grid; place-items: center; color: rgba(26,18,5,0.85); }

@keyframes ncfFadeUp { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
@media (max-width: 720px) {
  .ncf-inner { padding: 44px 28px 32px; }
  .ncf-seg { grid-auto-flow: row; grid-auto-columns: auto; }
  .ncf-nav { flex-direction: column-reverse; align-items: stretch; }
  .ncf-create, .ncf-cancel { justify-content: center; text-align: center; }
  .ncf-corner { width: 32px; height: 32px; }
}

/* ===== Peer-to-peer Trade island (M3) — Counter-Table. Ported from
   design_handoff_playertrade/trade.css; self-contained token block scoped to
   .tr so the design's exact values apply without touching the .ss token set.
   Direction B (Handoff envelopes) + the prototype direction-switcher chrome
   are intentionally not ported (Counter-Table is the chosen direction). ===== */
.tr { --bg2:#0c0b10; --surface:#121117; --surface2:#1a1922; --surface3:#23222e;
  --border:rgba(255,255,255,.07); --border-light:rgba(255,255,255,.13);
  --text:#f1eef5; --text-dim:rgba(241,238,245,.62); --muted:rgba(241,238,245,.34);
  --gold:#FFD700; --gold-soft:#FFE8A0; --gold-grad:linear-gradient(135deg,#FFD700,#FFE88A 32%,#FFD700 52%,#CC9900);
  --green:#4AFF9E; --blue:#4A9EFF; --purple:#A78BFA; --amber:#FFB84A; --danger:#FF6B6B;
  --accent:var(--gold); --accent-soft:var(--gold-soft); --accent-grad:var(--gold-grad);
  --r:14px; --rs:10px; --rxs:7px;
  --fd:'Cinzel',serif; --fb:'DM Sans',sans-serif; --fr:'Spectral',Georgia,serif; --fm:'DM Mono',ui-monospace,monospace;
  position:fixed; inset:0; z-index:1400; overflow:hidden; color:var(--text); font-family:var(--fb);
  display:flex; flex-direction:column; -webkit-font-smoothing:antialiased; }
.tr *,.tr *::before,.tr *::after { box-sizing:border-box; }
.tr ::-webkit-scrollbar { width:9px; height:9px; } .tr ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.10); border-radius:6px; }
.tr-scrim { position:absolute; inset:0; z-index:1; background:rgba(4,3,8,.74); backdrop-filter:blur(3px); }
.tr-stage { position:relative; z-index:2; flex:1; min-height:0; display:flex; flex-direction:column; }
.tr-body { flex:1; min-height:0; padding:24px; display:flex; align-items:center; justify-content:center; overflow:auto; }
.tr .av { border-radius:50%; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-weight:700; color:#0c0b10; }
.tr .av img { width:100%; height:100%; object-fit:cover; }

/* combat-locked / waiting / cancelled card (shared shell) */
.tr-locked { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:60px 30px; text-align:center;
  background:linear-gradient(180deg, var(--surface), var(--bg2)); border:1px solid rgba(255,107,107,.32); border-radius:var(--r); max-width:520px; margin:auto; }
.tr-locked .seal { width:74px; height:74px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; border:2px solid rgba(255,107,107,.55); background:rgba(255,107,107,.08); }
.tr-locked h2 { font-family:var(--fd); font-weight:700; font-size:1.4rem; color:var(--danger); margin:0; }
.tr-locked p { font-family:var(--fr); font-style:italic; color:var(--text-dim); margin:0; max-width:420px; line-height:1.6; }

/* trade-complete state */
.tr-sealed { display:flex; flex-direction:column; align-items:center; gap:18px; padding:54px 30px; text-align:center; margin:auto; max-width:480px;
  background:linear-gradient(180deg, var(--surface), var(--bg2)); border:1px solid rgba(74,255,158,.32); border-radius:var(--r); }
.tr-sealed .seal { width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:2rem; border:2px solid rgba(74,255,158,.55); background:rgba(74,255,158,.08); box-shadow:0 0 0 8px rgba(74,255,158,.05); }
.tr-sealed h2 { font-family:var(--fd); font-weight:700; font-size:1.4rem; color:var(--green); margin:0; }
.tr-sealed p { font-family:var(--fr); font-style:italic; color:var(--text-dim); margin:0; line-height:1.55; }
.tr-sealed .replay { font-family:var(--fb); font-size:.78rem; color:var(--accent-soft); background:rgba(255,215,0,.06);
  border:1px solid rgba(255,215,0,.3); padding:8px 14px; border-radius:999px; cursor:pointer; }

/* Counter-Table */
.trA-wrap { width:min(1080px, 100%); display:flex; flex-direction:column; gap:14px; max-height:100%;
  background:linear-gradient(180deg, var(--surface), var(--bg2)); border:1px solid var(--border-light); border-radius:var(--r); overflow:hidden;
  box-shadow:0 30px 100px -20px rgba(0,0,0,.7); }
.trA-head { display:flex; align-items:center; justify-content:space-between; padding:16px 22px;
  border-bottom:1px solid var(--border); background:linear-gradient(180deg, rgba(255,215,0,.04), transparent); }
.trA-head .ttl { font-family:var(--fd); font-weight:700; font-size:1.15rem; color:var(--accent); letter-spacing:.5px; }
.trA-head .sub { font-family:var(--fm); font-size:.7rem; color:var(--muted); margin-top:2px; letter-spacing:.4px; }
.trA-head .close { width:34px; height:34px; border-radius:50%; background:var(--surface2); border:1px solid var(--border-light);
  color:var(--text-dim); cursor:pointer; font-size:.92rem; display:flex; align-items:center; justify-content:center; }
.trA-body { display:grid; grid-template-columns:1fr 60px 1fr; gap:0; min-height:0; overflow:auto; }
.trA-side { padding:18px 22px; display:flex; flex-direction:column; gap:14px; min-height:0; }
.trA-side.them { background:linear-gradient(180deg, rgba(74,255,158,.03), transparent); border-left:1px solid var(--border); }
.trA-side-h { display:flex; align-items:center; gap:11px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.trA-side-h .av { width:38px; height:38px; font-size:.92rem; }
.trA-side-h .nm { font-family:var(--fd); font-weight:700; font-size:1rem; color:var(--text); }
.trA-side-h .sub { font-family:var(--fm); font-size:.66rem; color:var(--muted); margin-top:2px; letter-spacing:.4px; }
.trA-side-h .you { font-family:var(--fm); font-size:.56rem; letter-spacing:1.4px; padding:2px 7px; border-radius:999px;
  background:rgba(74,158,255,.14); color:var(--blue); border:1px solid rgba(74,158,255,.32); margin-left:8px; }
.trA-divider { background:linear-gradient(180deg, transparent, var(--border) 30%, var(--border) 70%, transparent); width:1px; justify-self:center; position:relative; }
.trA-divider::after { content:'⇄'; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:1.2rem;
  color:var(--accent-soft); background:var(--surface); padding:8px; border-radius:50%; border:1px solid var(--border-light); }
.trA-offer-h { font-family:var(--fm); font-size:.62rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent-soft); margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; }
.trA-offer { min-height:140px; background:var(--bg2); border:1px dashed var(--border-light); border-radius:var(--rs); padding:11px; display:flex; flex-direction:column; gap:6px; }
.trA-offer.locked { border-color:var(--accent); border-style:solid; background:linear-gradient(180deg, rgba(255,215,0,.04), var(--bg2)); }
.trA-offer.empty .empty-hint { color:var(--muted); font-style:italic; font-size:.84rem; font-family:var(--fr); padding:18px; text-align:center; }
.trA-offer-row { display:flex; align-items:center; gap:10px; padding:8px 11px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--rxs); }
.trA-offer-row .ic { font-size:1.1rem; flex-shrink:0; }
.trA-offer-row .nm { font-family:var(--fb); font-weight:600; font-size:.84rem; color:var(--text); line-height:1.15; }
.trA-offer-row .meta { font-family:var(--fm); font-size:.6rem; color:var(--muted); margin-top:2px; letter-spacing:.4px; }
.trA-offer-row .rm { font-family:var(--fb); font-size:.7rem; color:var(--danger); cursor:pointer; background:none; border:none; padding:4px 7px; border-radius:5px; }
.trA-offer-row .rm:hover { background:rgba(255,107,107,.1); }
.trA-gold-input { display:flex; gap:6px; align-items:center; padding:8px 11px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--rxs); }
.trA-gold-input .ic { font-size:1rem; }
.trA-gold-input input { width:50px; background:transparent; border:none; outline:none; color:var(--text); font-family:var(--fm); font-size:.84rem; text-align:right; padding:2px 0; appearance:none; }
.trA-gold-input .denom { font-family:var(--fm); font-size:.66rem; color:var(--muted); }
.trA-gold-input .max { font-family:var(--fm); font-size:.6rem; color:var(--muted); margin-left:auto; cursor:pointer; }
.trA-gold-input .max:hover { color:var(--accent-soft); }
.trA-goldrow { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.trA-goldrow > * { flex:1; min-width:96px; }
.trA-inv { display:flex; flex-direction:column; gap:5px; max-height:240px; overflow-y:auto; }
.trA-inv-h { font-family:var(--fm); font-size:.62rem; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.trA-invrow { display:flex; align-items:center; gap:9px; padding:7px 10px; background:var(--surface); border:1px solid var(--border-light); border-radius:var(--rxs); cursor:pointer; transition:all .14s; }
.trA-invrow:hover { border-color:var(--accent); background:var(--surface2); }
.trA-invrow.in-offer { opacity:.4; cursor:not-allowed; }
.trA-invrow.attuned { border-color:rgba(167,139,250,.24); cursor:not-allowed; }
.trA-invrow .ic { font-size:1rem; }
.trA-invrow .nm { font-family:var(--fb); font-weight:600; font-size:.84rem; color:var(--text); }
.trA-invrow .meta { font-family:var(--fm); font-size:.58rem; color:var(--muted); margin-top:1px; letter-spacing:.4px; }
.trA-invrow .add { font-family:var(--fm); font-size:.66rem; color:var(--accent-soft); margin-left:auto; }
.trA-invrow.attuned .badge { font-family:var(--fm); font-size:.54rem; color:var(--purple); background:rgba(167,139,250,.10); padding:2px 6px; border-radius:999px; border:1px solid rgba(167,139,250,.32); margin-left:auto; }
.trA-actions { display:flex; gap:8px; margin-top:12px; }
.trA-actions button { flex:1; font-family:var(--fb); font-weight:700; font-size:.86rem; padding:10px 14px; border-radius:8px;
  border:1px solid var(--border-light); background:var(--surface2); color:var(--text-dim); cursor:pointer; transition:all .14s; }
.trA-actions button:hover { color:var(--text); border-color:rgba(255,255,255,.22); }
.trA-actions .lock { background:rgba(255,215,0,.06); color:var(--accent-soft); border-color:rgba(255,215,0,.32); }
.trA-actions .lock.locked { background:var(--accent-grad); color:#1a1205; border-color:transparent; }
.trA-actions .accept { background:rgba(74,255,158,.06); color:var(--green); border-color:rgba(74,255,158,.32); }
.trA-actions .accept.on { background:rgba(74,255,158,.18); color:var(--green); border-color:var(--green); }
.trA-actions button:disabled { opacity:.4; cursor:not-allowed; }
.trA-status { padding:12px 22px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; background:var(--bg2); }
.trA-status .lab { font-family:var(--fm); font-size:.66rem; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); }
.trA-status .state { font-family:var(--fb); font-size:.84rem; color:var(--text-dim); }
.trA-status .state.ready { color:var(--green); }
.trA-status .confirm { margin-left:auto; }
.trA-status .confirm button { font-family:var(--fd); font-weight:700; font-size:.92rem; letter-spacing:1.2px; text-transform:uppercase; padding:11px 22px; border-radius:8px;
  background:var(--accent-grad); color:#1a1205; border:none; cursor:pointer; box-shadow:0 4px 20px -8px rgba(255,200,60,.5); }
.trA-status .confirm button:disabled { opacity:.3; cursor:not-allowed; box-shadow:none; }
@media (max-width: 880px) { .trA-body { grid-template-columns:1fr; } .trA-divider { display:none; } .trA-side.them { border-left:none; border-top:1px solid var(--border); } }

/* ════════════════════════════════════════════════════════════════════════════
   SHARED .modal CHROME — REDESIGN (M3-tail, S196). Drop-in override of the
   generic shared-shell selectors, ported from design_handoff_modalchrome. Same
   selectors → every modal on the shared shell upgrades at once (Appraiser, Loot
   Offer, Spell Swap, Rest Focus/Vote, Drop-in Catchup, Confirm, Cover-Art, the
   class-ability modals, admin modals…). Appended (not in-place) so it wins on
   cascade order; radius is SCOPED to the modal via literals (8/3px) rather than
   tightening the global --radius tokens (which party rows / tiles depend on).
   ════════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.88) 80%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 24px;
  animation: m-overlay-in 220ms ease-out;
}
@keyframes m-overlay-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,180,60,0.05) 0%, transparent 55%),
    linear-gradient(180deg, #14121a 0%, #0d0c12 100%);
  border: 1px solid rgba(255,215,0,0.28);
  border-radius: 8px;
  padding: 36px 36px 28px;
  width: 100%;
  max-height: calc(100vh - 48px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 0 0 6px rgba(20,16,10,0.55),
    0 0 0 7px rgba(255,215,0,0.10),
    0 24px 60px -16px rgba(0,0,0,0.8),
    0 60px 140px -40px rgba(255,140,40,0.14);
  isolation: isolate;
  animation: m-card-in 300ms cubic-bezier(.2,.7,.2,1);
}
@keyframes m-card-in {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal::before {
  content: ""; position: absolute; inset: 8px;
  border: 1px solid rgba(255,215,0,0.14); border-radius: 4px;
  pointer-events: none; z-index: 0;
}
.modal::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, transparent 60%, rgba(0,0,0,0.4) 100%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.02) 3px 4px);
  pointer-events: none; border-radius: 8px; z-index: 0;
}
.modal > * { position: relative; z-index: 1; }

/* Corner ornaments — 4 spans stamped into every .modal by js/game.js (on-load
   sweep + MutationObserver). data-uri SVG filigree, mirrored per corner. */
.modal > .mc {
  position: absolute; width: 32px; height: 32px; z-index: 2; pointer-events: none;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'><path d='M2 16 L2 5 Q2 2 5 2 L16 2' stroke='%23FFE8A0' stroke-width='1.1' opacity='0.85'/><path d='M5 16 L5 7 Q5 5 7 5 L16 5' stroke='%23FFE8A0' stroke-width='0.6' opacity='0.55'/><rect x='14' y='0' width='3' height='3' transform='rotate(45 16 2)' fill='%23FFE8A0' opacity='0.9'/><rect x='0' y='14' width='3' height='3' transform='rotate(45 2 16)' fill='%23FFE8A0' opacity='0.9'/><circle cx='8' cy='8' r='1' fill='%23FFE8A0' opacity='0.85'/></svg>");
  filter: drop-shadow(0 0 3px rgba(255,170,40,0.4));
}
/* Use the `inset` shorthand (top right bottom left) so each corner sets ALL FOUR
   offsets explicitly. The `.mc.tr` span carries a bare `tr` class, which collides
   with the `.tr` Trade-overlay rule (position:fixed; inset:0) — that leaked
   `left:0` over-constrained the right corner and collapsed it onto the left (the
   recurring "top-right ornament on the left" bug on every vanilla modal). An
   explicit inset overrides the leak. (Islands use scoped .csx-tr; ability modals
   use .am-tr — only this .mc system carried the collision.) */
.modal > .mc.tl { inset: 3px auto auto 3px; }
.modal > .mc.tr { inset: 3px 3px auto auto; transform: scaleX(-1); }
.modal > .mc.bl { inset: auto auto 3px 3px; transform: scaleY(-1); }
.modal > .mc.br { inset: auto 3px 3px auto; transform: scale(-1,-1); }

.modal h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  letter-spacing: 1.5px; line-height: 1.15; margin: 0 44px 8px 0;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold);
  filter: drop-shadow(0 1px 8px rgba(255,170,40,0.3));
}
.modal h2::after {
  content: ""; display: block; width: 56px; height: 1px; margin: 14px 0 16px;
  background: linear-gradient(90deg, rgba(255,215,0,0.55), transparent);
}
/* Tone titles (danger / warning / etc.) — opt out of the gold gradient so the
   inline `color` renders solid. The gradient relies on -webkit-text-fill-color:
   transparent, which a plain inline `color` can't override; this resets it. */
.modal h2.mh2-tone { background: none; -webkit-text-fill-color: currentColor; filter: none; }
/* .modal-header lays the h2 beside the × in a flex row — there the gold divider
   + bottom margin read as misalignment, so suppress them in that context. */
.modal-header h2 { margin: 0; }
.modal-header h2::after { display: none; }

.modal-close {
  top: 14px; right: 14px; width: 32px; height: 32px;
  background: rgba(20,16,10,0.6); border: 1px solid rgba(255,215,0,0.22);
  color: var(--text-dim); font-size: 1.3rem; border-radius: 3px; z-index: 3;
  transition: all var(--transition);
}
.modal-close:hover {
  color: var(--gold); border-color: rgba(255,215,0,0.6);
  background: rgba(255,180,60,0.08); box-shadow: 0 0 12px -2px rgba(255,170,40,0.5);
}

.form-group { margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.form-group label {
  font-family: var(--font-display); font-weight: 600; font-size: 0.74rem;
  letter-spacing: 3px; text-transform: uppercase; color: rgba(255,215,0,0.85);
  display: flex; align-items: baseline; gap: 8px;
}
.form-group label::before {
  content: ""; width: 5px; height: 5px; transform: rotate(45deg);
  background: rgba(255,215,0,0.7); box-shadow: 0 0 5px rgba(255,200,60,0.5);
  display: inline-block; flex-shrink: 0; position: relative; top: -1px;
}
.form-input, .form-select, .form-textarea,
.modal input[type="text"], .modal input[type="number"], .modal input[type="password"],
.modal textarea, .modal select {
  background: linear-gradient(180deg, rgba(255,180,60,0.025), transparent 40%), #100f15;
  border: 1px solid rgba(255,255,255,0.10); border-radius: 3px;
  padding: 12px 14px; color: var(--text); font-family: var(--font-body); font-size: 0.95rem;
  outline: none; width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-input::placeholder, .modal textarea::placeholder, .modal input::placeholder {
  color: rgba(240,240,245,0.30); font-style: italic;
}
.form-input:hover, .form-select:hover, .form-textarea:hover,
.modal textarea:hover, .modal input:hover, .modal select:hover { border-color: rgba(255,215,0,0.22); }
.form-input:focus, .form-select:focus, .form-textarea:focus,
.modal textarea:focus, .modal input:focus, .modal select:focus {
  border-color: rgba(255,215,0,0.55);
  box-shadow: 0 0 0 3px rgba(255,180,60,0.08), inset 0 0 10px rgba(255,170,40,0.05);
  background: linear-gradient(180deg, rgba(255,180,60,0.04), transparent 40%), #14131a;
}

.btn {
  font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.5px;
  padding: 11px 22px; border-radius: 3px; border: 1px solid var(--border-light);
  cursor: pointer; transition: all var(--transition);
  background: rgba(255,255,255,0.02); color: var(--text-dim);
}
.btn:hover { color: var(--text); border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.05); }
.btn-secondary { background: rgba(255,255,255,0.02); color: var(--text-dim); border: 1px solid var(--border-light); }
.btn-secondary:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.btn-primary {
  font-family: var(--font-display); font-weight: 700; font-size: 0.92rem;
  letter-spacing: 1.5px; text-transform: uppercase;
  background: var(--gold-grad); color: #1a1205; border: 1px solid rgba(255,215,0,0.7);
  padding: 11px 26px; position: relative; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3), 0 6px 18px -6px rgba(255,170,40,0.6), 0 0 50px -12px rgba(255,170,40,0.3);
}
.btn-primary:hover {
  color: #1a1205; background: var(--gold-grad); border-color: rgba(255,215,0,0.9);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3), 0 8px 24px -6px rgba(255,170,40,0.8), 0 0 70px -12px rgba(255,170,40,0.45);
  transform: translateY(-1px);
}
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3); }

/* ════════════════════════════════════════════════════════════════════════════
   NARRATIVE FEED — player message refresh (M3-tail, S196). Player lines now
   share the DM's painted vocabulary: left-aligned, no chat-chrome, a Cinzel
   small-caps colored name with a diamond pip (echo of the DM's ✦) + a
   Spectral-italic body. Per-player color is the inline `color` on .player-label,
   so the pip + glow use currentColor (no per-player slug classes needed).
   Appended so it wins over the earlier .ss chip rules. Mini portrait hidden in
   player lines to match the DM label (the name stays clickable via .pc-link).
   ════════════════════════════════════════════════════════════════════════ */
.ss .narrative-msg.player, .ss .msg-player {
  display: block; align-self: flex-start; max-width: none;
  background: none; border: none; padding: 0; margin-bottom: 18px;
}
/* S196 — character portrait restored to player messages (Tyler retest #2).
   The narrative refresh had hidden it; bring it back as a small avatar before
   the gold name (the render in renderPlayerLabel already builds the <img>). */
.ss .narrative-msg.player .player-label .player-avatar-mini { display: inline-block; width: 24px; height: 24px; }
.ss .narrative-msg.player .player-label,
.ss .msg-player .pname {
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 2px; text-transform: uppercase; margin: 0 0 10px;
  display: flex; align-items: center; gap: 9px;
}
.ss .narrative-msg.player .player-label::before,
.ss .msg-player .pname::before {
  content: ""; display: inline-block; width: 7px; height: 7px; flex-shrink: 0;
  background: currentColor; transform: rotate(45deg); box-shadow: 0 0 6px currentColor;
}
.ss .narrative-msg.player > div:last-child,
.ss .msg-player .ptext {
  font-family: var(--font-read); font-style: italic; font-size: 1.06rem;
  line-height: 1.7; color: rgba(241,238,245,0.88); text-wrap: pretty;
}

/* emoji-sweep — painted UI icons (slices 1-6) + slice-7 inline SVG control glyphs.
   currentColor-driven for the SVGs; painted webp align with adjacent text. */
.ui-paint { display: inline-block; vertical-align: -0.18em; object-fit: contain; }
.ui-paint-fb { display: inline-block; }
.ui-ic { display: inline-block; vertical-align: -0.18em; }
/* S243 emblem restyle — all painted icons render as uniform circular medallions.
   The flat art (single subject on a uniform dark near-black bg, no baked disc/rim)
   is clipped to a clean circle here; the combat modal cards are larger than the old
   18px inline glyph per Tyler's "combat UI ones can be larger". Sized per surface at
   the call site; one class = one consistent look everywhere. */
.ui-paint.ui-med {
  object-fit: cover;
  border-radius: 50%;
  vertical-align: middle;
  background: #14121a;
  box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.18);
  margin-right: 2px;
}


/* ===== Onboarding island "Welcome to the Tavern" (M4 2b) — folded in from the
   former css/onboarding.css so it ships with the single style.css the deploy copies. ===== */
/* === Onboarding island — "Welcome to the Tavern" (M4 slice 2b) =============
   Ported from design_handoff_onboarding/onboard/onboard.css. Direction A
   ("Cross the Threshold", single cinematic page) only — the Direction B
   (.obB-*) wizard styles are intentionally omitted. Everything is scoped under
   .ob. Linked from index.html by the parent. Keep tokens verbatim.
   ========================================================================== */
.ob { --bg:#08070a; --bg2:#0c0b10; --surface:#121117; --surface2:#1a1922; --surface3:#23222e;
  --border:rgba(255,255,255,.07); --border-light:rgba(255,255,255,.13);
  --text:#f1eef5; --text-dim:rgba(241,238,245,.62); --muted:rgba(241,238,245,.34);
  --gold:#FFD700; --gold-soft:#FFE8A0; --gold-grad:linear-gradient(135deg,#FFD700,#FFE88A 32%,#FFD700 52%,#CC9900);
  --green:#4AFF9E; --blue:#4A9EFF; --purple:#A78BFA; --amber:#FFB84A;
  --accent:var(--gold); --accent-soft:var(--gold-soft); --accent-grad:var(--gold-grad);
  --r:14px; --rs:10px; --rxs:7px;
  --fd:'Cinzel',serif; --fb:'DM Sans',sans-serif; --fr:'Spectral',Georgia,serif; --fm:'DM Mono',ui-monospace,monospace;
  position:absolute; inset:0; overflow:hidden; background:var(--bg); color:var(--text); font-family:var(--fb);
  display:flex; flex-direction:column; -webkit-font-smoothing:antialiased; }
.ob *,.ob *::before,.ob *::after { box-sizing:border-box; }
.ob ::-webkit-scrollbar { width:9px; height:9px; } .ob ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.10); border-radius:6px; }
.ob ::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.18); }

/* ambient */
.ob-bg { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ob-bg .glow { position:absolute; left:50%; top:-10%; width:120vmax; height:80vmax; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%, rgba(255,160,50,.18), rgba(255,140,40,.05) 38%, transparent 62%); }
.ob-bg .vig { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 40%, transparent 38%, rgba(0,0,0,.62) 100%); }
.ob-ember { position:absolute; bottom:-12px; width:3px; height:3px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,210,120,.95), rgba(255,150,50,0) 70%);
  animation:obEm linear infinite; opacity:0; }
@media(prefers-reduced-motion:reduce){ .ob-ember{display:none;} }
@keyframes obEm { 0%{transform:translateY(0); opacity:0;} 10%{opacity:.9;} 90%{opacity:.5;}
  100%{transform:translateY(-95vh) translateX(30px); opacity:0;} }

/* topbar */
.ob-stage { position:relative; z-index:1; flex:1; min-height:0; display:flex; flex-direction:column; }
.ob-top { display:flex; align-items:center; gap:14px; padding:14px 24px; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,180,60,.04), transparent); flex-shrink:0; z-index:5; }
.ob-brand { font-family:var(--fd); font-weight:800; font-size:1.05rem; letter-spacing:1px; white-space:nowrap;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ob-brand .sm { font-family:var(--fb); -webkit-text-fill-color:var(--muted); color:var(--muted);
  font-size:.72rem; font-weight:500; letter-spacing:1.4px; text-transform:uppercase; margin-left:10px; }
.ob-sp { flex:1; }
.ob-signin { font-family:var(--fb); font-size:.84rem; color:var(--accent-soft); background:none; border:none; cursor:pointer; padding:7px 14px; border-radius:8px; }
.ob-signin:hover { background:rgba(255,215,0,.06); }

/* buttons */
.ob-btn { font-family:var(--fb); font-weight:600; font-size:.92rem; padding:11px 20px; border-radius:var(--rs); cursor:pointer;
  border:1px solid var(--border-light); background:var(--surface2); color:var(--text); transition:all .16s; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; justify-content:center; }
.ob-btn:hover { background:var(--surface3); }
.ob-btn:disabled { opacity:.4; cursor:not-allowed; }
.ob-btn.gold { background:var(--accent-grad); color:#1a1205; border-color:transparent; font-weight:700; box-shadow:0 4px 24px -8px rgba(255,200,60,.5); }
.ob-btn.gold:hover:not(:disabled) { filter:brightness(1.07); }
.ob-btn.ghost { background:rgba(255,215,0,.06); color:var(--accent-soft); border-color:rgba(255,215,0,.30); }
.ob-btn.lg { padding:14px 32px; font-size:1rem; }
.ob-btn.sm { padding:7px 12px; font-size:.78rem; }
.ob-btn.block { width:100%; }
.ob-mono { font-family:var(--fm); font-size:.72rem; color:var(--muted); letter-spacing:.5px; }

.ob-scroll { flex:1; min-height:0; overflow-y:auto; }

/* ========================================== DIRECTION A — Cross the Threshold (single cinematic) */
.obA-wrap { max-width:980px; margin:0 auto; padding:48px 28px 80px; }
.obA-hero { display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center; margin-bottom:48px; }
.obA-hero-l .eyebrow { font-family:var(--fm); font-size:.78rem; letter-spacing:6px; text-transform:uppercase; color:var(--accent-soft); margin-bottom:14px; }
.obA-hero-l h1 { font-family:var(--fd); font-weight:700; font-size:3.4rem; line-height:1.05; margin:0;
  background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 4px 36px rgba(255,180,60,.2); }
.obA-hero-l .tag { font-family:var(--fr); font-style:italic; font-size:1.18rem; color:var(--text-dim); margin:18px 0 0; line-height:1.55; max-width:480px; }
.obA-hero-l .cta { display:flex; gap:10px; margin-top:30px; flex-wrap:wrap; }
.obA-trust { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.obA-trustchip { font-family:var(--fm); font-size:.7rem; letter-spacing:.5px; color:var(--text-dim);
  padding:5px 12px; border:1px solid var(--border-light); border-radius:999px; background:var(--surface); display:inline-flex; align-items:center; gap:6px; }
.obA-trustchip::before { content:'✦'; color:var(--accent); }

/* tavern card on right */
.obA-card { background:linear-gradient(180deg, var(--surface), var(--bg2)); border:1px solid var(--border-light);
  border-radius:var(--r); padding:30px 28px; box-shadow:0 30px 80px -20px rgba(0,0,0,.6); }
.obA-card h2 { font-family:var(--fd); font-weight:700; font-size:1.4rem; margin:0 0 6px; color:var(--text); }
.obA-card .sub { color:var(--text-dim); font-size:.92rem; margin:0 0 22px; }
.obA-oauth { display:flex; flex-direction:column; gap:9px; margin-bottom:18px; }
.obA-oauth button { display:flex; align-items:center; justify-content:center; gap:10px; padding:11px 16px; border-radius:var(--rs);
  font-family:var(--fb); font-weight:600; font-size:.92rem; color:var(--text); background:var(--surface2); border:1px solid var(--border-light); cursor:pointer; transition:all .14s; }
.obA-oauth button:hover { background:var(--surface3); border-color:var(--border-light); }
.obA-oauth button:disabled { opacity:.5; cursor:not-allowed; }
.obA-oauth button:disabled:hover { background:var(--surface2); }
.obA-oauth .gicon { width:18px; height:18px; border-radius:50%; background:#fff; color:#0c0b10; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.7rem; }
.obA-oauth .dicon { width:18px; height:18px; border-radius:5px; background:#5865F2; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.7rem; }
.obA-soon { margin-left:auto; font-family:var(--fm); font-size:.56rem; letter-spacing:1px; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--border-light); border-radius:999px; padding:2px 8px; }
.obA-or { display:flex; align-items:center; gap:10px; margin:6px 0 14px; font-family:var(--fm); font-size:.66rem; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.obA-or::before, .obA-or::after { content:''; flex:1; height:1px; background:var(--border); }
.obA-field { margin-bottom:11px; }
.obA-label { font-family:var(--fb); font-size:.7rem; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); margin-bottom:7px; display:block; }
.obA-input { width:100%; font-family:var(--fb); font-size:.95rem; color:var(--text); background:var(--surface);
  border:1px solid var(--border-light); border-radius:var(--rs); padding:11px 14px; outline:none; transition:border-color .14s; }
.obA-input:focus { border-color:rgba(255,215,0,.5); box-shadow:0 0 0 3px rgba(255,215,0,.08); }
.obA-input::placeholder { color:rgba(241,238,245,.28); }
.obA-hint { font-family:var(--fb); font-size:.68rem; color:var(--muted); margin:6px 0 0; line-height:1.45; }
.obA-error { font-family:var(--fb); font-size:.82rem; color:var(--danger,#FF6B6B); margin:0 0 14px; padding:9px 12px;
  background:rgba(255,107,107,.08); border:1px solid rgba(255,107,107,.3); border-radius:var(--rs); line-height:1.4; }
.obA-success { font-family:var(--fr); font-style:italic; font-size:.95rem; color:var(--green); margin:18px 0; line-height:1.55; text-align:center; }
.obA-forgot { font-family:var(--fb); font-size:.74rem; color:var(--accent-soft); background:none; border:none; cursor:pointer; padding:0; margin-top:7px; }
.obA-forgot:hover { text-decoration:underline; }
.obA-fine { font-family:var(--fm); font-size:.66rem; color:var(--muted); margin-top:14px; line-height:1.5; text-align:center; }
.obA-guest { font-family:var(--fb); font-size:.78rem; color:var(--accent-soft); background:none; border:none; cursor:pointer; display:block; margin:14px auto 0; }
.obA-guest:hover { text-decoration:underline; }
.obA-switch { font-family:var(--fb); font-size:.8rem; color:var(--text-dim); text-align:center; margin:16px 0 0; }
.obA-switch button { font-family:var(--fb); font-size:.8rem; color:var(--accent-soft); background:none; border:none; cursor:pointer; padding:0; }
.obA-switch button:hover { text-decoration:underline; }

/* tour beats */
.obA-beats { margin-top:60px; }
.obA-beats-h { text-align:center; margin-bottom:28px; }
.obA-beats-h .em { font-family:var(--fm); font-size:.78rem; letter-spacing:4px; text-transform:uppercase; color:var(--accent-soft); }
.obA-beats-h h2 { font-family:var(--fd); font-weight:700; font-size:2rem; margin:8px 0 0;
  background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.obA-beats-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
.obA-beat { background:var(--surface); border:1px solid var(--border-light); border-radius:var(--r); padding:24px 24px 22px; display:flex; flex-direction:column; gap:10px; transition:all .15s; }
.obA-beat:hover { transform:translateY(-2px); border-color:rgba(255,215,0,.32); }
.obA-beat .ico { font-size:1.8rem; line-height:1; }
.obA-beat .ttl { font-family:var(--fd); font-weight:600; font-size:1.18rem; color:var(--text); margin:0; line-height:1.15; }
.obA-beat .txt { color:var(--text-dim); font-size:.95rem; line-height:1.55; margin:0; }

/* paths */
.obA-paths { margin-top:48px; }
.obA-paths-h { text-align:center; margin-bottom:24px; }
.obA-paths-h h2 { font-family:var(--fd); font-weight:700; font-size:1.8rem; margin:0; color:var(--text); }
.obA-paths-h p { color:var(--text-dim); margin:6px 0 0; font-family:var(--fr); font-style:italic; }
.obA-paths-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.obA-path { position:relative; background:var(--surface); border:1px solid var(--border-light); border-radius:var(--r); padding:22px 22px 20px; text-align:left; cursor:pointer; transition:all .15s; display:flex; flex-direction:column; gap:10px; }
.obA-path:hover { transform:translateY(-3px); border-color:var(--accent); }
.obA-path.reco { border-color:rgba(255,215,0,.5); background:linear-gradient(180deg, rgba(255,215,0,.06), var(--surface) 70%); }
.obA-path .reco-chip { position:absolute; top:-9px; right:14px; font-family:var(--fm); font-size:.58rem; letter-spacing:1.2px; text-transform:uppercase; color:#1a1205; background:var(--gold-grad); padding:3px 9px; border-radius:999px; font-weight:800; }
.obA-path .ico { font-size:2rem; line-height:1; }
.obA-path .nm { font-family:var(--fd); font-weight:700; font-size:1.2rem; color:var(--text); line-height:1.1; }
.obA-path .sub { font-family:var(--fb); font-size:.82rem; color:var(--accent-soft); }
.obA-path .desc { font-size:.88rem; color:var(--text-dim); line-height:1.5; margin:6px 0 0; }
.obA-path .go { font-family:var(--fb); font-size:.82rem; color:var(--text); font-weight:600; margin-top:auto; padding-top:10px;
  border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.obA-path.reco .go { color:var(--accent); }

@media (max-width: 880px) {
  .obA-hero { grid-template-columns:1fr; gap:30px; }
  .obA-beats-grid { grid-template-columns:1fr; }
  .obA-paths-grid { grid-template-columns:1fr; }
}

/* welcome / handoff state */
.ob-done { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:40px; text-align:center; flex:1; }
.ob-done .seal { width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:2.4rem; border:2px solid rgba(255,215,0,.55); background:rgba(255,215,0,.06);
  box-shadow:0 0 0 10px rgba(255,215,0,.04); }
.ob-done h1 { font-family:var(--fd); font-weight:700; font-size:2rem; margin:0;
  background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ob-done p { font-family:var(--fr); font-style:italic; color:var(--text-dim); max-width:480px; line-height:1.55; margin:0; }

/* Island host — onboarding is the app's front door, so it must overlay the
   splash/home screens (which are positioned). game.js sets display:block on mount. */
#onboarding-island { position:fixed; inset:0; z-index:9000; }

/* Lantern Path lobby entry (S205) — gold-on-dark CTA above "Your Campaigns".
   Shown for first-timers (Start) + as a lingering replay until the player graduates;
   filled by DndGame.renderLanternLobbyCard() from /api/lantern/status. */
.lantern-cta {
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  margin: 0 0 18px; padding: 16px 20px; border-radius: 14px;
  border: 1px solid rgba(255, 215, 0, 0.3);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.10) 0%, rgba(20, 16, 10, 0.5) 60%);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4), 0 0 26px rgba(255, 178, 64, 0.10);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.lantern-cta:hover { transform: translateY(-2px); border-color: rgba(255, 215, 0, 0.55); box-shadow: 0 9px 28px rgba(0, 0, 0, 0.5), 0 0 34px rgba(255, 178, 64, 0.2); }
.lantern-cta-lamp { font-size: 30px; line-height: 1; filter: drop-shadow(0 0 8px rgba(255, 178, 64, 0.6)); flex: 0 0 auto; }
.lantern-cta-text { flex: 1 1 auto; min-width: 0; }
.lantern-cta-title { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.02rem; color: #FFE8A0; margin-bottom: 3px; }
.lantern-cta-body { font-size: 0.86rem; line-height: 1.45; color: rgba(241, 238, 245, 0.66); }
.lantern-cta-go { flex: 0 0 auto; font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.9rem; color: #1a1407; padding: 9px 16px; border-radius: 9px; background: linear-gradient(135deg, #FFD700 0%, #FFE88A 40%, #CC9900 100%); white-space: nowrap; }

/* S208 — Admin Tools modal: tab strip + panes. Self-contained (not the .ss jr-tab system). */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.admin-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 0.03em; padding: 10px 12px; cursor: pointer; transition: color .15s, border-color .15s; }
.admin-tab:hover { color: var(--text); }
.admin-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.admin-tabcount { font-family: var(--mono, monospace); font-size: 0.68rem; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.admin-tab.active .admin-tabcount { color: var(--gold); border-color: rgba(255,215,0,0.3); }

/* S216 — header identity dropdown (avatar + name + tier) → Account / Settings / Your Plan */
/* Lift the header above .cl-body so the dropdown isn't painted under the right rail (both
   were z-index:1; .cl-body comes later in source order and won). */
.cl-head { z-index: 100; }
/* The BYOK key modal is opened FROM the Your Plan tab (inside the settings modal, z-index 600),
   so it must sit above it — otherwise "Add your API key" opens behind the settings panel and
   looks dead. (.modal-overlay is z-index 500; this targets only #byok-overlay.) */
#byok-overlay { z-index: 700; }
.cl-usermenu { position: relative; display: inline-block; }
.cl-identity { display: inline-flex; align-items: center; gap: 6px; }
.cl-avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 0.72rem; font-weight: 700; color: #15171c; flex: 0 0 auto; position: relative; overflow: hidden; }
/* M6 avatars — an avatar image fills the monogram circle; the monogram sits beneath as the fallback. */
.av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.cl-tier-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: .5px; padding: 1px 5px; border-radius: 6px; background: rgba(255,215,0,0.15); color: #FFE8A0; }
.cl-caret { font-size: 0.6rem; opacity: 0.7; }
.cl-usermenu-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 188px; background: var(--surface, #1a1d24); border: 1px solid var(--border, rgba(255,255,255,0.1)); border-radius: 10px; padding: 6px; z-index: 1200; box-shadow: 0 10px 28px rgba(0,0,0,0.45); }
.cl-usermenu-pop button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text, #e8e8e8); padding: 8px 10px; border-radius: 6px; font-size: 0.85rem; cursor: pointer; }
.cl-usermenu-pop button:hover { background: rgba(255,255,255,0.08); }
.cl-usermenu-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 2px; }

/* S216 — accessibility prefs (Settings → Accessibility). reduce-motion damps CSS animation/
   transition; text-size scales the root (rem-based UI). Defaults: motion on, 16px. */
html[data-reduce-motion="1"] *, html[data-reduce-motion="1"] *::before, html[data-reduce-motion="1"] *::after {
  animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; scroll-behavior: auto !important;
}
html[data-text-size="small"] { font-size: 14px; }
html[data-text-size="large"] { font-size: 18px; }
/* S239 — dyslexia-friendly font: swap body/prose to a high-legibility sans + looser spacing (the
   themed display headings keep their face). For dyslexia, spacing matters as much as the typeface. */
html[data-dyslexia="1"] { --font-body: Verdana, 'Trebuchet MS', system-ui, sans-serif; --prose: Verdana, 'Trebuchet MS', system-ui, sans-serif; }
html[data-dyslexia="1"] p { line-height: 1.8; letter-spacing: 0.02em; word-spacing: 0.06em; }
/* S239 — reduced flashing: kill the decorative pulse/glow/shimmer/ember loops the app-wide motion
   policy intentionally KEEPS for everyone (the photosensitivity concern reduce-motion doesn't cover). */
html[data-reduced-flash="1"] .pulse,
html[data-reduced-flash="1"] [class*="pulse"],
html[data-reduced-flash="1"] [class*="glow"],
html[data-reduced-flash="1"] [class*="shimmer"],
html[data-reduced-flash="1"] [class*="ember"],
html[data-reduced-flash="1"] [class*="flicker"] { animation: none !important; }
/* S239 — colorblind-safe cues (targeted, M6). Color carries meaning in two combat spots: effect
   chips (beneficial/control/debuff) + HP bars (healthy/bloodied/critical). Add a SHAPE glyph to the
   chips + a colorblind-safe hue/pattern to HP so neither relies on red/green alone. Conditions
   already carry their text + emoji label, so they need no extra cue. */
html[data-colorblind="1"] .party-effect-chip.beneficial::before,
html[data-colorblind="1"] .effect-chip.beneficial::before { content: "\25B2 "; }
html[data-colorblind="1"] .party-effect-chip.harmful-debuff::before,
html[data-colorblind="1"] .effect-chip.harmful-debuff::before { content: "\25BC "; }
html[data-colorblind="1"] .party-effect-chip.harmful-control::before,
html[data-colorblind="1"] .effect-chip.harmful-control::before { content: "\25C6 "; }
html[data-colorblind="1"] .hp-bar.healthy { background: #2a7fff; }
html[data-colorblind="1"] .hp-bar.critical,
html[data-colorblind="1"] .target-card-hp-fill.critical {
  background-image: repeating-linear-gradient(45deg, transparent 0, transparent 3px, rgba(0,0,0,0.28) 3px, rgba(0,0,0,0.28) 6px);
}

/* ===========================================================================
   CLASS-ABILITY MODALS — M6 v3 "The Invocations" (tier-3 POLISH).
   ONE shared ability-modal shell (.am-modal, wrapper class "amx") that all ~20
   class-ability modals render through, + the 6 body-archetype atoms. Ported
   VERBATIM from the handoff am-styles.css, layered on the .csx kit tokens
   (copied from src/vendor/vendor.css so the chrome matches the shipped islands).
   This is VANILLA (not a React island) — the modals stay wired to js/combat.js.
   CORNER FIX: the handoff used bare .tl/.tr/.bl/.br which COLLIDE with style.css
   unscoped root classes (.tr = Trade overlay, position:fixed;inset:0 → black
   screen). Re-scoped to .am-tl/.am-tr/.am-bl/.am-br here. Mirrors the islands'
   .csx-corner.csx-tl fix.
   =========================================================================== */
.amx {
  --bg: #08070a; --surface: #121117; --surface2: #1a1922; --surface3: #23222e;
  --border: rgba(255,255,255,0.08); --border-light: rgba(255,255,255,0.14);
  --text: #f1eef5; --dim: rgba(241,238,245,0.62); --muted: rgba(241,238,245,0.34);
  --gold: #FFD700; --gold-soft: #FFE8A0; --gold-deep: #CC9900;
  --gold-grad: linear-gradient(135deg, #FFD700 0%, #FFE88A 32%, #FFD700 52%, #CC9900 100%);
  --green: #4AFF9E; --blue: #4A9EFF; --purple: #A78BFA; --amber: #FFB84A; --danger: #FF6B6B;
  --display: 'Cinzel', serif; --body: 'DM Sans', sans-serif;
  --prose: 'Spectral', Georgia, serif; --mono: 'DM Mono', ui-monospace, Menlo, monospace;
  color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased;
}
.amx *, .amx *::before, .amx *::after { box-sizing: border-box; }

/* shared buttons / textarea the shell footer + text archetype use (from .csx kit) */
.amx .csx-btn { font-family: var(--body); font-weight: 600; font-size: 0.84rem; padding: 9px 15px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border-light); background: var(--surface2); color: var(--text); transition: all .15s;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.amx .csx-btn:hover { background: var(--surface3); border-color: rgba(255,215,0,0.4); }
.amx .csx-btn.gold { background: var(--gold-grad); color: #1a1205; border-color: rgba(255,215,0,0.7);
  box-shadow: 0 2px 14px rgba(255,180,50,0.22), inset 0 1px 0 rgba(255,255,255,0.4); }
.amx .csx-btn.gold:hover { filter: brightness(1.06); transform: translateY(-1px); }
.amx .csx-btn.sm { padding: 6px 11px; font-size: 0.76rem; }
.amx .csx-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; transform: none; }
.amx .csx-textarea { width: 100%; font-family: var(--body); font-size: 0.9rem; color: var(--text); padding: 11px 13px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border-light); resize: vertical; }
.amx .csx-textarea:focus { outline: none; border-color: rgba(255,215,0,0.5); }

/* ===================== the shared ability-modal shell ===================== */
.amx.am-modal { position: relative; isolation: isolate; display: flex; flex-direction: column; width: 100%; max-height: 86vh; overflow: hidden;
  border: 1px solid rgba(255,215,0,0.26); border-radius: 14px;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,180,60,0.07) 0%, transparent 55%), linear-gradient(180deg, #16131c 0%, #0d0c12 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 6px rgba(20,16,10,0.5), 0 0 0 7px rgba(255,215,0,0.1), 0 26px 70px -16px rgba(0,0,0,0.8), 0 60px 150px -40px rgba(255,140,40,0.18); }
.amx .am-amb { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; overflow: hidden; }
.amx .am-amb .vig { position: absolute; inset: 0; background: radial-gradient(ellipse 120% 84% at 50% 30%, transparent 52%, rgba(0,0,0,0.45)); }
.amx.am-modal > *:not(.am-amb):not(.am-corner) { position: relative; z-index: 1; }
/* Quiet inlaid bracket (S238 kit refresh) — concentric in the 14px modal radius
   (inset 7px → elbow 7px), 20px arms, z-0 below content. */
.amx .am-corner { position: absolute; inset: auto; width: 20px; height: 20px; z-index: 0; pointer-events: none; opacity: 0.6; }
.amx .am-corner::before { content: ""; position: absolute; inset: 0; border-top: 1.5px solid rgba(255,215,0,0.42); border-left: 1.5px solid rgba(255,215,0,0.42); border-top-left-radius: 7px; }
/* Use the `inset` shorthand (top right bottom left) so each corner sets ALL FOUR
   offsets explicitly — immune to any leaked left:0/inset:0 from the surrounding
   .modal-overlay/.ss scope (a leaked left would over-constrain the right corners
   and collapse them to the left, the "tr ornament on the left" bug). */
.amx .am-corner.am-tl { inset: 7px auto auto 7px; }
.amx .am-corner.am-tr { inset: 7px 7px auto auto; transform: scaleX(-1); }
.amx .am-corner.am-bl { inset: auto auto 7px 7px; transform: scaleY(-1); }
.amx .am-corner.am-br { inset: auto 7px 7px auto; transform: scale(-1,-1); }

.amx .am-head { display: flex; align-items: center; gap: 13px; padding: 20px 24px 16px; border-bottom: 1px solid var(--border); }
.amx .am-head .ico { width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  background: radial-gradient(circle at 40% 32%, color-mix(in oklab, var(--ac, var(--gold)) 26%, transparent), transparent 66%); border: 1px solid color-mix(in oklab, var(--ac, var(--gold)) 40%, transparent); }
.amx .am-title { font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: 0.4px;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold); }
.amx .am-clstag { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 1px; text-transform: uppercase; color: var(--ac, var(--gold-soft)); margin-top: 2px; }
.amx .am-close { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; cursor: pointer; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0;
  background: rgba(10,8,12,0.66); border: 1px solid rgba(255,215,0,0.28); color: var(--gold-soft); transition: all .15s; }
.amx .am-close:hover { background: rgba(255,180,50,0.18); color: #fff; }

.amx .am-body { padding: 18px 24px 22px; overflow-y: auto; min-height: 0; }
.amx .am-lead { font-family: var(--prose); font-size: 0.95rem; line-height: 1.55; color: var(--dim); margin: 0 0 16px; }

.amx .am-foot { display: flex; align-items: center; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border); background: rgba(0,0,0,0.22); }
.amx .am-foot .spacer { flex: 1; }
.amx .am-foot-note { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); }

/* ---- archetype: option CARDS ---- */
.amx .am-cards { display: flex; flex-direction: column; gap: 9px; }
.amx .am-cards.compact { flex-direction: row; flex-wrap: wrap; }
.amx .am-cards.compact .am-card { flex: 1; min-width: 120px; }
.amx .am-card { display: flex; align-items: flex-start; gap: 12px; text-align: left; width: 100%; padding: 13px 15px; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 11px; transition: all .14s; }
.amx .am-card:hover { border-color: var(--border-light); background: var(--surface3); transform: translateY(-1px); }
.amx .am-card .cmark { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--muted); flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; font-size: 0.66rem; color: transparent; transition: all .14s; }
.amx .am-card .cmeta { flex: 1; min-width: 0; }
.amx .am-card .cnm { font-family: var(--display); font-weight: 700; font-size: 0.98rem; color: var(--text); display: flex; align-items: baseline; gap: 9px; }
.amx .am-card .csub { font-family: var(--mono); font-size: 0.62rem; color: var(--gold-soft); }
.amx .am-card .cdesc { font-size: 0.82rem; color: var(--dim); line-height: 1.45; margin-top: 4px; }
.amx .am-card .carrow { align-self: center; color: var(--muted); font-size: 0.9rem; opacity: 0; transition: opacity .14s; }
.amx .am-card.fires:hover .carrow { opacity: 1; }
.amx .am-card.selected { border-color: rgba(255,215,0,0.5); background: rgba(255,215,0,0.06); box-shadow: inset 0 0 0 1px rgba(255,215,0,0.15); }
.amx .am-card.selected .cmark { border-color: var(--gold); background: var(--gold); color: #1a1205; }
.amx .am-card.danger .cnm { color: var(--danger); }
.amx .am-card.danger.selected { border-color: rgba(255,107,107,0.5); background: rgba(255,107,107,0.07); }
.amx .am-card.danger.selected .cmark { background: var(--danger); border-color: var(--danger); }

/* ---- archetype: resource POOL ---- */
.amx .am-pool-meter { display: flex; align-items: center; gap: 14px; padding: 13px 15px; border-radius: 11px; margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(255,215,0,0.06), transparent), var(--surface2); border: 1px solid rgba(255,215,0,0.2); }
.amx .am-pool-meter .big { font-family: var(--display); font-weight: 800; font-size: 1.7rem; color: var(--gold-soft); line-height: 1; }
.amx .am-pool-meter .pm-lab { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.amx .am-pool-meter .pm-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(0,0,0,0.4); border: 1px solid var(--border); overflow: hidden; }
.amx .am-pool-meter .pm-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #c79a3a, #FFE8A0); transition: width .25s; }
.amx .am-target { display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--border); margin-bottom: 7px; }
.amx .am-target .tnm { font-family: var(--display); font-weight: 700; font-size: 0.9rem; color: var(--text); }
.amx .am-target .tsub { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); margin-left: 6px; }
.amx .am-target .thp { margin-left: auto; font-family: var(--mono); font-size: 0.78rem; color: var(--dim); }
.amx .am-target .thp.low { color: var(--danger); } .amx .am-target .thp.down { color: var(--danger); font-weight: 700; }
.amx .am-stepper { display: flex; align-items: center; gap: 0; border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.amx .am-stepper button { width: 28px; height: 28px; background: var(--surface3); border: 0; color: var(--text); cursor: pointer; font-size: 0.95rem; transition: background .12s; }
.amx .am-stepper button:hover:not(:disabled) { background: rgba(255,215,0,0.15); }
.amx .am-stepper button:disabled { opacity: 0.3; cursor: not-allowed; }
.amx .am-stepper .val { min-width: 34px; text-align: center; font-family: var(--mono); font-size: 0.86rem; font-weight: 600; color: var(--gold-soft); }

/* ---- archetype: multi-select PICK ---- */
.amx .am-pickgroup { margin-bottom: 16px; }
.amx .am-pickhead { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; }
.amx .am-pickhead .pl { font-family: var(--display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--gold-soft); }
.amx .am-pickhead .pq { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); }
.amx .am-pickhead .pq.met { color: var(--green); }
.amx .am-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.amx .am-chip { font-family: var(--body); font-size: 0.84rem; color: var(--dim); padding: 7px 14px; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; transition: all .13s; }
.amx .am-chip:hover { border-color: var(--border-light); color: var(--text); }
.amx .am-chip.on { color: #1a1205; background: var(--gold-grad); border-color: rgba(255,215,0,0.7); font-weight: 600; box-shadow: 0 2px 10px rgba(255,180,50,0.2); }
.amx .am-chip.disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- archetype: SLOTS recovery ---- */
.amx .am-budget { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 11px; margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(74,158,255,0.07), transparent), var(--surface2); border: 1px solid rgba(74,158,255,0.24); }
.amx .am-budget .bnum { font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--blue); line-height: 1; }
.amx .am-budget .blab { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); }
.amx .am-budget .bover { color: var(--danger); }
.amx .am-slotrow { display: flex; align-items: center; gap: 13px; padding: 10px 13px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--border); margin-bottom: 7px; }
.amx .am-slotrow .slv { font-family: var(--display); font-weight: 700; font-size: 0.86rem; color: var(--gold-soft); min-width: 60px; }
.amx .am-slotpips { display: flex; gap: 5px; flex: 1; }
.amx .am-pip { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--border-light); background: transparent; cursor: pointer; transition: all .12s; }
.amx .am-pip.filled { background: var(--gold); border-color: transparent; box-shadow: 0 0 6px rgba(255,200,60,0.5); }
.amx .am-pip.spent { background: rgba(0,0,0,0.4); border-style: dashed; cursor: not-allowed; opacity: 0.5; }
.amx .am-pip.recovering { background: var(--blue); border-color: transparent; box-shadow: 0 0 7px rgba(74,158,255,0.6); }

/* ---- archetype: TARGET (option then token) ---- */
.amx .am-seg { display: flex; gap: 7px; margin-bottom: 16px; flex-wrap: wrap; }
.amx .am-segbtn { font-family: var(--body); font-weight: 600; font-size: 0.84rem; color: var(--dim); padding: 9px 15px; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; transition: all .13s; }
.amx .am-segbtn:hover { color: var(--text); border-color: var(--border-light); }
.amx .am-segbtn.on { color: var(--gold-soft); background: rgba(255,215,0,0.08); border-color: rgba(255,215,0,0.4); }
.amx .am-tokens-lab { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.amx .am-tokens { display: flex; flex-wrap: wrap; gap: 9px; }
.amx .am-token { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 11px 9px 9px; min-width: 78px; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 11px; transition: all .14s; }
.amx .am-token:hover { border-color: var(--border-light); transform: translateY(-2px); }
.amx .am-token .tok-av { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--gold-soft); background: radial-gradient(ellipse at 50% 30%, #2c2640, #15131d 72%); border: 1.5px solid rgba(255,215,0,0.4); }
.amx .am-token .tok-nm { font-size: 0.76rem; color: var(--text); }
.amx .am-token.on { border-color: rgba(255,215,0,0.55); background: rgba(255,215,0,0.06); box-shadow: 0 0 18px -5px rgba(255,200,60,0.5); }
.amx .am-token.on .tok-av { box-shadow: 0 0 12px rgba(255,170,50,0.5); }

/* ---- archetype: TEXT (reuses .csx-textarea + counter) ---- */
.amx .am-textwrap { position: relative; }
.amx .am-textcount { position: absolute; bottom: 9px; right: 12px; font-family: var(--mono); font-size: 0.62rem; color: var(--muted); pointer-events: none; }

/* ============================================================================
   COMBAT ACTION CONFIGURATOR reskin — Hearthlight language for the shared
   action modal (#combat-action-modal-overlay), driven by ~19 action types
   through openActionModal() in js/combat.js. CSS-ONLY, pure-visual (Tyler
   S241): every rule is scoped under #combat-action-modal-overlay and overrides
   the EXISTING live classes (.modal-*, .target-card*, .opt-*, .modal-toggle*) —
   no renamed classes, no new markup, no touched handlers. Design source:
   design_handoff_combat/combat-redesign/combat.css (.cmd-*/.cbt-*). Structural
   items the design implies but that need DOM/renderer changes (icon medallions,
   the right-aligned +hit/damage column, two-step flow, avatars, spotlight
   resolution) are DEFERRED to the eventual combat island — not attempted here.
   ========================================================================== */

/* ---- backdrop: deepen + blur to focus the stage ---- */
#combat-action-modal-overlay.modal-overlay {
  background: rgba(4, 3, 6, 0.76);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}

/* ---- shell: gradient body + gold-tinted border + cinematic glow ---- */
#combat-action-modal-overlay .modal {
  background: linear-gradient(180deg, #16151d, #100f15);
  border: 1px solid rgba(255, 215, 0, 0.28);
  border-radius: var(--radius);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7), 0 0 40px rgba(255, 170, 50, 0.12);
  position: relative;
  /* overflow:hidden clips the red top-charge + corners inside the radius, but it
     also killed the base .modal's overflow-y:auto — a Wizard's spell list is the
     first picker tall enough to overrun the 80vh cap (S250 live: Haste's slot
     picker + Cast were unreachable). Flex column: the shell stays clipped, the
     BODY scrolls, and the header + footer (the Cast button) stay pinned. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#combat-action-modal-overlay .modal-body {
  overflow-y: auto;
  min-height: 0;      /* flex children default to min-height:auto — never shrinks */
  flex: 1 1 auto;
  scrollbar-width: thin;
}
#combat-action-modal-overlay .modal-header,
#combat-action-modal-overlay .modal-footer { flex: 0 0 auto; }
/* the persistent thin combat-red charge along the top edge (mirrors .cbt-center::before) */
#combat-action-modal-overlay .modal::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 4;
  background: linear-gradient(90deg, transparent, var(--danger), transparent); opacity: 0.7;
}

/* ---- header: gold-gradient Cinzel title (the emoji stays inline in the text) ---- */
#combat-action-modal-overlay .modal-header {
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border);
}
#combat-action-modal-overlay .modal-header h2 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; font-size: 1.1rem; margin: 0;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
#combat-action-modal-overlay .modal-close {
  width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; font-size: 0.9rem; line-height: 1;
  background: var(--surface2); border: 1px solid var(--border-light); color: var(--text-dim);
  transition: background 0.14s, color 0.14s;
}
#combat-action-modal-overlay .modal-close:hover { background: var(--surface3); color: var(--text); }

/* ---- body + section labels ---- */
#combat-action-modal-overlay .modal-body { padding: 16px 20px; }
#combat-action-modal-overlay .modal-section-label {
  font-size: 0.66rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 16px 0 7px;
}
#combat-action-modal-overlay .modal-section-label:first-child { margin-top: 0; }

/* ---- option cards (weapon / spell / item / ability pickers) ---- */
#combat-action-modal-overlay .modal-option-btn {
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color 0.14s, background 0.14s, transform 0.14s;
}
#combat-action-modal-overlay .modal-option-btn:hover {
  border-color: var(--border-light); background: var(--surface3); transform: translateY(-1px);
}
#combat-action-modal-overlay .modal-option-btn.selected {
  border-color: rgba(255, 215, 0, 0.55); background: rgba(255, 215, 0, 0.08);
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.3);
}
#combat-action-modal-overlay .modal-option-btn.selected:hover { transform: none; }
#combat-action-modal-overlay .modal-option-btn .opt-title {
  font-family: var(--font-display); font-weight: 700; color: var(--text);
}
#combat-action-modal-overlay .modal-option-btn .opt-meta { color: var(--text-dim); }

/* ---- toggles (Reckless / Power Attack / Overchannel / multi-target / slot / charges) ---- */
#combat-action-modal-overlay .modal-toggle {
  border-radius: 999px; transition: border-color 0.14s, background 0.14s, color 0.14s;
}
#combat-action-modal-overlay .modal-toggle:hover { border-color: var(--gold-soft); color: var(--text); }
#combat-action-modal-overlay .modal-toggle.on {
  background: rgba(255, 215, 0, 0.1); color: var(--gold-soft);
  border-color: rgba(255, 215, 0, 0.4);
}

/* ---- target cards: keep the live grid + structure, adopt the combat charge ---- */
#combat-action-modal-overlay .target-card {
  background: var(--surface2); border-radius: var(--radius-sm);
  transition: border-color 0.14s, background 0.14s, transform 0.14s;
}
#combat-action-modal-overlay .target-card:hover { transform: translateY(-1px); }
#combat-action-modal-overlay .target-card.enemy:hover { border-color: rgba(255, 107, 107, 0.5); }
#combat-action-modal-overlay .target-card-name { font-family: var(--font-display); }
/* enemy HP reads red, ally/self reads green — matches the design .hp-fill split */
#combat-action-modal-overlay .target-card-hp-fill {
  background: linear-gradient(90deg, #2fd97f, var(--success));
}
#combat-action-modal-overlay .target-card.enemy .target-card-hp-fill {
  background: linear-gradient(90deg, #b23b3b, var(--combat-red));
}
#combat-action-modal-overlay .target-card.enemy .target-card-hp-fill.bloodied,
#combat-action-modal-overlay .target-card.enemy .target-card-hp-fill.critical {
  background: linear-gradient(90deg, #8a1f1f, var(--combat-red));
}
/* enemy picked → danger-red lock (mirrors .cmd-target.picked); ally/self keep gold */
#combat-action-modal-overlay .target-card.enemy.selected {
  border-color: var(--combat-red);
  background: rgba(255, 45, 45, 0.09);
  box-shadow: 0 0 0 2px rgba(255, 45, 45, 0.32);
}
#combat-action-modal-overlay .target-card.enemy.selected .target-card-check {
  background: var(--combat-red); color: #1a0606;
}

/* ---- footer: keep the gold primary CTA, quiet the cancel ---- */
#combat-action-modal-overlay .modal-footer { padding-top: 14px; border-top: 1px solid var(--border); }


/* === Seed Your World island (.sws) — canon Slice 2 S243; reskin S244 ========
   Full-step world-setup takeover (Customize path), ported from the
   Claude-Design handoff (design_handoff_seedworld/seedworld/seed.css, Tabs
   direction; ledger/forge comparison layouts + tweaks-panel intentionally not
   shipped). Handoff scope `.sw` re-prefixed → `.sws` (`.sw` collides with the
   .cl-devtoggle .sw switch); keyframes namespaced sws*. Segmented
   quest-length, example chips, chapter tints, whisper, ambient motion all
   baked ON. Ambient/entrance motion gated on prefers-reduced-motion here and
   on the S240 accessibility settings via the global html[data-reduce-motion]
   / html[data-reduced-flash] kill rules (style.css a11y block). House fonts
   (Cinzel / DM Sans / Spectral / DM Mono) are already loaded app-wide. */
.sws {
  --bg: #08070a;
  --bg2: #0c0b10;
  --surface: #121117;
  --surface2: #1a1922;
  --surface3: #23222e;
  --border: rgba(255, 255, 255, 0.07);
  --border-light: rgba(255, 255, 255, 0.13);
  --text: #f1eef5;
  --text-dim: rgba(241, 238, 245, 0.62);
  --muted: rgba(241, 238, 245, 0.34);
  --gold: #FFD700;
  --gold-soft: #FFE8A0;
  --gold-deep: #B8860B;
  --gold-grad: linear-gradient(135deg, #FFD700 0%, #FFE88A 32%, #FFD700 52%, #CC9900 100%);
  --green: #4AFF9E;
  --amber: #FFB84A;
  --purple: #A78BFA;
  --blue: #4A9EFF;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 7px;
  --font-display: 'Cinzel', serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-read: 'Spectral', Georgia, serif;
  --mono: 'DM Mono', ui-monospace, Menlo, monospace;

  /* live adaptation: the island mounts into a body-appended host, so the
     takeover rides fixed+z-index (the S243 overlay contract) rather than the
     prototype's absolute-in-shell positioning. */
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}
.sws *, .sws *::before, .sws *::after { box-sizing: border-box; }
.sws ::-webkit-scrollbar { width: 9px; height: 9px; }
.sws ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 6px; }
.sws ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); }
.sws ::-webkit-scrollbar-track { background: transparent; }

/* =========================================================== ambient backdrop */
.sws-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sws-bg .glow {
  position: absolute; left: 50%; top: -12%; width: 130vmax; height: 80vmax; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 160, 50, 0.12), rgba(255, 140, 40, 0.03) 38%, transparent 64%);
  animation: swsAura 8s ease-in-out infinite;
}
.sws-bg .glow2 {
  position: absolute; right: -12%; bottom: -22%; width: 72vmax; height: 72vmax;
  background: radial-gradient(circle at 50% 50%, rgba(74, 158, 255, 0.055), transparent 60%);
}
.sws-bg .vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 34%, transparent 40%, rgba(0, 0, 0, 0.6) 100%); }
.sws-bg .grain { position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.9'/></svg>"); }
@keyframes swsAura { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }

/* drifting embers — sparse, slow, capped opacity. Also frozen by the global
   html[data-reduced-flash] [class*="ember"] rule (S240) and reduce-motion. */
.sws-ember { position: fixed; bottom: -12px; width: 2px; height: 2px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 205, 115, 0.9), rgba(255, 150, 50, 0) 70%);
  box-shadow: 0 0 6px rgba(255, 180, 60, 0.55);
  animation: swsEmber linear infinite; opacity: 0; z-index: 0; pointer-events: none; }
@keyframes swsEmber {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.75; } 88% { opacity: 0.4; }
  100% { transform: translateY(-96vh) translateX(var(--drift, 22px)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .sws-ember { display: none; } }
html[data-reduced-flash="1"] .sws-ember { display: none; }
html[data-reduce-motion="1"] .sws-ember { display: none; }

/* =========================================================== top bar */
.sws-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px;
  padding: 15px 28px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(20, 14, 8, 0.92), rgba(8, 7, 10, 0.86));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.sws-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.0rem; letter-spacing: 1.2px;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  white-space: nowrap; }
.sws-brand .sm { font-family: var(--font-body); -webkit-text-fill-color: var(--muted); color: var(--muted);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; margin-left: 10px; }
.sws-spacer { flex: 1; }
.sws-rolepill { font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim); padding: 6px 13px;
  border: 1px solid var(--border-light); border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.sws-rolepill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.55); }

/* =========================================================== stage / header */
.sws-stage { position: relative; z-index: 1; flex: 1 0 auto; display: flex; flex-direction: column; }
.sws-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 42px 32px 44px; }

.sws-head { text-align: center; max-width: 760px; margin: 0 auto 30px;
  animation: swsRise .6s ease-out backwards; }
.sws-eyebrow { font-family: var(--mono); font-size: 0.72rem; color: var(--gold-soft); letter-spacing: 4px;
  text-transform: uppercase; opacity: 0.9; display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; }
.sws-eyebrow::before, .sws-eyebrow::after { content: ""; width: 46px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.5), transparent); }
.sws-eyebrow .star { width: 8px; height: 8px; transform: rotate(45deg); background: var(--gold);
  box-shadow: 0 0 8px rgba(255, 200, 60, 0.7); flex-shrink: 0; }
.sws-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.3rem, 4vw, 3.1rem);
  letter-spacing: 1.5px; margin: 14px 0 12px; background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold);
  filter: drop-shadow(0 2px 20px rgba(255, 180, 60, 0.28)); }
.sws-sub { font-family: var(--font-read); font-style: italic; color: var(--text-dim); font-size: 1.08rem;
  line-height: 1.55; margin: 0 auto; max-width: 60ch; text-wrap: pretty; }
.sws-sub b { font-style: normal; color: var(--gold-soft); font-weight: 600; }

/* ornament divider (line · diamond · line) */
.sws-orn { display: flex; align-items: center; justify-content: center; gap: 14px; width: 300px;
  margin: 22px auto 0; }
.sws-orn .seg { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.4), transparent); }
.sws-orn .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 215, 0, 0.55); }
.sws-orn .dia { width: 8px; height: 8px; transform: rotate(45deg); background: var(--gold);
  box-shadow: 0 0 10px rgba(255, 200, 60, 0.75); }

/* =========================================================== chapter tabs */
.sws-tabs { display: flex; justify-content: center; gap: 10px; margin: 26px auto 30px; flex-wrap: wrap;
  animation: swsRise .6s ease-out .08s backwards;
  position: sticky; top: 54px; z-index: 12; padding: 10px 8px;
  background: linear-gradient(180deg, rgba(8, 7, 10, 0.88), rgba(8, 7, 10, 0.72));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 0 0 12px 12px; }
.sws-tab { position: relative; font-family: var(--font-display); font-weight: 600; font-size: 0.98rem;
  letter-spacing: 0.6px; color: var(--text-dim);
  background: linear-gradient(180deg, #16151d, #100f15); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 11px 18px 11px 14px; cursor: pointer; transition: all .16s ease;
  display: inline-flex; align-items: center; gap: 10px; }
.sws-tab:hover { color: var(--text); border-color: rgba(255, 215, 0, 0.32); }
.sws-tab .rn { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 1px;
  color: var(--muted); border: 1px solid var(--border-light); border-radius: 5px; padding: 1px 6px; transition: all .16s; }
.sws-tab .cnt { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex;
  align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  background: rgba(255, 215, 0, 0.12); color: var(--gold-soft); border: 1px solid rgba(255, 215, 0, 0.22); }
.sws-tab.active { color: var(--gold); border-color: rgba(255, 215, 0, 0.6);
  background:
    radial-gradient(ellipse 100% 120% at 50% -30%, rgba(255, 180, 60, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(255, 180, 60, 0.05), rgba(255, 140, 40, 0.02));
  box-shadow: inset 0 0 18px rgba(255, 170, 40, 0.1), 0 0 26px -8px rgba(255, 170, 40, 0.4);
  text-shadow: 0 0 14px rgba(255, 200, 60, 0.35); }
.sws-tab.active .rn { color: var(--gold-soft); border-color: rgba(255, 215, 0, 0.4); background: rgba(255, 215, 0, 0.06); }

/* chapter glyph — tint-aware (per-chapter --chap set inline; gold fallback) */
.sws-glyph { font-size: 0.92rem; line-height: 1; color: var(--chap, var(--gold-soft));
  filter: drop-shadow(0 0 5px rgba(255, 180, 60, 0.3)); flex-shrink: 0; }
.sws-glyph.big { font-size: 1.05rem; }

/* =========================================================== workspace (tabs) */
.sws-work { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; align-items: start;
  animation: swsRise .5s ease-out .14s backwards; }
.sws-pane { min-width: 0; }

/* pane intro line */
.sws-hint { font-family: var(--font-read); font-style: italic; color: var(--text-dim); font-size: 1.0rem;
  line-height: 1.5; margin: 0 0 20px; max-width: 62ch; text-wrap: pretty; }

/* =========================================================== fields (shared) */
.sws-field { margin-bottom: 22px; }
.sws-field:last-child { margin-bottom: 0; }
.sws-label { display: flex; align-items: baseline; gap: 10px; margin-bottom: 11px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; letter-spacing: 2.5px;
  text-transform: uppercase; color: rgba(255, 215, 0, 0.86); }
.sws-label::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); flex-shrink: 0;
  background: rgba(255, 215, 0, 0.7); box-shadow: 0 0 6px rgba(255, 200, 60, 0.55); align-self: center; }
.sws-label .opt { font-family: var(--font-read); font-style: italic; font-weight: 400; font-size: 0.82rem;
  letter-spacing: 0; text-transform: none; color: var(--muted); }

.sws-input, .sws-textarea, .sws-select {
  width: 100%; font-family: var(--font-body); font-size: 0.98rem; color: var(--text);
  background: linear-gradient(180deg, rgba(255, 180, 60, 0.025), transparent 42%), #100f15;
  border: 1px solid var(--border-light); border-radius: var(--radius-xs);
  padding: 13px 15px; transition: border-color .18s, box-shadow .18s, background .18s; outline: none; }
.sws-input::placeholder, .sws-textarea::placeholder { color: rgba(241, 238, 245, 0.30); font-style: italic; }
.sws-input:hover, .sws-textarea:hover, .sws-select:hover { border-color: rgba(255, 215, 0, 0.26); }
.sws-input:focus, .sws-textarea:focus, .sws-select:focus {
  border-color: rgba(255, 215, 0, 0.62);
  box-shadow: 0 0 0 3px rgba(255, 180, 60, 0.08), inset 0 0 14px rgba(255, 170, 40, 0.05);
  background: linear-gradient(180deg, rgba(255, 180, 60, 0.045), transparent 42%), #14121a; }
.sws-textarea { resize: vertical; min-height: 96px; font-family: var(--font-read); font-style: italic;
  font-size: 1.02rem; line-height: 1.55; }
.sws-textarea.tall { min-height: 128px; }
.sws-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 42px;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23FFD700' d='M1 1l5 5 5-5'/></svg>"),
    linear-gradient(180deg, rgba(255, 180, 60, 0.025), transparent 42%);
  background-repeat: no-repeat, no-repeat; background-position: right 15px center, center; background-color: #100f15; }
.sws-select option { background: #14131a; color: var(--text); }

/* repeatable rows */
.sws-rows { display: flex; flex-direction: column; gap: 12px; }
.sws-row { position: relative; display: grid; gap: 12px; align-items: start; }
.sws-row.quest { grid-template-columns: minmax(0, 1fr) 158px minmax(0, 1.5fr) 34px; }
.sws-row.loc { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.5fr) 34px; }
.sws-row.single { grid-template-columns: minmax(0, 1fr) 34px; }
.sws-row .sws-input { padding: 12px 14px; }

/* quest-length segmented control */
.sws-seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--radius-xs);
  background: #100f15; border: 1px solid var(--border-light); }
.sws-seg button { flex: 1; font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.4px;
  color: var(--text-dim); background: none; border: 0; border-radius: 5px; padding: 8px 6px; cursor: pointer;
  transition: all .14s; white-space: nowrap; }
.sws-seg button:hover { color: var(--text); }
.sws-seg button.on { color: #1a1205; background: var(--gold-grad); box-shadow: 0 2px 10px -3px rgba(255, 190, 60, 0.5);
  font-weight: 700; }

/* start-location toggle */
.sws-start { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
  padding: 11px 13px; border: 1px solid var(--border-light); border-radius: var(--radius-xs);
  background: #100f15; transition: all .15s; white-space: nowrap; align-self: stretch; }
.sws-start input { position: absolute; opacity: 0; width: 0; height: 0; }
.sws-start .rad { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--muted);
  display: inline-grid; place-items: center; transition: all .15s; flex-shrink: 0; }
.sws-start .rad::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  transform: scale(0); transition: transform .15s; box-shadow: 0 0 8px rgba(255, 200, 60, 0.7); }
.sws-start .lab { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted); transition: color .15s; }
.sws-start:hover { border-color: rgba(255, 215, 0, 0.3); }
.sws-start:hover .rad { border-color: var(--gold-soft); }
.sws-start.on { border-color: rgba(255, 215, 0, 0.5); background: rgba(255, 215, 0, 0.06); }
.sws-start.on .rad { border-color: var(--gold); }
.sws-start.on .rad::after { transform: scale(1); }
.sws-start.on .lab { color: var(--gold-soft); }

/* row remove button */
.sws-del { width: 34px; height: 42px; border: 1px solid transparent; border-radius: var(--radius-xs);
  background: none; color: var(--muted); cursor: pointer; font-size: 1.05rem; line-height: 1; transition: all .14s;
  display: inline-flex; align-items: center; justify-content: center; align-self: start; }
.sws-del:hover { color: var(--danger, #FF6B6B); background: rgba(255, 107, 107, 0.08);
  border-color: rgba(255, 107, 107, 0.25); }
.sws-del:disabled { opacity: 0; pointer-events: none; }

/* add-another button */
.sws-add { margin-top: 14px; align-self: flex-start; font-family: var(--font-body); font-weight: 600;
  font-size: 0.86rem; letter-spacing: 0.4px; color: var(--gold-soft);
  background: rgba(255, 215, 0, 0.05); border: 1px dashed rgba(255, 215, 0, 0.3); border-radius: var(--radius-xs);
  padding: 10px 16px; cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: 8px; }
.sws-add:hover { background: rgba(255, 215, 0, 0.1); border-color: rgba(255, 215, 0, 0.5); color: var(--gold); }
.sws-add .pl { font-family: var(--mono); font-size: 1rem; line-height: 1; }

/* at-cap full line (S244 — server caps mirrored client-side; replaces the
   add/plant affordance when CANON_LIMITS is reached) */
.sws-fullline { font-family: var(--font-read); font-style: italic; font-size: 0.92rem; color: var(--gold-soft);
  opacity: 0.85; margin: 14px 0 0; padding: 10px 2px 0; border-top: 1px solid var(--border); text-wrap: pretty; }

/* example seed chips */
.sws-egs { margin: 0 0 18px; }
.sws-egs-lab { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 9px; display: flex; align-items: center; gap: 8px; }
.sws-egs-lab::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.sws-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sws-chip { font-family: var(--font-body); font-size: 0.82rem; color: var(--text-dim);
  background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px;
  cursor: pointer; transition: all .14s; white-space: nowrap; }
.sws-chip:hover { color: var(--gold-soft); border-color: rgba(255, 215, 0, 0.35);
  background: rgba(255, 215, 0, 0.06); transform: translateY(-1px); }
.sws-chip .plus { color: var(--muted); margin-right: 5px; transition: color .14s; }
.sws-chip:hover .plus { color: var(--gold); }

/* =========================================================== chip-entry (Wishes) */
.sws-chiprow { display: flex; gap: 10px; }
.sws-chiprow .sws-input { flex: 1; min-width: 0; }
.sws-chipadd { flex-shrink: 0; font-family: var(--font-body); font-weight: 600; font-size: 0.86rem;
  color: var(--gold-soft); background: rgba(255, 215, 0, 0.05); border: 1px dashed rgba(255, 215, 0, 0.3);
  border-radius: var(--radius-xs); padding: 0 16px; cursor: pointer; transition: all .15s; white-space: nowrap; }
.sws-chipadd:hover:not(:disabled) { background: rgba(255, 215, 0, 0.1); border-color: rgba(255, 215, 0, 0.5); color: var(--gold); }
.sws-chipadd:disabled { opacity: 0.35; cursor: default; }
.sws-wishes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.sws-wish { display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  font-family: var(--font-read); font-style: italic; font-size: 0.9rem; line-height: 1.35; color: var(--text);
  background: rgba(255, 215, 0, 0.05); border: 1px solid rgba(255, 215, 0, 0.25); border-radius: 999px;
  padding: 7px 9px 7px 14px; animation: swsRise .25s ease-out backwards; }
.sws-wish button { width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.06);
  color: var(--muted); font-size: 0.85rem; line-height: 1; cursor: pointer; flex-shrink: 0;
  display: inline-grid; place-items: center; transition: all .14s; }
.sws-wish button:hover { background: rgba(255, 107, 107, 0.15); color: #FF6B6B; }

/* =========================================================== DM whisper */
.sws-whisper { padding: 14px 18px 15px; border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 180, 60, 0.03), transparent); }
.sws-whisper p { font-family: var(--font-read); font-style: italic; font-size: 0.92rem; line-height: 1.55;
  color: var(--text-dim); margin: 0 0 7px; text-wrap: pretty; }
.sws-whisper .who { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(255, 215, 0, 0.55); }

/* =========================================================== seed constellation */
.sws-const { display: block; width: 100%; height: 50px; }
.sws-const line { stroke: rgba(255, 215, 0, 0.17); stroke-width: 0.8; }
.sws-const circle { fill: #FFE8A0; }
.sws-const circle.halo { fill: rgba(255, 200, 60, 0.22); }
.sws-const text { font-family: var(--mono); font-size: 8.5px; letter-spacing: 2px; text-transform: uppercase;
  fill: var(--muted); text-anchor: middle; }
.sws-codex-const { padding: 4px 12px 0; border-bottom: 1px solid var(--border); }

/* =========================================================== living codex (rail) */
.sws-codex { position: sticky; top: 84px; background:
    linear-gradient(180deg, rgba(255, 215, 0, 0.035), rgba(255, 215, 0, 0) 40%), var(--surface);
  border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 18px 50px -30px rgba(0, 0, 0, 0.8); }
.sws-codex-hd { padding: 16px 18px 13px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sws-codex-hd h3 { font-family: var(--font-display); font-weight: 600; font-size: 0.96rem; letter-spacing: 1px;
  color: var(--gold-soft); margin: 0; }
.sws-codex-count { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); }
.sws-codex-body { padding: 8px 18px 18px; max-height: min(560px, 62vh); overflow-y: auto; }
.sws-codex-empty { font-family: var(--font-read); font-style: italic; color: var(--muted); font-size: 0.94rem;
  line-height: 1.5; padding: 22px 4px; text-align: center; text-wrap: pretty; }
.sws-cx-group { margin-top: 16px; }
.sws-cx-group:first-child { margin-top: 8px; }
.sws-cx-glab { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 7px; }
.sws-cx-glab .n { color: var(--gold-soft); }
.sws-cx-item { display: flex; gap: 9px; padding: 6px 0; border-top: 1px solid var(--border); }
.sws-cx-item:first-of-type { border-top: 0; }
.sws-cx-ic { color: var(--gold); font-size: 0.82rem; line-height: 1.5; flex-shrink: 0; opacity: 0.85; }
.sws-cx-tx { min-width: 0; }
.sws-cx-nm { font-family: var(--font-body); font-size: 0.86rem; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sws-cx-nm .term { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--border-light); border-radius: 4px; padding: 0 5px; }
.sws-cx-nm .star { color: var(--gold); font-size: 0.7rem; }
.sws-cx-ol { font-family: var(--font-read); font-style: italic; font-size: 0.82rem; color: var(--text-dim);
  line-height: 1.4; margin-top: 2px; text-wrap: pretty; }
.sws-cx-prose { font-family: var(--font-read); font-style: italic; font-size: 0.85rem; color: var(--text-dim);
  line-height: 1.5; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sws-cx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sws-cx-tag { font-family: var(--font-body); font-size: 0.78rem; color: var(--text-dim);
  background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }

/* =========================================================== footer */
.sws-footer { position: sticky; bottom: 0; z-index: 15; border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(8, 7, 10, 0.84), rgba(8, 7, 10, 0.97));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 15px 32px; display: flex; align-items: center; gap: 22px; }
.sws-footer-summary { flex: 1; min-width: 0; display: flex; align-items: center; gap: 13px; }
.sws-footer-seal { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(255, 220, 150, 0.22), rgba(255, 180, 60, 0.05) 60%, transparent 72%);
  border: 1px solid rgba(255, 215, 0, 0.3); color: var(--gold-soft); font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; box-shadow: inset 0 0 12px rgba(255, 170, 40, 0.15); }
.sws-footer-text { min-width: 0; }
.sws-footer-lab { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.sws-footer-nm { font-family: var(--font-body); font-size: 0.98rem; color: var(--text); margin-top: 2px; }
.sws-footer-nm b { color: var(--gold-soft); font-weight: 600; }
.sws-footer-cta { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }
.sws-skip { font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; color: var(--text-dim);
  background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.2); padding: 10px 6px; transition: color .15s; white-space: nowrap; }
.sws-skip:hover { color: var(--text); }
.sws-seed { font-family: var(--font-body); font-weight: 700; font-size: 1.0rem; letter-spacing: 0.6px;
  padding: 14px 28px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent;
  background: var(--gold-grad); color: #1a1205; box-shadow: 0 6px 24px -8px rgba(255, 200, 60, 0.55);
  transition: filter .15s, transform .15s, box-shadow .15s; display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap; position: relative; overflow: hidden; }
.sws-seed .arrow { transition: transform .2s; }
.sws-seed:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.sws-seed:hover:not(:disabled) .arrow { transform: translateX(4px); }
.sws-seed:disabled { background: var(--surface2); color: var(--muted); box-shadow: none; cursor: not-allowed; border-color: var(--border-light); }

/* =========================================================== misc / motion */
@keyframes swsRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
/* chapter-switch crossfade — ends at the natural state (capture/print safe) */
.sws-fadein { animation: swsPane .18s ease-out; }
@keyframes swsPane { from { opacity: 0; transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) {
  .sws-fadein { animation: none; }
  .sws-head, .sws-tabs, .sws-work { animation: none; }
  .sws-bg .glow { animation: none; }
}

/* =========================================================== responsive */
@media (max-width: 1080px) {
  .sws-work { grid-template-columns: minmax(0, 1fr); }
  /* narrow: the codex becomes a slim pulse card (count + constellation + whisper) above the pane */
  .sws-codex { position: static; order: -1; }
  .sws-codex-body { display: none; }
  .sws-codex-const { border-bottom: 0; }
}
@media (max-width: 860px) {
  .sws-row.quest, .sws-row.loc {
    grid-template-columns: 1fr; gap: 9px; padding: 12px;
    border: 1px solid var(--border); border-radius: var(--radius-xs); background: rgba(255, 255, 255, 0.015); }
  .sws-row.quest .sws-name, .sws-row.loc .sws-name { padding-right: 38px; }
  .sws-row .sws-del { position: absolute; top: 7px; right: 7px; width: 28px; height: 28px; }
}
@media (max-width: 640px) {
  .sws-wrap { padding: 28px 18px 36px; }
  .sws-footer { flex-wrap: wrap; }
  .sws-footer-cta { width: 100%; justify-content: space-between; }
}

/* short viewports (preview windows, small laptops) — condense the ceremony,
   keep the form. The full ceremony returns on tall screens. */
@media (max-height: 820px) {
  .sws-wrap { padding-top: 24px; }
  .sws-head { margin-bottom: 18px; }
  .sws-title { font-size: 2rem; margin: 10px 0 8px; }
  .sws-sub { font-size: 0.98rem; }
  .sws-orn { margin-top: 13px; }
  .sws-tabs { margin: 16px auto 20px; }
  .sws-footer { padding: 10px 32px; }
  .sws-footer-seal { width: 36px; height: 36px; font-size: 0.92rem; }
  .sws-codex { top: 72px; }
  .sws-codex-body { max-height: min(400px, 46vh); }
}
@media (max-height: 640px) {
  .sws-eyebrow, .sws-orn { display: none; }
  .sws-title { font-size: 1.55rem; margin: 2px 0 6px; }
  .sws-sub { font-size: 0.9rem; }
  .sws-hint { margin-bottom: 13px; }
  .sws-tabs { top: 50px; }
}
/* (S245: the .gvs gathering card CSS was retired — the ceremony is the initstage island, src/initstage/init.css) */

/* ============================================================================
   NARRATIVE FEED — "War Table" grammar (S246, Direction B locked)
   ============================================================================
   The one grammar every feed output classifies into (the design_handoff_
   feedredesign spec): VOICE full-width · ACTION sided (ally RIGHT / enemy
   LEFT) · TABLE centered. Values ported verbatim from feed-directions.css
   Direction B at the locked settings (party right · compact · badge outcomes
   · tag icons). Fresh `nf-` prefix so the grammar coexists with the legacy
   treatments while the renderers convert; legacy rules prune at slice 5.
   Custom-property flow from JS (inline style): --tcol (roll type), --wcol
   (actor), --pcolor (player), --iocol (init row), --rcol (capsule tone).
   ---------------------------------------------------------------------- */
#narrative-feed { --nf-danger: #FF6B6B; }
/* Feed children must NEVER flex-shrink — the feed scrolls instead. The flex
   spec zeroes the min-height:auto floor for any item with overflow other than
   visible, so once feed content exceeded the box, flex-shrink squashed the two
   overflow:hidden elements (.nf-egroup / .nf-init-card) to their 2px borders —
   the "thin red lines where the enemy turns should be" launch-night bug. The
   legacy feed never hit this because no legacy child carried overflow:hidden. */
#narrative-feed > * { flex-shrink: 0; }

/* side anchoring — THE rule */
.nf-ally  { align-self: flex-end; }
.nf-enemy { align-self: flex-start; }
.nf-world { align-self: stretch; }
.nf-table { align-self: center; }

/* --- VOICE · DM card — soft gold hairline --- */
.nf-w-card {
  background: linear-gradient(135deg, rgba(255,215,0,.05), rgba(255,215,0,.015) 60%);
  border: 1px solid rgba(255,215,0,.14);
  border-radius: var(--radius-sm);
  padding: 17px 21px;
}
.nf-w-label {
  font-family: var(--font-display); font-size: .7rem; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--gold-soft); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.nf-w-label::before { content: "✦"; color: var(--gold); }
.nf-w-prose p { font-family: var(--font-read); font-size: 1rem; line-height: 1.72; color: rgba(241,238,245,.9); margin: 0 0 12px; text-wrap: pretty; }
.nf-w-prose p:last-child { margin-bottom: 0; }
.nf-w-prose .charname { color: var(--agua); font-weight: 600; font-family: var(--font-body); font-size: .95em; cursor: pointer; }
.nf-w-prose em { color: var(--gold-soft); }
/* notice ¶ — rewards/alerts inside prose (ported from the .ss reskin) */
.nf-w-prose .nf-notice {
  font-style: italic; color: var(--gold-soft);
  border-left: 2px solid rgba(255,215,0,.3); padding-left: 14px;
}

/* --- VOICE · NPC dialogue — amber card w/ avatar --- */
.nf-npc-card {
  display: flex; gap: 12px; padding: 14px 16px;
  background: linear-gradient(120deg, rgba(255,184,74,.07), transparent 70%);
  border: 1px solid rgba(255,184,74,.2); border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm);
}
.nf-npc-card .av {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: var(--warning); color: #1a1000;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
}
.nf-npc-card .av img { width: 100%; height: 100%; object-fit: cover; }
.nf-npc-card .npc-name { font-family: var(--font-display); font-weight: 700; font-size: .84rem; letter-spacing: .5px; text-transform: uppercase; color: var(--warning); }
.nf-npc-card .npc-name.journal-link { cursor: pointer; }
.nf-npc-card .emotion { font-style: italic; color: var(--muted); font-size: .76rem; margin-left: 6px; }
.nf-npc-card .npc-text { font-family: var(--font-read); font-size: .98rem; line-height: 1.6; color: var(--text); margin-top: 4px; }

/* --- ACTION · player chip — party side --- */
.nf-p-chip {
  max-width: 78%;
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 15px;
  background: color-mix(in oklab, var(--pcolor) 7%, transparent);
  border: 1px solid color-mix(in oklab, var(--pcolor) 26%, transparent);
  border-radius: var(--radius-sm) var(--radius-sm) 4px var(--radius-sm);
}
.nf-p-chip .av {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--pcolor); color: #0a0a0f;
  font-family: var(--font-display); font-weight: 700; font-size: .68rem;
}
.nf-p-chip .av img { width: 100%; height: 100%; object-fit: cover; }
.nf-p-chip .pname { font-size: .72rem; font-weight: 700; color: var(--pcolor); letter-spacing: .3px; margin-bottom: 2px; cursor: pointer; }
.nf-p-chip .ptext { font-size: .88rem; line-height: 1.5; color: var(--text-dim); }

/* --- ACTION · dice pill — compact card row, click to expand math --- */
.nf-roll { max-width: 88%; cursor: pointer; user-select: none; }
.nf-roll .r-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--tcol);
  border-radius: var(--radius-xs);
  transition: border-color .15s ease, background .15s ease;
}
.nf-roll:hover .r-card { background: var(--surface2); }
.nf-roll .r-main { display: flex; align-items: center; gap: 9px; padding: 8px 12px; flex-wrap: wrap; }
.nf-roll .r-av {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--wcol, var(--surface3)); color: #0a0a0f;
  font-family: var(--font-display); font-weight: 700; font-size: .58rem;
}
.nf-roll .r-av img { width: 100%; height: 100%; object-fit: cover; }
.nf-roll .r-av.foe { background: var(--surface3); color: var(--nf-danger); border: 1px solid rgba(255,107,107,.4); }
.nf-roll .r-who { font-family: var(--font-body); font-weight: 700; font-size: .78rem; color: var(--wcol, var(--text)); white-space: nowrap; }
.nf-roll .r-act { font-size: .82rem; color: var(--text-dim); flex: 1; min-width: 0; }
.nf-roll .r-tot { font-family: var(--mono); font-size: .95rem; font-weight: 500; color: var(--tcol); }
.nf-roll .r-vs { font-family: var(--mono); font-size: .68rem; color: var(--muted); white-space: nowrap; }
.nf-roll .r-car { font-size: .55rem; color: var(--muted); transition: transform .18s ease; }
.nf-roll.open .r-car { transform: rotate(180deg); }
.nf-roll .r-math {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 12px 9px;
  border-top: 1px dashed var(--border);
  font-family: var(--mono); font-size: .72rem; color: var(--muted);
  animation: nfReveal .18s ease;
}
.nf-roll .r-math .mv { color: var(--text-dim); }
.nf-roll .r-math .note { font-family: var(--font-body); font-style: italic; }
@keyframes nfReveal { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nf-roll .r-math { animation: none; } }

/* roll-type hues — the seven-type spectrum (kept from live, hex per the spec) */
.nf-roll.type-attack     { --tcol: #FFD700; }
.nf-roll.type-damage     { --tcol: #FF6B6B; }
.nf-roll.type-save       { --tcol: #4A9EFF; }
.nf-roll.type-check      { --tcol: #5AE0D0; }
.nf-roll.type-heal       { --tcol: #4AFF9E; }
.nf-roll.type-init       { --tcol: #B59CFF; }
.nf-roll.type-death_save { --tcol: #FF4A4A; }

/* type tag — DM Mono 3-letter chip (the locked icon mode) */
.nf-ti-tag {
  font-family: var(--mono); font-size: .58rem; letter-spacing: 1px; color: var(--tcol);
  border: 1px solid color-mix(in oklab, var(--tcol) 45%, transparent);
  border-radius: 4px; padding: 2px 5px; line-height: 1;
}

/* outcome badge — the locked outcome mode; crit keeps the live pulse, fumble the shake */
.nf-oc-badge {
  font-family: var(--font-body); font-weight: 700; font-size: .6rem; letter-spacing: .8px;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.nf-oc-badge.tone-good { color: #0b1f12; background: var(--success); }
.nf-oc-badge.tone-mute { color: var(--muted); background: var(--surface3); border: 1px solid var(--border-light); }
.nf-oc-badge.tone-crit { color: #2a1a00; background: var(--warning); box-shadow: 0 0 12px rgba(255,184,74,.5); animation: nfCritPulse 1s ease-out; }
.nf-oc-badge.tone-bad  { color: #1a0606; background: var(--nf-danger); }
.nf-oc-badge.tone-fumble { color: #1a0606; background: var(--nf-danger); animation: nfFumbleShake .5s ease; }
@keyframes nfCritPulse { 0% { box-shadow: 0 0 0 rgba(255,184,74,.8); } 50% { box-shadow: 0 0 18px rgba(255,184,74,.8); } 100% { box-shadow: 0 0 12px rgba(255,184,74,.5); } }
@keyframes nfFumbleShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .nf-oc-badge.tone-crit, .nf-oc-badge.tone-fumble { animation: none; } }

/* adv/dis chips — live in the expanded detail row */
.nf-adv {
  font-family: var(--font-body); font-size: .63rem; font-weight: 700; letter-spacing: .4px;
  border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.nf-adv.adv { color: var(--success); background: rgba(74,255,158,.1); border: 1px solid rgba(74,255,158,.28); }
.nf-adv.dis { color: var(--nf-danger); background: rgba(255,107,107,.1); border: 1px solid rgba(255,107,107,.28); }
.nf-adv.cancelled { text-decoration: line-through; opacity: .55; }

/* --- ACTION · enemy-turn group — bordered red block --- */
.nf-egroup {
  max-width: 88%;
  border: 1px solid rgba(255,107,107,.24); border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255,107,107,.05), transparent);
  overflow: hidden;
}
.nf-egroup .eg-h {
  display: flex; align-items: center; gap: 8px; padding: 8px 13px;
  font-family: var(--font-display); font-size: .66rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--nf-danger);
  border-bottom: 1px solid rgba(255,107,107,.18);
}
.nf-egroup .nf-roll { max-width: none; align-self: stretch; }
.nf-egroup .nf-roll .r-card { border-radius: 0; border-top: 0; border-right: 0; border-bottom: 0; background: transparent; }
.nf-egroup .nf-roll + .nf-roll .r-card { border-top: 1px solid var(--border); }

/* --- TABLE · capsule family — one look, tone variants --- */
.nf-cap { align-self: center; display: flex; align-items: center; gap: 9px; --rcol: var(--text-dim);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 16px;
}
.nf-cap .lbl { font-family: var(--font-display); font-size: .66rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--rcol); white-space: nowrap; }
.nf-cap .sub { font-size: .74rem; color: var(--text-dim); }
.nf-cap.combat  { --rcol: var(--nf-danger); border-color: rgba(255,107,107,.3); }
.nf-cap.success { --rcol: var(--success); border-color: rgba(74,255,158,.3); }
.nf-cap.warning { --rcol: var(--warning); border-color: rgba(255,184,74,.3); }
.nf-cap.big { padding: 9px 24px; }
.nf-cap.big .lbl { font-size: .82rem; letter-spacing: 3px; }
.nf-capline { display: flex; align-items: center; gap: 12px; align-self: stretch; }
.nf-capline .ln { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,107,107,.35), transparent); }
.nf-capline.success .ln { background: linear-gradient(90deg, transparent, rgba(74,255,158,.35), transparent); }
/* centered italic sub-line under a big capsule (combat-end summary; also the
   S230 pacing beats per Tyler's S246 disposition) */
.nf-tabletext { align-self: center; font-size: .78rem; color: var(--muted); font-style: italic; text-align: center; max-width: 70%; }

/* --- TABLE · initiative order card --- */
.nf-init-card {
  align-self: center; min-width: 380px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden;
}
.nf-init-card .row { display: flex; align-items: center; gap: 10px; padding: 7px 14px; }
.nf-init-card .row + .row { border-top: 1px solid var(--border); }
.nf-init-card .dot { width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--iocol); }
.nf-init-card .nm { font-family: var(--font-body); font-weight: 600; font-size: .82rem; color: var(--iocol); flex: 1; }
.nf-init-card .in { font-family: var(--mono); font-size: .8rem; color: var(--text-dim); }
@media (max-width: 520px) { .nf-init-card { min-width: 0; width: 100%; } }

/* --- VOICE · session-resumed card (the feed recap card is RETIRED — Tyler S246) --- */
.nf-resume-card {
  background: rgba(74,255,158,.06); border: 1px solid rgba(74,255,158,.25);
  border-radius: var(--radius-sm); padding: 12px 16px;
}
.nf-resume-card .lbl { font-family: var(--font-display); font-size: .7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--success); margin-bottom: 5px; display: flex; align-items: center; gap: 8px; }
.nf-resume-card .bd { font-size: .84rem; line-height: 1.55; color: var(--text-dim); }

/* --- VOICE · scene plate --- */
.nf-scene { align-self: center; max-width: 86%; }
.nf-scene .plate { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; }
.nf-scene img { display: block; width: 100%; border-radius: 6px; }
.nf-scene .cap { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .66rem; color: var(--muted); padding: 8px 4px 2px; }

/* --- streaming status — replaces both typing-indicator looks (same behavior:
   send-disable + 60s watchdog untouched; party variant sits on the ally side) --- */
.nf-typing { font-size: .82rem; color: var(--muted); font-style: italic; display: flex; align-items: center; gap: 8px; }
.nf-typing.party { align-self: flex-end; }
.nf-tdots { display: inline-flex; gap: 4px; }
.nf-tdots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: nfBlink 1.2s infinite; }
.nf-tdots i:nth-child(2) { animation-delay: .2s; }
.nf-tdots i:nth-child(3) { animation-delay: .4s; }
@media (prefers-reduced-motion: reduce) { .nf-tdots i { animation: none; } }
@keyframes nfBlink { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }

/* --- S2 renderer glue — live-contract adaptations of the handoff grammar --- */
/* Every nf feed element keeps the legacy entry fade (parity with .narrative-msg). */
.nf-world, .nf-ally, .nf-enemy, .nf-table, .nf-cap, .nf-capline, .nf-scene,
.nf-init-card, .nf-tabletext { animation: fadeIn 0.3s ease; }
/* TTS replay button parity — hover-reveal on the new DM card. */
.nf-w-card:hover .tts-speaker-btn { opacity: 0.7; }
/* The live no-dialogue path renders <br>-separated prose (formatNarrative), not
   <p> blocks — carry the prose face on the container + .dm-segment blocks too. */
.nf-w-prose, .nf-w-prose .dm-segment {
  font-family: var(--font-read); font-size: 1rem; line-height: 1.72;
  color: rgba(241,238,245,.9); text-wrap: pretty;
}
.nf-w-prose .dm-segment + .dm-segment { margin-top: 12px; }
/* NPC dialogue cards nest INSIDE the DM card's prose flow — live turns
   interleave dm + npc segments in one dm:response (the mockup's separate
   sibling cards, adapted to the live segment contract). */
.nf-w-prose .nf-npc-card { margin: 12px 0; }
.nf-npc-body { flex: 1; min-width: 0; }
/* Scene plate keeps the legacy height cap so one tall image can't own the feed. */
.nf-scene img { max-height: 400px; object-fit: cover; }

/* --- S3 renderer glue — Action layer --- */
/* Untyped rolls (classifier 'other') fall back to a neutral bar/total. */
.nf-roll { --tcol: var(--text-dim); }
/* The detail row renders in-DOM but hidden until the pill opens (conditional
   display, no 0fr grid transitions — per the handoff's porting note). */
.nf-roll .r-math { display: none; }
.nf-roll.open .r-math { display: flex; }
/* Synthetic info pills (dice:null) have no math — no pointer affordance. */
.nf-roll.no-detail { cursor: default; }
/* Ally-side pill stack — bare pills, no card wrapper (dice-only turns too). */
.nf-rollgroup { display: flex; flex-direction: column; gap: 4px; max-width: 88%; }
.nf-rollgroup .nf-roll { max-width: none; }
.nf-p-body { flex: 1; min-width: 0; }

/* --- S4 renderer glue — Table layer + streaming status --- */
/* The DM streaming indicator lives OUTSIDE the feed flex column — id-scoped
   visibility gating (same .visible contract the watchdog drives). */
#typing-indicator { display: none; padding: 10px 20px; }
#typing-indicator.visible { display: flex; }
/* Party typist line — fixed height (OI-57), right-aligned per the party side. */
#player-typing-indicator.nf-typing { justify-content: flex-end; padding: 4px 24px; }
/* S230 pacing beats keep their slight breathing room atop the table-text look. */
.nf-tabletext.beat { padding: 4px 14px 0; letter-spacing: 0.2px; opacity: 0.92; }
/* S247 — the DM's table-voice line on a pending-check card ("This is
   Investigation, not Arcana — ..."). */
.cbt-dice-note {
  font-family: var(--font-read); font-style: italic; font-size: 0.9rem;
  color: var(--gold-soft); text-align: center; max-width: 480px;
  padding: 0 8px 2px;
}

/* Name links inside nf surfaces keep the surface's own palette — the global
   .pc-link cyan + dotted underline (and .journal-link's dotted rule) are for
   PROSE mentions; on a chip/pill/dialogue-card the name is already the
   identity element, so the underline reads as a stray line (Tyler, launch
   night). Prose links inside .nf-w-prose keep the legacy treatment. */
.nf-p-chip .pc-link, .nf-roll .pc-link, .nf-npc-card .journal-link { border-bottom: none; }
.nf-p-chip .pname.pc-link { color: var(--pcolor); }
.nf-roll .r-who.pc-link { color: var(--wcol, var(--text)); }
.nf-npc-card .npc-name.journal-link { color: var(--warning); }
.nf-p-chip .pname.pc-link:hover, .nf-roll .r-who.pc-link:hover,
.nf-npc-card .npc-name.journal-link:hover { color: var(--gold); }
/* Capsules sit in the feed's stretch column — center them explicitly. */
.nf-cap { align-self: center; }
.nf-cap .sub { min-width: 0; }

/* ── OI-187 Slice 4 — the confirm chip (D4) ──────────────────────────────────
   One-line "Did you mean:" bar above the combat input. Screen-light by
   contract (D6 — survives the Bard hands-free posture): single row, one-tap
   options on the .ss-btn component, no modal.
   S249 prominence pass (Tyler live-test: "I almost missed it visually") —
   same one-line contract, but the bar now announces itself: gold accent
   border + tinted surface, bright label, and a two-beat glow pulse on
   entrance. Reduced-motion drops the animation, keeps the static accent. */
.intent-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 24px;
  background:
    linear-gradient(180deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.03)),
    var(--surface);
  border-top: 2px solid var(--gold, #d4af37);
  box-shadow: 0 -6px 18px rgba(212, 175, 55, 0.14);
  animation:
    intentChipIn 0.22s ease-out,
    intentChipPulse 1.1s ease-in-out 0.25s 2;
}
@keyframes intentChipIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes intentChipPulse {
  0%, 100% { box-shadow: 0 -6px 18px rgba(212, 175, 55, 0.14); }
  50% { box-shadow: 0 -6px 28px rgba(212, 175, 55, 0.38); }
}
@media (prefers-reduced-motion: reduce) {
  .intent-chip { animation: none; }
}
.intent-chip-q {
  font-size: 0.9rem;
  color: var(--gold, #d4af37);
  font-style: italic;
  font-weight: 600;
  white-space: nowrap;
}
.intent-chip .ss-btn {
  font-size: 0.9rem;
  padding: 7px 14px;
  white-space: nowrap;
}
.intent-chip-talk {
  opacity: 0.8;
}

/* ── S248 admin Now Playing panel (audio debug — admin-only) ────────────────── */
.admin-nowplaying {
  position: fixed;
  bottom: 8px;
  left: 8px;
  z-index: 900;
  background: rgba(12, 10, 8, 0.82);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 9px;
  font-family: ui-monospace, 'Cascadia Mono', monospace;
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--text-dim, #b8ab94);
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: text;
}
.admin-nowplaying .anp-ctx { opacity: 0.55; }

/* ── S248 session idle warning (token refresh) ──────────────────────────────── */
.session-warn {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9500;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  background: var(--surface);
  border: 1px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  font-size: 0.9rem;
  animation: intentChipIn 0.2s ease-out;
}

/* ── S248 skip-reactions ────────────────────────────────────────────────────── */
.reaction-skip-link {
  width: 100%;
  margin-top: 6px;
  padding: 6px;
  background: none;
  border: none;
  color: var(--text-dim, #9a8f7d);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
}
.reaction-skip-link:hover { color: var(--gold); }
.reaction-skip-chip {
  position: fixed;
  bottom: 46px;
  right: 12px;
  z-index: 850;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text-dim, #9a8f7d);
  font-size: 0.78rem;
  cursor: pointer;
}
.reaction-skip-chip:hover { border-color: var(--gold); color: var(--gold); }

/* ============================================================================
   HEARTHLIGHT FLOATING PROMPTS (.hlp) — S256 restyle (Tyler live: "Neither of
   them fit our UI style"). The ally hire-offer card + the post-combat death
   prompt (js/game.js) append to document.body, OUTSIDE any .ss scope — their
   old `ss-btn` classes never matched a rule, so they rendered raw. This is a
   self-contained namespaced kit (tokens + ceremonial shell + quiet bracket
   corners + buttons) mirroring the .pcx post-combat chrome, values verbatim,
   so nothing collides with island/global rules.
   ========================================================================== */
.hlp {
  --hlp-surface2: #1a1922; --hlp-surface3: #23222e;
  --hlp-border-light: rgba(255,255,255,0.14);
  --hlp-text: #f1eef5; --hlp-dim: rgba(241,238,245,0.62); --hlp-muted: rgba(241,238,245,0.34);
  --hlp-gold-grad: linear-gradient(135deg, #FFD700 0%, #FFE88A 32%, #FFD700 52%, #CC9900 100%);
  --hlp-display: 'Cinzel', serif; --hlp-body: 'DM Sans', sans-serif;
  --hlp-prose: 'Spectral', Georgia, serif; --hlp-mono: 'DM Mono', ui-monospace, Menlo, monospace;
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 9500;
  isolation: isolate; max-width: 480px; min-width: 300px;
  padding: 18px 24px 16px; text-align: center; color: var(--hlp-text); font-family: var(--hlp-body);
  border: 1px solid rgba(255,215,0,0.26); border-radius: 14px;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,180,60,0.07) 0%, transparent 55%), linear-gradient(180deg, #14121a 0%, #0d0c12 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 7px rgba(20,16,10,0.55), 0 0 0 8px rgba(255,215,0,0.10), 0 24px 60px -12px rgba(0,0,0,0.75);
  animation: hlpRise .28s ease-out;
}
.hlp *, .hlp *::before, .hlp *::after { box-sizing: border-box; }
@keyframes hlpRise { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@media (prefers-reduced-motion: reduce) { .hlp { animation: none; } }
/* quiet inlaid bracket corners — concentric in the 14px radius (inset 7px, elbow 7px), z-0 below content */
.hlp .hlp-corner { position: absolute; width: 20px; height: 20px; z-index: 0; pointer-events: none; opacity: 0.6; }
.hlp .hlp-corner::before { content: ""; position: absolute; inset: 0; border-top: 1.5px solid rgba(255,215,0,0.42); border-left: 1.5px solid rgba(255,215,0,0.42); border-top-left-radius: 7px; }
.hlp .hlp-corner.tl { inset: 7px auto auto 7px; }
.hlp .hlp-corner.tr { inset: 7px 7px auto auto; transform: scaleX(-1); }
.hlp .hlp-corner.bl { inset: auto auto 7px 7px; transform: scaleY(-1); }
.hlp .hlp-corner.br { inset: auto 7px 7px auto; transform: scale(-1,-1); }
.hlp > *:not(.hlp-corner) { position: relative; z-index: 1; }
.hlp .hlp-ico { font-size: 1.35rem; line-height: 1; margin-bottom: 6px; filter: drop-shadow(0 0 10px rgba(255,170,60,0.35)); }
.hlp .hlp-kicker { font-family: var(--hlp-mono); font-size: 0.58rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--hlp-muted); margin-bottom: 6px; }
.hlp .hlp-title { font-family: var(--hlp-display); font-weight: 800; font-size: 1.12rem; letter-spacing: 0.4px; line-height: 1.35;
  background: var(--hlp-gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #FFD700; }
.hlp .hlp-sub { font-family: var(--hlp-prose); font-style: italic; font-size: 0.87rem; color: var(--hlp-dim); margin-top: 5px; line-height: 1.45; }
.hlp .hlp-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.hlp .hlp-btn { font-family: var(--hlp-body); font-weight: 600; font-size: 0.84rem; padding: 9px 15px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--hlp-border-light); background: var(--hlp-surface2); color: var(--hlp-text); transition: all .15s;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hlp .hlp-btn:hover { background: var(--hlp-surface3); border-color: rgba(255,215,0,0.4); }
.hlp .hlp-btn.gold { background: var(--hlp-gold-grad); color: #1a1205; border-color: rgba(255,215,0,0.7);
  box-shadow: 0 2px 14px rgba(255,180,50,0.22), inset 0 1px 0 rgba(255,255,255,0.4); }
.hlp .hlp-btn.gold:hover { filter: brightness(1.06); transform: translateY(-1px); }
.hlp .hlp-btn.ghost { background: transparent; color: var(--hlp-dim); border-color: var(--hlp-border-light); }
.hlp .hlp-btn.ghost:hover { color: var(--hlp-text); background: var(--hlp-surface2); }
@media (max-width: 560px) { .hlp { max-width: calc(100vw - 24px); width: calc(100vw - 24px); min-width: 0; } }