:root{--gold:#e8c170;--gold-dim:#8a6d3b;--ink:#0d1017;--panel:#0e1119db;--line:#e8c17047;--text:#e9e4d8;--muted:#9a958a;--hp:#d8453c;--mp:#3f86e8;--melee:#e8a33d;--ranged:#6fa8ff;--aoe:#ff6b4a;--utility:#5fd38a;color:var(--text);font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}html,body{background:var(--ink);-webkit-user-select:none;user-select:none;height:100%;margin:0;overflow:hidden}#game{width:100%;height:100%;display:block;position:fixed;inset:0}kbd{border:1px solid var(--line);min-width:1.5em;color:var(--gold);text-align:center;background:#00000080;border-bottom-width:2px;border-radius:4px;padding:0 .35em;font:700 11px/1.6 Inter,sans-serif;display:inline-block}#float-layer{pointer-events:none;position:fixed;inset:0;overflow:hidden}.ft{color:#fff;text-shadow:0 2px #000,0 0 6px #000c;white-space:nowrap;will-change:transform, opacity;font:800 20px/1 Inter,sans-serif;position:absolute;top:0;left:0}.ft.crit{color:#ffd84a;font-size:30px}.ft.crit:after{content:"!"}.ft.player{color:#ff5a4e;font-size:22px}.ft.heal{color:#6dff9e}.ft.mana{color:#7ab8ff}.ft.evade{color:#cfe3ff;font-size:16px;font-style:italic}.ebar{background:#000000b3;border:1px solid #000000e6;border-radius:2px;width:58px;height:7px;position:absolute;top:0;left:0;overflow:hidden}.ebar>i{background:linear-gradient(#ff6a55,#b8231b);height:100%;transition:width .12s;display:block}#hud{pointer-events:none;position:fixed;inset:0}#hurt{opacity:0;background:radial-gradient(#0000 45%,#c814148c);position:absolute;inset:0}#hurt.on{animation:.45s ease-out hurt}@keyframes hurt{0%{opacity:1}to{opacity:0}}#crosshair{width:22px;height:22px;transition:transform .12s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#crosshair i{background:#ffffffe6;position:absolute;box-shadow:0 0 2px #000}#crosshair i:first-child,#crosshair i:nth-child(2){width:2px;height:7px;left:10px}#crosshair i:first-child{top:0}#crosshair i:nth-child(2){bottom:0}#crosshair i:nth-child(3),#crosshair i:nth-child(4){width:7px;height:2px;top:10px}#crosshair i:nth-child(3){left:0}#crosshair i:nth-child(4){right:0}#crosshair.target{transform:translate(-50%,-50%)rotate(45deg)scale(.85)}#crosshair.target i{background:#ff5a4e}#banner{text-align:center;opacity:0;text-shadow:0 3px 10px #000;transition:opacity .35s,transform .35s;position:absolute;top:22%;left:50%;transform:translate(-50%,-10px)}#banner.show{opacity:1;transform:translate(-50%)}#banner h2{color:var(--gold);letter-spacing:.06em;margin:0;font:800 46px Cinzel,serif}#banner p{color:var(--text);margin:6px 0 0;font-size:15px}#toast{color:#ffb4a8;opacity:0;background:#0009;border-radius:4px;padding:6px 14px;font-size:14px;font-weight:600;transition:opacity .2s;position:absolute;top:60%;left:50%;transform:translate(-50%)}#toast.show{opacity:1}#bottom{flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}#bars{gap:8px;display:flex}.bar{width:214px;height:18px;box-shadow:0 0 0 1px var(--line);background:#000000a6;border:1px solid #000000e6;border-radius:3px;position:relative;overflow:hidden}.bar .fill{height:100%;transition:width .15s}#hp .fill{background:linear-gradient(#ff6a5c, var(--hp) 55%, #8e1f19)}#mp .fill{background:linear-gradient(#78b0ff, var(--mp) 55%, #1d4f99)}.bar span{text-shadow:0 1px 2px #000;place-items:center;font-size:11px;font-weight:800;display:grid;position:absolute;inset:0}#hotbar{gap:6px;display:flex}.slot{--c:transparent;--p:0;border:1px solid var(--line);background:radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%), #0a0c12d9;border-radius:6px;width:58px;height:58px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #000c}.slot .icon{color:var(--c);text-shadow:0 0 10px var(--c);place-items:center;font-size:28px;display:grid;position:absolute;inset:0}.slot .cd{background:conic-gradient(#000000b8 calc(var(--p) * 360deg), transparent 0);position:absolute;inset:0}.slot .cd-text{text-shadow:0 1px 3px #000;place-items:center;font-size:18px;font-weight:800;display:grid;position:absolute;inset:0}.slot kbd{min-width:0;font-size:10px;line-height:1.3;position:absolute;top:2px;left:2px}.slot .cost{color:#8fbaff;text-shadow:0 1px 2px #000;font-size:10px;font-weight:800;position:absolute;bottom:2px;right:4px}.slot.empty{opacity:.45}.slot.oom .icon{filter:grayscale()brightness(.6)}.slot.oom .cost{color:#ff6a5c}.slot.aiming{border-color:var(--c);box-shadow:0 0 12px var(--c)}.slot.cast{animation:.3s ease-out slot-cast}.slot.denied{animation:.3s ease-out slot-denied}@keyframes slot-cast{0%{box-shadow:0 0 22px var(--c);transform:scale(1.08)}}@keyframes slot-denied{25%{transform:translate(-3px)}75%{transform:translate(3px)}}#actions{gap:10px;display:flex}.act{--p:0;color:var(--muted);background:#00000080;border-radius:4px;align-items:center;gap:5px;padding:2px 8px;font-size:11px;display:flex;position:relative;overflow:hidden}.act:after{content:"";height:2px;width:calc(var(--p) * 100%);background:var(--gold);position:absolute;bottom:0;left:0}#overlay{cursor:pointer;background:radial-gradient(#0a0c148c,#05060ae6);place-items:center;display:grid;position:fixed;inset:0}#overlay[hidden]{display:none}body[data-state=dead] #overlay{background:radial-gradient(#3c080873,#0a0202e6)}body[data-state=dead] #overlay .controls{display:none}.panel{text-align:center;max-width:520px;padding:16px}.panel h1{color:var(--gold);letter-spacing:.06em;text-shadow:0 4px 18px #000000e6;margin:0;font:800 clamp(36px,7vw,64px) Cinzel,serif}.panel .status{margin:8px 0 26px;font-size:16px;font-weight:600;animation:2s ease-in-out infinite breathe}@keyframes breathe{50%{opacity:.55}}.controls{border:1px solid var(--line);background:var(--panel);text-align:left;border-radius:8px;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;padding:16px 20px;font-size:13px;display:grid}.controls dt{color:var(--gold);text-align:right;font-weight:800}.controls dd{color:var(--text);margin:0}#skillbook{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0405098c;place-items:center;padding:16px;display:grid;position:fixed;inset:0}#skillbook[hidden]{display:none}.book{border:1px solid var(--line);background:var(--panel);-webkit-user-select:none;user-select:none;border-radius:10px;flex-direction:column;width:min(900px,100%);max-height:min(760px,100%);display:flex;box-shadow:0 20px 60px #0009}.book header{border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:16px;padding:14px 18px;display:flex}.book h2{color:var(--gold);margin:0;font:800 24px Cinzel,serif}.tabs{flex-wrap:wrap;flex:1;gap:4px;display:flex}.tabs button,.book .close{color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:999px;padding:5px 12px;font:600 13px Inter,sans-serif}.tabs button:hover,.book .close:hover{color:var(--text)}.tabs button.active{border-color:var(--line);color:var(--gold);background:#e8c1701a}.book .close{font-size:16px}.grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;padding:16px 18px;display:grid;overflow-y:auto}.card{--c:#fff;border:1px solid #ffffff12;border-left:3px solid var(--cat);cursor:grab;background:#ffffff08;border-radius:6px;gap:12px;padding:12px;transition:background .15s,border-color .15s;display:flex;position:relative}.card:hover{border-color:color-mix(in srgb, var(--c) 50%, transparent);border-left-color:var(--cat);background:#ffffff12}.card.dragging{opacity:.4}.card.melee{--cat:var(--melee)}.card.ranged{--cat:var(--ranged)}.card.aoe{--cat:var(--aoe)}.card.utility{--cat:var(--utility)}.card .icon{background:radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 40%, transparent), #00000080 75%);width:48px;height:48px;color:var(--c);text-shadow:0 0 10px var(--c);border-radius:6px;flex:none;place-items:center;font-size:26px;display:grid}.card .body{min-width:0}.card .title{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.card .title b{font-size:15px}.card .tag{text-transform:uppercase;letter-spacing:.08em;color:var(--cat);font-size:10px;font-weight:800}.card .title kbd{position:absolute;top:10px;right:10px}.card p{color:#c2bdb1;margin:4px 0 6px;font-size:12.5px;line-height:1.4}.card .stats{flex-wrap:wrap;gap:6px;display:flex}.card .stats span{color:var(--muted);background:#00000059;border-radius:3px;padding:1px 6px;font-size:11px}.card.equipped{background:#e8c1700f}.book footer{border-top:1px solid var(--line);padding:14px 18px 16px}.loadout{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.loadout .slot{cursor:grab;width:76px;height:84px}.loadout .slot .icon{bottom:18px}.loadout .slot small{text-align:center;color:var(--muted);white-space:nowrap;text-overflow:ellipsis;padding:0 3px;font-size:10px;position:absolute;bottom:4px;left:0;right:0;overflow:hidden}.loadout .slot.over{border-color:var(--gold);box-shadow:0 0 14px #e8c17080}.hint{color:var(--muted);text-align:center;margin:12px 0 0;font-size:12px;line-height:1.8}.hint kbd{margin:0 1px}#objective{border-left:3px solid var(--gold);text-shadow:0 1px 3px #000;background:linear-gradient(90deg,#080a10bf,#0000);max-width:300px;padding:8px 12px 9px;position:absolute;top:18px;left:18px}#objective small{letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font:800 10px Inter,sans-serif}#objective p{margin:2px 0 0;font-size:14px;font-weight:600}#objective.updated{animation:1.6s ease-out objective-flash}@keyframes objective-flash{0%{background:linear-gradient(90deg,#e8c17073,#0000);transform:translate(6px)}}#minimap{text-align:center;width:184px;position:absolute;top:16px;right:16px}#minimap canvas{border:2px solid var(--gold-dim);border-radius:50%;width:184px;height:184px;box-shadow:0 0 0 1px #000,0 6px 20px #0009}#minimap .caption{color:var(--gold);text-shadow:0 1px 3px #000;margin-top:4px;font:600 12px Cinzel,serif}#bossbar{text-align:center;opacity:0;width:min(560px,60vw);transition:opacity .4s,transform .4s;position:absolute;top:22px;left:50%;transform:translate(-50%,-8px)}#bossbar.show{opacity:1;transform:translate(-50%)}#bossbar b{color:#e8b6ff;text-shadow:0 2px 6px #000;letter-spacing:.06em;font:800 18px Cinzel,serif}#bossbar .track{background:#000000b3;border:1px solid #000;border-radius:2px;height:12px;margin-top:4px;overflow:hidden;box-shadow:0 0 0 1px #b040ff66}#bossbar .fill{background:linear-gradient(#c070ff,#6a1aa8);height:100%;transition:width .2s}#prompt{border:1px solid var(--line);opacity:0;background:#080a10cc;border-radius:999px;align-items:center;gap:8px;padding:6px 14px;font-size:14px;font-weight:600;transition:opacity .15s;display:flex;position:absolute;bottom:190px;left:50%;transform:translate(-50%)}#prompt.show{opacity:1}#subtitle{text-align:center;opacity:0;text-shadow:0 2px 4px #000,0 0 12px #000000e6;width:min(760px,90vw);transition:opacity .35s;position:absolute;bottom:200px;left:50%;transform:translate(-50%)}#subtitle.show{opacity:1}#subtitle small{letter-spacing:.14em;text-transform:uppercase;color:#9fd7ff;font:800 11px Inter,sans-serif}#subtitle p{color:#e6f2ff;margin:4px 0 0;font:italic 21px/1.4 EB Garamond,Georgia,serif}.wlabel{text-align:center;white-space:nowrap;text-shadow:0 1px 3px #000;pointer-events:none;position:absolute;top:0;left:0}.wlabel b{color:#ffe6a8;font:700 13px Inter,sans-serif;display:block}.wlabel small{color:#c9c2b0;font-size:10px}body.talking #bottom,body.talking #prompt,body.talking #crosshair{opacity:0}#dialog{--speaker:var(--gold);border:1px solid var(--line);border-top:2px solid var(--speaker);background:linear-gradient(#0e1119f2,#080a0ff2);border-radius:8px;width:min(820px,100vw - 32px);padding:16px 22px 14px;position:fixed;bottom:36px;left:50%;transform:translate(-50%);box-shadow:0 16px 50px #000000b3}#dialog[hidden]{display:none}#dialog .who{align-items:center;gap:10px;display:flex}#dialog .portrait{border:2px solid var(--speaker);width:34px;height:34px;color:var(--speaker);background:#00000080;border-radius:50%;place-items:center;font:800 16px Cinzel,serif;display:grid}#dialog .who b{color:var(--speaker);letter-spacing:.04em;font:800 16px Cinzel,serif}#dialog .text{min-height:3.2em;margin:10px 0 6px;font-size:17px;line-height:1.55}#dialog.narrator .text{color:#e6f2ff;font:italic 20px/1.5 EB Garamond,Georgia,serif}#dialog .next{text-align:right;color:var(--muted);opacity:0;font-size:11px;transition:opacity .2s}#dialog.done .next{opacity:1;animation:1.6s ease-in-out infinite breathe}#cinematic{text-align:center;background:#000;place-items:center;padding:24px;display:grid;position:fixed;inset:0}#cinematic[hidden]{display:none}#cinematic p{color:#efe6d2;opacity:0;max-width:760px;font:italic clamp(20px,2.6vw,30px)/1.5 EB Garamond,Georgia,serif}#cinematic p.in{animation:1.4s ease-out forwards cine-in}@keyframes cine-in{0%{opacity:0;filter:blur(3px);transform:translateY(8px)}to{opacity:1;filter:none;transform:none}}#cinematic .hint{color:#6d6a62;font-size:12px;position:absolute;bottom:28px;left:0;right:0}#loading{opacity:0;pointer-events:none;z-index:5;background:radial-gradient(at 50% 60%,#1a1622,#050407 70%);place-items:center;padding:24px;transition:opacity .35s;display:grid;position:fixed;inset:0}#loading.show{opacity:1;pointer-events:auto}#loading .inner{text-align:center;width:min(560px,100%)}#loading .region{letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);font:800 12px Inter,sans-serif}#loading h2{color:var(--gold);margin:8px 0 6px;font:800 clamp(30px,5vw,48px) Cinzel,serif}#loading .lore{color:#cfc6b4;margin:0 0 30px;font:italic 19px/1.4 EB Garamond,Georgia,serif}#loading .bar{background:#ffffff14;height:3px;overflow:hidden}#loading .bar i{background:linear-gradient(90deg, var(--gold-dim), var(--gold));width:0;height:100%;transition:width .25s;display:block}#loading .tip{color:var(--muted);margin-top:18px;font-size:13px}.menu{justify-content:center;gap:12px;margin:-8px 0 24px;display:flex}.menu[hidden],.menu button[hidden]{display:none}.menu button,#ending button{border:1px solid var(--gold-dim);color:var(--gold);letter-spacing:.06em;cursor:pointer;background:linear-gradient(#e8c1702e,#e8c1700d);border-radius:4px;padding:10px 26px;font:800 15px Cinzel,serif;transition:background .15s}.menu button:hover,#ending button:hover{background:#e8c1704d}body[data-state=title] #overlay .status{color:var(--muted);animation:none}#ending{background:radial-gradient(#281c0ab3,#050402f2);place-items:center;padding:16px;display:grid;position:fixed;inset:0}#ending[hidden]{display:none}#ending small{letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);font:800 12px Inter,sans-serif}#ending p{color:#e6dcc6;margin:12px 0 26px;font:19px/1.5 EB Garamond,Georgia,serif}body[data-state=title] #hud,body[data-state=loading] #hud{visibility:hidden}