.layout{min-height:100vh;display:flex;flex-direction:column}.layout-header{background:var(--bg-tertiary);border-bottom:1px solid var(--border-color);padding:var(--spacing-md) var(--spacing-lg);position:relative}.header-content{max-width:1200px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md)}.header-title{font-size:1.75rem;margin:0}.header-title-group{display:flex;align-items:center;gap:var(--spacing-md)}.title-bracket{color:var(--accent-cyan)}.header-subtitle{font-size:.875rem;color:var(--text-secondary);margin:0}.header-actions{display:flex;align-items:center;gap:var(--spacing-sm);position:relative}.menu-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:8px;color:var(--text-muted);transition:color .2s}.menu-btn:hover{color:var(--text-primary)}.dropdown-menu{position:absolute;top:100%;right:0;margin-top:var(--spacing-xs);background:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--border-radius);min-width:180px;z-index:100;box-shadow:0 4px 12px #0000004d}.dropdown-item{display:block;width:100%;padding:var(--spacing-sm) var(--spacing-md);background:none;border:none;text-align:left;color:var(--text-primary);cursor:pointer;font-size:.875rem;transition:background .2s}.dropdown-item:hover{background:var(--bg-secondary)}.dropdown-item:first-child{border-radius:var(--border-radius) var(--border-radius) 0 0}.dropdown-item:last-child{border-radius:0 0 var(--border-radius) var(--border-radius)}.settings-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:8px;color:var(--text-muted);transition:color .2s}.settings-btn:hover{color:var(--text-primary)}.layout-main{flex:1;padding:var(--spacing-lg);max-width:1400px;margin:0 auto;width:100%}.layout-footer{background:var(--bg-tertiary);border-top:1px solid var(--border-color);padding:var(--spacing-sm) var(--spacing-lg);text-align:center}.footer-text{font-size:.75rem;color:var(--text-muted);margin:0}@media(max-width:768px){.layout-header{padding:var(--spacing-sm) var(--spacing-md)}.header-content{flex-direction:column;gap:var(--spacing-xs);text-align:center}.layout-main{padding:var(--spacing-md)}}.new-game{display:flex;justify-content:center;align-items:flex-start;padding:var(--spacing-lg) 0}.new-game-card{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);padding:var(--spacing-xl);max-width:800px;width:100%}.new-game-card h2{margin-bottom:var(--spacing-sm);text-align:center}.new-game-intro{text-align:center;color:var(--text-secondary);margin-bottom:var(--spacing-lg)}.new-game-form{display:flex;flex-direction:column;gap:var(--spacing-md)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.input-with-button{display:flex;gap:var(--spacing-sm)}.input-with-button input{flex:1}.dice-btn{padding:var(--spacing-sm);font-size:1.25rem;max-width:44px;min-width:44px}.form-group label{font-size:.875rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.form-hint{font-size:.75rem;color:var(--text-muted);margin-top:var(--spacing-xs)}.button-row{display:flex;gap:var(--spacing-md);justify-content:center;margin-top:var(--spacing-md)}.button-row .btn{min-width:120px}.class-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.class-card{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-md);background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--border-radius);cursor:pointer;transition:all .2s ease;text-align:center}.class-card:hover{border-color:var(--accent-cyan)}.class-card.selected{border-color:var(--accent-cyan);box-shadow:var(--glow-cyan)}.class-icon{font-size:2rem}.class-name{font-weight:600;font-size:1.125rem;color:var(--accent-cyan)}.class-desc{font-size:.75rem;color:var(--text-secondary)}.class-stats{display:flex;flex-wrap:wrap;gap:var(--spacing-xs);justify-content:center;font-size:.625rem;color:var(--text-muted);margin-top:var(--spacing-xs)}@media(max-width:600px){.new-game-card{padding:var(--spacing-md)}.class-grid{grid-template-columns:1fr}.button-row{flex-direction:column}.button-row .btn{width:100%}}.game-view{display:grid;grid-template-columns:1fr 300px;gap:var(--spacing-lg);min-height:calc(100vh - 200px)}.game-main{display:flex;flex-direction:column;gap:var(--spacing-md)}.story-panel{flex:1;min-height:400px;display:flex;flex-direction:column}.scene-content{flex:1;overflow-y:auto;padding:var(--spacing-sm)}.scene-title{color:var(--accent-amber);margin-bottom:var(--spacing-xs);font-size:1.25rem}.scene-location{color:var(--text-muted);font-size:.875rem;font-style:italic;margin-bottom:var(--spacing-md)}.scene-text p{margin-bottom:var(--spacing-md);line-height:1.8}.choice-result{margin-top:var(--spacing-lg);padding:var(--spacing-md);background:var(--bg-tertiary);border-radius:var(--border-radius);display:flex;flex-direction:column;gap:var(--spacing-xs)}.choice-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase}.choice-text{color:var(--accent-cyan);font-style:italic}.roll-result{font-weight:600}.roll-result.critical-success{color:var(--warning);text-shadow:0 0 10px rgba(255,215,0,.5)}.roll-result.critical-failure,.damage{color:var(--danger)}.heal{color:var(--success)}.loot{color:var(--accent-amber)}.choice-panel{flex-shrink:0}.choices-list{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.choice-btn{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius);text-align:left;cursor:pointer;transition:all .2s ease}.choice-btn:hover:not(:disabled){border-color:var(--accent-cyan);box-shadow:var(--glow-cyan)}.choice-btn:disabled{opacity:.5;cursor:not-allowed}.choice-number{color:var(--accent-cyan);font-weight:600;min-width:30px}.choice-description{flex:1;color:var(--text-primary)}.choice-roll-tag{font-size:.625rem;padding:2px 6px;background:var(--accent-amber);color:var(--bg-primary);border-radius:2px;font-weight:600}.choice-btn.needs-roll .choice-number{color:var(--accent-amber)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.roll-modal{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);padding:var(--spacing-xl);width:450px;text-align:center}.roll-modal h3{margin-bottom:var(--spacing-xs);color:var(--text-primary)}.roll-modal-subtitle{color:var(--text-muted);font-size:.875rem;margin-bottom:var(--spacing-lg)}.roll-btn-large{display:block;width:100%;padding:var(--spacing-xl) var(--spacing-lg);background:var(--accent-amber);color:var(--bg-primary);border:none;border-radius:var(--border-radius);font-size:2rem;font-weight:700;cursor:pointer;transition:all .2s ease;margin-bottom:var(--spacing-md)}.roll-btn-large:hover:not(:disabled){transform:scale(1.05);box-shadow:var(--glow-amber)}.roll-btn-large:disabled{opacity:.5;cursor:not-allowed}.roll-cancel{width:100%}.roll-display{padding:var(--spacing-xl) 0}.roll-number{font-size:4rem;font-weight:700;font-family:var(--font-mono, monospace);line-height:1;margin-bottom:var(--spacing-md)}.roll-number.rolling{color:var(--text-primary);animation:diceShake .1s infinite}.roll-number.result-reveal{animation:resultReveal .3s ease-out}.roll-label{font-size:1rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.roll-nat20{color:var(--warning, #ffd700)!important;animation:resultReveal .3s ease-out,criticalGlow .6s ease-in-out 2!important;text-shadow:0 0 20px rgba(255,215,0,.6),0 0 40px rgba(255,215,0,.3)}.roll-nat1{color:var(--danger)!important;animation:resultReveal .3s ease-out,criticalFail .3s ease-in-out 2!important}.roll-high{color:var(--accent-amber, #f0a500)!important;text-shadow:0 0 10px rgba(240,165,0,.3)}.roll-mid{color:var(--accent-cyan)!important}.roll-low{color:var(--text-secondary)!important}.roll-label.roll-nat20{text-shadow:0 0 10px rgba(255,215,0,.4)}.roll-label.roll-nat1{text-shadow:none}@keyframes diceShake{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(-2px,1px) rotate(-1deg)}50%{transform:translate(2px,-1px) rotate(1deg)}75%{transform:translate(-1px,-2px) rotate(-.5deg)}}@keyframes criticalGlow{0%,to{text-shadow:0 0 20px rgba(255,215,0,.6),0 0 40px rgba(255,215,0,.3)}50%{text-shadow:0 0 30px rgba(255,215,0,.9),0 0 60px rgba(255,215,0,.5),0 0 80px rgba(255,215,0,.2)}}@keyframes criticalFail{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes resultReveal{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.game-actions{display:flex;justify-content:center;padding-top:var(--spacing-md);border-top:1px solid var(--border-color)}.action-menu-container{position:relative}.action-menu-btn{font-size:.875rem}.action-dropdown{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:var(--spacing-xs);background:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--border-radius);min-width:180px;z-index:100;box-shadow:0 4px 12px #0000004d}.action-dropdown .dropdown-item{display:block;width:100%;padding:var(--spacing-sm) var(--spacing-md);background:none;border:none;text-align:center;color:var(--text-primary);cursor:pointer;font-size:.875rem;transition:background .2s}.action-dropdown .dropdown-item:hover{background:var(--bg-secondary)}.action-dropdown .dropdown-item:first-child{border-radius:var(--border-radius) var(--border-radius) 0 0}.action-dropdown .dropdown-item:last-child{border-radius:0 0 var(--border-radius) var(--border-radius)}.action-dropdown .dropdown-item.danger{color:var(--danger)}.action-dropdown .dropdown-item.danger:hover{background:#ff47571a}.stats-toggle{font-size:.75rem;color:var(--text-muted);padding:var(--spacing-xs)}.stats-toggle:hover{color:var(--accent-cyan)}.stats-panel{position:sticky;top:var(--spacing-lg);height:fit-content}.character-info{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-md)}.char-class-icon{font-size:2rem}.char-name{font-size:1.125rem;font-weight:600;color:var(--text-primary)}.char-class{font-size:.875rem;color:var(--accent-cyan)}.hp-bar{position:relative;height:24px;background:var(--bg-tertiary);border-radius:var(--border-radius);overflow:hidden;margin-bottom:var(--spacing-md)}.hp-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--danger),var(--accent-cyan));transition:width .3s ease}.hp-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.75rem;font-weight:600;color:var(--text-primary);text-shadow:0 1px 2px rgba(0,0,0,.5)}.stats-list{display:flex;flex-direction:column;gap:var(--spacing-xs)}.stat-row{display:flex;justify-content:space-between;padding:var(--spacing-xs) var(--spacing-sm);background:var(--bg-secondary);border-radius:var(--border-radius);font-size:.875rem}.stat-row span:first-child{color:var(--text-muted)}.stat-row span:last-child{font-weight:600;color:var(--accent-cyan)}.inventory{margin-top:var(--spacing-md)}.inventory .panel-title{display:block;margin-bottom:var(--spacing-sm)}.inventory ul{list-style:none;padding:0;margin:0}.inventory li{padding:var(--spacing-xs) 0;font-size:.875rem;color:var(--text-secondary);border-bottom:1px solid var(--border-color)}.inventory li:last-child{border-bottom:none}.hp-fill.dead{width:0%!important;background:var(--text-muted)}.death-panel{display:flex;align-items:center;justify-content:center;min-height:200px}.death-content{text-align:center;padding:var(--spacing-xl)}.death-icon{font-size:3rem;margin-bottom:var(--spacing-md);opacity:.8}.death-title{color:var(--danger);font-size:1.5rem;margin-bottom:var(--spacing-sm)}.death-subtitle{color:var(--text-muted);margin-bottom:var(--spacing-lg);font-style:italic}.death-btn{min-width:200px}@media(max-width:900px){.game-view{grid-template-columns:1fr}.stats-panel{position:static;order:-1}.game-main{order:1}}@media(max-width:600px){.choice-btn{flex-wrap:wrap}.choice-description{width:100%;order:3;margin-top:var(--spacing-xs)}}.settings-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.settings-modal{background:#1a1a2e;border-radius:12px;padding:24px;width:90%;max-width:480px;box-shadow:0 8px 32px #0006}.settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.settings-header h2{margin:0;color:#e8e8e8}.close-btn{background:none;border:none;color:#888;font-size:28px;cursor:pointer;padding:0;line-height:1}.close-btn:hover{color:#fff}.settings-form{display:flex;flex-direction:column;gap:20px}.settings-form .form-group{display:flex;flex-direction:column;gap:8px}.settings-form label{color:#b8b8b8;font-size:14px}.settings-form select{background:#16162a;border:1px solid #2d2d44;border-radius:8px;padding:12px;color:#e8e8e8;font-size:14px}.settings-form select:focus{outline:none;border-color:#6366f1}.checkbox-group label{display:flex;align-items:flex-start;gap:12px;cursor:pointer}.checkbox-group input[type=checkbox]{margin-top:4px;accent-color:#6366f1}.checkbox-group .hint{display:block;color:#666;font-size:12px;margin-left:24px;margin-top:2px}.settings-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:12px}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.loading-content{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);padding:var(--spacing-xl) var(--spacing-2xl);text-align:center}.loading-message{color:var(--text-primary);font-size:1rem;margin-bottom:var(--spacing-md);font-family:var(--font-mono)}.loading-spinner{font-size:1.5rem;letter-spacing:.25em;height:2rem;overflow:hidden}.spinner-frame{display:inline-block;opacity:.3;transition:opacity .05s ease}.spinner-frame.active{opacity:1;color:var(--accent-cyan)}:root{--bg-primary: #1a1a2e;--bg-secondary: #16213e;--bg-tertiary: #0f0f23;--bg-panel: #1e1e3f;--text-primary: #e8e8e8;--text-secondary: #a0a0a0;--text-muted: #6c757d;--accent-cyan: #00d4ff;--accent-amber: #f0a500;--accent-purple: #9d4edd;--success: #00ff88;--danger: #ff4757;--warning: #ffd700;--border-color: #2a2a4a;--border-highlight: #3a3a5a;--font-mono: "JetBrains Mono", "Fira Code", "Source Code Pro", monospace;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--border-radius: 4px;--border-radius-lg: 8px;--glow-cyan: 0 0 10px rgba(0, 212, 255, .3);--glow-amber: 0 0 10px rgba(240, 165, 0, .3)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:var(--font-mono);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-tertiary)}::-webkit-scrollbar-thumb{background:var(--border-highlight);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-cyan)}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3;color:var(--text-primary)}h1{font-size:2rem;text-shadow:var(--glow-cyan)}h2{font-size:1.5rem}h3{font-size:1.25rem}p{margin-bottom:var(--spacing-md)}a{color:var(--accent-cyan);text-decoration:none;transition:all .2s ease}a:hover{text-decoration:underline;text-shadow:var(--glow-cyan)}button{font-family:var(--font-mono);font-size:1rem;cursor:pointer;border:none;background:none;color:inherit;transition:all .2s ease}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--border-radius);background:var(--bg-secondary);color:var(--text-primary);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.btn:hover{border-color:var(--accent-cyan);box-shadow:var(--glow-cyan)}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.btn-primary{background:var(--accent-cyan);color:var(--bg-primary);border-color:var(--accent-cyan)}.btn-primary:hover{background:#00b8e0;box-shadow:var(--glow-cyan)}.btn-danger{border-color:var(--danger);color:var(--danger)}.btn-danger:hover{background:var(--danger);color:var(--bg-primary)}.btn-secondary{background:var(--bg-tertiary);border-color:var(--border-highlight)}.btn-secondary:hover{border-color:var(--accent-amber);box-shadow:var(--glow-amber)}input,textarea,select{font-family:var(--font-mono);font-size:1rem;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--border-radius);background:var(--bg-tertiary);color:var(--text-primary);width:100%;transition:all .2s ease}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent-cyan);box-shadow:var(--glow-cyan)}input::placeholder,textarea::placeholder{color:var(--text-muted)}.panel{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);padding:var(--spacing-md)}.panel-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--spacing-sm);margin-bottom:var(--spacing-md);border-bottom:1px solid var(--border-color)}.panel-title{font-size:.875rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}.loading{display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl)}.cursor-blink:after{content:"▋";animation:blink 1s step-end infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease forwards}.text-center{text-align:center}.text-muted{color:var(--text-muted)}.text-success{color:var(--success)}.text-danger{color:var(--danger)}.text-warning{color:var(--warning)}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}@media(max-width:768px){html{font-size:14px}h1{font-size:1.5rem}.panel{padding:var(--spacing-sm)}}