:root{--bg-base: #100C08;--bg-surface: #1C1610;--bg-surface-raised: #241E14;--bg-glass: rgba(28, 22, 16, .82);--bg-glass-light: rgba(36, 30, 20, .6);--glass-blur: 12px;--text-primary: #EDE0C4;--text-secondary: #BCA068;--text-disabled: #8A7548;--text-inverse: #100C08;--text-accent: #D4A847;--accent-primary: #C9A84C;--accent-secondary: #5C3D1E;--accent-glow: rgba(201, 168, 76, .15);--accent-glow-strong: rgba(201, 168, 76, .35);--accent-border: rgba(201, 168, 76, .3);--accent-border-active: rgba(201, 168, 76, .55);--danger: #8B1A1A;--danger-light: rgba(139, 26, 26, .25);--warning: #8B5E1A;--success: #1A5C2A;--success-light: rgba(26, 92, 42, .25);--info: #1A3A5C;--font-display: "Cinzel", Georgia, serif;--font-narration: "EB Garamond", Georgia, serif;--font-ui: "Inter", system-ui, sans-serif;--text-display: 48px;--text-h1: 32px;--text-h2: 24px;--text-h3: 18px;--text-narration: 22px;--text-narration-lg: 28px;--text-narration-xl: 34px;--text-body: 16px;--text-small: 13px;--text-micro: 11px;--leading-narration: 1.75;--leading-ui: 1.4;--leading-tight: 1.2;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--space-20: 80px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 20px;--radius-pill: 999px;--shadow-sm: 0 1px 3px rgba(0,0,0,.4);--shadow-md: 0 4px 12px rgba(0,0,0,.5);--shadow-lg: 0 8px 32px rgba(0,0,0,.6);--shadow-glow: 0 0 24px var(--accent-glow-strong);--border-subtle: 1px solid var(--accent-border);--border-active: 1px solid var(--accent-border-active);--border-surface: 1px solid rgba(255,255,255,.1);--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .28s cubic-bezier(.4, 0, .2, 1);--transition-fade: .6s ease;--touch-target: 48px;--touch-target-lg: 56px;--z-base: 1;--z-raised: 10;--z-overlay: 100;--z-modal: 200;--z-toast: 300;--campaign-texture: none;--campaign-tint: rgba(0,0,0,0);--campaign-title-track: .02em}.tv-mode{--text-narration: var(--text-narration-lg);--touch-target: 64px;--space-narration-padding: var(--space-12)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{background-color:var(--bg-base);color:var(--text-primary);font-family:var(--font-ui);font-size:var(--text-body);line-height:var(--leading-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E")}#app{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden}#overlay-root{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:var(--z-overlay)}#overlay-root>*{pointer-events:all}h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;color:var(--text-accent);letter-spacing:var(--campaign-title-track, .02em);line-height:var(--leading-tight)}h1{font-size:var(--text-h1)}h2{font-size:var(--text-h2)}h3{font-size:var(--text-h3)}p{line-height:var(--leading-ui);color:var(--text-secondary)}.narration{font-family:var(--font-narration);font-size:var(--text-narration);line-height:var(--leading-narration);color:var(--text-primary)}.narration em{font-style:italic;color:var(--text-accent)}.campaign-title{font-family:var(--font-display);font-size:var(--text-display);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-primary)}.scroll-y{overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:thin;scrollbar-color:var(--accent-secondary) transparent}.scroll-y::-webkit-scrollbar{width:4px}.scroll-y::-webkit-scrollbar-track{background:transparent}.scroll-y::-webkit-scrollbar-thumb{background-color:var(--accent-secondary);border-radius:2px}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column}.screen-center{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.text-accent{color:var(--accent-primary)}.text-dim{color:var(--text-secondary)}.text-danger{color:var(--danger)}.text-success{color:#4caf50}.font-display{font-family:var(--font-display)}.font-narration{font-family:var(--font-narration)}.mt-auto{margin-top:auto}.mb-auto{margin-bottom:auto}:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px;border-radius:var(--radius-sm)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--touch-target);padding:var(--space-3) var(--space-6);border:none;border-radius:var(--radius-md);font-family:var(--font-ui);font-size:var(--text-body);font-weight:600;letter-spacing:.03em;cursor:pointer;transition:all var(--transition-base);text-decoration:none;white-space:nowrap;-webkit-user-select:none;user-select:none}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent-primary);color:var(--text-inverse);box-shadow:var(--shadow-md)}.btn-primary:hover:not(:disabled){background:#d4b55a;box-shadow:var(--shadow-glow);transform:translateY(-1px)}.btn-primary:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-sm)}.btn-secondary{background:transparent;color:var(--accent-primary);border:1px solid var(--accent-border-active)}.btn-secondary:hover:not(:disabled){background:var(--accent-glow);border-color:var(--accent-primary)}.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid transparent}.btn-ghost:hover:not(:disabled){color:var(--text-primary);background:var(--bg-surface-raised)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){background:#a32020;box-shadow:0 0 16px #8b1a1a66}.btn-lg{min-height:var(--touch-target-lg);padding:var(--space-4) var(--space-8);font-size:var(--text-h3);border-radius:var(--radius-lg)}.btn-sm{min-height:36px;padding:var(--space-2) var(--space-4);font-size:var(--text-small)}.btn-icon{width:var(--touch-target);height:var(--touch-target);padding:0;border-radius:var(--radius-md)}.card{background:var(--bg-surface);border:var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-5);transition:border-color var(--transition-base),box-shadow var(--transition-base)}.card:hover{border-color:var(--accent-border-active)}.card.interactive{cursor:pointer}.card.interactive:hover{box-shadow:var(--shadow-glow);transform:translateY(-2px)}.card.interactive:active{transform:translateY(0)}.card.selected{border-color:var(--accent-primary);background:var(--bg-surface-raised);box-shadow:var(--shadow-glow)}.glass{background:var(--bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:var(--border-subtle);border-radius:var(--radius-lg)}.glass-panel{background:var(--bg-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:var(--border-subtle)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#080604bf;display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);padding:var(--space-4);animation:fadeIn var(--transition-base) ease}.modal{background:var(--bg-surface);border:var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-8);max-width:560px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:slideUp var(--transition-slow) ease}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}.modal-title{font-family:var(--font-display);font-size:var(--text-h2);color:var(--accent-primary)}.modal-close{color:var(--text-secondary);background:none;border:none;cursor:pointer;font-size:20px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);transition:all var(--transition-fast)}.modal-close:hover{color:var(--text-primary);background:var(--bg-surface-raised)}.input{width:100%;background:var(--bg-surface-raised);border:var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);color:var(--text-primary);font-family:var(--font-ui);font-size:var(--text-body);min-height:var(--touch-target);transition:border-color var(--transition-fast);outline:none}.input:focus{border-color:var(--accent-primary)}.input::placeholder{color:var(--text-disabled)}.textarea{resize:vertical;min-height:100px;line-height:var(--leading-narration)}.input-label{display:block;font-family:var(--font-display);font-size:var(--text-small);color:var(--text-secondary);letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--space-2)}.input-group{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-5)}.hp-bar{height:6px;background:var(--bg-surface-raised);border-radius:var(--radius-pill);overflow:hidden}.hp-bar-fill{height:100%;border-radius:var(--radius-pill);transition:width .4s ease-in-out,background-color .4s ease-in-out;background:linear-gradient(90deg,var(--success) 0%,#4CAF50 100%)}.hp-bar-fill[data-pct=warning]{background:linear-gradient(90deg,var(--warning) 0%,#B8860B 100%)}.hp-bar-fill[data-pct=danger]{background:linear-gradient(90deg,var(--danger) 0%,#CC2020 100%)}.token-budget{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:var(--bg-surface-raised);border:var(--border-surface);font-size:var(--text-micro);font-family:var(--font-ui);color:var(--text-secondary)}.token-budget-dot{width:6px;height:6px;border-radius:50%;background:var(--success);flex-shrink:0;transition:background .4s ease}.token-budget[data-level=warning] .token-budget-dot{background:var(--warning)}.token-budget[data-level=danger] .token-budget-dot{background:var(--danger)}.dice-result{font-family:var(--font-display);font-size:1.1em;color:var(--accent-primary);font-weight:700;padding:0 var(--space-1)}.dice-result.crit{color:gold;text-shadow:0 0 12px rgba(255,215,0,.5);animation:critFlash .6s ease}.dice-result.fumble{color:var(--danger);animation:shake .4s ease}.toast{position:fixed;top:var(--space-4);left:50%;transform:translate(-50%);z-index:var(--z-toast);background:var(--bg-surface);border:var(--border-active);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-5);font-family:var(--font-ui);font-size:var(--text-small);color:var(--text-primary);box-shadow:var(--shadow-lg);white-space:nowrap;animation:toastIn var(--transition-slow) ease}.character-card{display:flex;flex-direction:column;gap:var(--space-2)}.character-card-name{font-family:var(--font-display);font-size:var(--text-h3);color:var(--accent-primary)}.character-card-sub{font-size:var(--text-small);color:var(--text-secondary)}.step-progress{display:flex;gap:var(--space-2);align-items:center}.step-dot{width:8px;height:8px;border-radius:50%;background:var(--bg-surface-raised);border:1px solid var(--accent-border);transition:all var(--transition-base)}.step-dot.active{background:var(--accent-primary);border-color:var(--accent-primary);box-shadow:0 0 8px var(--accent-glow-strong)}.step-dot.complete{background:var(--success);border-color:var(--success)}.thinking-dots{display:inline-flex;gap:4px;align-items:center}.thinking-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-primary);animation:thinkingPulse 1.4s ease-in-out infinite}.thinking-dot:nth-child(2){animation-delay:.2s}.thinking-dot:nth-child(3){animation-delay:.4s}.divider{border:none;border-top:1px solid var(--accent-border);margin:var(--space-5) 0}.badge{display:inline-flex;align-items:center;padding:2px var(--space-2);border-radius:var(--radius-pill);font-size:var(--text-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase}.badge-family{background:var(--success-light);color:#4caf50}.badge-mature{background:var(--danger-light);color:#e05050}.badge-free{background:var(--accent-glow);color:var(--accent-primary)}.badge-premium{background:#ffd7001a;color:gold}.badge-new{background:var(--info);color:#60a0d0}.glass{background:var(--bg-glass);-webkit-backdrop-filter:blur(var(--glass-blur, 12px));backdrop-filter:blur(var(--glass-blur, 12px));border:1px solid var(--accent-border);box-shadow:0 8px 32px #00000073,inset 0 1px #ffffff0a}.glass-light{background:var(--bg-glass-light)}@media (prefers-reduced-transparency: reduce){.glass,.glass-light{background:var(--bg-surface-raised);-webkit-backdrop-filter:none;backdrop-filter:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(32px)}to{opacity:1;transform:translate(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-32px)}to{opacity:1;transform:translate(0)}}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(-12px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes thinkingPulse{0%,80%,to{opacity:.3;transform:scale(1)}40%{opacity:1;transform:scale(1.3)}}@keyframes critFlash{0%{text-shadow:0 0 0 rgba(255,215,0,0)}30%{text-shadow:0 0 24px rgba(255,215,0,.9)}to{text-shadow:0 0 12px rgba(255,215,0,.5)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}@keyframes milestoneGlow{0%{opacity:0;transform:translateY(0)}20%{opacity:1}80%{opacity:.6}to{opacity:0;transform:translateY(-40px)}}@keyframes emberFloat{0%{opacity:0;transform:translateY(0) scale(.8)}20%{opacity:1}to{opacity:0;transform:translateY(-60px) scale(.4) rotate(20deg)}}@keyframes pulseSubtle{0%,to{opacity:1}50%{opacity:.6}}@keyframes controlFade{0%{opacity:1}to{opacity:0;pointer-events:none}}@keyframes typewriterCursor{0%,to{opacity:1}50%{opacity:0}}.animate-fade-in{animation:fadeIn var(--transition-base) ease}.animate-slide-up{animation:slideUp var(--transition-slow) ease}.animate-slide-down{animation:slideDown var(--transition-slow) ease}.controls-autohide{transition:opacity var(--transition-fade)}.controls-autohide.hidden{opacity:0;pointer-events:none}.typewriter-cursor:after{content:"|";animation:typewriterCursor 1s ease infinite;color:var(--accent-primary);margin-left:2px}.milestone-particle{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--accent-primary);pointer-events:none;animation:emberFloat 1.5s ease forwards}