*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-dark: #0d0d14;--bg-panel: #13131f;--bg-card: #1a1a2e;--border: #2a2a45;--gold: #c9aa71;--gold-dim: #7a6535;--blue-pc: #3b82f6;--purple-pc: #8b5cf6;--red-enemy: #ef4444;--green-hp: #22c55e;--blue-pm: #3b82f6;--text: #e2e8f0;--text-dim: #64748b;--font: "Segoe UI", system-ui, sans-serif}html,body{height:100%;background:var(--bg-dark);color:var(--text);font-family:var(--font)}#app{display:flex;height:100vh;overflow:hidden}#game-wrapper{flex:1;display:flex;align-items:center;justify-content:center;background:#0a0a12;overflow:hidden}#game-container canvas{display:block;image-rendering:auto}#sidebar{width:300px;min-width:300px;background:var(--bg-panel);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}#sidebar-header{background:var(--bg-card);padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}#sidebar-header h2{font-size:14px;font-weight:700;color:var(--gold);letter-spacing:2px}#turn-info{font-size:12px;color:var(--text-dim)}section{border-bottom:1px solid var(--border)}section h3{font-size:10px;font-weight:600;color:var(--gold-dim);letter-spacing:1.5px;text-transform:uppercase;padding:8px 16px}#initiative-section{padding-bottom:4px;flex-shrink:0}#initiative-list{list-style:none;padding:0 8px 8px;max-height:164px;overflow-y:auto}#initiative-list::-webkit-scrollbar{width:4px}#initiative-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}#initiative-list li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;font-size:13px;cursor:default;transition:background .15s}#initiative-list li.active{background:var(--bg-card);border:1px solid var(--gold-dim)}#initiative-list li.dead{opacity:.35;text-decoration:line-through}.init-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.init-pv{margin-left:auto;font-size:11px;color:var(--text-dim)}#action-section{padding:0 12px 12px;flex-shrink:0;overflow-y:auto;max-height:50vh}#action-section::-webkit-scrollbar{width:4px}#action-section::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}#acting-name{color:var(--text);font-size:16px;font-weight:700;padding:10px 4px 6px}.stat-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}.stat-label{font-size:11px;color:var(--text-dim);width:20px;flex-shrink:0}.stat-value{font-size:11px;color:var(--text-dim);width:60px;text-align:right;flex-shrink:0}.bar-wrap{flex:1;height:8px;background:var(--border);border-radius:4px;overflow:hidden}.bar{height:100%;border-radius:4px;transition:width .3s ease}.hp-bar{background:var(--green-hp)}.pm-bar{background:var(--blue-pm)}#action-buttons{display:flex;flex-direction:column;gap:6px;margin-top:10px}.action-btn{width:100%;padding:8px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;cursor:pointer;text-align:left;transition:background .1s,border-color .1s}.action-btn:hover:not(:disabled){background:#1e1e35;border-color:var(--gold-dim)}.action-btn:disabled{opacity:.4;cursor:not-allowed}.action-btn.active{background:#1e1e35;border-color:var(--gold);color:var(--gold)}.tech-btn{border-color:#3730a3}.tech-btn:hover:not(:disabled){border-color:#6366f1}#log-section{flex:1;min-height:0;display:flex;flex-direction:column}#combat-log{flex:1;overflow-y:auto;padding:6px 12px 12px;font-size:12px;line-height:1.6}#combat-log::-webkit-scrollbar{width:4px}#combat-log::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.log-entry{padding:2px 0;border-bottom:1px solid #1a1a28}.log-entry:last-child{border-bottom:none}.log-dmg{color:#f87171}.log-heal{color:#4ade80}.log-turn{color:var(--gold);font-weight:600}.log-sys{color:var(--text-dim);font-style:italic}.log-ai{color:#a78bfa}#action-economy{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin:8px 0}.ae-title{font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:7px}.ae-row{display:flex;align-items:center;gap:8px;padding:3px 0}.ae-pip{width:11px;height:11px;border-radius:50%;border:2px solid #444;flex-shrink:0;transition:background .2s,border-color .2s,box-shadow .2s}.ae-pip.available{background:var(--green-hp);border-color:var(--green-hp);box-shadow:0 0 7px #22c55e80}.ae-pip.used{background:transparent;border-color:#333}.ae-label{font-size:12px;flex:1;color:var(--text)}.ae-hint{font-size:10px;color:var(--text-dim);white-space:nowrap}.ae-hint.used{color:#3a3a55}.spell-toggle-btn{border-color:#4c1d95;color:#c4b5fd;position:relative}.spell-toggle-btn:hover:not(:disabled){border-color:#7c3aed;background:#1a1432}.spell-toggle-arrow{float:right;opacity:.7}.spell-submenu{background:#0e0e1c;border:1px solid #2d1f6e;border-radius:6px;margin-top:3px;overflow:hidden}.spell-submenu.hidden{display:none}.spell-circle-header{font-size:9px;font-weight:700;color:var(--gold-dim);text-transform:uppercase;letter-spacing:1.5px;padding:6px 10px 3px;border-bottom:1px solid #1e1e35}.spell-row{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;cursor:pointer;border-bottom:1px solid #16162a;transition:background .12s;-webkit-user-select:none;user-select:none}.spell-row:last-child{border-bottom:none}.spell-row:hover{background:#1c1640}.spell-row.disabled{opacity:.38;cursor:not-allowed;pointer-events:none}.spell-name{font-size:13px;color:#e2d9ff;flex:1}.spell-meta{font-size:10px;color:#6b5fa0;white-space:nowrap;margin-left:6px}#spell-tooltip{position:fixed;right:308px;width:240px;background:#0f0f22;border:1px solid #3730a3;border-radius:10px;padding:12px 14px;z-index:1000;pointer-events:none;box-shadow:0 8px 32px #000000b3,0 0 0 1px #1e1b50}#spell-tooltip.hidden{display:none}.st-name{font-size:14px;font-weight:700;color:#c4b5fd;margin-bottom:4px}.st-badge{font-size:10px;color:#6b5fa0;letter-spacing:.5px;margin-bottom:8px;display:flex;gap:4px}.st-sep{opacity:.4}.st-row{display:flex;justify-content:space-between;font-size:11px;color:#94a3b8;padding:2px 0;border-bottom:1px solid #1a1a35}.st-row:last-of-type{border-bottom:none}.st-key{color:#4c4880;font-weight:600;text-transform:uppercase;font-size:9px;letter-spacing:1px;width:54px;flex-shrink:0;line-height:1.6}.st-desc{font-size:11px;color:#7e8da8;margin-top:8px;line-height:1.5;border-top:1px solid #1a1a35;padding-top:8px}#combat-ready-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#000000e0;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#combat-ready-screen.hidden{display:none}.cr-content{text-align:center;max-width:680px;width:90%;padding:32px 24px;background:#0f0f19f5;border:1px solid #334155;border-radius:16px;box-shadow:0 0 48px #000c}.cr-title{font-size:28px;font-weight:800;color:#f1f5f9;margin-bottom:4px;letter-spacing:1px}.cr-map-label{font-size:13px;color:#64748b;margin-bottom:24px;text-transform:uppercase;letter-spacing:2px}.cr-roster{display:flex;gap:16px;align-items:flex-start;justify-content:center;margin-bottom:20px}.cr-side{flex:1;background:#ffffff08;border-radius:10px;padding:14px 12px;border:1px solid #1e293b}.cr-allies{border-color:#1e40af44}.cr-enemies{border-color:#7f1d1d44}.cr-side-title{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;color:#94a3b8}.cr-allies .cr-side-title{color:#60a5fa}.cr-enemies .cr-side-title{color:#f87171}.cr-combatant{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;margin-bottom:4px;background:#ffffff0a;font-size:13px}.cr-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}.cr-combatant-name{font-weight:600;color:#e2e8f0}.cr-combatant-class{color:#64748b;font-size:11px;margin-left:auto}.cr-vs{font-size:22px;font-weight:900;color:#475569;align-self:center;padding:0 4px}.cr-tip{font-size:13px;color:#475569;margin-bottom:20px;font-style:italic}#cr-start-btn{background:linear-gradient(135deg,#1d4ed8,#7c3aed);color:#fff;border:none;border-radius:10px;padding:14px 40px;font-size:16px;font-weight:700;cursor:pointer;letter-spacing:1px;transition:transform .1s,box-shadow .1s;box-shadow:0 4px 24px #7c3aed66}#cr-start-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px #7c3aed99}#cr-start-btn:active{transform:translateY(0)}#selection-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:#05050ff7;display:flex;align-items:center;justify-content:center;z-index:9000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#selection-screen.hidden{display:none}.ss-content{text-align:center;max-width:700px;padding:24px}.ss-title{font-size:26px;font-weight:800;color:var(--gold);letter-spacing:2px;margin-bottom:6px}.ss-subtitle{font-size:15px;color:var(--text-dim);margin-bottom:32px;letter-spacing:.5px}.ss-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;justify-items:center}.ss-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:20px 24px;width:260px;cursor:pointer;transition:border-color .15s,background .15s,transform .12s;text-align:center}.ss-card:hover{border-color:var(--gold-dim);background:#1e1e35;transform:translateY(-3px)}.ss-avatar{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 0 16px #0009}.ss-initial{font-size:28px;font-weight:800;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5)}.ss-name{font-size:18px;font-weight:700;color:var(--text);margin-bottom:2px}.ss-class{font-size:11px;color:var(--gold-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}.ss-stats{display:flex;justify-content:center;gap:12px;font-size:12px;color:var(--text-dim);border-top:1px solid var(--border);padding-top:8px;margin-bottom:4px}.ss-attrs{font-size:11px;color:#4c6a8a;margin-top:4px}#current-actor-banner{font-size:12px;font-weight:600;color:#94a3b8;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:6px 10px;margin:4px 0 8px;text-align:center;letter-spacing:.3px}#current-actor-banner.hidden{display:none}#current-actor-banner[data-actor-type=enemy]{border-color:#7f1d1d;color:#fca5a5;background:#1a0a0a}#current-actor-banner[data-actor-type=pc]{border-color:#1e3a5f;color:#93c5fd;background:#0a101a}#state-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000d9;border:1px solid var(--gold);border-radius:12px;padding:24px 48px;text-align:center;z-index:999;pointer-events:none}#state-overlay.hidden{display:none}#state-message{font-size:28px;font-weight:700;color:var(--gold);letter-spacing:2px}#lobby-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:#05050ff7;display:flex;align-items:center;justify-content:center;z-index:9500;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#lobby-screen.hidden{display:none}.lby-content{text-align:center;max-width:480px;width:90%;padding:32px 28px;background:var(--bg-panel);border:1px solid var(--border);border-radius:18px;box-shadow:0 16px 64px #000000b3}.lby-title{font-size:24px;font-weight:800;color:var(--gold);letter-spacing:2px;margin-bottom:4px}.lby-map{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:24px}.lby-roster{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.lby-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;border:1px solid var(--border);background:var(--bg-card)}.lby-row.lby-human{border-color:#1e3a5f;background:#0a101a}.lby-row.lby-ai{border-color:#2a2a45;opacity:.7}.lby-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}.lby-name{font-weight:700;font-size:14px;color:var(--text);flex:1;text-align:left}.lby-cls{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-right:8px}.lby-badge{font-size:12px;white-space:nowrap}.lby-status{font-size:13px;color:var(--gold-dim);margin-bottom:20px;min-height:20px}.lby-start-btn{background:linear-gradient(135deg,#15803d,#166534);color:#fff;border:none;border-radius:10px;padding:13px 40px;font-size:16px;font-weight:700;cursor:pointer;letter-spacing:1px;transition:transform .1s,box-shadow .1s;box-shadow:0 4px 20px #15803d66;margin-bottom:14px}.lby-start-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px #15803d99}.lby-start-btn:active{transform:translateY(0)}.lby-hint{font-size:11px;color:var(--text-dim);font-style:italic}