/* 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;
  --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;
  --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-campaign="thelongafter"]{--accent:#F5A623;--accent-dim:#C07818;--gold:#F5A623;--tag-bg:rgba(245,166,35,0.12);--tag-border:rgba(245,166,35,0.28);--c-red:#FF5A3C;--c-green:#4CD964;--c-blue:#5AC8FA;--c-purple:#BF5AF2;--orb-a:rgba(245,166,35,0.14);--orb-b:rgba(200,130,20,0.08);--camp-bg:linear-gradient(160deg,#1A0E00 0%,#2D1800 30%,#0D0800 100%)}
[data-theme="light"][data-campaign="thelongafter"]{--accent:#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%)}
[data-campaign="cyberpunk"]{--accent:#32D7E8;--accent-dim:#0891A2;--gold:#32D7E8;--tag-bg:rgba(50,215,232,0.10);--tag-border:rgba(50,215,232,0.25);--c-red:#FF375F;--c-green:#30D158;--c-blue:#0A84FF;--c-purple:#BF5AF2;--orb-a:rgba(50,215,232,0.14);--orb-b:rgba(20,170,190,0.08);--camp-bg:linear-gradient(160deg,#001418 0%,#002830 30%,#000D10 100%)}
[data-theme="light"][data-campaign="cyberpunk"]{--accent:#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%)}
[data-campaign="fantasy"]{--accent:#D4884A;--accent-dim:#A06020;--gold:#D4884A;--tag-bg:rgba(212,168,74,0.10);--tag-border:rgba(212,168,74,0.24);--c-red:#FF6B4A;--c-green:#4CD964;--c-blue:#5AC8FA;--c-purple:#BF5AF2;--orb-a:rgba(212,168,74,0.14);--orb-b:rgba(170,130,40,0.08);--camp-bg:linear-gradient(160deg,#141000 0%,#221A00 30%,#0A0800 100%)}
[data-theme="light"][data-campaign="fantasy"]{--accent:#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%)}
[data-campaign="space"]{--accent:#BF7AF0;--accent-dim:#7C3ACD;--gold:#BF7AF0;--tag-bg:rgba(191,122,240,0.10);--tag-border:rgba(191,122,240,0.25);--c-red:#FF6482;--c-green:#30D158;--c-blue:#64D2FF;--c-purple:#DA8FFF;--orb-a:rgba(191,122,240,0.14);--orb-b:rgba(140,80,210,0.08);--camp-bg:linear-gradient(160deg,#0E0820 0%,#1A1040 30%,#080418 100%)}
[data-theme="light"][data-campaign="space"]{--accent:#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%)}
[data-campaign="victorian"]{--accent:#C8B858;--accent-dim:#8A8520;--gold:#C8B858;--tag-bg:rgba(232,169,74,0.10);--tag-border:rgba(232,169,74,0.24);--c-red:#FF6961;--c-green:#4CD964;--c-blue:#5AC8FA;--c-purple:#AF8DC3;--orb-a:rgba(232,169,74,0.14);--orb-b:rgba(190,140,50,0.08);--camp-bg:linear-gradient(160deg,#141008 0%,#201808 30%,#0A0804 100%)}
[data-theme="light"][data-campaign="victorian"]{--accent:#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%)}
[data-campaign="postapoc"]{--accent:#F08030;--accent-dim:#A04D12;--gold:#F08030;--tag-bg:rgba(240,128,48,0.10);--tag-border:rgba(240,128,48,0.25);--c-red:#FF6B6B;--c-green:#4CD964;--c-blue:#5AC8FA;--c-purple:#BF5AF2;--orb-a:rgba(240,128,48,0.14);--orb-b:rgba(200,100,30,0.08);--camp-bg:linear-gradient(160deg,#180800 0%,#281200 30%,#0C0400 100%)}
[data-theme="light"][data-campaign="postapoc"]{--accent:#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%)}
[data-campaign="western"]{--accent:#D4924A;--accent-dim:#A06830;--gold:#D4924A;--tag-bg:rgba(212,146,74,0.13);--tag-border:rgba(212,146,74,0.30);--c-red:#C03020;--c-green:#507040;--c-blue:#4A7890;--c-purple:#8B6090;--orb-a:rgba(212,146,74,0.13);--orb-b:rgba(160,100,30,0.07);--camp-bg:linear-gradient(160deg,#1a0f06 0%,#2d1a08 30%,#0f0804 100%)}
[data-theme="light"][data-campaign="western"]{--accent:#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%)}

/* ══ 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(--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-primary{background:linear-gradient(135deg,var(--accent),var(--accent-dim));border-color:transparent;color:#fff;font-weight:700;letter-spacing:0.02em;font-size:var(--text-sm);padding:10px 28px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 4px 16px color-mix(in srgb,var(--accent) 30%,transparent)}
[data-theme="light"] .btn-primary{color:#fff}
.btn-primary:hover{filter:brightness(1.12)}
.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 ══ */
.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) */
.label-muted{font-size:var(--text-label);color:var(--text-muted)}
.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) */
.fade-up{animation:fadeUp 0.3s ease both}

/* ══ 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 ══ */
.land-section{margin-bottom:40px}
  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)
}

/* ── Audience router ── */

/* ── Campaign quiz filter ── */

/* ── 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}

/* ── Duck.ai prompt link ── */
.duck-link{display:inline-flex;align-items:center;gap:5px;margin-top:10px;padding:5px 12px;border-radius:var(--glass-radius-pill);border:1px solid var(--border);background:transparent;color:var(--c-blue);font-size:var(--text-label);font-family:var(--font-ui);font-weight:600;text-decoration:none;cursor:pointer;transition:all 0.15s}
.duck-link:hover{border-color:var(--c-blue);background:color-mix(in srgb,var(--c-blue) 8%,transparent);text-decoration:none}

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

/* ── Next Step Strip ── */
[data-theme="light"] 

/* ══ 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"]
/* ══ CAMPAIGN HERO — Editorial genre + name ══ */

/* ══ ROLL HERO — Primary action button ══ */

/* ── Inspiration Mode (ND-07) ─────────────────────────────────────── */
.inspire-active{color:var(--accent)!important;border-color:color-mix(in srgb,var(--accent) 40%,transparent)!important}
.inspire-wrap{margin-bottom:20px}
.inspire-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.inspire-grid{display:grid;grid-template-columns:1fr;gap:10px}
.inspire-card{display:flex;align-items:flex-start;gap:12px;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 0.12s,background 0.12s;width:100%}
.inspire-card:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--glass-bg))}
.inspire-card-num{width:24px;height:24px;border-radius:50%;background:var(--glass-border);color:var(--text-muted);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.inspire-card:hover .inspire-card-num{background:var(--accent);color:#fff}
.inspire-card-title{font-size:15px;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:2px}
.inspire-card-sub{font-size:13px;color:var(--text-dim);font-style:italic;line-height:1.4}

/* ── Fate Point Tracker (ND-10) ───────────────────────────────────── */
.fp-panel{position:fixed;top:72px;right:16px;z-index:200;width:280px;animation:fadeUp 0.2s ease both}
.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;outline:none;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}
.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}
.fp-dot-filled{background:var(--accent);border-color:var(--accent)}
.fp-btn{width:26px;height:26px;border-radius:50%;border:1px solid var(--border);background:var(--glass-bg);color:var(--text-dim);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;transition:background 0.1s;padding:0}
.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)}
.btn-roll{
  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;
}
.btn-roll:hover{filter:brightness(1.12)}
.btn-roll:active{filter:brightness(0.95)}
.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. */
[data-campaign="thelongafter"] .btn-roll{
  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;
}
[data-campaign="thelongafter"] .roll-fx::before{
  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));
}
[data-campaign="thelongafter"] .btn-roll:disabled{
  animation:tla-detonate 0.3s ease-out forwards;
}
[data-campaign="thelongafter"] .btn-roll:disabled .roll-fx::before{
  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. */
[data-campaign="cyberpunk"] .btn-roll{
  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;
}
[data-campaign="cyberpunk"] .roll-fx::after{
  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;
}
[data-campaign="cyberpunk"] .btn-roll:disabled{
  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. */
[data-campaign="fantasy"] .btn-roll{
  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;
}
[data-campaign="fantasy"] .roll-fx::before{
  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;
}
[data-campaign="fantasy"] .btn-roll:disabled{
  animation:fan-crack 0.4s ease-out forwards;
}
[data-campaign="fantasy"] .btn-roll:disabled .roll-fx::before{opacity:1}
@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. */
[data-campaign="space"] .btn-roll{
  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;
}
[data-campaign="space"] .btn-roll:disabled{
  animation:sp-burn 0.35s ease-out forwards;
  transform:translateX(3px);
}
[data-campaign="space"] .btn-roll:disabled ~ *,
  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. */
[data-campaign="victorian"] .btn-roll{
  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;
}
[data-campaign="victorian"] .btn-roll:disabled{
  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. */
[data-campaign="postapoc"] .btn-roll{
  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;
}
[data-campaign="postapoc"] .roll-fx::after{
  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;
}
[data-campaign="postapoc"] .btn-roll:disabled{
  animation:pa-static 0.08s steps(3) 4;
  color:#fff;
  box-shadow:0 0 50px color-mix(in srgb,var(--accent) 60%,transparent);
}
[data-campaign="postapoc"] .btn-roll:disabled .roll-fx::after{
  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 ══ */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}

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

/* ══ OPPOSITION CARD ══ */

/* ══ PARTY PICKER ══ */
.party-label{font-size:var(--text-sm);color:var(--text-dim);font-weight:500}
.party-btn{background:transparent;border:1px solid var(--border);border-radius:8px;padding:4px 9px;cursor:pointer;color:var(--text-dim);font-size:var(--text-sm);font-family:var(--font-ui);font-weight:500;min-width:30px}
.party-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}

/* ══ 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-section{margin-bottom:16px}
.help-section-lbl{font-size:var(--text-label);letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:7px;font-weight:600}
.help-rule-row{display:flex;align-items:flex-start;gap:11px;margin-bottom:9px;justify-content:space-between}
.help-rule-icon{color:var(--accent);font-size:var(--text-lg);flex-shrink:0;margin-top:1px}
.help-rule-text{font-size:var(--text-sm);color:var(--text);line-height:1.6;flex:1}
.help-rule-srd{flex-shrink:0;font-size:11px;color:var(--accent);text-decoration:none;opacity:0.55;margin-top:3px;letter-spacing:0.02em;white-space:nowrap;transition:opacity 0.15s}
.help-rule-srd:hover{opacity:1;text-decoration:underline}
.help-gm-tip{background:var(--inset);border-left:3px solid var(--accent);border-radius:0 var(--glass-radius-sm) var(--glass-radius-sm) 0;padding:12px 16px;margin-top:6px}
.help-gm-tip-label{font-size:var(--text-label);letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;font-weight:700}
.help-gm-tip-text{font-size:var(--text-sm);color:var(--text);line-height:1.65;font-style:italic}
.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 ══ */
.export-copied{background:var(--c-green)!important}

/* ══ RESPONSIVE ══ */
@media(max-width:680px){
  .two-col{grid-template-columns:1fr}

  /* 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{color:var(--text-dim);text-decoration:none}
.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}

  .two-col{gap:12pt!important}
  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(--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{padding:14px 14px 10px;border-bottom:1px solid var(--border)}
.sidebar-section:last-child{border-bottom:none;margin-top:auto}
.sidebar-link{display:block;font-size:var(--text-sm);color:var(--text-dim);text-decoration:none;padding:5px 0;transition:color 0.15s}
.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 */
.result-tab-btn{flex:1;height:34px;font-size:11px;font-weight:500;border:none;cursor:pointer;font-family:var(--font-ui);background:transparent;color:var(--text-muted);border-bottom:2px solid transparent;transition:color .12s,border-color .12s;display:flex;align-items:center;justify-content:center;gap:4px}
.result-tab-btn:hover{color:var(--text-dim)}
.result-tab-btn.active{color:var(--text);border-bottom-color:var(--accent)}
.result-tab-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Tab panel scroll container */
.result-tab-content{flex:1;overflow-y:auto;min-height:0}
.result-tab-content::-webkit-scrollbar{width:3px}
.result-tab-content::-webkit-scrollbar-thumb{background:var(--border-mid);border-radius:2px}
.result-tab-panel{display:none;padding:14px 18px;flex-direction:column;gap:11px}
.result-tab-panel.active{display:flex}

/* 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 */
.rtp-ic{border-radius:8px;padding:10px 13px;border:1px solid var(--border)}
.rtp-ic.invoke{background:color-mix(in srgb,var(--accent) 6%,transparent);border-color:color-mix(in srgb,var(--accent) 25%,transparent)}
.rtp-ic.compel{background:color-mix(in srgb,var(--c-red) 5%,transparent);border-color:rgba(192,48,48,.18)}
.rtp-ic-hdr{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:4px}
.rtp-ic.invoke .rtp-ic-hdr{color:var(--accent)}
.rtp-ic.compel .rtp-ic-hdr{color:var(--c-red)}
.rtp-ic-body{font-size:12px;color:var(--text-dim);line-height:1.65;font-style:italic}

/* 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:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#6b90e8;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-bounce{animation:pin-bounce .38s cubic-bezier(.34,1.56,.64,1) both}
.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)}}
.inspire-card.inspire-ghost{animation:inspire-fade-out .25s ease both forwards;pointer-events:none}
.inspire-card.inspire-chosen{animation:inspire-select .3s ease both}

/* 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)}}
.taken-out-label{display:inline-block;font-size:var(--text-label);font-weight:700;color:var(--c-red);letter-spacing:.06em;animation:takenout-label .3s ease both;margin-left:8px}

/* 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-pulse{animation:streak-pulse .6s ease both}
.streak-badge{position:absolute;top:-8px;right:-8px;font-size:9px;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 */
.pwa-banner-update{
  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));
}
.pwa-banner-update .pwa-banner-action{
  background:var(--accent);border-color:var(--accent);color:#000;
}
/* safari warn — amber */
.pwa-banner-warn{
  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 */
.pwa-banner-ios{
  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-panel{display:flex;flex-direction:column;gap:0;padding:0}
.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-btn{font-size:11px;padding:3px 10px;min-height:0;height:26px}
.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-btn{position:relative;background:color-mix(in srgb,var(--accent) 8%,transparent);border:.5px solid color-mix(in srgb,var(--accent) 30%,transparent)!important}
.full-session-btn:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)!important}
.full-session-btn.active{background:color-mix(in srgb,var(--accent) 15%,transparent)!important}
.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:9px;font-weight:700;margin-left:auto;flex-shrink:0}
.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}
.vault-btn{font-size:12px!important;padding:4px 8px!important;min-height:28px!important;border:1px solid var(--border)!important;border-radius:4px!important}
.vault-btn-danger{color:var(--c-red)!important;border-color:var(--c-red)!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}
.vault-btn{font-size:12px!important;padding:4px 8px!important;min-height:0!important}
.vault-btn-danger{color:var(--c-red)!important}

/* ── 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;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}
/* 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;
}

/* ── Intro modal (campaign pages) ──────────────────────────────────────────── */
.intro-modal-overlay {
  z-index: 2000;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.intro-modal-box {
  position: relative;
  width: min(90vw, 720px);
  aspect-ratio: 4 / 3;
  border-radius: var(--glass-radius);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
}
.intro-modal-stage {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}
.intro-modal-dismiss {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  pointer-events: none;
  font-family: 'Courier New', monospace;
}
/* ── Centering for all inline intro containers ─────────────────────────────── */
.fate-intro-inline .fate-intro-content,
.intro-modal-stage .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:9px;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{font-size:10px;font-weight:700;height:28px;padding:0 8px;border-radius:5px;cursor:pointer;border:none;font-family:var(--font-ui);letter-spacing:.03em;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;transition:opacity .12s}
.topbar-chip:hover{opacity:.8}
.topbar-chip-gm{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.topbar-chip-gm-off{background:rgba(255,255,255,.07);color:var(--text-muted)}
.topbar-chip-hl{background:rgba(255,255,255,.07);color:var(--text-muted)}
.topbar-chip-offline{background:rgba(220,50,50,.18);color:#ff7070;animation:tb-blink 2s ease-in-out infinite}
@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(--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 ─────────────────────────────── */
.gm-sidebar-block{border-bottom:1px solid var(--border);flex-shrink:0}
.gm-sidebar-main{display:flex;align-items:center;gap:8px;padding:9px 14px 6px}
.gm-sidebar-left{flex:1;min-width:0}
.gm-sidebar-title{font-size:12px;font-weight:600;color:var(--text)}
.gm-sidebar-subrow{display:flex;align-items:center;gap:5px;margin-top:3px}
.gm-sidebar-sublabel{font-size:11px;color:var(--text-muted)}
.gm-sidebar-off-note{font-size:10px;color:var(--text-muted);padding:2px 14px 8px;font-style:italic;flex-shrink:0}

/* ── ToggleSwitch inside sidebar — 44px tap target wrapper (W2) */
.sidebar-tog-wrap{width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:0}
.sidebar-tog-wrap:focus-visible{outline:2px solid var(--accent);border-radius:4px}

/* ── Help level pill in sidebar ──────────────────────────────── */
.hl-sb-pill{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:500;color:var(--text-dim);background:var(--panel-raised);border:1px solid var(--border-bright);border-radius:5px;padding:2px 7px;cursor:pointer;transition:border-color .12s;white-space:nowrap;min-height:24px}
.hl-sb-pill:hover{border-color:var(--accent)}
.hl-sb-pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hl-sb-caret{font-size:8px;color:var(--text-muted);margin-left:2px;display:inline-block;transition:transform .2s;line-height:1}
.hl-sb-caret.open{transform:rotate(180deg)}

/* ── Help level picker drawer ────────────────────────────────── */
.hl-sb-drawer{overflow:hidden;transition:max-height .22s ease,opacity .18s ease;flex-shrink:0}
.hl-sb-drawer.open{max-height:280px;opacity:1}
.hl-sb-drawer.closed{max-height:0;opacity:0;pointer-events:none}
.hl-sb-inner{padding:3px 10px 10px}
.hl-sb-opt{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:7px;cursor:pointer;border:1px solid transparent;transition:background .1s;min-height:44px;flex-shrink:0;width:100%;background:transparent;font-family:var(--font-ui);text-align:left}
.hl-sb-opt:hover{background:var(--panel-raised)}
.hl-sb-opt.selected{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:var(--border-bright)}
.hl-sb-opt:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
.hl-sb-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.hl-sb-name{font-size:12px;font-weight:500;color:var(--text-dim);line-height:1.3}
.hl-sb-opt.selected .hl-sb-name{color:var(--accent)}
.hl-sb-sub{font-size:10px;color:var(--text-muted);line-height:1.35;margin-top:1px}

/* ══ 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}
.land-topnav-btn{font-size:13px;text-decoration:none}
/* 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){
  .land-topnav-btn{display:none!important}
}
/* 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:#30D158;
  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}
.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)}
.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)}
.land-gen-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:560px){.land-gen-groups{grid-template-columns:1fr}}
.land-gen-group{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--glass-radius);padding:14px 16px}
.land-gen-group-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.land-gen-group-icon{font-size:16px}
.land-gen-group-name{font-size:var(--text-sm);font-weight:700;color:var(--text)}
.land-gen-group-items{display:flex;flex-direction:column;gap:3px}
.land-gen-item{display:flex;flex-direction:column;font-size:var(--text-sm);color:var(--text-dim);padding:3px 0;gap:1px}
/* 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 ══ */

.land-gen-item-name{font-size:var(--text-sm);color:var(--text-dim)}
.land-gen-item-sub{font-size:11px;color:var(--text-muted);letter-spacing:0.01em;padding-left:18px}

/* ══ 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 */
.action-bar-roll{
  flex-shrink:0;padding:10px 24px;min-height:44px;min-width:0;
  font-size:var(--text-base);
}
/* Inspire: explicit label, accent on active */
.action-bar-inspire{
  flex-shrink:0;min-height:44px;padding:6px 14px;
  display:inline-flex;align-items:center;gap:5px;
}
.action-bar-label{font-size:var(--text-sm);font-weight:500}
/* Contextual pills (consequence severity / party size) */
.action-bar-ctx{font-size:11px!important;padding:3px 9px!important;min-height:0!important;border-radius:100px!important}
/* Divider between groups */
.action-bar-divider{width:1px;height:20px;background:var(--border);flex-shrink:0;margin:0 2px}
/* Secondary group pushed to right */
.action-bar-secondary{margin-left:auto;display:flex;align-items:center;gap:4px}
/* Icon-only secondary buttons */
.action-bar-icon{min-height:44px!important;padding:6px 8px!important;font-size:16px!important;line-height:1}
/* Mobile: Roll takes full row, rest wraps below */
@media(max-width:480px){
  .action-bar-roll{flex:1;min-width:0}
  .action-bar-secondary{margin-left:0}
}
/* ═══ 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-pill{font-size:9px;text-transform:uppercase;letter-spacing:0.08em;padding:3px 10px;border-radius:10px;font-weight:600;flex-shrink:0}
.fd-pill-type{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent-dim);border:0.5px solid color-mix(in srgb,var(--accent) 25%,transparent)}
.fd-pill-ref{background:var(--accent);color:var(--bg,#000);font-weight:700}
.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:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent-dim);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{margin-left:5px;font-size:9px;cursor:help;transition:opacity .12s;opacity:.7;flex-shrink:0}
.fd-asp-quality:hover{opacity:1}
.fd-aq-strong{color:var(--c-green)}
.fd-aq-ok{color:var(--accent)}
.fd-aq-weak{color:var(--text-muted)}

.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:9px;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:9px;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{display:inline-block;font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;padding:1px 5px;border-radius:2px;margin-left:5px;vertical-align:middle}
.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)}.fd-cond:last-child{border-bottom:none}
.fd-cl{font-size:9px;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}
.fd-infobox-label{font-size:9px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:2px}
.fd-infobox-text{color:var(--text)}
.fd-aspect-active{background:color-mix(in srgb,var(--accent) 10%,transparent)!important;border-color:color-mix(in srgb,var(--accent) 40%,transparent)!important}
.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-outcome-fail{background:color-mix(in srgb,var(--c-red) 10%,transparent);color:var(--c-red)}
.dr-outcome-tie{background:color-mix(in srgb,#FFCC00 10%,transparent);color:#FFCC00}
.dr-outcome-success{background:color-mix(in srgb,var(--c-green) 10%,transparent);color:var(--c-green)}
.dr-outcome-success-with-style{background:color-mix(in srgb,var(--c-blue) 10%,transparent);color:var(--c-blue)}
.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-shuffle-btn{font-size:13px;padding:8px 18px;white-space:nowrap;align-self:center}
.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:9px;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{font-size:12px;padding:4px 10px;min-height:36px;color:var(--text-muted);border-color:var(--border)}
.compact-toggle-btn.active{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
/* 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;outline: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-result-type{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:3px;flex-shrink:0}
.qf-type-gen{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.qf-type-wiki{background:color-mix(in srgb,var(--c-blue) 12%,transparent);color:var(--c-blue)}
.qf-type-world{background:color-mix(in srgb,var(--c-green) 12%,transparent);color:var(--c-green)}
.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:9px;transition:transform .15s;display:inline-block}
.stunt-suggest-panel{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.stunt-suggest-eyebrow{font-size:9px;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:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.stunt-suggest-skill{font-size:9px;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:9px;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:9px;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:9px;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:8px 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}
.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:9px;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-how{font-size:11px;color:var(--text-dim);line-height:1.6;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:8px;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:9px;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:9px;color:var(--accent);text-decoration:none;flex-shrink:0;opacity:.7;white-space:nowrap}
.rhp-srd:hover{opacity:1;text-decoration:underline}

.rhp-srd{color:var(--accent);text-decoration:none;font-size:10px}
.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:8px;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:8px;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}
.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:9px;color:var(--c-green);flex-shrink:0;margin-top:1px}
.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-beginner{font-size:12px;color:var(--text);line-height:1.7;font-weight:500;margin-bottom:8px}
.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:9px;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:20px;height:20px;border:1.5px solid var(--border-mid);border-radius:4px;background:none;cursor:pointer;transition:all .1s;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:9px;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)}