:root{--bg:#0b090c;--panel:#17120f;--panel2:#211915;--line:#3a2c22;--moss:#6f8a3c;--text:#e6dccb;--dim:#9b8f7e;--gold:#f2d36b;--hp:#b8382d;--mp:#3f8f8a;--xp:#a98bd6}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:"Alegreya Sans",system-ui,sans-serif;overflow:hidden;user-select:none}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
#over{pointer-events:none}
#loading{position:fixed;inset:0;display:grid;place-items:center;font:700 28px "Grenze Gotisch",serif;color:#9df07a;letter-spacing:2px}
#hud{position:fixed;inset:0;pointer-events:none}
#hud>*{pointer-events:auto}
#topleft{position:absolute;left:16px;top:14px;width:270px;padding:12px 14px;background:linear-gradient(180deg,rgba(23,18,15,.88),rgba(16,12,10,.78));border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.who{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.lvl{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:700 18px "Grenze Gotisch",serif;background:radial-gradient(circle at 40% 35%,#5c4a2c,#241a12);border:2px solid #8a6a3a;color:var(--gold)}
#depth{font:700 20px "Grenze Gotisch",serif;letter-spacing:.5px}
#biome{font-size:13px;color:var(--dim)}
.bar{position:relative;height:18px;background:#0c0908;border:1px solid #33261d;border-radius:5px;overflow:hidden;margin:5px 0}
.bar.thin{height:6px}
.bar .fill{position:absolute;inset:0 auto 0 0;transition:width .18s}
#hp .fill{background:linear-gradient(180deg,#d65141,#7e1f18)}
#mp .fill{background:linear-gradient(180deg,#58b3a9,#21544f)}
#xp .fill{background:linear-gradient(90deg,#6f5aa0,#c4a6f2)}
.bar .txt{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:700;text-shadow:0 1px 2px #000}
.cur{display:flex;gap:16px;font-size:14px;margin-top:6px}.cur b{color:var(--gold)}.dust b{color:#9df07a}
#status{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;font-size:12px}
.buff,.debuff{padding:2px 7px;border-radius:10px;background:#20301a;border:1px solid #45612d}.debuff{background:#3a1714;border-color:#7a2a22}
#log{position:absolute;left:16px;bottom:16px;width:min(440px,40vw);font-size:14px;line-height:1.35;pointer-events:none;text-shadow:0 1px 3px #000,0 0 6px #000}
#log .m{opacity:.92}#log .m:nth-last-child(n+4){opacity:.55}
#log .warn{color:#ff8a70}#log .good{color:#b4ec84}#log .hint{color:#9fcfe6}#log .sys{color:#d9c38c}
#skillbar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:8px;align-items:flex-end;padding:8px 10px;background:linear-gradient(180deg,rgba(29,22,18,.9),rgba(14,11,9,.9));border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.6)}
.sk{position:relative;width:62px;height:62px;border-radius:9px;background:#120e0c url() center/cover;border:2px solid #4a3a2c;cursor:pointer;display:grid;place-items:center;transition:transform .08s,border-color .15s}
.sk:hover{transform:translateY(-2px);border-color:#8a6a3a}
.sk img{width:50px;height:50px;filter:drop-shadow(0 2px 2px #000)}
.sk .key{position:absolute;left:4px;top:2px;font-size:12px;font-weight:800;color:#d9c38c;text-shadow:0 1px 2px #000}
.sk .mc{position:absolute;right:4px;bottom:1px;font-size:11px;color:#7fd3c9;font-weight:700;text-shadow:0 1px 2px #000}
.sk .cd{position:absolute;inset:0;display:grid;place-items:center;font:700 24px "Grenze Gotisch",serif;color:#fff;text-shadow:0 0 6px #000}
.sk.cooling img{filter:grayscale(1) brightness(.4)}.sk.nomana{border-color:#2d4b6b}.sk.nomana img{opacity:.5}
.sk.armed{border-color:#9df07a;box-shadow:0 0 14px #9df07a88}
.sk.pot .cnt{position:absolute;right:4px;bottom:1px;font-size:12px;font-weight:800;color:#ff9a8a;text-shadow:0 1px 2px #000}.sk.pot.empty img{filter:grayscale(1) brightness(.5)}
.btns{display:flex;gap:6px;margin-left:8px;padding-left:10px;border-left:1px solid var(--line)}
.btns button{position:relative;width:46px;height:46px;border-radius:8px;background:#1a1411;border:1px solid #4a3a2c;cursor:pointer;padding:0}
.btns button img{width:36px;height:36px}.btns button span{position:absolute;left:3px;top:1px;font-size:10px;font-weight:800;color:#d9c38c}
.btns .pts{position:absolute;right:-6px;top:-6px;background:#9df07a;color:#111;border-radius:9px;font-size:11px;padding:0 5px;min-width:16px}.btns .pts:empty{display:none}
#panel{display:none;position:fixed;right:16px;top:14px;bottom:110px;width:min(640px,calc(100vw - 32px));overflow:auto;padding:18px 20px;background:linear-gradient(180deg,rgba(26,20,17,.96),rgba(15,11,9,.96));border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.7)}
#panel h2,#modal h2{font:700 26px "Grenze Gotisch",serif;margin:0 0 10px;color:#e8d7b0;letter-spacing:.5px}
#panel .x{position:absolute;right:12px;top:10px;background:none;border:0;color:var(--dim);font-size:20px;cursor:pointer}
.hint{font-size:13px;color:var(--dim);margin:6px 0}
.inv{display:grid;grid-template-columns:auto 1fr;gap:18px}
.equip{display:grid;grid-template-columns:repeat(3,64px);gap:8px 10px;align-content:start}
.eqs label{display:block;font-size:11px;color:var(--dim);margin-bottom:2px}
.bag{display:grid;grid-template-columns:repeat(6,54px);gap:6px}
.slot{width:54px;height:54px;border-radius:8px;background:radial-gradient(circle at 50% 40%,#2a211b,#120e0c);border:2px solid #3a2c22;display:grid;place-items:center;cursor:pointer;position:relative}
.equip .slot{width:64px;height:64px}
.slot img{width:84%;height:84%;filter:drop-shadow(0 2px 2px #000)}
.slot:not(.empty){border-color:color-mix(in srgb,var(--rc) 55%,#3a2c22);box-shadow:inset 0 0 14px color-mix(in srgb,var(--rc) 22%,transparent)}
.slot.r-legendary,.slot.r-sporeborn{box-shadow:inset 0 0 18px color-mix(in srgb,var(--rc) 45%,transparent),0 0 10px color-mix(in srgb,var(--rc) 35%,transparent)}
.slot:hover{border-color:#c9a86a}.slot[data-sel]{outline:2px solid #9df07a}
.invbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px;font-size:14px}
.invbar .dust{color:#9df07a}
button{font-family:inherit}
.invbar button,.cbtn button,.big{background:linear-gradient(180deg,#3a2c1f,#231a13);color:var(--text);border:1px solid #6a5232;border-radius:7px;padding:6px 12px;cursor:pointer;font-size:14px}
.invbar button.on{border-color:#c94a3a;color:#ffb0a0}
button:disabled{opacity:.4;cursor:not-allowed}
.char{display:grid;grid-template-columns:240px 1fr;gap:18px}
.attr{display:grid;grid-template-columns:1fr auto auto;gap:4px 8px;align-items:center;padding:8px 10px;margin-bottom:6px;background:#1d1612;border:1px solid var(--line);border-radius:8px}
.attr span{font:700 20px "Grenze Gotisch",serif;color:var(--gold)}.attr small{grid-column:1/-1;color:var(--dim);font-size:12px}
.attr button{width:26px;height:26px;border-radius:50%;background:#2c4220;border:1px solid #6f8a3c;color:#cfefb0;cursor:pointer;font-weight:800}
.pts{margin-bottom:8px}.sub{font-size:13px;color:var(--dim);margin-top:10px}
.stats .row{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px dashed #2c221b;font-size:14px}.stats .row b{color:#efe2c4}
.pw{margin-top:8px;color:#f0a060;font-size:13px}
.slots4{display:flex;gap:10px;margin:10px 0}
.s4{position:relative;width:58px;height:58px;border:2px dashed #5a4632;border-radius:9px;display:grid;place-items:center;cursor:pointer}
.s4 img{width:44px}.s4 span{position:absolute;left:4px;top:1px;font-size:11px;color:#d9c38c}
.skl{display:grid;gap:8px}
.skc{display:flex;gap:10px;padding:8px;border:1px solid var(--line);border-radius:8px;background:#1b1511;cursor:pointer}
.skc.sel{border-color:#9df07a}.skc img{width:44px;height:44px}.skc p{margin:2px 0 0;font-size:13px;color:var(--dim)}.skc small{color:#b9f}
.craftbag{grid-template-columns:repeat(auto-fill,54px);margin:8px 0 14px}
.craftsel{display:flex;gap:16px;flex-wrap:wrap}.ttc{flex:1;min-width:220px;padding:10px;border:1px solid var(--line);border-radius:8px;background:#120e0c}
.cbtn{display:flex;flex-direction:column;gap:8px}
#tooltip{display:none;position:fixed;z-index:50;max-width:330px;padding:10px 12px;background:rgba(12,9,8,.97);border:1px solid #5a4632;border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.8);font-size:14px;pointer-events:none}
.tt-name{font:700 18px "Grenze Gotisch",serif;letter-spacing:.3px}
.tt-sub{font-size:12px;color:var(--dim);margin-bottom:6px}
.tt-main{font-weight:700;margin-bottom:4px}.tt-dim{color:var(--dim);font-size:12px}
.tt-imp{color:#cfc4b0;border-bottom:1px solid #2c221b;padding-bottom:4px;margin-bottom:4px}
.tt-aff{color:#9db7ff}.tt-aff .fx{color:#f0a060}
.tt-power{margin-top:6px;color:#f0a060;font-style:italic}
.tt-cmp{margin-top:8px;padding-top:6px;border-top:1px solid #2c221b;font-size:13px}
.up{color:#8fe06a}.down{color:#ff7a6a}
.tt-hint{color:#9df07a;font-size:12px;margin-top:6px}
#modal{display:none;position:fixed;inset:0;z-index:40;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(10,8,10,.55),rgba(5,4,5,.92))}
#modal .box{max-width:min(920px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:26px 30px;background:linear-gradient(180deg,rgba(28,21,17,.97),rgba(14,10,9,.97));border:1px solid #4a3a2c;border-radius:14px;text-align:center;box-shadow:0 20px 60px #000}
.title h1{font:700 clamp(54px,9vw,104px) "Grenze Gotisch",serif;margin:0;letter-spacing:6px;color:#d9e8b0;text-shadow:0 0 24px #9df07a66,0 0 60px #6f8a3c55}
.title .tag{color:var(--dim);margin:4px 0 18px;font-size:17px}
.title h3{font:500 20px "Grenze Gotisch",serif;margin:18px 0 10px;color:#d9c38c}
.classes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.classes button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 12px;background:#1b1511;border:1px solid #4a3a2c;border-radius:10px;color:var(--text);cursor:pointer;transition:transform .1s,border-color .15s}
.classes button:hover{transform:translateY(-3px);border-color:#9df07a}
.classes img{width:88px;height:88px}.classes b{font:700 19px "Grenze Gotisch",serif}.classes small{color:var(--dim);font-size:13px}
.keys{font-size:12px;color:#7d7264;margin-top:18px}
.big{font-size:18px;padding:10px 28px;margin:8px}
.corr{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:14px}
.corr button{display:flex;flex-direction:column;gap:6px;padding:16px;background:#1b1511;border:1px solid #4a3a2c;border-radius:10px;color:var(--text);cursor:pointer}
.corr button:hover{border-color:#9df07a}.corr b{font:700 20px "Grenze Gotisch",serif}.corr .bad{color:#ff8a70}.corr .good{color:#b4ec84}
.dead{color:#e05a4a!important;font-size:44px!important}
#res{display:flex;gap:10px;font-size:12px;margin-top:5px}#res .rp{color:#a6e86a}#res .rf{color:#ff9c4a}#res .rd{color:#d38cff}
.sk .sups{position:absolute;right:4px;top:2px;font-size:9px;color:#7fe0c9;letter-spacing:-1px;text-shadow:0 1px 2px #000}
#bossbar{display:none;position:absolute;left:50%;top:16px;transform:translateX(-50%);width:min(520px,60vw);text-align:center;pointer-events:none}
#bossbar .n{font:700 20px "Grenze Gotisch",serif;color:#f08a3c;text-shadow:0 2px 6px #000;letter-spacing:.5px}
#bossbar .bar{height:12px;border-color:#6a3a22;box-shadow:0 0 18px rgba(240,138,60,.25)}#bossbar .fill{background:linear-gradient(180deg,#e0702a,#7a2a10)}
#banner{position:absolute;left:50%;top:22%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;opacity:0}
#banner b{display:block;font:700 clamp(30px,5vw,54px) "Grenze Gotisch",serif;color:#e8d7b0;text-shadow:0 0 24px #000,0 0 40px #9df07a55;letter-spacing:2px}
#banner span{display:block;font-size:17px;color:#cfc4b0;text-shadow:0 2px 8px #000}
#banner.show{animation:ban 3.2s ease forwards}
@keyframes ban{0%{opacity:0;transform:translate(-50%,-40%)}12%{opacity:1;transform:translate(-50%,-50%)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-56%)}}
#panel.wide{width:min(980px,calc(100vw - 32px))}
.treehead{font-size:14px;margin-bottom:6px}.treehead b{color:#9df07a}.treehead button{margin-left:10px;background:#231a13;border:1px solid #6a5232;color:var(--text);border-radius:6px;padding:3px 10px;cursor:pointer}
.tree{background:radial-gradient(circle,#1c1712,#0d0a08);border:1px solid var(--line);border-radius:10px}
#treesvg{width:100%;height:auto;display:block;max-height:calc(100vh - 210px)}
#treesvg line{stroke:#3a2e24;stroke-width:4}#treesvg line.on{stroke:#9df07a;stroke-width:5}
#treesvg .node circle{fill:#1a1410;stroke:#5a4632;stroke-width:3;cursor:pointer;transition:all .15s}
#treesvg .node.can circle{stroke:#d9c38c;fill:#2a2118}#treesvg .node.can:hover circle{stroke:#fff}
#treesvg .node.on.c-s circle{fill:#9a3a2a;stroke:#ffb090}#treesvg .node.on.c-f circle{fill:#4a7a2a;stroke:#c8f0a0}#treesvg .node.on.c-w circle{fill:#3a5a9a;stroke:#b0c8ff}#treesvg .node.on.c-m circle{fill:#8a6a3a;stroke:#f2d36b}
#treesvg .node.not circle{stroke-width:4}#treesvg .node.key circle{stroke:#f08a3c;stroke-width:4}
#treesvg text{fill:#f08a3c;font-size:18px;text-anchor:middle;pointer-events:none}
.skwrap{display:grid;grid-template-columns:230px 1fr;gap:14px}
.skc .mini{font-size:11px;margin-top:2px}.skc .mini i{font-style:normal;margin-right:4px}
.skhead{display:flex;gap:12px;align-items:flex-start}.skhead img{width:64px}.skhead h3{margin:0;font:700 22px "Grenze Gotisch",serif}.skhead p{margin:4px 0;font-size:14px}
.links{display:grid;gap:8px;margin:12px 0}
.link{display:grid;grid-template-columns:44px 1fr;gap:2px 10px;align-items:center;min-height:56px;padding:6px 10px;border:2px dashed #2f5a52;border-radius:9px;background:#0f1514;cursor:pointer}
.link img{width:40px;grid-row:span 2}.link b{color:#7fe0c9}.link small{color:var(--dim);font-size:12px}.link span{grid-column:1/-1;color:#4f7d74;font-size:13px}
.link.bad{border-color:#7a3a2a}.link.bad b{color:#c98a7a;text-decoration:line-through}
.barset{display:flex;gap:6px;align-items:center;font-size:14px;margin:6px 0}.barset button{width:32px;height:30px;border-radius:6px;background:#231a13;border:1px solid #6a5232;color:var(--text);cursor:pointer}.barset button.on{border-color:#9df07a;color:#9df07a}
h3.sm{font:600 17px "Grenze Gotisch",serif;margin:14px 0 6px;color:#d9c38c}
.runes .slot.picked{outline:2px solid #7fe0c9;box-shadow:0 0 14px #7fe0c988}.runes .slot.dim{opacity:.45}
.pw.ks{color:#f2a060}
@media (max-width:760px){#topleft{width:210px;padding:8px 10px}#log{display:none}.sk{width:50px;height:50px}.sk img{width:40px;height:40px}.btns button{width:40px;height:40px}.inv,.char,.skwrap{grid-template-columns:1fr}.bag{grid-template-columns:repeat(5,54px)}}
/* ===================== SKIN: painted UI kit ===================== */
html,body{cursor:url(assets/ui/cur_normal.png) 3 3,auto}
#gl.attack{cursor:url(assets/ui/cur_attack.png) 4 4,crosshair}
#gl.interact{cursor:url(assets/ui/cur_interact.png) 8 4,pointer}
button,.slot,.sk,.skc,.link,[data-node]{cursor:url(assets/ui/cur_interact.png) 8 4,pointer}
.ico{width:18px;height:18px;vertical-align:-4px;object-fit:contain;filter:drop-shadow(0 1px 1px #000)}
/* frames */
#topleft{border-style:solid;border-color:transparent;border-width:22px;border-image:url(assets/ui/panel_hud.webp) 100 fill / 22px stretch;background:none;border-radius:0;box-shadow:none;padding:2px 4px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))}
#panel{border-style:solid;border-color:transparent;border-width:40px 34px 34px;border-image:url(assets/ui/panel_big.webp) 140 130 130 / 40px 34px 34px stretch;background:linear-gradient(rgba(16,12,9,.86),rgba(16,12,9,.9)),url(assets/ui/bark.webp) 0 0/256px;background-clip:padding-box;border-radius:0;box-shadow:none;padding:4px 10px;filter:drop-shadow(0 12px 28px rgba(0,0,0,.7))}
#tooltip{border-style:solid;border-color:transparent;border-width:14px;border-image:url(assets/ui/panel_tooltip.webp) 90 fill / 14px stretch;background:none;border-radius:0;box-shadow:none;padding:4px 6px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.8))}
#modal .box{border-style:solid;border-color:transparent;border-width:48px;border-image:url(assets/ui/panel_modal.webp) 150 / 48px stretch;background:linear-gradient(rgba(16,12,9,.84),rgba(16,12,9,.9)),url(assets/ui/bark.webp) 0 0/256px;background-clip:padding-box;border-radius:0;box-shadow:none;padding:6px 16px;filter:drop-shadow(0 20px 40px #000)}
#skillbar{border-style:solid;border-color:transparent;border-width:18px 22px;border-image:url(assets/ui/panel_hud.webp) 100 fill / 18px 22px stretch;background:none;border-radius:0;box-shadow:none;padding:0 2px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.6))}
/* headings with root divider */
#panel h2,#modal h2{padding-bottom:16px;background:url(assets/ui/divider.webp) center bottom/90% 14px no-repeat}
#panel .x{right:-18px;top:-26px;width:38px;height:38px;background:url(assets/ui/smallbtn.webp) center/100% 100% no-repeat;color:#e8d7b0;font-size:15px;font-weight:800;padding-top:6px}
#panel .x:hover{filter:brightness(1.25)}
/* level badge */
.lvl{background:url(assets/ui/i_badge.webp) center/100% 100% no-repeat;border:0;border-radius:0;width:44px;height:44px;color:#2a1c10;text-shadow:0 1px 0 #d9c38c}
/* bars */
.bar{height:26px;border-radius:0;overflow:visible;background:none;border-style:solid;border-color:transparent;border-width:6px 24px;border-image:url(assets/ui/bar_frame.webp) 46 210 fill / 6px 24px stretch;margin:4px -6px}
.bar .fill{inset:0 auto 0 0;overflow:hidden}
#hp .fill{background:url(assets/ui/fill_hp.webp) left center/auto 100% repeat-x}
#mp .fill{background:url(assets/ui/fill_mp.webp) left center/auto 100% repeat-x}
#xp .fill,.bar.thin .fill{background:url(assets/ui/fill_xp.webp) left center/auto 100% repeat-x}
.bar.thin{height:14px;border-width:4px 12px;border-image:url(assets/ui/xp_frame.webp) 33 110 fill / 4px 12px stretch}
#bossbar .bar{height:34px;border-width:9px 34px;border-image:url(assets/ui/boss_frame.webp) 70 240 fill / 9px 34px stretch;box-shadow:none}
#bossbar .fill{background:url(assets/ui/fill_hp.webp) left center/auto 100% repeat-x;filter:hue-rotate(18deg) saturate(1.3)}
.cur{align-items:center}.cur span{display:flex;align-items:center;gap:5px}
#res span{display:flex;align-items:center;gap:3px}
/* skill slots */
.sk{width:66px;height:66px;border:0;border-radius:0;background:url(assets/ui/slot_skill.webp) center/100% 100% no-repeat}
.sk img{width:44px;height:44px;margin-top:4px}
.sk:hover{border:0;filter:brightness(1.18)}
.sk.armed{border:0;box-shadow:none;filter:drop-shadow(0 0 8px #9df07a) brightness(1.15)}
.sk.nomana{border:0}
.sk.pot{background-image:url(assets/ui/slot_pot.webp)}
.sk .key{left:8px;top:8px}.sk .mc{right:9px;bottom:6px}.sk .sups{right:9px;top:9px}.sk.pot .cnt{right:9px;bottom:6px}
.btns{border-left:0;padding-left:4px}
.btns button{width:50px;height:50px;border:0;border-radius:0;background:url(assets/ui/rbtn.webp) center/100% 100% no-repeat}
.btns button:hover{background-image:url(assets/ui/rbtn_hover.webp)}
.btns button img{width:30px;height:30px}.btns button span{left:5px;top:3px}
/* item slots */
.slot{border:0;border-radius:0;background:url(assets/ui/slot.webp) center/100% 100% no-repeat}
.slot:hover{border:0;background-image:url(assets/ui/slot_hi.webp)}
.slot:not(.empty){border:0;box-shadow:none}
.slot.r-magic{filter:drop-shadow(0 0 3px var(--rc))}.slot.r-rare{filter:drop-shadow(0 0 4px var(--rc))}
.slot.r-legendary,.slot.r-sporeborn{box-shadow:none;filter:drop-shadow(0 0 6px var(--rc)) drop-shadow(0 0 2px var(--rc))}
.slot.r-support{filter:drop-shadow(0 0 4px #7fe0c9)}
.slot img{width:72%;height:72%}
.slot[data-sel]{outline:0;filter:drop-shadow(0 0 6px #9df07a)}
.equip .slot.empty{background-size:100% 100%}
.runes .slot.picked{outline:0;box-shadow:none;filter:drop-shadow(0 0 8px #7fe0c9) brightness(1.2)}
/* buttons */
.invbar button,.cbtn button,.big,.treehead button,.barset button{border-style:solid;border-color:transparent;border-width:8px 22px;border-image:url(assets/ui/btn.webp) 40 170 fill / 8px 22px stretch;background:none;border-radius:0;color:#e8d7b0;padding:2px 2px;font-weight:700;text-shadow:0 1px 2px #000}
.invbar button:hover,.cbtn button:hover,.big:hover,.treehead button:hover,.barset button:hover{border-image-source:url(assets/ui/btn_hover.webp)}
.invbar button:active,.cbtn button:active,.big:active,.treehead button:active{border-image-source:url(assets/ui/btn_pressed.webp)}
.invbar button.on{border-image-source:url(assets/ui/btn_hover.webp);color:#ffb0a0}
.barset button{width:auto;height:auto;border-width:6px 14px}.barset button.on{color:#9df07a;border-image-source:url(assets/ui/btn_hover.webp)}
.big{font-size:19px;border-width:12px 34px}
.attr button{width:30px;height:30px;border:0;border-radius:0;background:url(assets/ui/smallbtn.webp) center/100% 100% no-repeat;color:#cfefb0;padding-top:4px}
/* cards */
.attr,.skc,.classes button,.corr button,.ttc{border-style:solid;border-color:transparent;border-width:12px;border-image:url(assets/ui/panel_tooltip.webp) 90 fill / 12px stretch;background:none;border-radius:0}
.skc.sel,.classes button:hover,.corr button:hover{filter:drop-shadow(0 0 6px #9df07a);border-color:transparent}
.classes button,.corr button{padding:6px}
.link{border-style:solid;border-color:transparent;border-width:10px 14px;border-image:url(assets/ui/slot_rune.webp) 44 36 fill / 10px 14px stretch;background:none;border-radius:0}
.link.bad{filter:sepia(.6) hue-rotate(-30deg)}
.s4{border:0;background:url(assets/ui/slot_skill.webp) center/100% 100% no-repeat}
/* banner */
#banner{background:url(assets/ui/ribbon.webp) center/100% 100% no-repeat;padding:34px 120px 70px;min-width:min(620px,90vw)}
#banner b{font-size:clamp(26px,4vw,44px)}
/* passive tree */
.tree{border-style:solid;border-color:transparent;border-width:12px;border-image:url(assets/ui/panel_tooltip.webp) 90 / 12px stretch;background:linear-gradient(rgba(12,9,7,.7),rgba(12,9,7,.8)),url(assets/ui/bark.webp) 0 0/300px;background-clip:padding-box;border-radius:0}
#treesvg line.o{stroke:#1a120c;stroke-width:9}#treesvg line.c{stroke:#5b4a3a;stroke-width:5}#treesvg line.c.on{stroke:#8db25a;stroke-width:6}
#treesvg .node image{transition:filter .15s}
#treesvg .node.can image{filter:brightness(1.35) drop-shadow(0 0 6px #d9c38c)}
#treesvg .node:hover image{filter:brightness(1.5)}
#treesvg .node.lock image{filter:brightness(.7) saturate(.6)}
#treesvg .node.on.c-s image{filter:drop-shadow(0 0 7px #ff8a5a)}#treesvg .node.on.c-f image{filter:drop-shadow(0 0 7px #9df07a)}#treesvg .node.on.c-w image{filter:drop-shadow(0 0 7px #8ab0ff)}#treesvg .node.on.c-m image{filter:drop-shadow(0 0 7px #f2d36b)}
.buff,.debuff{display:inline-flex;align-items:center;gap:3px}
#treesvg .node circle{stroke:none!important}
#panel{width:min(760px,calc(100vw - 32px));overflow-x:hidden}
.skwrap{grid-template-columns:200px minmax(0,1fr)}
.skc{padding:2px}
#treesvg{max-height:calc(100vh - 250px)}
#hud{visibility:hidden}body.ingame #hud{visibility:visible}

#es .fill{background:url(assets/ui/fill_mp.webp) left center/auto 100% repeat-x;filter:hue-rotate(60deg) brightness(1.2)}
.cores b{color:#d38cff}
.tt-corr{margin-top:6px;color:#ff5a6a;font-weight:800;letter-spacing:.5px}
.tt-aff .cr{color:#ff7a8a}.tt-aff .cu{color:#c04050}.tt-aff .cv{color:#e0b0ff}
.corrbtn{color:#ff9aa8!important}
.lorelist{display:grid;gap:10px}.lorei{border-left:3px solid #4a6a8a;padding:4px 10px;background:rgba(40,50,70,.18)}.lorei b{font:700 17px "Grenze Gotisch",serif;color:#bcd2ff}.lorei p{margin:4px 0;font-style:italic;color:#d8d0c0}
.loretext{font-size:18px;font-style:italic;max-width:560px;margin:10px auto 18px;line-height:1.5;color:#e6dccb}
.runes-h{font:700 30px serif;letter-spacing:10px;color:#8ab0ff;text-shadow:0 0 12px #8ab0ff88}
.shopg{display:flex;flex-wrap:wrap;gap:8px}.shopg button{border-style:solid;border-color:transparent;border-width:8px 22px;border-image:url(assets/ui/btn.webp) 40 170 fill / 8px 22px stretch;background:none;color:#e8d7b0;font-weight:700;padding:2px}
.shopg button:hover{border-image-source:url(assets/ui/btn_hover.webp)}
.shopres{margin-top:14px;max-width:340px}
.rmod{display:flex;flex-direction:column;gap:4px;padding:10px;border-style:solid;border-color:transparent;border-width:12px;border-image:url(assets/ui/panel_tooltip.webp) 90 fill / 12px stretch}
.rmod b{font:700 19px "Grenze Gotisch",serif}.rmod .bad{color:#ff8a70}
p.good{color:#b4ec84}

.season{display:inline-flex;flex-direction:column;align-items:center;gap:2px;margin:6px auto 4px;padding:16px 70px 34px;background:url(assets/ui/ribbon.webp) center/100% 100% no-repeat;min-width:min(560px,86vw)}
.season .sn{font:700 13px "Alegreya Sans",sans-serif;letter-spacing:3px;text-transform:uppercase;color:#9df07a}
.season b{font:700 30px "Grenze Gotisch",serif;color:#f2d36b;text-shadow:0 0 14px #f2d36b55}
.season small{font-size:13px;color:#cfc4b0;max-width:440px}
.roster{display:grid;gap:8px;max-width:620px;margin:0 auto}
.rch{display:grid;grid-template-columns:56px 1fr auto auto;gap:10px;align-items:center;text-align:left;border-style:solid;border-color:transparent;border-width:10px;border-image:url(assets/ui/panel_tooltip.webp) 90 fill / 10px stretch}
.rch img{width:52px}.rch b{font:700 19px "Grenze Gotisch",serif}.rch small{display:block;color:var(--dim)}
.rch button{border-style:solid;border-color:transparent;border-width:8px 22px;border-image:url(assets/ui/btn.webp) 40 170 fill / 8px 22px stretch;background:none;color:#e8d7b0;font-weight:700;padding:2px}
.rch button:hover{border-image-source:url(assets/ui/btn_hover.webp)}
.rch .del{border:0;border-image:none;width:32px;height:32px;background:url(assets/ui/smallbtn.webp) center/100% 100% no-repeat;color:#ff9a8a;padding-top:4px}
.pmenu{display:flex;flex-direction:column;align-items:center;gap:4px}

/* v8: sets, class book, forms, minions */
.tt-set{margin-top:6px;padding-top:6px;border-top:1px solid #cf7cff33;color:#a98aa0;font-size:13px}.tt-set b{color:#cf7cff}.tt-set .on{color:#e8c2ff}.tt-set .sb{color:#7d6a76}.tt-set .sb.on{color:#dda0ff}
.pw.set{color:#dda0ff}.pw.trait{color:#d9c38c}
.book{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 8px;font-size:13px;color:var(--dim)}.book img{width:34px;height:34px;opacity:.35;filter:grayscale(.8);border-radius:6px}.book img.on{opacity:1;filter:none;box-shadow:0 0 6px #b9f8}
#status .buff.form{color:#f2c06b}#status .buff.minion{color:#9df07a}
.classes{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.classes{grid-template-columns:repeat(2,1fr)}}
.classes .trt{font-style:normal;font-size:12px;color:#d9c38c}
.slot.r-set{border-color:#c46ad6 !important;box-shadow:inset 0 0 0 2px #b45cc8aa,inset 0 0 16px #c46ad655;filter:drop-shadow(0 0 5px #d07ae0) drop-shadow(0 0 1px #f0a8ff)}