*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:#000;font-family:Courier New,monospace;overflow:hidden}#game-canvas{position:fixed;inset:0}#game-canvas canvas{display:block;width:100%!important;height:100%!important}#hud{pointer-events:none;z-index:10;position:fixed;inset:0}#hud-topleft{flex-direction:column;gap:6px;display:flex;position:absolute;top:16px;left:16px}.stat-bar-wrap{align-items:center;gap:8px;display:flex}.bar-label{color:#ccc;width:20px;font-size:12px}.bar-track{background:#333;border-radius:2px;width:160px;height:12px;overflow:hidden}.bar-fill{border-radius:2px;height:100%;transition:width .1s linear}.bar-fill.hp{background:#c0392b}.bar-fill.mana{background:#2980b9}#flask-counter{color:#4d4;text-shadow:0 1px 3px #000c;align-items:center;gap:4px;margin-top:4px;font-family:Cinzel,serif;font-size:14px;display:flex}#flask-icon{filter:hue-rotate(90deg);font-size:16px}#flask-count{transition:transform .15s}#flask-count.pulse{transform:scale(1.5)}#flask-count.used{transform:scale(.8)}#spell-bars{align-items:center;gap:12px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}.spell-bar{gap:6px;transition:opacity .15s;display:flex}.spell-bar.inactive{opacity:.4}.spell-bar.active{opacity:1}#bar-indicator{color:#ccc;text-align:center;min-width:32px;font-size:10px;line-height:1.3}.tab-hint{color:#888;font-size:9px}.spell-slot{background:#111;border:2px solid #555;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;gap:3px;width:72px;height:82px;display:flex;position:relative;overflow:hidden}.spell-slot[data-element=fire]{background:#ff64001f;border-color:#f60}.spell-slot[data-element=ice]{background:#44aaff1a;border-color:#4af}.spell-slot[data-element=lightning]{background:#ffff441a;border-color:#ff4}.spell-slot[data-element=arcane]{background:#bb44ff1a;border-color:#b4f}.slot-key{color:#fff;z-index:1;font-size:18px;font-weight:700}.slot-name{color:#ddd;text-align:center;z-index:1;font-size:9px}.slot-cost{color:#6af;z-index:1;font-size:8px}.slot-cooldown{color:#fff;z-index:2;background:#000000b8;justify-content:center;align-items:flex-start;height:0%;padding-top:4px;font-size:11px;font-weight:700;transition:none;display:flex;position:absolute;bottom:0;left:0;right:0}@keyframes slot-flash{0%{background-color:#ffffff8c}to{background-color:#0000}}.slot-flash{animation:.15s forwards slot-flash}@keyframes slot-shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.slot-shake{animation:.2s slot-shake}@keyframes indicator-pulse{0%{color:#fff;text-shadow:0 0 8px #fff}to{color:#ccc;text-shadow:none}}.pulse{animation:.5s forwards indicator-pulse}#fade-overlay{opacity:0;pointer-events:none;z-index:50;background:#000;position:fixed;inset:0}#minimap{image-rendering:pixelated;z-index:20;background:#000000b3;border:1px solid #444;position:fixed;top:10px;right:10px}#boss-hp-bar{text-align:center;z-index:20;pointer-events:none;width:480px;position:fixed;top:16px;left:50%;transform:translate(-50%)}#boss-name{color:#f44;letter-spacing:3px;text-shadow:0 0 10px #f00c;margin-bottom:3px;font-size:13px;font-weight:700}#boss-phase{color:#f88;letter-spacing:2px;margin-bottom:5px;font-size:10px}#boss-hp-track{background:#2a0000;border:1px solid #600;border-radius:2px;width:100%;height:14px;overflow:hidden}#boss-hp-fill{background:linear-gradient(90deg,#800,#c00,#f22);width:100%;height:100%;transition:width .15s linear}#biome-desc{color:#ccc;opacity:0;pointer-events:none;z-index:20;text-shadow:0 0 8px #000;font-size:14px;font-style:italic;position:fixed;bottom:120px;left:50%;transform:translate(-50%)}#biome-desc.fade-desc{animation:3s forwards biome-fade}@keyframes biome-fade{0%{opacity:0}15%{opacity:1}70%{opacity:1}to{opacity:0}}#loadout-root{z-index:100;background:#000000e0;justify-content:center;align-items:center;display:none;position:fixed;inset:0}#loadout-root.visible{display:flex}.loadout-book-wrap{width:min(75vw,1100px);height:min(85vh,720px);position:relative}.loadout-book-bg{width:100%;height:100%;image-rendering:pixelated;object-fit:fill;pointer-events:none;position:absolute;inset:0}.loadout-anim-canvas{width:100%;height:100%;image-rendering:pixelated;z-index:10;display:none;position:absolute;inset:0}.loadout-anim-canvas.visible{display:block}.loadout-page-left,.loadout-page-right{z-index:1;flex-direction:column;gap:8px;height:80%;padding:12px 10px;display:flex;position:absolute;top:10%;overflow:hidden auto}.loadout-page-left{width:43%;left:5%}.loadout-page-right{width:43%;left:52%}.loadout-page-content{opacity:0;transition:opacity .2s}.loadout-page-content.visible{opacity:1}.loadout-page-header{color:#d4b483;text-align:center;letter-spacing:2px;text-shadow:0 1px 3px #000c;flex-shrink:0;font-family:Cinzel,serif;font-size:18px}.loadout-tabs{flex-direction:column;flex-shrink:0;gap:4px;display:flex}.loadout-tab{cursor:pointer;opacity:.75;background:0 0;border:none;justify-content:center;align-items:center;width:48px;height:48px;transition:opacity .1s,filter .1s;display:flex;position:relative}.tab-bookmark-img{width:100%;height:100%;image-rendering:pixelated;pointer-events:none;position:absolute;top:0;left:0}.tab-label{z-index:1;color:#7a5c2e;text-align:center;font-family:Cinzel,serif;font-size:10px;position:relative}.loadout-tab:hover{opacity:1;filter:brightness(1.2)}.loadout-tab.active{opacity:1;filter:brightness(1.4)}.loadout-tab.active .tab-label{color:#d4b483}.loadout-tab[data-filter=fire] .tab-label{color:#f84}.loadout-tab[data-filter=ice] .tab-label{color:#6cf}.loadout-tab[data-filter=lightning] .tab-label{color:#ff6}.loadout-tab[data-filter=arcane] .tab-label{color:#c8f}.loadout-spell-grid{flex:1;grid-template-columns:1fr 1fr;gap:6px;padding-right:4px;display:grid;overflow-y:auto}.loadout-spell-grid::-webkit-scrollbar{width:4px}.loadout-spell-grid::-webkit-scrollbar-thumb{background:#b48c5080;border-radius:2px}.loadout-spell-card{cursor:pointer;background:#1a0e05;border:1px solid #5a3a1a;border-radius:4px;flex-direction:column;align-items:center;gap:2px;min-height:80px;padding:5px;transition:filter .1s,transform .1s,border-color .15s;display:flex;position:relative}.loadout-spell-card:hover:not(.locked){filter:brightness(1.15);border-color:#c9a96e}.loadout-spell-card.selected{filter:brightness(1.2);background:#2a1a05;border-width:2px;border-color:#fc4;transform:scale(1.03)}.loadout-spell-card.locked{opacity:.4;cursor:not-allowed}.loadout-spell-card.locked:hover{border-color:#5a3a1a;transform:none}.loadout-spell-card.evolved{border-color:gold}.loadout-spell-card[data-element=fire]{border-color:#f60}.loadout-spell-card[data-element=ice]{border-color:#4af}.loadout-spell-card[data-element=lightning]{border-color:#ff4}.loadout-spell-card[data-element=arcane]{border-color:#b4f}.loadout-spell-card.selected[data-element=fire]{border-color:#f60;box-shadow:0 0 8px #f608}.loadout-spell-card.selected[data-element=ice]{border-color:#4af;box-shadow:0 0 8px #4af8}.loadout-spell-card.selected[data-element=lightning]{border-color:#ff4;box-shadow:0 0 8px #ff48}.loadout-spell-card.selected[data-element=arcane]{border-color:#b4f;box-shadow:0 0 8px #b4f8}.spell-card-icon{width:32px;height:32px;image-rendering:pixelated}.spell-card-name{color:#d4b483;text-align:center;font-family:Cinzel,serif;font-size:9px;line-height:1.2}.spell-card-meta{align-items:center;gap:4px;font-size:8px;display:flex}.spell-card-mana{color:#6af}.spell-card-cd{color:#aaa}.spell-card-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px}.spell-card-stars{letter-spacing:1px;color:gold;font-size:10px}.spell-card-lock{color:#888;font-size:12px;position:absolute;top:4px;right:4px}.spell-card-progress-wrap{background:#0006;border-radius:1px;width:100%;height:3px;overflow:hidden}.spell-card-progress-fill{background:#d4b483;border-radius:1px;height:100%;transition:width .3s}@keyframes card-shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.loadout-bar-section{flex-shrink:0}.loadout-bar-label{color:#a08060;margin-bottom:4px;font-family:Cinzel,serif;font-size:10px}.loadout-slots-row{gap:5px;display:flex}.loadout-slot{cursor:pointer;background:#1a0e05;border:1px solid #5a3a1a;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:80px;height:80px;transition:filter .1s,border-color .15s,background .15s;display:flex;position:relative;overflow:hidden}.loadout-slot:hover{filter:brightness(1.2);background:#2a1a05;border-color:#c9a96e}.loadout-slot.empty{border-style:dashed;border-color:#4a3820}.loadout-slot.empty:hover{border-color:#c9a96e}.loadout-slot:not(.empty):hover{border-color:#f44}.loadout-slot.drop-ready{filter:brightness(1.3);border-color:#d4b483}.loadout-slot[data-element=fire]{border-color:#f60;box-shadow:0 0 6px #f604}.loadout-slot[data-element=ice]{border-color:#4af;box-shadow:0 0 6px #4af4}.loadout-slot[data-element=lightning]{border-color:#ff4;box-shadow:0 0 6px #ff44}.loadout-slot[data-element=arcane]{border-color:#b4f;box-shadow:0 0 6px #b4f4}.slot-key-label{color:#8a7060;font-family:Cinzel,serif;font-size:9px;position:absolute;top:3px;left:4px}.loadout-slot-icon{width:28px;height:28px;image-rendering:pixelated}.loadout-slot-name{color:#d4b483;text-align:center;font-family:Cinzel,serif;font-size:8px;line-height:1.1}.loadout-slot-empty-text{color:#5a4030;font-size:8px;font-style:italic}.loadout-passives{flex:1;min-height:0;overflow-y:auto}.loadout-passives-header{color:#a08060;margin-bottom:5px;font-family:Cinzel,serif;font-size:11px}.loadout-passives-list{flex-direction:column;gap:3px;display:flex}.loadout-passive-pill{color:#d4b483;border-radius:10px;align-items:center;gap:5px;padding:3px 6px;font-family:Cinzel,serif;font-size:9px;display:flex}.loadout-passive-pill[data-element=fire]{background:#ff640033;border:1px solid #f604}.loadout-passive-pill[data-element=ice]{background:#4af3;border:1px solid #4af4}.loadout-passive-pill[data-element=lightning]{background:#ff43;border:1px solid #ff44}.loadout-passive-pill[data-element=arcane]{background:#b4f3;border:1px solid #b4f4}.loadout-passive-pill[data-element=all]{background:#d4b48333;border:1px solid #d4b48344}.loadout-passive-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px}.loadout-no-passives{color:#6a5030;font-size:9px;font-style:italic}.loadout-enter-btn{color:#2a1a0a;cursor:pointer;letter-spacing:1px;background:#c9a96e;border:2px solid #7a5c2e;border-radius:3px;flex-shrink:0;width:100%;margin-top:6px;padding:8px 14px;font-family:Cinzel,serif;font-size:13px;transition:filter .1s,box-shadow .1s}.loadout-enter-btn:hover:not(:disabled){filter:brightness(1.15);box-shadow:0 0 10px #c9a96e80}.loadout-enter-btn:disabled{color:#6a5040;cursor:not-allowed;filter:none;background:#5a4030;border-color:#3a2820}#collected-books-root{z-index:30;pointer-events:auto;align-items:flex-end;gap:6px;display:flex;position:fixed;bottom:120px;right:16px}.collected-book-icon{width:48px;height:48px;image-rendering:pixelated;cursor:pointer;background-image:url(/assets/spellbook/PNG/Close_book.png);background-repeat:no-repeat;background-size:contain;transition:transform .1s;position:relative}.collected-book-icon:hover{transform:scale(1.15)}@keyframes book-bounce{0%{transform:scale(0)}60%{transform:scale(1.3)}80%{transform:scale(.9)}to{transform:scale(1)}}.collected-book-icon.bouncing{animation:.3s forwards book-bounce}.book-badge{color:#2a1a0a;background:#d4b483;border:1px solid #7a5c2e;border-radius:8px;justify-content:center;align-items:center;min-width:16px;height:16px;padding:0 3px;font-family:Cinzel,serif;font-size:9px;display:flex;position:absolute;top:-4px;right:-4px}.book-badge.done{color:#fff;background:#4a6}.collected-books-overflow{color:#d4b483;align-self:center;font-family:Cinzel,serif;font-size:11px}@keyframes book-fadeout{to{opacity:0;transform:scale(.7)}}.collected-book-icon.removing{animation:.2s forwards book-fadeout}#dropped-book-root{z-index:35;pointer-events:auto;position:fixed;bottom:180px;right:16px}.dropped-book-wrap{width:380px;height:280px;position:relative}.dropped-book-bg{width:100%;height:100%;image-rendering:pixelated;object-fit:fill;pointer-events:none;position:absolute;inset:0}.dropped-book-anim-canvas{width:100%;height:100%;image-rendering:pixelated;z-index:5;display:none;position:absolute;inset:0}.dropped-book-anim-canvas.visible{display:block}.dropped-book-content{opacity:0;flex-direction:column;gap:6px;padding:22px 16px 16px;transition:opacity .2s;display:flex;position:absolute;inset:0;overflow:hidden}.dropped-book-content.visible{opacity:1}.dropped-book-header{color:#d4b483;text-align:center;flex-shrink:0;font-family:Cinzel,serif;font-size:11px}.dropped-book-close{color:#a08060;cursor:pointer;z-index:10;background:0 0;border:none;padding:2px 4px;font-family:Cinzel,serif;font-size:14px;position:absolute;top:6px;right:10px}.dropped-book-close:hover{color:#d4b483}.dropped-book-grid{flex:1;grid-template-columns:1fr 1fr 1fr;gap:5px;display:grid;overflow-y:auto}.dropped-book-grid::-webkit-scrollbar{width:3px}.dropped-book-grid::-webkit-scrollbar-thumb{background:#b48c5080;border-radius:1px}.dropped-spell-card{image-rendering:pixelated;cursor:default;background-image:url(/assets/spellbook/PNG/sells_full.png);background-size:100% 100%;border:1px solid #6a5030;border-radius:2px;flex-direction:column;align-items:center;gap:2px;min-height:66px;padding:4px;display:flex;position:relative}.dropped-spell-card.new-spell{cursor:pointer;border-color:#d4b483}.dropped-spell-card.new-spell:hover{filter:brightness(1.2)}.dropped-spell-icon{width:24px;height:24px;image-rendering:pixelated}.dropped-spell-name{color:#d4b483;text-align:center;font-family:Cinzel,serif;font-size:8px}.dropped-spell-badge{border-radius:4px;padding:1px 4px;font-family:Cinzel,serif;font-size:7px}.dropped-spell-badge.new{color:#2a1a0a;background:#d4b483}.dropped-spell-badge.owned{color:#fff;background:#4a6}.dropped-spell-flash{opacity:0;pointer-events:none;background:#ffd70080;border-radius:2px;transition:opacity .3s;position:absolute;inset:0}.dropped-spell-flash.active{opacity:1}@keyframes dropped-book-shake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}.dropped-book-shake{animation:.3s dropped-book-shake}#evolution-overlay-root{z-index:200;pointer-events:none;background:#fff0;flex-direction:column;justify-content:center;align-items:center;display:none;position:fixed;inset:0}#evolution-overlay-root.visible{animation:2.5s forwards evolution-bg;display:flex}@keyframes evolution-bg{0%{background:#fff0}10%{background:#ffffffb3}40%{background:#fff6}to{background:#fff0}}.evolution-spell-name{color:#d4a000;text-shadow:0 0 20px gold,0 2px 4px #000c;letter-spacing:3px;font-family:Cinzel,serif;font-size:32px;animation:2.5s forwards evolution-text-pop}.evolution-label{color:#fff;letter-spacing:5px;text-shadow:0 0 10px #ffd700cc;margin-top:8px;font-family:Cinzel,serif;font-size:14px;animation:2.5s forwards evolution-text-pop}@keyframes evolution-text-pop{0%{opacity:0;transform:scale(.8)}15%{opacity:1;transform:scale(1.05)}80%{opacity:1;transform:scale(1)}to{opacity:0}}#run-summary-root{z-index:150;background:#000000eb;justify-content:center;align-items:center;display:none;position:fixed;inset:0}#run-summary-root.visible{display:flex}.run-summary-panel{flex-direction:column;align-items:center;gap:20px;width:90vw;max-width:480px;display:flex}.run-summary-title{letter-spacing:4px;font-family:Cinzel,serif;font-size:28px}.run-summary-title.death{color:#c22;text-shadow:0 0 20px #c008}.run-summary-title.victory{color:#d4b483;text-shadow:0 0 20px #d4b48388}.run-summary-grid{grid-template-columns:1fr 1fr;gap:12px 24px;width:100%;display:grid}.run-summary-stat{flex-direction:column;gap:2px;display:flex}.run-stat-label{color:#8a7060;letter-spacing:1px;font-family:Cinzel,serif;font-size:10px}.run-stat-value{color:#d4b483;font-family:Cinzel,serif;font-size:18px}.run-summary-continue-btn{color:#2a1a0a;cursor:pointer;letter-spacing:1px;background:#c9a96e;border:2px solid #7a5c2e;border-radius:3px;padding:10px 28px;font-family:Cinzel,serif;font-size:14px;transition:filter .1s}.run-summary-continue-btn:hover{filter:brightness(1.15)}[data-owner=player]{--sb-parchment-bg:linear-gradient(135deg, #f5e6c8 0%, #e8d5a8 20%, #f0deb8 40%, #dcc89a 60%, #f2e0b6 80%, #e5d0a0 100%);--sb-noise:radial-gradient(ellipse at 20% 50%, #a0783c14 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, #8c64280f 0%, transparent 40%), radial-gradient(ellipse at 50% 80%, #b48c500d 0%, transparent 60%);--sb-stains:radial-gradient(circle at 15% 85%, #8b5a2b0f 0%, transparent 25%), radial-gradient(circle at 75% 15%, #8b5a2b0a 0%, transparent 20%), radial-gradient(circle at 45% 55%, #8b5a2b08 0%, transparent 30%);--sb-edge-shadow:#78501e4d;--sb-spine-color:#8b6914;--sb-tab-bg:#c8a96e;--sb-tab-active:#e8d5a8;--sb-border:#8b691466;--sb-text:#3a2a14;--sb-title:#5a3a10;--sb-accent:#b8942e;--sb-card-bg:#ffffff40;--sb-card-hover:#fff6;--sb-card-selected-bg:#b8942e26;--sb-card-selected-shadow:#b8942e40;--sb-btn-bg:linear-gradient(135deg, #5a3a10, #8b6914);--sb-btn-hover:linear-gradient(135deg, #6a4a20, #9b7924);--sb-btn-text:#f5e6c8;--sb-scrollbar:#b48c5080;--sb-meta-text:#3a2a1499;--sb-subtitle:#5a3a1099;--sb-empty-text:#5a3a1059;--sb-key-label:#5a3a1080}[data-owner=enemy]{--sb-parchment-bg:linear-gradient(135deg, #2a1a1a 0%, #1e1218 20%, #2c1c1c 40%, #1a1015 60%, #281818 80%, #1c1010 100%);--sb-noise:radial-gradient(ellipse at 20% 50%, #a0282814 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, #781e3c0f 0%, transparent 40%), radial-gradient(ellipse at 50% 80%, #6414280d 0%, transparent 60%);--sb-stains:radial-gradient(circle at 15% 85%, #8b1e1e0f 0%, transparent 25%), radial-gradient(circle at 75% 15%, #6414280a 0%, transparent 20%);--sb-edge-shadow:#50141480;--sb-spine-color:#4a1515;--sb-tab-bg:#3a1818;--sb-tab-active:#4a2020;--sb-border:#a0323259;--sb-text:#c8a090;--sb-title:#c64;--sb-accent:#c44;--sb-card-bg:#ffffff0d;--sb-card-hover:#cc44441a;--sb-card-selected-bg:#cc444426;--sb-card-selected-shadow:#c443;--sb-btn-bg:linear-gradient(135deg, #4a1515, #6a2020);--sb-btn-hover:linear-gradient(135deg, #5a2020, #7a2a2a);--sb-btn-text:#f0d0c0;--sb-scrollbar:#a0323266;--sb-meta-text:#c8a09080;--sb-subtitle:#c8a09080;--sb-empty-text:#c8a09040;--sb-key-label:#c8a09066}.spellbook-overlay{z-index:100;opacity:0;background:#000000e0;flex-direction:column;justify-content:center;align-items:center;gap:12px;transition:opacity .3s;display:flex;position:fixed;inset:0}.spellbook-overlay.open{opacity:1}.spellbook-book{filter:drop-shadow(0 8px 32px #0009);border-radius:8px;width:min(75vw,900px);height:min(85vh,600px);transition:transform .3s;display:flex;position:relative;transform:scale(.95)}.spellbook-overlay.open .spellbook-book{transform:scale(1)}.spellbook-book:before{content:"";background:linear-gradient(90deg, var(--sb-edge-shadow), var(--sb-spine-color), var(--sb-spine-color), var(--sb-edge-shadow));z-index:5;border-radius:2px;width:18px;position:absolute;top:2%;bottom:2%;left:50%;transform:translate(-50%)}.spellbook-page{background:var(--sb-parchment-bg);color:var(--sb-text);flex:1;padding:28px 24px;position:relative;overflow:hidden auto}.spellbook-page:before{content:"";background:var(--sb-noise);pointer-events:none;position:absolute;inset:0}.spellbook-page:after{content:"";background:var(--sb-stains);pointer-events:none;position:absolute;inset:0}.spellbook-page-left{border-right:1px solid var(--sb-border);box-shadow:inset -8px 0 16px -8px var(--sb-edge-shadow);border-radius:8px 0 0 8px}.spellbook-page-right{border-left:1px solid var(--sb-border);box-shadow:inset 8px 0 16px -8px var(--sb-edge-shadow);border-radius:0 8px 8px 0}.spellbook-page-title,.spellbook-title{color:var(--sb-title);letter-spacing:1.5px;z-index:2;margin-bottom:4px;font-family:Cinzel,serif;font-size:20px;position:relative}.spellbook-page-subtitle,.spellbook-subtitle{color:var(--sb-subtitle);z-index:2;margin-bottom:14px;font-size:12px;font-style:italic;position:relative}.spellbook-divider{background:linear-gradient(90deg, transparent, var(--sb-border), transparent);z-index:2;height:1px;margin-bottom:14px;position:relative}.spellbook-tabs{z-index:2;gap:4px;margin-bottom:14px;display:flex;position:relative}.spellbook-tab{border:1px solid var(--sb-border);background:var(--sb-tab-bg);color:var(--sb-text);cursor:pointer;opacity:.65;letter-spacing:.5px;border-bottom:none;border-radius:6px 6px 0 0;padding:5px 10px;font-family:Cinzel,serif;font-size:11px;transition:all .2s}.spellbook-tab:hover{opacity:.85}.spellbook-tab.active{opacity:1;background:var(--sb-tab-active);font-weight:700;box-shadow:0 -2px 4px #00000014}.spellbook-element-dot{vertical-align:middle;border-radius:50%;width:7px;height:7px;margin-right:4px;display:inline-block}.spellbook-spell-grid{z-index:2;grid-template-columns:repeat(2,1fr);gap:8px;max-height:380px;padding-right:4px;transition:opacity .15s;display:grid;position:relative;overflow-y:auto}.spellbook-spell-grid.single-column{grid-template-columns:1fr}.spellbook-spell-grid.fading{opacity:0}.spellbook-spell-grid::-webkit-scrollbar{width:4px}.spellbook-spell-grid::-webkit-scrollbar-thumb{background:var(--sb-scrollbar);border-radius:2px}.spellbook-spell-card{background:var(--sb-card-bg);border:1px solid var(--sb-border);cursor:pointer;border-radius:6px;align-items:center;gap:8px;padding:8px;transition:all .2s;display:flex}.spellbook-spell-card:hover{background:var(--sb-card-hover);transform:translateY(-1px);box-shadow:0 2px 8px #00000014}.spellbook-spell-card.selected,.spellbook-spell-card.claimed{border-color:var(--sb-accent);background:var(--sb-card-selected-bg);box-shadow:0 0 12px var(--sb-card-selected-shadow), inset 0 0 8px #0000000d}.spellbook-spell-card.locked{opacity:.4;cursor:not-allowed}.spellbook-spell-card.already-owned{opacity:.45;cursor:default}.spellbook-spell-icon{color:#fff;border:1px solid #00000026;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.spellbook-spell-icon svg{width:20px;height:20px}.spellbook-spell-info{flex:1;min-width:0}.spellbook-spell-name{color:var(--sb-text);margin-bottom:2px;font-family:Cinzel,serif;font-size:11px;font-weight:700}.spellbook-spell-meta{color:var(--sb-meta-text);gap:8px;font-size:10px;display:flex}.spellbook-mastery-stars{color:var(--sb-accent);flex-shrink:0;font-size:10px}.spellbook-loadout-section,.spellbook-loadout-bar{z-index:2;position:relative}.spellbook-bar-label{color:var(--sb-subtitle);letter-spacing:1px;margin-bottom:6px;font-family:Cinzel,serif;font-size:11px}.spellbook-bar,.spellbook-loadout-slots{gap:8px;margin-bottom:14px;display:flex}.spellbook-loadout-slot{border:2px dashed var(--sb-border);cursor:pointer;background:#ffffff14;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;width:80px;height:80px;transition:all .2s;display:flex;position:relative}.spellbook-loadout-slot:hover{border-color:var(--sb-accent);background:#0000000a}.spellbook-loadout-slot.filled{background:var(--sb-card-bg);border-style:solid}.spellbook-key-label,.spellbook-slot-key{color:var(--sb-key-label);font-family:Cinzel,serif;font-size:9px;position:absolute;top:4px;left:6px}.spellbook-empty-text,.spellbook-slot-empty{color:var(--sb-empty-text);font-size:10px;font-style:italic}.spellbook-slot-icon{color:#fff;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;margin-bottom:2px;display:flex}.spellbook-slot-icon svg{width:16px;height:16px}.spellbook-slot-name{color:var(--sb-text);font-family:Cinzel,serif;font-size:9px}.spellbook-claim-section,.spellbook-claim-slots{z-index:2;position:relative}.spellbook-claim-slot{border:1px dashed var(--sb-border);cursor:pointer;background:#ffffff08;border-radius:6px;align-items:center;gap:8px;min-height:50px;margin-bottom:8px;padding:10px;display:flex}.spellbook-claim-slot.filled{border-style:solid;border-color:var(--sb-accent);background:var(--sb-card-selected-bg)}.spellbook-slot-num{color:var(--sb-empty-text);text-align:center;width:20px;font-family:Cinzel,serif;font-size:14px}.spellbook-slot-num.filled{color:var(--sb-title)}.spellbook-picks-counter{text-align:center;color:var(--sb-meta-text);z-index:2;margin-top:8px;font-size:12px;font-style:italic;position:relative}.spellbook-passives-section{z-index:2;margin-top:12px;position:relative}.spellbook-passive-pill{background:var(--sb-card-bg);border:1px solid var(--sb-border);color:var(--sb-text);border-radius:12px;align-items:center;gap:4px;margin:2px;padding:3px 10px;font-size:10px;display:inline-flex}.spellbook-passive-hint{color:var(--sb-empty-text);font-size:11px;font-style:italic}.spellbook-difficulty{z-index:2;color:var(--sb-text);letter-spacing:2px;text-transform:uppercase;justify-content:center;align-items:center;gap:14px;margin-top:16px;padding:8px 0;font-family:Cinzel,serif;font-size:13px;display:flex;position:relative}.spellbook-difficulty-arrow{border:1px solid var(--sb-accent);color:var(--sb-text);cursor:pointer;background:0 0;border-radius:4px;justify-content:center;align-items:center;width:28px;height:28px;font-size:14px;transition:background .15s,opacity .15s;display:inline-flex}.spellbook-difficulty-arrow:hover:not(:disabled){background:var(--sb-btn-hover)}.spellbook-difficulty-arrow:disabled{opacity:.3;cursor:default}.spellbook-difficulty-label{text-align:center;min-width:180px}.spellbook-confirm-btn{z-index:2;letter-spacing:2px;width:100%;color:var(--sb-btn-text);background:var(--sb-btn-bg);border:1px solid var(--sb-accent);cursor:pointer;text-transform:uppercase;border-radius:6px;margin-top:16px;padding:10px;font-family:Cinzel,serif;font-size:14px;transition:all .2s;position:relative;box-shadow:0 2px 8px #0003}.spellbook-confirm-btn:hover{background:var(--sb-btn-hover);box-shadow:0 2px 12px #0000004d}.spellbook-enemy-badge{color:#c64;letter-spacing:1px;z-index:2;background:#cc444426;border:1px solid #cc44444d;border-radius:4px;align-items:center;gap:4px;margin-bottom:10px;padding:2px 8px;font-family:Cinzel,serif;font-size:10px;display:inline-flex;position:relative}.card-shake{animation:.25s card-shake}.spellbook-empty-msg{color:#6a5030;text-align:center;padding:40px 20px;font-family:Cinzel,serif;font-size:14px;font-style:italic;line-height:1.6}.audio-panel{border-top:1px solid #444;flex-direction:column;gap:8px;margin-top:16px;padding:12px;font-size:13px;display:flex}.audio-panel h3{margin:0 0 4px;font-size:14px}.audio-panel label{align-items:center;gap:8px;display:flex}.audio-panel input[type=range]{flex:1}.title-screen{z-index:1000;color:#e8d8ff;background:radial-gradient(at 50% 70%,#2a1448 0%,#0a0518 80%);flex-direction:column;align-items:center;font-family:Cinzel,Garamond,serif;animation:.5s ease-out ts-fade-in;display:flex;position:fixed;inset:0;overflow:hidden}.title-screen.ts-fading{animation:.3s ease-in forwards ts-fade-out}@keyframes ts-fade-in{0%{opacity:0}to{opacity:1}}@keyframes ts-fade-out{0%{opacity:1}to{opacity:0}}.title-screen .ts-glow{pointer-events:none;border-radius:50%;width:6px;height:6px;position:absolute}.ts-glow-1{background:#ffd28e;animation:4s ease-in-out infinite ts-flicker;top:55%;left:25%;box-shadow:0 0 18px 6px #ffb84233}.ts-glow-2{background:#88e0ff;width:4px;height:4px;animation:5.5s ease-in-out infinite ts-flicker;top:38%;left:73%;box-shadow:0 0 14px 4px #88e0ff45}.ts-glow-3{background:#d8a0ff;width:5px;height:5px;animation:6.5s ease-in-out infinite ts-flicker;top:75%;left:45%;box-shadow:0 0 16px 5px #d8a0ff33}@keyframes ts-flicker{0%,to{opacity:1}50%{opacity:.4}}.title-screen .ts-title-block{text-align:center;margin-top:9vh}.title-screen .ts-title{letter-spacing:.55em;text-indent:.55em;color:#f3e8ff;text-shadow:0 0 28px #aa66ff45,0 0 8px #00000087;margin:0;font-size:5.2vw;font-weight:500}.title-screen .ts-tagline{letter-spacing:.4em;text-indent:.4em;color:#b599d6;opacity:.85;margin-top:.4rem;font-size:1.1vw;font-style:italic}.title-screen .ts-keyboard{align-items:flex-end;gap:1.5vw;margin-top:12vh;display:flex}.ts-kb-rows{flex-direction:column;gap:.4vw;display:flex}.ts-kb-row{gap:.4vw;display:flex}.ts-kb-stack{flex-direction:column;align-items:flex-start;gap:.4vw;display:flex}.ts-key{color:#6a5e80;background:#3c325066;border:.12vw solid #78649666;border-radius:.3vw;justify-content:center;align-items:center;width:2.6vw;height:2.6vw;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:1vw;font-weight:600;display:inline-flex}.ts-key.move{color:#d4ecff;background:#50b4ff38;border-color:#5ab8ff;box-shadow:0 0 10px #5ab8ff66}.ts-key.cast{color:#f0e0ff;background:#b478ff47;border-color:#c896ff;box-shadow:0 0 12px #c896ff78}.ts-key.heal{color:#d4f5dd;background:#50dc8c38;border-color:#6cdc90;font-size:.85vw;box-shadow:0 0 10px #6cdc9078}.ts-key.dodge{color:#fff0c8;background:#ffc85038;border-color:#f5c860;font-size:.95vw;box-shadow:0 0 10px #f5c86078}.ts-key-shift{width:5.4vw}.ts-key-space{width:14vw}.ts-mouse-wrap{flex-direction:column;align-items:center;gap:.4vw;margin-left:.5vw;display:flex}.ts-mouse{background:#aa64ff2e;border:.2vw solid #aa6affab;border-radius:1.3vw/1.5vw;width:2.6vw;height:4vw;position:relative}.ts-mouse-wheel{background:#d8a0ff;border-radius:.3vw;width:.35vw;height:.9vw;position:absolute;top:.5vw;left:50%;transform:translate(-50%)}.ts-mouse-label{letter-spacing:.15em;color:#b599d6;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.8vw}.title-screen .ts-legend{letter-spacing:.18em;color:#c8b2e6;gap:2vw;margin-top:1.2vw;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.95vw;display:flex}.ts-dot{vertical-align:middle;border-radius:50%;width:.7vw;height:.7vw;margin-right:.4vw;display:inline-block}.ts-dot.move{background:#5ab8ff;box-shadow:0 0 8px #5ab8ffab}.ts-dot.cast{background:#c896ff;box-shadow:0 0 8px #c896ffab}.ts-dot.heal{background:#6cdc90;box-shadow:0 0 8px #6cdc90ab}.ts-dot.dodge{background:#f5c860;box-shadow:0 0 8px #f5c860ab}.title-screen .ts-objective{text-align:center;letter-spacing:.18em;color:#d4c2f0;opacity:.85;max-width:70%;margin-top:4vh;font-size:1.05vw;font-style:italic}.title-screen .ts-begin{letter-spacing:.5em;text-indent:.5em;color:#f3e8ff;cursor:pointer;background:linear-gradient(#4a2a7a,#2a1448);border:.15vw solid #a070ff;border-radius:.3vw;margin-top:4vh;padding:.7vw 3.5vw;font-family:Cinzel,Garamond,serif;font-size:1.4vw;transition:transform .15s ease-out,box-shadow .15s ease-out,background .15s ease-out;box-shadow:0 0 24px #aa66ff45,inset 0 0 12px #00000045}.title-screen .ts-begin:hover{background:linear-gradient(#5a3590,#3a1c5e);transform:scale(1.04);box-shadow:0 0 32px #aa66ff78,inset 0 0 12px #00000045}.title-screen .ts-begin:active{transform:scale(.99)}.title-screen .ts-hint{letter-spacing:.2em;color:#8a7aa8;opacity:.7;margin-top:1.5vh;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.8vw}.title-screen .ts-hint span{color:#c8b2e6;border:1px solid #6a5a88;border-radius:.2em;margin:0 .2em;padding:0 .4em}#game-canvas,#game-canvas canvas{cursor:url(/cursor-wand.svg) 6 6,crosshair}