/* Fate Condensed Generator Suite — Liquid Glass Theme
   iOS 26 / macOS Tahoe inspired. Translucent surfaces, backdrop blur, specular highlights.
   Dark mode default. Light mode: [data-theme="light"]. Campaign accents: [data-campaign]. */

/* Google Fonts removed — system font stack used: see --font-ui and --font-mono below */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--camp-bg, var(--bg)); color: var(--text); font-family: var(--font-ui);
  font-size: 15px; line-height: 1.55; min-height: 100vh;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: background 0.4s, color 0.3s; position: relative;
}
/* Animated background orbs for glass depth — editorial scale */
body::before, body::after {
  content: ''; position: fixed; border-radius: 50%; z-index: 0;
  pointer-events: none; animation: glassOrb 20s ease-in-out infinite;
}
body::before { width: 800px; height: 800px; top: -20%; right: -15%; background: radial-gradient(circle, var(--orb-a) 0%, transparent 65%); }
body::after { width: 600px; height: 600px; bottom: 0%; left: -12%; background: radial-gradient(circle, var(--orb-b) 0%, transparent 65%); animation-delay: -10s; animation-duration: 25s; }
@keyframes glassOrb { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-20px) scale(1.05)} 66%{transform:translate(-20px,30px) scale(0.95)} }

:root {
  --font-ui: -apple-system, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', 'Courier New', monospace;
  --font-camp: var(--font-ui);
  --text-caps:11px; --text-label:12px; --text-sm:14px; --text-base:15px;
  --text-md:16px; --text-lg:18px; --text-xl:20px; --text-2xl:24px;
  --text-hero: clamp(28px, 5vw, 48px);
  --glass-blur: blur(40px) saturate(180%);
  --glass-blur-sm: blur(20px) saturate(160%);
  --glass-radius: 16px;
  --glass-radius-sm: 12px;
  --glass-radius-pill: 100px;
}

/* ══ DARK THEME ══ */
:root {
  --bg:#000000;--camp-bg:#000000;
  --panel:rgba(255,255,255,0.06); --panel-raised:rgba(255,255,255,0.09);
  --border:rgba(255,255,255,0.08); --border-mid:rgba(255,255,255,0.14); --border-bright:rgba(255,255,255,0.22);
  --text:#FFFFFF; --text-dim:rgba(255,255,255,0.65); --text-muted:rgba(255,255,255,0.55);
  --overlay:rgba(0,0,0,0.6); --inset:rgba(255,255,255,0.04);
  --glass-bg:rgba(255,255,255,0.08); --glass-border:rgba(255,255,255,0.12);
  --glass-shadow:0 12px 40px rgba(0,0,0,0.35);
  --glass-inset:inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.15);
  --accent:#888; --accent-dim:#555; --gold:#d0d0d0;
  --section-hdr:var(--accent-dim);
  --focus-ring:#A0A0A0; /* slightly brighter than #888, 7.6:1 on #000 */
  --tag-bg:rgba(136,136,136,0.10); --tag-border:rgba(136,136,136,0.20);
  --c-red:#FF6B6B; --c-green:#4CD964; --c-blue:#5AC8FA; --c-purple:#BF5AF2;
  --orb-a:rgba(100,100,120,0.08); --orb-b:rgba(80,80,100,0.06);
}

/* ══ LIGHT THEME ══ */
[data-theme="light"] {
  --bg:#F2F2F7;--camp-bg:#F2F2F7;
  --panel:rgba(255,255,255,0.60); --panel-raised:rgba(255,255,255,0.75);
  --border:rgba(0,0,0,0.06); --border-mid:rgba(0,0,0,0.10); --border-bright:rgba(0,0,0,0.18);
  --text:#1D1D1F; --text-dim:rgba(0,0,0,0.55); --text-muted:rgba(0,0,0,0.60);
  --overlay:rgba(0,0,0,0.3); --inset:rgba(0,0,0,0.03);
  --glass-bg:rgba(255,255,255,0.60); --glass-border:rgba(255,255,255,0.80);
  --glass-shadow:0 12px 40px rgba(0,0,0,0.06);
  --glass-inset:inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(0,0,0,0.04);
  --accent:#555; --accent-dim:#777; --gold:#333;
  --section-hdr:#555;
  --focus-ring:#404040; /* 13.7:1 on #F2F2F7, similar hue to #555 */
  --tag-bg:rgba(0,0,0,0.05); --tag-border:rgba(0,0,0,0.10);
  --c-red:#D32F2F; --c-green:#2E7D32; --c-blue:#1565C0; --c-purple:#7B1FA2;
  --orb-a:rgba(180,180,200,0.15); --orb-b:rgba(160,160,190,0.12);
}

/* ══ CAMPAIGN ACCENTS ══ */
[data-theme="light"][data-campaign="thelongafter"]{--accent:#9A5E10;--section-hdr:#9A5E10;--accent-dim:#C07A18;--gold:#7A4800;--tag-bg:rgba(196,127,23,0.08);--tag-border:rgba(196,127,23,0.20);--c-red:#D32F2F;--c-green:#2E7D32;--c-blue:#1565C0;--c-purple:#7B1FA2;--orb-a:rgba(245,166,35,0.12);--orb-b:rgba(200,130,20,0.08);--camp-bg:linear-gradient(160deg,#FFF8EE 0%,#FFF0D4 40%,#F8F0E8 100%);--focus-ring:#9A5E10}
[data-theme="light"][data-campaign="cyberpunk"]{--accent:#076478;--section-hdr:#076478;--accent-dim:#0891A2;--gold:#054D5E;--tag-bg:rgba(8,145,162,0.07);--tag-border:rgba(8,145,162,0.18);--c-red:#C62828;--c-green:#2E7D32;--c-blue:#0D47A1;--c-purple:#6A1B9A;--orb-a:rgba(50,215,232,0.10);--orb-b:rgba(20,170,190,0.07);--camp-bg:linear-gradient(160deg,#F0FAFB 0%,#D8F4F8 40%,#EAF8FA 100%);--focus-ring:#076478}
[data-theme="light"][data-campaign="fantasy"]{--accent:#856508;--section-hdr:#856508;--accent-dim:#9E7A10;--gold:#634B00;--tag-bg:rgba(146,112,10,0.07);--tag-border:rgba(146,112,10,0.18);--c-red:#C62828;--c-green:#2E7D32;--c-blue:#1565C0;--c-purple:#6A1B9A;--orb-a:rgba(212,168,74,0.12);--orb-b:rgba(170,130,40,0.08);--camp-bg:linear-gradient(160deg,#FFFAE8 0%,#FFF2C8 40%,#F8F4E0 100%);--focus-ring:#856508}
[data-theme="light"][data-campaign="space"]{--accent:#7C3ACD;--section-hdr:#7C3ACD;--accent-dim:#9B59B6;--gold:#5E2CA5;--tag-bg:rgba(124,58,205,0.07);--tag-border:rgba(124,58,205,0.18);--c-red:#C62828;--c-green:#2E7D32;--c-blue:#1565C0;--c-purple:#8E24AA;--orb-a:rgba(191,122,240,0.12);--orb-b:rgba(140,80,210,0.08);--camp-bg:linear-gradient(160deg,#F8F2FF 0%,#EDE0FF 40%,#F4F0FA 100%);--focus-ring:#7C3ACD}
[data-theme="light"][data-campaign="victorian"]{--accent:#8A6512;--section-hdr:#8A6512;--accent-dim:#A57B18;--gold:#6B4D00;--tag-bg:rgba(138,101,18,0.07);--tag-border:rgba(138,101,18,0.18);--c-red:#C62828;--c-green:#2E7D32;--c-blue:#1565C0;--c-purple:#6A1B9A;--orb-a:rgba(232,169,74,0.12);--orb-b:rgba(190,140,50,0.08);--camp-bg:linear-gradient(160deg,#FFF8EE 0%,#F8EED8 40%,#F4F0E8 100%);--focus-ring:#8A6512}
[data-theme="light"][data-campaign="postapoc"]{--accent:#A04D12;--section-hdr:#A04D12;--accent-dim:#C06018;--gold:#7A3800;--tag-bg:rgba(160,77,18,0.07);--tag-border:rgba(160,77,18,0.18);--c-red:#C62828;--c-green:#2E7D32;--c-blue:#1565C0;--c-purple:#6A1B9A;--orb-a:rgba(240,128,48,0.12);--orb-b:rgba(200,100,30,0.08);--camp-bg:linear-gradient(160deg,#FFF4EE 0%,#FFE8D0 40%,#F8F0E8 100%);--focus-ring:#A04D12}
[data-theme="light"][data-campaign="western"]{--accent:#8B4513;--section-hdr:#8B4513;--accent-dim:#A0522D;--gold:#6B3410;--tag-bg:rgba(139,69,19,0.08);--tag-border:rgba(139,69,19,0.20);--c-red:#B71C1C;--c-green:#2E7D32;--c-blue:#1565C0;--c-purple:#6A1B9A;--orb-a:rgba(192,120,48,0.10);--orb-b:rgba(160,90,20,0.07);--camp-bg:linear-gradient(160deg,#FFF8F0 0%,#FFF0DC 40%,#F8EED8 100%);--focus-ring:#8B4513}

/* ══ ACCESSIBILITY ══ */
.skip-link{position:absolute;top:-100%;left:0;background:var(--accent);color:var(--bg);padding:10px 18px;font-size:var(--text-base);font-weight:700;z-index:9999;text-decoration:none;border-radius:0 0 8px 0}
.skip-link:focus{top:0}
:focus-visible{outline:2px solid var(--focus-ring,var(--accent));outline-offset:2px}
:focus:not(:focus-visible){outline:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}body::before,body::after{display:none}}

/* ══ ANIMATIONS ══ */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes roll{0%,100%{opacity:0.3}50%{opacity:1}}

/* ══ BUTTONS ══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:var(--glass-radius-pill);border:1px solid var(--border-mid);background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);color:var(--text-dim);font-size:var(--text-sm);font-family:var(--font-ui);font-weight:500;cursor:pointer;white-space:nowrap;min-height:44px;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);text-decoration:none;letter-spacing:0.01em}
.btn:hover,.btn:focus-visible{background:rgba(255,255,255,0.12);border-color:var(--border-bright);color:var(--text)}
[data-theme="light"] .btn:hover,[data-theme="light"] .btn:focus-visible{background:rgba(255,255,255,0.70)}
.btn:active{transform:scale(0.97)}
.btn-ghost{border-color:var(--border);background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.btn-ghost:hover{background:var(--glass-bg)}
.btn-icon{padding:8px 12px;min-width:44px;min-height:44px;font-size:var(--text-md);line-height:1;border-radius:50%}
/* Compact button — replaces inline style:{fontSize:12,padding:'4px 12px',minHeight:0} (used 5x) */

/* ══ CARDS ══ */

/* ── Roll button ──────────────────────────────────────────────────────── */
.btn-roll{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px 24px;font-size:var(--text-lg);font-weight:700;font-family:var(--font-ui);letter-spacing:0.04em;border:none;border-radius:var(--glass-radius);cursor:pointer;position:relative;overflow:hidden;transition:filter 0.12s,transform 0.08s;background:var(--accent);color:#fff;min-height:56px}
.btn-roll:hover{filter:brightness(1.12)}
.btn-roll:active{filter:brightness(0.95);transform:scale(0.99)}
.btn-roll:disabled{opacity:0.55;cursor:not-allowed;filter:none;transform:none}
.btn-roll.rolling{animation:rollPulse 0.6s ease}
.action-bar-roll{flex:1}
/* ── Streak pulse ──────────────────────────────────────────────────────── */
.btn-roll.streak-pulse{animation:streakPop 0.35s ease}
/* ── Quick Prep Pack button ──────────────────────────────────────────── */
.full-session-btn{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.full-session-btn:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.full-session-btn.active{background:color-mix(in srgb,var(--accent) 15%,transparent);border-color:var(--accent)}
/* full-session-badge: sidebar pill variant */
.full-session-badge{font-size:10px;font-weight:700;padding:1px 5px;border-radius:8px;background:var(--accent);color:#fff;margin-left:2px}
/* ── Campaign guide stats strip ─────────────────────────────────────── */
.cg-stats{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px}
.cg-stat{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:8px;padding:8px 14px;text-align:center;min-width:60px}
.cg-stat b{display:block;font-size:18px;font-weight:800;color:var(--accent)}
.cg-stat span{font-size:11px;color:var(--text-muted);font-family:var(--font-ui)}
/* ── Result card front face ──────────────────────────────────────────── */
.rc-front{flex:1;min-width:0;padding:14px 16px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.card{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--glass-radius);padding:20px;box-shadow:var(--glass-inset),var(--glass-shadow)}

/* ══ TAGS, LABELS, ASPECTS ══ */
.tag{display:inline-block;padding:3px 11px;border-radius:var(--glass-radius-pill);border:1px solid var(--tag-border);background:var(--tag-bg);color:var(--accent);font-size:var(--text-label);letter-spacing:0.04em;text-transform:uppercase;font-weight:600}
/* Muted label — replaces inline style:{fontSize:'var(--text-label)',color:'var(--text-muted)'} (used 3x) */
.lbl{font-size:var(--text-label);letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);font-weight:600;margin-bottom:6px}
/* Tag pill — replaces inline style:{display:'inline-block',padding:'3px 10px',borderRadius:4,...} (used 3x) */
/* Nav link — replaces inline style:{fontSize:13,textDecoration:'none',flex:1,justifyContent:'center'} (used 3x) */
/* Fade-up animation helper — replaces inline style:{animation:'fadeUp 0.3s ease both'} (used 4x) */

/* ══ SCROLLBAR ══ */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-mid);border-radius:3px}

/* ══ NAV — Glass capsule ══ */

/* ══ LANDING PAGE — Narrative single-scroll ══ */
  background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);
  border:1px solid var(--glass-border);border-radius:var(--glass-radius-sm);padding:14px 16px
}
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:var(--glass-radius);padding:24px;
  box-shadow:var(--glass-inset),var(--glass-shadow)
}

/* ── Version badge (about.html) ── */
.about-version{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--glass-radius-sm);margin:12px 0 24px;backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm)}
.about-version-badge{font-size:var(--text-sm);font-weight:800;color:var(--accent);letter-spacing:0.04em;background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);padding:3px 12px;border-radius:var(--glass-radius-pill)}
.about-version-meta{font-size:var(--text-label);color:var(--text-muted);line-height:1.6}
.about-version-qa{font-size:var(--text-label);color:var(--c-green);font-family:'Courier New',Courier,monospace;margin-left:auto}

/* ── Mobile visibility utilities ── */
 /* shown by default — hidden via media query below */
 /* hidden by default — shown via media query below */

/* ══ CAMPAIGN HEADER — Glass bar ══ */

/* ── Mobile bottom sheet ───────────────────────────────────────────── */
@keyframes bsheet-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes bsheet-fade{from{opacity:0}to{opacity:1}}

/* ══ MAIN LAYOUT — single column, full width ══ */
.main-layout{max-width:640px;margin:0 auto;padding:16px;position:relative;z-index:1}

/* ══ TWO-TIER GENERATOR NAV ══ */
[data-theme="light"][data-theme="light"]
/* ── Fate Point Tracker (ND-10) ───────────────────────────────────── */
.fp-panel{position:static;width:100%;animation:none}
.fp-tracker{background:var(--card-bg);border:1px solid var(--glass-border);border-radius:var(--glass-radius);padding:14px;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:0 8px 32px rgba(0,0,0,0.3)}
.fp-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;border-bottom:1px solid var(--border);padding-bottom:10px}
.fp-title{font-size:14px;font-weight:700;color:var(--text);flex:1;letter-spacing:0.02em}
.fp-pcs{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.fp-pc-row{display:flex;align-items:center;gap:6px}
.fp-pc-name{background:transparent;border:none;border-bottom:1px solid var(--border);padding:2px 4px;font-size:13px;font-weight:600;color:var(--text);width:72px;flex-shrink:0;min-height:0}
.fp-pc-name:focus{border-bottom-color:var(--accent)}
.fp-controls{display:flex;align-items:center;gap:5px;flex:1}
.fp-dots{display:flex;gap:4px;flex:1;justify-content:center;perspective:120px}
.fp-dot{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--text-muted);cursor:pointer;transition:background 0.1s,border-color 0.1s;flex-shrink:0;transform-style:preserve-3d}
.fp-btn:hover:not(:disabled){background:var(--glass-border);color:var(--text)}
.fp-btn:disabled{opacity:0.3;cursor:default}
.fp-count{font-size:14px;font-weight:700;color:var(--accent);width:18px;text-align:right;flex-shrink:0}
.fp-remove{background:none;border:none;color:var(--text-muted);font-size:16px;cursor:pointer;padding:0 2px;line-height:1;opacity:0.5;flex-shrink:0}
.fp-remove:hover{opacity:1;color:var(--c-red)}
.fp-pool-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--border);margin-bottom:8px}
.fp-pool-label{font-size:12px;font-weight:600;color:var(--text-dim);flex:1;text-transform:uppercase;letter-spacing:0.08em}
.fp-pool-count{font-size:16px;font-weight:700;color:var(--text);min-width:20px;text-align:center}
.fp-add-pc{width:100%;padding:7px;background:transparent;border:1px dashed var(--border);border-radius:6px;font-size:12px;color:var(--text-muted);cursor:pointer;transition:all 0.12s}
.fp-add-pc:hover{border-color:var(--accent);color:var(--accent)}
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:14px 40px;min-width:240px;min-height:50px;
  border-radius:var(--glass-radius-pill);border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-dim));
  color:#fff;font-size:var(--text-md);font-weight:700;font-family:var(--font-ui);
  letter-spacing:0.02em;cursor:pointer;position:relative;overflow:hidden;
  transition:box-shadow 0.2s,filter 0.2s;
}
.roll-label{position:relative;z-index:1}
.roll-fx{position:absolute;inset:0;pointer-events:none;border-radius:inherit;overflow:hidden}

/* ═══ THE LONG AFTER — Phade Vault Activation ═══
   Orbiting glyph border via conic-gradient. Golden energy detonation on click. */
  background:linear-gradient(135deg,#2a1f0f,#1a1208);color:var(--accent);
  border:1px solid var(--accent,#F5A623)44;border-radius:100px;
  box-shadow:0 0 20px color-mix(in srgb,var(--accent) 25%,transparent);
  animation:tla-idle 3s ease-in-out infinite;
}
  content:'';position:absolute;inset:-3px;border-radius:100px;
  background:conic-gradient(from 0deg,transparent 0%,var(--accent) 8%,transparent 16%,transparent 33%,var(--accent) 41%,transparent 49%,transparent 66%,var(--accent) 74%,transparent 82%);
  opacity:0.5;animation:tla-orbit 4s linear infinite;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#fff calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#fff calc(100% - 2px));
}
  animation:tla-detonate 0.3s ease-out forwards;
}
  opacity:1;animation:tla-orbit 0.3s linear infinite;
}
@keyframes tla-idle{0%,100%{box-shadow:0 0 20px #F5A62340}50%{box-shadow:0 0 40px #F5A62355}}
@keyframes tla-orbit{to{transform:rotate(360deg)}}
@keyframes tla-detonate{0%{box-shadow:0 0 80px #F5A623,0 0 120px #F5A62388}100%{box-shadow:0 0 20px #F5A62340}}

/* ═══ NEON ABYSS — Glitch Interface ═══
   Monospace, sharp corners, scanline idle, RGB-split glitch on click. */
  background:#0a1418;color:var(--accent);border:1px solid var(--accent,#32D7E8)66;
  border-radius:4px;font-family:'Courier New',Courier,monospace;
  letter-spacing:0.06em;text-transform:uppercase;
  text-shadow:0 0 8px color-mix(in srgb,var(--accent) 50%,transparent);
  box-shadow:0 0 15px color-mix(in srgb,var(--accent) 30%,transparent);
  animation:neo-scan 3s linear infinite;
}
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.06) 2px,rgba(0,0,0,0.06) 4px);
  pointer-events:none;
}
  animation:neo-glitch 0.08s steps(2) 4;
  text-shadow:-2px 0 #ff004488,2px 0 #00ff8888;
  box-shadow:0 0 40px color-mix(in srgb,var(--accent) 70%,transparent),-3px 0 0 #ff004444,3px 0 0 #00ff8844;
}
@keyframes neo-scan{0%,100%{background-position:0 0}50%{background-position:0 2px}}
@keyframes neo-glitch{0%{transform:translate(2px,-1px) skewX(-2deg)}50%{transform:translate(-2px,1px) skewX(2deg)}100%{transform:translate(0) skewX(0)}}

/* ═══ SHATTERED KINGDOMS — Rune Fracture ═══
   Serif, warm stone, rune text-glow pulse, bright crack-flare on click. */
  background:linear-gradient(135deg,#1a0f08,#2a1510);color:var(--accent);
  border:1px solid var(--accent,#D4884A)44;border-radius:6px;
  font-family:Georgia,'Times New Roman',serif;letter-spacing:0.03em;
  box-shadow:0 0 15px color-mix(in srgb,var(--accent) 25%,transparent);
  animation:fan-rune 4s ease-in-out infinite;
}
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,transparent 40%,color-mix(in srgb,var(--accent) 8%,transparent) 50%,transparent 60%);
  opacity:0;transition:opacity 0.2s;
}
  animation:fan-crack 0.4s ease-out forwards;
}
@keyframes fan-rune{0%,100%{text-shadow:0 0 4px color-mix(in srgb,var(--accent) 30%,transparent)}50%{text-shadow:0 0 14px color-mix(in srgb,var(--accent) 60%,transparent)}}
@keyframes fan-crack{0%{box-shadow:0 0 60px color-mix(in srgb,var(--accent) 80%,transparent),inset 0 0 30px color-mix(in srgb,var(--accent) 40%,transparent);filter:brightness(1.4)}100%{box-shadow:0 0 15px color-mix(in srgb,var(--accent) 25%,transparent);filter:brightness(1)}}

/* ═══ VOID RUNNERS — Engine Ignition ═══
   Thruster trails via ::before/::after on wrap. Burn + forward thrust on click. */
  background:linear-gradient(135deg,#14081a,#1e1028);color:var(--accent);
  border:1px solid var(--accent,#BF7AF0)44;border-radius:100px;
  box-shadow:0 0 15px color-mix(in srgb,var(--accent) 25%,transparent);
  animation:sp-idle 2s ease-in-out infinite;
  transition:box-shadow 0.15s,transform 0.1s;
}
  content:'';position:absolute;top:50%;width:10px;height:8px;border-radius:50%;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 40%,transparent),transparent);
  filter:blur(3px);transform:translateY(-50%);transition:all 0.15s;pointer-events:none;
}
  animation:sp-burn 0.35s ease-out forwards;
  transform:translateX(3px);
}
  width:30px;height:20px;filter:blur(5px);
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 80%,transparent),transparent);
}
@keyframes sp-idle{0%,100%{box-shadow:0 0 15px color-mix(in srgb,var(--accent) 25%,transparent)}50%{box-shadow:0 0 25px color-mix(in srgb,var(--accent) 40%,transparent)}}
@keyframes sp-burn{0%{box-shadow:0 0 70px color-mix(in srgb,var(--accent) 80%,transparent)}100%{box-shadow:0 0 15px color-mix(in srgb,var(--accent) 25%,transparent)}}

/* ═══ GASLIGHT CHRONICLES — Gas Flame ═══
   Serif, warm amber, constant gas-lamp flicker, dramatic flare-up on click. */
  background:linear-gradient(180deg,#1a1608,#0f0e08);color:var(--accent);
  border:1px solid var(--accent,#C8B858)44;border-radius:4px;
  font-family:Georgia,'Times New Roman',serif;
  box-shadow:0 -4px 15px color-mix(in srgb,var(--accent) 25%,transparent),0 0 20px color-mix(in srgb,var(--accent) 18%,transparent);
  text-shadow:0 0 6px color-mix(in srgb,var(--accent) 40%,transparent);
  animation:vic-flicker 0.15s ease-in-out infinite alternate;
}
  animation:vic-flare 0.5s ease-out forwards;
}
@keyframes vic-flicker{0%{opacity:0.93;filter:brightness(0.97)}100%{opacity:1;filter:brightness(1.03)}}
@keyframes vic-flare{0%{filter:brightness(1.6);box-shadow:0 -10px 40px color-mix(in srgb,var(--accent) 70%,transparent),0 0 60px color-mix(in srgb,var(--accent) 50%,transparent);text-shadow:0 0 15px var(--accent)}100%{filter:brightness(1);box-shadow:0 -4px 15px color-mix(in srgb,var(--accent) 25%,transparent),0 0 20px color-mix(in srgb,var(--accent) 18%,transparent);text-shadow:0 0 6px color-mix(in srgb,var(--accent) 40%,transparent)}}

/* ═══ THE LONG ROAD — Radio Static ═══
   Monospace, static grain overlay, signal blink, static burst on click. */
  background:#1a0e05;color:var(--accent);
  border:1px solid var(--accent,#F08030)44;border-radius:4px;
  font-family:'Courier New',Courier,monospace;letter-spacing:0.04em;
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 18%,transparent);
  animation:pa-blink 3s ease-in-out infinite;
}
  content:'';position:absolute;inset:0;border-radius:inherit;opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='50' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:100px 50px;mix-blend-mode:overlay;
}
  animation:pa-static 0.08s steps(3) 4;
  color:#fff;
  box-shadow:0 0 50px color-mix(in srgb,var(--accent) 60%,transparent);
}
  opacity:0.15;animation:pa-grain 0.05s steps(2) infinite;
}
@keyframes pa-blink{0%,85%,90%,100%{border-color:color-mix(in srgb,var(--accent) 25%,transparent)}87%{border-color:color-mix(in srgb,var(--accent) 70%,transparent)}}
@keyframes pa-static{0%{transform:translate(1px,-1px)}50%{transform:translate(-1px,1px)}100%{transform:translate(0)}}
@keyframes pa-grain{0%{background-position:0 0}100%{background-position:7px 3px}}

/* ══ HISTORY / PINNED — Slide-over panel ══ */
.hist-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:200;animation:fadeIn 0.2s ease}
.hist-panel{
  position:fixed;top:0;right:0;bottom:0;width:320px;max-width:90vw;z-index:201;
  background:var(--panel-raised);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-left:1px solid var(--glass-border);
  display:flex;flex-direction:column;overflow-y:auto;
  animation:slideIn 0.25s cubic-bezier(0.4,0,0.2,1);
  box-shadow:-8px 0 40px rgba(0,0,0,0.3);
}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.hist-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 16px 12px;border-bottom:1px solid var(--border);flex-shrink:0
}

/* ══ TOAST ══ */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:300;
  background:var(--panel-raised);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);
  border:1px solid var(--glass-border);border-radius:var(--glass-radius-pill);
  padding:10px 22px;font-size:var(--text-sm);font-weight:500;color:var(--text);
  box-shadow:var(--glass-shadow);
  animation:toastIn 0.3s ease,toastOut 0.3s ease 2.2s forwards
}
@media(max-width:640px){.toast{bottom:auto;top:60px}}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes toastOut{to{opacity:0;transform:translateX(-50%) translateY(8px)}}

.drawer-items{display:flex;flex-direction:column;gap:3px}

.history-label{font-size:var(--text-label);letter-spacing:0.12em;color:var(--accent-dim);text-transform:uppercase;font-weight:600;margin-bottom:6px;margin-top:16px}
.history-item{width:100%;background:transparent;border:1px solid var(--border);border-radius:8px;padding:5px 9px;cursor:pointer;text-align:left;margin-bottom:3px;color:var(--text-dim);font-size:var(--text-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-ui)}
.history-item:hover{border-color:var(--border-mid);color:var(--text);background:var(--glass-bg)}

/* ══ RESULT PANEL — Glass surface ══ */
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 16px;border-bottom:1px solid var(--border);
  background:rgba(255,255,255,0.03);flex-wrap:wrap
}
.result-panel{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--glass-radius);padding:20px;min-height:300px;box-shadow:var(--glass-inset),var(--glass-shadow)}

/* ══ SKILL BAR ══ */

/* ══ STRESS BOXES — Glass squares ══ */

/* ══ STUNTS — Glass card ══ */

/* ══ INFO BOX — Glass tinted ══ */

/* ══ GM NOTE — Glass accent edge ══ */

/* ══ GM MODE — Pill Bar guidance ══ */
[data-gm-mode="off"] .gm-guidance{display:none}

/* ══ PLAYER VIEW — merged into data-gm-mode="off" in GM Mode redesign ══ */
/* ══ PINNED ACTIVE (ND-05) ══ */

/* ══ SESSION ZERO HERO LINK (UX-02) ══ */
  background:transparent;border:1px solid var(--glass-border);border-radius:var(--glass-radius-pill);
  padding:5px 14px;cursor:pointer;font-family:var(--font-ui);font-size:var(--text-label);
  font-weight:600;color:var(--text-muted);transition:all 0.15s;white-space:nowrap;
}
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border-color:var(--accent);color:var(--accent);
}
  margin-top:10px;font-size:var(--text-sm);color:var(--text-dim);line-height:1.7;
  animation:gmFadeIn 0.15s ease;
}
@keyframes gmFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ══ CONSEQUENCE TABLE ══ */

/* ══ LAYOUTS ══ */

/* ══ ZONE CARD — Glass ══ */

/* ══ OPPOSITION CARD ══ */

/* ══ PARTY PICKER ══ */
.party-label{font-size:var(--text-sm);color:var(--text-dim);font-weight:500}

/* ══ MODAL — Glass overlay ══ */
.modal-overlay{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;will-change:filter}
.modal-box{background:var(--panel-raised);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--glass-radius);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;width:100%;box-shadow:var(--glass-inset),0 16px 64px rgba(0,0,0,0.4)}
.modal-box-narrow{max-width:560px}
.modal-box-wide{max-width:640px}
.modal-header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:10px}
.modal-title{font-size:var(--text-lg);font-weight:700;color:var(--gold)}
.modal-body{overflow-y:auto;padding:18px 20px;flex:1}

/* ══ HELP MODAL ══ */
.help-rule-srd:hover{opacity:1;text-decoration:underline}
.kbd-grid{display:flex;flex-direction:column;gap:6px}
.kbd-row{display:flex;align-items:center;gap:10px}
.kbd-key{display:inline-flex;align-items:center;justify-content:center;min-width:52px;padding:3px 8px;background:var(--inset);border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;font-family:var(--font-mono,'Courier New',monospace);font-size:12px;font-weight:700;color:var(--text-dim);line-height:1.4}
.kbd-desc{font-size:var(--text-sm);color:var(--text-dim)}

/* ══ EXPORT MODAL ══ */

/* ══ RESPONSIVE ══ */
@media(max-width:680px){

  /* Camp header — icon-only buttons on mobile */
  /* sheet is full-screen on mobile — panel fills width naturally */

  /* Site nav — hide secondary links on mobile */

  /* Landing */

  /* Next Step Strip — stack label above, buttons full-width side by side */
}

/* ══ FOOTER ══ */

.land-footer a:hover{text-decoration:underline}

/* ══ PRINT ══ */
@media print{
  @page{size:A4 portrait;margin:18mm 20mm}
  *,*::before,*::after{background:#fff!important;color:#111!important;box-shadow:none!important;text-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body::before,body::after{display:none!important}
  .skip-link,.topbar,.sidebar,.sidebar-backdrop{display:none!important}
  body{font-family:'Inter',system-ui,sans-serif;font-size:11pt;line-height:1.55}
  .main-layout{display:block!important;padding:0!important;max-width:100%!important}
  .result-panel{border:none!important;padding:0!important;min-height:unset!important}
  .lbl{font-size:7.5pt!important;letter-spacing:0.18em;text-transform:uppercase;color:#555!important;font-weight:700;margin-bottom:5pt;border-bottom:0.5pt solid #ccc;padding-bottom:3pt}

  h2,h3{page-break-after:avoid}
  [data-gm-mode="off"] .gm-guidance{display:none!important}
}

/* ══ TEXT SIZE OVERRIDES ══ */
[data-textsize="1"]{--text-label:13px;--text-sm:16px;--text-base:17px;--text-md:18px;--text-lg:21px;--text-xl:23px;--text-2xl:27px}
[data-textsize="2"]{--text-label:14px;--text-sm:18px;--text-base:19px;--text-md:21px;--text-lg:23px;--text-xl:26px;--text-2xl:31px}

/* ══ TABLE MANAGER ══ */
.tm-entry-row{display:flex;align-items:flex-start;gap:6px;padding:7px 16px;border-bottom:1px solid var(--border);transition:background 0.1s,opacity 0.1s}
.tm-entry-row:last-child{border-bottom:none}
.tm-entry-row.is-locked{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.tm-entry-row.is-excl{background:color-mix(in srgb,var(--c-red) 5%,transparent);opacity:0.55}
.tm-icon-btn{background:none;border:none;cursor:pointer;font-size:15px;padding:2px 3px;flex-shrink:0;margin-top:1px;line-height:1;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.tm-entry-text{flex:1;font-size:var(--text-sm);color:var(--text);line-height:1.5;padding-top:1px}
.tm-entry-text.is-excl{text-decoration:line-through;color:var(--text-muted)}
.tm-custom-badge{font-size:var(--text-label);color:var(--accent);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:4px 16px 2px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--accent) 5%,transparent)}
.tm-lock-warning{padding:6px 16px;font-size:var(--text-sm);font-weight:600;color:var(--gold);background:color-mix(in srgb,var(--accent) 8%,transparent);border-bottom:1px solid var(--border)}
.tm-select{flex:1 1 200px;background:var(--panel-raised);color:var(--text);border:1px solid var(--border);border-radius:var(--glass-radius-sm);padding:8px 12px;font-size:var(--text-sm);font-family:var(--font-ui);min-width:0}
.tm-count{font-size:var(--text-sm);color:var(--text-dim);white-space:nowrap}
.tm-custom-row{padding:10px 16px;border-top:1px solid var(--border);display:flex;gap:8px;flex-shrink:0}
.tm-input{flex:1;background:var(--panel-raised);color:var(--text);border:1px solid var(--border);border-radius:var(--glass-radius-sm);padding:8px 12px;font-size:var(--text-sm);font-family:var(--font-ui)}
.tm-input:focus{outline:2px solid var(--focus-ring,var(--accent));outline-offset:1px}
.tm-no-custom{padding:10px 16px;border-top:1px solid var(--border);font-size:var(--text-label);color:var(--text-muted);font-style:italic}

/* ══ PATTERN G — SIDEBAR LAYOUT (BL-15) ══════════════════════════════════════
   Desktop: 40px topbar + 220px sidebar (left) + content panel (right)
   Mobile ≤640px: topbar + off-canvas sidebar drawer + full-width content
   ═══════════════════════════════════════════════════════════════════════════*/

/* ── Shell structure ────────────────────────────────────────────────────── */
.app-shell{min-height:100vh;display:flex;flex-direction:column;font-family:var(--font-camp,var(--font-ui))}
.app-body{flex:1;display:flex;overflow:hidden;position:relative;min-height:0}

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:200;height:44px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border);display:flex;align-items:center;padding:0 12px;gap:10px;flex-shrink:0;box-shadow:var(--glass-shadow);will-change:filter}

.topbar-ogma{color:var(--accent);font-size:13px;font-weight:400;flex-shrink:0;letter-spacing:0.01em;white-space:nowrap}
.topbar-ogma strong{font-weight:800;font-size:15px;letter-spacing:0}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar{width:220px;flex-shrink:0;background:var(--panel-raised);border-right:1px solid var(--border);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;z-index:100;transition:transform 0.22s cubic-bezier(0.4,0,0.2,1);will-change:filter}
.sidebar-backdrop{display:none}
.sidebar-section:last-child{border-bottom:none;margin-top:auto}
.sidebar-link:hover{color:var(--accent)}

/* ── Content panel ──────────────────────────────────────────────────────── */
.content-panel{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.content-panel 
.content-panel .main-layout{max-width:none;padding:12px 20px 20px}

/* Desktop: show topbar action labels */
@media(min-width:641px){
  .topbar-hamburger{display:none} /* sidebar is always visible on desktop */
  .sidebar{transform:none!important} /* always shown */
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media(max-width:640px){
  .topbar-hamburger{display:flex}
  /* Sidebar becomes off-canvas drawer */
  .sidebar{position:fixed;top:44px;left:0;bottom:0;z-index:300;transform:translateX(-100%);box-shadow:8px 0 32px rgba(0,0,0,0.5)}
  .sidebar.sidebar-open{transform:translateX(0)}
  /* Backdrop */
  .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:299;animation:bsheet-fade 0.2s ease both}
  /* Content panel fills full width on mobile */
  .content-panel 
  .content-panel .main-layout{padding:8px 14px 20px}
  /* Camp hero condensed on mobile */
  
}

/* ══════════════════════════════════════════════════════════════
   NEW RESULT RENDER — result card + inline tabs
   Replaces old result-panel content area
══════════════════════════════════════════════════════════════ */

/* Result card — top section of result panel */
.result-card{padding:16px 18px 0;flex-shrink:0;border-bottom:1px solid var(--border)}
.result-card-gen{font-size:10px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.result-card-gen-line{flex:1;height:1px;background:color-mix(in srgb,var(--accent) 22%,transparent)}

/* Result tab bar */

/* Tab panel scroll container */

/* Panel section label */
.rtp-lbl{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}

/* Invoke / compel example cards */

/* Tip rows */
.rtp-tip{display:flex;align-items:flex-start;gap:7px;padding:5px 0;border-top:1px solid var(--border)}
.rtp-tip-ic{color:var(--accent);font-size:10px;margin-top:3px;flex-shrink:0;opacity:.75}
.rtp-tip-tx{font-size:12px;color:var(--text-dim);line-height:1.65}

/* Rule rows */
.rtp-rule{display:flex;align-items:flex-start;gap:7px;padding:5px 0;border-top:1px solid var(--border)}
.rtp-rule-dot{color:var(--accent);font-size:10px;margin-top:3px;flex-shrink:0}
.rtp-rule-tx{font-size:12px;color:var(--text-dim);line-height:1.65}

/* Checklist */
.rtp-check{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12px;color:var(--text-dim);cursor:pointer;user-select:none}
.rtp-check-box{width:15px;height:15px;border-radius:3px;border:1px solid var(--border-mid);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;transition:all .12s}
.rtp-check-box.done{background:var(--accent);border-color:var(--accent);color:#000}

/* D&D callout card */
.rtp-dnd{border-radius:8px;padding:10px 13px;background:color-mix(in srgb,#5b80e0 7%,transparent);border:1px solid rgba(91,128,224,.18)}
.rtp-dnd-hdr{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--c-blue);margin-bottom:4px}
.rtp-dnd-body{font-size:12px;color:var(--text-dim);line-height:1.65}

/* SRD link */
.rtp-srd{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--accent);text-decoration:none;opacity:.8;margin-top:2px}
.rtp-srd:hover{opacity:1}

/* ══════════════════════════════════════════════════════════════
   DELIGHT ANIMATIONS — all 12 moments
══════════════════════════════════════════════════════════════ */

/* 1. Countdown triggered */
@keyframes cd-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes cd-name-pulse{0%{transform:scale(1)}30%{transform:scale(1.07)}70%{transform:scale(.97)}100%{transform:scale(1)}}
@keyframes cd-particle{0%{transform:translate(0,0) scale(1.2);opacity:1}100%{transform:translate(var(--px,20px),var(--py,-20px)) scale(0);opacity:0}}
@keyframes cd-outcome-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.cd-triggered-shake{animation:cd-shake .45s ease both}
.cd-particle{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--c-red);animation:cd-particle .55s ease-out both;pointer-events:none;top:50%;left:50%}
.cd-outcome-appear{animation:cd-outcome-in .35s ease both}

/* 2. Pin bounce + ring */
@keyframes pin-bounce{0%{transform:scale(1)}25%{transform:scale(1.5) rotate(-15deg)}55%{transform:scale(.82) rotate(8deg)}75%{transform:scale(1.12) rotate(-4deg)}100%{transform:scale(1) rotate(0deg)}}
@keyframes pin-ring{0%{transform:scale(.6);opacity:.9;border-width:2px}100%{transform:scale(2.4);opacity:0;border-width:1px}}
.pin-ring-el{position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--accent);animation:pin-ring .42s ease-out both;pointer-events:none;z-index:1}

/* 3. Dice spin + result slide */
@keyframes dice-spin{0%{transform:rotate(0) scale(1)}25%{transform:rotate(90deg) scale(.88)}50%{transform:rotate(180deg) scale(1.12)}75%{transform:rotate(270deg) scale(.88)}100%{transform:rotate(360deg) scale(1)}}
@keyframes result-slide{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.dice-spinning{animation:dice-spin .5s ease-in-out both;display:inline-block}
.result-card-appear{animation:result-slide .28s ease both}

/* 4. Contest trophy */
@keyframes trophy-spring{0%{transform:scale(0) rotate(-20deg);opacity:0}55%{transform:scale(1.3) rotate(5deg);opacity:1}80%{transform:scale(.92) rotate(-2deg)}100%{transform:scale(1) rotate(0)}  }

/* 5. Inspire ghost */
@keyframes inspire-fade-out{from{opacity:1;transform:scale(1)}to{opacity:.18;transform:scale(.97)}}
@keyframes inspire-select{0%{transform:scale(1)}30%{transform:scale(.95)}65%{transform:scale(1.03)}100%{transform:scale(1)}}

/* 6. Consequence severity pulse */
@keyframes sev-pulse{0%,100%{box-shadow:none}40%{box-shadow:0 0 0 4px color-mix(in srgb,var(--c-red) 28%,transparent)}}

/* 7. FP spend implosion + gain bloom */
@keyframes fp-spend{0%{transform:scale(1);opacity:1}30%{transform:scale(1.45);opacity:.8}65%{transform:scale(.4);opacity:.4}100%{transform:scale(0);opacity:0}}
@keyframes fp-gain{0%{transform:scale(0);opacity:0}60%{transform:scale(1.35);opacity:1}80%{transform:scale(.88)}100%{transform:scale(1);opacity:1}}

/* 8. Stress taken out flash */
@keyframes takenout-bg{0%{background:transparent}35%{background:color-mix(in srgb,var(--c-red) 14%,transparent)}100%{background:transparent}}
@keyframes takenout-label{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}

/* 9. Milestone check spring + strikethrough */
@keyframes check-spring{0%{transform:scale(0)}55%{transform:scale(1.3)}80%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes strike-reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0% 0 0)}}
.milestone-check-pop{animation:check-spring .28s cubic-bezier(.34,1.56,.64,1) both}
.milestone-strike span{display:inline;background:linear-gradient(var(--text-muted),var(--text-muted)) no-repeat 0 55%;background-size:0% 1.5px;transition:background-size .3s ease .05s}
.milestone-strike.done span{background-size:100% 1.5px}

/* 10. Session Zero step complete */
@keyframes sz-slide{from{opacity:0;transform:translateX(7px)}to{opacity:1;transform:translateX(0)}}

/* 11. Typewriter cursor blink between sentences */
@keyframes tw-blink{0%,100%{opacity:1}50%{opacity:0}}

/* 12. Roll streak pulse */
@keyframes streak-pulse{0%{box-shadow:none}40%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent),0 0 16px color-mix(in srgb,var(--accent) 20%,transparent)}100%{box-shadow:none}}
@keyframes streak-badge{from{opacity:0;transform:translateY(-6px) scale(.7)}50%{transform:translateY(1px) scale(1.1)}to{opacity:1;transform:translateY(0) scale(1)}}
.streak-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:700;background:var(--accent);color:#000;border-radius:100px;padding:1px 5px;animation:streak-badge .35s cubic-bezier(.34,1.56,.64,1) both;pointer-events:none}

/* ── WS-06/07: PWA banners — update / safari-warn / ios-install ──────────── */
.pwa-banner{
  position:fixed;top:0;left:0;right:0;z-index:9000;
  display:flex;align-items:center;gap:8px;
  padding:9px 16px;
  font-size:var(--text-sm);font-family:var(--font-ui);
  border-bottom:1px solid;
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  animation:bannerIn 0.25s ease both;
  min-height:44px;
}
@keyframes bannerIn{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}
.pwa-banner-icon{font-size:15px;flex-shrink:0}
.pwa-banner-msg{flex:1;color:var(--text);line-height:1.35}
.pwa-banner-action{
  padding:4px 14px;border-radius:100px;font-size:12px;font-weight:700;
  font-family:var(--font-ui);cursor:pointer;white-space:nowrap;
  border:1px solid;transition:opacity .15s;
}
.pwa-banner-action:hover{opacity:.85}
.pwa-banner-dismiss{
  background:none;border:none;cursor:pointer;
  color:var(--text-muted);font-size:16px;line-height:1;
  padding:4px;flex-shrink:0;opacity:.7;transition:opacity .15s;
}
.pwa-banner-dismiss:hover{opacity:1}
/* update — accent-tinted */
  background:color-mix(in srgb,var(--accent) 14%,rgba(0,0,0,0.82));
  border-color:color-mix(in srgb,var(--accent) 40%,transparent);
}
[data-theme="light"] .pwa-banner-update{
  background:color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,0.92));
}
  background:var(--accent);border-color:var(--accent);color:#000;
}
/* safari warn — amber */
  background:color-mix(in srgb,#FF9500 10%,rgba(0,0,0,0.82));
  border-color:rgba(255,149,0,.35);
}
[data-theme="light"] .pwa-banner-warn{
  background:color-mix(in srgb,#FF9500 8%,rgba(255,255,255,0.92));
}
/* ios install — blue */
  background:color-mix(in srgb,var(--c-blue) 10%,rgba(0,0,0,0.82));
  border-color:rgba(90,200,250,.30);
}
[data-theme="light"] .pwa-banner-ios{
  background:color-mix(in srgb,var(--c-blue) 8%,rgba(255,255,255,0.92));
}

/* ── UX-17: Session Pack ────────────────────────────────────────────── */
.sp-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 8px;border-bottom:1px solid var(--border)}
.sp-header-title{display:flex;align-items:center;gap:6px;font-size:var(--text-sm);font-weight:700;color:var(--text)}
.sp-header-icon{font-size:14px}
.sp-header-actions{display:flex;gap:6px}
.sp-meta{font-size:var(--text-label);color:var(--text-muted);padding:6px 16px 10px;letter-spacing:.02em}
.sp-card{border-top:1px solid var(--border)}
.sp-card-header{display:flex;align-items:center;gap:7px;padding:10px 16px 6px;cursor:default}
.sp-card-icon{font-size:14px;color:var(--accent);line-height:1}
.sp-card-label{font-size:var(--text-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.sp-card-body{padding:0 16px 14px}
/* Full Session sidebar button */
.full-session-badge{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--accent);color:var(--bg);font-size:10px;font-weight:700;margin-left:auto;flex-shrink:0}
/* vault-row styles deduplicated — see single definition above */
.vault-btn{font-size:12px!important;padding:4px 8px!important;min-height:44px!important;border:1px solid var(--border)!important;border-radius:4px!important}
@media(pointer:fine){.vault-btn{min-height:28px!important}}
.vault-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border)}
.vault-row:last-child{border-bottom:none}
.vault-row-info{flex:1;min-width:0}
.vault-row-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vault-row-meta{font-size:11px;color:var(--text-muted);margin-top:2px}
.vault-row-actions{display:flex;gap:4px;flex-shrink:0}

/* ── Extracted utility classes (from repeated inline styles) ─────────────── */
.cd-box {
  width: 48px; height: 48px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
}
.contest-box {
  width: 48px; height: 48px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
}
.seed-scene-tab {
  flex: 1;
  padding: 10px 8px;
  min-height: 48px;
  border: 1px solid;
  cursor: pointer;
  border-radius: 8px;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-ui);
  transition: all 0.15s;
}
.btn-xs { font-size: 12px; padding: 4px 12px; min-height: 0; }
.btn-nav { font-size: 13px; text-decoration: none; flex: 1; justify-content: center; }
.section-cap {
  font-size: var(--text-label);
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 4px;
}
.text-label-muted { font-size: var(--text-label); color: var(--text-muted); }

/* ── Inline intro (result area + landing + guide teasers) ──────────────── */

.land-intro-teaser {
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
  overflow: hidden;
  margin: 16px auto 0;
}
#guide-intro-teaser {
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 560px;
  min-height: 200px; /* ensures container has height before aspect-ratio resolves */
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  scroll-margin-top: 0; /* anchored at top of viewport when linked */
}
/* Override large-screen scaling designed for fullscreen overlay */
.land-intro-teaser .fate-intro-inline,
#guide-intro-teaser .fate-intro-inline {
  font-size: 13px !important;
  padding: 20px 24px 36px !important;
}
.land-intro-teaser .fate-intro-content,
#guide-intro-teaser .fate-intro-content {
  max-width: 100% !important;
}

/* ── Centering for all inline intro containers ─────────────────────────────── */
.fate-intro-inline .fate-intro-content {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ── Print: hide topbar and sidebar ──────────────────────────────────────── */
@media print{
  .topbar,.sidebar,.sidebar-backdrop{display:none!important}
  .app-body{display:block!important}
  .content-panel{display:block!important}
}

/* ── Sidebar focus-visible accessibility ─────────────────────────────────── */

/* ══ TOPBAR GENRE TAG (BL-15 redesign) ═══════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   TOPBAR — Unified chrome for all 18 pages (React + static)
   All findings: W1 skip, W2 44px, H1 status, H4 consistency,
   H8 wordmark, H9 offline, IA2 nav, IA3 breadcrumb
═══════════════════════════════════════════════════════════════ */

/* Wordmark replaces full OGMA acronym (H8) */
.topbar-wordmark{font-size:13px;font-weight:800;color:var(--accent);letter-spacing:.06em;flex-shrink:0;text-decoration:none;white-space:nowrap;padding:0 2px}

/* Thin separator */
.topbar-sep{width:1px;height:16px;background:var(--border-bright);flex-shrink:0;margin:0 2px}

/* Breadcrumb trail (IA3) */
.topbar-crumb{flex:1;min-width:0;display:flex;align-items:center;gap:4px;overflow:hidden}
.topbar-crumb-item{font-size:11px;color:var(--text-muted);white-space:nowrap;text-decoration:none;transition:color .12s;overflow:hidden;text-overflow:ellipsis}
.topbar-crumb-item:hover{color:var(--text-dim)}
.topbar-crumb-item.current{color:var(--text-dim);font-weight:500}
.topbar-crumb-sep{font-size:11px;color:var(--border-bright);flex-shrink:0;pointer-events:none;user-select:none}

/* Status zone — chips on the right (H1, H4, H6, H9) */
.topbar-status{display:flex;align-items:center;gap:4px;flex-shrink:0}
.topbar-chip:hover{opacity:.8}
@keyframes tb-blink{0%,100%{opacity:1}50%{opacity:.45}}

/* Topbar hamburger raised to 44px (W2) — display controlled by media queries above */
.topbar-hamburger{flex-shrink:0;font-size:16px;width:44px;height:44px;padding:0;align-items:center;justify-content:center}

/* Nav link inside topbar for static pages */
.topbar-nav-btn{font-size:12px!important;padding:4px 8px!important;min-height:44px;text-decoration:none}
.topbar-nav-hide-sm{display:none}
@media(min-width:640px){.topbar-nav-hide-sm{display:inline-flex}}

/* Static page topbar — unify land-topnav with React topbar */

.land-topnav-brand{display:none}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR TABS — Generate / Session (Concept A)
═══════════════════════════════════════════════════════════════ */
.sidebar-tab-bar{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
.sidebar-tab-btn{flex:1;height:44px;font-size:12px;font-weight:500;border:none;cursor:pointer;font-family:var(--font-ui);background:transparent;color:var(--text-muted);border-bottom:2px solid transparent;transition:all .12s}
.sidebar-tab-btn:hover{color:var(--text-dim)}
.sidebar-tab-btn.active{color:var(--text);border-bottom-color:var(--accent);background:var(--panel-raised)}
.sidebar-tab-btn:focus-visible{outline:2px solid var(--focus-ring,var(--accent));outline-offset:-2px}
.sidebar-panel{display:none;flex-direction:column;flex:1;overflow-y:auto;overflow-x:hidden}
.sidebar-panel.active{display:flex}
.sidebar-panel::-webkit-scrollbar{width:3px}
.sidebar-panel::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:2px}
.sidebar-aria-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;pointer-events:none}

/* ── GM block inside Session tab ─────────────────────────────── */

/* ── ToggleSwitch inside sidebar — 44px tap target wrapper (W2) */
.sidebar-tog-wrap:focus-visible{outline:2px solid var(--focus-ring,var(--accent));border-radius:4px}

/* ── Help level pill in sidebar ──────────────────────────────── */

/* ── Help level picker drawer ────────────────────────────────── */

/* ══ SIDEBAR REDESIGN ════════════════════════════════════════════════════════ */
.sidebar-divider{height:1px;background:var(--border);margin:4px 0;flex-shrink:0}
.sidebar-group-label{font-size:var(--text-label);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);padding:8px 14px 4px;display:block}
.sidebar-item-icon{width:20px;text-align:center;flex-shrink:0;font-size:16px}
.sidebar-item-label{flex:1;font-size:var(--text-sm);color:var(--text-dim)}
.sidebar-tool-btn{display:flex;align-items:center;gap:8px;width:100%;padding:12px 14px;min-height:44px;background:transparent;border:1px solid transparent;border-radius:6px;cursor:pointer;text-align:left;transition:all 0.12s;text-decoration:none}
.sidebar-tool-btn:hover{background:var(--glass-bg);color:var(--text)}
.sidebar-tool-btn:hover .sidebar-item-label{color:var(--text)}
.sidebar-tool-btn.active,.sidebar-tool-btn.active .sidebar-item-label{color:var(--accent)}
.sidebar-tool-btn.active{background:color-mix(in srgb,var(--accent) 10%,transparent);border-color:color-mix(in srgb,var(--accent) 25%,transparent)}
.sidebar-gen-item{display:flex;align-items:center;gap:8px;width:100%;padding:12px 14px;min-height:44px;background:transparent;border:none;cursor:pointer;text-align:left;border-radius:6px;transition:background 0.12s;text-decoration:none}
.sidebar-gen-item:hover{background:var(--glass-bg)}
.sidebar-gen-item.active{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.sidebar-gen-item.active .sidebar-item-label{color:var(--accent);font-weight:600}
.sidebar-gen-item.active .sidebar-item-icon{color:var(--accent)}
/* GM Mode badge */
/* Settings row */
/* Legal footer */
.sidebar-legal{padding:12px 14px 16px;font-size:10px;color:var(--text-muted);line-height:1.6;border-top:1px solid var(--border);margin-top:auto;flex-shrink:0}

/* ══ LANDING PAGE REDESIGN ═══════════════════════════════════════════════════ */
.land-shell{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
/* Top nav */
.land-topnav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:52px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
.land-topnav-brand{font-size:var(--text-sm);font-weight:400;color:var(--accent);text-decoration:none;letter-spacing:0.01em;display:flex;align-items:center}
.land-topnav-actions{display:flex;align-items:center;gap:6px;position:relative}
/* R-03: Static page mobile nav — hamburger + dropdown */
.land-topnav-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--glass-radius);padding:6px;min-width:180px;z-index:200;box-shadow:0 8px 32px rgba(0,0,0,0.4);flex-direction:column;gap:2px}
.land-topnav-dropdown.open{display:flex}
.land-topnav-dropdown a,.land-topnav-dropdown button{display:flex;align-items:center;padding:10px 12px;border-radius:6px;font-size:13px;color:var(--text-dim);text-decoration:none;background:none;border:none;cursor:pointer;width:100%;text-align:left;transition:background 0.12s;font-family:var(--font-ui)}
.land-topnav-dropdown a:hover,.land-topnav-dropdown button:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text)}
@media(max-width:640px){
}
/* Hero */
.land-hero{padding:60px 20px 40px;text-align:center;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 4%,var(--bg)) 0%,var(--bg) 100%)}
.land-hero-inner{max-width:680px;margin:0 auto}
.land-hero-eyebrow{font-size:var(--text-label);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
/* OGMA acrostic letters — larger, green glow pulse, staggered */
@keyframes ogma-pulse{
  0%,100%{text-shadow:0 0 6px #30D158,0 0 14px rgba(48,209,88,0.4);color:#30D158;transform:scale(1)}
  50%{text-shadow:0 0 12px #30D158,0 0 28px rgba(48,209,88,0.7),0 0 48px rgba(48,209,88,0.3);color:#5EE37A;transform:scale(1.12)}
}
.ogma-letter{
  font-size:1.55em;
  color:var(--c-green);
  display:inline-block;
  animation:ogma-pulse 2.8s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * 0.35s);
  will-change:transform,text-shadow;
}
.land-hero-title{font-size:clamp(28px,5vw,48px);font-weight:800;line-height:1.1;letter-spacing:-0.03em;color:var(--text);margin-bottom:16px}
.land-hero-sub{color:var(--text-muted)}
.land-hero-desc{font-size:var(--text-base);color:var(--text-dim);line-height:1.7;max-width:700px;white-space:nowrap;margin:0 auto 24px}
.land-hero-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
@media(max-width:720px){.land-hero-desc{white-space:normal}}
.land-hero-pill{font-size:var(--text-label);color:var(--text-muted);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:100px;padding:4px 12px}
/* Section layout */
.land-worlds-inner{max-width:800px;margin:0 auto;padding:0 20px}
.land-section-heading{font-size:var(--text-xl);font-weight:800;letter-spacing:-0.02em;color:var(--text);margin-bottom:20px}
/* Worlds grid */
.land-worlds-section{padding:40px 0}
.land-worlds-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.land-worlds-grid{grid-template-columns:1fr}}
.land-world-card{display:block;text-decoration:none;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--glass-radius);overflow:hidden;transition:all 0.15s;animation:fadeUp 0.35s ease both;position:relative}
.land-world-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--glass-inset),0 8px 32px rgba(0,0,0,0.25)}
.land-world-card-accent{height:3px;background:var(--accent)}
.land-world-card-body{display:flex;align-items:center;gap:12px;padding:14px 16px 8px}
.land-world-icon{font-size:24px;flex-shrink:0}
.land-world-info{flex:1;min-width:0}
.land-world-name{font-size:var(--text-base);font-weight:700;color:var(--accent);line-height:1.2}
.land-world-genre{display:inline-block;font-size:10px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:100px;padding:2px 8px;margin-top:4px}
.land-world-hook{font-size:var(--text-sm);color:var(--text-dim);margin-top:4px;line-height:1.4}
.land-world-arrow{font-size:var(--text-lg);color:var(--text-muted);flex-shrink:0}
.land-world-vibes{font-size:var(--text-label);color:var(--text-muted);font-style:italic;line-height:1.4;padding:0 16px 12px;flex:1}
/* Onboarding paths */
.land-onboard-section{padding:40px 0;border-top:1px solid var(--border)}
/* JOIN-01: Join a Table */
.land-join-section{padding:40px 0;border-top:1px solid var(--border)}
.land-section-sub{font-size:var(--text-sm);color:var(--text-muted);margin:4px 0 20px;max-width:480px}
.land-join-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.land-join-input{flex:1;min-width:180px;max-width:220px;padding:10px 14px;border-radius:8px;border:1px solid var(--border-mid);background:var(--inset);color:var(--text);font-size:22px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;font-family:var(--font-mono,monospace);outline:none;transition:border-color .15s}
.land-join-input:focus{border-color:var(--accent)}
.land-join-input::placeholder{font-weight:400;letter-spacing:.05em;font-size:14px;text-transform:none;opacity:.5}
.land-join-btn{padding:10px 22px;font-size:15px;font-weight:700;background:var(--accent);color:#000;border:none;border-radius:8px;cursor:pointer;transition:opacity .15s}
.land-join-btn:hover:not(:disabled){opacity:.85}
.land-join-btn:disabled{opacity:.35;cursor:not-allowed}
.land-join-err{margin-top:8px;font-size:12px;color:var(--c-red);font-weight:600}
.land-onboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:640px){.land-onboard-grid{grid-template-columns:1fr}}
.land-onboard-card{display:flex;align-items:center;gap:12px;padding:16px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--glass-radius);text-decoration:none;transition:all 0.15s}
.land-onboard-card:hover{border-color:var(--accent)}
.land-onboard-icon{font-size:24px;flex-shrink:0}
.land-onboard-text{flex:1;min-width:0}
.land-onboard-label{font-size:var(--text-sm);font-weight:700;color:var(--text);margin-bottom:3px}
.land-onboard-desc{font-size:var(--text-label);color:var(--text-dim);line-height:1.5}
.land-onboard-arrow{font-size:var(--text-lg);color:var(--text-muted);flex-shrink:0}
/* Generators section */
.land-generators-section{padding:40px 0;border-top:1px solid var(--border)}
@media(max-width:560px){.land-gen-groups{grid-template-columns:1fr}}
/* Footer */
.land-footer{margin-top:auto;padding:24px 20px;border-top:1px solid var(--border);font-size:var(--text-label);color:var(--text-muted);text-align:center}
.land-footer-inner{max-width:800px;margin:0 auto}
.land-footer a{color:var(--text-dim);text-decoration:none}.land-footer a:hover{color:var(--accent)}

/* ── R-13: Sticky Roll FAB ─────────────────────────────────────────────────── */
.roll-fab{position:fixed;bottom:24px;right:20px;z-index:250;width:56px;height:56px;border-radius:50%;background:var(--accent);border:none;color:#fff;font-size:22px;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;transition:transform 0.15s,opacity 0.15s;animation:fadeUp 0.2s ease both}
.roll-fab:hover{transform:scale(1.08)}
.roll-fab:active{transform:scale(0.95)}
.roll-fab:disabled{opacity:0.5;cursor:not-allowed}
@media(min-width:641px){.roll-fab{display:none!important}}

/* ── R-11: Continue → button ────────────────────────────────────────────────── */
.land-continue-btn{display:inline-flex;align-items:center;gap:6px;margin-top:20px;padding:10px 20px;background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:var(--glass-radius-pill);color:var(--accent);font-size:var(--text-sm);font-weight:600;text-decoration:none;transition:all 0.15s}
.land-continue-btn:hover{background:color-mix(in srgb,var(--accent) 20%,transparent)}
.land-continue-arrow{opacity:0.7}

/* ── World card guide link ─────────────────────────────────────────────────── */
.land-world-footer{display:flex;align-items:center;justify-content:space-between;padding:0 16px 12px;gap:8px}

.land-world-guide-link{font-size:var(--text-label);color:var(--accent);text-decoration:none;white-space:nowrap;opacity:0.8;transition:opacity 0.15s;flex-shrink:0}
.land-world-guide-link:hover{opacity:1;text-decoration:underline}

/* ══ MOBILE PAINT PERFORMANCE ══
   Reduce backdrop-filter cost on phones. blur(40px) is imperceptible
   vs blur(16px) at 375px but meaningfully cheaper to composite.
   saturate() adds a second compositor pass - drop at mobile sizes.
   Only apply to the three elements with will-change:filter.     */
@media (max-width: 600px) {
  .topbar, .sidebar, .modal-overlay {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  /* Disable orb animations on mobile - they're invisible but burn paint budget */
  body::before, body::after { display: none; }
}

/* ══ CAMPAIGN PAGE CONTENT FOOTER ══ */
.camp-content-footer{text-align:center;padding:20px 16px 32px;font-size:11px;color:var(--text-muted);border-top:1px solid var(--border);margin-top:auto;flex-shrink:0}
.camp-content-footer-link{color:var(--text-muted);text-decoration:underline;opacity:0.7}
.camp-content-footer-link:hover{opacity:1}

/* ══ LANDING GEN ITEM SUB TEXT ══ */


/* ══ UNIFIED ACTION BAR (replaces roll-hero + panel-toolbar) ══
   Roll + Inspire are primary; Rules / Share / Pin secondary pushed right.
   Works on desktop (row) and mobile (wraps cleanly). */
.action-bar{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:10px 14px;border-bottom:1px solid var(--border);
  background:rgba(255,255,255,0.02);
}
/* Roll button inside action-bar: fills natural width, no min-width */
  flex-shrink:0;padding:10px 24px;min-height:44px;min-width:0;
  font-size:var(--text-base);
}
/* Inspire: explicit label, accent on active */
  flex-shrink:0;min-height:44px;padding:6px 14px;
  display:inline-flex;align-items:center;gap:5px;
}
/* Contextual pills (consequence severity / party size) */
/* Divider between groups */
/* Secondary group pushed to right */
/* Icon-only secondary buttons */
/* Mobile: Roll takes full row, rest wraps below */
@media(max-width:480px){
}
/* ═══ FIELD DOSSIER — card system (Design D) ═══ */
.fd-card{background:var(--panel,var(--glass-bg));border:0.5px solid var(--border);border-radius:var(--glass-radius);overflow:hidden;border-top:3px solid var(--accent)}
.fd-id{padding:10px 14px;display:flex;align-items:center;gap:10px;border-bottom:0.5px solid var(--border);flex-wrap:wrap}
.fd-name{font-size:18px;font-weight:700;color:var(--text);flex:1;min-width:0;font-family:var(--font-ui)}
.fd-body{display:grid;grid-template-columns:1fr 1fr;gap:0}
.fd-col{border-right:0.5px solid var(--border)}.fd-col:last-child{border-right:none}
@media(max-width:520px){.fd-body{grid-template-columns:1fr}.fd-col{border-right:none;border-bottom:0.5px solid var(--border)}.fd-col:last-child{border-bottom:none}}
.fd-hdr{padding:5px 12px;font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--section-hdr);border-bottom:1px solid color-mix(in srgb,var(--accent) 20%,transparent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.fd-sect{padding:6px 12px}
.fd-asp{padding:3px 0;font-size:13px;line-height:1.4;color:var(--text)}
.fd-asp-lbl{font-size:8px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;margin-right:4px;font-weight:700;cursor:help}
/* ── ASPECT QUALITY SIGNAL ─────────────────────────────────────────────── */
.fd-asp-quality:hover{opacity:1}

.fd-hc{color:var(--c-blue);font-weight:600}.fd-tr{color:var(--c-red);font-weight:600}
.fd-sk{display:flex;align-items:center;gap:5px;padding:2px 0;font-size:13px}
.fd-skr{background:var(--accent-dim);color:var(--bg,#fff);width:26px;height:20px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;border-radius:2px;flex-shrink:0}
.fd-skn{color:var(--text)}.fd-skl{font-size:10px;color:var(--text-muted);margin-left:auto}
.fd-str{display:flex;align-items:center;gap:8px;padding:3px 0;flex-wrap:wrap}
.fd-strl{font-size:11px;color:var(--text-muted);text-transform:uppercase;font-weight:700;min-width:44px}
.fd-box{width:48px;height:48px;border:1.5px solid var(--accent-dim);background:var(--inset,rgba(255,255,255,0.03));border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text);transition:all 0.15s;position:relative}
.fd-box.on{background:var(--c-red);border-color:var(--c-red);color:var(--bg,#fff)}
.fd-box:hover:not(.on){background:color-mix(in srgb,var(--c-red) 12%,transparent)}
.fd-con{display:flex;align-items:center;gap:6px;padding:3px 0;font-size:12px}
.fd-con-num{width:22px;height:22px;border:1.5px solid var(--accent-dim);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--accent-dim);flex-shrink:0;border-radius:2px;cursor:help}
.fd-con-sev{color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:0.06em;font-weight:700;min-width:52px}
.fd-con-slot{flex:1;border-bottom:1px dashed var(--border);min-height:16px}
.fd-st{padding:3px 0;font-size:12px}.fd-stn{font-weight:700;color:var(--accent)}.fd-std{color:var(--text-muted)}
.fd-zone{padding:5px 0;border-bottom:0.5px solid var(--border);font-size:13px}.fd-zone:last-child{border-bottom:none}
.fd-zn{font-weight:600;color:var(--text)}.fd-za{color:var(--gold,var(--accent));font-style:italic;font-size:12px;margin-top:1px}.fd-zd{color:var(--text-muted);font-size:11px;margin-top:1px}
.fd-badge.danger{background:rgba(255,80,80,0.12);color:var(--c-red)}.fd-badge.cover{background:rgba(80,144,208,0.12);color:var(--c-blue)}.fd-badge.usable{background:rgba(80,200,120,0.12);color:var(--c-green)}.fd-badge.movement{background:rgba(240,180,60,0.12);color:var(--gold,var(--accent))}.fd-badge.tone{background:rgba(160,120,240,0.12);color:var(--c-purple)}
.fd-twist{padding:7px 12px;margin:0;border-left:3px solid var(--c-red);background:color-mix(in srgb,var(--c-red) 5%,transparent);font-size:13px;font-style:italic;color:var(--text);line-height:1.4}
.fd-opp{margin:4px 0;border:0.5px solid var(--border);border-radius:var(--glass-radius-sm,6px);overflow:hidden}
.fd-opph{background:color-mix(in srgb,var(--accent) 6%,transparent);padding:5px 10px;display:flex;align-items:center;gap:6px}
.fd-oppn{font-size:13px;font-weight:700;color:var(--text);flex:1}.fd-oppt{font-size:8px;text-transform:uppercase;letter-spacing:0.06em;padding:1px 6px;border-radius:2px;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent-dim)}
.fd-oppb{padding:5px 10px;font-size:12px;color:var(--text-muted);line-height:1.5}
.fd-oppb b{color:var(--text);font-weight:600}
.fd-oppa{color:var(--gold,var(--accent));font-style:italic}
.fd-cond{display:flex;align-items:baseline;gap:6px;padding:4px 0;font-size:13px;border-bottom:0.5px solid var(--border);position:relative;overflow:hidden}.fd-cond:last-child{border-bottom:none}
.fd-cl{font-size:11px;text-transform:uppercase;font-weight:700;min-width:46px;flex-shrink:0;letter-spacing:0.06em}
.fd-fp{display:flex;align-items:center;gap:8px;padding:6px 12px}
.fd-fpd{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--accent);cursor:pointer;transition:all 0.15s}
.fd-fpd.spent{background:var(--accent);color:var(--bg,#000)}
.fd-fpl{font-size:10px;color:var(--text-muted);margin-left:auto}
.fd-gm{padding:7px 12px;background:color-mix(in srgb,var(--accent) 4%,transparent);border-top:0.5px solid var(--border);font-size:11px;color:var(--text-muted);line-height:1.5}
.fd-gm b{color:var(--text);font-weight:600}
.fd-infobox{padding:8px 12px;margin:4px 0;border-radius:var(--glass-radius-sm,6px);border:0.5px solid;font-size:13px;line-height:1.4;position:relative;overflow:hidden}
.fd-infobox-label{font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:2px}
.fd-infobox-text{color:var(--text)}
.fd-aspect-row{display:flex;align-items:center;gap:8px;padding:6px 10px;margin:3px 0;border-radius:6px;cursor:pointer;border:1px solid var(--border);background:var(--inset,rgba(255,255,255,0.03));transition:all 0.15s}
.fd-aspect-row:hover{border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.fd-aspect-check{width:16px;height:16px;border-radius:3px;flex-shrink:0;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--bg);transition:all 0.15s}
.fd-taken-out-label{font-size:10px;color:var(--c-red);font-weight:700;letter-spacing:0.06em;margin-left:6px;padding:2px 8px;border:1.5px solid var(--c-red);border-radius:4px;text-decoration:line-through;text-decoration-thickness:2px;animation:fd-takenout-flash 0.6s ease both}
@keyframes fd-takenout-flash{0%{opacity:0;transform:scale(0.85)}50%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
/* ══ DICE ROLLER WIDGET (UX-01) ══════════════════════════════════════════════ */
.dr-widget{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 20px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--glass-radius-sm,8px);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);max-width:340px;margin:12px auto}
.dr-top{display:flex;align-items:center;gap:8px;width:100%;justify-content:center;min-height:18px}
.dr-label{font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted)}
.dr-skill-badge{font-size:11px;color:var(--text-muted)}
.dr-skill-val{font-weight:700;color:var(--accent)}
.dr-dice-row{display:flex;gap:8px;min-height:44px;align-items:center;justify-content:center}
.dr-die{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:6px;font-size:18px;font-weight:800;border:2px solid;transition:all 0.1s}
.dr-die-pos{background:color-mix(in srgb,var(--c-green) 12%,transparent);border-color:color-mix(in srgb,var(--c-green) 40%,transparent);color:var(--c-green)}
.dr-die-neg{background:color-mix(in srgb,var(--c-red) 12%,transparent);border-color:color-mix(in srgb,var(--c-red) 40%,transparent);color:var(--c-red)}
.dr-die-zero{background:color-mix(in srgb,var(--text-muted) 8%,transparent);border-color:var(--border-mid);color:var(--text-muted)}
.dr-die-hidden{background:var(--inset,rgba(255,255,255,0.04));border-color:var(--border);color:var(--text-muted);opacity:.7}
@keyframes dr-spin{0%{transform:rotate(0) scale(.8);opacity:.4}50%{transform:rotate(180deg) scale(1.1);opacity:.9}100%{transform:rotate(360deg) scale(1);opacity:1}}
@keyframes dr-pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}
.dr-die-spin{animation:dr-spin 0.16s ease both}
.dr-die-pop{animation:dr-pop 0.22s cubic-bezier(.34,1.56,.64,1) both}
.dr-result-row{min-height:32px;display:flex;align-items:center;gap:8px;justify-content:center}
.dr-result-placeholder{font-size:12px;color:var(--text-muted)}
.dr-total{font-size:24px;font-weight:800;letter-spacing:-0.02em;line-height:1}
.dr-adj{font-size:13px;font-weight:600}
.dr-outcome{font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:2px 8px;border-radius:4px}
.dr-btn{padding:8px 24px;border-radius:100px;border:1px solid var(--glass-border);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-size:13px;font-weight:700;cursor:pointer;transition:all 0.15s;font-family:inherit;min-height:36px}
.dr-btn:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 22%,transparent);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.dr-btn:disabled{opacity:.5;cursor:not-allowed}

/* ══ UX-03: LANDING NPC DEMO ═════════════════════════════════════════════════ */
.land-npc-demo-section{padding:40px 0;background:color-mix(in srgb,var(--accent) 3%,transparent);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.land-npc-demo-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.land-npc-demo-sub{font-size:var(--text-sm);color:var(--text-muted);margin:0;line-height:1.5}
.land-npc-demo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.land-npc-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--glass-radius);padding:18px 20px;backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);box-shadow:var(--glass-inset),var(--glass-shadow);display:flex;flex-direction:column;gap:10px}
.land-npc-world{font-size:10px;font-weight:700;letter-spacing:0.10em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:4px}
.land-npc-concept{font-size:var(--text-base);font-weight:700;color:var(--text);line-height:1.35}
.land-npc-label{font-size:11px;font-weight:700;letter-spacing:0.10em;text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:2px}
.land-npc-trouble{border-left:2px solid var(--c-red);padding-left:10px}
.land-npc-trouble-text{font-size:var(--text-sm);color:var(--text-dim);font-style:italic;line-height:1.4}
.land-npc-row{display:flex;gap:16px}
.land-npc-skill{font-size:var(--text-sm);color:var(--text-dim)}
.land-npc-stunt{background:color-mix(in srgb,var(--accent) 5%,transparent);border:1px solid color-mix(in srgb,var(--accent) 15%,transparent);border-radius:6px;padding:8px 10px}
.land-npc-stunt-text{font-size:11px;color:var(--text-dim);line-height:1.55}
@media(max-width:640px){.land-npc-demo-grid{grid-template-columns:1fr}.land-npc-demo-hdr{flex-direction:column}.land-npc-shuffle-btn{width:100%}}

/* ══ SPA-04 / UX-04 — Unified top nav tabs ═══════════════════════════════════ */
.topbar-tabs{display:flex;align-items:center;gap:1px;flex-shrink:0;height:44px;margin-left:4px}
.topbar-tab{display:inline-flex;align-items:center;gap:5px;height:44px;padding:0 10px;font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--text-muted);text-decoration:none;border:none;background:none;cursor:pointer;font-family:var(--font-ui);white-space:nowrap;border-bottom:2px solid transparent;transition:color .12s,border-color .12s;position:relative;top:1px}
.topbar-tab:hover{color:var(--text)}
.topbar-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.topbar-tab-icon{font-size:13px;line-height:1}
@media(max-width:700px){.topbar-tab-label{display:none}}
@media(max-width:480px){.topbar-tabs{display:none}}

/* ══ WS-09 — Compact card view ═══════════════════════════════════════════════ */
/* Toggle button in action-bar */
/* compact-toggle-btn.active — see definition below */
/* Compact mode — collapse section gaps, shrink font, hide GM tips */
[data-compact="true"] .fd-card{border-radius:6px}
[data-compact="true"] .fd-sect{padding:4px 0}
[data-compact="true"] .fd-hdr{padding:3px 10px;font-size:8px}
[data-compact="true"] .fd-asp{padding:4px 10px;font-size:12px}
[data-compact="true"] .fd-skill{padding:2px 10px;font-size:11px}
[data-compact="true"] .fd-stunt{padding:4px 10px}
[data-compact="true"] .fd-st{font-size:11px;padding:2px 0}
[data-compact="true"] .fd-gm{display:none}
[data-compact="true"] .fd-zone{font-size:11px;padding:3px 0}
[data-compact="true"] .fd-twist{padding:5px 10px;font-size:12px}
[data-compact="true"] .fd-infobox{padding:5px 10px;font-size:12px}
[data-compact="true"] .fd-con-row{padding:3px 10px}
[data-compact="true"] .fd-fpd{width:40px;height:40px;font-size:12px}
[data-compact="true"] .fd-fp{padding:4px 10px}
[data-compact="true"] .fd-opp{margin:2px 0}
[data-compact="true"] .fd-opph{padding:3px 8px}
[data-compact="true"] .fd-oppb{padding:3px 8px;font-size:11px}
[data-compact="true"] .rtp-dnd{padding:7px 11px}
[data-compact="true"] .rtp-dnd-body{font-size:11px}

/* ══ WS-12: QUICK FIND BAR ═══════════════════════════════════════════════════ */
.qf-overlay{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,0.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding-top:clamp(60px,12vh,140px);animation:qfIn 0.15s ease both}
@keyframes qfIn{from{opacity:0}to{opacity:1}}
.qf-box{width:min(580px,calc(100vw - 32px));background:var(--panel-raised,var(--glass-bg));border:1px solid var(--glass-border);border-radius:var(--glass-radius);box-shadow:0 24px 64px rgba(0,0,0,0.45),var(--glass-inset);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);overflow:hidden;animation:qfBoxIn 0.18s cubic-bezier(.34,1.56,.64,1) both}
@keyframes qfBoxIn{from{transform:scale(.95) translateY(-8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.qf-input-row{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border)}
.qf-search-icon{font-size:16px;flex-shrink:0;opacity:.6}
.qf-input{flex:1;background:none;border:none;font-size:var(--text-base);color:var(--text);font-family:var(--font-ui);caret-color:var(--accent)}
.qf-input::placeholder{color:var(--text-muted)}
.qf-esc-hint{font-size:10px;padding:2px 6px;border-radius:4px;background:var(--inset,rgba(255,255,255,0.06));border:1px solid var(--border);color:var(--text-muted);flex-shrink:0}
.qf-results{max-height:320px;overflow-y:auto;padding:6px}
.qf-empty{padding:20px 16px;text-align:center;font-size:var(--text-sm);color:var(--text-muted)}
.qf-result{width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;border:none;background:transparent;cursor:pointer;text-align:left;font-family:var(--font-ui);transition:background .08s}
.qf-result:hover,.qf-result-active{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.qf-result-icon{font-size:16px;flex-shrink:0;width:22px;text-align:center}
.qf-result-body{flex:1;min-width:0}
.qf-result-label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qf-result-sub{display:block;font-size:11px;color:var(--text-muted);margin-top:1px}
.qf-footer{display:flex;gap:16px;padding:8px 14px;border-top:1px solid var(--border);font-size:11px;color:var(--text-muted)}
.qf-footer kbd{background:var(--inset,rgba(255,255,255,0.06));border:1px solid var(--border);border-radius:3px;padding:1px 5px;font-size:10px;font-family:'Courier New',monospace;color:var(--text-dim)}

/* ══ STUNT-02: STUNT SUGGESTER (NPC card sub-feature) ════════════════════════ */
.stunt-suggester{margin:8px 0 4px;border-top:1px solid var(--border);padding-top:8px}
.stunt-suggest-btn{display:flex;align-items:center;gap:7px;background:none;border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:11px;font-weight:600;color:var(--text-dim);cursor:pointer;transition:all .12s;width:100%;text-align:left;font-family:var(--font-ui)}
.stunt-suggest-btn:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.stunt-suggest-icon{color:var(--accent);font-size:10px}
.stunt-suggest-chevron{margin-left:auto;font-size:10px;transition:transform .15s;display:inline-block}
.stunt-suggest-panel{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.stunt-suggest-eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:2px}
.stunt-suggest-eyebrow em{font-style:italic;font-weight:400;text-transform:none;color:var(--text-dim)}
.stunt-suggest-list{display:flex;flex-direction:column;gap:5px}
.stunt-suggest-card{background:color-mix(in srgb,var(--accent) 5%,transparent);border:1px solid color-mix(in srgb,var(--accent) 15%,transparent);border-radius:5px;padding:7px 10px}
.stunt-suggest-header{display:flex;align-items:baseline;gap:6px;margin-bottom:3px;flex-wrap:wrap}
.stunt-suggest-name{font-size:var(--text-sm);font-weight:700;color:var(--text)}
.stunt-suggest-type{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.stunt-suggest-skill{font-size:11px;color:var(--text-muted);margin-left:auto}
.stunt-suggest-desc{font-size:11px;color:var(--text-dim);line-height:1.5}
.stunt-suggest-reroll{background:none;border:none;font-size:11px;color:var(--text-muted);cursor:pointer;padding:4px 0 0;text-align:left;font-family:var(--font-ui);transition:color .1s}
.stunt-suggest-reroll:hover{color:var(--accent)}

/* ══ CHAIN-01/02: CONNECTED CHAINS ══════════════════════════════════════════ */
.chain-roll-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0 2px;border-top:1px solid var(--border);margin-top:8px}
.chain-roll-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);flex-shrink:0}
.chain-roll-btn{background:none;border:1px solid var(--border);border-radius:20px;padding:4px 10px;font-size:11px;font-weight:600;color:var(--text-dim);cursor:pointer;transition:all .12s;font-family:var(--font-ui);white-space:nowrap}
.chain-roll-btn:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}

/* ══ STUNT-03: USE THIS STUNT SWAP BUTTON ═══════════════════════════════════ */
.stunt-suggest-use{background:none;border:none;font-size:10px;color:var(--accent);cursor:pointer;padding:3px 0 0;text-align:left;font-family:var(--font-ui);font-weight:600;transition:opacity .1s;display:block}
.stunt-suggest-use:hover{opacity:.7}

/* ══ UX-09: SESSION READY SIGNAL ════════════════════════════════════════════ */
.session-ready-badge{display:inline-flex;align-items:center;margin-left:6px;padding:1px 7px;background:color-mix(in srgb,var(--c-green) 15%,transparent);border:1px solid color-mix(in srgb,var(--c-green) 30%,transparent);border-radius:10px;font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--c-green);white-space:nowrap;animation:sessionReadyIn .3s ease both}
@keyframes sessionReadyIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}

/* ══ UX-10: WHAT NEXT GUIDANCE STRIP ════════════════════════════════════════ */
.what-next-strip{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 0 2px;margin-top:4px;animation:fadeIn .25s ease both}
.what-next-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);flex-shrink:0}
.what-next-pill{background:none;border:1px solid var(--border);border-radius:14px;padding:3px 10px;font-size:11px;color:var(--text-dim);cursor:pointer;transition:all .12s;font-family:var(--font-ui);white-space:nowrap}
.what-next-pill:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}

/* ══ UX-11: STUNT +2 TOOLTIP BUTTON ═════════════════════════════════════════ */
.fd-stunt-tip{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border-radius:50%;background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);font-size:8px;font-weight:700;cursor:help;margin-left:5px;flex-shrink:0;vertical-align:middle;line-height:1;border:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}

/* ══ RESULT HELP PANEL (Option E — bottom sheet) ═══════════════════════════ */
.rhp-shell{margin-top:10px;border:1px solid var(--border-mid);border-radius:var(--glass-radius,10px);overflow:hidden;background:color-mix(in srgb,var(--c-blue) 3%,var(--panel))}
.rhp-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--inset)}
.rhp-tab{padding:0 14px;font-size:11px;font-weight:600;color:var(--text-muted);cursor:pointer;border:none;background:none;font-family:var(--font-ui);border-bottom:2px solid transparent;transition:all .12s;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}.rhp-tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.rhp-tab.on{color:var(--accent);border-bottom-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,transparent)}
.rhp-tab:hover:not(.on){color:var(--text-dim)}
.rhp-body{padding:12px 14px}
.rhp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.rhp-grid{grid-template-columns:1fr}}
.rhp-col-hdr{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.rhp-col{min-width:0}
.rhp-what{font-size:11px;color:var(--text);font-weight:500;line-height:1.65;margin-bottom:5px}
.rhp-rule{font-size:10px;color:var(--text-muted);line-height:1.55;padding:5px 8px;background:var(--inset);border-left:2px solid var(--accent);border-radius:0 4px 4px 0;margin-top:6px}
.rhp-output-lbl{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;margin-top:8px}
.rhp-output{font-size:10px;color:var(--text-dim);line-height:1.6;padding:5px 8px;background:var(--inset);border-radius:4px;border-left:2px solid var(--border-mid)}
.rhp-rule-row{display:flex;align-items:baseline;gap:5px;padding:4px 0;border-bottom:1px solid var(--border)}
.rhp-rule-row:last-child{border-bottom:none}
.rhp-rule-pip{font-size:11px;color:var(--accent);flex-shrink:0;margin-top:1px}
.rhp-rule-text{font-size:10px;color:var(--text-dim);line-height:1.55;flex:1}
.rhp-srd{font-size:11px;color:var(--accent);text-decoration:none;flex-shrink:0;opacity:.7;white-space:nowrap}
.rhp-srd:hover{opacity:1;text-decoration:underline}

.rhp-tip{display:flex;gap:6px;margin-bottom:5px;font-size:11px;color:var(--text-dim);line-height:1.5}
.rhp-tip-arrow{color:var(--accent);flex-shrink:0;font-size:10px;margin-top:1px}
.rhp-invoke{background:color-mix(in srgb,var(--c-green) 7%,transparent);border:1px solid color-mix(in srgb,var(--c-green) 18%,transparent);border-radius:5px;padding:7px 9px}
.rhp-invoke-lbl{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c-green);margin-bottom:3px}
.rhp-compel{background:color-mix(in srgb,var(--c-red) 7%,transparent);border:1px solid color-mix(in srgb,var(--c-red) 18%,transparent);border-radius:5px;padding:7px 9px}
.rhp-compel-lbl{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c-red);margin-bottom:3px}
.rhp-ex-body{font-size:11px;color:var(--text-dim);line-height:1.55}
.rhp-check{display:flex;align-items:flex-start;gap:7px;padding:3px 0;cursor:pointer;font-size:11px;color:var(--text-dim);line-height:1.45;min-height:44px;align-items:center}@media(pointer:fine){.rhp-check{min-height:unset;align-items:flex-start}}.rhp-check:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px;border-radius:3px}
.rhp-check.done{color:var(--text-muted);text-decoration:line-through}
.rhp-check-box{width:13px;height:13px;border:1.5px solid var(--border-mid);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--c-green);flex-shrink:0;margin-top:1px;padding:7px;margin-left:-7px;box-sizing:content-box}@media(pointer:fine){.rhp-check-box{padding:3px;margin-left:-3px}}
.rhp-check.done .rhp-check-box{background:var(--c-green);border-color:var(--c-green);color:var(--bg)}
.rhp-callout{display:flex;gap:6px;margin-top:8px;padding:6px 8px;background:color-mix(in srgb,var(--c-amber,#f4b942) 7%,transparent);border:1px solid color-mix(in srgb,var(--c-amber,#f4b942) 20%,transparent);border-radius:5px;font-size:11px;color:var(--text-dim);line-height:1.5}
.rhp-callout-icon{flex-shrink:0}
.rhp-full{min-width:0}
.rhp-dnd-block{background:color-mix(in srgb,var(--c-amber,#f4b942) 6%,transparent);border:1px solid color-mix(in srgb,var(--c-amber,#f4b942) 18%,transparent);border-radius:6px;padding:10px 12px}
.rhp-dnd-lbl{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c-amber,#f4b942);margin-bottom:6px}
.rhp-dnd-body{font-size:11px;color:var(--text-dim);line-height:1.7}

/* ══ UX-12: COUNTDOWN TRACKER PANEL ════════════════════════════════════════ */
.cd-tracker{padding:14px;display:flex;flex-direction:column;gap:10px;min-width:260px;max-width:320px}
.cd-tracker-header{display:flex;align-items:center;justify-content:space-between}
.cd-tracker-title{font-size:13px;font-weight:700;color:var(--text)}
.cd-close-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;padding:2px 4px;font-family:var(--font-ui)}
.cd-close-btn:hover{color:var(--text)}
.cd-add-btn{background:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);border-radius:6px;padding:7px 10px;font-size:11px;color:var(--accent);cursor:pointer;text-align:left;font-family:var(--font-ui);transition:all .12s;width:100%}
.cd-add-btn:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.cd-empty{font-size:11px;color:var(--text-muted);line-height:1.6;padding:4px 0}
.cd-track-list{display:flex;flex-direction:column;gap:10px}
.cd-track{background:var(--inset);border:1px solid var(--border);border-radius:8px;padding:10px 12px}
.cd-track.triggered{border-color:color-mix(in srgb,var(--c-red) 35%,transparent);background:color-mix(in srgb,var(--c-red) 5%,transparent)}
.cd-track-top{display:flex;align-items:baseline;gap:6px;margin-bottom:7px}
.cd-track-name{font-size:12px;font-weight:700;color:var(--text);flex:1;line-height:1.4}
.cd-remove-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:11px;padding:0;font-family:var(--font-ui);flex-shrink:0}
.cd-remove-btn:hover{color:var(--c-red)}
.cd-boxes{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:5px}
.cd-box{width:36px;height:36px;border:2px solid var(--border-mid);border-radius:8px;background:none;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;padding:0}
.cd-box:hover{border-color:var(--accent)}
.cd-box.filled{background:var(--accent);border-color:var(--accent)}
.cd-track.triggered .cd-box.filled{background:var(--c-red);border-color:var(--c-red)}
.cd-track-meta{font-size:11px;color:var(--text-muted);margin-bottom:4px;letter-spacing:.04em}
.cd-trigger-preview{font-size:10px;color:var(--text-muted);font-style:italic;line-height:1.5}
.cd-triggered-label{font-size:10px;font-weight:700;color:var(--c-red);letter-spacing:.04em;line-height:1.5}

/* ══ QF-01: QUICK FIND GENERATOR-ONLY TOGGLE ════════════════════════════════ */
.qf-gen-toggle{background:none;border:1px solid var(--border);border-radius:5px;padding:3px 7px;font-size:13px;cursor:pointer;transition:all .12s;flex-shrink:0;line-height:1}
.qf-gen-toggle:hover{border-color:var(--accent)}
.qf-gen-toggle.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}

/* ══ RESULT CARD (MTG-style landscape card renderer) ════════════════════════
   WCAG 3.0: text always on semantic bg vars. Accent touches spine/borders only.
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-scene{perspective:1100px;margin-bottom:12px}
.rc-wrap{width:100%;display:grid;transform-style:preserve-3d;transition:transform .48s cubic-bezier(.4,0,.2,1);cursor:pointer}.rc-wrap:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:10px}
.rc-wrap.rc-flipped{transform:rotateY(180deg)}
.rc-face,.rc-back{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:10px;overflow:hidden;min-height:200px}
.rc-face{display:flex;background:var(--panel-raised);border:2px solid var(--border-mid)}
.rc-back{transform:rotateY(180deg);background:var(--panel-raised);border:2px solid var(--border-mid)}

/* Spine */
.rc-spine{width:32px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:8px 0;border-right:2px solid}
.rc-spine-type{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);font-size:11px;font-weight:600;letter-spacing:.04em}
.rc-spine-icon{font-size:18px;line-height:1;opacity:.7}
.rc-spine-badge{font-size:11px;font-weight:700;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid;font-family:var(--font-ui)}

/* Main face layout */
.rc-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.rc-namebar{padding:6px 10px 5px;display:flex;align-items:center;justify-content:space-between;border-bottom:1.5px solid var(--border);flex-shrink:0;background:var(--panel);gap:8px}
.rc-name{font-size:14px;font-weight:700;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-pills{display:flex;gap:4px;flex-shrink:0}
.rc-pill{font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px;background:var(--glass-bg);color:var(--text-dim);border:1.5px solid var(--border-mid)}
.rc-typeline{font-size:11px;font-weight:600;padding:3px 10px;border-top:1px solid;border-bottom:1.5px solid;flex-shrink:0;letter-spacing:.01em;color:var(--text-dim)}

/* Content columns */
.rc-content{flex:1;display:flex;overflow:hidden}
.rc-col{flex:1;padding:6px 9px;display:flex;flex-direction:column;gap:3px;overflow:hidden;min-width:0}
.rc-col-sep{width:1px;flex-shrink:0;background:var(--border)}
.rc-sec{font-size:11px;font-weight:700;color:var(--text-muted);padding-bottom:2px;margin-bottom:1px;border-bottom:1px solid var(--border);flex-shrink:0;letter-spacing:.05em;text-transform:uppercase}
.rc-line{font-size:12px;line-height:1.45;color:var(--text)}
.rc-line b{font-weight:700}
.rc-muted{font-size:11px;line-height:1.4;color:var(--text-dim);font-style:italic}
.rc-tag-major{font-size:10px;font-weight:700;background:color-mix(in srgb,var(--c-red) 12%,transparent);color:var(--c-red);border:1px solid color-mix(in srgb,var(--c-red) 25%,transparent);border-radius:3px;padding:1px 4px;margin-left:4px;vertical-align:middle}

/* Stress */
.rc-stress-row{display:flex;align-items:center;gap:3px;flex-wrap:wrap;margin-top:3px}
.rc-stress-lbl{font-size:11px;font-weight:700;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase}
.rc-sbox{width:12px;height:12px;border-radius:2px;border:1.5px solid var(--border-mid);cursor:pointer;transition:all .1s;flex-shrink:0;padding:6px;margin:-6px;box-sizing:content-box}@media(pointer:fine){.rc-sbox{padding:2px;margin:-2px}}.rc-sbox:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.rc-sbox.hit{background:var(--c-red);border-color:var(--c-red)}
.rc-sbox.men.hit{background:var(--c-purple);border-color:var(--c-purple)}

/* Countdown */
.rc-cd-row{display:flex;gap:3px;flex-wrap:wrap}
.rc-cdbox{width:16px;height:16px;border-radius:3px;border:1.5px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-size:11px;cursor:pointer;color:var(--text-muted);transition:all .1s;font-weight:700;padding:5px;margin:-5px;box-sizing:content-box}@media(pointer:fine){.rc-cdbox{padding:2px;margin:-2px}}.rc-cdbox:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.rc-cdbox.tick{background:var(--accent);border-color:var(--accent);color:var(--bg)}

/* Bottom bar */
.rc-bottom{flex-shrink:0;padding:4px 10px;border-top:1px solid var(--border);display:flex;align-items:center;gap:6px;background:var(--panel)}
.rc-flip-hint{font-size:10px;color:var(--text-muted);font-style:italic}
.rc-spacer{flex:1}
.rc-pin-btn{background:none;border:none;cursor:pointer;font-size:13px;padding:2px 4px;border-radius:4px;transition:background .1s;font-family:var(--font-ui)}
.rc-pin-btn:hover{background:var(--border)}.rc-pin-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Back */
.rc-back-inner{padding:11px 13px;height:100%;display:flex;flex-direction:column;gap:5px;overflow:auto;box-sizing:border-box}
.rc-back-hdr{font-size:11px;font-weight:700;color:var(--text-muted);padding-bottom:5px;border-bottom:1px solid var(--border);flex-shrink:0;letter-spacing:.04em;text-transform:uppercase}
.rc-back-cols{display:flex;gap:12px;flex:1;overflow:hidden}
.rc-back-col{flex:1;display:flex;flex-direction:column;gap:3px;overflow:hidden;min-width:0}
.rc-back-sec{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;margin-top:6px}
.rc-back-sec:first-child{margin-top:0}
.rc-back-txt{font-size:12px;line-height:1.5;color:var(--text)}
.rc-back-rule{font-size:12px;line-height:1.5;color:var(--text);padding:4px 8px;border-radius:4px;border-left:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.rc-back-srd{font-size:11px;font-weight:700;color:var(--accent);text-decoration:none;margin-top:3px;display:inline-block}
.rc-back-srd:hover{text-decoration:underline}
.rc-back-srd-big{font-size:11px;font-weight:700;color:var(--accent);text-decoration:none;margin-top:auto;padding-top:6px;display:block}
.rc-back-srd-big:hover{text-decoration:underline}

/* Card view toggle button in result toolbar */
.card-view-btn{background:none;border:1px solid var(--border);border-radius:5px;padding:3px 9px;font-size:12px;cursor:pointer;transition:all .12s;line-height:1;font-family:var(--font-ui);color:var(--text-dim)}
.card-view-btn:hover{border-color:var(--accent);color:var(--accent)}
.card-view-btn.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}

/* ── Export copied state ──────────────────────────────────────────────── */
.export-copied{background:color-mix(in srgb,var(--c-green) 15%,transparent)!important;border-color:var(--c-green)!important;color:var(--c-green)!important}

/* ── Action bar chrome ────────────────────────────────────────────────── */
.action-bar-icon{padding:0 8px!important}
.action-bar-ctx{background:none;border:1px solid var(--border);border-radius:6px;padding:4px 9px;font-size:var(--text-label);cursor:pointer;font-family:var(--font-ui);transition:all .12s}
.action-bar-ctx.active{border-color:var(--accent);color:var(--accent)}
.action-bar-inspire{padding:4px 10px!important}

/* ── Inspiration mode ─────────────────────────────────────────────────── */
.inspire-wrap{margin-bottom:20px}
.inspire-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--glass-radius);cursor:pointer;text-align:left;transition:border-color .12s,background .12s;width:100%}
.inspire-card:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--glass-bg))}
.inspire-ghost{opacity:.35;pointer-events:none;filter:grayscale(0.4)}
.inspire-chosen{border-color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 12%,var(--glass-bg))!important}

/* ── Pin bounce animation ─────────────────────────────────────────────── */
.pin-bounce{animation:pinPop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes pinPop{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}

/* ── Compact card view toggle ─────────────────────────────────────────── */
.compact-toggle-btn{background:none;border:1px solid var(--border);border-radius:5px;padding:3px 9px;font-size:12px;cursor:pointer;transition:all .12s;font-family:var(--font-ui);color:var(--text-dim)}
.compact-toggle-btn.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}

/* ── ADAPTIVE VIBRANCY (BL-36) ─────────────────────────────────────────────
   Accent colour breathes with the generator type and countdown pressure.
   Three urgency tiers: calm (NPC/Scene/World), active (Challenge/Encounter),
   urgent (Countdown/Consequence). Pressure ramp on countdown fill.
   Transitions are on elements, not custom properties — broad browser support.
   ──────────────────────────────────────────────────────────────────────── */

/* Base transition on all accent-bearing elements */
.app-shell { transition: none; }
.app-shell .btn-roll,
.app-shell .sidebar-gen-item.active,
.app-shell .result-card-gen-line,
.app-shell .rhp-tab.on,
.app-shell .topbar-tab.active {
  transition: background-color 0.5s ease, border-color 0.5s ease,
              color 0.4s ease, box-shadow 0.5s ease;
}

/* ── URGENCY TIER: CALM — NPC, Scene, World, Backstory ─────────────────── */
/* Default accent applies — no override needed */

/* ── URGENCY TIER: ACTIVE — Challenge, Contest, Faction, Compel ─────────── */
.app-shell[data-gen="challenge"] { --accent-vibe: color-mix(in srgb, var(--accent) 85%, #FF9500 15%); }
.app-shell[data-gen="contest"]   { --accent-vibe: color-mix(in srgb, var(--accent) 85%, #FF9500 15%); }
.app-shell[data-gen="faction"]   { --accent-vibe: color-mix(in srgb, var(--accent) 90%, #FF9500 10%); }
.app-shell[data-gen="compel"]    { --accent-vibe: color-mix(in srgb, var(--accent) 80%, #FF6B00 20%); }
.app-shell[data-gen="obstacle"]  { --accent-vibe: color-mix(in srgb, var(--accent) 80%, #FF6B00 20%); }

/* ── URGENCY TIER: URGENT — Countdown, Consequence, Encounter ───────────── */
.app-shell[data-gen="consequence"]  { --accent-vibe: color-mix(in srgb, var(--accent) 65%, #FF3B30 35%); }
.app-shell[data-gen="encounter"]    { --accent-vibe: color-mix(in srgb, var(--accent) 70%, #FF3B30 30%); }
.app-shell[data-gen="complication"] { --accent-vibe: color-mix(in srgb, var(--accent) 75%, #FF6B00 25%); }
.app-shell[data-gen="constraint"]   { --accent-vibe: color-mix(in srgb, var(--accent) 70%, #FF3B30 30%); }

/* ── COUNTDOWN PRESSURE RAMP ─────────────────────────────────────────────
   data-pressure set by CountdownResult on the result container.
   none → low → mid → high → critical as boxes fill.                       */
.app-shell[data-gen="countdown"]                          { --accent-vibe: color-mix(in srgb, var(--accent) 80%, #FF9500 20%); }
.app-shell[data-gen="countdown"][data-pressure="low"]     { --accent-vibe: color-mix(in srgb, var(--accent) 70%, #FF9500 30%); }
.app-shell[data-gen="countdown"][data-pressure="mid"]     { --accent-vibe: color-mix(in srgb, var(--accent) 50%, #FF6B00 50%); }
.app-shell[data-gen="countdown"][data-pressure="high"]    { --accent-vibe: color-mix(in srgb, var(--accent) 25%, #FF3B30 75%); }
.app-shell[data-gen="countdown"][data-pressure="critical"]{ --accent-vibe: #FF3B30; }

/* Apply --accent-vibe to the roll button (the highest-visibility accent element) */
.app-shell[data-gen] .btn-roll { background: var(--accent-vibe, var(--accent)); }
.app-shell[data-gen] .result-card-gen-line { background: var(--accent-vibe, var(--accent)); }
.app-shell[data-gen] .rhp-tab.on { border-bottom-color: var(--accent-vibe, var(--accent)); color: var(--accent-vibe, var(--accent)); }
.app-shell[data-gen] .sidebar-gen-item.active { color: var(--accent-vibe, var(--accent)); border-left-color: var(--accent-vibe, var(--accent)); }

/* Light mode: urgency shifts are more subtle */
[data-theme="light"] .app-shell[data-gen="consequence"] { --accent-vibe: color-mix(in srgb, var(--accent) 70%, #D32F2F 30%); }
[data-theme="light"] .app-shell[data-gen="countdown"][data-pressure="critical"] { --accent-vibe: #D32F2F; }

/* ── FLOATER — draggable, minimisable tool panel ─────────────────────────────
   Wraps FatePointTracker, CountdownTracker, SessionDoc.
   Handle: drag. ─ button: minimise to header. ✕: close fully.
   ────────────────────────────────────────────────────────────────────────── */
.floater {
  position: fixed;
  border-radius: var(--glass-radius);
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  overflow: hidden;
  animation: floaterIn 0.18s cubic-bezier(0.34,1.56,0.64,1) both;
  min-width: 200px;
  /* No pointer-events on floater itself — children handle it */
}
@keyframes floaterIn {
  from { opacity: 0; transform: scale(0.94) translateY(-6px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* Handle — the draggable header bar */
.floater-handle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--accent) 8%, var(--glass-bg));
  border-bottom: 1px solid var(--glass-border);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.floater-handle:active { cursor: grabbing; }
.floater-handle-icon  { font-size: 14px; flex-shrink: 0; }
.floater-handle-title {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
  font-family: var(--font-ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.floater-handle-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* Handle action buttons */
.floater-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  font-family: var(--font-ui);
  line-height: 1;
  transition: background 0.1s, color 0.1s;
}
.floater-btn:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--text); }
.floater-btn-close:hover { background: color-mix(in srgb, var(--c-red) 20%, transparent); color: var(--c-red); }

/* Body — hidden when minimised */
.floater-body {
  max-height: calc(100vh - 100px - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Minimised state — only header visible */
.floater-mini .floater-body { display: none; }
.floater-mini { animation: none; } /* no re-animate on state change */

/* Inner component panels no longer need their own positioning */
.floater .fp-tracker,
.floater .cd-tracker,
.floater .fp-panel {
  position: static !important;
  width: 100% !important;
  animation: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ── iOS safe area insets (HIG requirement) ──────────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  .floater-body {
    max-height: calc(100vh - 100px - env(safe-area-inset-bottom));
  }
}


/* ══════════════════════════════════════════════════════════════════════
   ANIMATION SUITE v2026.03 — All 13 proposals
   All respect prefers-reduced-motion (global rule in theme.css:line 84)
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. World portal full-page transition ────────────────────────────── */
@keyframes portal-expand {
  0%   { clip-path: circle(0% at var(--px,50%) var(--py,50%)); }
  100% { clip-path: circle(150% at var(--px,50%) var(--py,50%)); }
}

/* ── 2. CRT page-transition (shutdown → startup) ─────────────────────── */
@keyframes crt-off { 0%{clip-path:inset(0 0 0 0)} 45%{clip-path:inset(47% 0 47% 0)} 70%{clip-path:inset(50% 18% 50% 18%)} 100%{clip-path:inset(50% 50% 50% 50%)} }
@keyframes crt-on  { 0%{clip-path:inset(50% 50% 50% 50%)} 35%{clip-path:inset(47% 10% 47% 10%)} 65%{clip-path:inset(40% 0 40% 0)} 100%{clip-path:inset(0 0 0 0)} }
/* Applied to #land-crt-wrap (LandingApp shell) and .app-shell (campaign app) */
.crt-nav-off,#land-crt-wrap.crt-nav-off { animation: crt-off 0.32s ease-in  both; will-change:clip-path; }

/* ── 3. dVenti Realm roll button — orbiting arcane rune ring ─────────── */
[data-campaign="dVentiRealm"] .btn-roll {
  background:#180a08;color:#E8402A;border:1px solid #E8402A55;border-radius:6px;
  font-family:'Courier New',monospace;letter-spacing:0.06em;
  overflow:visible;
  box-shadow:0 0 18px #E8402A22;animation:dventi-roll-idle 2.5s ease-in-out infinite;
}
[data-campaign="dVentiRealm"] .btn-roll::after {
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(90deg,transparent 0%,#E8402A22 40%,#E8402A88 50%,#E8402A22 60%,transparent 100%);
  background-size:200% 100%;
  animation:dventi-sweep 2.2s linear infinite;
}
@keyframes dventi-sweep { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
[data-campaign="dVentiRealm"] .btn-roll.rolling,
[data-campaign="dVentiRealm"] .btn-roll:active {
  animation:dventi-roll-ignite 0.5s ease-out forwards;
}
@keyframes dventi-roll-idle   { 0%,100%{box-shadow:0 0 12px #E8402A22;text-shadow:0 0 6px #E8402A44} 50%{box-shadow:0 0 28px #E8402A55;text-shadow:0 0 16px #E8402A88} }
@keyframes dventi-roll-ignite { 0%{box-shadow:0 0 80px #E8402A,0 0 140px #E8402A66;filter:brightness(1.65)} 100%{box-shadow:0 0 18px #E8402A22;filter:brightness(1)} }

/* ── 4. Dust and Iron roll button — revolver style ───────────────────── */
[data-campaign="western"] .btn-roll {
  background:#1a1008;color:#C8864A;border:1px solid #C8864A44;border-radius:4px;
  font-family:'Courier New',monospace;letter-spacing:0.05em;
  overflow:visible;
  animation:wi-roll-idle 2s ease-in-out infinite;
}
[data-campaign="western"] .btn-roll.rolling,
[data-campaign="western"] .btn-roll:active {
  animation:wi-roll-bang 0.45s ease-out forwards;
}
@keyframes wi-roll-idle { 0%,100%{box-shadow:0 0 8px #C8864A22} 50%{box-shadow:0 0 20px #C8864A44} }
@keyframes wi-roll-bang { 0%{box-shadow:0 0 0 0 #C8864A99,0 0 50px #C8864A;filter:brightness(1.55)} 55%{box-shadow:0 0 0 14px transparent,0 0 12px #C8864A22} 100%{box-shadow:none;filter:brightness(1)} }

/* ── 5. Fate point dot coin flip ─────────────────────────────────────── */
@keyframes fp-coin-flip  { 0%{transform:rotateY(0) scale(1)} 38%{transform:rotateY(90deg) scale(1.1)} 62%{transform:rotateY(270deg) scale(1.1)} 100%{transform:rotateY(360deg) scale(1)} }
.fp-gaining  { animation:fp-coin-flip 0.34s ease both; }
.fp-spending { animation:fp-coin-flip 0.34s ease both; filter:brightness(0.7); }

/* ── 6. Aspect card shimmer + free invoke pop ────────────────────────── */
.fd-cond,.fd-infobox { overflow:hidden; }
.fd-cond::after,.fd-infobox::after {
  content:'';position:absolute;top:0;left:0;width:38%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.07),transparent);
  transform:translateX(-150%) skewX(-12deg);pointer-events:none;
}
.fd-cond:hover::after,.fd-infobox:hover::after { animation:shimmer-sweep 0.55s ease; }
@keyframes shimmer-sweep { 0%{transform:translateX(-150%) skewX(-12deg)} 100%{transform:translateX(260%) skewX(-12deg)} }
@keyframes free-invoke-pop { 0%{transform:scale(0.55) rotate(-10deg);opacity:0} 55%{transform:scale(1.18) rotate(3deg);opacity:1} 100%{transform:scale(1) rotate(0);opacity:1} }
.free-invoke-badge-appear { animation:free-invoke-pop 0.3s cubic-bezier(0.34,1.56,0.64,1) both; }

/* ── 7. Session complete confetti burst ──────────────────────────────── */
@keyframes confetti-fly { 0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1} 100%{transform:translate(var(--dx,30px),var(--dy,-100px)) rotate(var(--dr,360deg)) scale(0.5);opacity:0} }
.confetti-piece { position:absolute;border-radius:2px;pointer-events:none;animation:confetti-fly 0.95s ease-out both;transform-origin:center center; }

/* ── 8. World card ripple (landing page) ─────────────────────────────── */
@keyframes world-ripple-out { 0%{transform:scale(0.4);opacity:0.8} 100%{transform:scale(2.8);opacity:0} }
.world-card-ripple { position:absolute;inset:0;border-radius:inherit;border:2px solid var(--accent);pointer-events:none;animation:world-ripple-out 0.55s ease-out both;z-index:10; }
.land-world-card { overflow:visible !important; }
/* Override back on card content to keep rounded corners */
.land-world-card-accent, .land-world-card-body, .land-world-footer { border-radius:0; }

/* ── 9. Compel card deal — slides in from the GM's hand ──────────────── */
@keyframes compel-deal-in { 0%{transform:translateX(90px) rotate(14deg);opacity:0} 55%{transform:translateX(-3px) rotate(-1deg);opacity:1} 100%{transform:translateX(0) rotate(0);opacity:1} }
@keyframes compel-glow-pulse { 0%,100%{box-shadow:0 0 10px rgba(255,107,0,0.2)} 50%{box-shadow:0 0 26px rgba(255,107,0,0.5)} }
.compel-result-appear { animation:compel-deal-in 0.42s cubic-bezier(0.34,1,0.64,1) both; }

/* ── 10. Consequence severity slam ──────────────────────────────────────  */
@keyframes sev-bar-slam  { 0%{transform:scaleX(0)} 55%{transform:scaleX(1.04)} 100%{transform:scaleX(1)} }
@keyframes sev-label-out { from{opacity:0;letter-spacing:0.28em} to{opacity:1;letter-spacing:0.06em} }
.consequence-severity-bar   { transform-origin:left;animation:sev-bar-slam  0.42s cubic-bezier(0.34,1.56,0.64,1) both; }
.consequence-severity-label { animation:sev-label-out 0.3s 0.1s ease both; display:inline-block; }

/* ── 11. Sidebar generator icon micro-bounce on hover ───────────────── */
@keyframes gen-icon-bounce { 0%,100%{transform:scale(1) rotate(0)} 28%{transform:scale(1.38) rotate(-9deg)} 58%{transform:scale(0.86) rotate(5deg)} 78%{transform:scale(1.12) rotate(-2deg)} }
.sidebar-gen-item:hover .sidebar-item-icon { animation:gen-icon-bounce 0.38s ease; display:inline-flex; }
.sidebar-item-icon { display:inline-flex; align-items:center; justify-content:center; }
.sidebar-gen-item:hover .icon-emoji { animation:gen-icon-bounce 0.38s ease; display:inline-block; }

/* ── 12. NPC name typewriter cursor ─────────────────────────────────── */
.npc-name-cursor { display:inline-block;width:0.55em;height:0.88em;background:currentColor;vertical-align:text-bottom;margin-left:1px;animation:fate-blink 0.65s step-end infinite; }

/* ── 13. Countdown triggered shockwave ──────────────────────────────── */
@keyframes cd-shockwave { 0%{box-shadow:0 0 0 0 rgba(255,59,48,0.7),inset 0 0 0 0 rgba(255,59,48,0.1)} 38%{box-shadow:0 0 0 20px rgba(255,59,48,0),inset 0 0 18px rgba(255,59,48,0.18)} 100%{box-shadow:0 0 0 32px rgba(255,59,48,0),inset 0 0 0 rgba(255,59,48,0)} }
@keyframes cd-panel-quake { 0%,100%{transform:translateX(0)} 16%{transform:translateX(-5px)} 33%{transform:translateX(5px)} 50%{transform:translateX(-4px)} 67%{transform:translateX(3px)} 83%{transform:translateX(-2px)} }
.countdown-shockwave { animation:cd-shockwave 0.52s ease-out, cd-panel-quake 0.42s 0.06s ease-out;border:1px solid var(--c-red);background:color-mix(in srgb,var(--c-red) 5%,transparent); }

/* ── Table Prep view ─────────────────────────────────────────────────── */
.tp-view{display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0}
/* tp-toolbar — see corrected definition below */
/* tp-title — see corrected definition below */
/* tp-empty — see definition below */
.tp-grid{flex:1;overflow-y:auto;padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;align-content:start}
@media(max-width:640px){.tp-grid{grid-template-columns:1fr}}
.tp-card{background:var(--panel-raised);border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.tp-card-hdr{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--inset);flex-shrink:0;gap:8px}
.tp-card-type{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-card-remove{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:16px;line-height:1;padding:2px 4px;border-radius:4px;transition:color .12s;flex-shrink:0;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.tp-card-remove:hover{color:var(--c-red)}
.tp-card-remove:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
.tp-card-body{padding:12px 14px;overflow:hidden;flex:1}

/* ── Table Prep canvas (run-style) — shared with cc- classes ──────────────── */
/* Canvas shell */

.tp-toolbar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-bottom:1px solid var(--border);flex-shrink:0;gap:6px;flex-wrap:nowrap;background:var(--panel-raised);min-height:44px;overflow-x:auto}
.tp-toolbar-left{display:flex;align-items:center;gap:8px;min-width:0}
.tp-toolbar-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.tp-title{font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px}
.tp-count{font-size:11px;color:var(--text-muted);background:var(--glass-bg);border:1px solid var(--border);border-radius:100px;padding:2px 8px}
/* Canvas area */
.tp-canvas-wrap{flex:1;position:relative;overflow:hidden;background:var(--bg);cursor:grab}
.tp-canvas-wrap.panning{cursor:grabbing}
.tp-canvas-wrap::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,var(--border) 1px,transparent 1px);background-size:24px 24px;opacity:.35;pointer-events:none;z-index:0}
.tp-canvas-inner{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
/* Zoom controls */
.tp-zoom-controls{position:absolute;bottom:16px;right:16px;display:flex;flex-direction:column;gap:4px;z-index:50}
.tp-zoom-btn{width:32px;height:32px;background:var(--panel-raised);border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;color:var(--text-dim);transition:all .12s;font-family:var(--font-ui)}
.tp-zoom-btn:hover{border-color:var(--accent);color:var(--accent)}
.tp-zoom-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
.tp-zoom-label{font-size:11px;text-align:center;color:var(--text-muted);font-weight:700;letter-spacing:.04em}
/* Empty state */
.tp-empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--text-muted);text-align:center;pointer-events:none;z-index:1}
.tp-empty-icon{font-size:36px;opacity:.3}
.tp-empty-title{font-size:16px;font-weight:700;color:var(--text-dim)}
.tp-empty-desc{font-size:12px;line-height:1.65;max-width:280px}
/* Canvas cards — identical to run.html cc- classes */
.cc{position:absolute;background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);border:1px solid var(--border);border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.18);transition:box-shadow .18s,border-color .18s,transform .12s;overflow:visible;user-select:none;-webkit-user-select:none}
/* .cc.drag-active — full definition in TABLE REDESIGN section */
.cc-sm{width:160px}.cc-md{width:220px}.cc-full{width:280px}
.cc.drag-active .cc-hdr{cursor:grabbing}
.cc-hdr-acts{display:flex;gap:1px;flex-shrink:0;margin-left:auto}
.cc-ibtn{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:10px;padding:2px 4px;border-radius:3px;line-height:1;font-family:var(--font-ui);transition:all .1s;min-width:28px;min-height:28px;display:flex;align-items:center;justify-content:center}
.cc-ibtn:hover{background:var(--border);color:var(--text)}
.cc-ibtn.danger:hover{background:color-mix(in srgb,var(--c-red) 15%,transparent);color:var(--c-red)}
.cc-ibtn:focus-visible{outline:2px solid var(--focus-ring,var(--accent));outline-offset:1px}
.cc-body{padding:7px 9px}
.cc-title{font-size:11px;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cc-sm .cc-title{-webkit-line-clamp:1;margin-bottom:0}
.cc-line{font-size:10px;color:var(--text-dim);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.cc-asp{font-size:10px;font-style:italic;color:var(--text-dim);padding:2px 5px;border-left:2px solid var(--border-mid);margin-top:3px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.cc-asp.hc{border-color:var(--c-blue);color:var(--text);font-style:normal}
.cc-asp.tr{border-color:var(--c-red)}
.cc-sm .cc-asp{-webkit-line-clamp:1}
.cc-stress{display:flex;align-items:center;gap:3px;margin-top:5px;font-size:8px;color:var(--text-muted);flex-wrap:wrap}
.cc-sbox{width:11px;height:11px;border-radius:2px;border:1.5px solid var(--border-mid);cursor:pointer;transition:all .1s;flex-shrink:0}
.cc-sbox.hit{background:var(--c-red);border-color:var(--c-red)}
.cc-skrow{display:flex;gap:3px;flex-wrap:wrap;margin-top:4px}
.cc-sk{font-size:11px;background:var(--inset);border:1px solid var(--border);border-radius:3px;padding:1px 5px;color:var(--text-dim);white-space:nowrap}
.cc-sk strong{color:var(--accent);font-weight:700}
.cc-cd-track{display:flex;gap:3px;margin-top:5px;flex-wrap:wrap}
.cc-cdbox{width:17px;height:17px;border-radius:3px;border:1.5px solid var(--border-mid);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--text-muted);transition:all .1s}
.cc-cdbox.tick{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.cc-trigger{font-size:11px;color:var(--c-red);font-weight:800;margin-top:3px;letter-spacing:.04em}
.cct-zone{color:var(--c-green);background:color-mix(in srgb,var(--c-green) 12%,transparent)}
/* cct-* type tokens — authoritative definitions in TABLE REDESIGN section */

/* ── Run surface shared styles (rs-*) ── */
.rs-round-pill{display:flex;align-items:center;gap:5px;background:var(--inset);border:1px solid var(--border);border-radius:6px;padding:2px 8px;font-size:11px;font-weight:700;color:var(--text-muted);flex-shrink:0}
.rs-round-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:12px;padding:0 3px;font-family:var(--font-ui);border-radius:3px;transition:background .1s;line-height:1}
.rs-round-btn:hover{background:var(--border);color:var(--text)}
.rs-round-num{font-size:14px;color:var(--accent);font-weight:900;min-width:16px;text-align:center}
.rs-btn{background:none;border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-size:11px;font-weight:600;color:var(--text-muted);cursor:pointer;font-family:var(--font-ui);transition:all .12s;flex-shrink:0;white-space:nowrap;line-height:1.4}
.rs-btn:hover{border-color:var(--accent);color:var(--accent)}
.rs-btn.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.rs-btn.danger{color:var(--c-red);border-color:var(--c-red)}
.rs-btn.primary{background:var(--accent);border-color:transparent;color:var(--bg);font-weight:700}
.rs-mode-badge{display:flex;align-items:center;gap:6px;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:700;flex-shrink:0}
.rs-mode-edit{background:color-mix(in srgb,var(--c-purple) 15%,transparent);color:var(--c-purple);border:1px solid color-mix(in srgb,var(--c-purple) 30%,transparent)}
.rs-mode-play{background:color-mix(in srgb,var(--c-green) 12%,transparent);color:var(--c-green);border:1px solid color-mix(in srgb,var(--c-green) 25%,transparent)}
.rs-left{width:210px;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.rs-sidebar-hdr{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);padding:7px 11px 5px;background:var(--panel);border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:space-between}
.rs-sidebar-body{flex:1;overflow-y:auto;padding:7px}

.rs-player-top{display:flex;align-items:center;gap:6px;padding:6px 8px;cursor:pointer}
.rs-player-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.rs-player-name{font-size:11px;font-weight:700;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}






.rs-add-player{width:100%;background:none;border:1px dashed var(--border);border-radius:6px;padding:6px;font-size:10px;color:var(--text-muted);cursor:pointer;font-family:var(--font-ui);text-align:center;transition:all .12s;margin-top:3px}
.rs-add-player:hover{border-color:var(--accent);color:var(--accent)}
.rs-add-player:focus-visible{outline:2px solid var(--focus-ring,var(--accent));outline-offset:1px}
.rs-canvas-wrap{flex:1;position:relative;overflow:hidden;background:var(--bg)}
.rs-canvas-wrap.edit-mode{cursor:grab}
.rs-canvas-wrap.edit-mode.panning{cursor:grabbing}
.rs-canvas-inner{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
.rs-canvas-wrap::before{
.rs-zoom-controls{position:absolute;bottom:16px;right:16px;display:flex;flex-direction:column;gap:4px;z-index:50}
.rs-zoom-btn{width:32px;height:32px;background:var(--panel-raised);border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;color:var(--text-dim);transition:all .12s;font-family:var(--font-ui)}
.rs-zoom-btn:hover{border-color:var(--accent);color:var(--accent)}
.rs-zoom-label{font-size:11px;text-align:center;color:var(--text-muted);font-weight:700;letter-spacing:.04em}
.rs-import-strip{position:absolute;top:6px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:50;pointer-events:auto}
.rs-import-banner{background:color-mix(in srgb,var(--c-blue) 12%,transparent);border:1px solid color-mix(in srgb,var(--c-blue) 25%,transparent);border-radius:8px;padding:6px 12px;font-size:11px;color:var(--text-dim);display:flex;align-items:center;gap:8px;white-space:nowrap;backdrop-filter:blur(8px)}
.rs-import-btn{background:var(--c-blue);border:none;border-radius:4px;padding:3px 10px;font-size:10px;font-weight:700;color:#fff;cursor:pointer;font-family:var(--font-ui)}
.rs-drawer{position:absolute;top:0;right:0;height:100%;width:260px;background:var(--panel-raised);border-left:1px solid var(--border);z-index:150;display:flex;flex-direction:column;overflow:hidden;transition:transform .22s cubic-bezier(.4,0,.2,1);transform:translateX(100%)}
.rs-drawer.open{transform:translateX(0)}
.rs-drawer-hdr{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.rs-drawer-title{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.rs-drawer-close{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:16px;padding:2px 5px;border-radius:4px;font-family:var(--font-ui);line-height:1}
.rs-drawer-close:hover{background:var(--border);color:var(--text)}
.rs-drawer-body{flex:1;overflow-y:auto;padding:12px}
.rs-gen-section{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin:10px 0 6px;display:flex;align-items:center;gap:6px}
.rs-gen-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.rs-gen-btn{background:var(--inset);border:1px solid var(--border);border-radius:7px;padding:8px 5px;cursor:pointer;font-family:var(--font-ui);text-align:center;transition:all .12s}
.rs-gen-btn:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.rs-gen-btn:focus-visible{outline:2px solid var(--focus-ring,var(--accent));outline-offset:2px}
.rs-gen-icon{font-size:15px;margin-bottom:2px}
.rs-gen-label{font-size:11px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}
.rs-zone-form{background:var(--inset);border:1px solid var(--border);border-radius:7px;padding:9px;margin-top:6px}
.rs-zone-input{width:100%;background:var(--panel);border:1px solid var(--border);border-radius:5px;padding:5px 8px;font-size:11px;color:var(--text);font-family:var(--font-ui);margin-bottom:5px;outline:none;transition:border-color .12s}
.rs-zone-input:focus{border-color:var(--accent)}
.rs-zone-submit{width:100%;background:var(--c-green);border:none;border-radius:5px;padding:6px;font-size:11px;font-weight:700;color:#fff;cursor:pointer;font-family:var(--font-ui);transition:opacity .12s}
.rs-zone-submit:hover{opacity:.88}
.rs-import-label{flex:1;background:var(--inset);border:1px dashed var(--border);border-radius:6px;padding:6px 8px;font-size:10px;color:var(--text-muted);cursor:pointer;text-align:center;display:block;transition:all .12s}
.rs-import-label:hover{border-color:var(--accent);color:var(--accent)}
.rs-drawer-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
.rs-drawer-tab{flex:1;padding:7px 0;border:none;background:none;cursor:pointer;font-size:10px;font-weight:700;color:var(--text-muted);border-bottom:2px solid transparent;font-family:var(--font-ui);transition:all .12s}
.rs-drawer-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.rs-dice-row{display:flex;gap:6px;justify-content:center;margin-bottom:8px}
.rs-die{width:40px;height:40px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;border:2px solid;transition:all .15s;flex-shrink:0}
.rs-die.pos{border-color:var(--c-green);color:var(--c-green);background:color-mix(in srgb,var(--c-green) 10%,transparent)}
.rs-die.neg{border-color:var(--c-red);color:var(--c-red);background:color-mix(in srgb,var(--c-red) 10%,transparent)}
.rs-die.zero{border-color:var(--border-mid);color:var(--text-muted);background:var(--inset)}
.rs-die.spin{border-color:var(--border);color:var(--border);background:var(--inset);animation:rsSpin .5s linear infinite}
@keyframes rsSpin{to{transform:rotate(360deg)}}
.rs-roll-result{text-align:center;margin-bottom:8px}
.rs-roll-total{font-size:36px;font-weight:900;line-height:1;transition:color .2s}
.rs-roll-label{font-size:12px;font-weight:700;margin-top:2px}
.rs-roll-btn{width:100%;background:var(--accent);border:none;border-radius:7px;padding:9px;font-size:12px;font-weight:800;color:var(--bg);cursor:pointer;font-family:var(--font-ui);letter-spacing:.02em;transition:opacity .12s;margin-top:5px}
.rs-roll-btn:hover{opacity:.88}
.rs-roll-btn:disabled{opacity:.35;cursor:not-allowed}
.rs-fp-spend-btn{width:100%;background:none;border:1px solid var(--border);border-radius:6px;padding:6px;font-size:10px;font-weight:700;color:var(--text-muted);cursor:pointer;font-family:var(--font-ui);transition:all .12s;margin-top:4px}
.rs-fp-spend-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.rs-fp-spend-btn:disabled{opacity:.3;cursor:not-allowed}
.rs-fp-spent{color:var(--c-green)!important;border-color:var(--c-green)!important}
.rs-skill-row{display:flex;align-items:center;justify-content:space-between;padding:4px 7px;border-radius:5px;cursor:pointer;border:1px solid var(--border);margin-bottom:3px;background:var(--inset);transition:background .1s}
.rs-skill-row:hover{background:color-mix(in srgb,var(--accent) 5%,transparent);border-color:var(--border-mid)}
.rs-skill-row.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.rs-roll-history{margin-top:8px;border-top:1px solid var(--border);padding-top:7px}
.rs-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:500;display:flex;align-items:center;justify-content:center;padding:16px}
.rs-modal{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px;width:100%;max-width:460px;display:flex;flex-direction:column;gap:10px}
.rs-edit-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:3px}
.rs-edit-input{width:100%;background:var(--inset);border:1px solid var(--border);border-radius:6px;padding:7px 9px;font-size:12px;color:var(--text);font-family:var(--font-ui);outline:none;transition:border-color .12s;resize:vertical}
.rs-edit-input:focus{border-color:var(--accent)}
.rs-edit-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:2px}
.rs-edit-cancel{background:none;border:1px solid var(--border);border-radius:6px;padding:6px 12px;font-size:11px;font-weight:600;color:var(--text-muted);cursor:pointer;font-family:var(--font-ui)}
.rs-edit-save{background:var(--accent);border:none;border-radius:6px;padding:6px 16px;font-size:11px;font-weight:700;color:var(--bg);cursor:pointer;font-family:var(--font-ui);transition:opacity .12s}
.rs-edit-save:hover{opacity:.88}
.rs-md-pre{background:var(--inset);border:1px solid var(--border);border-radius:6px;padding:10px;font-size:10px;color:var(--text-dim);font-family:var(--font-mono,'Courier New',monospace);white-space:pre-wrap;max-height:340px;overflow-y:auto;line-height:1.6}
.rs-turn-label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap;flex-shrink:0}
.rs-turn-pill.dragging{opacity:.4;cursor:grabbing}
.rs-turn-pill.drag-over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.rs-turn-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.rs-all-acted{font-size:10px;font-weight:800;color:var(--accent);white-space:nowrap;flex-shrink:0;padding:2px 9px;border-radius:4px;background:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);animation:rsActedPulse 1.6s ease-in-out infinite}
@keyframes rsActedPulse{0%,100%{opacity:1}50%{opacity:.65}}
.rs-toast{position:fixed;top:52px;left:50%;transform:translateX(-50%);z-index:9999;pointer-events:none;background:var(--panel-raised);border:1px solid var(--border);border-radius:8px;padding:8px 18px;text-align:center;min-width:160px;animation:rsToast 3s ease forwards;box-shadow:0 8px 32px rgba(0,0,0,.5);font-size:12px;font-weight:600;color:var(--text)}
@keyframes rsToast{0%{opacity:0;transform:translateX(-50%) translateY(-6px)}10%{opacity:1;transform:translateX(-50%) translateY(0)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-6px)}}
.rs-empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--text-muted);text-align:center;pointer-events:none;z-index:1}
.rs-empty-icon{font-size:36px;opacity:.3}
.rs-empty-title{font-size:16px;font-weight:700;color:var(--text-dim)}
.rs-empty-desc{font-size:12px;line-height:1.65;max-width:280px}

/* ── Table Prep sub-bar (drawer panel below toolbar, above canvas) ── */

/* TC-02: GM-only card — dashed amber border, muted in play mode */
.cc-gm-only{border:2px dashed var(--c-amber,#f4b942)!important;opacity:.92}
/* TC-04: Free invoke available — green glow on card */
.cc-free-invoke{box-shadow:0 0 0 2px var(--c-green)!important}

/* TC-07: Zone cards */
.cc-zone-card{border:2px solid var(--c-green)!important;background:color-mix(in srgb,var(--c-green) 4%,transparent)}
.cc-zone-card.zone-hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--c-green) 30%,transparent)!important}
.cc-zone-body{padding:6px 8px 7px;border-top:1px solid color-mix(in srgb,var(--c-green) 20%,transparent);min-height:52px}
.cc-zone-children{display:flex;flex-direction:column;gap:3px;margin-top:4px}
.cc-zone-child{background:var(--inset);border:1px solid var(--border);border-radius:5px;padding:4px 7px;font-size:11px;display:flex;align-items:center;gap:5px}
.cc-zone-child-remove{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:11px;margin-left:auto;padding:1px 3px;line-height:1;font-family:var(--font-ui)}
.cc-zone-child-remove:hover{color:var(--c-red)}
.cc-zone-drop-hint{font-size:11px;color:var(--c-green);text-align:center;padding:5px 0;font-style:italic;opacity:.65;border:1px dashed color-mix(in srgb,var(--c-green) 30%,transparent);border-radius:4px;margin-top:4px}

/* Option D: category dropdown menus in generate sub-bar */
/* tp-gen-bar — see TABLE REDESIGN section */

/* ══ TABLE REDESIGN — Help-language tokens + Hero modal ══════════════════ */

/* ── Hero overlay: full-screen card expansion ───────────────────────────── */
.tp-hero-close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.tp-hero-card-wrap .rc-face,.tp-hero-card-wrap .rc-back{min-height:340px}
.tp-hero-dice-wrap{border-top:1px solid var(--border);background:color-mix(in srgb,var(--accent) 4%,transparent);padding:12px 16px;flex-shrink:0}
.tp-hero-dice-wrap .dr-widget{max-width:100%;margin:0;background:none;border:none;padding:0;flex-direction:row;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-start}
.tp-hero-dice-wrap .dr-top{width:auto;min-height:auto}
.tp-hero-dice-wrap .dr-dice-row{min-height:auto}
.tp-hero-dice-wrap .dr-result-row{min-height:auto}
/* Sync indicator in hero */
.tp-hero-sync-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:100px;background:color-mix(in srgb,var(--c-green) 10%,transparent);border:1px solid color-mix(in srgb,var(--c-green) 30%,transparent);font-size:10px;font-weight:700;color:var(--c-green);position:absolute;bottom:14px;right:60px}
.tp-hero-sync-dot{width:6px;height:6px;border-radius:50%;background:var(--c-green);animation:tp-pulse 1.8s ease-in-out infinite}
@keyframes tp-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}

/* ── Canvas card — tap hint + hover lift ────────────────────────────────── */
.tp-card-body-wrap{cursor:pointer;position:relative}
.tp-card-body-wrap::after{content:'Tap to expand';position:absolute;bottom:5px;right:8px;font-size:10px;color:var(--text-muted);opacity:0;transition:opacity .15s;font-style:italic;pointer-events:none}
.cc:hover .tp-card-body-wrap::after{opacity:.6}
/* .cc transition — merged into main .cc definition above */
/* .cc:hover — full definition in TABLE REDESIGN section */
/* .cc.drag-active — merged into TABLE REDESIGN section */
@keyframes cc-appear{from{opacity:0;transform:scale(.82) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.cc-new{animation:cc-appear .26s cubic-bezier(.34,1.2,.64,1) both}

/* ── Player row — help-language callout style ───────────────────────────── */

/* Bigger FP buttons */

/* Bigger stress boxes with visual fill */

.rs-stress-box:active{transform:scale(.85)}

@keyframes stress-hit{0%{transform:scale(1.4)}100%{transform:scale(1)}}
.rs-stress-box.just-hit{animation:stress-hit .2s cubic-bezier(.34,1.56,.64,1) both}

/* ── Generate sub-bar — callout style ───────────────────────────────────── */
/* tp-gen-callout defined in help-language section below */

/* ── Dropdown buttons — help language ───────────────────────────────────── */
@keyframes dd-open{from{opacity:0;transform:translateY(-6px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.tp-dd-menu:not([hidden]){animation:dd-open .14s ease both}

/* ── Dice strip — dr-widget style ───────────────────────────────────────── */
.tp-dice-panel-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 14px}
/* Result number pop */
@keyframes result-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.tp-result-pop{animation:result-pop .3s cubic-bezier(.34,1.2,.64,1) both}

/* ── Card added to canvas celebration ───────────────────────────────────── */
@keyframes card-add-ripple{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}100%{box-shadow:0 0 0 18px transparent}}
.cc-new-ripple{animation:cc-appear .26s cubic-bezier(.34,1.2,.64,1) both,card-add-ripple .5s ease .1s both}

/* ── Fate point spend sparkle ────────────────────────────────────────────── */
@keyframes fp-spend{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-22px) scale(.5)}}
.fp-sparkle{position:absolute;pointer-events:none;font-size:14px;color:var(--accent);animation:fp-spend .6s ease both}

/* ── Scene/round counter pulse ───────────────────────────────────────────── */
@keyframes counter-bump{0%{transform:scale(1)}30%{transform:scale(1.35)}100%{transform:scale(1)}}
.rs-round-bump{animation:counter-bump .25s cubic-bezier(.34,1.56,.64,1) both}

/* ══ TABLE HERO MODAL + HELP-LANGUAGE REDESIGN ══════════════════════════════ */

/* Hero overlay animations — see TABLE FULL HELP-LANGUAGE REDESIGN section */



/* ── Card body tap area ── */
.tp-card-expand-btn:hover{opacity:.85}
  content:'↗';position:absolute;bottom:6px;right:8px;
  font-size:10px;color:var(--text-muted);opacity:0;
  transition:opacity .15s;pointer-events:none;
}
.cc:hover 
/* ── Help-language player rows ── */
.rs-player{background:var(--glass-bg);border:1px solid var(--border);border-radius:10px;padding:9px 11px;border-left:3px solid var(--accent);transition:border-color .15s,box-shadow .15s;backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);margin-bottom:5px}
.rs-player.selected{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.rs-player-hc{
  font-size:11px;color:var(--accent);font-style:italic;
  margin:1px 0 6px;line-height:1.3;opacity:.85;
}

/* FP row — bigger tap targets, circular +/- */
.rs-fp-row{display:flex;align-items:center;gap:5px;padding:2px 0 5px}
.rs-fp-label{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);min-width:22px}
.rs-fp-btn{
  width:28px;height:28px;border-radius:50%;
  background:var(--glass-bg);border:1px solid var(--border);
  color:var(--text-muted);font-size:15px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-ui);transition:all .12s;
  flex-shrink:0;
}
.rs-fp-btn:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.rs-fp-btn:focus-visible{outline:2px solid var(--focus-ring,var(--accent));outline-offset:1px}
.rs-fp-num{font-size:17px;font-weight:900;color:var(--c-green);min-width:22px;text-align:center;line-height:1}

/* Stress boxes — larger visual + pad tap target */
.rs-stress-row{display:flex;align-items:center;gap:5px;padding:0 0 4px}
.rs-stress-box{
  width:16px;height:16px;border-radius:4px;
  border:1.5px solid var(--border-mid);cursor:pointer;
  transition:all .12s;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;
  padding:5px;box-sizing:content-box;margin:-5px;
}
.rs-stress-box.filled{background:var(--c-red);border-color:var(--c-red);color:#fff}
.rs-stress-box.filled::after{content:'×'}
.rs-stress-box:focus-visible{outline:2px solid var(--focus-ring,var(--accent));outline-offset:2px}

/* ── Help-language generate sub-bar callout ── */

.tp-gen-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* Dropdown buttons — help style */






/* ── Canvas card new-add entrance animation ── */
@keyframes cc-pop-in{
  0%{opacity:0;transform:scale(.8) translateY(12px)}
  65%{transform:scale(1.04) translateY(-2px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}

/* ── Dice roller in sub-bar — use dr-widget style ── */

/* ══ TABLE FULL HELP-LANGUAGE REDESIGN ══════════════════════════════════════
   Applies the learn-fate.html callout / step-block / dice-roller visual language
   to every interactive element on the Table canvas.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Canvas cards: glass with accent spine glow on hover ── */
/* .cc visual overrides merged into base definition */

.cc:hover{
  box-shadow:0 4px 20px rgba(0,0,0,.28),0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent);
  border-color:color-mix(in srgb,var(--accent) 35%,transparent);
}
.cc.drag-active{
  box-shadow:0 12px 40px rgba(0,0,0,.4);
  transform:scale(1.03) rotate(1deg);
  z-index:1000;
}

/* Card header: accent type badge */
.cc-hdr{
  background:color-mix(in srgb,var(--accent) 6%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 15%,transparent);
  min-height:32px;
}
.cc-type{
  font-size:10px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;
  padding:2px 7px;border-radius:4px;
}
/* Type colour tokens */
.cct-npc{color:var(--c-red);background:color-mix(in srgb,var(--c-red) 10%,transparent)}
.cct-scene{color:var(--c-blue);background:color-mix(in srgb,var(--c-blue) 10%,transparent)}
.cct-faction{color:var(--c-purple);background:color-mix(in srgb,var(--c-purple) 10%,transparent)}
.cct-mechanic{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.cct-gm{color:var(--c-amber,#f4b942);background:color-mix(in srgb,var(--c-amber,#f4b942) 10%,transparent)}

/* ── Tap-to-expand hint ── */
.tp-card-expand-btn{cursor:pointer;position:relative}

.cc:hover .tp-card-expand-btn::after{opacity:.7}

/* ── Hero modal: full-screen FlipCard ── */
@keyframes tp-overlay-in{from{opacity:0}to{opacity:1}}
@keyframes tp-shell-rise{
  0%{opacity:0;transform:scale(.85) translateY(32px)}
  65%{transform:scale(1.02) translateY(-3px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes tp-close-spin{
  from{opacity:0;transform:scale(.6) rotate(-120deg)}
  to{opacity:1;transform:scale(1) rotate(0)}
}
.tp-hero-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0);
  backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
  z-index:800;display:flex;align-items:center;justify-content:center;padding:20px;
  transition:background .25s ease,backdrop-filter .25s ease;
}
.tp-hero-overlay.in{
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.tp-hero-shell{
  position:relative;width:min(800px,96vw);max-height:92vh;
  display:flex;flex-direction:column;
  background:var(--panel-raised);
  border:1px solid var(--glass-border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--glass-inset),0 24px 80px rgba(0,0,0,.5);
  opacity:0;transform:scale(.85) translateY(32px);
  transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.34,1.2,.64,1);
}
.tp-hero-shell.in{opacity:1;transform:scale(1) translateY(0)}
.tp-hero-close{
  position:absolute;top:12px;right:12px;z-index:20;
  width:36px;height:36px;border-radius:50%;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  color:var(--text);font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-ui);
  transition:all .15s;
  animation:tp-close-spin .45s .1s cubic-bezier(.34,1.56,.64,1) both;
}
.tp-hero-close:hover{
  background:color-mix(in srgb,var(--c-red) 18%,transparent);
  border-color:var(--c-red);color:var(--c-red);
  transform:rotate(90deg);
}
.tp-hero-card-wrap{
  flex:1;overflow:auto;
  animation:tp-shell-rise .38s .06s ease both;
}
.tp-hero-card-wrap .rc-scene{max-width:none}
.tp-hero-card-wrap .rc-wrap{min-height:340px;cursor:pointer}
.tp-hero-dice-mount{border-top:1px solid var(--border);animation:tp-shell-rise .38s .18s ease both}
.tp-hero-dice-mount .dr-widget{
  max-width:none;margin:0;border:none;border-radius:0;
  padding:12px 20px;flex-direction:row;flex-wrap:wrap;
  gap:14px;align-items:center;justify-content:center;
  background:var(--panel);
}

/* rs-player styles — see TABLE FULL HELP-LANGUAGE REDESIGN section */
/* ── Gen callout ── */
.tp-gen-callout{
  background:color-mix(in srgb,var(--accent) 5%,transparent);
  border-left:3px solid var(--accent);
  padding:8px 12px 9px;
  display:flex;flex-direction:column;gap:6px;
}
.tp-gen-callout-title{
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:5px;
}


/* ── Dropdown buttons ── */
.tp-dd-wrap{position:relative;display:inline-block}
.tp-dd-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;
  background:var(--glass-bg);
  border:1px solid var(--border);
  border-radius:8px;cursor:pointer;
  font-size:12px;font-weight:700;color:var(--text);
  font-family:var(--font-ui);
  min-height:34px;white-space:nowrap;
  transition:all .12s;
  backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);
}
.tp-dd-btn:hover,
.tp-dd-btn:focus-visible{outline:2px solid var(--focus-ring,var(--accent));outline-offset:2px}
.tp-dd-btn .chevron{font-size:10px;opacity:.6;transition:transform .12s;display:inline-block}
.tp-dd-btn[aria-expanded="true"] .chevron{transform:rotate(180deg)}
.tp-dd-menu{
  position:absolute;top:calc(100% + 5px);left:0;
  background:var(--panel-raised);
  border:1px solid var(--border);
  border-radius:10px;padding:5px;
  z-index:400;min-width:168px;
  box-shadow:0 8px 28px rgba(0,0,0,.28);
  animation:fadeUp .12s ease both;
}
.tp-dd-menu[hidden]{display:none}
.tp-dd-item{
  display:flex;align-items:center;gap:9px;
  padding:7px 11px;border-radius:7px;
  font-size:12px;font-weight:500;cursor:pointer;
  color:var(--text);background:none;border:none;
  width:100%;text-align:left;font-family:var(--font-ui);
  transition:background .1s,color .1s;
}
.tp-dd-item:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent)}
.tp-dd-item:focus-visible{outline:2px solid var(--focus-ring,var(--accent));outline-offset:-1px;border-radius:7px}
.tp-dd-sep{height:1px;background:var(--border);margin:4px 7px}

/* ── Card pop-in entrance ── */
@keyframes cc-pop-in{
  0%{opacity:0;transform:scale(.78) translateY(16px)}
  60%{transform:scale(1.05) translateY(-3px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
.cc.tp-card-new{animation:cc-pop-in .35s cubic-bezier(.34,1.3,.64,1) both}

/* ── Dice sub-bar integration ── */
.tp-sub-bar-body .dr-widget{max-width:none;margin:0;border:none;border-radius:0;padding:8px 14px}
.tp-sub-bar{background:var(--panel-raised);border-bottom:1px solid var(--border);flex-shrink:0;max-height:300px;overflow-y:auto}
.tp-sub-bar-body{padding:0}

/* ── Zone cards ── */

/* ── GM only card ── */

/* ── Free invoke badge ── */
.cc-free-invoke .cc-hdr{background:color-mix(in srgb,var(--c-green) 10%,transparent)}

/* ── Turn bar ── */
.rs-turn-bar{
  display:flex;align-items:center;gap:5px;
  padding:5px 10px;
  background:color-mix(in srgb,var(--accent) 4%,transparent);
  border-top:1px solid var(--border);
  flex-shrink:0;overflow-x:auto;
}
.rs-turn-pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 9px;border-radius:100px;
  background:var(--glass-bg);
  border:1px solid var(--border);
  font-size:11px;font-weight:700;color:var(--text-dim);
  cursor:pointer;white-space:nowrap;transition:all .12s;flex-shrink:0;
}
.rs-turn-pill:hover{border-color:var(--accent);color:var(--accent)}
.rs-turn-pill.acted{
  border-color:var(--c-green);
  background:color-mix(in srgb,var(--c-green) 8%,transparent);
  color:var(--c-green);
}