*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#0d0f12;font-family:Cinzel,Georgia,serif;color:#dde3ea;touch-action:none;user-select:none}
canvas{display:block}
.hidden{display:none!important}
#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,#000a 100%);z-index:1}
#hud{position:fixed;inset:0;pointer-events:none;z-index:2}
#bars{position:absolute;top:16px;left:16px;width:240px}
.bar{position:relative;height:18px;margin-bottom:6px;background:#0009;border:1px solid #fff3;border-radius:9px;overflow:hidden}
.bar span{position:absolute;left:8px;top:1px;font-size:12px;z-index:1;text-shadow:0 1px 2px #000}
.xpb{height:10px}.xpb span{display:none}
.fill{height:100%;transition:width .15s}.hp{background:linear-gradient(#b8323c,#7a1018)}.st{background:linear-gradient(#c9a24a,#8a6a2a)}.xp{background:linear-gradient(#f2c46b,#b08a3a)}
#lvgold{font-size:14px;text-shadow:0 1px 2px #000}#lvl{color:#f2c46b}
#quest{position:absolute;top:16px;right:16px;width:250px;padding:10px 14px;background:#0d0f12cc;border:1px solid #4a6a7a;border-radius:8px}
#quest h3{color:#9fc4d4;margin-bottom:4px}#quest p{font-size:13px}.count{margin-top:4px;color:#f2c46b}
#bossbar{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:min(520px,50vw);text-align:center}
#bossName{font-size:18px;color:#e8d8c8;text-shadow:0 0 6px #000}
.bbar{height:16px;background:#000b;border:1px solid #c0182a;border-radius:3px;overflow:hidden;margin-top:3px}
#bossFill{height:100%;width:100%;background:linear-gradient(#c0182a,#7a1018);transition:width .15s}
#bossPhase{font-size:12px;color:#c9b;margin-top:2px}
#slots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.slot{position:relative;width:52px;height:52px;background:#0d0f12cc;border:1px solid #4a6a7a;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:24px}
.slot small{position:absolute;top:1px;left:4px;font-size:11px;color:#bcc}
.slot em{position:absolute;bottom:1px;right:4px;font-size:11px;font-style:normal;color:#f2c46b}
.slot.active{border-color:#f2c46b;box-shadow:0 0 10px #f2c46b66}.slot.locked{opacity:.5}
.slot .cd{position:absolute;inset:0;background:#000a;transform-origin:bottom;border-radius:6px}
#help{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);font-size:12px;background:#0008;padding:3px 10px;border-radius:6px;white-space:nowrap}
#prompt{position:absolute;top:62%;left:50%;transform:translateX(-50%);background:#0d0f12dd;border:1px solid #9fc4d4;padding:8px 16px;border-radius:6px;color:#cde}
#msg{position:absolute;top:28%;left:50%;transform:translateX(-50%);font-size:22px;color:#f2c46b;text-shadow:0 0 8px #000,0 0 3px #000;white-space:nowrap}
.overlay{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(#1c2128ee,#0d0f12f5);text-align:center;padding:20px;gap:14px}
.overlay h1{font-size:52px;color:#e8d8c8;text-shadow:0 0 18px #c0182a88;letter-spacing:3px}
#classes{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.card{width:190px;padding:12px;background:#0d0f12cc;border:1px solid #3a3f45;border-radius:8px;cursor:pointer;text-align:left;font-size:13px}
.card h2{font-size:19px;color:#f2c46b;margin-bottom:4px}.card.sel{border-color:#f2c46b;box-shadow:0 0 14px #f2c46b55}
.card i{color:#9fc4d4;font-style:normal}
button{pointer-events:auto;font:inherit;font-size:20px;padding:10px 34px;background:#3a3f45;color:#fff;border:1px solid #f2c46b;border-radius:8px;cursor:pointer}
button:hover{background:#4a5058}
#flash{position:fixed;inset:0;background:radial-gradient(transparent 40%,#c0182aaa);opacity:0;transition:opacity .3s;pointer-events:none}
#flash.on{opacity:1;transition:none}
#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .4s;z-index:4}#fade.on{opacity:1}
.dmg{position:fixed;font:bold 22px Georgia,serif;color:#e8e0d0;text-shadow:0 0 4px #000,0 2px 2px #000;pointer-events:none;transform:translate(-50%,-50%);z-index:3}
.dmg.weak{color:#f2c46b}.dmg.res{color:#8a9098;font-size:18px}.dmg.crit{font-size:30px}.dmg.hurt{color:#ff6070}
#credits{position:fixed;bottom:4px;right:8px;font-size:10px;color:#667;z-index:6}
.tbtn{display:none}#joy{display:none}
@media (pointer:coarse){
 #joy{display:block;position:absolute;left:24px;bottom:100px;width:110px;height:110px;border-radius:50%;background:#fff2;border:1px solid #fff5;pointer-events:auto}
 #knob{position:absolute;left:35px;top:35px;width:40px;height:40px;border-radius:50%;background:#fff7}
 .tbtn{display:block;position:absolute;width:64px;height:64px;padding:0;border-radius:50%;font-size:24px}
 #atkBtn{right:24px;bottom:100px}#actBtn{right:100px;bottom:150px}#skBtn{right:30px;bottom:180px}
 #help{display:none}
}

/* --- grafikpass: orbs, ramar --- */
.orb{position:absolute;bottom:14px;width:120px;height:120px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 60%,#140a0c,#050506);border:3px solid #6b5a3e;box-shadow:0 0 0 2px #1a1510,0 0 0 5px #3b3020,0 0 18px #000,inset 0 0 18px #000}
#orbL{left:22px}#orbR{right:22px}
.orb .fill{position:absolute;left:0;right:0;bottom:0;width:100%;transition:height .15s}
.orb .hp{background:radial-gradient(circle at 40% 30%,#e04050,#7a1018 60%,#3a0608)}
.orb .st{background:radial-gradient(circle at 40% 30%,#f2c46b,#8a6a2a 60%,#3a2a0e)}
.orb .gloss{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 25%,#ffffff40,transparent 40%)}
.orb span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;text-shadow:0 0 4px #000,0 1px 2px #000}
.orb label{position:absolute;bottom:14px;width:100%;text-align:center;font-size:10px;letter-spacing:1px;color:#e8d8c0cc;text-shadow:0 1px 2px #000}
#plate{position:absolute;top:14px;left:14px;display:flex;gap:12px;align-items:center;padding:6px 14px;background:linear-gradient(#1a1714ee,#0d0c0aee);border:1px solid #6b5a3e;box-shadow:0 0 0 1px #000,inset 0 0 8px #000;border-radius:4px;font-size:14px}
#plate b{color:#f2c46b}#qBtn{font-size:11px;padding:3px 8px;border-color:#6b5a3e;background:#2a2420}
#xpwrap{position:absolute;bottom:6px;left:160px;right:160px;height:6px;background:#000c;border:1px solid #4a3e2a;border-radius:3px;overflow:hidden}
#xp{height:100%;background:linear-gradient(90deg,#8a6a2a,#f2c46b);transition:width .2s}
#quest{background:linear-gradient(#17140fee,#0b0a08ee);border:1px solid #6b5a3e;box-shadow:0 0 0 1px #000,0 0 0 4px #2a2218,inset 0 0 12px #000;border-radius:3px}
#quest h3{color:#e8c890;font-weight:700;letter-spacing:1px;border-bottom:1px solid #6b5a3e66;padding-bottom:4px}
.slot{background:linear-gradient(#1e1a15,#0b0a08);border:1px solid #6b5a3e;box-shadow:inset 0 0 8px #000,0 0 0 1px #000}
#slots{bottom:20px}#help{bottom:84px;font-family:Georgia,serif}
.bbar{border:1px solid #6b5a3e;box-shadow:0 0 0 1px #000,0 0 10px #c0182a55}
#bossName{font-weight:700;letter-spacing:2px;color:#e8c890}
.overlay h1{font-weight:700}.card{background:linear-gradient(#1e1a15ee,#0b0a08ee);border-color:#6b5a3e}
@media (pointer:coarse){.orb{width:90px;height:90px}#xpwrap{left:120px;right:120px}#joy{left:120px;bottom:30px}}
#lootLabels{position:fixed;inset:0;pointer-events:none;z-index:3}.lootLbl{position:absolute;transform:translate(-50%,-100%);padding:1px 7px;background:#000000b3;border:1px solid #3a3226;border-radius:2px;font:600 13px Georgia,serif;white-space:nowrap;cursor:pointer;pointer-events:auto;text-shadow:0 1px 1px #000}.lootLbl:hover{border-color:#f2c46b}

/* ---------- Inventory i D2-stil (ramar och färger från UI: assets/hud) ---------- */
:root{--sten:#3a3f45;--jarn:#5a5f66;--text:#d8d2c2;--dim:#8a857a;--blod:#7a1018;--guld:#f2c46b;--q-normal:#e8e8e8;--q-magic:#6a6aff;--q-rare:#ffff64;--q-set:#00c400;--q-legendary:#c7a35a}
#invWin{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;border:18px solid transparent;border-image:url(assets/hud/panel_ram.svg) 24 fill stretch;color:var(--text);font-family:Cinzel,Georgia,serif;pointer-events:auto;user-select:none}
.iwHead{display:flex;align-items:center;gap:10px;font-size:22px;color:#e6dfcc;border-bottom:2px solid var(--blod);padding:0 2px 4px;margin-bottom:8px}
.iwHead small{font-size:11px;color:var(--dim)}
#iwClose{margin-left:auto;width:30px;height:30px;border:2px solid var(--jarn);background:#16181b;color:var(--text);font-size:16px;cursor:pointer}
.iwBody{display:flex;gap:12px}
#doll{position:relative;width:300px;height:330px;background:url(assets/hud/siluett.svg) center 10px/100px no-repeat;margin-bottom:10px}
#dollCv{position:absolute;inset:0;width:300px;height:330px;pointer-events:none}
.eqSlot{position:absolute;background:url(assets/hud/slot_ram.svg) 0 0/100% 100%;display:flex;align-items:center;justify-content:center}
.eqSlot .ph{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
.eqSlot.filled .ph{display:none}.eqSlot.can{box-shadow:0 0 0 1px #3fd46a88}
.eqSlot.ok{box-shadow:0 0 0 2px #3fd46a,0 0 12px #3fd46a;background-color:#3fd46a33}.eqSlot.bad{box-shadow:0 0 0 2px #e03040,0 0 12px #e03040;background-color:#e0304033}
.eqSlot.blocked::after{content:'';position:absolute;inset:4px;background:repeating-linear-gradient(45deg,#0000 0 6px,#7a101855 6px 9px)}
#bag{position:relative;background-image:url(assets/hud/slot_ram.svg);background-size:34px 34px;outline:2px solid var(--sten)}
.bagHl{position:absolute;pointer-events:none;z-index:3}.bagHl.ok{background:#3fd46a44;box-shadow:inset 0 0 0 2px #3fd46a}.bagHl.bad{background:#e0304044;box-shadow:inset 0 0 0 2px #e03040}
.itm{position:absolute;display:flex;align-items:center;justify-content:center;cursor:grab;z-index:2;background:var(--glod,none) center/100% 100% no-repeat,#0b0c0ecc}
.itm::after{content:'';position:absolute;inset:0;border:5px solid transparent;border-image:var(--ram) 14 stretch;pointer-events:none}
.itm .ico{display:block;background-repeat:no-repeat;pointer-events:none;flex:none}.itm .emo{font-style:normal;font-size:20px}
.itm em{position:absolute;right:3px;bottom:1px;font-size:11px;font-style:normal;color:var(--guld);text-shadow:0 1px 2px #000}
.itm.dragging{opacity:.25}
#dragGhost{position:fixed;z-index:40;pointer-events:none;opacity:.9}
#statBox{width:210px;background:#111316;border:2px solid var(--sten);padding:0 10px 8px;font-size:13px;align-self:flex-start}
#statBox h4{margin:0 -10px 6px;padding:5px 10px;background:linear-gradient(90deg,var(--blod),transparent);font-size:14px;font-weight:700}
#statBox div{display:flex;justify-content:space-between;border-bottom:1px dotted #333;padding:2px 0}#statBox b{color:#efe6d0;font-weight:500}
#statBox .gold{border:0;margin-top:6px}#statBox .gold b{color:var(--guld)}
#itTip{position:fixed;z-index:50;width:250px;padding:6px 10px;border:14px solid transparent;border-image:url(assets/hud/tooltip_normal.svg) 20 fill stretch;font:12px/1.3 Georgia,serif;color:var(--text);pointer-events:none}
#itTip[data-q=magic]{border-image-source:url(assets/hud/tooltip_magic.svg)}#itTip[data-q=rare]{border-image-source:url(assets/hud/tooltip_rare.svg)}#itTip[data-q=set]{border-image-source:url(assets/hud/tooltip_set.svg)}#itTip[data-q=legendary]{border-image-source:url(assets/hud/tooltip_legendary.svg)}
#itTip .tn{font:700 15px Cinzel,Georgia,serif;text-align:center}#itTip .tb{color:var(--dim);text-align:center}#itTip .af{color:var(--q-magic)}
#itTip .good{color:#5fe07a}#itTip .bad{color:#ff5a5a}#itTip .cmpH{margin-top:6px;border-top:1px solid #333;padding-top:4px;color:#cfc7b0}
#itTip .setH{margin-top:6px;color:var(--q-set)}#itTip .setP,#itTip .setB{color:#1d6a1d;font-size:12px}#itTip .setP.on,#itTip .setB.on{color:#3fe04a}
.lootLbl i{position:absolute;left:50%;top:100%;width:1px;background:#fff6;display:block}
/* Generella tooltips (js/tooltip.js), stil från assets/hud/inventory.css .tooltip + .tooltip--liten */
.rk-tip{position:fixed;z-index:60;max-width:260px;padding:5px 9px;border:12px solid transparent;border-image:url(assets/hud/tooltip_normal.svg) 20 fill stretch;font:13px/1.35 Georgia,serif;color:var(--text);pointer-events:none;box-sizing:border-box}
.rk-tip.tooltip--liten{max-width:230px;padding:3px 8px;border-width:7px;font-size:12px;text-align:center}
.rk-tip h5{margin:0 0 3px;font:700 14px Cinzel,Georgia,serif;color:#e6dfcc}.rk-tip .dim{color:var(--dim)}.rk-tip .champ{color:#6a6aff}.rk-tip .unik{color:#c7a35a}.rk-tip .bad{color:#d05050}
.rk-tip[data-q=magic]{border-image-source:url(assets/hud/tooltip_magic.svg)}.rk-tip[data-q=rare]{border-image-source:url(assets/hud/tooltip_rare.svg)}.rk-tip[data-q=set]{border-image-source:url(assets/hud/tooltip_set.svg)}.rk-tip[data-q=legendary]{border-image-source:url(assets/hud/tooltip_legendary.svg)}
/* D2-monstermätare överst (hover/strid) */
#monBar{display:none;position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:15;min-width:300px;text-align:center;font-family:Cinzel,Georgia,serif;pointer-events:none;text-shadow:0 1px 3px #000}
#monBar .mn{font-size:17px;font-weight:700;color:#e8e4da}#monBar .mn.champ{color:#6a6aff}#monBar .mn.unik{color:#c7a35a}
#monBar .mm{font-size:12px;color:#b9b2a2;margin:1px 0 3px}
#monBar .mbar{position:relative;height:16px;background:#0a0a0ccc;border:1px solid #6a5a40;box-shadow:0 0 0 1px #000}
#monBar .mbar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#a8242e,#5e0c14)}
#monBar .mbar span{position:relative;font:12px/16px Georgia,serif;color:#fff}
#orbL,#orbR,#xpwrap,#lvl,#gold,#quest,#slots .slot{pointer-events:auto}