/* Layout: one 16:9 stage centered in the viewport; HUD scales with the stage (em units); panels float above. */
:root{
  --bg:#0c1020; --panel:#141a2e; --panel-2:#1c2440; --line:#2d3760;
  --fg:#e9ecf7; --muted:#9aa3c4; --gold:#f2c66d; --gem-red:#d8484a; --gem-blue:#4f8ff0; --gem-teal:#1fb5a8;
  --hp:#d23a3a; --mp:#3a6fe0; --good:#5fd38a; --warn:#f0a040;
  --f-display:"Kanit","Sarabun",system-ui,sans-serif; --f-body:"Sarabun","Kanit",system-ui,sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);overflow:hidden;user-select:none;-webkit-user-select:none}
#app{position:relative;height:100%;width:100%;overflow:hidden}
#stage{position:absolute;left:0;top:0;width:1280px;height:720px;font-size:16px}
#cv{display:block;width:100%;height:100%;background:#7ec8f0}
/* HUD */
#hud{position:absolute;left:0;right:0;bottom:0;height:7.4em;display:flex;align-items:flex-end;justify-content:space-between;padding:0 1.2em .6em;pointer-events:none;background:linear-gradient(to top,rgba(8,10,22,.78),rgba(8,10,22,0))}
.orb{position:relative;width:6.2em;height:6.2em;border-radius:50%;border:.22em solid #3a3046;background:#120d18;overflow:hidden;box-shadow:0 0 0 .14em #8c7a55,inset 0 0 1em #000}
.orb .fill{position:absolute;left:0;right:0;bottom:0;height:100%}
.orb.hp .fill{background:radial-gradient(circle at 35% 30%,#ff7b6b,var(--hp) 45%,#6e1010)}
.orb.mp .fill{background:radial-gradient(circle at 35% 30%,#7fb0ff,var(--mp) 45%,#13286e)}
.orb span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 .9em var(--f-display);text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums}
.mid{flex:1;display:flex;flex-direction:column;align-items:center;gap:.4em;padding:0 1em}
.xp{width:100%;max-width:40em;height:.5em;background:#1b1830;border:1px solid #4a4266;border-radius:.3em;overflow:hidden}
.xp div{height:100%;width:0;background:linear-gradient(90deg,#c9a640,#f6dd84)}
.bar{display:flex;gap:.35em;align-items:flex-end;pointer-events:auto}
.slot{position:relative;width:3.6em;height:3.6em;border:.12em solid #5b5070;border-radius:.4em;background:linear-gradient(#262040,#151225);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.slot .k{position:absolute;left:.2em;top:.05em;font:700 .7em var(--f-display);color:var(--gold)}
.slot .n{font:600 .58em var(--f-display);text-align:center;line-height:1.05;padding:0 .15em;color:#f3e9ff}
.slot .lv{position:absolute;right:.25em;bottom:.1em;font-size:.55em;color:var(--muted)}
.slot .cd{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(0,0,0,.65)}
.slot.empty .n{color:#6a6386}
.slot.nomana{border-color:#3355aa;box-shadow:inset 0 0 .8em rgba(60,90,220,.6)}
.slot.skill{border-color:#8a3a3c}
.slot.flask{width:2.4em}
.slot.flask .ch{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(#ff6a5a,#9c1d1d)}
.slot.flask.m .ch{background:linear-gradient(#6aa0ff,#1d3a9c)}
.sep{width:.5em}
.gembtn{height:3.6em;padding:0 .8em;border:.12em solid #8c7a55;border-radius:.4em;background:linear-gradient(#3a2d1a,#1d160c);color:var(--gold);font:700 .8em var(--f-display);cursor:pointer;display:flex;align-items:center;gap:.3em}
.gembtn b{background:var(--gem-teal);color:#04201d;border-radius:1em;padding:0 .45em;font-size:.85em}
#top{position:absolute;left:1em;top:.7em;display:flex;gap:.8em;align-items:center;font:600 .9em var(--f-display);text-shadow:0 1px 2px #000;pointer-events:none}
#top .zone{color:#fff}
#top .lvl{background:rgba(10,12,30,.6);padding:.1em .6em;border-radius:1em;color:var(--gold)}
#top .emp{color:#ffb04a}
#quest{position:absolute;left:1em;top:2.4em;font:500 .8em var(--f-display);color:#f6e7c4;text-shadow:0 1px 2px #000;pointer-events:none;max-width:40em}
#bossbar{position:absolute;left:50%;top:.8em;transform:translateX(-50%);width:34em;text-align:center;pointer-events:none}
#bossMarks{position:absolute;left:5%;right:4%;top:22%;bottom:22%;pointer-events:none}#bossMarks i{position:absolute;top:-25%;bottom:-25%;width:2px;background:#ffe7a0;box-shadow:0 0 4px #000;opacity:.85}#bossMarks i.done{opacity:.25}#bossMarks i b{position:absolute;top:-1.25em;left:50%;transform:translateX(-50%);font:700 .62em var(--f-display);color:#ffe7a0;text-shadow:0 1px 2px #000;white-space:nowrap}
#bossbar .bst{margin-top:.15em;min-height:1.1em;font:700 .78em var(--f-display);letter-spacing:.06em}#bossbar .bst span{display:inline-block;margin:0 .25em;padding:0 .45em;border-radius:.4em;background:#000a;color:#fff}#bossbar.p2 .nm{color:#ff5d4a}#bossbar.flash{animation:bossflash .7s}@keyframes bossflash{0%,100%{filter:none}40%{filter:brightness(2) drop-shadow(0 0 10px #ff6a3c)}}
#bossbar .nm{font:700 1.05em var(--f-display);color:#ff9a3c;text-shadow:0 2px 3px #000;letter-spacing:.04em}
#bossbar .bg{height:.8em;background:#2a0d0d;border:.12em solid #8c6a35;border-radius:.2em;overflow:hidden;margin-top:.2em}
#bossbar .bg div{height:100%;background:linear-gradient(#e0473b,#8a1d17);width:100%}
#toast{position:absolute;left:50%;top:22%;transform:translateX(-50%);font:600 1.05em var(--f-display);color:#fff;text-shadow:0 2px 4px #000;background:rgba(10,12,30,.6);padding:.3em 1em;border-radius:1em;pointer-events:none;opacity:0;transition:opacity .25s;white-space:nowrap}
#toast.on{opacity:1}
#dead{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(40,0,0,.45);font:700 2.6em var(--f-display);color:#e8c8a0;letter-spacing:.05em;text-shadow:0 3px 6px #000;pointer-events:none}
/* overlays (not scaled) */
.ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(6,8,18,.72);padding:16px;z-index:5}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6);max-width:920px;width:100%;max-height:100%;overflow:auto;padding:20px}
.card h1{font:700 2rem/1.1 var(--f-display);margin:0 0 4px;color:var(--gold);letter-spacing:.02em}
.card h2{font:700 1.15rem var(--f-display);margin:0 0 10px;color:var(--fg)}
.card p{color:var(--muted);margin:0 0 12px;line-height:1.55}
kbd{font:600 .8rem var(--f-display);background:var(--panel-2);border:1px solid var(--line);border-bottom-width:3px;border-radius:5px;padding:1px 7px;color:var(--fg);min-width:1.6em;text-align:center}
.btn{font:700 1rem var(--f-display);background:linear-gradient(#e0b04e,#a87a22);color:#241604;border:0;border-radius:8px;padding:10px 22px;cursor:pointer}
.btn.ghost{background:var(--panel-2);color:var(--fg);border:1px solid var(--line)}
.btn:focus-visible,.slot:focus-visible,.gembtn:focus-visible,.it:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* gem panel */
.gp{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px}
@media (max-width:720px){.gp{grid-template-columns:1fr}}
.gp-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.lbl{font:600 .72rem var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.sk{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);margin-bottom:8px}
.sk-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.key{font:700 .9rem var(--f-display);color:var(--gold);width:1.4em}
.gem{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:7px;border:1px dashed #4a5487;color:var(--muted);cursor:pointer;font-size:.9rem;background:transparent;font-family:var(--f-body)}
.gem.has{border-style:solid;color:var(--fg);background:#0f1426}
.gem.skill.has{border-color:var(--gem-red)}
.gem.sup.has{border-color:var(--gem-blue)}
.gem.target{box-shadow:0 0 0 2px var(--gold)}
.hex{width:14px;height:14px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);flex:none}
.hex.r{background:var(--gem-red)}.hex.b{background:var(--gem-blue)}.hex.t{background:var(--gem-teal)}.hex.g{background:var(--gold);clip-path:circle(50%)}
.socks{display:flex;gap:6px;flex-wrap:wrap;padding-left:2em}
.stat{padding-left:2em;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tags{display:flex;gap:4px;flex-wrap:wrap}
.tag{font-size:.68rem;padding:1px 6px;border-radius:9px;background:#26305a;color:#b8c3ef}
.inv{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow:auto;padding-right:4px}
.it{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);cursor:pointer;color:var(--fg);font-family:var(--f-body);font-size:.92rem;text-align:left}
.it.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.it small{color:var(--muted);margin-left:auto}
.detail{margin-top:12px;padding:10px 12px;border-radius:8px;background:#0f1426;border:1px solid var(--line);font-size:.88rem;line-height:1.5;color:var(--muted);min-height:70px}
.detail b{color:var(--fg)}
.msg{min-height:1.4em;color:var(--warn);font-size:.88rem;margin-top:6px}
.choices{display:grid;gap:8px;margin:12px 0}
.choice{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);cursor:pointer;color:var(--fg);text-align:left;font-family:var(--f-body)}
.choice:hover{border-color:var(--gold)}
.choice span{color:var(--muted);font-size:.85rem}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;font-size:.88rem}.stats div{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-variant-numeric:tabular-nums}.stats b{color:var(--fg)}
/* touch */
#touch{position:absolute;inset:0;pointer-events:none;z-index:3}
#touch button{pointer-events:auto;position:absolute;width:58px;height:58px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(20,24,50,.45);color:#fff;font:700 15px var(--f-display);touch-action:none}
@media (prefers-reduced-motion:reduce){#toast{transition:none}}

.ic{display:inline-block;flex:none;border-radius:6px;background-repeat:no-repeat}
.slot .ico{position:absolute;inset:0;border-radius:0;opacity:.95}
.slot.has-ico .n{position:absolute;bottom:.05em;left:0;right:0;font-size:.5em;text-shadow:0 1px 2px #000,0 0 3px #000}
.slot .k{z-index:1;text-shadow:0 1px 2px #000}.slot .lv{z-index:1;text-shadow:0 1px 2px #000;color:#cfe0ff}.slot .cd{z-index:2}
.slot.flask .ch{top:0;bottom:auto;background:rgba(8,8,20,.7)!important}
#quota{position:absolute;right:1em;top:.7em;font:600 .85em var(--f-display);color:#e6d2ff;text-shadow:0 1px 2px #000;background:rgba(20,10,40,.55);padding:.15em .7em;border-radius:1em;pointer-events:none}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 1.1rem var(--f-display);color:var(--gold);background:var(--bg);z-index:9}
.uniq{color:#e0893a}.uniqtxt{color:#f0b070;font-style:italic}
.cls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 16px}
.cls div{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--panel-2);font-size:.9rem}
.cls div.on{border-color:var(--gold)}.cls div small{display:block;color:var(--muted)}

.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 26px;margin:14px 0 12px}
.keys section{display:flex;flex-direction:column;gap:7px;min-width:0}
.keys h3{margin:0 0 2px;font:600 .75rem var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.keys div{display:grid;grid-template-columns:6.6em 1fr;align-items:center;gap:10px;font-size:.92rem;line-height:1.35}
.keys .kk{display:flex;gap:4px;align-items:center;justify-content:flex-end;color:var(--muted);font-size:.8rem;white-space:nowrap}
.tip{font-size:.88rem;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin:0 0 16px!important}

.bindgrp{margin:10px 0 4px;font:600 .75rem var(--f-display);letter-spacing:.08em;color:var(--gold)}
.bindrow{display:grid;grid-template-columns:minmax(0,1fr) 9em 9em;gap:8px;align-items:center;padding:2px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.bindbtn{font:600 .85rem var(--f-display);background:var(--panel-2);color:var(--fg);border:1px solid var(--line);border-bottom-width:3px;border-radius:6px;padding:5px 8px;cursor:pointer;min-height:2.1em}
.bindbtn.wait{border-color:var(--gold);color:var(--gold);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.5}}
@media (max-width:520px){.bindrow{grid-template-columns:1fr 1fr;}.bindrow span{grid-column:1/-1}}

.dbg-sec{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px;background:var(--panel-2)}
.dbg-sec h3{margin:0 0 8px;font:600 .78rem var(--f-display);letter-spacing:.08em;color:var(--gold)}
.dbg-sec label{display:flex;gap:6px;align-items:center;font-size:.9rem;margin:3px 0}
.dbg-sec select,.dbg-sec input[type=number]{background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font:inherit;font-size:.88rem;max-width:100%}
.dbg-sec .btn{padding:6px 12px;font-size:.85rem}
.dbgb{background:#b0263a;color:#fff;padding:.05em .6em;border-radius:1em;font-size:.8em;letter-spacing:.06em}
.bindopt{display:flex;gap:8px;align-items:center;font-size:.92rem;padding:8px 10px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;margin:4px 0 6px}
.dbg-zones{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px}.dbg-zones .btn{text-align:left;font-size:.82rem;padding:6px 10px}
.slot.flask.pulse{animation:fpulse .5s}@keyframes fpulse{0%{box-shadow:0 0 0 0 rgba(255,230,140,.9)}100%{box-shadow:0 0 0 .6em rgba(255,230,140,0)}}
.slot.flask .lv{font-size:.5em;right:.15em}

/* ===================== Themed UI (art pack) ===================== */
.uic{display:inline-block;flex:none;background-image:var(--ui-icons);background-repeat:no-repeat;border-radius:6px}
.card{background:none;border-style:solid;border-width:58px 24px 22px 24px;border-image:var(--ui-panel) 105 46 39 45 fill stretch;border-radius:0;box-shadow:0 24px 70px rgba(0,0,0,.7);padding:6px 10px 10px}
.card h1,.card h2{text-shadow:0 2px 4px #000}
.gp-head{margin-top:-46px;margin-bottom:18px;min-height:40px}
.gp-head h2{color:#f6e2b0;font-size:1.25rem;letter-spacing:.03em}
.btn{background:var(--ui-btn) center/100% 100% no-repeat;color:#f6e7c4;text-shadow:0 1px 2px #000;border:0;border-radius:0;padding:12px 26px;min-height:44px;transition:transform .08s}
.btn:hover{background-image:var(--ui-btn-hover)}
.btn:active{background-image:var(--ui-btn-press);transform:translateY(1px)}
.btn:disabled{background-image:var(--ui-btn-off);color:#9a9aa6;cursor:default}
.btn.ghost{background:var(--ui-btn) center/100% 100% no-repeat;color:#e9ecf7;border:0;padding:10px 20px}
.btn.ghost:hover{background-image:var(--ui-btn-hover)}
.btn.primary{background-image:var(--ui-btn-hover);color:#ffe9b0}
/* HUD */
#hud{height:8.4em;background:linear-gradient(to top,rgba(6,5,10,.85),rgba(6,5,10,0))}
.orb{width:7.4em;height:7.8em;border:0;border-radius:0;background:var(--ui-orb-hp) center/contain no-repeat;box-shadow:none;overflow:visible}
.orb.mp{background-image:var(--ui-orb-mp)}
.orb .fill{display:none}
.orb .mask{position:absolute;left:21.6%;top:20.9%;width:56.4%;height:55.2%;border-radius:50%;overflow:hidden;pointer-events:none}
.orb .mask canvas.liq{position:absolute;inset:0;width:100%;height:100%;display:none}
body.liq-on .orb .mask{background:radial-gradient(circle at 50% 40%,#1a1420,#07050a)}
body.liq-on .orb .mask canvas.liq{display:block}
body.liq-on .orb .mask i{display:none}
.orb .mask i{position:absolute;left:0;right:0;top:0;height:0;background:linear-gradient(rgba(8,6,12,.92),rgba(8,6,12,.82));transition:height .15s}
.orb span{top:-.2em;font-size:.95em;text-shadow:0 1px 3px #000,0 0 6px #000}
.xp{height:1.3em;max-width:34em;border:0;border-radius:0;background:var(--ui-bar-xp) center/100% 100% no-repeat;position:relative;overflow:visible}
.xp div{position:absolute;right:2.4%;top:12%;height:51%;left:auto;background:rgba(8,6,12,.88)}
.slot{border:0;border-radius:0;background:var(--ui-slot) center/100% 100% no-repeat;width:3.7em;height:3.4em}
.slot .ico{inset:14% 13% 15% 13%;border-radius:4px}
.slot.skill,.slot.empty,.slot.nomana{border:0}
.slot.nomana .ico{filter:grayscale(.8) brightness(.6)}
.slot.flask{width:2.6em;background:var(--ui-slot) center/100% 100% no-repeat!important}
.slot.flask .fimg{position:absolute;inset:16%;background-size:contain;background-repeat:no-repeat;background-position:center}
.slot .cd{left:13%;right:13%;bottom:15%;top:auto;max-height:71%}
.slot .k{left:.35em;top:.25em}
.menubtn{position:relative;width:3em;height:3em;border:0;padding:0;background:none;cursor:pointer;pointer-events:auto}
.menubtn .uic{width:100%!important;height:100%!important;background-size:600% 600%!important}
.menubtn b{position:absolute;right:-.3em;top:-.3em;background:var(--gem-teal);color:#04201d;border-radius:1em;padding:0 .4em;font:700 .6em var(--f-display)}
.menubtn small{position:absolute;left:0;right:0;bottom:-.1em;text-align:center;font:700 .55em var(--f-display);color:var(--gold);text-shadow:0 1px 2px #000}
#bossbar{width:36em}
#bossbar .bg{height:2.6em;border:0;background:var(--ui-bar-boss) center/100% 100% no-repeat;position:relative;overflow:visible;margin-top:0}
#bossbar .bg div{position:absolute;right:4%;top:30%;height:38%;background:rgba(8,6,12,.9);width:auto}
#buffs{position:absolute;left:1em;top:3.6em;display:flex;gap:.3em;pointer-events:none}
#buffs .bf{position:relative;width:1.9em;height:1.9em}
#buffs .bf .uic{width:100%!important;height:100%!important;background-size:600% 600%!important}
#buffs .bf b{position:absolute;right:-.2em;bottom:-.2em;font:700 .55em var(--f-display);color:#fff;text-shadow:0 1px 2px #000}
#quest{top:2.3em}
/* inputs */
input[type=text].txt{background:#0f0d14;color:var(--fg);border:1px solid #5a4a30;border-radius:6px;padding:9px 12px;font:600 1rem var(--f-display);width:100%;max-width:280px}
/* main menu & creation */
.menu-ov{background:radial-gradient(ellipse at center,rgba(10,8,20,.35),rgba(4,4,10,.92))}
.title{font:700 clamp(2.2rem,6vw,3.6rem)/1 var(--f-display);color:#ffd67a;letter-spacing:.04em;text-align:center;text-shadow:0 0 18px rgba(255,170,60,.45),0 3px 0 #5a2a08,0 6px 14px #000;margin:0}
.subtitle{text-align:center;color:#d9c9a0;margin:.4rem 0 1.2rem;text-shadow:0 1px 3px #000}
.slots{display:grid;gap:10px}
.slotcard{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 14px;border:1px solid #4a3c26;border-radius:8px;background:linear-gradient(#1c1720,#141118);cursor:pointer;color:var(--fg);text-align:left;font-family:var(--f-body)}
.slotcard:hover{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 18px rgba(242,198,109,.25)}
.slotcard .pv{width:64px;height:64px;border-radius:8px;background:#0c0a10 center/contain no-repeat;border:1px solid #3a2e1e}
.slotcard b{font:600 1.05rem var(--f-display);color:#f6e2b0}
.slotcard small{display:block;color:var(--muted)}
.slotcard .del{background:none;border:1px solid #5a2a2a;color:#e08080;border-radius:6px;padding:4px 10px;cursor:pointer;font:600 .8rem var(--f-display)}
.create{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px}
@media (max-width:720px){.create{grid-template-columns:1fr}}
.preview{border:1px solid #4a3c26;border-radius:10px;background:radial-gradient(ellipse at 50% 85%,rgba(255,200,120,.18),rgba(0,0,0,0) 60%),linear-gradient(#1a1520,#0d0b12);display:flex;align-items:flex-end;justify-content:center;min-height:300px;position:relative;overflow:hidden}
.preview canvas{width:100%;max-width:340px;height:auto}
.choicegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:6px 0 14px}
.pick{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;border:1px solid #3a3040;border-radius:8px;background:#15121b;color:var(--fg);cursor:pointer;font:600 .9rem var(--f-display)}
.pick.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 16px rgba(242,198,109,.25)}
.pick[disabled]{opacity:.45;cursor:default}
.pick small{color:var(--muted);font:400 .75rem var(--f-body);text-align:center}

/* art pack 2: menu scene, logo, class portraits */
.menu-ov{background:linear-gradient(rgba(6,4,12,.25),rgba(4,4,10,.7)),var(--ui-menu-bg,none) center/cover no-repeat,#07060c}
.logo{position:relative;width:min(260px,60vw);aspect-ratio:464/412;margin:-70px auto 0;background:var(--ui-logo) center/contain no-repeat;filter:drop-shadow(0 8px 18px rgba(0,0,0,.7))}
.logo .title{position:absolute;left:0;right:0;bottom:12%;font-size:clamp(1.3rem,3.2vw,1.9rem);text-shadow:0 2px 0 #3a1a04,0 0 10px #000}
.preview .clsart{position:absolute;inset:6px;background:center 20%/contain no-repeat;opacity:.38;filter:saturate(.8) blur(.3px)}
.preview canvas{position:relative}
.pick .pimg{width:44px;height:64px;background:center/contain no-repeat}
@media (max-height:620px){.logo{width:150px;margin-top:-40px}}
.menu-ov #setBtn,.menu-ov #helpBtn{min-width:130px;padding:10px 18px}

/* cinematic letterbox */
#cine{position:absolute;inset:0;pointer-events:none;z-index:6}
#cine i{position:absolute;left:0;right:0;height:0;background:#000;transition:height .35s}
#cine .bt{top:0}#cine .bb{bottom:0}
#cine.on i{height:11%}#cine.ult i{height:6%}
#cine .ct{position:absolute;left:0;right:0;top:20%;text-align:center;opacity:0;transform:translateY(10px);transition:.4s}
#cine.on .ct{opacity:1;transform:none}
#cine .ct small{display:block;font:600 1rem var(--f-display);color:#e9c98a;letter-spacing:.2em}
#cine .ct b{font:700 clamp(1.6rem,4vw,2.8rem) var(--f-display);color:#fff3d6;text-shadow:0 0 18px rgba(255,140,60,.7),0 3px 0 #3a1a04}
/* build windows (C / I / P) — batch 05 */
.card.bd{max-width:1180px;padding:16px}
.card.bd-wide{max-width:1280px}
.bd-tabs{display:flex;gap:6px;flex-wrap:wrap}
.bd-tabs button{font:600 .95rem var(--f-display);padding:8px 14px;min-height:44px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--fg);cursor:pointer}
.bd-tabs button.on{background:var(--gold);color:#1a1206;border-color:var(--gold)}
.bd3{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:980px){.bd3{grid-template-columns:1fr 1fr}.bd3>aside{grid-column:1/-1}}
@media (max-width:640px){.bd3{grid-template-columns:1fr}}
.bd-detail{position:sticky;top:0;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px;min-height:200px;font-size:.92rem;line-height:1.5}
.bd-detail h3{font:700 1.05rem var(--f-display);margin:4px 0 6px;color:var(--fg)}
.bd-detail p{margin:0 0 8px}
.txt{background:#0e1326;border:1px solid var(--line);border-radius:8px;color:var(--fg);padding:9px 10px;font:inherit;min-height:40px;width:100%;box-sizing:border-box}
select{background:#0e1326;border:1px solid var(--line);border-radius:8px;color:var(--fg);padding:8px;font:inherit;min-height:40px}
.actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.actions .btn{padding:8px 14px;font-size:.88rem;min-height:40px}
.btn.primary{background:var(--gold);color:#1a1206}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.note{border-left:3px solid #6fb3ff;background:rgba(111,179,255,.08);padding:8px 10px;border-radius:6px;margin:8px 0}
.note.warn{border-left-color:#ff8a6a;background:rgba(255,120,90,.08)}
.up{color:#8fe08a}.down{color:#ff8f7a}.muted{color:var(--muted)}
table.cmp{width:100%;border-collapse:collapse;margin:8px 0;font-size:.85rem}
table.cmp th,table.cmp td{border-bottom:1px solid var(--line);padding:4px 6px;text-align:right}
table.cmp th:first-child,table.cmp td:first-child{text-align:left}
.sk.tgt{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.metrics{display:flex;flex-wrap:wrap;gap:8px;font-size:.8rem;color:var(--muted)}.metrics b{color:var(--fg)}
.sockcount{font-size:.75rem;color:var(--muted);align-self:center}
.it small{display:block;color:var(--muted);font-size:.72rem}
.ps-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.ps-top .txt{flex:1;min-width:180px;width:auto}
.ps-pts{min-width:260px}.ps-zoom{display:flex;gap:6px;align-items:center;color:var(--muted)}
.ps-legend{color:var(--muted);font-size:.8rem;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.lg{display:inline-block;width:12px;height:12px;border-radius:50%}.lg.own{background:var(--gold)}.lg.can{border:2px solid #7fe3c2}
.ps-main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:12px}
@media (max-width:860px){.ps-main{grid-template-columns:1fr}}
.ps-view{height:min(44vh,520px);overflow:auto;border:1px solid var(--line);border-radius:10px;background:radial-gradient(circle at 50% 50%,#1b2238,#0b0f1c);cursor:grab;touch-action:none}
#psSvg{display:block}
#psSvg line{stroke:#3c475e;stroke-width:3}
#psSvg line.on{stroke:#f1c678;stroke-width:7}
#psSvg line.path{stroke:#93c6eb;stroke-width:5;stroke-dasharray:10 6}
#psSvg .nd circle,#psSvg .nd rect{fill:#141a2a;stroke:var(--c);stroke-width:3;cursor:pointer}
#psSvg .nd.can circle,#psSvg .nd.can rect{stroke-width:5;fill:#1d2a35}
#psSvg .nd.own circle,#psSvg .nd.own rect{fill:var(--c);stroke:#fff3c4}
#psSvg .nd.onpath circle,#psSvg .nd.onpath rect{stroke:#93c6eb;stroke-width:6}
#psSvg .nd.sel circle,#psSvg .nd.sel rect{stroke:#fff;stroke-width:7}
#psSvg .nd.dim{opacity:.22}
#psSvg .nd.dead circle,#psSvg .nd.dead rect{stroke-dasharray:5 4}
#psSvg .nd text{fill:#fff;font:700 16px var(--f-display);text-anchor:middle;pointer-events:none}
#psSvg .nd.own text{fill:#1a1206}
#psSvg .nd:focus{outline:none}#psSvg .nd:focus circle,#psSvg .nd:focus rect{stroke:#fff;stroke-width:7}
#psSvg .brl{font:700 28px var(--f-display);text-anchor:middle;paint-order:stroke;stroke:#0b0f1c;stroke-width:6px}
.ps-res{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow:auto}
.ps-res button{text-align:left;min-height:44px;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:#0e1326;color:var(--fg);cursor:pointer;font:inherit;font-size:.85rem}
.ps-sum{margin-top:10px;font-size:.88rem}.ps-sum .tag{margin:2px}.tag.off{opacity:.5;text-decoration:line-through}
.branchpill{font:600 .8rem var(--f-display)}
.card.bd{max-height:calc(100vh - 16px)}
.card.bd .gp-head{margin-top:0;margin-bottom:10px}
.inv .it .gdesc{display:block;font-size:.72rem;opacity:.75;line-height:1.25;white-space:normal;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ===================== UI skin — batch-07 "Forge" (iron + gold) =====================
   Code-native panels: no texture behind text, gold top edge, diamond corners, 44px controls. */
:root{--bg:#11171d;--panel:#1b2530;--panel-2:#22303c;--line:#54616c;--fg:#eef2f4;--muted:#b9c4ce;--gold:#edc373;--accent:#e8a188;--good:#91dab5;--warn:#ffa9a4;--radius:14px}
.ov{background:rgba(7,10,14,.74);backdrop-filter:blur(2px)}
.card{border:1px solid var(--gold)!important;border-image:none!important;border-radius:var(--radius)!important;padding:24px 22px 18px!important;
  background:linear-gradient(160deg,#22303c 0%,#1b2530 38%,#151d26 100%)!important;box-shadow:0 18px 50px #000a,inset 0 1px 0 #ffffff10!important;
  max-height:calc(100vh - 32px);overflow:auto;position:relative;scrollbar-color:#54616c transparent}
.card::before{content:'';position:sticky;display:block;top:-24px;margin:-24px -22px 18px;height:2px;background:linear-gradient(90deg,transparent,var(--gold) 20%,#fff3cf 50%,var(--gold) 80%,transparent);box-shadow:0 0 12px #edc37388;pointer-events:none;z-index:3}
.card h1{color:var(--gold);text-shadow:0 2px 0 #0008}
.card h2{color:var(--fg);font-size:1.3rem;text-shadow:none}
.card p{color:var(--muted);font-size:.98rem}
.gp-head{margin-top:0!important;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #54616c88;min-height:44px}
.gp-head h2{color:var(--gold);margin:0}
.lbl{font:600 .8rem var(--f-display);letter-spacing:.06em;color:var(--gold);text-transform:none;margin:0 0 8px}
/* buttons */
.btn,.btn.ghost{background:var(--panel-2)!important;background-image:none!important;color:var(--fg);border:1px solid var(--line)!important;border-radius:8px!important;
  min-height:44px;padding:9px 16px;font:600 .95rem var(--f-display);text-shadow:none;transition:border-color .15s,background .15s,transform .05s}
.btn:hover,.btn.ghost:hover{border-color:var(--gold)!important;background:#2a3a48!important}
.btn:active{transform:translateY(1px)}
.btn.primary,.btn.primary:hover{background:linear-gradient(#f3d08a,#d9a94f)!important;color:#1a1206;border-color:#f3d08a!important;font-weight:700}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn:disabled:hover{border-color:var(--line)!important;background:var(--panel-2)!important}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.actions .btn{padding:8px 14px;font-size:.9rem;min-height:44px}
/* inputs */
.txt,select,.card input[type=text]{min-height:44px;background:#11171d;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font:1rem var(--f-body)}
.txt:focus,select:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
input[type=range],input[type=checkbox]{accent-color:var(--gold)}
/* tabs */
.bd-tabs button{background:#11171d;border:1px solid var(--line);border-radius:8px;color:var(--muted);min-height:44px;font:600 .95rem var(--f-display);padding:8px 16px}
.bd-tabs button:hover{border-color:var(--gold);color:var(--fg)}
.bd-tabs button.on{background:linear-gradient(#f3d08a,#d9a94f);color:#1a1206;border-color:#f3d08a}
.bd-tabs kbd,.card kbd{border:1px solid currentColor;border-radius:4px;padding:0 5px;font-size:.72rem;opacity:.75;margin-left:4px}
/* sections & lists */
.bd3>section,.ps-main>.ps-view{background:#151d26;border:1px solid #54616c99;border-top:2px solid var(--gold);border-radius:12px;padding:14px}
.bd-detail{background:#151d26!important;border:1px solid #54616c99!important;border-top:2px solid var(--gold)!important;border-radius:12px!important;padding:14px!important;font-size:.95rem}
.bd-detail h3{color:var(--gold)}
.it{min-height:56px;background:#11171d;border:1px solid #54616c99;border-radius:8px;padding:8px 10px;gap:10px;transition:border-color .12s}
.it:hover{border-color:var(--gold)}
.it.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 14px #edc37333}
.it small{font-size:.8rem;color:var(--muted)}
.inv .it .gdesc{font-size:.78rem}
.sk{background:#11171d;border:1px solid #54616c99;border-radius:10px;padding:12px}
.sk.tgt{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset,0 0 16px #edc37322}
.sk .key{display:inline-grid;place-items:center;min-width:30px;height:30px;border:1px solid var(--gold);border-radius:6px;color:var(--gold);font:700 .85rem var(--f-display)}
.gem{min-height:40px;border-radius:8px;border:1px dashed #54616c;background:#151d26;color:var(--muted)}
.gem:hover{border-color:var(--gold);color:var(--fg)}
.gem.has{background:#1b2530;color:var(--fg)}
.gem.target{box-shadow:0 0 0 2px var(--gold)}
.tag{display:inline-block;border:1px solid var(--line);border-radius:20px;padding:1px 8px;font-size:.72rem;color:var(--muted)}
.metrics{font-size:.88rem;color:var(--muted)}.metrics b{color:var(--fg)}
.note{border:1px solid #54616c99;border-left:3px solid var(--good);background:#11171d;border-radius:8px;padding:10px 12px}
.note.warn{border-left-color:var(--warn);background:#11171d}
.msg{color:var(--gold);font-size:.92rem;min-height:1.5em}
.stats{font-size:.92rem}
table{border-collapse:collapse}.bd-detail td,.bd-detail th{padding:6px 4px;border-bottom:1px solid #54616c66}
/* pick / choices */
.choice{min-height:56px;background:#11171d;border:1px solid #54616c99;border-radius:10px;padding:10px 14px;transition:border-color .12s}
.choice:hover:not([disabled]){border-color:var(--gold);background:#1b2530}
.choice b{font:600 1rem var(--f-display);color:var(--fg)}
.choice span{font-size:.86rem}
#pickOv .card{max-width:560px}
/* main menu */
.slotcard{background:#11171d;border:1px solid #54616c99;border-radius:10px;min-height:72px}
.slotcard:hover{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 18px #edc37333}
.slotcard b{color:var(--fg)}
.slotcard .del{min-height:36px;border-color:#9b4a46;color:var(--warn)}
.choicegrid>*{background:#11171d;border:1px solid #54616c99;border-radius:10px}
/* passive */
.ps-top{gap:8px;align-items:center}
.ps-view{background:radial-gradient(ellipse at center,#1b2530,#0d1218)!important}
.ps-sum{color:var(--muted);font-size:.9rem}
/* settings / debug rows */
#setList button,#dbgBody button:not(.btn){min-height:40px;border-radius:8px;background:#11171d;border:1px solid #54616c99;color:var(--fg)}
#setList button:hover{border-color:var(--gold)}
/* HUD chrome */
#top .zone,#top .lvl,#quest,#quota{background:#11171dcc;border:1px solid #54616c99;border-radius:20px;padding:3px 12px;backdrop-filter:blur(2px)}
#top .zone{border-color:#edc37399;color:var(--gold)}
#toast{background:#1b2530f0;border:1px solid var(--gold);border-radius:10px;box-shadow:0 8px 30px #0008}
#bossbar{background:#11171ddc;border:1px solid #54616c;border-top:2px solid #e86a5f;border-radius:10px;padding:8px 16px}
.bf{background:#11171dcc;border:1px solid #54616c99;border-radius:8px}
@media (max-width:1100px){.card{padding:18px 14px 14px!important}}
.card.bd,.card{max-height:calc(100vh - 32px)!important}
#startOv .logo{width:170px;margin:4px auto 0}#startOv .logo .title{bottom:4%}
#startOv .logo .title{white-space:nowrap;left:-60px;right:-60px}
/* gem type frames: skill = red rounded square, support = blue circle */
.ic.gi-s{border-radius:9px;box-shadow:0 0 0 2px #c9584a,0 0 8px #c9584a66}
.ic.gi-p{border-radius:50%;box-shadow:0 0 0 2px #5b97f0,0 0 8px #5b97f066}
.choice{display:grid!important;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
.choice b,.choice span{grid-column:2}
.choice .ch-ic{grid-row:1/span 2;grid-column:1;font-style:normal;display:grid;place-items:center}
.sk .gem .ic,.it .ic{flex-shrink:0}
.sstat{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0}
.sstat .dt,.sstat .st{font-size:.78rem;border:1px solid color-mix(in srgb,var(--c,#888) 55%,transparent);color:var(--c,#ddd);background:color-mix(in srgb,var(--c,#888) 10%,#11171d);border-radius:6px;padding:1px 7px}
.sstat b{color:#fff;font-weight:700}
.sstat .crit{--c:#edc373}
#optLootMin{min-width:280px}
/* gem bag grouping + level requirements */
.gchips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.gchip{min-height:36px;padding:4px 12px;border-radius:18px;border:1px solid var(--line);background:#11171d;color:var(--muted);font:600 .85rem var(--f-display);cursor:pointer}
.gchip b{color:var(--fg);margin-left:3px}.gchip:hover{border-color:var(--gold)}
.gchip.on{background:linear-gradient(#f3d08a,#d9a94f);color:#1a1206;border-color:#f3d08a}.gchip.on b{color:#1a1206}
.ggrp{display:flex;align-items:center;gap:8px;margin:12px 0 4px;padding-bottom:4px;border-bottom:1px solid #54616c66;color:var(--gold);font:600 .86rem var(--f-display)}
.ggrp small{color:var(--muted);margin-left:auto}
.ggrp span{font-size:.68rem;padding:1px 7px;border-radius:10px;color:#fff}
.gk-s{background:#a8463d}.gk-p{background:#3e6fb8}.gk-u{display:none}
.reqbad,.reqok{font-size:.7rem;padding:0 6px;border-radius:8px;margin-left:4px;vertical-align:1px}
.reqbad{background:#5a2420;color:#ffb0a8;border:1px solid #a8463d}.reqok{background:#1d3328;color:#9fe3bd;border:1px solid #2f6a4c}
.reqline{font-size:.88rem;color:var(--good);margin:4px 0}.reqline.bad{color:var(--warn)}
.sk.locked{opacity:.75;border-color:#a8463d!important}
.lockline{font:600 .8rem var(--f-display);color:#ffb0a8;background:#5a242055;border-radius:6px;padding:2px 8px;margin-bottom:4px}
.slot .lockv{position:absolute;inset:14% 13% 15% 13%;display:grid;place-items:center;background:rgba(10,8,12,.72);color:#ffb0a8;font:700 .6em var(--f-display);z-index:3;border-radius:4px}
.inv>*{flex-shrink:0}#gpInv{max-height:calc(100vh - 260px)}#chInv{max-height:calc(100vh - 300px)}.inv .it>span{min-width:0}
#psSvg .pic{pointer-events:none}
#psSvg .nd:not(.own) .pic{opacity:.72;filter:grayscale(.35)}
#psSvg .nd.can .pic{opacity:.85;filter:none}
#psSvg .nd .ok{font-size:11px;fill:#91dab5;font-weight:700}
/* waypoint window */
.wp-main{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.6fr);gap:14px;align-items:start}
.wp-list{display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 170px);overflow:auto;background:#151d26;border:1px solid #54616c99;border-top:2px solid var(--gold);border-radius:12px;padding:10px}
.wp-zone{display:flex;gap:10px;align-items:center;text-align:left;min-height:64px;padding:6px 10px;background:#11171d;border:1px solid #54616c99;border-radius:10px;color:var(--fg);cursor:pointer}
.wp-zone:hover{border-color:var(--gold)}.wp-zone.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 14px #edc37333}
.wp-zone b{font:600 1rem var(--f-display)}.wp-zone small{display:block;color:var(--muted);font-size:.8rem}
.wp-tag{font-style:normal;font-size:.7rem;padding:0 6px;border-radius:8px;background:#5a2420;color:#ffb0a8;border:1px solid #a8463d}.wp-tag.here{background:#1d3328;color:#9fe3bd;border-color:#2f6a4c}
.wp-pic{flex-shrink:0;border-radius:10px;background:radial-gradient(circle at 50% 60%,#2a3644,#11171d);border:1px solid #54616c99;object-fit:contain}
.wp-pic.boss{border-color:#a8463d}.wp-pic.big{border:1px solid #a8463d;box-shadow:0 0 18px #a8463d55}
.wp-pic.none{display:grid;place-items:center;color:var(--muted)}
.wp-detail{max-height:calc(100vh - 170px);overflow:auto}
.wp-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:10px}
.wp-boss{display:flex;gap:14px;align-items:flex-start;padding:10px;background:#11171d;border:1px solid #54616c99;border-radius:10px;margin-bottom:12px}
.wp-boss h3{margin:0}.wp-st{margin:4px 0;color:var(--fg)}
.wp-els{display:flex;gap:5px;flex-wrap:wrap;margin:4px 0}
.wp-el{font-size:.78rem;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);color:var(--c);background:color-mix(in srgb,var(--c) 10%,#11171d);border-radius:6px;padding:1px 7px}
.wp-sk{margin:0;padding-left:16px;font-size:.88rem}.wp-sk li{margin:3px 0}.wp-sk small{display:block;color:var(--muted)}
.wp-mons{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-bottom:8px}
.wp-mon{display:flex;gap:8px;align-items:center;padding:6px;background:#11171d;border:1px solid #54616c99;border-radius:10px}
.wp-mon small{display:block;color:var(--muted);font-size:.78rem}
#wpTiers .wp-tiers{display:flex;gap:6px;margin:0 0 10px}
@media (max-width:900px){.wp-main{grid-template-columns:1fr}.wp-boss{flex-direction:column}}
body.story #hud,body.story #top,body.story #bossbar,body.story #quest,body.story #quota,body.story #buffs,body.story #toast{opacity:0;transition:opacity .2s}
/* ---- Skill Book ---- */
#bookOv .card{max-width:1360px;width:96vw}
.bk-road{display:flex;gap:8px;align-items:center;overflow-x:auto;padding:8px 10px;margin:8px 0 10px;background:linear-gradient(90deg,#1c2440,#141a2e);border:1px solid var(--line);border-radius:12px}
.bk-me{flex:0 0 auto;font-family:var(--f-display);padding:4px 12px;border-right:1px solid var(--line);color:var(--muted)}
.bk-me b{color:var(--gold);font-size:22px;margin-left:4px}
.bk-next{flex:0 0 auto;display:flex;gap:6px;align-items:center;padding:4px 10px 4px 4px;background:#0f1428;border:1px dashed #f2c66d66;border-radius:10px;color:var(--fg);cursor:pointer}
.bk-next span{display:flex;flex-direction:column;text-align:left;font-size:12px;color:var(--gold);line-height:1.15}
.bk-next small{color:var(--fg);font-size:12px}
.bk-main{display:grid;grid-template-columns:236px minmax(0,1fr) 340px;gap:12px;align-items:start;min-height:60vh}
.bk-cats{display:flex;flex-direction:column;gap:4px;position:sticky;top:0}
.bk-cat{display:flex;align-items:center;gap:8px;padding:10px 10px;background:#11172b;border:1px solid var(--line);border-radius:10px;color:var(--fg);cursor:pointer;font-size:15px;text-align:left}
.bk-cat span{width:24px;text-align:center;font-size:18px}
.bk-cat b{margin-left:auto;font-size:12px;color:var(--muted);background:#0006;padding:1px 7px;border-radius:9px}
.bk-cat:hover{border-color:#f2c66d88}
.bk-cat.on{background:linear-gradient(90deg,#3a2e12,#1c2440);border-color:var(--gold);color:var(--gold)}
.bk-center{max-height:68vh;overflow-y:auto;padding-right:4px}
.bk-band{margin:12px 0 6px;font-family:var(--f-display);color:var(--gold);font-size:14px;border-bottom:1px solid var(--line);padding-bottom:3px}
.bk-band:first-child{margin-top:0}
.bk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.bk-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px 10px;background:#121830;border:1px solid var(--line);border-radius:12px;color:var(--fg);cursor:pointer;text-align:center;transition:transform .12s,border-color .12s}
.bk-card:hover{transform:translateY(-2px);border-color:#f2c66daa}
.bk-card.sel{border-color:var(--gold);box-shadow:0 0 0 2px #f2c66d55,0 6px 18px #0008}
.bk-card b{font-size:15px;line-height:1.2}
.bk-card.locked img,.bk-card.locked .gi{filter:grayscale(1) brightness(.55)}
.bk-card.locked b{color:var(--muted)}
.bk-lv{position:absolute;top:6px;left:6px;font-size:11px;font-weight:700;padding:1px 6px;border-radius:7px;background:#000a;color:var(--gold)}
.bk-st{font-style:normal;font-size:12px;padding:2px 8px;border-radius:8px;background:#0006}
.bk-st.on{background:#1d5a37;color:#bff5d2}
.bk-st.have{background:#1d3a66;color:#cfe1ff}
.bk-st.none{color:var(--muted)}
.bk-st.lock{background:#5a2a1a;color:#ffc9a8}
.bk-st.other{background:#33264a;color:#d6c3ff}
.bk-detail{max-height:68vh;overflow-y:auto}
.bk-dh{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.bk-dh h3{margin:0 0 2px;font-size:20px}
.bk-nums{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.bk-nums span{padding:4px 10px;background:#0f1428;border:1px solid var(--line);border-radius:8px;font-size:13px;color:var(--muted)}
.bk-nums b{color:var(--fg)}
.bk-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.bk-slots button{min-height:58px;font-size:13px}
@media (max-width:1100px){.bk-main{grid-template-columns:170px minmax(0,1fr)}.bk-detail{grid-column:1/-1}}
@media (max-width:700px){.bk-main{grid-template-columns:1fr}.bk-cats{flex-direction:row;overflow-x:auto;position:static}.bk-cat{flex:0 0 auto}.bk-slots{grid-template-columns:repeat(2,1fr)}}

/* HUD polish: EXP label, top-left spacing, bigger menu buttons */
#xpTxt{position:absolute;left:0;right:0;top:50%;transform:translateY(-55%);text-align:center;font:700 .62em var(--f-display);color:#fff4d0;text-shadow:0 0 3px #000,0 1px 2px #000;letter-spacing:.04em;pointer-events:none;z-index:1}
#top{gap:.5em;top:.6em}
#quest{top:3.7em}
.menubtn{width:4.1em;height:4.1em;margin:0 .1em}
.menubtn small{font-size:.62em;bottom:-.2em}
.menubtn b{font-size:.7em}

#dead{flex-direction:column;pointer-events:none}
.dead-box{text-align:center;pointer-events:auto}
.dead-box h2{margin:0 0 .2em;font-size:1em}
.dead-box p{margin:0 0 .8em;font:500 .4em var(--f-body);color:#f0d8c0;letter-spacing:0}
.dead-btns{display:flex;gap:.6em;justify-content:center;font-size:.42em;letter-spacing:0}
.dead-btns .btn{min-width:11em;min-height:2.6em}
/* EXP bar: slim custom bar (old ornament image was stretched ~8x wide) */
.xp{height:.62em;max-width:34em;margin:.25em auto .35em;background:linear-gradient(90deg,#b8862e,#f1cf6a 55%,#ffe9a6);border:1px solid #2b2216;border-radius:.4em;box-shadow:0 0 0 1px #8a6a2c,0 2px 5px #000a,inset 0 1px 0 #fff6;overflow:visible;position:relative}
.xp::before,.xp::after{content:"";position:absolute;top:50%;width:.6em;height:.6em;background:#e9c46a;border:1px solid #2b2216;transform:translateY(-50%) rotate(45deg);box-shadow:0 0 4px #000}
.xp::before{left:-.45em}.xp::after{right:-.45em}
.xp div{position:absolute;right:0;top:0;bottom:0;height:auto;left:auto;background:#120e18e6;border-radius:0 .35em .35em 0}
#xpTxt{top:auto;bottom:100%;transform:none;font-size:.6em;margin-bottom:.15em;color:#f3dfa8}

.snd-box{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-bottom:6px}
.snd-row{display:flex;align-items:center;gap:8px;font-size:14px}
.snd-row span{min-width:68px;color:var(--muted)}
.snd-row input[type=range]{flex:1;accent-color:var(--gold)}
.snd-row b{min-width:28px;text-align:right;font-size:12px;color:var(--gold)}
@media (max-width:640px){.snd-box{grid-template-columns:1fr}}

/* EXP bar: small, top-right */
#xpBar{position:absolute;right:1.2em;top:1.05em;width:190px;max-width:none;height:.48em;margin:0;pointer-events:none;z-index:3}
#xpBar #xpTxt{top:50%;bottom:auto;left:auto;right:calc(100% + 1em);transform:translateY(-50%);white-space:nowrap;font-size:.62em;margin:0}
#quota{top:2.2em}
body.story #xpBar{opacity:0}

/* Skill Book: cutting an uncut skill gem */
.bk-pickbar{display:flex;align-items:center;gap:12px;padding:10px 14px;margin-bottom:10px;background:linear-gradient(90deg,#2b1f4a,#1c2440);border:1px solid #b58cff;border-radius:12px;box-shadow:0 0 14px #8a5cff44}
.bk-pickbar div{flex:1;display:flex;flex-direction:column}.bk-pickbar b{color:#e6d4ff;font-size:16px}.bk-pickbar small{color:var(--muted)}
.bk-card.pick{border-color:#b58cff;box-shadow:0 0 0 1px #b58cff66 inset}
.bk-card.pick:hover{border-color:#e0c8ff}
.bk-card.nopick{opacity:.55}
.bk-pk{position:absolute;top:6px;right:6px;font-size:11px;font-weight:700;padding:1px 6px;border-radius:7px;background:#5b3aa8;color:#f0e6ff}
.bk-cutbtn{width:100%;min-height:52px;font-size:16px;background:linear-gradient(180deg,#8a5cff,#5b3aa8)!important;border-color:#c9a8ff!important;color:#fff!important}

/* Legendary support gem: animated golden-orange frame */
.gi-l{box-shadow:0 0 0 2px #ff9a3a,0 0 10px 2px #ff9a3acc!important;border-radius:8px;animation:legGlow 1.6s ease-in-out infinite}
@keyframes legGlow{50%{box-shadow:0 0 0 2px #ffd36a,0 0 16px 4px #ffb04aee}}

/* stash */
.st-card{max-width:1100px}
.st-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px;max-height:58vh;overflow-y:auto;padding:4px;background:#0c1124;border:1px solid var(--line);border-radius:10px;min-height:120px}
.st-cell{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;background:#141a2e;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);border-radius:8px;color:var(--c);cursor:pointer}
.st-cell:hover{background:#1c2440;border-color:var(--c)}
.st-cell small{font-size:11px;line-height:1.15;text-align:center;max-height:2.4em;overflow:hidden}
@media (max-width:760px){.st-cols{grid-template-columns:1fr}}

/* quest log */
.ql-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#121830;border:1px solid var(--line);border-radius:12px;margin:6px 0}
.ql-row div{flex:1;display:flex;flex-direction:column;gap:2px}.ql-row b{font-size:16px}.ql-row small{color:var(--muted)}
.ql-ic{flex:0 0 auto;filter:drop-shadow(0 2px 3px #000)}
.ql-st{font-style:normal;font-weight:700;font-size:13px;padding:3px 10px;border-radius:9px;white-space:nowrap}
.ql-st.new{background:#5a4210;color:#ffcf3a}.ql-st.on{background:#1d3a66;color:#cfe1ff}.ql-st.ready{background:#1d5a37;color:#bff5d2}
.ql-bar{height:6px;background:#0c1124;border-radius:4px;overflow:hidden;margin:4px 0}.ql-bar i{display:block;height:100%;background:linear-gradient(90deg,#c9a640,#f6dd84)}

/* phones / touch: smaller buttons, compact HUD menu */
@media (pointer:coarse){
  #touch button{width:50px;height:50px;font-size:13px;background:rgba(20,24,50,.38)}
  .menubtn{width:2.7em;height:2.7em}
  .menubtn small{display:none}
}
.ic.gi-la{border-radius:0;box-shadow:none!important;background-repeat:no-repeat;filter:drop-shadow(0 0 4px #ff9a3a99);animation:legGlowF 1.6s ease-in-out infinite}
@keyframes legGlowF{50%{filter:drop-shadow(0 0 8px #ffb35acc)}}
.ps-mech{font-size:.82rem;margin:4px 0;line-height:1.35}.ps-mech.ps-keystone b{color:#ffb35a}.ps-mech.ps-notable b{color:#ffe08a}
/* endgame rift device */
.rf-card{max-width:1080px}
.rf-cols{display:grid;grid-template-columns:1.1fr 1fr;gap:14px}
.rf-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px;max-height:60vh;overflow-y:auto;padding:4px;background:#0c1124;border:1px solid var(--line);border-radius:10px;min-height:120px}
.rf-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;background:#141a2e;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);border-radius:8px;color:var(--c);cursor:pointer;font:inherit}
.rf-cell.on,.rf-cell:hover{background:#1f1838;border-color:var(--c)}
.rf-cell .gem{width:20px;height:28px;background:var(--c);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);box-shadow:0 0 10px var(--c)}
.rf-cell b{font-size:15px}.rf-cell small{font-size:11px;color:#b8bfd8}
.rf-side{background:#0e1328;border:1px solid var(--line);border-radius:10px;padding:12px}
.rf-side h3{margin:0 0 4px}.rf-mods{margin:6px 0 10px;padding-left:18px;font-size:.9rem;line-height:1.5}
.rf-mods .bad{color:#ff9a8a}.rf-bonus{display:flex;gap:10px;font-size:.9rem;margin:6px 0}
.rf-craft{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0}
.rf-craft .btn{font-size:.82rem;padding:6px}
.rf-go{width:100%;margin-top:6px;font-size:1.05rem}
@media (max-width:760px){.rf-cols{grid-template-columns:1fr}}
/* buff bar: top centre (moves under the boss bar while a boss is shown) */
#buffs{left:50%!important;top:.6em!important;transform:translateX(-50%);gap:.35em;flex-wrap:wrap;justify-content:center;max-width:46em}
body.hasBoss #buffs{top:6.6em!important}
#buffs .bf{width:2.3em;height:2.3em;border-color:#c9a86a99;box-shadow:0 0 .4em #000a}
#buffs .bf b{font-size:.6em;right:-.1em;bottom:-.25em;background:#0009;border-radius:.4em;padding:0 .2em}
/* energy shield on the life orb */
#esRing{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 .32em #8fe3ff,inset 0 0 1.1em #8fe3ffaa;opacity:0;pointer-events:none;transition:opacity .15s}
#esRing.broken{box-shadow:inset 0 0 0 .2em #ff8a8a88}
#esTxt{position:absolute;left:0;right:0;bottom:22%;text-align:center;font:700 .62em var(--f-display);color:#bff0ff;text-shadow:0 1px 2px #000}
/* passive pages + batch-21 node kinds */
.ps-pages{margin-right:.4em}
#psSvg .nd.k-major polygon,#psSvg .nd.k-choice polygon,#psSvg .nd.k-mastery polygon{fill:#121826;stroke:var(--c);stroke-width:3}
#psSvg .nd.own.k-major polygon,#psSvg .nd.own.k-choice polygon,#psSvg .nd.own.k-mastery polygon{fill:color-mix(in srgb,var(--c) 30%,#121826);stroke:#f2c66d}
#psSvg .nd.can polygon{stroke-width:4;filter:drop-shadow(0 0 4px var(--c))}
#psSvg .nd line.cut{stroke:var(--c);stroke-width:1.5;opacity:.6}
#psSvg .nd.pend{opacity:.55}
#psSvg .nd.pend circle,#psSvg .nd.pend polygon,#psSvg .nd.pend rect{stroke-dasharray:4 3}
#psSvg .nd text.lock{font-size:12px}
.ps-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px}.ps-opts .btn{font-size:.8rem;text-align:left;padding:6px}
.ps-mech.ps-major b{color:#c9a3ff}.ps-mech.ps-choice b,.ps-mech.ps-mastery b{color:#9fdcff}

/* batch-22 rift device art */
.rf-card{background-color:#0b0f20;background-position:center;background-size:cover;background-repeat:no-repeat}
.rf-ic{position:relative;display:inline-block;line-height:0}.rf-ic .rf-t{position:absolute;right:-4px;bottom:-2px;font-size:12px;line-height:1;background:#0a0d1cdd;border:1px solid var(--c);border-radius:6px;padding:2px 4px;color:#fff}
.rf-ic .rf-enh{position:absolute;left:-4px;top:-4px}
.rf-side h3 .ic{vertical-align:middle}.rf-mods li .ic{vertical-align:middle;margin-right:4px}.rf-bonus span{display:inline-flex;align-items:center;gap:3px}
.rf-craft .btn{display:flex;align-items:center;gap:6px;text-align:left}.rf-craft .btn small{display:block;color:#b8bfd8;font-size:.72rem}
.rf-c3{grid-template-columns:1fr 1fr 1fr}
.rf-enhrow,.rf-royal{display:flex;align-items:center;gap:8px;padding:6px 8px;margin:6px 0;background:#151b33;border:1px solid var(--line);border-radius:8px;font-size:.88rem}
.rf-enhrow>span:not(.ic),.rf-royal>span:not(.ic){flex:1;min-width:0}.rf-enhrow>.ic,.rf-royal>.ic{flex:none}.rf-enhrow small,.rf-royal small{display:block;color:#b8bfd8;font-size:.74rem}
@media (max-width:760px){.rf-c3{grid-template-columns:1fr}}
/* ===== batch-23 passive tree UI (navy / gold / mint) ===== */
#passOv{--p-bg:#0d1420;--p-sf:#151f2c;--p-rs:#1e2b3b;--p-ln:#354455;--p-tx:#ecf1f8;--p-mu:#a8b8c9;--p-gold:#efc978;--p-mint:#75ddcd;--p-warn:#f39ba1}
#passOv .ps-shell{max-width:1600px;width:min(1600px,calc(100vw - 24px));height:calc(100dvh - 24px);max-height:none;display:flex;flex-direction:column;padding:0;overflow:hidden;background:linear-gradient(145deg,#1b2735,#121b27);border:1px solid #9d8351;border-radius:18px;color:var(--p-tx)}
#passOv .ps-head{display:flex;align-items:center;gap:22px;padding:14px 22px;margin:0;border-bottom:1px solid var(--p-ln)}
.ps-brand{display:flex;gap:12px;align-items:center;min-width:210px}.ps-brand small{font-size:11px;letter-spacing:1.7px;color:var(--p-gold)}.ps-brand h2{margin:0;font-size:21px}
.ps-crest{font-size:24px;color:var(--p-gold);background:#2b2d35;width:45px;height:45px;display:grid;place-items:center;border:1px solid #877248;border-radius:12px}
#passOv .ps-head .bd-tabs{flex:1}#passOv .ps-x{width:40px;height:40px;padding:0;font-size:17px}
.ps-bar{display:flex;align-items:center;gap:12px;padding:12px 22px}
.ps-seg{display:flex;border:1px solid #3d4c5d;border-radius:9px;padding:3px;background:#0f1824}
.ps-seg button{border:0;background:transparent;color:var(--p-mu);padding:7px 14px;border-radius:7px;cursor:pointer;font:inherit}
.ps-seg button.on{color:var(--p-gold);background:#344051;font-weight:700}
#passOv .ps-pts{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
.ps-pts strong{font-size:28px;color:var(--p-gold);line-height:1}.ps-pts small{display:block;color:var(--p-mu);font-size:11px}.ps-pts .lbl2{font-weight:700;font-size:14px}
.ps-pts .rule{margin-left:8px;border-left:1px solid var(--p-ln);padding-left:16px;font-size:12px;color:var(--p-mu)}.ps-pts .rule b{color:var(--p-tx)}
.ps-tools{display:flex;gap:9px;padding:0 22px 12px;align-items:center}
.ps-search{position:relative;flex:1;max-width:410px}.ps-search>span{position:absolute;left:12px;top:8px;color:#a5b8cc;pointer-events:none}
#passOv .ps-search input{width:100%;padding:9px 12px 9px 34px;border:1px solid #3f4e60;border-radius:8px;background:#0f1824;color:var(--p-tx)}
#passOv .ps-tools select{padding:9px 12px;background:#182433;color:var(--p-tx);border:1px solid #3f4e60;border-radius:8px}
.ps-hint{margin-left:auto;font-size:11px;color:#8fa2b8}
.ps-results{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 4px);max-height:340px;overflow:auto;background:#172536f5;border:1px solid #5c7089;border-radius:9px;padding:6px;box-shadow:0 10px 30px #0009}
.ps-results button{display:flex;gap:8px;align-items:center;width:100%;text-align:left;padding:7px 8px;min-height:40px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--p-tx);cursor:pointer;font:inherit;font-size:.86rem}
.ps-results button:hover,.ps-results button.kb{background:#26384a;border-color:#5c7089}.ps-results small{display:block;color:#a2b7cd;font-size:.74rem}.ps-results .st{margin-left:auto;font-size:.72rem;color:var(--p-mu)}
#passOv .ps-main{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:16px;padding:0 22px;flex:1;min-height:0}
.ps-wrap{position:relative;min-height:0;border:1px solid #374757;border-radius:13px;overflow:hidden}
#passOv .ps-view{height:100%;border:0;border-radius:0;padding:0;background:radial-gradient(ellipse at 60% 45%,#1c2b3f,#0c1420 80%)!important}
#passOv .ps-main>.ps-view{border:0}
.ps-cap{position:absolute;top:14px;left:16px;pointer-events:none;font-size:13px;color:#cdd9e7;text-shadow:0 1px 3px #000}.ps-cap small{display:block;color:#8ea4bf;font-size:11px}
.ps-mini{position:absolute;left:12px;bottom:12px;border:1px solid #45546c;border-radius:8px;background:#0c1421df;padding:4px;width:135px;height:135px}
.ps-mini small{position:absolute;left:8px;top:3px;font-size:9px;color:#9db0c7;pointer-events:none}.ps-mini canvas{width:125px;height:125px;cursor:pointer;display:block}
.ps-zoomb{position:absolute;right:12px;bottom:12px;display:flex;gap:2px;align-items:center;background:#111b2be8;border:1px solid #42516a;border-radius:9px;padding:4px}
.ps-zoomb button{border:0;background:transparent;color:var(--p-tx);padding:5px 10px;border-radius:6px;cursor:pointer;font:inherit;min-width:34px}.ps-zoomb button:hover{background:#26384a}.ps-zoomb span{font-size:11px;color:#b9c7da;min-width:40px;text-align:center}
.ps-detail{background:linear-gradient(165deg,#1c293a,#131e2b);border:1px solid #465066;border-top:2px solid var(--p-gold);border-radius:13px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.ps-dscroll{flex:1;overflow:auto;padding:18px 18px 8px}
.ps-nhead{display:flex;gap:12px;align-items:center;margin-bottom:10px}.ps-nhead h3{margin:1px 0 0;font-size:21px;line-height:1.25}
.ps-nicon{width:58px;height:58px;flex:none;border:1px solid #9e8150;border-radius:12px;background:#111e30;display:grid;place-items:center;overflow:hidden;font-size:24px;color:var(--p-gold)}
.ps-ntag{font-size:11px;color:var(--p-gold)}.ps-desc{margin:6px 0;line-height:1.6;color:#dfe7f1}
.ps-lbl{margin:14px 0 8px;color:#bacbdc;font-size:12px;font-weight:700}
.ps-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ps-cards button{text-align:left;padding:11px;min-height:92px;background:#172233;border:1px solid #485a70;border-radius:9px;color:var(--p-tx);cursor:pointer;font:inherit}
.ps-cards button strong{display:block;font-size:15px;margin-bottom:4px}.ps-cards button small{font-size:12px;color:#c8d4e3;line-height:1.5;display:block}
.ps-cards button[aria-pressed="true"]{border:2px solid var(--p-gold);background:#3c3529;padding:10px}.ps-cards button[aria-pressed="true"] strong{color:var(--p-gold)}.ps-cards button:disabled{opacity:.45;cursor:default}
.ps-state{margin-top:12px;display:flex;gap:8px;align-items:flex-start;border-radius:8px;background:#172c31;border:1px solid #2e5a55;padding:10px;font-size:12.5px;color:#9de7d7}
.ps-state.own{background:#33301f;border-color:#7d6a3e;color:var(--p-gold)}.ps-state.warn{background:#3b2a2d;border-color:#6d3f45;color:#f4b0b4}.ps-state.path{background:#172c31}.ps-state.pend{background:#262b36;border-color:#4a5262;color:#c0c8d6}
.ps-path{background:#111b29;border:1px solid #384b60;border-radius:9px;padding:10px 12px;margin-top:10px}
.ps-path p{display:flex;align-items:center;gap:8px;font-size:12.5px;margin:4px 0}.ps-path i{width:8px;height:8px;border:1px solid #c6ae7e;border-radius:50%;flex:none}.ps-path i.cur{background:var(--p-gold)}.ps-path i.ch{transform:rotate(45deg);border-radius:1px}
.ps-path p button{margin-left:auto;font-size:11px;padding:1px 6px;border-radius:5px;border:1px solid #5c7089;background:transparent;color:var(--p-mint);cursor:pointer}
.ps-act{padding:12px 18px 14px;border-top:1px solid #2c3a4c;background:#141e2bcc}
.ps-after{display:flex;justify-content:space-between;font-size:12px;color:var(--p-mu);margin-bottom:8px}.ps-after b{color:var(--p-gold)}
.ps-prim{width:100%;padding:12px;border-radius:9px;border:1px solid #f2d297;background:linear-gradient(#f0d092,#d8b269);color:#151d29;font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.ps-prim:disabled{opacity:.45;cursor:default;filter:grayscale(.5)}
.ps-sec{width:100%;margin-top:7px;padding:8px;border-radius:9px;background:transparent;border:1px solid #46566b;color:#b5c7db;font:inherit;font-size:12px;cursor:pointer}
.ps-minor{display:flex;justify-content:space-between;padding-top:8px}.ps-minor button{border:0;background:transparent;color:#91a8c2;font:inherit;font-size:11.5px;cursor:pointer;padding:4px 0}.ps-minor button:hover:not(:disabled){color:var(--p-gold)}.ps-minor button:disabled{opacity:.4;cursor:default}
#psMsg{min-height:1.2em;font-size:12px;color:var(--p-gold);margin-top:6px}
.ps-foot{display:flex;gap:10px;align-items:center;padding:12px 22px;border-top:1px solid #293849;margin-top:14px;background:#111b27}
#passOv .ps-foot select{padding:8px 10px;background:#182433;color:var(--p-tx);border:1px solid #3f4e60;border-radius:8px;max-width:190px;font-size:12.5px}#passOv .ps-foot .btn{font-size:12.5px}
.ps-short{flex:1;display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding-left:8px;min-width:0}.ps-short small{color:#89a0b9;font-size:11px}
.ps-chip{border:1px solid #394960;border-radius:5px;padding:4px 8px;font-size:11.5px;color:#c5d5e7;background:#1d2b3e}
.ps-short button{border:0;background:transparent;color:var(--p-mint);font:inherit;font-size:11.5px;cursor:pointer;text-decoration:underline}
#passOv .ps-legend{padding:7px 22px 10px;display:flex;gap:15px;color:#99adc5;font-size:11px;background:#111b27}
#passOv .ps-legend .lg{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}.ps-legend .lg.own{background:var(--p-gold)}.ps-legend .lg.can{border:1.5px solid var(--p-mint)}
.ps-sumov{position:absolute;inset:0;background:#05090fcc;z-index:20;display:grid;place-items:center}.ps-sumov[hidden]{display:none}.ps-sumov .card{max-width:760px;width:calc(100% - 40px);max-height:80%;overflow:auto;background:#151f2c;border:1px solid #9d8351}
/* node look: learned = gold ring, reachable = mint ring */
#psSvg .nd.own circle,#psSvg .nd.own rect{fill:#2b2617;stroke:#efc978;stroke-width:5}
#psSvg .nd.own.k-major polygon,#psSvg .nd.own.k-choice polygon,#psSvg .nd.own.k-mastery polygon{fill:#2b2617;stroke:#efc978;stroke-width:5}
#psSvg .nd.can circle,#psSvg .nd.can rect,#psSvg .nd.can polygon{stroke:#75ddcd;stroke-width:4;fill:#14232b}
#psSvg .nd.own .pic{opacity:1;filter:none}
#psSvg .nd .ring2{fill:none!important;stroke:var(--c);stroke-width:1.5!important;opacity:.7}#psSvg .nd.own .ring2{stroke:#efc978}
#psSvg .nd .crown{font-size:15px;fill:#efc978}
#psSvg line.on{stroke:#efc978}#psSvg line.path{stroke:#efc978;stroke-dasharray:9 7;stroke-width:4}
#psSvg .nd.onpath circle,#psSvg .nd.onpath rect,#psSvg .nd.onpath polygon{stroke:#efc978;stroke-dasharray:6 4}
#psSvg .nd.sel circle,#psSvg .nd.sel rect,#psSvg .nd.sel polygon{stroke:#fff;stroke-width:6;filter:drop-shadow(0 0 8px #efc978)}
@media (min-width:1600px){#passOv .ps-main{grid-template-columns:minmax(0,1fr) 390px}}
@media (max-width:1100px){#passOv .ps-main{grid-template-columns:minmax(0,1fr) 315px;padding:0 14px;gap:12px}#passOv .ps-head{padding:12px 14px;gap:8px}.ps-brand{min-width:0}.ps-bar,.ps-tools{padding-left:14px;padding-right:14px}.ps-hint,.ps-pts .rule{display:none}.ps-foot{padding:10px 14px;flex-wrap:wrap}}
@media (max-width:760px){#passOv .ps-shell{width:100vw;height:100dvh;border-radius:0}#passOv .ps-head .bd-tabs{display:none}.ps-brand h2{font-size:17px}
  #passOv .ps-main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,46%);padding:0 10px}.ps-mini{display:none}#passOv .ps-legend{display:none}
  .ps-foot{gap:6px}.ps-short{order:9;flex-basis:100%;padding:0}.ps-zoomb button,.ps-seg button,.ps-cards button,.ps-prim,.ps-results button{min-height:44px}}
#psSvg .nd.own .crown{fill:#efc978}
@media (max-width:760px){
  #passOv{padding:0!important}#passOv .ps-shell{width:100vw;height:100dvh;border:0}
  #passOv .ps-head{padding:8px 10px}.ps-crest{width:34px;height:34px;font-size:18px}.ps-brand small{font-size:9px}
  .ps-bar{padding:8px 10px;gap:8px}.ps-seg button{padding:6px 9px;font-size:12.5px;white-space:nowrap}
  .ps-pts strong{font-size:22px}.ps-pts .lbl2{font-size:12px;white-space:nowrap}.ps-pts small{display:none}
  .ps-tools{padding:0 10px 8px;gap:6px;flex-wrap:wrap}.ps-search{flex:1 1 100%;max-width:none}#passOv .ps-tools select{flex:1}#psHome{white-space:nowrap}
  #passOv .ps-main{grid-template-rows:minmax(150px,1fr) minmax(0,52%);gap:8px}
  .ps-dscroll{padding:12px}.ps-nicon{width:44px;height:44px}.ps-nicon svg{width:40px;height:40px}.ps-nhead h3{font-size:17px}
  .ps-act{padding:8px 12px 10px}.ps-sec{display:none}.ps-after{margin-bottom:6px}
  .ps-foot{margin-top:8px;padding:8px 10px;flex-wrap:nowrap;overflow-x:auto}#passOv .ps-foot .btn{white-space:nowrap;padding:8px 10px}
  .ps-short{order:0;flex:0 0 auto;flex-basis:auto}.ps-short small,.ps-short .ps-chip{display:none}
  .ps-short button{font-size:0;text-decoration:none;border:1px solid #46566b;border-radius:8px;min-width:44px;min-height:40px;color:var(--p-gold)}.ps-short button::before{content:'Σ';font-size:18px}
  .ps-cap small{display:none}.ps-zoomb{right:8px;bottom:8px}
}
#psSvg line.bridge{stroke:#6f86b8;stroke-width:5;stroke-dasharray:2 7;stroke-linecap:round;opacity:.9}
#psSvg line.bridge.on{stroke:#efc978;stroke-dasharray:none;filter:drop-shadow(0 0 4px #efc978)}
#psSvg line.bridge.path{stroke:#efc978;stroke-dasharray:9 7}

.ql-ach{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px;max-height:34vh;overflow:auto;margin-bottom:10px}
.ql-ach>div{border:1px solid var(--line);border-radius:8px;padding:6px 9px;background:#121726;opacity:.6}.ql-ach>div.on{opacity:1;border-color:#c9a24a;background:#2a2414}
.ql-ach b{display:block;font-size:.88rem}.ql-ach>div.on b{color:#f2c66d}.ql-ach small{font-size:.74rem;color:#b8bfd8}

.wp-eg{margin-left:auto;background:linear-gradient(90deg,#3a2160,#5b2d8a);border:1px solid #c27bff;color:#f3e2ff;border-radius:8px;padding:6px 12px;font:inherit;cursor:pointer}.wp-eg:disabled{opacity:.5;cursor:default}


/* auto-combat hotbar toggle (placeholder until icon art) */
.slot.autobtn{display:flex;align-items:center;justify-content:center;cursor:pointer}
.slot.autobtn .aico{font:800 .78em/1 sans-serif;letter-spacing:.04em;color:#9fb3c8;padding:.35em .4em;border:2px solid #4a5a70;border-radius:.45em;background:rgba(20,28,40,.7)}
.slot.autobtn.on .aico{color:#eafff2;border-color:#3fd18b;background:rgba(30,120,80,.75);box-shadow:0 0 10px rgba(63,209,139,.8);animation:autoPulse 1.4s ease-in-out infinite}
@keyframes autoPulse{50%{box-shadow:0 0 18px rgba(63,209,139,1)}}
/* batch-43 auto icons: off/on stacked, glow strip animated with steps(8) */
.slot.autobtn .aimg{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);background-repeat:no-repeat;pointer-events:none}
.slot.autobtn .a-on,.slot.autobtn .a-glow{opacity:0}
.slot.autobtn.on .a-on{opacity:1}.slot.autobtn.on .a-off{opacity:0}
.slot.autobtn .a-glow{z-index:0;transform:translate(-50%,-50%) scale(1.12)}.slot.autobtn .a-off,.slot.autobtn .a-on{z-index:1}
.slot.autobtn .k{z-index:2}.slot.autobtn .n{position:absolute;bottom:.2em;left:0;right:0;z-index:2;text-shadow:0 1px 2px #000}
.slot.autobtn.on .a-glow{opacity:.85;animation:autoGlow .8s steps(8) infinite}
@keyframes autoGlow{from{background-position-x:var(--gx0)}to{background-position-x:var(--gx1)}}
#autoBadge{position:absolute;top:.5em;left:50%;transform:translateX(-50%);width:10em;height:2.5em;background-repeat:no-repeat;display:none;align-items:center;justify-content:flex-end;padding-right:1.1em;box-sizing:border-box;pointer-events:none;z-index:50}
#autoBadge.on{display:flex}
#autoBadge span{font:700 .82em/1 sans-serif;color:#d9ffe9;text-shadow:0 0 6px rgba(63,209,139,.9),0 1px 2px #000;width:6.2em;text-align:center}
#autoBadge.plain{background:rgba(30,120,80,.75);border-radius:.6em}
.tag.rng{background:#2c4a63;color:#cfe8ff;border-color:#4f7fa6}

/* tutorial hint card */
#tipBox{position:absolute;left:1em;bottom:9.2em;max-width:26em;display:none;gap:.6em;align-items:flex-end;flex-direction:column;padding:.7em .8em;border:1px solid #c9a24a;border-radius:.6em;background:rgba(18,16,30,.92);box-shadow:0 4px 18px rgba(0,0,0,.6);z-index:60;color:#f3ead2;font:500 .82em/1.45 var(--f-body,sans-serif)}
#tipBox.on{display:flex;animation:tipIn .25s ease-out}
#tipBox kbd{display:inline-block;min-width:1.4em;padding:0 .3em;margin:0 .1em;border:1px solid #8a7440;border-radius:.3em;background:#2a2440;color:#ffe9a8;font:700 .9em var(--f-display,sans-serif);text-align:center}
#tipBox .tip-ok{font-size:.85em;padding:.25em .9em}
@keyframes tipIn{from{opacity:0;transform:translateY(8px)}}

/* forced tutorial overlay: blocks HUD clicks, card top-centre */
#guide{position:absolute;inset:0;display:none;z-index:70;pointer-events:auto;background:radial-gradient(ellipse at 50% 70%,rgba(0,0,0,0) 30%,rgba(0,0,0,.45) 80%)}
#guide.on{display:block}#guide.hidden{display:none}
#guide .g-card{position:absolute;top:5.2em;left:50%;transform:translateX(-50%);min-width:24em;max-width:34em;padding:.9em 1.2em 1em;border:2px solid #d8b25a;border-radius:.8em;background:linear-gradient(#1e1a33f2,#120f22f2);box-shadow:0 6px 28px rgba(0,0,0,.7);text-align:center;color:#f4ecd6}
#guide .g-step{font:700 .7em var(--f-display,sans-serif);letter-spacing:.08em;color:#c9a24a;text-transform:uppercase}
#guide h3{margin:.15em 0 .35em;font:800 1.35em var(--f-display,sans-serif);color:#ffe7a6}
#guide .g-t{margin:0 0 .5em;font:500 .95em/1.5 var(--f-body,sans-serif)}
#guide .g-goal{display:inline-block;padding:.25em .8em;border-radius:1em;background:#2c4a63;color:#d6efff;font:600 .82em var(--f-body,sans-serif)}
#guide .g-goal b{color:#9dffc2;margin-left:.3em}
#guide kbd{display:inline-block;min-width:1.5em;padding:0 .35em;margin:0 .1em;border:1px solid #8a7440;border-radius:.3em;background:#2a2440;color:#ffe9a8;font:700 .95em var(--f-display,sans-serif)}
#guide .g-go{margin-top:.6em;font-size:1em;padding:.4em 1.4em}
#guide.done .g-card{border-color:#5fd18b}
#guide .g-goal:empty{display:none}

/* gem drag & drop */
#gemOv [data-act="bag"][draggable="true"]{cursor:grab}
#gemOv.dragging [data-act="sock"],#gemOv.dragging [data-act="slot"]{outline:2px dashed #9dd6ff;outline-offset:2px}
#gemOv .dropok{outline:3px solid #5fd18b !important;box-shadow:0 0 14px rgba(95,209,139,.7)}
/* guide while a panel is open: no backdrop, compact non-blocking bar at the bottom (only its button is clickable) */
#guide.panel{background:none;pointer-events:none}
#guide.panel .g-card{pointer-events:none;top:auto;bottom:.4em;min-width:0;max-width:44em;padding:.4em .9em .5em;font-size:.86em;box-shadow:0 0 0 2px rgba(216,178,90,.35),0 6px 24px rgba(0,0,0,.8)}
#guide.panel .g-card h3{display:inline;margin-right:.5em;font-size:1.05em}#guide.panel .g-step{display:inline;margin-right:.6em}
#guide.panel .g-t{margin:.2em 0 .3em}#guide .g-go{pointer-events:auto}

/* crafting table */
#craftOv .card.craft{width:min(1060px,96%);max-height:92%;display:flex;flex-direction:column;padding:12px 14px}
.cr-head{display:flex;justify-content:space-between;align-items:center}.cr-head h2{margin:0}
.cr-body{display:grid;grid-template-columns:240px 1fr 330px;gap:10px;min-height:0;flex:1;overflow:hidden;margin-top:8px}
.cr-items,.cr-curs{overflow:auto;display:flex;flex-direction:column;gap:4px;padding-right:4px}
.cr-curs{display:grid;grid-template-columns:repeat(3,1fr);align-content:start}
.cr-it{display:flex;align-items:center;gap:6px;text-align:left;padding:4px 6px;border:1px solid #3a3352;border-radius:6px;background:#1c1830;color:#ddd;font-size:.82em;cursor:pointer}
.cr-it small{margin-left:auto;color:#9a92b8;font-size:.8em}.cr-it.sel{border-color:#d8b25a;background:#2a2340}
.cr-item{overflow:auto;padding:6px 10px;border:1px solid #3a3352;border-radius:8px;background:#151226}
.cr-big{display:flex;gap:10px;align-items:center}.cr-big h3{margin:0}
.cr-lines{list-style:none;padding:0;margin:8px 0;font-size:.88em;line-height:1.6}.cr-lines li.new{color:#8dffb5;font-weight:700}
.cr-old{font-size:.8em;color:#9a92b8}.cr-old li.gone{color:#ff8a8a;text-decoration:line-through}
.cr-cur{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border:1px solid #3a3352;border-radius:6px;background:#1c1830;color:#ddd;font-size:.72em;cursor:pointer}
.cr-cur b{position:absolute;top:2px;right:5px;color:#ffe9a8}.cr-cur.no{opacity:.45}.cr-cur.sel{border-color:#d8b25a;opacity:1}
.cr-cur.top{border-color:#6fe7ff;box-shadow:0 0 10px rgba(111,231,255,.35)}
.cr-use{grid-column:1/-1;padding:8px;border:1px solid #d8b25a;border-radius:8px;background:#221c38;font-size:.85em}.cr-use h4{margin:0 0 4px}.cr-use .warn{color:#ff8a8a}
.cr-hint{grid-column:1/-1}.cr-msg{min-height:1.2em;margin:6px 0 0;color:#ffe9a8}

/* shop cards */
#shopOv .card.shop{width:min(1080px,96%);max-height:92%;display:flex;flex-direction:column;padding:12px 14px}
.sh-cur{margin-left:auto;margin-right:12px;display:flex;gap:10px}
.sh-pr{display:inline-flex;align-items:center;gap:3px;font-weight:700;color:#ffe9a8}.sh-pr.no{color:#ff8a8a}
.sh-body{overflow:auto;padding-right:4px}.sh-sec{margin:10px 0 6px;font:700 .9em var(--f-display,sans-serif);color:#c9a24a;display:flex;align-items:center;gap:10px}
.sh-ref{font-size:.8em;padding:.15em .6em}
.sh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sh-card{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:1px solid #3a3352;border-radius:8px;background:#171329}
.sh-card.r-magic{border-color:#3d5b9e}.sh-card.r-rare{border-color:#9e7d2f;box-shadow:inset 0 0 18px rgba(255,211,107,.08)}.sh-card.sold{opacity:.4;justify-content:center;align-items:center}
.sh-top{display:flex;gap:8px;align-items:center}.sh-top b{display:block}.sh-top small{color:#9a92b8}
.sh-lines{list-style:none;margin:0;padding:0;font-size:.78em;line-height:1.5;color:#8fb8ff;flex:1}.sh-lines li.base{color:#cfc8e6}.sh-lines li.bad{color:#ff7a7a;font-weight:700}
.sh-buy{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}.sh-buy .btn.ghost{margin-right:auto;font-size:.78em;padding:.2em .6em}
.sh-cmp{font-size:.78em}.sh-cmp table{width:100%}
.sh-cmp .bad{color:#ff8a8a;margin:0 0 4px;font-weight:700}
#tipBox{z-index:4} /* stays under open panels */

/* stash: search, sort, drag & drop, rich tooltip */
.st-q{margin-left:auto;width:12em;padding:.3em .6em;border:1px solid #3a3352;border-radius:6px;background:#0c1124;color:#e6e0f5}
#stashOv.st-drag .st-grid{outline:2px dashed #4f6b9a}#stashOv .st-grid.st-over{outline:3px solid #5fd18b;background:#10261c}
#stashOv .st-cell[draggable="true"]{cursor:grab}
.st-tt{position:absolute;z-index:20;width:260px;padding:8px 10px;border:1px solid #c9a24a;border-radius:8px;background:rgba(14,12,26,.97);box-shadow:0 6px 22px rgba(0,0,0,.7);font-size:12px;line-height:1.5;pointer-events:none;white-space:pre-line}
.st-tt b{display:block;font-size:13px}.st-tt small{color:#9a92b8}.st-tt .b{color:#cfc8e6}.st-tt .a{color:#8fb8ff}.st-tt .u{color:#ffb35c}

/* batch 46 UI pilot: painted stash frame (overlay, see-through interior), slot states, action icons */
#stashOv .st-card{max-width:1180px;width:calc(100% - 72px);position:relative;border:14px solid transparent!important;border-image:var(--ui-st-frame) 305 105 177 105 / 137px 47px 80px 47px / 30px 22px 26px 22px stretch!important;background:radial-gradient(ellipse at 50% 0,#1d1a26,#0f0e14 70%);padding:30px 40px 34px;margin-top:30px;overflow:visible}
#stashOv .st-card::before{display:none}
#stashOv .st-card::after{content:'';position:absolute;top:-32px;left:50%;width:71px;height:47px;transform:translateX(-50%);background:var(--ui-st-gem) center/contain no-repeat;pointer-events:none;z-index:4}
#stashOv .st-cell{background:var(--ui-st-slots) 0 0/600% 100% no-repeat;border:0;border-radius:0;padding:10px 12px 13px;min-height:84px;text-shadow:0 1px 2px #000,0 0 3px #000}#stashOv .st-cell small{font-size:10px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}  /* labels stay inside the painted rim */
#stashOv .st-cell:hover{background:var(--ui-st-slots) 40% 0/600% 100% no-repeat}
#stashOv .st-grid.st-over .st-cell{background-position:60% 0}
#stSort::before{content:'';display:inline-block;width:20px;height:20px;margin-right:5px;vertical-align:-5px;background:var(--ui-st-icons) 0 0/800% 100% no-repeat}

/* bag usability: toolbar, upgrade badge, hover card */
.bag-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 6px}
.btn.sm{padding:4px 10px;min-height:32px;font-size:.85rem}
.bag-hint{flex-basis:100%;font-size:.75rem}
.it.upg{border-color:#4fbf6f88}
.up-b{font-style:normal;font-size:.72rem;color:#7be08f;background:#163222;border:1px solid #3d8a52;border-radius:6px;padding:1px 6px;white-space:nowrap}
.ch-tt{position:fixed;z-index:60;width:280px;pointer-events:none;white-space:normal}.ch-tt small{display:block;margin-top:4px}
.ch-tt .up{color:#7be08f;font-weight:600;margin:4px 0}
.sh-card{position:relative}.sh-card.upg{border-color:#4fbf6f}.sh-up{position:absolute;top:-11px;right:10px;z-index:2;box-shadow:0 2px 6px #000}
.cr-rep{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding:8px 10px;border:1px solid #4a5568;border-radius:8px;background:#0f141c}.cr-rep label{display:flex;gap:6px;align-items:center;font-size:.85rem}.cr-rep label{white-space:nowrap}.cr-rep select{flex:1;min-width:0;max-width:220px}

/* passive build planner */
#psSvg .nd.plan circle,#psSvg .nd.plan rect,#psSvg .nd.plan polygon{stroke:#c58bff;stroke-width:3;stroke-dasharray:4 3}
#psSvg line.planl{stroke:#b07cff;stroke-width:3;stroke-dasharray:7 5;opacity:.85}
.ps-plan{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;margin-left:10px;color:#d9c2ff}
.ps-plan button{font-size:11.5px;padding:3px 8px;border-radius:6px;border:1px solid #8a63c9;background:#24183a;color:#efe2ff;cursor:pointer}.ps-plan button:disabled{opacity:.45;cursor:default}
.ps-planb{border-color:#8a63c9!important;color:#e3d0ff!important}

/* batch 47: painted window frames as the card's own border-image (drawn under the content; outset puts the bars on the card edge) */
#charOv>.card,#gemOv>.card,#bookOv>.card,#supOv>.card,#qlOv>.card,#riftOv>.card,#shopOv>.card,#craftOv>.card,#wpOv>.card{border-style:solid!important;border-color:transparent!important;border-width:14px!important;border-image-source:var(--fs)!important;border-image-slice:var(--sl) fill!important;border-image-width:var(--bw)!important;border-image-outset:20px!important;border-image-repeat:stretch!important;border-radius:0!important;background:none!important}
#charOv>.card{--fs:var(--ui-fr-bag);--sl:120 120 120 120;--bw:50px}
#gemOv>.card,#bookOv>.card,#supOv>.card{--fs:var(--ui-fr-book);--sl:125 125 125 125;--bw:52px}
#qlOv>.card{--fs:var(--ui-fr-quest);--sl:240 120 175 120;--bw:101px 50px 74px 50px}
#riftOv>.card{--fs:var(--ui-fr-rift);--sl:170 120 200 120;--bw:71px 50px 84px 50px}
#shopOv>.card{--fs:var(--ui-fr-shop);--sl:215 120 120 120;--bw:90px 50px 50px 50px}
#craftOv>.card{--fs:var(--ui-fr-craft);--sl:140 140 140 140;--bw:59px}
#wpOv>.card{--fs:var(--ui-fr-waypoint);--sl:120 120 120 120;--bw:50px}
#charOv>.card::before,#gemOv>.card::before,#bookOv>.card::before,#supOv>.card::before,#qlOv>.card::before,#riftOv>.card::before,#shopOv>.card::before,#craftOv>.card::before,#wpOv>.card::before{display:none}
/* rarity slot sets in the stash */
#stashOv .st-cell[data-r="normal"]{background-image:var(--ui-sl-normal)}#stashOv .st-cell[data-r="magic"]{background-image:var(--ui-sl-magic)}
#stashOv .st-cell[data-r="unique"]{background-image:var(--ui-sl-unique)}#stashOv .st-cell[data-r="currency"]{background-image:var(--ui-sl-currency)}#stashOv .st-cell[data-r="gem"]{background-image:var(--ui-sl-gem)}
#stashOv .st-cell[data-r]:hover{background-position:20% 0}
/* tabs: painted plates (normal / hover / active / disabled) */
.bd-tabs button{background:var(--ui-tab) 0 0/700% 100% no-repeat!important;border:0!important;border-radius:0!important;color:#e9dcc0;padding:8px 30px!important;min-width:118px;text-align:center;white-space:nowrap;text-shadow:0 1px 2px #000,0 0 4px #000}  /* the plate's end caps take ~13% each side → keep text clear of them */
.bd-tabs button:hover{background-position:16.667% 0!important}
.bd-tabs button.on{background-position:33.333% 0!important;color:#1a1206;text-shadow:none}
.bd-tabs button:disabled{background-position:50% 0!important;opacity:.7}
/* glyphs: <i class="g32" style="--g:N"></i> */
.g32{display:inline-block;width:18px;height:18px;vertical-align:-4px;margin-right:4px;background:var(--ui-ic32) calc(var(--g) * 100% / 31) 0/3200% 100% no-repeat}
#charOv,#gemOv,#bookOv,#supOv,#qlOv,#riftOv,#shopOv,#craftOv,#wpOv{padding:36px 30px}#charOv>.card,#gemOv>.card,#bookOv>.card,#supOv>.card,#qlOv>.card,#riftOv>.card,#shopOv>.card,#craftOv>.card,#wpOv>.card{max-height:100%!important}

/* batch 47 U6 controls */
input.txt:not(#crName),input[type=search],.st-q,#psSearch{border-style:solid!important;border-color:transparent!important;border-width:6px 18px 6px 40px!important;border-image:var(--ui-c-search) 12 40 12 72 fill / 6px 18px 6px 40px stretch!important;background:none!important;border-radius:0!important;color:#efe6cf;min-height:34px;padding:2px 6px 2px 8px!important}
input.txt::placeholder,input[type=search]::placeholder{color:#9a8f78}
.ps-search>span[aria-hidden]{display:none}
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0 6px 0 0;vertical-align:-5px;background:var(--ui-c-cb0) center/contain no-repeat;cursor:pointer;flex:none}
input[type=checkbox]:checked{background-image:var(--ui-c-cb1)}
.bindopt input[type=checkbox]{width:44px;height:22px;background-image:var(--ui-c-tg0)}.bindopt input[type=checkbox]:checked{background-image:var(--ui-c-tg1)}
.sh-pr{display:inline-flex;align-items:center;gap:4px;padding:2px 16px 2px 10px;margin-left:4px;border:0;border-image:var(--ui-c-pill) 10 40 10 60 fill / 4px 14px 4px 20px stretch;min-height:26px}
#stClose::before,#crClose::before,#shClose::before,#rfClose::before,#psClose::before,.ov .gp-head>button.btn.ghost[id$="Close"]::before{content:'';display:inline-block;width:18px;height:18px;margin-right:4px;vertical-align:-4px;background:var(--ui-c-close) center/contain no-repeat}

/* ---------- character select showcase ---------- */
.cs-ov{padding:0!important;background:radial-gradient(ellipse at 50% 40%,rgba(30,18,10,.25),rgba(3,3,8,.94) 75%),var(--ui-cs-bg,var(--ui-menu-bg,none)) center/cover no-repeat,#07060c!important}
.cs{--cc:#e0a04a;display:grid;grid-template-columns:230px minmax(0,1fr) 360px;gap:18px;width:min(1260px,100%);height:min(720px,100%);padding:22px;box-sizing:border-box;color:var(--fg)}
.cs-cap{font:700 .8rem var(--f-display);letter-spacing:.2em;color:#c9b48a;margin:0 0 10px}
.cs-roster #crClass{display:flex;flex-direction:column;gap:10px}
.cs-cls{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #3d3324;border-radius:10px;background:linear-gradient(90deg,rgba(20,16,24,.92),rgba(20,16,24,.6));color:var(--fg);cursor:pointer;text-align:left;transition:transform .15s,border-color .15s,box-shadow .15s}
.cs-cls:hover{transform:translateX(4px);border-color:var(--cc)}
.cs-cls.on{border-color:var(--cc);box-shadow:0 0 0 1px var(--cc),0 0 22px color-mix(in srgb,var(--cc) 35%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 22%,#141018),rgba(20,16,24,.7))}
.cs-port{width:56px;height:68px;flex:none;border-radius:8px;background:#0c0a10 center 18%/cover no-repeat;border:1px solid #4a3c26;display:flex;align-items:center;justify-content:center;font:700 1.6rem var(--f-display);color:#5d5345}
.cs-cls.lock .cs-port{filter:grayscale(1) brightness(.45)}
.cs-cls.future{opacity:.45;cursor:default;border-style:dashed}
.cs-cn b{display:block;font:700 1.05rem var(--f-display)}.cs-cn small{color:var(--muted);font-size:.75rem}
.cs-stage{position:relative;border-radius:14px;overflow:hidden;border:1px solid #3d3324;background:radial-gradient(ellipse at 50% 95%,color-mix(in srgb,var(--cc) 30%,transparent),transparent 60%),linear-gradient(#120e16,#07060a)}
.cs-glow{position:absolute;inset:-20%;background:conic-gradient(from 200deg at 50% 70%,transparent,color-mix(in srgb,var(--cc) 18%,transparent),transparent 30%,transparent 70%,color-mix(in srgb,var(--cc) 14%,transparent),transparent);animation:csSpin 30s linear infinite;opacity:.8}
@keyframes csSpin{to{transform:rotate(360deg)}}
.cs-art{position:absolute;inset:4% 6% 0;background:center bottom/contain no-repeat;filter:drop-shadow(0 0 30px color-mix(in srgb,var(--cc) 40%,transparent)) drop-shadow(0 14px 20px #000);animation:csBreath 5s ease-in-out infinite}
@keyframes csBreath{50%{transform:translateY(-6px) scale(1.01)}}
.cs.locked .cs-art{filter:brightness(0) drop-shadow(0 0 2px color-mix(in srgb,var(--cc) 80%,transparent)) drop-shadow(0 0 26px color-mix(in srgb,var(--cc) 50%,transparent));opacity:.9}
.cs-embers{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(2px 2px at 20% 80%,#ffb35c,transparent),radial-gradient(2px 2px at 70% 90%,#ffd38a,transparent),radial-gradient(1.5px 1.5px at 45% 70%,#ff9a3c,transparent),radial-gradient(2px 2px at 85% 60%,#ffcf7a,transparent),radial-gradient(1.5px 1.5px at 30% 55%,#ffb35c,transparent);background-size:100% 100%;animation:csRise 6s linear infinite;opacity:.8}
@keyframes csRise{from{transform:translateY(20%);opacity:0}20%{opacity:.9}to{transform:translateY(-40%);opacity:0}}
.cs-name{position:absolute;left:22px;top:18px;text-shadow:0 2px 10px #000}
.cs-name small{font:600 .85rem var(--f-display);letter-spacing:.18em;color:var(--cc)}
.cs-name h1{margin:2px 0;font:700 2.4rem var(--f-display);color:#fff3d8}
.cs-name span{font-size:.85rem;color:#d8ccb0;padding:2px 10px;border:1px solid color-mix(in srgb,var(--cc) 60%,transparent);border-radius:999px;background:rgba(0,0,0,.4)}
.cs-ped{position:absolute;right:12px;bottom:10px;width:150px;text-align:center;background:radial-gradient(ellipse at 50% 85%,rgba(0,0,0,.6),transparent 70%)}
.cs-ped canvas{width:150px;height:auto}.cs-ped small{font-size:.7rem;color:var(--muted)}
.cs-info{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:14px;border:1px solid #3d3324;background:rgba(14,11,18,.92);overflow:auto}
.cs-tag{margin:0;font-size:.95rem;line-height:1.5;color:#efe3c6}
.cs-rates{display:grid;gap:5px;margin:4px 0}
.cs-diff{font-size:.85rem;color:var(--muted)}.cs-diff b{color:var(--cc);letter-spacing:2px}
.cs-rate{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:8px;font-size:.82rem}
.cs-rate i{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--cc) var(--v),#2a2430 var(--v));box-shadow:inset 0 0 0 1px #00000088}
.cs-attr{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;margin-top:2px}.cs-attr span{padding:3px 8px;border-radius:6px;background:#1c1722;font-size:.75rem;color:var(--muted)}.cs-attr span b{color:#fff;font-size:.95rem;margin-right:3px}.cs-attr small{flex-basis:100%;font-size:.7rem;color:var(--muted)}
.cs-play{margin:2px 0 4px;padding-left:18px;font-size:.85rem;line-height:1.5}.cs-play li::marker{color:var(--cc)}
.cs-weap{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cs-wp{padding:6px 8px;border:1px solid #3d3324;border-radius:8px;background:#15111b;color:var(--fg);cursor:pointer;text-align:left}.cs-wp b{display:block;font-size:.9rem}.cs-wp small{font-size:.7rem;color:var(--muted)}
.cs-wp.on{border-color:var(--cc);box-shadow:0 0 0 1px var(--cc)}
.cs-desc{font-size:.75rem;color:var(--muted);margin:2px 0}
.cs-go{gap:8px;margin-top:auto}.cs-go #crGo{flex:1;min-height:46px;font-size:1.05rem}
@media (max-width:980px){.cs{grid-template-columns:1fr;height:auto;overflow:auto}.cs-stage{min-height:340px}.cs-roster #crClass{flex-direction:row;flex-wrap:wrap}}
.cs.locked .cs-ped{display:none}
#crName{font-size:1rem;padding:8px 10px}

/* boss life bar readability (2026-10-07): bright fill from the left over the painted frame + numbers; was a dark 'missing' overlay on a dim red bar */
#bossbar .bg div#bossFill{left:4.5%;right:auto;top:31%;height:38%;background:linear-gradient(#ff8a5c,#e8382a 45%,#9e1a12);box-shadow:0 0 8px #ff4a2a99,inset 0 1px 0 #ffd0b0;border-radius:2px;transition:width .15s}
#bossbar .bg::before{content:'';position:absolute;left:4.5%;right:4.5%;top:31%;height:38%;background:#1a0606;box-shadow:inset 0 0 0 1px #000}
#bossbar.p2 .bg div#bossFill{background:linear-gradient(#ffb15c,#ff5a1f 45%,#b1270c)}
#bossHpT{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);font:700 .72em var(--f-display);color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000;z-index:2;pointer-events:none}
#bossMarks{z-index:1}
#bossbar .bg div#bossMarks{background:none!important;left:5%;right:4%;top:22%;bottom:22%;height:auto;width:auto}
/* character select: start button always visible (sticky at the bottom of the info column on short screens) */
.cs-go{position:sticky;bottom:-16px;padding:10px 0 2px;background:linear-gradient(180deg,rgba(14,11,18,0),rgba(14,11,18,.96) 30%);z-index:2;flex-shrink:0}
@media (max-height:760px){.cs-info{gap:4px;padding:12px 16px}.cs-info ul{margin:2px 0}}
/* ===== title / save select (user 2026-10-07: "not pretty, the act-1 scene behind it is not cool") ===== */
#startOv.ts-ov{background:#07050a;padding:0;display:flex;align-items:center;justify-content:flex-end;overflow:hidden}
#startOv .ts-bg{position:absolute;inset:0;background:var(--ui-cs-bg, #120c10) center/cover no-repeat;filter:saturate(1.1) brightness(.62);transform:scale(1.06);animation:tsPan 28s ease-in-out infinite alternate}
#startOv .ts-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 60%,rgba(255,120,40,.18),transparent 55%),linear-gradient(90deg,rgba(5,3,8,.15) 0%,rgba(5,3,8,.35) 45%,rgba(5,3,8,.92) 70%),linear-gradient(0deg,rgba(5,3,8,.85),transparent 35%)}
@keyframes tsPan{from{transform:scale(1.06) translateX(0)}to{transform:scale(1.12) translateX(-2%)}}
#startOv .ts-hero{position:absolute;left:2%;bottom:0;height:96%;width:min(46vw,64vh);background:var(--ui-key-warrior, var(--ui-cls-warrior)) center bottom/contain no-repeat;filter:drop-shadow(0 0 30px rgba(255,90,40,.35)) drop-shadow(0 20px 30px #000);animation:tsBreath 6s ease-in-out infinite;pointer-events:none}
@keyframes tsBreath{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
#startOv .ts-embers{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#startOv .ts-embers i{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:#ffb347;box-shadow:0 0 8px 2px rgba(255,140,40,.8);opacity:0;animation:tsEmber 9s linear infinite}
#startOv .ts-embers i:nth-child(1){left:8%;animation-delay:0s}#startOv .ts-embers i:nth-child(2){left:16%;animation-delay:1.5s;animation-duration:11s}
#startOv .ts-embers i:nth-child(3){left:24%;animation-delay:3s}#startOv .ts-embers i:nth-child(4){left:31%;animation-delay:4.5s;animation-duration:12s}
#startOv .ts-embers i:nth-child(5){left:39%;animation-delay:.8s}#startOv .ts-embers i:nth-child(6){left:46%;animation-delay:2.2s;animation-duration:10s}
#startOv .ts-embers i:nth-child(7){left:53%;animation-delay:5s}#startOv .ts-embers i:nth-child(8){left:12%;animation-delay:6.5s;animation-duration:13s}
#startOv .ts-embers i:nth-child(9){left:28%;animation-delay:7.2s}#startOv .ts-embers i:nth-child(10){left:42%;animation-delay:3.7s;animation-duration:14s}
#startOv .ts-embers i:nth-child(11){left:60%;animation-delay:6s}#startOv .ts-embers i:nth-child(12){left:5%;animation-delay:4s;animation-duration:12s}
@keyframes tsEmber{0%{transform:translate(0,0) scale(1);opacity:0}10%{opacity:1}100%{transform:translate(60px,-105vh) scale(.3);opacity:0}}
#startOv .card.ts-panel{position:relative;z-index:2;width:min(560px,94vw);max-width:none;max-height:100%;margin:0 4vw 0 0;padding:22px 26px 20px;background:linear-gradient(180deg,rgba(18,12,16,.78),rgba(10,7,12,.9));border:1px solid rgba(242,198,109,.35);border-radius:18px;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 30px 80px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,220,150,.12);backdrop-filter:blur(6px);overflow:auto;--bw:0}
#startOv .card.ts-panel::before,#startOv .card.ts-panel::after{display:none}
#startOv .ts-brand{display:flex;flex-direction:column;align-items:center;margin-bottom:8px}
#startOv .ts-brand .logo{width:120px;margin:0 0 -6px;aspect-ratio:464/412;animation:tsGlow 4s ease-in-out infinite}
@keyframes tsGlow{0%,100%{filter:drop-shadow(0 0 10px rgba(255,60,60,.35)) drop-shadow(0 8px 14px #000)}50%{filter:drop-shadow(0 0 26px rgba(255,80,60,.7)) drop-shadow(0 8px 14px #000)}}
#startOv .ts-title{position:static;font:800 clamp(2.2rem,4.6vw,3.4rem)/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(180deg,#fff3c4 0%,#f5c968 45%,#b9732a 75%,#7a3f12 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #2a1204) drop-shadow(0 0 18px rgba(255,160,60,.35));white-space:nowrap}
#startOv .ts-sub{margin:8px 0 0;color:#d8c39a;font-size:.9rem;letter-spacing:.02em;text-align:center}
#startOv .ts-brand::after{content:"";width:70%;height:1px;margin-top:12px;background:linear-gradient(90deg,transparent,rgba(242,198,109,.7),transparent)}
#startOv .ts-lbl{margin:10px 0 8px;color:#f2c66d;font:700 .78rem var(--f-display);letter-spacing:.18em;text-transform:uppercase}
#startOv .slots{display:flex;flex-direction:column;gap:10px}
#startOv .slotcard{grid-template-columns:72px minmax(0,1fr) auto;min-height:84px;padding:8px 14px 8px 8px;border-radius:12px;border:1px solid rgba(242,198,109,.22);background:linear-gradient(100deg,rgba(60,22,18,.55),rgba(16,12,18,.85) 55%);transition:transform .15s,border-color .15s,box-shadow .15s}
#startOv .slotcard:hover,#startOv .slotcard:focus-visible{transform:translateX(-4px);border-color:#f2c66d;box-shadow:0 0 0 1px #f2c66d,0 0 24px rgba(242,150,60,.35)}
#startOv .slotcard .pv{width:72px;height:72px;border-radius:10px;background-size:cover;background-position:center top;border:1px solid rgba(242,198,109,.45);box-shadow:inset 0 0 12px #000}
#startOv .slotcard[data-new] .pv{background:radial-gradient(circle,rgba(242,198,109,.18),rgba(0,0,0,.5));font-size:2rem!important;border-style:dashed}
#startOv .slotcard b{font:700 1.15rem var(--f-display);color:#fff1cf}
#startOv .slotcard small{color:#bfae8f}
#startOv .ts-foot{margin-top:14px;justify-content:center;gap:10px}
@media (max-width:820px){#startOv.ts-ov{justify-content:center}#startOv .ts-hero{opacity:.35;left:50%;transform:translateX(-50%);animation:none}#startOv .card.ts-panel{margin:0}}
@media (max-height:620px){#startOv .ts-brand .logo{width:80px}#startOv .slotcard{min-height:70px}}
#startOv .card.ts-panel{background:linear-gradient(180deg,rgba(26,14,14,.82),rgba(10,6,10,.92))!important;border-image:none!important}
#startOv .ts-title{background:linear-gradient(180deg,#fffbe6 0%,#ffd77a 40%,#e89a3a 70%,#a45a1c 100%);-webkit-background-clip:text;background-clip:text}
#startOv .ts-title{text-shadow:none!important}
#guide .g-choice{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px}#guide .g-choice:empty{display:none}#guide .g-choice .btn{min-width:180px;pointer-events:auto}
#wpTabs .wp-town{margin-left:6px;padding:6px 12px;border-radius:8px;border:1px solid #6b5a35;background:linear-gradient(#2a2216,#17120c);color:#f2d79a;font:600 .85rem var(--f-display);cursor:pointer}
#wpTabs .wp-town:hover:not([disabled]){border-color:var(--gold);box-shadow:0 0 12px rgba(242,198,109,.3)}#wpTabs .wp-town.here{opacity:.55;cursor:default}
/* phone gate: in-app browser → open in Chrome · portrait → rotate / full screen */
#mobGate{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(ellipse at 50% 30%,#2a1414,#07050a 70%);color:#f3e6c8;text-align:center}
#mobGate[hidden]{display:none}
#mobGate .mg-card{max-width:420px;width:100%}
#mobGate h3{font:700 1.35rem var(--f-display);color:#ffd77a;margin:14px 0 8px}
#mobGate p{color:#cdbb98;line-height:1.5;margin:6px 0 14px;font-size:.95rem}
#mobGate .btn{display:block;width:100%;min-height:50px;margin:8px 0;font-size:1.05rem;text-decoration:none;line-height:50px;padding:0}
#mobGate .mg-ic{font-size:3rem}
#mobGate .mg-hint{font-size:.8rem;opacity:.75}
#mobGate .mg-phone{width:70px;height:120px;margin:0 auto;border:4px solid #f2c66d;border-radius:14px;position:relative;animation:mgRot 2.4s ease-in-out infinite;box-shadow:0 0 24px rgba(242,198,109,.35)}
#mobGate .mg-phone i{position:absolute;left:50%;bottom:6px;width:16px;height:4px;margin-left:-8px;border-radius:3px;background:#f2c66d}
@keyframes mgRot{0%,25%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
/* ===== phones in landscape (short screens, browser bars eat the height) ===== */
@media (max-height:540px){
  #startOv .ts-hero{width:38vw;height:100%;left:0}
  #startOv .card.ts-panel{width:min(58vw,520px);max-height:calc(100% - 12px);margin:6px 2vw 6px 0;padding:10px 14px}
  #startOv .ts-brand{flex-direction:row;justify-content:center;gap:10px;margin-bottom:2px}
  #startOv .ts-brand .logo{width:42px;margin:0}
  #startOv .ts-title{font-size:1.45rem}
  #startOv .ts-sub,#startOv .ts-brand::after{display:none}
  #startOv .ts-lbl{margin:4px 0}
  #startOv .slots{gap:6px}
  #startOv .slotcard{min-height:50px;grid-template-columns:44px minmax(0,1fr) auto;padding:4px 10px 4px 4px}
  #startOv .slotcard .pv{width:44px;height:44px}
  #startOv .slotcard b{font-size:.95rem}#startOv .slotcard small{font-size:.7rem}
  #startOv .ts-foot{margin-top:6px}#startOv .ts-foot .btn{min-height:34px;padding:4px 12px}
  .cs{grid-template-columns:68px minmax(0,1fr) minmax(260px,44vw)!important;height:100%!important;gap:8px;padding:6px!important;overflow:hidden!important}
  .cs-cap{display:none}.cs-roster #crClass{flex-direction:column!important;gap:6px}
  .cs-cls{padding:4px;justify-content:center}.cs-cls .cs-cn{display:none}.cs-port{width:52px;height:56px}
  .cs-stage{min-height:0!important}
  .cs-name{left:10px;top:6px}.cs-name small{font-size:.65rem}.cs-name h1{font-size:1.3rem}.cs-name span{font-size:.7rem}
  .cs-ped{width:96px;right:4px;bottom:2px}.cs-ped canvas{width:96px}.cs-ped small{display:none}
  .cs-info{padding:8px 10px!important;gap:3px!important;font-size:.85rem}
  .cs-tag{font-size:.8rem;line-height:1.35}.cs-rate{font-size:.72rem;grid-template-columns:56px 1fr}.cs-play{display:none}
  .cs-wp{padding:4px 6px}.cs-wp small{display:none}.cs-desc{display:none}
  .cs-go #crGo{min-height:38px;font-size:.95rem}
}
/* full-screen button (phones): title + character screens */
.fs-btn{position:absolute;top:8px;left:8px;z-index:5;min-height:36px;padding:4px 12px;border-radius:999px;border:1px solid rgba(242,198,109,.55);background:rgba(10,7,12,.75);color:#ffd77a;font:700 .85rem var(--f-display);cursor:pointer}
.fs-btn[hidden]{display:none}
.fs-tip{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9998;max-width:min(420px,92vw);padding:16px;border-radius:14px;border:1px solid #f2c66d;background:#120c10;color:#efe3c6;text-align:center;box-shadow:0 20px 60px #000}
.fs-tip .btn{margin:6px 4px 0}
#createOv .fs-btn{top:auto;bottom:8px;left:6px;padding:4px 8px;font-size:.75rem}
/* ===== touch controls v2 (fixed to the screen) ===== */
#touch.tc{position:fixed;inset:0;z-index:30;pointer-events:none;-webkit-user-select:none;user-select:none}
#touch.tc .tc-zone{position:absolute;left:0;bottom:0;width:40vw;height:62vh;pointer-events:auto;touch-action:none}
#touch.tc .tc-base{position:absolute;left:16vh;top:70%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px solid rgba(255,255,255,.28);background:radial-gradient(circle,rgba(20,24,50,.35),rgba(20,24,50,.15));opacity:.55;transition:opacity .15s}
#touch.tc .tc-base.on{opacity:1}
#touch.tc .tc-knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(255,240,200,.85),rgba(242,198,109,.55));box-shadow:0 0 14px rgba(242,198,109,.5)}
#touch.tc .tc-b{position:absolute;pointer-events:auto;touch-action:none;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(20,24,50,.5);color:#fff;font:700 18px var(--f-display);display:flex;align-items:center;justify-content:center;padding:0;width:58px;height:58px}
#touch.tc .tc-b.on{background:rgba(242,198,109,.55);border-color:#ffd77a;transform:scale(.94)}
#touch.tc .tc-atk{width:84px;height:84px;right:calc(env(safe-area-inset-right) + 3vw);bottom:9vh;font-size:30px;border-color:rgba(255,200,120,.6);background:rgba(90,30,20,.55)}
#touch.tc .tc-jump{width:68px;height:68px;right:calc(env(safe-area-inset-right) + 3vw + 96px);bottom:5vh;font-size:26px}
#touch.tc .tc-roll{width:60px;height:60px;right:calc(env(safe-area-inset-right) + 3vw + 12px);bottom:calc(9vh + 96px);font-size:24px}
#touch.tc .tc-s{width:54px;height:54px;font-size:18px;background:rgba(40,30,70,.55)}
#touch.tc .tc-s0{right:calc(env(safe-area-inset-right) + 3vw + 96px);bottom:calc(5vh + 80px)}
#touch.tc .tc-s1{right:calc(env(safe-area-inset-right) + 3vw + 160px);bottom:calc(5vh + 36px)}
#touch.tc .tc-s2{right:calc(env(safe-area-inset-right) + 3vw + 82px);bottom:calc(9vh + 160px)}
#touch.tc .tc-s3{right:calc(env(safe-area-inset-right) + 3vw + 150px);bottom:calc(5vh + 116px)}
#touch.tc .tc-sm{width:46px;height:46px;font-size:13px}
#touch.tc .tc-loot{right:calc(env(safe-area-inset-right) + 3vw + 14px);bottom:calc(9vh + 172px)}
#touch.tc .tc-up{right:calc(env(safe-area-inset-right) + 3vw + 214px);bottom:calc(5vh + 4px)}
#touch.tc .tc-hp{left:calc(env(safe-area-inset-left) + 2vw);top:30vh;background:rgba(120,20,30,.55)}
#touch.tc .tc-mp{left:calc(env(safe-area-inset-left) + 2vw + 56px);top:30vh;background:rgba(20,40,120,.55)}
/* touch layout v2b: cluster above the HUD orb, skills in a row, loot/up between */
#touch.tc{--R:calc(env(safe-area-inset-right) + 1.5vw);--B:24vh}
#touch.tc .tc-atk{right:var(--R);bottom:var(--B)}
#touch.tc .tc-jump{right:calc(var(--R) + 92px);bottom:calc(var(--B) - 6px)}
#touch.tc .tc-roll{width:56px;height:56px;right:calc(var(--R) + 12px);bottom:calc(var(--B) + 92px)}
#touch.tc .tc-loot{right:calc(var(--R) + 82px);bottom:calc(var(--B) + 96px)}
#touch.tc .tc-up{right:calc(var(--R) + 136px);bottom:calc(var(--B) + 96px)}
#touch.tc .tc-s{width:52px;height:52px}
#touch.tc .tc-s0{right:var(--R);bottom:calc(var(--B) + 160px)}
#touch.tc .tc-s1{right:calc(var(--R) + 58px);bottom:calc(var(--B) + 160px)}
#touch.tc .tc-s2{right:calc(var(--R) + 116px);bottom:calc(var(--B) + 160px)}
#touch.tc .tc-s3{right:calc(var(--R) + 174px);bottom:calc(var(--B) + 160px)}
#touch.tc .tc-base{left:12vw;top:62%;opacity:.3}
#touch.tc .tc-buff{background:rgba(30,80,60,.55);border-color:rgba(140,230,180,.5);font-size:14px}
#touch.tc .tc-s4{right:calc(var(--R) + 232px);bottom:calc(var(--B) + 160px)}
#touch.tc .tc-s5{right:calc(var(--R) + 290px);bottom:calc(var(--B) + 160px)}
@media (max-height:380px){#touch.tc{--B:20vh}#touch.tc .tc-s{width:46px;height:46px}}
#touch.tc .tc-auto{left:calc(env(safe-area-inset-left) + 2vw + 112px);top:30vh;width:58px;font-size:12px;border-radius:23px;background:rgba(30,60,40,.55)}
body.bot-on #touch.tc .tc-auto{background:rgba(242,198,109,.85);color:#1a1006;border-color:#ffe29a;box-shadow:0 0 14px rgba(242,198,109,.7)}
/* phones: hints go top-centre so they never sit on the joystick */
@media (pointer:coarse){#tipBox{left:50%!important;right:auto!important;bottom:auto!important;top:4.6em!important;transform:translateX(-50%);max-width:min(560px,60%)!important;font-size:.85em}}
#touch.tc .tc-town{left:calc(env(safe-area-inset-left) + 2vw + 178px);top:30vh}
@media (pointer:coarse){#tipBox{display:flex;align-items:center;gap:10px;height:auto!important;min-height:0!important;padding:.5em .8em!important}#tipBox .tip-ok{flex:none;min-height:2.2em}}
#touch.tc{z-index:75} /* above the forced-tutorial overlay (#guide z 70), which used to swallow every touch */
#guide .g-hl{position:absolute;z-index:3;padding:0;border:3px solid #ffd77a;border-radius:.6em;background:rgba(255,215,122,.12);box-shadow:0 0 0 4px rgba(255,215,122,.25),0 0 24px rgba(255,200,90,.8);cursor:pointer;animation:gHl 1s ease-in-out infinite;pointer-events:auto}
#guide .g-hl span{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;padding:.2em .6em;border-radius:.5em;background:#ffd77a;color:#1a1006;font:700 .8em var(--f-display,sans-serif)}
@keyframes gHl{50%{box-shadow:0 0 0 8px rgba(255,215,122,.1),0 0 34px rgba(255,200,90,1)}}
/* ===== short screens (phones in landscape): panels give their height to the content, not to frames/tabs ===== */
@media (max-height:540px){
  .ov{padding:4px!important}
  .ov>.card.bd{border-image:none!important;border:1px solid #6b5a35!important;padding:8px 10px!important;max-height:calc(100dvh - 8px)!important;height:calc(100dvh - 8px)}
  .ov>.card.bd::before,.ov>.card.bd::after{display:none!important}
  .gp-head{flex-wrap:nowrap!important;gap:6px!important;margin-bottom:4px!important;padding-bottom:4px!important;align-items:center}
  .bd-tabs{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;gap:4px!important}
  .bd-tabs button{min-height:30px!important;min-width:0!important;padding:3px 10px!important;font-size:.78rem!important;border-image:none!important;border:1px solid #5a4a2c!important;background:#16120e!important;white-space:nowrap}
  .bd-tabs button.on{background:#e8b960!important;color:#1a1206!important}
  .bd-tabs kbd{display:none}
  .gp-head .btn{min-height:30px!important;padding:2px 10px!important;font-size:.8rem}
  #passOv .ps-shell{height:calc(100dvh - 8px)!important;width:calc(100vw - 8px)!important;padding:0!important}
  #passOv .ps-head{padding:4px 8px!important}
  #passOv .ps-brand,#passOv .ps-hint,#passOv .ps-legend,#passOv .ps-mini{display:none!important}
  #passOv .ps-bar,#passOv .ps-tools{padding:2px 8px!important;gap:6px!important;margin:0!important;min-height:0!important}
  #passOv .ps-bar{display:flex;align-items:center}
  #passOv .ps-seg button{padding:3px 10px!important;font-size:.78rem!important;min-height:28px!important}
  #passOv .ps-tools .btn,#passOv .ps-tools select{min-height:30px!important;padding:2px 8px!important;font-size:.8rem}
  #passOv .ps-search{min-height:30px!important;height:30px}
  #passOv .ps-main{padding:0 6px!important;gap:6px!important;grid-template-columns:minmax(0,1fr) 230px!important}
  #passOv .ps-foot{padding:4px 8px!important;gap:6px!important}
  #passOv .ps-foot .btn,#passOv .ps-foot select{min-height:30px!important;padding:2px 8px!important;font-size:.78rem}
  #passOv .ps-pts{font-size:.8rem}
}
/* ===================== Passive tree v3: full-screen tree, floating docks (desktop + phone) ===================== */
#passOv{padding:0!important}
#passOv .ps-shell.ps2{position:fixed;inset:0;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0;border-radius:0;padding:0!important;display:flex;flex-direction:column;border:0!important;border-image:none!important;background:radial-gradient(ellipse at 50% 45%,#16243a 0%,#0b1220 55%,#05080f 100%)!important;overflow:hidden}
#passOv .ps2::before,#passOv .ps2::after{display:none!important}
.ps2 .ps-top{flex:none;display:flex;align-items:center;gap:8px;padding:6px 10px;background:linear-gradient(#141b26,#0d131c);border-bottom:1px solid #6b5a35;box-shadow:0 2px 12px rgba(0,0,0,.5);z-index:6;min-height:46px}
.ps2 .ps-seg{display:flex;flex:none;border:1px solid #4a3d26;border-radius:9px;overflow:hidden}
.ps2 .ps-seg button{padding:6px 12px;font:600 .85rem var(--f-display);background:#141019;color:#c9b48a;border:0;cursor:pointer;min-height:34px}
.ps2 .ps-seg button.on{background:linear-gradient(#f2c66d,#c98f32);color:#1a1006}
.ps2 .ps-pts{display:flex;gap:6px;flex:none;align-items:center;margin:0;padding:0;background:none;border:0}
.ps2 .ps-pts .pp{display:flex;align-items:baseline;gap:4px;padding:4px 10px;border-radius:8px;border:1px solid #3c3326;background:#120e14;color:#c9b48a;font-size:.78rem;white-space:nowrap}
.ps2 .ps-pts .pp b{font:700 1.05rem var(--f-display);color:#ffe3a1}
.ps2 .ps-pts .pp.hot{border-color:#f2c66d;box-shadow:0 0 10px rgba(242,198,109,.35)}.ps2 .ps-pts .pp.hot b{color:#7dffb0}
.ps2 .ps-pts .pp.plan button{margin-left:4px;padding:2px 8px;border-radius:6px;border:1px solid #6b5a35;background:#2a2014;color:#ffd77a;font-size:.75rem;cursor:pointer}
.ps2 .ps-search{position:relative;flex:1 1 220px;max-width:340px;min-width:120px;display:flex;align-items:center;gap:6px;height:34px;padding:0 10px;border-radius:9px;border:1px solid #3c3326!important;background:#0c0a10!important;border-image:none!important}
.ps2 .ps-search input{flex:1;min-width:0;height:100%;border:0!important;background:none!important;color:var(--fg);font-size:.85rem;padding:0!important}
.ps2 .ps-search .ps-results{top:38px;left:0;right:auto;width:min(360px,90vw);z-index:20}
.ps2 .ps-tbtns{display:flex;gap:6px;align-items:center;margin-left:auto;flex:none}
.ps2 .ps-tbtns select{height:34px;max-width:140px;border-radius:8px;background:#120e14;color:#e8d7b5;border:1px solid #3c3326;font-size:.8rem}
.ps2 .ps-tb{height:34px;min-width:34px;padding:0 10px;border-radius:8px;border:1px solid #5a4a2c;background:#16120e;color:#f2d79a;font:600 .82rem var(--f-display);cursor:pointer;white-space:nowrap}
.ps2 .ps-tb:hover{border-color:#f2c66d}.ps2 .ps-tb.on{background:linear-gradient(#f2c66d,#c98f32);color:#1a1006;border-color:#ffe29a}
.ps2 .ps-tb.ps-rpg{border-color:#8a4a44;color:#ffb0a0}.ps2 .ps-tb.ps-rpg:hover{border-color:#ff8f7a}
.ps2 .ps-x{background:#2a1416;border-color:#8a4a44;color:#ffb0a0}
.ps2 .ps-zg{display:flex;align-items:center;border:1px solid #5a4a2c;border-radius:8px;overflow:hidden;height:34px}
.ps2 .ps-zg button{width:32px;height:100%;border:0;background:#16120e;color:#f2d79a;font-size:1.1rem;cursor:pointer}.ps2 .ps-zg span{min-width:44px;text-align:center;font-size:.75rem;color:#c9b48a}
.ps2 .ps-stage{position:relative;flex:1;min-height:0}
.ps2 .ps-wrap{position:absolute!important;inset:0;border:0!important;border-radius:0!important;min-height:0}
.ps2 .ps-view{position:absolute;inset:0;width:auto!important;height:auto!important}
.ps2 .ps-cap{display:none}
.ps2 .ps-mini{position:absolute;right:12px;bottom:12px;padding:4px;border-radius:10px;border:1px solid #4a3d26;background:rgba(8,10,16,.85);z-index:3}
.ps2 .ps-mini small{display:none}
.ps2 .ps-dock,.ps2 .ps-detail{position:absolute;z-index:4;border:1px solid #6b5a35;border-radius:12px;background:rgba(12,10,16,.93);box-shadow:0 14px 40px rgba(0,0,0,.6);backdrop-filter:blur(4px);color:var(--fg);display:none}
.ps2 .ps-dh{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px 6px;border-bottom:1px solid #3c3326}
.ps2 .ps-dh b{font:700 .9rem var(--f-display);color:#ffd77a}
.ps2 .ps-dh button,.ps2 .ps-dx{width:28px;height:28px;border-radius:7px;border:1px solid #5a4a2c;background:#1a1410;color:#f2d79a;cursor:pointer}
.ps2.sum-on .ps-sumdock{display:flex;flex-direction:column;left:10px;top:10px;bottom:10px;width:300px}
.ps2.sum-on.leg-on .ps-sumdock{bottom:210px}
.ps2 .ps-dcount{display:flex;gap:10px;flex-wrap:wrap;padding:6px 10px;font-size:.72rem;color:#a99b80;border-bottom:1px solid #2a241b}.ps2 .ps-dcount b{color:#ffe3a1}
.ps2 .ps-dbody{flex:1;overflow:auto;padding:6px 10px 10px;font-size:.8rem;line-height:1.55}
.ps2 .ps-dbody p{margin:0;color:#e7dcc3}.ps2 .ps-dbody p.neg{color:#ff8f7a}
.ps2 .ps-more{margin-top:8px;width:100%;padding:6px;border-radius:8px;border:1px solid #5a4a2c;background:#16120e;color:#f2d79a;cursor:pointer;font-size:.78rem}
.ps2.leg-on .ps-legdock{display:block;left:10px;bottom:10px;width:300px}
.ps2 .ps-legend{display:grid!important;grid-template-columns:1fr 1fr;gap:6px 10px;padding:8px 10px 10px;font-size:.75rem;color:#cdbf9f;position:static!important;background:none!important;border:0!important}
.ps2 .ps-legend .lg{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle;border:2px solid #f2c66d}
.ps2 .ps-legend .lg.own{background:#f2c66d}.ps2 .ps-legend .lg.can{background:none;border-color:#7de0c8}.ps2 .ps-legend .lg.no{background:#2a2f3a;border-color:#4a5568}.ps2 .ps-legend .lg.plan{background:none;border-color:#b58cff;border-style:dashed}
.ps2.det-on .ps-detail{display:block;right:10px;top:10px;width:340px;max-height:calc(100% - 180px);overflow:auto;padding:0!important}
.ps2 .ps-detail #psDetail{padding:10px 12px 12px}
.ps2 .ps-dx{position:absolute;top:8px;right:8px;z-index:2}
.ps2.build-on .ps-buildpop{display:block;right:10px;top:10px;width:320px;z-index:5}
.ps2 .ps-brow{display:flex;gap:6px;padding:10px}.ps2 .ps-brow select{flex:1;min-width:0;height:34px;border-radius:8px;background:#120e14;color:#e8d7b5;border:1px solid #3c3326}
.ps2 .ps-brow .btn,.ps2 .ps-reset{min-height:34px!important;padding:0 10px!important;font-size:.8rem!important}
.ps2 .ps-short{padding:0 10px 8px;display:flex;flex-wrap:wrap;gap:4px;font-size:.75rem}
.ps2 .ps-reset{margin:0 10px 10px;width:calc(100% - 20px);border-color:#8a4a44!important;color:#ffb0a0!important}
/* tree readability: owned path glows, the rest steps back */
.ps2 #psSvg .nd:not(.own):not(.can):not(.sel):not(.plan){opacity:.62}
.ps2 #psSvg .nd.own{filter:drop-shadow(0 0 6px rgba(242,198,109,.9))}
/* phones / small windows: icons only, tree first, details as a bottom sheet */
.ps2.narrow .ps-top{gap:5px;padding:4px 6px;overflow-x:auto;scrollbar-width:none;min-height:42px}
.ps2.narrow .ps-tb span{display:none}
.ps2.narrow .ps-tbtns select,.ps2.narrow .ps-zg{display:none}
.ps2.narrow .ps-pts .pp{padding:3px 7px;font-size:.7rem}.ps2.narrow .ps-pts .pp small:first-child{display:none}
.ps2.narrow .ps-seg button{padding:4px 8px;font-size:.75rem;min-height:30px}
.ps2.narrow .ps-search{flex:1 1 110px;max-width:200px;height:32px}
.ps2.narrow .ps-tb{height:32px;min-width:32px;padding:0 8px}
.ps2.narrow .ps-mini{display:none}
.ps2.narrow.det-on .ps-detail{left:0;right:0;top:auto;bottom:0;width:auto;max-height:58%;border-radius:14px 14px 0 0;border-bottom:0}
.ps2.narrow.sum-on .ps-sumdock{top:6px;bottom:6px;left:6px;width:min(300px,70vw)}
.ps2.narrow.leg-on .ps-legdock{left:6px;bottom:6px;width:min(300px,70vw)}
.ps2.narrow.build-on .ps-buildpop{right:6px;top:6px;width:min(320px,80vw)}
/* v3 fixes: one-line top bar; detail = flex column with the action area pinned; phones in landscape get a side sheet */
.ps2 .ps-top{flex-wrap:nowrap!important}
.ps2 .ps-tbtns{flex-wrap:nowrap}
@media (max-width:1500px){.ps2 #psZFit span,.ps2 #psHome span{display:none}}
@media (max-width:1250px){.ps2 .ps-tbtns select{display:none}}
.ps2.det-on .ps-detail{display:flex!important;flex-direction:column;overflow:hidden!important}
.ps2 .ps-detail #psDetail{display:flex;flex-direction:column;min-height:0;flex:1;padding:0!important}
.ps2 .ps-detail .ps-dscroll{flex:1;min-height:0;overflow:auto;padding:12px 12px 6px}
.ps2 .ps-detail .ps-act{flex:none;border-top:1px solid #3c3326;background:rgba(12,10,16,.98)}
.ps2.narrow.det-on .ps-detail{left:auto!important;right:0!important;top:0!important;bottom:0!important;width:min(380px,50vw)!important;max-height:none!important;border-radius:12px 0 0 12px!important;border:1px solid #6b5a35!important;border-right:0!important}
.ps2.narrow .ps-detail .ps-nicon{width:38px;height:38px}.ps2.narrow .ps-detail .ps-nhead h3{font-size:15px}.ps2.narrow .ps-detail .ps-dscroll{padding:8px 10px 4px;font-size:.85rem}
.ps2.narrow .ps-detail .ps-act{padding:6px 8px!important}.ps2.narrow .ps-detail .ps-act .ps-prim{min-height:40px;font-size:.9rem}
@media (orientation:portrait){.ps2.narrow.det-on .ps-detail{left:0!important;right:0!important;top:auto!important;width:auto!important;max-height:60%!important;border-radius:14px 14px 0 0!important}}
.ps2 .ps-view{touch-action:none}
/* class change (js/ui/jobchange.js) */
#jobBtn{position:absolute;top:3.4em;left:50%;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:.1em;padding:.45em 1.2em;border-radius:.7em;border:1px solid #f3c96b;background:linear-gradient(#4a2a10,#2a160a);color:#ffe6a8;cursor:pointer;box-shadow:0 0 14px rgba(255,190,90,.55);animation:jobPulse 1.6s ease-in-out infinite}
#jobBtn[hidden]{display:none}
#jobBtn b{font:700 .95em var(--f-display)}#jobBtn small{font-size:.66em;opacity:.85}
@keyframes jobPulse{50%{box-shadow:0 0 26px rgba(255,200,110,.9)}}
.job-card{max-width:900px}
.job-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0 12px}
.job-c{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 10px;border-radius:10px;border:2px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:var(--fg);cursor:pointer;text-align:center;font:inherit}
.job-c canvas{width:100%;max-width:150px;height:auto;background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--jc) 22%,transparent),transparent 70%)}
.job-c b{font:700 1.1rem var(--f-display);color:var(--jc)}.job-c small{color:var(--muted);font-size:.78rem}.job-c span{font-size:.8rem}
.job-c em{font-style:normal;font-size:.72rem;color:#9fe39a}.job-c.lock em{color:#e7a07a}.job-c.lock{opacity:.8}
.job-c.on{border-color:var(--jc);box-shadow:0 0 16px color-mix(in srgb,var(--jc) 45%,transparent)}
.job-go{justify-content:space-between;align-items:center;gap:10px}
@media (max-width:700px){.job-grid{grid-template-columns:repeat(2,1fr)}}
/* creation: villager sex picker */
.cs-sex{display:flex;gap:8px;margin:0 0 8px}.cs-sex button{flex:1}
/* villager start: no key art, the live full-body preview takes the stage */
.cs.villager .cs-ped{right:50%;transform:translateX(50%);bottom:4%;width:min(62%,420px);background:radial-gradient(ellipse at 50% 88%,rgba(0,0,0,.55),transparent 60%)}
.cs.villager .cs-ped canvas{width:100%}
@media (max-width:900px),(max-height:520px){.cs.villager .cs-ped{width:min(60%,260px)}.cs.villager .cs-ped canvas{width:100%}}
/* minimal UI (js/ui/uimin.js): only what the fight needs stays */
#uiMinBtn{position:absolute;right:.5em;top:2.3em;z-index:45;font:600 .72em var(--f-body,sans-serif);padding:.25em .6em;border-radius:.6em;border:1px solid rgba(255,255,255,.18);background:rgba(10,12,20,.55);color:#e8eefc;cursor:pointer;opacity:.6}
#uiMinBtn:hover{opacity:1}
#stage.ui-min #uiMinBtn{top:.5em;opacity:.45}
#stage.ui-min #top,#stage.ui-min #xpBar,#stage.ui-min #quest,#stage.ui-min #quota,#stage.ui-min #jobBtn,
#stage.ui-min #bar .menubtn,#stage.ui-min #bar .sep,#stage.ui-min #bar .slot .n,#stage.ui-min #bar .slot.empty{display:none!important}
/* passive-tree jewels (data/jewels.js) */
.jw-card{border:1px solid #8fb8ff;border-radius:8px;padding:7px 9px;margin:6px 0;background:rgba(10,14,24,.55);font-size:12.5px}
.jw-card b{display:block;font-size:13.5px}.jw-card small{display:block;color:#9fb0c4;margin-bottom:3px}.jw-card p{margin:2px 0;color:#d8e2ee}
.jw-card button,.jw-b button{margin:5px 6px 0 0;padding:4px 10px;border-radius:6px;border:1px solid #5a6b80;background:#1c2636;color:#e8eef6;cursor:pointer}
.jw-card button:disabled{opacity:.45;cursor:not-allowed}
.nd.k-jewel polygon:first-of-type{fill:#141a24;stroke:var(--c);stroke-width:3}.nd.k-jewel.own polygon:first-of-type{fill:#2a2418;stroke:#f2c66d}
#guide .g-skip{display:block;margin:.5em auto 0;font-size:.8em;padding:.25em .9em;opacity:.85}
#guide .g-skip{pointer-events:auto}
/* job change screen: flaming sword-slash key art (user 2026-10-09: "เอาไปตกแต่งใน ui เปลี่ยนคลาส") */
.job-card{position:relative;overflow:hidden;isolation:isolate}
.job-card>*:not(.job-art){position:relative;z-index:1}
.job-art{position:absolute;z-index:0;right:-6%;top:50%;width:min(62%,560px);transform:translateY(-50%);opacity:.32;pointer-events:none;filter:saturate(1.1);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 35%);mask-image:linear-gradient(90deg,transparent 0,#000 35%);animation:jobArt 6s ease-in-out infinite alternate}
@keyframes jobArt{from{transform:translateY(-50%) scale(1)}to{transform:translateY(-52%) scale(1.04)}}
@media (max-width:700px){.job-art{width:90%;right:-25%;opacity:.22}}
@media (prefers-reduced-motion:reduce){.job-art{animation:none}}
/* PoE2-style support socket picker (2026-10-09) */
#gemOv>.card{position:relative}
.sup-pick{position:absolute;z-index:30;max-height:min(70vh,560px);overflow:auto;background:#15110d;border:1px solid #c99a4a;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.75),0 0 0 1px rgba(242,198,109,.15) inset;padding:10px}
.sup-pick .sp-head{position:sticky;top:-10px;z-index:1;background:#15110d;padding:4px 0;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;color:#f2d79a}
.sup-pick .sp-x{background:none;border:0;color:#d8c9a6;font-size:1rem;cursor:pointer;min-width:32px;min-height:32px}
.sup-pick .sp-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.sup-pick .sp-cur{display:flex;align-items:center;gap:8px;padding:6px 8px;margin-bottom:8px;border:1px solid #3d3324;border-radius:8px;background:#1d1812}
.sup-pick .sp-cur span{flex:1}
.sup-pick .sp-list{display:flex;flex-direction:column;gap:4px}
.sup-pick .sp-row{display:flex;gap:8px;align-items:flex-start;text-align:left;padding:7px 8px;border:1px solid #3a2f20;border-radius:8px;background:#1b1610;color:#efe3c6;cursor:pointer;font:inherit}
.sup-pick .sp-row:hover:not([disabled]){border-color:#f2c66d;background:#241d14}
.sup-pick .sp-row span{display:flex;flex-direction:column;gap:2px;min-width:0}
.sup-pick .sp-row small{color:#bfb197;font-size:.78rem;line-height:1.3}
.sup-pick .sp-row .sp-cat{color:#8fb8ff}
.sup-pick .sp-row.no{opacity:.55;cursor:not-allowed}
.sup-pick .sp-row.no small:last-child{color:#f4a39a}
.sup-pick .sp-book{width:100%;margin-top:8px}
.sup-pick .sp-more{display:block;width:100%;margin-top:8px;background:none;border:0;color:#bfb197;text-align:left;cursor:pointer;padding:6px 2px;font:inherit}
/* flasks on the crafting table (2026-10-09) */
#craftOv .fl-slots{display:flex;gap:6px;margin:4px 0 6px}
#craftOv .fl-mods{display:flex;flex-direction:column;gap:4px;max-height:340px;overflow:auto}
#craftOv .fl-mod{display:flex;text-align:left;padding:7px 9px;border:1px solid #3a2f20;border-radius:8px;background:#1b1610;color:#efe3c6;cursor:pointer;font:inherit}
#craftOv .fl-mod span{display:flex;flex-direction:column;gap:2px}
#craftOv .fl-mod small{color:#bfb197;font-size:.8rem}
#craftOv .fl-mod:hover:not([disabled]){border-color:#f2c66d}
#craftOv .fl-mod.on{border-color:#5fd18b;background:#14231a;cursor:default}
#craftOv .fl-mod.no{opacity:.55;cursor:not-allowed}
#craftOv .fl-mod small.warn{color:#f4a39a}
#craftOv .cr-fl{border-color:#5a4a2c}
/* buff gem slots (2026-10-09) */
#gpSlots .buffhd{margin:10px 0 4px;padding:4px 8px;border-left:3px solid #6fd3a0;color:#9fe6c0;font:600 .85rem var(--f-display)}
#gpSlots .sk.buffsl{border-color:rgba(111,211,160,.45)}
#hotbar .slot.bslot,.slot.bslot{box-shadow:inset 0 0 0 2px rgba(111,211,160,.45)}
/* v247 shop currency: bigger icons with names */
.sh-pr.sh-cost{gap:5px;padding:3px 16px 3px 10px}.sh-pr.sh-cost b{font-size:15px}.sh-pr.sh-cost small{font-size:11.5px;font-weight:600;color:#d9c995;white-space:nowrap}
.sh-pr.sh-cost.no small{color:#ff9d9d}
.sh-pr.sh-have{gap:6px;padding:3px 16px 3px 10px}.sh-pr.sh-have>span{display:flex;flex-direction:column;line-height:1.05}.sh-pr.sh-have small{font-size:10.5px;font-weight:600;color:#d9c995;white-space:nowrap}.sh-pr.sh-have b{font-size:15px}

/* v279 bag groups / pick mode */
.inv .inv-grp{display:flex;justify-content:space-between;align-items:baseline;padding:6px 4px 2px;border-bottom:1px solid #ffffff22;color:#ffd76a;font-size:.85rem;position:sticky;top:0;background:#151320;z-index:1}.inv .inv-grp small{color:#aaa}
.it.cant{opacity:.55}.it.cant small{color:#ff8a7a}
.pick-list{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto;margin:6px 0}

/* v280 Ascendancy chart */
.asc-card{max-width:1180px;width:min(1180px,96vw)}
.asc-paths{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}
.asc-path{flex:1;min-width:160px;text-align:left;padding:8px 12px;border-radius:10px;border:1px solid #ffffff22;background:#ffffff08;color:#ddd;cursor:pointer;display:flex;flex-direction:column;gap:2px;border-left:4px solid var(--pc)}
.asc-path b{color:var(--pc)}.asc-path small{opacity:.7;font-size:.75rem}.asc-path.on{background:color-mix(in srgb,var(--pc) 18%,transparent);border-color:var(--pc)}
.asc-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr);gap:16px;align-items:start}
.asc-chart svg{width:100%;height:auto;max-height:calc(100vh - 230px);display:block;margin:auto}
.asc-node{cursor:pointer;transition:transform .15s}.asc-node:hover polygon{stroke:#fff;stroke-opacity:1}.asc-node:focus{outline:none}
.asc-lbl{paint-order:stroke;stroke:#0d0b14;stroke-width:4px}
.asc-side{display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 220px);overflow:auto;padding-right:4px}
.asc-head{border-left:4px solid var(--pc);padding:4px 10px}.asc-head h3{margin:0;color:var(--pc);font-size:1.35rem}.asc-head p{margin:2px 0 0;opacity:.75}
.asc-pts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.asc-pts div{background:#ffffff0a;border:1px solid #ffffff18;border-radius:8px;padding:6px;text-align:center}.asc-pts b{display:block;font-size:1.2rem;color:#ffd76a}.asc-pts small{opacity:.7}
.asc-trials{display:flex;gap:6px;flex-wrap:wrap}.asc-trial{font-size:.78rem;padding:3px 8px;border-radius:99px;background:#ffffff0c;opacity:.6}.asc-trial.done{background:#3c8a5a55;opacity:1}.asc-trial.next{border:1px solid #ffd76a;opacity:1}
.asc-node-card{border:1px solid var(--pc);border-radius:12px;padding:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--pc) 14%,transparent),transparent)}
.asc-node-card h4{margin:2px 0 6px;font-size:1.15rem;color:var(--pc)}.asc-node-card p{margin:0 0 10px;line-height:1.45}.asc-node-card small{display:block;opacity:.75}.asc-node-card .btn{margin-top:4px}
.asc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.asc-list li{display:flex;gap:8px;align-items:flex-start;padding:6px 8px;border-radius:8px;cursor:pointer;background:#ffffff06}.asc-list li:hover,.asc-list li.sel{background:#ffffff14}
.asc-list li i{font-style:normal;width:1.4em;text-align:center;opacity:.6}.asc-list li.on i{opacity:1;color:#ffd76a}.asc-list li span{display:flex;flex-direction:column}.asc-list li small{opacity:.7;font-size:.78rem}.asc-list li.on b{color:#ffd76a}
@media (max-width:820px){.asc-body{grid-template-columns:1fr}.asc-chart svg{max-height:60vh}.asc-side{max-height:none}}

/* v302 affix tier badge */
.aff-t{display:inline-flex;align-items:center;gap:2px;font-weight:700;font-size:.85em;padding:0 4px 0 1px;border-radius:4px;background:#ffffff10;vertical-align:middle}.aff-t .ic{vertical-align:middle}
.aff-t.t1{color:#ffd76a;background:#ffd76a22}.aff-t.t2{color:#e8c46a}.aff-t.t3{color:#b8c4d8}.aff-t.t4{color:#9aa4b4}.aff-t.t5{color:#7d8592}

.bk-tr{position:absolute;top:6px;right:6px;font-size:10px;font-weight:700;padding:1px 6px;border-radius:7px;background:#000a;border:1px solid}
.bk-tr.big{position:static;display:inline-block;margin-left:6px;font-size:12px}
.bk-tr.t1{color:#cfd6df;border-color:#cfd6df66}.bk-tr.t2{color:#7fd0ff;border-color:#7fd0ff88}.bk-tr.t3{color:#ffb347;border-color:#ffb347aa;box-shadow:0 0 8px #ffb34766}
.bk-tf{border-style:dashed}.bk-rule{color:#ffd98a;font-size:12px;margin:4px 0}
.bk-pk + .bk-lv + .bk-tr{top:28px}

.ps-bonus{color:#9fc7e8;font-size:12.5px;margin-top:-4px}
/* v366 prologue: no stage / quest / XP HUD while playing the hooded swordsman */
body.prologue #top, body.prologue #quest, body.prologue #quota, body.prologue #buffs { display: none !important; }
body.prologue #guide.fade { opacity: 0; pointer-events: none; transition: opacity .6s; }
body.prologue #xpBar, body.prologue #empTxt { display: none !important; }
body.pro-end #hud, body.pro-end #bar, body.pro-end #touch { opacity: 0; transition: opacity .8s; pointer-events: none; }
/* v391 power summary (eHP / DPS) in the character sheet */
.stats.pw>div{display:block}
.stats.pw>div>p{display:flex;justify-content:space-between;gap:.5em;margin:0}
.stats.pw small{display:block;font-size:.78em;line-height:1.35;margin-top:.15em}
/* v392 class showcase (js/ui/showcase.js) */
.show-ov{z-index:60}
.show-card{width:min(1180px,96vw);max-height:94vh;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.show-cls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.show-ct{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--text,#eee);cursor:pointer;text-align:left}
.show-ct b{color:var(--sc);font-size:1.05rem}.show-ct small{color:var(--muted);font-size:.78rem}
.show-ct.on{border-color:var(--sc);background:color-mix(in srgb,var(--sc) 18%,transparent)}
.show-pages{display:flex;flex-wrap:wrap;gap:6px}
.show-pt{padding:5px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--muted);cursor:pointer;font-size:.85rem}
.show-pt.on{color:#fff;border-color:var(--sc);background:color-mix(in srgb,var(--sc) 25%,transparent)}
.show-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;min-height:0;overflow:hidden}
.show-vid{display:flex;flex-direction:column;gap:6px;min-width:0}
.show-vid video,.show-vid img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:#000;border:1px solid rgba(255,255,255,.12)}
.show-vid p{margin:0;color:var(--muted);font-size:.85rem}
.show-info{overflow:auto;padding-right:6px;max-height:68vh}
.show-info .lbl{margin:10px 0 4px}
.show-lead{margin:0 0 4px;color:var(--muted);font-size:.9rem}
.show-sk{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.show-sk p{margin:0;display:flex;gap:8px;align-items:baseline}.show-sk em{font-style:normal;font-size:.72rem;color:var(--muted);border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:0 6px}
.show-sk small{display:block;color:var(--muted);font-size:.8rem;line-height:1.4;margin-top:2px}
.show-ic{flex:0 0 40px;display:flex;align-items:center;justify-content:center}
.show-ic.dot{height:40px;border-radius:8px;background:rgba(255,255,255,.05);font-size:1.1rem;color:#e8d08a}
.show-path{display:block;width:100%;text-align:left;margin:4px 0;padding:7px 10px;border-radius:8px;border:1px solid color-mix(in srgb,var(--sc) 50%,transparent);background:color-mix(in srgb,var(--sc) 10%,transparent);color:#fff;cursor:pointer}
.show-path b{color:var(--sc)}.show-path small{display:block;color:var(--muted);font-size:.78rem}
.cs-show{width:100%;margin:6px 0 2px}
@media (max-width:760px){.show-body{grid-template-columns:1fr}.show-cls{grid-template-columns:repeat(2,1fr)}.show-info{max-height:none}.show-card{overflow:auto}}
/* v424 villager: passive tree locked until the job change */
.ps-lock #psSvg { filter: grayscale(.85) brightness(.55); }
.ps-cap.lock,.ps2 .ps-cap.lock{display:block;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;font-size:20px;color:#efc978;background:rgba(8,10,16,.82);border:1px solid #6b5630;border-radius:12px;padding:14px 22px;z-index:5}.ps-cap.lock small{display:block!important;font-size:13px;margin-top:6px}