*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:Georgia,'Times New Roman',serif;color:#e4e0da;user-select:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
#labels,#ft{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.llabel{position:absolute;left:0;top:0;font-size:12px;padding:1px 5px;background:rgba(0,0,0,.6);border-radius:2px;white-space:nowrap;font-family:Arial,sans-serif;text-shadow:0 1px 1px #000}
.ftxt{position:absolute;left:0;top:0;font-weight:bold;font-family:Arial,sans-serif;text-shadow:0 0 3px #000,0 1px 1px #000;white-space:nowrap}
#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 45%,rgba(170,0,0,.85) 100%);opacity:0}
#hud{position:fixed;inset:0;pointer-events:none}
#crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font:20px Arial;text-shadow:0 0 3px #000;opacity:.8}
#prompt{position:absolute;left:50%;top:calc(50% + 34px);transform:translateX(-50%);color:#ffe9a8;font-size:15px;text-shadow:0 0 4px #000,0 1px 2px #000;white-space:nowrap}
#qtrack{position:absolute;left:14px;top:12px;width:300px;background:linear-gradient(90deg,rgba(10,10,11,.75),rgba(10,10,11,0));padding:8px 12px;border-left:3px solid #c2481a}
.qt-act{font-size:11px;color:#9a9590;letter-spacing:2px;text-transform:uppercase}.qt-title{color:#ffa64d;font-size:16px;margin:2px 0}.qt-obj{font-size:13px;color:#e8e0d0;line-height:1.5}
#mapwrap{position:absolute;right:12px;top:12px;text-align:center}
#minimap{border:3px solid #3c3c42;border-radius:50%;box-shadow:0 0 10px #000;background:#000;width:176px;height:176px}
#dayTxt{font-size:12px;margin-top:4px;text-shadow:0 1px 2px #000;line-height:1.4}#fps{display:none;font:600 11px/1.3 Consolas,Menlo,monospace;color:#d8f0c8;background:rgba(0,0,0,.55);border-radius:4px;padding:2px 6px;margin-top:3px;white-space:nowrap}body.showfps #fps{display:inline-block}
#target{position:absolute;left:50%;top:14px;transform:translateX(-50%);width:300px;text-align:center;display:none;text-shadow:0 1px 2px #000}
#tName{font-size:16px}#tMods{font-size:12px;color:#7090ff;min-height:4px}
.bar{height:10px;background:#1a0808;border:1px solid #4a2a22;margin-top:3px}.bar>div{height:100%;background:linear-gradient(#e03030,#801010);width:100%}
#bossbar{position:absolute;left:50%;top:64px;transform:translateX(-50%);width:520px;text-align:center;display:none;text-shadow:0 1px 3px #000}
#bName{color:#ff9a40;font-size:19px;letter-spacing:1px}#bossbar .bar{height:14px;border-color:#c2481a}
#bigmsg{position:absolute;left:50%;top:26%;transform:translateX(-50%);text-align:center;font-size:34px;color:#ff8c3a;text-shadow:0 0 12px #000,0 2px 3px #000;opacity:0;transition:opacity .6s;white-space:nowrap}
#bigmsg small{display:block;font-size:16px;color:#ddd}
#log{position:absolute;left:14px;bottom:150px;width:480px;font-size:13px;text-shadow:0 1px 2px #000,0 0 3px #000}
.msg{margin-top:3px;transition:opacity .8s;background:rgba(0,0,0,.25);padding:1px 6px;width:fit-content;max-width:480px}
#status{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);display:flex;gap:10px;font-size:13px}
#status>div{display:none;background:rgba(0,0,0,.5);padding:2px 8px;border:1px solid #555}
#cursed{color:#c070ff}#buffwc{color:#ffb050}#hungerWarn{color:#ff9040}
#bottom{position:absolute;left:0;right:0;bottom:0;height:140px;display:flex;justify-content:center;align-items:flex-end;padding-bottom:8px;gap:14px}
.orb{width:118px;height:118px;border-radius:50%;border:4px solid #3c3c42;background:#0c0c0d;position:relative;overflow:hidden;box-shadow:0 0 12px #000,inset 0 0 18px #000}
.orbfill{position:absolute;left:0;right:0;bottom:0;transition:height .15s}
#lifeFill{background:radial-gradient(circle at 40% 30%,#ff6a4a,#b0100a 52%,#300202)}#manaFill{background:radial-gradient(circle at 40% 30%,#ffd27a,#e07010 50%,#4a1600)}
.orbtxt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:bold 14px Arial;text-shadow:0 1px 2px #000}
#center{display:flex;flex-direction:column;align-items:center;gap:4px}
.minibars{display:flex;gap:8px}.mb{width:240px;height:12px;background:#141416;border:1px solid #3c3c42;position:relative}.mb>div{height:100%;background:linear-gradient(#e8e8ea,#7e7e86);width:100%}
.mb.hb>div{background:linear-gradient(#d89a5a,#7a3e12)}.mb span{position:absolute;inset:0;font:9px Arial;text-align:center;line-height:11px;color:#fff;text-shadow:0 0 2px #000}
#bars2{display:flex;gap:12px;align-items:center;background:rgba(14,14,16,.8);border:2px solid #3c3c42;padding:4px}
#hotbar,#skillbar{display:flex;gap:3px}
.slot{width:48px;height:48px;background:rgba(20,20,22,.92);border:1px solid #34343a;position:relative;pointer-events:auto}
.slot .ico{position:absolute;inset:5px}
.slot.sel{border:2px solid #ffa64d;box-shadow:0 0 8px #ffa64d88}
.slot .hk{position:absolute;left:2px;top:0;font:10px Arial;color:#aaa}
.slot .qty{position:absolute;right:2px;bottom:0;font:bold 11px Arial;color:#fff;text-shadow:0 0 2px #000}
.slot .sockn{position:absolute;left:2px;bottom:0;font:9px Arial;color:#c9f;letter-spacing:-1px}
.slot.r-m{background:rgba(20,26,60,.92)}.slot.r-r{background:rgba(60,52,10,.92)}.slot.r-u{background:rgba(70,50,20,.92)}.slot.r-s{background:rgba(14,52,20,.92)}.slot.r-g{background:rgba(48,24,60,.92)}
.slot.unusable{background:rgba(90,10,10,.85)!important}
#hud .slot{pointer-events:none}
.skslot{width:48px;height:48px;border:1px solid #3c3c42;position:relative;background:#111;overflow:hidden}
.skslot.lockd{filter:grayscale(1) brightness(.4)}
.skslot .hk{position:absolute;left:2px;top:0;font:bold 11px Arial;color:#fff;text-shadow:0 0 2px #000;z-index:2}
.skico{position:absolute;inset:3px;border-radius:4px}
.sk-riptide{background:conic-gradient(#cfefff,#2a6a8a,#cfefff,#2a6a8a,#cfefff)}.sk-harpoon{background:linear-gradient(135deg,#222 42%,#e8d8b0 44%,#e8d8b0 56%,#222 58%)}.sk-volley{background:repeating-linear-gradient(60deg,#1a2a3a 0 5px,#f0e8d0 5px 7px)}
.sk-roar{background:radial-gradient(circle,#ffc070,#a03010 60%,#200)}.sk-answer{background:radial-gradient(circle,#fff 18%,#d8f4ff 30%,#4a3a8a 62%,#0a0820 85%)}
.cdov{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.7)}
#xpbar{width:520px;height:7px;background:#141416;border:1px solid #34343a;position:relative}#xpFill{height:100%;background:linear-gradient(#ffb050,#b0300c);width:0}
#lvlTxt{position:absolute;right:-44px;top:-5px;font:bold 11px Arial;color:#ffb050}
#uiBackdrop{position:fixed;inset:0;display:none;background:rgba(0,0,0,.25)}
.panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:linear-gradient(#1a1a1c,#0b0b0c);border:2px solid #55555c;box-shadow:0 0 30px #000,inset 0 0 40px #000;padding:12px 16px;max-height:94vh;overflow:auto}
.panel button,#title button{font-family:Georgia,serif;background:linear-gradient(#323236,#18181a);color:#ece6de;border:1px solid #c2481a;padding:6px 14px;cursor:pointer;font-size:14px}
.panel button:hover:not(:disabled),#title button:hover:not(:disabled){background:linear-gradient(#4a2a1c,#241410);color:#fff}
.panel button:disabled,#title button:disabled{opacity:.4;cursor:default}
.ptitle{font-size:20px;color:#ff8c3a;border-bottom:1px solid #3c3c42;padding-bottom:6px;margin-bottom:8px;display:flex;justify-content:space-between}
.closeX{cursor:pointer;color:#a09a94;padding:0 4px}.closeX:hover{color:#fff}
.sub{font-size:12px;color:#9a9590;margin:6px 0 4px}.hint{font-size:11px;color:#7a7670;margin-top:8px;max-width:420px}
#inv{width:880px}.invcols{display:flex;gap:16px}.col1{width:360px}.col2{flex:1}
#equip{position:relative;height:250px;background:radial-gradient(ellipse at center,#232326,#0d0d0f);border:1px solid #34343a}
#equip .slot{position:absolute;width:56px;height:56px}
.eq-helm{left:152px;top:8px}.eq-amulet{left:222px;top:20px;width:44px!important;height:44px!important}.eq-chest{left:142px;top:72px;width:76px!important;height:84px!important}
.eq-ring1{left:80px;top:110px;width:44px!important;height:44px!important}.eq-ring2{left:236px;top:110px;width:44px!important;height:44px!important}
.eq-legs{left:152px;top:162px}.eq-boots{left:84px;top:186px}
.eqlab{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:#5a5a60}
#heldName{font-size:12px;margin:5px 0;color:#bbb}
#grid{display:grid;grid-template-columns:repeat(8,48px);gap:3px}#grid .slot.hot{border-color:#8a3a18}
#stats{font-size:12px}.sthead{font-size:15px;color:#ff8c3a}.stsub{color:#99948e;font-size:11px}.stpts{color:#ffa64d;margin:3px 0}
.strow{display:flex;align-items:center;gap:6px;margin:2px 0}.strow span{width:80px}.strow b{width:34px;color:#fff}.strow i{color:#7090ff;font-size:11px;width:36px}
.strow button{padding:0 7px;font-size:12px}
.stgrid{display:grid;grid-template-columns:86px 80px 86px 80px;gap:2px 4px;margin-top:6px;color:#aaa6a0}.stgrid b{color:#fff;font-weight:normal}
#handcraft{display:flex;gap:6px;flex-wrap:wrap}
.rec{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.03);border:1px solid #2c2c31;padding:3px 6px;margin:2px 0}
.rec .slot{width:40px;height:40px;flex:none}.recinfo{flex:1;min-width:150px}.recname{font-size:14px}.reccost{font-size:11px}
#craft{width:560px}#craftList{max-height:62vh;overflow:auto}#craftMats{font-size:11px;color:#a09a94;display:flex;flex-wrap:wrap;gap:4px 12px;margin-bottom:6px}#craftMats b{color:#fff}
button.wide{display:block;width:100%;margin:4px 0}
#skills{width:860px}#skillTree{display:flex;gap:10px}
.skgroup{flex:1;border:1px solid #34343a;padding:6px;background:rgba(0,0,0,.25);position:relative}.skgroup.locked .skcard{opacity:.35}
.skgname{color:#ff8c3a;font-size:15px;margin-bottom:6px}.sklock{color:#c8b8ff;font-size:12px;font-style:italic;margin-bottom:6px}
.skcard{border:1px solid #2c2c31;padding:6px;margin-bottom:6px;position:relative;background:rgba(255,255,255,.02)}.skcard.learned{border-color:#c2481a}
.skname{font-size:14px;color:#fff}.skkey{font-size:11px;color:#a09a94}.sklvl{font-size:11px;color:#ffa64d}.skdesc{font-size:12px;color:#ccc;margin:3px 0}.skdesc.dim{color:#888}.skreq{font-size:11px;color:#c88}
.skcard button{position:absolute;right:6px;top:6px;padding:0 8px}
#quests{width:560px}.qitem{border-bottom:1px solid #2c2c31;padding:6px 0}.qhead{font-size:15px;color:#ffa64d}.qitem.done .qhead{color:#888}.ok{color:#6c6;font-size:12px}
.qdesc{font-size:13px;color:#ddd;margin:4px 0}.qobj{font-size:12px;color:#bfe}
#dialog{width:620px}#dlgText{font-size:15px;line-height:1.55;margin-bottom:10px;font-style:italic;color:#eee}.dlgbtns{display:flex;gap:8px}
.shophead{font-size:13px;margin:10px 0 4px;color:#cba}.shopbuy{display:flex;flex-wrap:wrap;gap:4px}.shopgrid{display:grid;grid-template-columns:repeat(10,48px);gap:3px}
#wps{width:380px}
#story{width:700px;text-align:center;padding:26px 36px;background:radial-gradient(ellipse at center,#1e1616,#050505)}
#storyTitle{font-size:28px;color:#ff8c3a;margin-bottom:14px;letter-spacing:1px}#storyText p{font-size:16px;line-height:1.6;color:#e8e0d0;margin:10px 0}#storyBtn{margin-top:14px;font-size:16px;padding:8px 26px}
#pause{width:620px;text-align:center}.pbtns{display:flex;flex-direction:column;gap:6px;width:280px;margin:0 auto 10px}
.settings{display:flex;gap:20px;justify-content:center;font-size:13px;margin:8px 0}.settings input{vertical-align:middle}
.controls{font-size:13px;color:#bdb8b2;text-align:left;margin-top:10px}.ctl{margin:4px 0;line-height:1.6}.ctl b{color:#ffa64d;background:rgba(255,255,255,.06);padding:0 4px;border:1px solid #34343a;font-weight:normal;font-family:Arial;font-size:12px}.ctl.dim{color:#99948e;font-style:italic}
#death{text-align:center;width:420px;background:rgba(30,0,0,.9)}.deadT{font-size:34px;color:#e03030;margin:10px 0}#deathLost{color:#ccc;margin-bottom:12px}
#clickhint{position:fixed;left:50%;top:60%;transform:translateX(-50%);background:rgba(0,0,0,.6);padding:8px 16px;border:1px solid #c2481a}
#title{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(0,0,0,.25),rgba(0,0,0,.85))}
.tbox{text-align:center;width:720px}
#titleName{font-size:92px;color:#ff9a3c;letter-spacing:8px;text-shadow:0 0 30px #c02a08,0 4px 6px #000;font-variant:small-caps}
#titleSub{font-size:30px;color:#e4e0da;letter-spacing:6px;text-shadow:0 2px 4px #000;margin-top:-8px}
.tag{font-size:14px;color:#aaa6a0;margin:10px 0 24px;font-style:italic}
.tbtns{display:flex;flex-direction:column;gap:8px;width:260px;margin:0 auto}#title button{font-size:18px;padding:9px}
#title .controls{background:rgba(0,0,0,.55);padding:10px 16px;border:1px solid #34343a;margin-top:24px}
#tooltip{position:fixed;z-index:50;max-width:330px;background:rgba(8,6,4,.96);border:1px solid #55555c;padding:8px 10px;font-family:Arial,sans-serif;font-size:13px;text-align:center;pointer-events:none;line-height:1.35}
.tt-name{font-size:15px;font-family:Georgia,serif}.tt-dim{color:#999;font-size:11px}.tt-aff{color:#7090ff}.tt-v{color:#fff}.tt-hint{color:#a09a94;font-size:11px;margin-top:5px;font-style:italic}
#cursorItem{position:fixed;z-index:60;pointer-events:none;display:none;width:44px;height:44px;opacity:.9}

body.intitle #hud,body.intitle #labels,body.intitle #ft{display:none}

/* ---------- touch / mobile ---------- */
html,body{overscroll-behavior:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#touch,#btnFS{display:none}
body.mobile,body.mobile canvas{touch-action:none}
body.mobile .panel{touch-action:pan-y;max-height:calc(96vh / var(--ps,1));overflow-y:auto;-webkit-overflow-scrolling:touch}
body.small #qtrack,body.small #mapwrap,body.small #target,body.small #bossbar,body.small #bigmsg,body.small #log,body.small #status,body.small #bottom,body.small #prompt{zoom:var(--hs,1)}
body.small .panel,body.small #tooltip,body.small #cursorItem{zoom:var(--ps,1)}
body.small #title .tbox{zoom:var(--ts,1)}
body.mobile #touch{display:block;position:fixed;inset:0;z-index:5}
body.mobile.uiopen #touch,body.intitle #touch{display:none}
body.mobile #skillbar,body.mobile #clickhint{display:none!important}
body.mobile #bottom{justify-content:center}
body.mobile #log{bottom:calc(150px);width:380px}
body.mobile #hotbar .slot{pointer-events:auto}
body.mobile #btnFS{display:inline-block}
body.mobile.nofs .fsbtn{display:none!important}
#touch button{position:absolute;border-radius:50%;border:2px solid rgba(255,110,40,.55);background:rgba(18,18,20,.55);color:#f0ece6;font:bold 22px Georgia,serif;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 0 8px rgba(0,0,0,.6)}
#touch button small{font:10px Arial;opacity:.85;margin-top:1px}
#touch button.on{background:rgba(200,70,20,.65);border-color:#ffa64d}
#tAtk{right:max(18px,env(safe-area-inset-right));bottom:22px;width:86px;height:86px;font-size:32px!important}
#tJump{right:calc(max(18px,env(safe-area-inset-right)) + 96px);bottom:14px;width:58px;height:58px}
#tE{right:calc(max(18px,env(safe-area-inset-right)) + 96px);bottom:82px;width:58px;height:58px}
#tE.ready{background:rgba(220,80,20,.75);border-color:#ffb060;box-shadow:0 0 14px #ff6a1a}
#tSk{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:150px;display:flex;gap:6px}
#tSk button{position:relative;width:46px;height:46px;overflow:hidden}
#tSk .skico{position:absolute;inset:4px;border-radius:50%;opacity:.9}
#tSk b{position:absolute;left:4px;top:1px;font:bold 11px Arial;z-index:2;text-shadow:0 0 2px #000}
#tSk .cdov{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(0,0,0,.65);z-index:1}
#tSk button.lockd{opacity:.35}
#joyBase{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px solid rgba(255,110,40,.45);background:rgba(12,12,14,.3);display:none;pointer-events:none}
#joyKnob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(210,210,215,.45);border:2px solid rgba(255,150,80,.85)}
#joyBase.sprint #joyKnob{background:rgba(255,90,20,.85)}
body.mobile #tooltip{pointer-events:auto;max-height:calc(92vh / var(--ps,1));overflow-y:auto}
#tooltip .mtip{display:flex;gap:6px;justify-content:center;margin-top:8px}
#tooltip .mtip button{font:bold 14px Georgia,serif;background:linear-gradient(#323236,#18181a);color:#ece6de;border:1px solid #c2481a;padding:8px 12px}
body.mobile #hud{z-index:6}
body.mobile #uiBackdrop{z-index:19}
body.mobile .panel{z-index:20}
body.mobile #title{z-index:30}

/* =====================================================================
   DARKR — ash & lava theme (greyscale base, ember / molten accents)
   ===================================================================== */
:root{--ash0:#0b0b0c;--ash1:#141416;--ash2:#1e1e21;--ash3:#2c2c31;--ash4:#3c3c42;--ash5:#5a5a62;--txt:#e4e0da;--dim:#9a9590;
  --ember:#ff6a1a;--molten:#ffa64d;--lava:#d4321a;--blood:#8a1208;--glow:rgba(255,90,20,.35)}
body{color:var(--txt)}
#crosshair{color:#e8e8e8;transition:color .12s,transform .12s,text-shadow .12s}
#crosshair.on{color:var(--molten);text-shadow:0 0 6px var(--ember),0 0 2px #000;transform:translate(-50%,-50%) scale(1.25)}
#prompt{color:#f2ece4;background:rgba(10,10,11,.55);padding:2px 10px;border-radius:3px;border-bottom:1px solid rgba(255,106,26,.5)}
#prompt:empty{display:none}
#prompt.gather{color:var(--molten)}#prompt.bad{color:#ff7a6a;border-bottom-color:rgba(212,50,26,.7)}
#qtrack{border-left:3px solid var(--ember);box-shadow:-6px 0 14px -8px var(--ember)}
.qt-title{color:var(--molten)!important}.qt-act{color:#8f8a85!important}
#minimap{border:3px solid #2a2a2f;box-shadow:0 0 0 2px #000,0 0 16px var(--glow),inset 0 0 10px #000}
#bars2{border:1px solid var(--ash4);background:linear-gradient(rgba(24,24,27,.88),rgba(10,10,11,.92));box-shadow:0 0 0 1px #000,0 -1px 0 rgba(255,106,26,.25) inset}
.slot{border-color:#323238}
.slot.sel{border:2px solid var(--ember);box-shadow:0 0 10px rgba(255,106,26,.6),inset 0 0 8px rgba(255,106,26,.25)}
.orb{border:4px solid #26262b;box-shadow:0 0 0 2px #000,0 0 18px rgba(0,0,0,.9),inset 0 0 22px #000}
.orb::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.22),rgba(255,255,255,0) 35%);pointer-events:none}
#lifeOrb{box-shadow:0 0 0 2px #000,0 0 18px rgba(200,20,10,.35),inset 0 0 22px #000}
#manaOrb{box-shadow:0 0 0 2px #000,0 0 18px rgba(255,130,20,.3),inset 0 0 22px #000}
#xpbar{border-color:#2e2e33;background:#111113}#lvlTxt{color:var(--molten)!important}
.bar{border-color:#3a2420}.bar>div{background:linear-gradient(#ff5030,#8a1208)}
#bName{color:var(--ember);text-shadow:0 0 10px rgba(255,80,0,.5),0 1px 3px #000}
#bigmsg{color:var(--molten);text-shadow:0 0 18px rgba(255,80,0,.55),0 2px 3px #000}
.msg{background:rgba(8,8,9,.45);border-left:2px solid rgba(255,106,26,.45)}
#status>div{background:rgba(10,10,11,.7);border-color:#3c3c42}
.panel{background:linear-gradient(170deg,#1c1c1f 0%,#121214 55%,#0b0b0c 100%);border:1px solid #3c3c42;
  box-shadow:0 0 0 1px #000,0 0 40px rgba(0,0,0,.9),0 0 26px rgba(255,80,10,.12),inset 0 1px 0 rgba(255,140,60,.18);border-radius:4px}
.panel::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--lava) 20%,var(--molten) 50%,var(--lava) 80%,transparent);opacity:.8}
.ptitle{color:var(--molten);border-bottom:1px solid #2e2e33;letter-spacing:.5px;text-shadow:0 0 10px rgba(255,90,20,.35)}
.panel button,#title button{background:linear-gradient(#303035,#19191c);color:#ece6de;border:1px solid #4a4a52;border-radius:3px;transition:border-color .12s,box-shadow .12s,background .12s}
.panel button:hover:not(:disabled),#title button:hover:not(:disabled){background:linear-gradient(#3a2620,#1e1412);border-color:var(--ember);box-shadow:0 0 10px rgba(255,90,20,.45);color:#fff}
#btnNew,#storyBtn,#btnRespawn{background:linear-gradient(#a0300e,#5a1406)!important;border-color:#ff7a30!important;box-shadow:0 0 12px rgba(255,90,20,.35)}
.closeX:hover{color:var(--ember)}
#equip{border-color:#2e2e33;background:radial-gradient(ellipse at center,#262022 0%,#121214 60%,#0b0b0c)}
.skcard.learned{border-color:var(--ember);box-shadow:inset 0 0 12px rgba(255,90,20,.12)}
.skgroup{border-color:#2e2e33}.skgname{color:var(--molten)}.sklvl,.stpts,.qhead{color:var(--molten)!important}.sthead{color:var(--molten)}
.ctl b{color:var(--molten);border-color:#3c3c42;background:rgba(255,255,255,.05)}
#tooltip{background:rgba(10,10,11,.97);border:1px solid #4a4a52;box-shadow:0 0 0 1px #000,0 0 18px rgba(255,80,10,.15);border-radius:3px}
#tooltip .mtip button{background:linear-gradient(#303035,#19191c);border-color:#4a4a52;color:#ece6de}
#story{background:radial-gradient(ellipse at 50% 0%,#2a1410,#0e0e10 60%,#050505)}#storyTitle{color:var(--molten);text-shadow:0 0 16px rgba(255,80,0,.5)}
#death{background:radial-gradient(ellipse at center,rgba(60,6,4,.95),rgba(8,4,4,.95))}.deadT{color:#ff3a1a;text-shadow:0 0 20px rgba(255,40,0,.6)}
#clickhint{background:rgba(10,10,11,.75);border-color:var(--ember)}
/* title */
#title{background:radial-gradient(ellipse at 50% 70%,rgba(120,24,4,.35),rgba(0,0,0,.15) 40%,rgba(0,0,0,.88) 100%),linear-gradient(transparent 55%,rgba(60,10,0,.45))}
#titleName{font-size:120px;letter-spacing:14px;font-variant:normal;text-transform:uppercase;font-weight:bold;
  background:linear-gradient(#fff2c8 0%,#ffb040 30%,#ff5a10 58%,#8a1004 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,70,0,.55)) drop-shadow(0 4px 4px #000);animation:emberPulse 4s ease-in-out infinite}
@keyframes emberPulse{0%,100%{filter:drop-shadow(0 0 14px rgba(255,70,0,.45)) drop-shadow(0 4px 4px #000)}50%{filter:drop-shadow(0 0 28px rgba(255,90,0,.75)) drop-shadow(0 4px 4px #000)}}
#titleSub{color:#d8d4ce;font-size:24px;letter-spacing:7px;margin-top:-6px;text-transform:uppercase}
.tag{color:#8f8a85}
#title .controls{background:rgba(8,8,9,.7);border:1px solid #2e2e33;border-top:2px solid var(--lava)}
/* loading */
#loading{position:fixed;inset:0;z-index:300;background:radial-gradient(ellipse at 50% 60%,#2a0c04,#0b0b0c 60%,#000);display:flex;align-items:center;justify-content:center;transition:opacity .6s}
#loading.done{opacity:0;pointer-events:none}
#loading .lbox{text-align:center;width:min(320px,80vw)}
#loading .lname{font:bold 64px Georgia,serif;letter-spacing:10px;text-transform:uppercase;background:linear-gradient(#ffe2a0,#ff6a1a 55%,#8a1004);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(255,70,0,.5))}
#loading .lbar{height:4px;background:#1a1a1d;margin:16px 0 10px;overflow:hidden;border-radius:2px}
#loading .lbar div{height:100%;width:40%;background:linear-gradient(90deg,transparent,var(--ember),var(--molten),transparent);animation:lslide 1.1s linear infinite}
@keyframes lslide{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
#loading .ltxt{color:#8f8a85;font-size:13px;font-style:italic}
/* touch buttons */
#touch button{border-color:rgba(255,110,40,.5);background:radial-gradient(circle at 50% 35%,rgba(48,48,54,.62),rgba(12,12,14,.62));box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 10px rgba(0,0,0,.6)}
#tAtk{border-color:rgba(255,106,26,.85)!important;background:radial-gradient(circle at 50% 35%,rgba(150,40,10,.6),rgba(40,8,2,.65))!important;box-shadow:0 0 14px rgba(255,80,10,.4)!important}
#touch button.on{background:rgba(220,80,20,.7)!important;border-color:var(--molten)!important}

/* ---------- collapsible menu (☰) by the minimap ---------- */
#tMenu{position:absolute;z-index:3;right:calc(194px * var(--hs,1) + max(8px,env(safe-area-inset-right)));top:calc(12px * var(--hs,1) + env(safe-area-inset-top))}
#tMenuBtn{position:relative!important;width:46px;height:46px;border-radius:12px!important}
.burger{display:flex;flex-direction:column;gap:5px;width:20px}.burger i{display:block;height:2px;background:#f0ece6;border-radius:1px;transition:transform .2s,opacity .2s}
body.fanopen .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}body.fanopen .burger i:nth-child(2){opacity:0}body.fanopen .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.fanopen #tMenuBtn{border-color:var(--molten)!important;box-shadow:0 0 12px rgba(255,90,20,.6)!important}
#tFan{position:absolute;right:calc(100% + 6px);top:0;display:flex;flex-direction:row-reverse;gap:6px;pointer-events:none}
#tFan button{position:relative!important;width:46px;height:46px;border-radius:12px!important;font-size:19px!important;opacity:0;transform:translateX(30px) scale(.6);transition:opacity .16s,transform .2s}
body.fanopen #tFan{pointer-events:auto}
body.fanopen #tFan button{opacity:1;transform:none}
body.fanopen #tFan button:nth-child(2){transition-delay:.02s}body.fanopen #tFan button:nth-child(3){transition-delay:.04s}body.fanopen #tFan button:nth-child(4){transition-delay:.06s}body.fanopen #tFan button:nth-child(5){transition-delay:.08s}body.fanopen #tFan button:nth-child(6){transition-delay:.1s}

/* =====================================================================
   PORTRAIT (phone held upright)
   ===================================================================== */
body.portrait #bottom,body.portrait #center{display:contents}
body.portrait .orb{position:absolute;width:62px;height:62px;border-width:3px;zoom:var(--hs,1);top:calc(10px + env(safe-area-inset-top))}
body.portrait #lifeOrb{left:10px}body.portrait #manaOrb{left:78px}
body.portrait .orbtxt{font-size:11px}
body.portrait .minibars{position:absolute;zoom:var(--hs,1);left:10px;top:calc(80px + env(safe-area-inset-top));flex-direction:column;gap:4px}
body.portrait .mb{width:130px;height:11px}
body.portrait #bars2{position:absolute;zoom:var(--hs,1);left:50%;transform:translateX(-50%);bottom:calc(4px + env(safe-area-inset-bottom));padding:3px}
body.portrait #hotbar .slot{width:43px;height:43px}
body.portrait #xpbar{position:absolute;zoom:var(--hs,1);left:50%;transform:translateX(-50%);width:300px;height:5px;bottom:calc(60px + env(safe-area-inset-bottom))}
body.portrait #lvlTxt{right:auto;left:calc(100% + 6px);top:-5px}
body.portrait #qtrack{left:6px;top:calc(116px + env(safe-area-inset-top));width:200px;padding:5px 8px}
body.portrait .qt-title{font-size:14px}body.portrait .qt-obj{font-size:12px;line-height:1.35}
body.portrait #mapwrap{right:10px;top:calc(10px + env(safe-area-inset-top))}
body.portrait #minimap{width:112px;height:112px}
body.portrait #dayTxt{font-size:11px}
body.portrait #target{top:calc(212px + env(safe-area-inset-top));width:230px}
body.portrait #bossbar{top:calc(250px + env(safe-area-inset-top));width:300px}
body.portrait #bigmsg{white-space:normal;width:340px;font-size:26px;top:22%}
body.portrait #log{left:8px;width:250px;bottom:calc(290px + env(safe-area-inset-bottom));font-size:12px}
body.portrait .msg{max-width:250px}
body.portrait #status{bottom:calc(262px + env(safe-area-inset-bottom));flex-wrap:wrap;justify-content:center;width:300px}
body.portrait #prompt{white-space:normal;max-width:80vw;text-align:center;font-size:14px}
/* touch layout (not zoomed): menu under the minimap, fan opens downward */
body.portrait #tMenu{right:calc(10px * var(--hs,1) + 2px);left:auto;top:calc(158px * var(--hs,1) + env(safe-area-inset-top))}
body.portrait #tFan{right:0;top:calc(100% + 6px);flex-direction:column}
body.portrait #tFan button{transform:translateY(-24px) scale(.6)}
body.portrait.fanopen #tFan button{transform:none}
body.portrait #tAtk{right:calc(12px + env(safe-area-inset-right));bottom:calc(84px * var(--hs,1) + env(safe-area-inset-bottom));width:82px;height:82px}
body.portrait #tJump{right:calc(104px + env(safe-area-inset-right));bottom:calc(76px * var(--hs,1) + env(safe-area-inset-bottom));width:54px;height:54px}
body.portrait #tE{right:calc(104px + env(safe-area-inset-right));bottom:calc(76px * var(--hs,1) + 62px + env(safe-area-inset-bottom));width:54px;height:54px}
body.portrait #tSk{right:calc(10px + env(safe-area-inset-right));bottom:calc(84px * var(--hs,1) + 128px + env(safe-area-inset-bottom));gap:6px}
body.portrait #tSk button{width:44px;height:44px}
/* panels fill the narrow screen and scroll */
body.portrait .panel{width:calc((100vw - 10px) / var(--ps,1))!important;max-height:calc((100vh - 20px) / var(--ps,1));padding:10px 8px;overflow-y:auto}
body.portrait .invcols{flex-direction:column;gap:8px}
body.portrait .col1{width:auto}
body.portrait #equip{width:360px;max-width:100%;margin:0 auto}
body.portrait #grid{grid-template-columns:repeat(8,1fr);gap:3px}
body.portrait #grid .slot{width:auto;height:auto;aspect-ratio:1}
body.portrait .stgrid{grid-template-columns:repeat(4,auto)}
body.portrait #skillTree{flex-direction:column}
body.portrait .shopgrid{grid-template-columns:repeat(7,1fr)}body.portrait .shopgrid .slot{width:auto;height:auto;aspect-ratio:1}
body.portrait .recinfo{min-width:0}
body.portrait .hint{max-width:none}
body.portrait #story{padding:18px 14px}body.portrait #storyTitle{font-size:22px}body.portrait #storyText p{font-size:15px}
body.portrait .pbtns{width:auto;max-width:280px}
body.portrait .settings{flex-direction:column;gap:8px;align-items:center}
body.portrait #tooltip{max-width:none}
/* title in portrait */
body.portrait #title .tbox{width:calc(94vw / var(--ts,1))}
body.portrait #titleName{font-size:84px;letter-spacing:10px}
body.portrait #titleSub{font-size:16px;letter-spacing:4px;margin-top:0}
body.portrait #title .controls{font-size:12px}
/* fixes */
.mb>div{background:linear-gradient(#c8c8cc,#5e5e66)}
.mb span{color:#fff;text-shadow:0 0 2px #000,0 0 3px #000,0 1px 1px #000}
#lvlTxt{white-space:nowrap}
body.mobile:not(.showfps) #fps{display:none}
body.portrait #tMenu{top:calc(170px * var(--hs,1) + env(safe-area-inset-top))}
body.portrait .col2{order:-1}

/* ===== v3: bag button, centred HUD band, portrait bottom band ===== */
#bagBtn{pointer-events:auto!important;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:20px;line-height:1;
  background:linear-gradient(#2a1a14,#120c0a);border:1px solid rgba(255,106,26,.7);box-shadow:inset 0 0 8px rgba(255,90,20,.25);margin-left:4px}
#bagBtn small{font:9px Arial;color:#ffb070;margin-top:2px}
#bagBtn:hover{border-color:var(--molten);box-shadow:0 0 10px rgba(255,90,20,.5)}
#target{transition:opacity .9s}#target.fade{opacity:0}
/* the skill row only holds learned skills, packed to the right */
#tSk{pointer-events:none}#tSk button{pointer-events:auto}
/* portrait: orbs + bars + hotbar back at the bottom, Diablo-style */
body.portrait .orb{top:auto;bottom:calc(52px + env(safe-area-inset-bottom));width:60px;height:60px}
body.portrait #lifeOrb{left:10px;right:auto}
body.portrait #manaOrb{left:auto;right:10px}
body.portrait .minibars{top:auto;left:50%;transform:translateX(-50%);bottom:calc(66px + env(safe-area-inset-bottom));flex-direction:column;gap:4px}
body.portrait .mb{width:244px;height:11px}
body.portrait #xpbar{width:244px;height:5px;bottom:calc(56px + env(safe-area-inset-bottom))}
body.portrait #xpbar{height:8px}body.portrait #lvlTxt{left:50%;right:auto;transform:translateX(-50%);top:-1px;font-size:8px;line-height:8px;color:#fff!important;text-shadow:0 0 2px #000}
body.portrait #bars2{bottom:calc(4px + env(safe-area-inset-bottom));padding:2px}
body.portrait #hotbar{gap:2px}
body.portrait #hotbar .slot{width:38px;height:38px}
body.portrait #bagBtn{width:44px;height:38px;margin-left:3px}
body.portrait #qtrack{top:calc(8px + env(safe-area-inset-top))}
body.portrait #target{top:calc(122px + env(safe-area-inset-top))}
body.portrait #bossbar{top:calc(160px + env(safe-area-inset-top))}
body.portrait #log{bottom:calc(330px + env(safe-area-inset-bottom))}
body.portrait #status{bottom:calc(300px + env(safe-area-inset-bottom))}
/* controls sit above the bottom HUD band (band ~ 118px * hs) */
body.portrait #tAtk{bottom:calc(126px * var(--hs,1) + env(safe-area-inset-bottom))}
body.portrait #tJump{bottom:calc(122px * var(--hs,1) + env(safe-area-inset-bottom))}
body.portrait #tE{bottom:calc(122px * var(--hs,1) + 62px + env(safe-area-inset-bottom))}
body.portrait #tSk{bottom:calc(126px * var(--hs,1) + 128px + env(safe-area-inset-bottom))}
/* v4: touch devices show icons only, no keyboard letters */
body.mobile #tSk b,body.mobile .slot .hk,body.mobile .skkey,body.mobile .skslot .hk{display:none!important}
#fovVal{display:inline-block;min-width:36px;color:var(--molten);font-weight:normal}
.settings{flex-wrap:wrap}
input[type=range]{accent-color:#ff6a1a}
/* ===== v5: UI Scale (pause menu slider). --hs/--ps already include the user's scale; --bs scales touch buttons; --band = bottom HUD band height ===== */
#qtrack,#mapwrap,#target,#bossbar,#bigmsg,#log,#status,#bottom,#prompt{zoom:var(--hs,1)}
.panel,#tooltip,#cursorItem{zoom:var(--ps,1)}
.panel{max-height:calc(96vh / var(--ps,1));overflow-y:auto}
#touch button small{font-size:calc(10px * var(--bs,1))}
#tMenuBtn{width:calc(46px * var(--bs,1))!important;height:calc(46px * var(--bs,1))!important}
#tFan button{width:calc(46px * var(--bs,1))!important;height:calc(46px * var(--bs,1))!important}
/* action cluster sits on/above the HUD band, sized by --bs */
body.mobile #tAtk{right:calc(12px + env(safe-area-inset-right));width:calc(84px * var(--bs,1));height:calc(84px * var(--bs,1));font-size:calc(30px * var(--bs,1))!important}
body.mobile #tJump,body.mobile #tE{width:calc(58px * var(--bs,1));height:calc(58px * var(--bs,1));font-size:calc(21px * var(--bs,1))}
body.mobile #tSk button{width:calc(46px * var(--bs,1));height:calc(46px * var(--bs,1))}
/* landscape: Attack in the bottom-right corner beside the band; E + Jump (and learned skills) in a row above the band's right end */
body.landscape #tAtk{bottom:calc(10px + env(safe-area-inset-bottom))}
body.landscape #tJump{right:calc(12px + env(safe-area-inset-right));bottom:calc(84px * var(--bs,1) + 18px + env(safe-area-inset-bottom))}
body.landscape #tE{right:calc(12px + 58px * var(--bs,1) + 8px + env(safe-area-inset-right));bottom:calc(84px * var(--bs,1) + 18px + env(safe-area-inset-bottom))}
body.landscape #tSk{right:calc(12px + 116px * var(--bs,1) + 16px + env(safe-area-inset-right));bottom:calc(84px * var(--bs,1) + 18px + 6px * var(--bs,1) + env(safe-area-inset-bottom))}
/* portrait: Attack + Jump/E stack right above the band, skills above them */
body.portrait #tAtk{bottom:calc(var(--band,200px) + 10px)}
body.portrait #tJump{right:calc(12px + 84px * var(--bs,1) + 10px + env(safe-area-inset-right));bottom:calc(var(--band,200px) + 10px)}
body.portrait #tE{right:calc(12px + 84px * var(--bs,1) + 10px + env(safe-area-inset-right));bottom:calc(var(--band,200px) + 18px + 58px * var(--bs,1))}
body.portrait #tSk{right:calc(10px + env(safe-area-inset-right));bottom:calc(var(--band,200px) + 28px + 116px * var(--bs,1))}
/* portrait bottom band: two rows. Row 1: life orb · stamina/hunger/xp · mana orb. Row 2: hotbar 4x2 + bag */
body.portrait #hotbar{display:grid;grid-template-columns:repeat(4,40px);gap:2px}
body.portrait #hotbar .slot{width:40px;height:40px}
body.portrait #bagBtn{width:46px;height:82px;margin-left:3px;font-size:24px}
body.portrait #bars2{bottom:calc(4px + env(safe-area-inset-bottom));padding:2px;gap:0}
body.portrait .orb{bottom:calc(96px + env(safe-area-inset-bottom));width:62px;height:62px}
body.portrait #lifeOrb{left:6px}body.portrait #manaOrb{right:6px}
body.portrait .minibars{bottom:calc(110px + env(safe-area-inset-bottom))}
body.portrait .mb{width:150px;height:12px}
body.portrait #xpbar{width:150px;height:8px;bottom:calc(98px + env(safe-area-inset-bottom))}
body.portrait #qtrack{width:156px}
body.portrait #target{top:calc(150px + env(safe-area-inset-top));width:190px}
body.portrait #bossbar{top:calc(186px + env(safe-area-inset-top));width:240px}
body.portrait #tMenu{right:calc(10px * var(--hs,1) + 2px);top:calc(162px * var(--hs,1) + 6px + env(safe-area-inset-top))}
body.portrait #status{bottom:calc((var(--band,200px) + 30px + 174px * var(--bs,1)) / var(--hs,1))}
body.portrait #log{bottom:calc((var(--band,200px) + 30px + 174px * var(--bs,1)) / var(--hs,1) + 26px);width:220px}
body.portrait .msg{max-width:220px}
body.landscape #log{bottom:calc((var(--band,120px) + 12px) / var(--hs,1))}
body.landscape #status{bottom:calc((var(--band,120px) + 8px) / var(--hs,1))}
/* placement mode */
#placeBar{display:none;position:absolute;right:calc(12px + env(safe-area-inset-right));gap:calc(10px * var(--bs,1));align-items:flex-end}
body.placing #placeBar{display:flex}
body.landscape #placeBar{bottom:calc(10px + env(safe-area-inset-bottom))}
body.portrait #placeBar{bottom:calc(var(--band,200px) + 10px)}
#placeBar button{position:relative!important;width:calc(62px * var(--bs,1));height:calc(62px * var(--bs,1));font-size:calc(24px * var(--bs,1))!important}
#placeBar #tPOk{width:calc(84px * var(--bs,1));height:calc(84px * var(--bs,1));font-size:calc(30px * var(--bs,1))!important;border-color:rgba(90,255,130,.8)!important;background:radial-gradient(circle at 50% 35%,rgba(30,120,50,.65),rgba(6,30,12,.7))!important}
#placeBar #tPCancel{border-color:rgba(255,80,60,.8)!important}
body.placing #tAtk,body.placing #tE,body.placing #tJump,body.placing #tSk{display:none!important}
body.portrait #bottom,body.portrait #center{zoom:1!important}
/* portrait cluster v5b: [E][Jump][Attack] in one row above the band; learned skills in a 2-column grid above Attack (clear of the crosshair) */
body.portrait #tE{right:calc(12px + 84px * var(--bs,1) + 20px + 58px * var(--bs,1) + env(safe-area-inset-right));bottom:calc(var(--band,200px) + 10px)}
body.portrait #tJump{right:calc(12px + 84px * var(--bs,1) + 10px + env(safe-area-inset-right));bottom:calc(var(--band,200px) + 10px)}
body.portrait #tSk{display:grid;grid-template-columns:repeat(2,auto);gap:6px;right:calc(6px + env(safe-area-inset-right));bottom:calc(var(--band,200px) + 20px + 84px * var(--bs,1))}
body.portrait #tSk button{width:calc(44px * var(--bs,1));height:calc(44px * var(--bs,1))}
body.portrait #prompt{max-width:calc(42vw / var(--hs,1));font-size:13px}
body.portrait #log{width:190px;bottom:calc((var(--band,200px) + 30px + 84px * var(--bs,1)) / var(--hs,1))}
body.portrait .msg{max-width:190px}
body.portrait #status{left:8px;transform:none;width:auto;justify-content:flex-start;bottom:calc((var(--band,200px) + 18px + 58px * var(--bs,1)) / var(--hs,1))}
body.landscape #prompt{top:auto;bottom:calc(50% + 22px / var(--hs,1))}
body.portrait #prompt{top:auto;bottom:calc(50% + 22px / var(--hs,1))}
/* ===== v6: blue mana orb, "needs better tool" states, shield slot ===== */
#manaFill{background:radial-gradient(circle at 40% 30%,#9cc8ff,#2a5ee0 48%,#08154a)!important}
#manaOrb{box-shadow:0 0 0 2px #000,0 0 18px rgba(50,110,255,.35),inset 0 0 22px #000!important}
#crosshair.bad{color:#ff6a5a;opacity:.55;transform:translate(-50%,-50%) scale(.9)}
#tAtk.need{border-color:rgba(160,160,170,.6)!important;background:radial-gradient(circle at 50% 35%,rgba(60,60,66,.6),rgba(16,16,18,.65))!important;box-shadow:none!important}
#tAtk.need .ico{filter:grayscale(1);opacity:.45}
#tAtk.need small{color:#ff9a8a}
.eq-shield{left:226px;top:164px;width:58px!important;height:78px!important}
/* ===== v7 (round 6): separate Inventory / Character menus, weapon & tool slots, durability, drop/salvage, repair ===== */
#equip{height:318px}
.eq-helm{left:152px;top:8px}.eq-amulet{left:222px;top:20px}.eq-chest{left:142px;top:72px}
.eq-ring1{left:86px;top:110px}.eq-ring2{left:230px;top:110px}
.eq-legs{left:152px;top:164px}.eq-boots{left:86px;top:180px}
.eq-weapon{left:10px;top:60px;width:62px!important;height:100px!important}
.eq-shield{left:288px;top:60px;width:62px!important;height:100px!important}
.eq-bow{left:94px;top:248px;width:56px!important;height:60px!important}.eq-axe{left:152px;top:248px;width:56px!important;height:60px!important}.eq-pick{left:210px;top:248px;width:56px!important;height:60px!important}
#equip .slot.eq .ico~.eqlab,#equip .slot.eq .ico+.eqlab{display:none}
#equip .eq-bow .eqlab,#equip .eq-axe .eqlab,#equip .eq-pick .eqlab,#equip .eq-weapon .eqlab,#equip .eq-shield .eqlab{color:#6a6a72}
#equip::after{content:'Weapons & tools';position:absolute;left:0;right:0;top:232px;text-align:center;font:10px Arial;color:#6a6670;pointer-events:none}
#equip .slot.inhand{border-color:var(--ember);box-shadow:0 0 8px rgba(255,106,26,.55)}
.slot.picked{outline:2px solid #ffd27a;outline-offset:-2px;box-shadow:0 0 10px rgba(255,210,122,.6)!important}
/* durability bar + low / broken states */
.slot .dur{position:absolute;left:4px;right:4px;bottom:2px;height:3px;background:rgba(0,0,0,.75);border-radius:2px;overflow:hidden;pointer-events:none;z-index:1}
.slot .dur i{display:block;height:100%}
.slot .sockn{bottom:5px}
.slot.low .ico{filter:sepia(1) saturate(6) hue-rotate(-45deg) drop-shadow(0 0 3px #ff2a1a)}
.slot.low{border-color:#c0301c!important}
.slot.broken .ico{filter:grayscale(1) brightness(.55)}
.slot.broken::after{content:'✕';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#ff3a2a;font:bold 24px Arial;text-shadow:0 0 3px #000;pointer-events:none}
#heldName i{color:#8a8680;font-style:normal}
#invSum{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12px;color:#a8a29c;margin-top:4px}#invSum b{color:#fff;font-weight:normal}
#invSum button{margin-left:auto;padding:4px 10px;font-size:13px}.ptsdot{color:#ffa64d!important;font-weight:bold!important}
#invAct{position:sticky;bottom:-12px;z-index:3;margin-top:6px;padding:6px 8px;background:linear-gradient(#1d1b1c,#121112);border:1px solid #3a3438;box-shadow:0 -4px 12px rgba(0,0,0,.6)}
.iaName{font-size:13px;margin-bottom:5px}.iaName.dim{color:#8a8680}.iaName small{font:11px Arial}
.iaBtns{display:flex;flex-wrap:wrap;gap:5px}.iaBtns button,.iaAll button{padding:6px 12px;font-size:13px}
.iaYield{font:11px Arial;color:#a8a29c;margin-top:5px}
.iaAll{margin-top:6px;display:flex;justify-content:flex-end}
.panel button.danger,.panel button.danger:hover{border-color:#ff4a2a!important;background:linear-gradient(#5a1a10,#2a0c08)!important;color:#fff;box-shadow:0 0 10px rgba(255,60,20,.5)}
/* character panel */
#char{width:440px}
.chxp{position:relative;height:14px;background:#111;border:1px solid #3a3a40;margin:4px 0 6px}.chxp div{height:100%;background:linear-gradient(90deg,#8a5a10,#ffb340)}
.chxp span{position:absolute;inset:0;text-align:center;font:10px/14px Arial;color:#fff;text-shadow:0 0 2px #000}
.chsec{font-size:12px;color:#ff8c3a;letter-spacing:.06em;text-transform:uppercase;margin:10px 0 3px;border-bottom:1px solid #2e2a2c;padding-bottom:2px}
#charBody .strow em{font:10px Arial;color:#7a7670;font-style:normal;flex:1;text-align:right}
#charBody .strow button{padding:2px 10px;font-size:14px}
#charBody .stgrid{grid-template-columns:96px 1fr 96px 1fr;font-size:12px}
.chfoot{margin-top:10px;display:flex;justify-content:flex-end}
/* craft tabs (Workbench: Craft / Repair) */
#craftTabs{display:none;gap:4px;margin-bottom:6px}#craftTabs button{flex:1;padding:6px}#craftTabs button.on{border-color:var(--ember);background:linear-gradient(#3a2620,#1e1412);color:#fff}
.repall{margin-bottom:6px}.repall .reccost{text-align:center}
/* HUD: gear slot left of the hotbar, Bag + Character buttons to the right */
#gearSlot{pointer-events:auto!important;cursor:pointer;margin-right:5px;border-color:rgba(255,106,26,.55)}
#gearSlot.idle{opacity:.55}#gearSlot .gk{position:absolute;right:2px;top:0;font:8px Arial;color:#ffb070;text-shadow:0 0 2px #000}
#gearSlot .hk{left:2px}
#sideBtns{display:flex;gap:3px}
#charBtn{pointer-events:auto!important;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  background:linear-gradient(#2a1a14,#120c0a);border:1px solid rgba(255,106,26,.7);box-shadow:inset 0 0 8px rgba(255,90,20,.25)}
#charBtn small{font:9px Arial;color:#ffb070;margin-top:2px}#charBtn:hover{border-color:var(--molten);box-shadow:0 0 10px rgba(255,90,20,.5)}
#charBtn.pts::before{content:'+';position:absolute;right:2px;top:1px;width:13px;height:13px;border-radius:50%;background:#ff7a1a;color:#000;font:bold 11px/13px Arial;text-align:center}
body.mobile #gearSlot .hk{display:none}
body.portrait #gearSlot{width:44px;height:82px;margin-right:3px}
body.portrait #sideBtns{flex-direction:column;gap:2px;margin-left:3px}
body.portrait #bagBtn,body.portrait #charBtn{width:46px!important;height:40px!important;margin-left:0!important;font-size:18px}
body.portrait #charBtn svg{width:18px;height:18px}
body.portrait #equip{height:318px}
body.portrait #char{width:auto}
body.portrait #charBody .stgrid{grid-template-columns:auto 1fr auto 1fr}
body.portrait #charBody .strow em{display:none}
/* portrait inventory: equipped gear first (a little smaller), then the bag + actions */
body.portrait .col2{order:0}
body.portrait #equip{zoom:.84}
body.portrait #invAct{bottom:-10px}

/* ================= v9 (round 8): clean dark UI, Outfit font (SIL OFL, bundled in fonts/), eclipse orbs ================= */
@font-face{font-family:'Outfit';src:url('fonts/Outfit.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{--ui-bg:rgba(7,7,9,.9);--ui-blk:rgba(255,255,255,.055);--ui-blk2:rgba(255,255,255,.09);--ui-line:rgba(255,255,255,.08);--acc:#ff5a1f;--acc2:#ff8a3a;--txt:#ece8e2;--dim:#9a958f}
html,body,body *{font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif!important}
body{color:var(--txt)}
/* panels: near-black glass, lighter item blocks, one hairline accent */
.panel{background:var(--ui-bg)!important;border:1px solid var(--ui-line)!important;border-radius:12px!important;box-shadow:0 24px 70px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.6)!important;padding:14px 18px!important}
.panel::before{height:1px!important;left:18px!important;right:18px!important;background:linear-gradient(90deg,transparent,var(--acc) 50%,transparent)!important;opacity:.55!important}
.ptitle{color:var(--txt)!important;font-weight:600;font-size:18px!important;letter-spacing:.06em;text-transform:uppercase;text-shadow:none!important;border-bottom:1px solid var(--ui-line)!important;padding-bottom:8px!important;align-items:center}
.ptitle::first-letter{color:var(--acc2)}
.closeX{color:var(--dim);font-size:16px;cursor:pointer;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;background:var(--ui-blk)}
.closeX:hover{color:#fff;background:var(--ui-blk2)}
.sub,.stsub{color:var(--dim)!important;font-weight:500;letter-spacing:.04em;text-transform:uppercase;font-size:11px!important}
.panel button,#title button{background:var(--ui-blk2)!important;border:1px solid var(--ui-line)!important;border-radius:7px!important;color:var(--txt)!important;font-weight:500;font-size:14px;padding:8px 14px;box-shadow:none!important}
.panel button:hover:not(:disabled),#title button:hover:not(:disabled){background:rgba(255,255,255,.14)!important;border-color:rgba(255,106,26,.55)!important;box-shadow:none!important}
.panel button.danger{background:rgba(255,70,30,.18)!important;border-color:rgba(255,90,40,.7)!important}
.slot{background:var(--ui-blk)!important;border:1px solid var(--ui-line)!important;border-radius:7px}
.slot:hover{background:var(--ui-blk2)!important}
.slot.sel,.slot.picked,#hotbar .slot.sel{border-color:var(--acc)!important;box-shadow:inset 0 0 0 1px rgba(255,90,31,.35)!important}
.slot .hk,.slot .qty{font-weight:600}
#grid{grid-template-columns:repeat(8,54px)!important;gap:5px!important}
#grid .slot{width:54px;height:54px}
#equip .slot{width:60px!important;height:60px!important}
.rec{background:var(--ui-blk)!important;border:1px solid transparent!important;border-radius:9px;padding:6px 10px!important;margin:4px 0!important}
.rec:hover{border-color:var(--ui-line)!important}
.rec .slot{width:46px!important;height:46px!important}
.recname{font-weight:500}
#tooltip{background:rgba(8,8,10,.96)!important;border:1px solid var(--ui-line)!important;border-radius:9px;box-shadow:0 10px 30px rgba(0,0,0,.7)}
.tt-name{font-weight:600}
#invAct{background:rgba(14,14,16,.97)!important;border:1px solid var(--ui-line)!important;border-radius:9px}
#hotbar .slot{width:48px;height:48px}
#hotbar,#skillbar{gap:4px!important}
.msg{font-weight:400}
#bigmsg div{font-weight:600;letter-spacing:.06em}
.ctl b{border-radius:4px;border-color:var(--ui-line)!important}
/* crafting tabs: big category buttons */
#craftTabs{display:none;grid-template-columns:repeat(4,1fr);gap:6px!important;margin-bottom:10px!important}
#craftTabs button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px!important;min-height:58px}
#craftTabs button .ti{font-size:20px;line-height:1}#craftTabs button .tl{font-size:12px;letter-spacing:.03em}
#craftTabs button em{position:absolute;right:5px;top:3px;font-style:normal;font-size:10px;color:var(--dim)}
#craftTabs button.on{border-color:var(--acc)!important;background:rgba(255,90,31,.12)!important;color:#fff!important}
/* eclipse orbs: black core, glowing rim ring; the ring arc and glow strength show the fill */
.orb{--f:1;background:radial-gradient(circle at 50% 50%,#000 0 58%,#050506 72%,#0d0d10 100%)!important;border:none!important;overflow:hidden}
.orb::after{display:none!important}
.orb::before{content:'';position:absolute;inset:0;border-radius:50%;z-index:2;pointer-events:none;
  background:conic-gradient(from 180deg,var(--oc) calc(var(--f) * 360deg),rgba(255,255,255,.07) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px))}
#lifeOrb{--oc:#ff3a22;box-shadow:0 0 calc(6px + 22px * var(--f)) rgba(255,45,20,calc(.25 + .55 * var(--f))),inset 0 0 calc(6px + 18px * var(--f)) rgba(255,50,25,calc(.2 + .5 * var(--f)))!important}
#manaOrb{--oc:#3a8cff;box-shadow:0 0 calc(6px + 22px * var(--f)) rgba(40,120,255,calc(.25 + .55 * var(--f))),inset 0 0 calc(6px + 18px * var(--f)) rgba(50,130,255,calc(.2 + .5 * var(--f)))!important}
.orbfill{opacity:.13;filter:blur(2px)}
#lifeFill{background:linear-gradient(#ff4a2a,#7a0a04)!important}#manaFill{background:linear-gradient(#5aa0ff,#0a2a7a)!important}
.orbtxt{z-index:3;font-weight:600!important;font-size:15px!important;letter-spacing:.02em;color:#fff;text-shadow:0 0 8px rgba(0,0,0,.9)!important}
body.portrait .orbtxt{font-size:11px!important}
/* pickup feed */
#feed{position:absolute;right:16px;bottom:150px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;zoom:var(--hs,1);pointer-events:none}
.frow{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.6);padding:3px 12px 3px 4px;border-radius:7px;border-left:2px solid var(--acc);font-size:14px;color:#eee;transition:opacity .6s,transform .6s}
.frow .fico{width:26px;height:26px;display:block}.frow b{color:#9ff09a;font-weight:600}.frow i{font-style:normal;color:var(--dim);font-size:12px;margin-left:2px}.frow i::before{content:'('}.frow i::after{content:')'}
.frow.pop{animation:fpop .25s ease-out}.frow.fade{opacity:0;transform:translateX(30px)}
@keyframes fpop{0%{transform:scale(1.12)}100%{transform:scale(1)}}
body.mobile #feed{bottom:auto;top:calc(196px * var(--hs,1) + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right))}
body.mobile .frow{font-size:12px}
/* bow charge ring */
#charge{position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);opacity:0;transition:opacity .12s;pointer-events:none}
#charge.on{opacity:1}#charge svg{width:100%;height:100%;transform:rotate(-90deg)}
#charge circle{fill:none;stroke-width:3}#charge .cbg{stroke:rgba(255,255,255,.15)}#charge .cfg{stroke:#ffc080;stroke-dasharray:113.1;stroke-dashoffset:113.1;stroke-linecap:round}
#charge.full .cfg{stroke:#ff4a2a;filter:drop-shadow(0 0 4px #ff4a2a)}
/* potion quick slot + mobile potion button */
#potSlot{pointer-events:auto!important;cursor:pointer;margin-right:5px;display:flex;align-items:center;justify-content:center}
#potSlot #potN{position:absolute;right:4px;bottom:1px;font-size:12px;font-weight:600;color:#fff;text-shadow:0 0 3px #000}
#potSlot .pk{position:absolute;left:4px;top:1px;font-style:normal;font-size:10px;color:#ffb070}
#potSlot .cdov,#tPot .cdov{height:0;border-radius:inherit;z-index:2}
#potSlot.empty,#tPot.empty{opacity:.45}
body.mobile #potSlot{display:none}
#tPot{display:none}
body.mobile #tPot{display:flex;align-items:center;justify-content:center;position:absolute;width:calc(54px * var(--bs,1));height:calc(54px * var(--bs,1));border-radius:50%;overflow:hidden;
  right:calc(12px + 84px * var(--bs,1) + 10px + env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom));border:1px solid rgba(255,90,40,.7)!important;background:rgba(40,8,4,.6)!important}
body.mobile #tPot b{position:absolute;right:8px;bottom:5px;font-size:12px;font-weight:600;color:#fff;text-shadow:0 0 3px #000;z-index:3}
body.landscape #tPot{right:calc(12px + 116px * var(--bs,1) + 16px + env(safe-area-inset-right));bottom:calc(84px * var(--bs,1) + 18px + 2px * var(--bs,1) + env(safe-area-inset-bottom))}
body.portrait #tPot{right:calc(12px + 15px * var(--bs,1) + env(safe-area-inset-right));bottom:calc(var(--band,200px) + 22px + 84px * var(--bs,1))}
body.placing #tPot{display:none!important}
/* confirm box */
#confirm{width:440px;max-width:92vw}#cfText{line-height:1.5;margin:6px 0 10px}#cfExtra .cfHint{color:var(--dim);font-size:13px;background:var(--ui-blk);border-radius:8px;padding:8px 10px}
#confirm .dlgbtns{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
/* close-key hint (desktop) */
#closeHint{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:40;display:none;font-size:12px;color:var(--dim);background:rgba(0,0,0,.6);padding:4px 10px;border-radius:7px;pointer-events:none}
#closeHint b{color:#ddd;font-weight:600;background:var(--ui-blk2);padding:0 5px;border-radius:4px}
body.uiopen:not(.mobile) #closeHint{display:block}
#buffhot{color:#9ff09a}
#tooltip.docked{max-width:none!important;max-height:calc((100vh - 12px) / var(--ps,1));overflow-y:auto;box-sizing:border-box}
body:not(.portrait) #bottom{padding-left:14px;padding-right:14px;box-sizing:border-box}
#bottom .orb{flex:none}
/* ===== r9: liquid-level orbs. Eclipse rim stays; the value is a liquid that drains top -> bottom ===== */
.orb::before{background:none!important;box-shadow:inset 0 0 0 3px var(--oc),inset 0 0 10px 3px var(--og)!important;-webkit-mask:none!important;mask:none!important;opacity:.95}
#lifeOrb{--oc:#ff3a22;--og:rgba(255,50,25,.55);--lq1:#ff5a36;--lq2:#c4140a;--lq3:#4a0402}
#manaOrb{--oc:#3a8cff;--og:rgba(50,130,255,.55);--lq1:#6ab0ff;--lq2:#1650d8;--lq3:#061848}
.orbfill{opacity:1!important;filter:none!important;z-index:1;transition:height .2s ease-out!important;overflow:visible;
  background:linear-gradient(to bottom,var(--lq2) 0%,var(--lq3) 100%)!important}
.orbfill::before{content:'';position:absolute;left:-20%;right:-20%;top:-5px;height:9px;pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 50% 100%,var(--lq1) 0 92%,transparent 100%) repeat-x;background-size:26px 9px;animation:orbWave 2.6s linear infinite;opacity:.95}
.orbfill::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--lq1);box-shadow:0 0 6px var(--lq1);opacity:.9}
.orbfill.full::before,.orbfill.full::after,.orbfill.empty::before,.orbfill.empty::after{display:none}
@keyframes orbWave{from{transform:translateX(0)}to{transform:translateX(26px)}}
.orbtxt{text-shadow:0 0 3px #000,0 0 3px #000,0 1px 2px #000!important}
/* ===== r9: paper-doll equipment ===== */
#equip{height:auto!important;padding:12px 10px 12px!important;display:flex;flex-direction:column;align-items:center;gap:8px}
#equip::after{display:none!important;content:none!important}
#equip .doll{display:grid;grid-template-columns:repeat(3,60px);grid-template-rows:repeat(4,60px);gap:8px;
  grid-template-areas:". helm amulet" "weapon chest shield" "ring1 legs ring2" ". boots .";position:relative}
#equip .tools{display:grid;grid-template-columns:repeat(3,60px);gap:8px}
#equip .slot{position:relative!important;left:auto!important;top:auto!important;width:60px!important;height:60px!important;margin:0!important}
#equip .eq-helm{grid-area:helm}#equip .eq-amulet{grid-area:amulet}#equip .eq-weapon{grid-area:weapon}#equip .eq-chest{grid-area:chest}#equip .eq-shield{grid-area:shield}
#equip .eq-ring1{grid-area:ring1}#equip .eq-legs{grid-area:legs}#equip .eq-ring2{grid-area:ring2}#equip .eq-boots{grid-area:boots}
#equip .eqsec{align-self:stretch;display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8a8690;margin-top:2px}
#equip .eqsec::before,#equip .eqsec::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
#equip .slot .ghost{position:absolute;left:14px;right:14px;top:9px;bottom:17px;opacity:.17;filter:grayscale(1) brightness(1.6);pointer-events:none}
#equip .slot .eqlab{inset:auto 0 3px 0!important;display:block!important;text-align:center;font-size:9px!important;letter-spacing:.06em;color:#76727c!important;pointer-events:none}
#equip .slot:not(.empty) .eqlab{display:none!important}
#equip .slot.empty{border-style:dashed!important;border-color:rgba(255,255,255,.1)!important;background:rgba(255,255,255,.02)!important}
#heldName{text-align:center;margin:8px 0 6px!important}
#invSum{display:grid!important;grid-template-columns:repeat(5,1fr);gap:4px!important;margin-top:4px}
#invSum span{display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 2px;border-radius:5px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);font-size:10px!important;color:#8a8690;text-transform:uppercase;letter-spacing:.05em}
#invSum span b{font-size:13px;color:#fff;text-transform:none;letter-spacing:0}
#invSum button{grid-column:1/-1;margin:2px 0 0!important;justify-self:stretch}
/* ===== r9: jewel bag ===== */
.jbhead{display:flex;align-items:baseline;gap:8px}.jbhead span{font-size:11px;color:#8a8690;text-transform:none;letter-spacing:0}
#jgrid{display:grid;grid-template-columns:repeat(8,54px);gap:5px;padding:6px;border-radius:6px;background:rgba(160,110,255,.05);border:1px solid rgba(190,150,255,.14)}
#jgrid .slot{width:54px;height:54px}
#jgrid .slot:not(.r-g){border-color:rgba(190,150,255,.1)!important}
body.portrait #jgrid,body.small #jgrid{grid-template-columns:repeat(8,1fr);gap:3px;padding:4px}
body.portrait #jgrid .slot,body.small #jgrid .slot{width:auto;height:auto;aspect-ratio:1}
.frow.fjewel b{color:#d0a0ff}
/* ===== r9: context menu ===== */
#ctxMenu{position:fixed;z-index:60;min-width:180px;max-width:300px;zoom:var(--ps,1);padding:5px;border-radius:8px;background:rgba(16,15,19,.97);border:1px solid rgba(255,255,255,.13);box-shadow:0 10px 30px rgba(0,0,0,.7);font-size:13px}
#ctxMenu .cxT{padding:5px 8px 6px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ctxMenu button{display:flex;align-items:center;gap:6px;width:100%;text-align:left;padding:7px 9px!important;margin:1px 0!important;background:transparent!important;border:none!important;border-radius:5px;color:#e8e4ee;font-size:13px;min-height:0}
#ctxMenu button:hover:not(:disabled){background:rgba(255,255,255,.08)!important}
#ctxMenu button:disabled{opacity:.4}
#ctxMenu button small{color:#8a8690;margin-left:auto;font-size:11px}
#ctxMenu button.danger{color:#ff8a6a!important;background:rgba(255,60,30,.12)!important}
#ctxMenu hr{border:none;height:1px;background:rgba(255,255,255,.08);margin:3px 4px}
#ctxMenu .cxIco{width:20px;height:20px;display:inline-block;flex:none}
body.portrait #ctxMenu button,body.small #ctxMenu button{padding:10px 10px!important}
#bowHint{position:absolute;left:50%;top:calc(50% + 46px);transform:translateX(-50%);padding:6px 12px;border-radius:999px;background:rgba(12,12,15,.82);border:1px solid rgba(255,140,60,.45);color:#f2e8de;font-size:13px;white-space:nowrap;zoom:var(--hs,1);pointer-events:none;opacity:0;transition:opacity .4s}
#bowHint.on{opacity:1}#bowHint b{color:#ffb070}
.settings label.chk{display:flex;align-items:center;gap:8px;font-size:13px}
body.portrait #grid,body.small #grid{grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:3px!important}
body.portrait #grid .slot,body.small #grid .slot{width:auto!important;height:auto!important;aspect-ratio:1}
body.portrait #jgrid,body.small #jgrid{grid-template-columns:repeat(8,minmax(0,1fr))}
body.portrait #equip .doll,body.portrait #equip .tools{grid-template-columns:repeat(3,56px);grid-template-rows:repeat(4,56px)}
body.portrait #equip .tools{grid-template-rows:56px}
body.portrait #equip .slot{width:56px!important;height:56px!important}
/* ===== r9: rarity on every item slot: coloured border + inner tint + a corner marker shape (colour-blind cue) =====
   Common: plain · Enchanted (blue): ● · Rare (yellow): ◆ · Relic (gold): ★ · Kindred set (green): ▲ · Gems/Sigils (violet): ⬢ */
.slot.r-m{--rc:124,156,255}.slot.r-r{--rc:255,229,90}.slot.r-u{--rc:217,163,90}.slot.r-s{--rc:62,224,80}.slot.r-g{--rc:208,160,255}
.slot.r-m,.slot.r-r,.slot.r-u,.slot.r-s,.slot.r-g{border-color:rgba(var(--rc),.85)!important;background:radial-gradient(circle at 50% 58%,rgba(var(--rc),.20),rgba(var(--rc),.07) 62%,rgba(10,10,12,.78))!important;box-shadow:inset 0 0 8px rgba(var(--rc),.18)}
.slot.r-u,.slot.r-s{border-width:2px!important}
.slot.r-n:not(:empty){border-color:rgba(255,255,255,.16)!important}
.slot.r-m::after,.slot.r-r::after,.slot.r-u::after,.slot.r-s::after,.slot.r-g::after{content:'';position:absolute;top:3px;right:3px;width:8px;height:8px;background:rgb(var(--rc));z-index:3;pointer-events:none;filter:drop-shadow(0 0 1px #000)}
.slot.r-m::after{border-radius:50%;width:7px;height:7px}
.slot.r-r::after{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.slot.r-u::after{width:10px;height:10px;top:2px;right:2px;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.slot.r-s::after{clip-path:polygon(50% 0,100% 100%,0 100%)}
.slot.r-g::after{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
#jgrid .slot.r-g::after{display:none}
.slot.unusable{background:radial-gradient(circle,rgba(150,20,20,.55),rgba(60,8,8,.85))!important}
.slot .sockn{color:#cfc6dc;font-size:10px;text-shadow:0 0 2px #000}
body.mobile .slot.r-m::after,body.mobile .slot.r-r::after,body.mobile .slot.r-s::after,body.mobile .slot.r-g::after{width:7px;height:7px;top:2px;right:2px}
/* selection / in-hand states stay on top of rarity */
.slot.sel,.slot.picked,#hotbar .slot.sel{border-color:var(--acc)!important;border-width:2px!important}
#equip .slot.inhand{border-color:var(--ember,#ff6a1a)!important}
.slot.low{border-color:#c0301c!important}
.slot.broken::after{content:'✕'!important;inset:0!important;top:0!important;right:0!important;width:auto!important;height:auto!important;background:none!important;clip-path:none!important;border-radius:0!important;display:flex;align-items:center;justify-content:center;color:#ff3a2a;font:bold 24px Arial}

/* ===================== r11 ===================== */
/* new-item highlight: pulsing amber ring + dot, cleared once the inventory has been open with it showing */
@keyframes nwPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}
#bagBtn.hasnew::after{content:attr(data-n);position:absolute;right:-4px;top:-5px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:#ffd24a;color:#1a1206;font:bold 10px/15px Arial;text-align:center;box-shadow:0 0 8px rgba(255,200,60,.8);animation:nwPulse 1.4s ease-in-out infinite}
#bagBtn{overflow:visible!important}

/* paper doll: bow sits beside the main weapon; the tools row is Axe + Pickaxe */
#equip .doll{grid-template-areas:"bow helm amulet" "weapon chest shield" "ring1 legs ring2" ". boots ."!important}
#equip .eq-bow{grid-area:bow}
#equip .tools{grid-template-columns:repeat(2,60px)!important}
body.portrait #equip .tools{grid-template-columns:repeat(2,56px)!important}
#equip .eq-bow .eqlab{color:#6a6a72}

/* right-hand skill column (desktop): learned skills only */
#skillcol{position:absolute;right:14px;bottom:150px;display:flex;flex-direction:column;gap:5px;zoom:var(--hs,1)}
#skillcol .skslot{width:46px;height:46px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(10,10,12,.78);box-shadow:0 2px 8px rgba(0,0,0,.6)}
#skillcol .skico{inset:5px;border-radius:7px}
#skillcol .hk{left:auto;right:4px;top:auto;bottom:2px;font:bold 11px Arial;background:rgba(0,0,0,.65);border-radius:4px;padding:0 3px;color:#ffd9b0}
#skillcol .sknm{display:none}
#skillcol .cdov{border-radius:10px}
body.mobile #skillcol{display:none!important}
body:not(.mobile) #feed{right:84px}

/* stamina / hunger: slim rounded bars with an icon and a value */
.minibars{gap:10px!important}
.mb{height:14px!important;width:236px;background:none!important;border:0!important;display:flex;align-items:center;gap:5px}
.mb .mbi{font-style:normal;font-size:11px;width:14px;text-align:center;filter:saturate(1.1);flex:none;line-height:14px}
.mb .mbt{flex:1;height:8px;border-radius:5px;background:rgba(0,0,0,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.6);overflow:hidden;position:relative}
.mb .mbt>div{height:100%;border-radius:5px;transition:width .15s}
.mb.sb .mbt>div{background:linear-gradient(90deg,#d9a520,#ffe27a)!important}
.mb.hb .mbt>div{background:linear-gradient(90deg,#a8481a,#f0a25a)!important}
.mb span{position:static!important;flex:none;width:34px;text-align:right;font:600 10px Arial!important;line-height:14px!important;color:#e8e2d8!important;text-shadow:0 1px 2px #000!important}
.mb.low .mbt{box-shadow:inset 0 0 0 1px rgba(255,80,40,.7),0 0 8px rgba(255,60,20,.45);animation:lowPulse 1s ease-in-out infinite}
@keyframes lowPulse{50%{box-shadow:inset 0 0 0 1px rgba(255,80,40,.25),0 0 2px rgba(255,60,20,.1)}}
body.portrait .mb{width:150px!important;height:13px!important}
body.portrait .mb span{width:30px}

/* EXP: green, rounded, with 10% ticks, a level badge and the percent */
#xpbar{height:9px!important;border-radius:5px;border:0!important;background:rgba(0,0,0,.65)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);overflow:visible}
#xpFill{border-radius:5px;background:linear-gradient(180deg,#9cf27a,#3fae3a 55%,#237a26)!important;box-shadow:0 0 6px rgba(90,220,80,.45)}
#xpTicks{position:absolute;inset:0;border-radius:5px;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(0,0,0,.45) calc(10% - 1px) 10%)}
#lvlTxt{position:absolute!important;left:auto!important;right:calc(100% + 6px)!important;top:50%!important;transform:translateY(-50%)!important;font:bold 10px Arial!important;color:#c8ffb0!important;background:rgba(10,30,10,.85);border:1px solid rgba(120,230,100,.5);border-radius:8px;padding:1px 6px;line-height:12px!important;text-shadow:none!important}
#xpPct{position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%);font:600 10px Arial;color:#b8f0a8;text-shadow:0 1px 2px #000;white-space:nowrap}
body.portrait #xpbar{height:8px!important}
body.portrait #lvlTxt{font-size:8px!important;padding:0 4px;line-height:10px!important}
body.portrait #xpPct{font-size:8px}

/* pulsing 'points to spend' notice (tap / click opens Stats or Skills) */
#ptsNote{position:fixed;left:14px;top:120px;z-index:30;display:none;flex-direction:column;align-items:flex-start;gap:6px;zoom:var(--hs,1);pointer-events:none}
body.uiopen #ptsNote{display:none!important}
.ptsp{pointer-events:auto;cursor:pointer;font:600 13px Georgia,serif;color:#ffe2b8;background:linear-gradient(90deg,rgba(90,36,6,.92),rgba(40,16,4,.85));border:1px solid #ff9a3a;border-radius:16px;padding:5px 12px 5px 9px;display:flex;align-items:center;gap:7px;
  box-shadow:0 0 0 0 rgba(255,140,40,.7);animation:ptsPulse 1.6s ease-out infinite;white-space:nowrap}
.ptsp i{font-style:normal;color:#ffd24a}
.ptsp.sk{border-color:#8ab8ff;background:linear-gradient(90deg,rgba(20,40,90,.92),rgba(8,16,40,.85));color:#dbe8ff;animation-name:ptsPulseB}
.ptsp.sk i{color:#9cc8ff}
.ptsp .pk{font:11px Arial;color:#d8c8b0;opacity:.9}.ptsp .pk b{display:inline-block;min-width:16px;text-align:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:4px;padding:0 4px;color:#fff;margin-left:2px}
@keyframes ptsPulse{0%{box-shadow:0 0 0 0 rgba(255,140,40,.75)}70%{box-shadow:0 0 0 10px rgba(255,140,40,0)}100%{box-shadow:0 0 0 0 rgba(255,140,40,0)}}
@keyframes ptsPulseB{0%{box-shadow:0 0 0 0 rgba(110,160,255,.75)}70%{box-shadow:0 0 0 10px rgba(110,160,255,0)}100%{box-shadow:0 0 0 0 rgba(110,160,255,0)}}
body.mobile .ptsp{font-size:13px;padding:6px 12px 6px 9px}

/* Build panel */
#build{width:520px;max-width:96vw}
#build .bsub{font-size:12px;color:var(--dim);margin:0 0 6px;line-height:1.45}
#build .bsub b{color:#ddd}
#buildList .rec .recnote{font-size:11px;color:#a8a29a;margin-top:2px;line-height:1.35}
#buildList .rec.needst{opacity:.72}
#buildMats{font-size:11px;color:#a09a94;display:flex;gap:4px 14px;margin:6px 0 2px}#buildMats b{color:#fff}
#build .hint{margin-top:4px}

/* Pause: Game · Settings · Help */
#pause{width:640px!important;max-width:96vw;text-align:left!important}
#pause .ptitle{justify-content:center}
.ptabs{display:flex;gap:6px;justify-content:center;margin:2px 0 12px}
.ptabs button{min-width:110px;border-radius:18px!important;border:1px solid var(--ui-line)!important;background:var(--ui-blk)!important;color:#cfc8c0!important}
.ptabs button.on{border-color:var(--acc)!important;color:#fff!important;background:linear-gradient(rgba(255,90,31,.28),rgba(255,90,31,.12))!important}
#ps-game .pbtns{margin:4px auto 8px}
.psave{text-align:center;font-size:12px;color:var(--dim)}
#ps-settings .settings{display:flex!important;flex-direction:column!important;gap:12px!important;align-items:stretch!important;margin:0}
.sgrp{background:var(--ui-blk);border:1px solid var(--ui-line);border-radius:10px;padding:8px 12px}
.sgh{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc2);margin-bottom:4px}
.sgrp label{display:flex!important;align-items:center;gap:10px;font-size:13px;padding:4px 0}
.sgrp label>span{width:130px;flex:none;color:#ddd}
.sgrp label input[type=range]{flex:1;min-width:0}
.sgrp label b{width:76px;text-align:right;font-weight:600;color:#fff;font-size:12px}
.sgrp label.chk{gap:8px}
.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hcat{background:var(--ui-blk);border:1px solid var(--ui-line);border-radius:10px;padding:8px 10px}
.hct{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc2);margin-bottom:5px}
.hct span{font-size:14px;letter-spacing:0}
.hrow{display:flex;gap:10px;align-items:baseline;font-size:12.5px;padding:2px 0;border-top:1px solid rgba(255,255,255,.04)}
.hrow:first-of-type{border-top:0}
.hrow .hk{flex:none;min-width:112px;color:#fff;white-space:nowrap}
.hrow .hv{color:#cfc8bf;line-height:1.35}
kbd{display:inline-block;font:600 11px Arial;color:#fff;background:linear-gradient(#3a3a40,#232327);border:1px solid #55555e;border-bottom-width:2px;border-radius:4px;padding:0 5px;margin:0 1px;line-height:16px}
.hfoot{margin-top:10px;font-size:12px;color:var(--dim);text-align:center;line-height:1.5}
body.portrait .hgrid{grid-template-columns:1fr}
body.portrait .sgrp label>span{width:104px}
body.mobile .hrow .hk{min-width:96px;white-space:normal;color:#ffd9b0}
/* tooltip: gathering block for axes / pickaxes */
.tt-gath{margin:4px 0 2px;padding:4px 6px;border-radius:6px;background:rgba(120,200,255,.07);border:1px solid rgba(120,200,255,.18);font-size:12px}
.tt-gh{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#9fd8ff;margin-bottom:2px}

/* r11 help: compact three-column cheat sheet */
#pause{width:900px!important}
.hgrid{grid-template-columns:repeat(3,1fr)!important;gap:8px!important}
.hcat{padding:7px 9px!important}
.hrow{font-size:12px!important;gap:8px!important;padding:2px 0!important}
.hrow .hk{min-width:0!important;width:92px;flex:none;white-space:normal!important}
.hrow .hv{line-height:1.3}
kbd{font-size:10px;line-height:15px;padding:0 4px}
body.small:not(.portrait) .hgrid{grid-template-columns:repeat(2,1fr)!important}
body.portrait .hgrid{grid-template-columns:1fr!important}
@keyframes nwPulse2{0%,100%{opacity:1}50%{opacity:.55}}

.sgrp label b{display:inline-block}
#inv .jbhead .jbico{display:inline-block;width:18px;height:18px;vertical-align:-4px;margin-right:2px}
#inv .jbhead .jbico svg{width:18px;height:18px}
/* r11: NEW marker = glow + small pulsing dot at the top centre (clear of the hotbar number and the rarity marker) */

/* ===================== r12 ===================== */
/* the in-game "Close: Esc …" hint and other HUD bits never show on the title screen */
body.intitle #closeHint,body.intitle #ptsNote,body.intitle #clickhint{display:none!important}
/* title colour variants: add ONE class to #title to switch (tv-a darker glow · tv-b brighter glow · tv-c black with ember rim). No class = original. */
#title.tv-a #titleName{text-shadow:0 0 30px #6a0802,0 0 12px #3a0400,0 4px 6px #000;background:linear-gradient(#f0b070 0%,#d8601c 30%,#9a2406 60%,#3a0400 100%);-webkit-background-clip:text;background-clip:text;animation:emberPulseA 4s ease-in-out infinite}
@keyframes emberPulseA{0%,100%{filter:drop-shadow(0 0 10px rgba(120,10,0,.95)) drop-shadow(0 0 26px rgba(90,4,0,.85)) drop-shadow(0 4px 4px #000)}50%{filter:drop-shadow(0 0 14px rgba(150,14,0,1)) drop-shadow(0 0 38px rgba(110,6,0,.95)) drop-shadow(0 4px 4px #000)}}
#title.tv-b #titleName{text-shadow:none;background:linear-gradient(#fff6d8 0%,#ffc050 30%,#ff6a18 58%,#a81806 100%);-webkit-background-clip:text;background-clip:text;animation:emberPulseB 4s ease-in-out infinite}
@keyframes emberPulseB{0%,100%{filter:drop-shadow(0 0 16px rgba(255,100,10,.8)) drop-shadow(0 3px 3px rgba(0,0,0,.8))}50%{filter:drop-shadow(0 0 30px rgba(255,120,20,1)) drop-shadow(0 3px 3px rgba(0,0,0,.8))}}
#title.tv-c #titleName{text-shadow:none;background:linear-gradient(#24130f 0%,#1a0f0c 50%,#2a0e06 78%,#7a1e06 100%);-webkit-background-clip:text;background-clip:text;animation:emberPulseC 3.2s ease-in-out infinite}
@keyframes emberPulseC{0%,100%{filter:drop-shadow(0 0 1px #ff8a2a) drop-shadow(0 0 1px #ff5a10) drop-shadow(0 0 12px rgba(255,60,0,.65)) drop-shadow(0 4px 4px #000)}50%{filter:drop-shadow(0 0 1.5px #ffb050) drop-shadow(0 0 1px #ff6a1a) drop-shadow(0 0 22px rgba(255,80,0,.85)) drop-shadow(0 4px 4px #000)}}

/* new-item marker: neutral silver/pale-blue tint + inner ring + small white dot at top-left (::before), so the rarity colour/marker (::after) stays intact */
.slot.isnew{box-shadow:inset 0 0 0 2px rgba(226,236,255,.9),inset 0 0 14px rgba(200,220,255,.35),0 0 8px rgba(210,225,255,.35)!important;background-image:linear-gradient(rgba(225,235,255,.20),rgba(200,215,240,.06))!important}
.slot.isnew::before{content:'';position:absolute;left:calc(50% - 3.5px);top:3px;width:7px;height:7px;border-radius:50%;background:#f4f8ff;box-shadow:0 0 0 1px rgba(20,24,32,.7),0 0 6px rgba(220,235,255,.95);z-index:4;pointer-events:none;animation:nwPulse2 1.4s ease-in-out infinite}
@keyframes nwPulse2{0%,100%{opacity:1}50%{opacity:.75}}
/* r12: no Satchel/Stats squares next to the hotbar (I / C on PC, ☰ on phones) */
#sideBtns{display:none!important}
body.mobile #sideBtns{display:flex!important}
/* r12: the old Use and potion touch buttons are replaced by the contextual action button and the quick-drink popups */
body.mobile #tE{display:none!important}
#tAct{display:none}
body.placing #tAct{display:none!important}
/* r12: quick-drink popups (heal = red +, mana = blue) */
.qpop{display:none;position:fixed;z-index:7;pointer-events:auto;cursor:pointer;overflow:hidden;align-items:center;justify-content:center;box-sizing:border-box;
  border-radius:50%;font-family:Outfit,system-ui,sans-serif;color:#fff;user-select:none;-webkit-user-select:none}
.qpop.show{display:flex;animation:qpIn .18s ease-out}
@keyframes qpIn{from{opacity:0;transform:scale(.7)}to{opacity:1}}
body.uiopen .qpop,body.intitle .qpop{display:none!important}
#qHeal{background:radial-gradient(circle at 50% 40%,rgba(200,30,20,.92),rgba(90,8,6,.92));border:2px solid #ff6a50;box-shadow:0 0 14px rgba(255,40,20,.6)}
#qMana{background:radial-gradient(circle at 50% 40%,rgba(40,90,230,.92),rgba(10,24,90,.92));border:2px solid #6aa0ff;box-shadow:0 0 14px rgba(50,120,255,.6)}
.qpop .qi{font-weight:700;line-height:1;text-shadow:0 1px 2px #000}
.qpop b{position:absolute;right:6px;bottom:3px;font:600 11px Outfit,sans-serif;text-shadow:0 0 3px #000}
.qpop .qk{position:absolute;left:0;right:0;top:3px;text-align:center;font:600 10px Outfit,sans-serif;font-style:normal;color:#fff;opacity:.85}
.qpop .cdov{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(0,0,0,.55);pointer-events:none}
/* PC: small popups centred above each orb, showing the key */
body:not(.mobile) .qpop{width:46px;height:46px;transform:translateX(-50%);animation:none}
body:not(.mobile) .qpop .qi{font-size:22px;margin-top:6px}
body:not(.mobile) .qpop.show{animation:qpPulse 1.6s ease-in-out infinite}
@keyframes qpPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
/* phones: heal on the left edge, mana on the right edge, mid-height (no key label) */
body.mobile .qpop{width:calc(62px * var(--bs,1));height:calc(62px * var(--bs,1));top:46%}
body.mobile .qpop .qk{display:none}
body.mobile .qpop .qi{font-size:calc(30px * var(--bs,1))}
body.mobile #qHeal{left:calc(10px + env(safe-area-inset-left))}
body.mobile #qMana{right:calc(10px + env(safe-area-inset-right));left:auto}
/* r12: new-item count on the ☰ button and the Satchel entry; stat-point marker on the Stats entry */
#tMenuBtn.hasnew::after,#tFan button.hasnew::after{content:attr(data-n);position:absolute;right:-4px;top:-5px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:#eef4ff;color:#141820;font:bold 10px/15px Arial;text-align:center;box-shadow:0 0 6px rgba(220,235,255,.8);z-index:2}
#tFan button.pts::after{content:'+';position:absolute;right:-3px;top:-4px;width:15px;height:15px;border-radius:50%;background:#ff7a1a;color:#000;font:bold 12px/15px Arial;text-align:center;z-index:2}
#tMenuBtn,#tFan button{overflow:visible!important}
.satico{display:inline-block}
#tFan .fico{width:24px;height:24px;display:block;margin:0 auto}
#tFan .fico svg{width:100%;height:100%;display:block}
#inv .ptitle .pico{width:22px;height:22px;vertical-align:-4px;margin-right:6px}
#inv .ptitle .pico svg{width:100%;height:100%}
/* r12: Settings → Revert to defaults */
.sgrp.sdef{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.08);padding-top:10px}
#defAsk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}#defAsk.hidden{display:none}
#defAsk>span{color:#ffd6b0;font-size:13px}
#btnDefYes.danger{border-color:rgba(255,90,60,.8)!important;color:#ffb8a8!important}
/* r12: Maren's quest offer card */
#dlgQuest{margin:4px 0 12px;padding:10px 12px;border:1px solid rgba(255,138,58,.45);border-radius:10px;background:linear-gradient(rgba(255,120,40,.10),rgba(255,120,40,.03));font-family:Outfit,system-ui,sans-serif}
#dlgQuest.hidden{display:none}
#dlgQuest .dq-tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#ff9a50}
#dlgQuest .dq-title{font-size:18px;font-weight:600;color:#fff;margin:2px 0 4px}
#dlgQuest .dq-desc{font-size:13px;line-height:1.45;color:#cfc8c0}
#dlgQuest .dq-btns{display:flex;justify-content:flex-end;margin-top:8px}
#btnAccept{background:linear-gradient(#e8641e,#b8420e)!important;border-color:#ffa060!important;color:#fff!important;font-weight:600!important;padding:8px 18px!important}
#btnAccept:hover{filter:brightness(1.12)}
/* r12: trade menu */
#dialog{font-family:Outfit,system-ui,sans-serif}
#dialog.trading{width:680px}
#dialog.trading #dlgText,#dialog.trading #dlgQuest{display:none}
#dialog .dlgbtns{justify-content:flex-end}
#shop{margin-top:10px;border-top:1px solid var(--ui-line);padding-top:10px}
#shop .shtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
#shop .shtabs{display:flex;gap:4px;background:rgba(255,255,255,.04);border-radius:9px;padding:3px}
#shop .shtabs button{min-width:84px;background:transparent!important;border-color:transparent!important;color:var(--dim)!important;font-weight:600}
#shop .shtabs button.on{background:rgba(255,255,255,.12)!important;color:#fff!important;border-color:rgba(255,138,58,.55)!important}
#shop .shgold{font-size:17px;color:#ffd27a;display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.35);border:1px solid rgba(255,210,122,.25);border-radius:8px;padding:4px 10px}
#shop .price{display:inline-flex;align-items:center;gap:4px;color:#ffd27a;font-weight:600;white-space:nowrap}
#shop .shwares{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#shop .ware{display:flex;align-items:center;gap:10px;background:var(--ui-blk);border:1px solid var(--ui-line);border-radius:9px;padding:7px 9px}
#shop .ware:hover{border-color:rgba(255,138,58,.4)}
#shop .ware.dis{opacity:.5}
#shop .ware.poor .price{color:#d07060}
#shop .wico{width:46px!important;height:46px!important;flex:none;position:relative}
#shop .wico .wq{position:absolute;right:3px;bottom:1px;font:700 13px Outfit,sans-serif;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000}
#shop .wtx{flex:1;min-width:0}
#shop .wn{font-weight:600;color:#fff;font-size:14px}
#shop .wd{font-size:12px;color:var(--dim);line-height:1.3}
#shop .wbuy{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
#shop .wbuy button{padding:5px 14px!important;font-size:13px!important}
#shop .shsub{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#cba;margin:4px 0 5px}
#shop .dim{color:var(--dim);text-transform:none;letter-spacing:0}
#shop .shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:4px;margin-bottom:8px}
#shop .shopgrid .slot{width:auto;height:auto;aspect-ratio:1;cursor:pointer}
#shop .shopgrid .slot .sp{position:absolute;left:0;right:0;bottom:0;text-align:center;font:600 10px Outfit,sans-serif;color:#ffd27a;background:rgba(0,0,0,.55);border-radius:0 0 6px 6px;pointer-events:none;z-index:2}
#shop .shopgrid .slot .qty{bottom:12px}
#shop .shopgrid .slot.shsel{box-shadow:0 0 0 2px #ff9a50,0 0 12px rgba(255,140,60,.6)!important}
#shop .shempty{font-size:13px;color:var(--dim);margin-bottom:8px}
#shop .sellbar{position:sticky;bottom:-14px;display:flex;align-items:center;gap:10px;justify-content:flex-end;background:rgba(10,10,12,.95);border-top:1px solid var(--ui-line);padding:8px 2px;margin-top:4px;min-height:36px}
#shop .sellbar .sbn{margin-right:auto;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#shop .sellbtn{background:linear-gradient(#c89a30,#8a6410)!important;border-color:#f0c860!important;color:#fff!important;font-weight:600!important}
body.portrait #dialog.trading{width:calc((100vw - 10px) / var(--ps,1))!important}
body.portrait #shop .shwares{grid-template-columns:1fr}
body.portrait #shop .shopgrid{grid-template-columns:repeat(6,1fr)}
body.portrait #shop .shtabs button{min-width:70px}
/* r12: tagline removed, keep some space between the title and the buttons */
#titleName{margin-bottom:22px}
body.portrait #titleName,body.landscape #titleName{margin-bottom:16px}
.qpop b{left:0;right:0;bottom:3px;text-align:center;font-size:10px}
body.mobile .qpop b{bottom:5px;font-size:calc(11px * var(--bs,1))}
body.mobile .qpop .qi{margin-top:-8px}
body.mobile.uiopen #log{opacity:0}

/* ===================== r13 ===================== */
/* desktop: the potion square left of the hotbar is gone; the Heal (H) / Mana (N) popups above the orbs replace it */
body:not(.mobile) #potSlot{display:none!important}
body:not(.mobile):not(.pcq) .qpop{width:auto!important;height:auto!important;border-radius:20px!important;padding:5px 12px 5px 9px;gap:6px;transform:translateX(-50%);white-space:nowrap}
body:not(.mobile) .qpop .qi{font-size:17px!important;margin:0!important}
body:not(.mobile) .qpop .ql{font:600 14px Outfit,system-ui,sans-serif;letter-spacing:.02em;text-shadow:0 1px 2px #000}
body:not(.mobile) .qpop .ql .qk{position:static!important;display:inline!important;font:500 13px Outfit,sans-serif;opacity:.85}
body:not(.mobile) .qpop b{position:static!important;font:600 12px Outfit,sans-serif;background:rgba(0,0,0,.35);border-radius:9px;padding:0 6px;margin-left:2px}
/* phones: heal potion button (always there) with a clear +, and a mana potion button; they pulse when low */
#tMana{display:none}
body.mobile #tMana{display:flex;align-items:center;justify-content:center;position:absolute;border-radius:50%;overflow:hidden;border:1px solid rgba(80,130,255,.75)!important;background:rgba(6,12,40,.6)!important}
body.mobile #tMana b,body.mobile #tPot b{position:absolute;right:auto;left:0;right:0;text-align:center;bottom:3px;font-size:11px;font-weight:600;color:#fff;text-shadow:0 0 3px #000;z-index:3}
body.mobile #tMana .cdov{height:0;border-radius:inherit;z-index:2}
body.mobile #tMana.empty{opacity:.45}
body.placing #tMana{display:none!important}
.qplus{position:absolute;left:50%;top:3px;transform:translateX(-50%);font:800 calc(15px * var(--bs,1))/1 Outfit,Arial,sans-serif;font-style:normal;color:#fff;z-index:3;pointer-events:none;
  text-shadow:0 0 3px #000,0 0 2px #000}
#tPot .qplus{color:#ffe0d8}#tMana .qplus{color:#dfe8ff}
body.mobile #tPot svg,body.mobile #tMana svg{margin-top:6px}
#tPot.low{animation:potLow 1s ease-in-out infinite}
#tMana.low{animation:manaLow 1.1s ease-in-out infinite}
@keyframes potLow{0%,100%{box-shadow:0 0 0 0 rgba(255,60,40,.0)}50%{box-shadow:0 0 0 4px rgba(255,60,40,.55),0 0 16px rgba(255,60,40,.8)}}
@keyframes manaLow{0%,100%{box-shadow:0 0 0 0 rgba(60,120,255,.0)}50%{box-shadow:0 0 0 4px rgba(60,120,255,.55),0 0 16px rgba(60,120,255,.8)}}
/* phones: the contextual action tag, a pill pointing left toward what you aim at ("‹ TALK") */
body.mobile #tAct.show{display:flex;align-items:center;gap:4px;position:absolute;height:calc(40px * var(--bs,1));padding:0 calc(14px * var(--bs,1)) 0 calc(20px * var(--bs,1));
  background:linear-gradient(90deg,rgba(255,138,58,.95),rgba(220,90,20,.92));color:#fff;border:none!important;border-radius:0 calc(20px * var(--bs,1)) calc(20px * var(--bs,1)) 0!important;
  clip-path:polygon(calc(14px * var(--bs,1)) 0,100% 0,100% 100%,calc(14px * var(--bs,1)) 100%,0 50%);
  font:700 calc(15px * var(--bs,1))/1 Outfit,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;pointer-events:auto;z-index:6;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));box-shadow:none}
body.mobile #tAct .ar{font-size:calc(20px * var(--bs,1));line-height:1;margin-top:-2px}
body.mobile #tAct .av{white-space:nowrap}
body.mobile #tAct.on{filter:brightness(1.2) drop-shadow(0 2px 4px rgba(0,0,0,.6))}
body.mobile #tAct.need{background:linear-gradient(90deg,rgba(150,60,50,.95),rgba(110,40,30,.92))}
/* phones: Inventory button at the end of the hotbar */
body.mobile #bagBtn{width:calc(50px)!important;height:auto!important;align-self:stretch;margin-left:3px!important;font-size:12px;gap:2px;padding:2px 0}
body.mobile #bagBtn .satico{width:28px;height:28px;display:block}body.mobile #bagBtn .satico svg{width:100%;height:100%}
body.mobile #bagBtn small{font:600 9px Outfit,system-ui,sans-serif;color:#ffd6b0;letter-spacing:.02em;margin:0}
#bagBtn.hasnew::after{background:#eef4ff!important;color:#141820!important;box-shadow:0 0 6px rgba(220,235,255,.8)!important}
/* build placement: keep the ✔ ⟳ ✖ bar above the bottom HUD sideways too */
body.landscape #placeBar{bottom:calc(var(--band,120px) + 10px + env(safe-area-inset-bottom))}
/* quest step lists (quest log + Maren's offer card) */
ol.qsteps{margin:6px 0 2px;padding-left:20px;line-height:1.45}
ol.qsteps li{margin:2px 0}
ol.qsteps b{color:#ffd6b0;font-weight:600}
body.mobile #tAct.show{flex-direction:row!important;justify-content:center}
body.mobile #tPot svg,body.mobile #tMana svg{width:52%;height:52%}

/* ===================== r14 ===================== */
/* phones: no always-on potion buttons; quick drinks only pop up when low (positioned in layoutTouch) */
body.mobile #tPot,body.mobile #tMana{display:none!important}
.qpop .qin,.qpop .qbadge{display:none}
body.mobile .qpop{right:auto!important;bottom:auto!important;border-radius:50%;overflow:visible!important;padding:0;animation:qpIn .18s ease-out,qpGlow 1.2s ease-in-out .2s infinite}
body.mobile .qpop .qi,body.mobile .qpop .ql,body.mobile .qpop>.cdov{display:none!important}
body.mobile .qpop .qin{display:block;position:absolute;inset:0;border-radius:50%;overflow:hidden}
body.mobile .qpop .qico{position:absolute;inset:14%;display:block}body.mobile .qpop .qico svg{width:100%;height:100%;display:block}
body.mobile .qpop .qin .cdov{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(0,0,0,.55)}
body.mobile #qHeal{background:radial-gradient(circle at 50% 40%,rgba(90,14,10,.88),rgba(30,4,3,.9));border:2px solid #ff5a40}
body.mobile #qMana{background:radial-gradient(circle at 50% 40%,rgba(14,30,90,.88),rgba(4,8,30,.9));border:2px solid #5a8cff}
body.mobile .qpop .qbadge{display:flex;align-items:center;justify-content:center;position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;
  font:800 15px/1 Outfit,Arial,sans-serif;font-style:normal;color:#fff;z-index:4;pointer-events:none;box-shadow:0 0 0 1.5px rgba(0,0,0,.7)}
body.mobile #qHeal .qbadge{background:#e0281c}body.mobile #qMana .qbadge{background:#2a62e8}
body.mobile .qpop b{position:absolute!important;left:auto!important;right:-3px!important;bottom:-4px!important;font:600 10px/14px Outfit,sans-serif!important;min-width:14px;height:14px;padding:0 3px;border-radius:7px;background:rgba(0,0,0,.75);text-align:center;z-index:4}
@keyframes qpGlow{0%,100%{filter:drop-shadow(0 0 2px rgba(0,0,0,.6))}50%{filter:drop-shadow(0 0 7px currentColor)}}
body.mobile #qHeal{color:#ff4030}body.mobile #qMana{color:#4a80ff}
/* measuring the HUD fit: the action tag and the quick drinks count as shown (invisible) */
body.mobile.hudmeasure .qpop{display:flex!important;opacity:0!important}
body.mobile.hudmeasure #tAct{display:flex!important;opacity:0!important;width:calc(110px * var(--bs,1));height:calc(40px * var(--bs,1))}
/* action tag: title-C colours (near-black, ember rim and glow, orange text) */
body.mobile #tAct.show{background:none!important;clip-path:none!important;border-radius:0!important;padding:0 calc(14px * var(--bs,1)) 0 calc(20px * var(--bs,1));color:#ff9a4a!important;
  filter:drop-shadow(0 0 5px rgba(255,90,20,.55))!important;text-shadow:0 0 6px rgba(255,90,20,.5)}
body.mobile #tAct .tagbg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}
body.mobile #tAct{isolation:isolate}
body.mobile #tAct.on{filter:brightness(1.25) drop-shadow(0 0 7px rgba(255,90,20,.8))!important}
body.mobile #tAct.need{background:none!important;color:#d07a6a!important}
/* ---------- r15: Refuge ---------- */
#chanBar{position:fixed;left:50%;top:62%;transform:translateX(-50%) scale(var(--hs,1));transform-origin:50% 0;width:220px;text-align:center;opacity:0;transition:opacity .15s;pointer-events:none;z-index:6;font-family:Outfit,system-ui,sans-serif}
#chanBar.on{opacity:1}
#chanBar .chl{font-size:13px;color:#d8c8ff;letter-spacing:.06em;text-shadow:0 1px 3px #000;margin-bottom:4px}
#chanBar .cht{height:8px;border-radius:5px;background:rgba(14,8,28,.75);border:1px solid rgba(180,138,255,.55);overflow:hidden;box-shadow:0 0 12px rgba(150,100,255,.35)}
#chanFill{height:100%;width:0;background:linear-gradient(90deg,#6a3aff,#b48aff,#e8dcff);box-shadow:0 0 8px #b48aff}
#veilfade{position:fixed;inset:0;pointer-events:none;z-index:7;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(230,215,255,.85),rgba(70,30,140,.95) 70%)}
#veilfade.go{animation:veilfade .9s ease-out}
@keyframes veilfade{0%{opacity:1}100%{opacity:0}}
.qt-side{margin-top:6px;padding-top:5px;border-top:1px solid rgba(180,150,255,.18)}
.qt-st{font-size:10.5px;color:#b9a2ff;letter-spacing:.12em;text-transform:uppercase}
#dlgQuest .dq-sep{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
#dlgQuest .dq-side .dq-tag{color:#b9a2ff}
#dialog.vendor #dlgName{color:#ffd27a}
#stash{width:620px;font-family:Outfit,system-ui,sans-serif}
#stash .sub{margin:8px 0 5px;font-size:13px;color:#cbb}
#stash .dim{color:#8a8590;font-size:12px;font-weight:400}
.stgrid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.stgrid .slot{width:auto!important;height:auto!important;aspect-ratio:1;cursor:pointer}
#stGrid{padding:6px;border-radius:8px;background:rgba(74,216,192,.05);border:1px solid rgba(74,216,192,.18)}
#stInv .slot.hot{border-color:#8a3a18}
#stash .sthint{margin:8px 0 6px;font-size:12px;color:#8a8590}
#stash .dlgbtns{justify-content:flex-end}
body.portrait .stgrid{grid-template-columns:repeat(8,minmax(0,1fr))}
.veilico svg{width:100%;height:100%;display:block}
#tFan .fico.veilico{width:22px;height:22px;display:block;margin:0 auto}
.pico.stico{display:inline-block;width:20px;height:20px;vertical-align:-4px;margin-right:6px}
/* r15: 9 menu entries, so the upright fan wraps into two columns (growing leftwards) instead of running under the hotbar */
body.portrait #tFan{flex-wrap:wrap-reverse;height:calc((46px * var(--bs,1) + 6px) * 5);align-content:flex-start;width:max-content}
/* stash: compact slots on desktop so both grids, the hint and the button fit */
body:not(.mobile) .stgrid{grid-template-columns:repeat(10,44px);justify-content:center}
body:not(.mobile) #stash{width:auto}
#stash .stfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
#stash .stfoot .sthint{margin:0}
body.mobile:not(.portrait) #stash{width:calc((100vw - 24px) / var(--ps,1))!important}
body.mobile:not(.portrait) #stash .stcols{display:flex;gap:12px}
body.mobile:not(.portrait) #stash .stc{flex:1;min-width:0}
#stInv.stgrid{grid-template-columns:repeat(8,minmax(0,1fr))}
body:not(.mobile) #stInv.stgrid{grid-template-columns:repeat(8,44px)}

/* r16: the action tag is fully gone whenever nothing is targeted (#touch button's display:flex used to win over #tAct{display:none}) */
body.mobile:not(.hudmeasure) #tAct:not(.show){display:none!important;opacity:0!important;pointer-events:none!important}
/* r16: pause menu close (resume) button, top-right like the other panels */
#pause .ptitle{position:relative}
#pause .ptitle .closeX{position:absolute;right:0;top:50%;transform:translateY(-50%)}
/* ---------- r17 ---------- */
#tooltip .mtip.mtop{margin:0 0 10px;flex-wrap:wrap;justify-content:flex-start;position:sticky;top:-8px;z-index:2;background:inherit;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08)}
#tooltip .mtip.mtop button{flex:1 1 auto;min-width:64px;padding:9px 10px;font:600 14px Outfit,system-ui,sans-serif;border-radius:8px}
#tooltip .mtip.mtop button.mx{flex:0 0 auto;min-width:40px;margin-left:auto}
#tooltip .mtip.mtop button.danger{border-color:#ff5a3a;color:#ffb0a0}
#tooltip .mtip.mtop button:disabled{opacity:.35}
/* yield feed on phones: centred just below the crosshair */
body.mobile #feed{top:calc(50vh / var(--hs,1) + 26px);bottom:auto;left:0;right:0;align-items:center}
body.mobile #feed .frow:nth-last-child(n+4){display:none}
.sgrp label.mobonly,.mobonly{display:none!important}body.mobile .sgrp label.mobonly,body.mobile .mobonly{display:flex!important}body.mobile .sgrp label.deskonly,body.mobile .deskonly{display:none!important}
.settings select{background:#18181b;color:#ece6de;border:1px solid #4a4a52;border-radius:6px;padding:4px 8px;font:14px Outfit,system-ui,sans-serif}
#dmgArr{position:fixed;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:4}
.dmgarr{position:absolute;left:-60px;top:-22px;width:120px;height:44px;transform-origin:60px 22px;filter:drop-shadow(0 0 6px rgba(255,30,10,.8))}
.dmgarr svg{width:100%;height:100%;display:block}
body.mobile #tLook small{font-size:calc(9px * var(--bs,1))}
#tLook{display:none}body.mobile #tLook{display:flex}
body.mobile.uiopen #tLook,body.placing #tLook{display:none!important}
body.fromtitle #pause{z-index:60!important}body.fromtitle #uiBackdrop{z-index:59!important;display:block!important}
body.fromtitle #pause .ptabs,body.fromtitle #ps-game,body.fromtitle #ps-help{display:none!important}
body.fromtitle #ps-settings{display:block!important}
.skcico{float:left;width:44px;height:44px;margin:0 10px 4px 0;border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.skgroup.locked .skcico{filter:grayscale(1) brightness(.6)}
#tFan .fico.sk-veilstep{width:24px;height:24px;border-radius:6px;background-size:cover;display:block;margin:0 auto;position:static;inset:auto}
body.fanopen #tLook{visibility:hidden}
/* r18: phone item details live inside the satchel panel, under the action row */
#invAct .iaName.mhide{display:none}
#invAct .iaDet{margin-top:8px;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);font:13px Arial,sans-serif;text-align:center;line-height:1.4;max-height:calc(30vh / var(--ps,1));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
body.portrait #invAct .iaDet{max-height:calc(24vh / var(--ps,1))}
body.mobile:not(.portrait) #invAct .iaDet{max-height:calc(27vh / var(--ps,1))}
/* r18: character name entry (medieval parchment-and-iron) */
#nameEntry{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-start;justify-content:center;padding-top:max(10vh,env(safe-area-inset-top));background:radial-gradient(ellipse at center,rgba(20,12,6,.72),rgba(0,0,0,.92))}
#nameEntry.hidden{display:none}
#nameEntry .nbox{width:min(440px,92vw);box-sizing:border-box;padding:22px 24px 20px;text-align:center;border-radius:6px;
  background:linear-gradient(#2a2016,#17110b);border:2px solid #7a5a2e;box-shadow:0 0 0 1px #000,inset 0 0 30px rgba(0,0,0,.6),0 10px 40px rgba(0,0,0,.8)}
#nameEntry .norn{color:#c2913e;letter-spacing:.6em;font-size:12px;margin-bottom:6px}
#nameHead{font:600 26px Georgia,'Times New Roman',serif;color:#f0d8a8;letter-spacing:.04em;text-shadow:0 2px 0 #000}
#nameSub{font:italic 14px Georgia,serif;color:#b8a080;margin:6px 0 16px}
#nameEntry .nrow{display:flex;gap:8px;align-items:stretch}
#nameIn{flex:1;min-width:0;font:20px Georgia,serif;color:#f6ead2;background:#0f0b07;border:1px solid #7a5a2e;border-radius:4px;padding:10px 12px;text-align:center;outline:none;user-select:text;-webkit-user-select:text}
#nameIn:focus{border-color:#e0a050;box-shadow:0 0 0 2px rgba(224,160,80,.25)}
#nameDice{font-size:22px;width:52px;background:linear-gradient(#3a2c1c,#20170e);border:1px solid #7a5a2e;border-radius:4px;color:#fff;cursor:pointer}
#nameEntry .nbtns{display:flex;gap:10px;justify-content:center;margin-top:16px}
#nameEntry .nbtns button{font:600 16px Georgia,serif;padding:10px 22px;border-radius:4px;cursor:pointer;color:#f0e2c8;background:linear-gradient(#3a2c1c,#20170e);border:1px solid #7a5a2e}
#nameGo{border-color:#e07a2a!important;background:linear-gradient(#6a3a14,#3a1e08)!important}
#nameGo:disabled{opacity:.4}
body.portrait #nameEntry{padding-top:6vh}
body.mobile:not(.portrait) #nameEntry{padding-top:12px}
body.mobile:not(.portrait) #nameEntry .nbox{padding:12px 18px}
body.mobile:not(.portrait) #nameSub{margin:2px 0 8px}
body.mobile:not(.portrait) #nameEntry .nbtns{margin-top:8px}
.charName{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08)}
.charName span{font:600 20px Georgia,serif;color:#f0d8a8}
.charName small{color:#a8a29c;font-size:12px}
.charName button{margin-left:auto;font-size:12px!important;padding:3px 10px!important}

/* r20: small '(E) Pick' hint beside the crosshair on PC when it is on a berry bush (no action tag for gathering) */
#pickHint{position:absolute;left:calc(50% + 16px);top:50%;transform:translateY(-50%);font:600 12px Arial;color:#e8f4d8;text-shadow:0 1px 3px #000;opacity:0;pointer-events:none;transition:opacity .12s}#pickHint.on{opacity:.85}body.mobile #pickHint{display:none}

/* r21: PC skill bar = a centred row just above the hotbar (moved into #center by JS; body.skrow). It inherits the HUD zoom from
   #bottom, so it scales with UI Scale; the stuff that used to sit at the band top (status line, log, feed) moves up to clear it. */
body.skrow #center #skillcol{position:static;flex-direction:row;justify-content:center;gap:5px;zoom:1;margin-bottom:2px;right:auto;bottom:auto}
body.skrow #center #skillcol.empty{display:none}
body.skrow #center #skillcol .skslot{width:42px;height:42px}
body.skrow #status{bottom:200px}
body.skrow #log,body.skrow #feed{bottom:200px}
/* r22: timed crafting / smelting */
.cqueue{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:6px 8px;margin:4px 0 8px}
.cqueue .cqh{font-size:12px;color:#cbb;margin-bottom:4px;letter-spacing:.04em}
.cqi{display:flex;align-items:center;gap:8px;margin:3px 0;font-size:13px}
.cqi .cqn{flex:0 0 38%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cqbar,.cbbar{flex:1;height:8px;background:rgba(0,0,0,.45);border-radius:4px;overflow:hidden;display:block}
.cqbar i,.cbbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#d08a30,#ffd070);transition:width .1s linear}
.cqi small{color:#aaa;min-width:44px;text-align:right}
.cqx{min-width:30px;min-height:30px;padding:0 6px;background:#4a2020;border:1px solid #a44;color:#fcc;border-radius:6px;cursor:pointer}
.cqout{display:flex;align-items:center;gap:10px;margin-top:6px}
.cqout .slot{width:auto;min-width:120px;height:auto;min-height:40px;padding:4px 8px;font-size:12px;display:flex;align-items:center;justify-content:center;text-align:center}
.cqout .slot.empty{color:#777}
.rec button .ctime{display:block;font-size:10px;opacity:.7}
.rec button.busy{position:relative}
.rec button .cbbar{position:absolute;left:4px;right:4px;bottom:3px;height:4px}
/* r22: inventory sort */
.sub.invhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
#btnSortInv{font:inherit;font-size:12px;padding:3px 10px;min-height:26px;border-radius:6px;background:#2a2620;border:1px solid #6a5a40;color:#f0dcb0;cursor:pointer}
#btnSortInv:hover{background:#3a3428}
body.mobile #btnSortInv{min-height:34px;padding:4px 12px}
/* r22: PC round potion buttons (phone style) next to the orbs; the small Heal (H) / Mana (N) tags are gone */
.pcpot{display:none;position:fixed;z-index:7;border-radius:50%;overflow:hidden;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;box-sizing:border-box;user-select:none}
body:not(.mobile) .pcpot.show{display:flex}
body.uiopen .pcpot,body.intitle .pcpot,body.mobile .pcpot{display:none!important}
#pcHeal{background:radial-gradient(circle at 50% 40%,rgba(120,20,14,.85),rgba(40,6,4,.88));border:2px solid #ff6a50;box-shadow:0 0 10px rgba(255,40,20,.45)}
#pcMana{background:radial-gradient(circle at 50% 40%,rgba(24,50,140,.85),rgba(6,12,44,.88));border:2px solid #6aa0ff;box-shadow:0 0 10px rgba(50,120,255,.45)}
.pcpot svg{width:calc(28px * var(--pk,1));height:calc(28px * var(--pk,1));margin-top:calc(4px * var(--pk,1));position:relative;z-index:1}
.pcpot .pk{position:absolute;left:0;right:0;top:calc(2px * var(--pk,1));text-align:center;font:700 calc(11px * var(--pk,1))/1 Outfit,sans-serif;font-style:normal;color:#fff;opacity:.9;z-index:3;text-shadow:0 0 3px #000}
.pcpot b{position:absolute;left:0;right:0;bottom:calc(3px * var(--pk,1));text-align:center;font:600 calc(11px * var(--pk,1)) Outfit,sans-serif;color:#fff;z-index:3;text-shadow:0 0 3px #000}
.pcpot .cdov{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(0,0,0,.6);z-index:2;pointer-events:none}
.pcpot.empty{opacity:.45}
.pcpot:hover{filter:brightness(1.2)}
#pcHeal.low{animation:potLow 1s ease-in-out infinite}
#pcMana.low{animation:manaLow 1.1s ease-in-out infinite}
/* r23: PC quick drinks = the phone pop-ups (same look, pop-in + glow, placed above/outside each orb by updateQuick), plus the hotkey letter */
body.pcq .pcpot{display:none!important}
body.pcq .qpop{transform:none;right:auto!important;bottom:auto!important;border-radius:50%;overflow:visible!important;padding:0;animation:qpIn .18s ease-out,qpGlow 1.2s ease-in-out .2s infinite}
body.pcq .qpop .qi,body.pcq .qpop .ql,body.pcq .qpop>.cdov{display:none!important}
body.pcq .qpop .qin{display:block;position:absolute;inset:0;border-radius:50%;overflow:hidden}
body.pcq .qpop .qico{position:absolute;inset:14%;display:block}body.pcq .qpop .qico svg{width:100%;height:100%;display:block}
body.pcq .qpop .qin .cdov{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(0,0,0,.55)}
body.pcq #qHeal{background:radial-gradient(circle at 50% 40%,rgba(90,14,10,.88),rgba(30,4,3,.9));border:2px solid #ff5a40;box-shadow:none;color:#ff4030}
body.pcq #qMana{background:radial-gradient(circle at 50% 40%,rgba(14,30,90,.88),rgba(4,8,30,.9));border:2px solid #5a8cff;box-shadow:none;color:#4a80ff}
body.pcq .qpop .qbadge{display:flex;align-items:center;justify-content:center;position:absolute;top:calc(-5px * var(--qs,1));right:calc(-5px * var(--qs,1));width:calc(18px * var(--qs,1));height:calc(18px * var(--qs,1));border-radius:50%;
  font:800 calc(15px * var(--qs,1))/1 Outfit,Arial,sans-serif;font-style:normal;color:#fff;z-index:4;pointer-events:none;box-shadow:0 0 0 1.5px rgba(0,0,0,.7)}
body.pcq #qHeal .qbadge{background:#e0281c}body.pcq #qMana .qbadge{background:#2a62e8}
body.pcq .qpop b{position:absolute!important;left:auto!important;right:calc(-3px * var(--qs,1))!important;bottom:calc(-4px * var(--qs,1))!important;font:600 calc(10px * var(--qs,1))/calc(14px * var(--qs,1)) Outfit,sans-serif!important;min-width:calc(14px * var(--qs,1));height:calc(14px * var(--qs,1));padding:0 calc(3px * var(--qs,1));border-radius:calc(7px * var(--qs,1));background:rgba(0,0,0,.75);text-align:center;z-index:4;color:#fff}
body.pcq .qpop::before{content:attr(data-k);position:absolute;left:calc(-4px * var(--qs,1));top:calc(-5px * var(--qs,1));width:calc(17px * var(--qs,1));height:calc(17px * var(--qs,1));border-radius:calc(4px * var(--qs,1));
  background:rgba(10,8,6,.85);box-shadow:0 0 0 1px rgba(255,255,255,.35);font:700 calc(11px * var(--qs,1))/calc(17px * var(--qs,1)) Outfit,sans-serif;color:#fff;text-align:center;z-index:4;pointer-events:none}
body.pcq .qpop.show{animation:qpIn .18s ease-out,qpGlow 1.2s ease-in-out .2s infinite}
body.pcq .qpop{transform:none!important;gap:0}
.tunerlink{display:inline-block;margin:4px 0 2px;padding:6px 12px;border:1px solid #5a4a3a;border-radius:5px;color:#ffb46a;text-decoration:none;font:600 13px Outfit,system-ui,sans-serif;background:rgba(40,28,20,.6)}.tunerlink:hover{background:rgba(70,44,26,.8)}
/* r23 stash panel (.st23 from style_v23_icons.css) inside the game's fixed/zoomed panel system */
#stash.st23{position:fixed;padding:12px 16px!important}
body:not(.mobile) #stash.st23{width:max-content}
#stash.st23 .stcols{display:block}
#stash.st23 .stgrid .slot{border-radius:6px}
#stash.st23 .ft{margin-top:9px}
#stash.st23 .x{margin-left:10px}
#stash.st23 .hd .closeX{position:static}
body.portrait #stash.st23 .tab{padding:6px 8px 5px;font-size:12px}
body.portrait #stash.st23 .hd .chest{width:44px;height:44px}
body.portrait #stash.st23 .hd h1{font-size:18px;letter-spacing:2px}
body.portrait #stash.st23 .ft .hint{display:none}
body.mobile:not(.portrait) #stash.st23 .stcols{display:flex}
body.mobile:not(.portrait) #stash.st23 .lab{margin-top:0}
body.mobile:not(.portrait) #stash.st23 .hd .chest{width:40px;height:40px}
body.mobile:not(.portrait) #stash.st23 .hd .sub{display:none}
body.mobile:not(.portrait) #stash.st23 .tabs{margin-top:6px}
body:not(.mobile) #stash.st23{max-width:calc(96vw / var(--ps,1))}
body:not(.mobile) #stash.st23 .stcols{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:flex-start}
body:not(.mobile) #stash.st23 .stc:last-child .lab{margin-top:4px}
body.mobile:not(.portrait) #stash.st23 #stInv.stgrid{grid-template-columns:repeat(10,minmax(0,1fr))}
body.mobile:not(.portrait) #stash.st23 .stc:last-child{padding-top:2px}

/* r24: zone transition fade */
#zfade{position:fixed;inset:0;background:#07060a;pointer-events:none;z-index:8;display:none}#zfade.on{display:block;animation:zfadeIn .2s ease both}@keyframes zfadeIn{from{opacity:0}to{opacity:1}}
/* v27: while naming, hide the title buttons behind the name card (on phones they showed through it) */
body.naming #title .tbtns{visibility:hidden}

/* v28: Android Chrome compositor flicker (HUD backgrounds blinking black/transparent over the WebGL canvas, orbs going black).
   On phones / touch screens the HUD keeps NO filters, backdrop filters, blend modes or will-change hints (each one gives the
   element its own GPU surface + a rounded-corner mask over the constantly redrawn canvas, which is what flickers), and the
   orbs drop the blurred liquid (filter:blur inside an overflow:hidden circle) and the animated inset glows. */
body.mobile #hud,body.mobile #hud *,body.mobile #hud *::before,body.mobile #hud *::after,
body.mobile #touch,body.mobile #touch *,body.mobile #touch *::before,body.mobile #touch *::after,
body.mobile .pcpot,body.mobile .pcpot *{filter:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;mix-blend-mode:normal!important;will-change:auto!important}
@media (pointer:coarse){#hud,#hud *,#hud *::before,#hud *::after,#touch,#touch *,#touch *::before,#touch *::after{filter:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;mix-blend-mode:normal!important;will-change:auto!important}}
body.mobile .orbfill{opacity:.3}
body.mobile #lifeOrb{box-shadow:0 0 0 2px #000,0 0 10px rgba(255,45,20,.45)!important}
body.mobile #manaOrb{box-shadow:0 0 0 2px #000,0 0 10px rgba(40,120,255,.45)!important}
body.mobile .orb::before{box-shadow:inset 0 0 0 3px var(--oc)!important}
/* v29: phone defaults: the orbs draw their liquid as a hard-stop gradient on the orb itself (no clipped child layer, no
   overflow:hidden circle mask), small fixed glows; the HUD never paints before gameplay (body starts .intitle) */
body.mobile .orb{overflow:visible!important;background:linear-gradient(to top,var(--lq2) 0,var(--lq2) calc(var(--f,1) * 100%),#0b0b0e calc(var(--f,1) * 100%),#0b0b0e 100%)!important}
body.mobile .orbfill{display:none!important}
body.mobile .orb::before,body.mobile .orb::after{display:none!important}
body.mobile #lifeOrb{box-shadow:0 0 0 3px #ff3a22!important}body.mobile #manaOrb{box-shadow:0 0 0 3px #3a8cff!important}
/* diagnostics (Settings > Phone diagnostics) */
#diagGrp .dnote{font-size:12px;opacity:.75;margin:2px 0 6px}#dgInfo{word-break:break-word;font-family:monospace;font-size:11px}
body:not(.mobile) #diagGrp{display:none}
body.dg-solid #hud *:not(.orb),body.dg-solid #touch *,body.dg-solid #hud,body.dg-solid #touch{box-shadow:none!important;text-shadow:none!important;border-radius:0!important;overflow:visible!important;background-image:none!important}
body.dg-solid .orb{box-shadow:none!important;border-radius:0!important}
body.dg-solid #qtrack,body.dg-solid #mapwrap,body.dg-solid #touch button,body.dg-solid #center,body.dg-solid .slot{background-color:#16141a!important}
body.dg-layer #hud,body.dg-layer #touch{will-change:transform!important;transform:translateZ(0)!important}

/* v30: phone orbs: SVG liquid (body.svgorb, set on mobile): flat dark disc + solid segment at the fill level, coloured ring */
body.svgorb .orb{background:#0b0b0e!important;background-image:none!important}
body.svgorb .orb .osvg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
body.svgorb #lifeOrb .oliq{fill:#c4140a}body.svgorb #manaOrb .oliq{fill:#1650d8}
body.svgorb #lifeOrb .osurf{stroke:#ff6a40;stroke-width:2.5;fill:none}body.svgorb #manaOrb .osurf{stroke:#6ab0ff;stroke-width:2.5;fill:none}
/* v30: phones (flat colours, no gradients): title overlay keeps some of the vignette's darkening; buttons are solid dark tiles */
body.mobile #title{background-color:rgba(0,0,0,.42)!important;background-image:none!important}
body.mobile #title button,body.mobile .panel button{background-color:rgba(24,22,26,.94)!important}
body.mobile #title button:disabled{background-color:rgba(24,22,26,.7)!important}

/* v34 */
.reqlv{color:#ff5a4a;font-weight:700;font-size:.85em;margin-left:4px}.reqlvl{color:#ff7a6a;font-size:.8em}
#qArr{position:fixed;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;pointer-events:none;z-index:4;display:none;transform-origin:20px 20px;filter:drop-shadow(0 0 4px rgba(0,0,0,.9))}#qArr svg{width:100%;height:100%;display:block}

/* v35: hunger reads as its own (green) bar with a drumstick icon; at 30% and below it turns red and pulses */
.mb.hb .mbt>div{background:linear-gradient(90deg,#3f8a3a,#9ad860)!important}
.mb.hb.low .mbt>div{background:linear-gradient(90deg,#b0281c,#ff7a3a)!important}
.mb.hb.low .mbi{animation:hungPulse .9s ease-in-out infinite}
.mb.hb.low span{color:#ff9a70!important}
@keyframes hungPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
.mb .mbi svg{width:13px;height:13px;vertical-align:middle}
button.confirm{background:#7a2a1a!important;border-color:#ff7a4a!important;color:#fff!important}

/* v36: Workbench: recipe list on the left (wide), category tabs as a slim column on the right */
#craft.benchL{display:grid;grid-template-columns:minmax(0,1fr) 96px;grid-template-areas:"t t" "m tabs" "l tabs";column-gap:10px;width:min(680px,96vw)}
#craft.benchL>.ptitle{grid-area:t}#craft.benchL>#craftMats{grid-area:m}#craft.benchL>#craftList{grid-area:l;max-height:68vh}
#craft.benchL>#craftTabs{grid-area:tabs;grid-template-columns:1fr!important;align-content:start;gap:4px!important;margin:0!important;max-height:74vh;overflow-y:auto}
#craft.benchL #craftTabs button{flex-direction:row!important;justify-content:flex-start;gap:6px!important;min-height:36px!important;padding:5px 6px!important}
#craft.benchL #craftTabs button .ti{font-size:16px}#craft.benchL #craftTabs button .tl{font-size:11px;text-align:left;line-height:1.1}
#craft.benchL #craftTabs button em{right:3px;top:1px}
body.mobile #craft.benchL{grid-template-columns:minmax(0,1fr) 62px;column-gap:6px}
body.mobile #craft.benchL #craftTabs button{flex-direction:column!important;align-items:center;justify-content:center;gap:1px!important;padding:4px 2px!important;min-height:44px!important}
body.mobile #craft.benchL #craftTabs button .tl{font-size:9px;text-align:center}
/* v36: the hunger bar's empty part was the old brown gradient (.mb.hb>div matched the track); now black like stamina */
.mb.hb>.mbt{background:rgba(0,0,0,.6)!important}
/* r40: phones get the PC liquid orbs back (the v28/v29 flicker came from the transparent canvas, fixed in v38).
   Gradients + inset shadows only; no filter / backdrop-filter on mobile. */
body.mobile .orb{overflow:hidden!important;background:radial-gradient(circle at 50% 50%,#000 0 58%,#050506 72%,#0d0d10 100%)!important}
body.mobile .orbfill{display:block!important;opacity:1!important;filter:none!important;background:linear-gradient(to bottom,var(--lq2) 0%,var(--lq3) 100%)!important}
body.mobile .orb::before{display:block!important;box-shadow:inset 0 0 0 3px var(--oc),inset 0 0 10px 3px var(--og)!important}
body.mobile .orb::after{display:block!important;content:'';position:absolute;inset:0;border-radius:50%;z-index:2;pointer-events:none;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.22),rgba(255,255,255,0) 35%)!important}
body.mobile #lifeOrb{box-shadow:0 0 0 2px #000,0 0 10px rgba(255,45,20,.45)!important}
body.mobile #manaOrb{box-shadow:0 0 0 2px #000,0 0 10px rgba(40,120,255,.45)!important}

/* v45 station slots + bench tiles + picker */
.stSlots{margin:4px 0 10px}
.stGrid{display:grid;gap:10px;margin-top:8px}
.stGrid6{grid-template-columns:repeat(3,1fr)}
.stGrid3{grid-template-columns:repeat(3,1fr)}
@media(max-width:520px){.stGrid6{grid-template-columns:repeat(2,1fr)}.stGrid3{grid-template-columns:repeat(3,1fr)}}
.stSlot{position:relative;min-height:96px;border-radius:12px;background:var(--ui-blk);border:1px solid var(--ui-line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 8px;cursor:pointer;user-select:none;overflow:hidden}
.stSlot:hover{border-color:var(--acc);background:var(--ui-blk2)}
.stSlot.empty .stPlus{font-size:34px;line-height:1;color:var(--acc2);font-weight:300}
.stSlot.empty small{color:var(--dim);font-size:11px}
.stSlot.busy{border-color:rgba(255,208,112,.45)}
.stSlot.ready{border-color:#7dff8a;box-shadow:0 0 14px rgba(125,255,138,.25);animation:slotReady 1.2s ease-in-out infinite}
@keyframes slotReady{0%,100%{box-shadow:0 0 10px rgba(125,255,138,.2)}50%{box-shadow:0 0 18px rgba(125,255,138,.45)}}
.stIco{width:42px;height:42px;display:flex;align-items:center;justify-content:center}
.stIco .i23,.stIco svg,.stIco img{width:40px;height:40px}
.stMeta{text-align:center;font-size:12px;line-height:1.25}
.stMeta b{display:block;color:var(--txt);font-weight:600;font-size:13px}
.stMeta span{color:var(--dim);font-size:11px}
.stTake{color:#7dff8a;font-size:11px;font-weight:600;margin-top:2px}
.stCancel{color:#f0a080;font-size:10px;margin-top:2px}
.glowRing{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.glowRing rect{stroke:#ffd070;filter:drop-shadow(0 0 3px rgba(255,208,112,.75))}
.stSlot.ready .glowRing rect{stroke:#7dff8a}
.cpick{position:absolute;inset:0;background:rgba(0,0,0,.72);z-index:20;display:flex;align-items:center;justify-content:center;border-radius:12px;padding:12px}
.cpickBox{background:var(--ui-bg);border:1px solid var(--ui-line);border-radius:12px;width:min(420px,96%);max-height:78%;overflow:auto;padding:12px 14px;box-shadow:0 20px 50px rgba(0,0,0,.7)}
.cpickH{display:flex;align-items:center;justify-content:space-between;font-weight:600;letter-spacing:.04em;margin-bottom:10px;color:var(--txt)}
.cpickX{background:var(--ui-blk)!important;border:1px solid var(--ui-line)!important;border-radius:6px!important;width:30px;height:30px;padding:0!important;cursor:pointer;color:var(--dim)!important}
.cpickRow{display:flex;align-items:center;gap:10px;padding:8px;border-radius:9px;background:var(--ui-blk);margin:6px 0;border:1px solid transparent}
.cpickRow:hover{border-color:var(--ui-line)}
.cpickRow.dim{opacity:.55}
.cpickInfo{flex:1;min-width:0}
.cpickInfo b{display:block;font-size:14px}
.cpickInfo small{color:var(--dim);font-size:11px}
.cpickAmt{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.cpickAmt input{width:42px;text-align:center;background:#1a1816;border:1px solid var(--ui-line);color:#fff;border-radius:6px;padding:4px;font:inherit}
.cpickAmt button{min-width:30px;min-height:30px;padding:4px 8px!important}
.cpickGo{background:rgba(255,90,31,.18)!important;border-color:var(--acc)!important}
#craftDet{position:absolute;inset:0;background:rgba(0,0,0,.72);z-index:21;display:none;align-items:center;justify-content:center;border-radius:12px;padding:12px}
#craftDet[style*="block"]{display:flex!important}
.cdBox{background:var(--ui-bg);border:1px solid var(--ui-line);border-radius:12px;width:min(440px,96%);max-height:82%;overflow:auto;padding:12px 14px}
.cdH{display:flex;justify-content:space-between;align-items:center;font-weight:600;margin-bottom:10px}
.cdBody{display:flex;gap:12px;margin-bottom:12px}
.cdInfo{flex:1;font-size:13px;line-height:1.45}
.cdCost{margin:6px 0;font-size:12px}
.cdDesc{color:var(--dim);font-size:12px;margin:6px 0}
.cdTip{font-size:12px;margin-top:8px;max-height:40vh;overflow:auto}
#craft{position:relative}
#craft.benchV45{width:min(720px,96vw);grid-template-columns:minmax(0,1fr) minmax(140px,180px);grid-template-areas:"t t" "m m" "l tabs"}
#craft.benchV45>#craftTabs{grid-template-columns:1fr 1fr!important;gap:6px!important;max-height:70vh;overflow-y:auto;align-content:start}
#craft.benchV45 #craftTabs button{flex-direction:column!important;align-items:center;justify-content:center;gap:3px!important;min-height:64px!important;padding:8px 4px!important;border-radius:10px}
#craft.benchV45 #craftTabs button .ti{font-size:22px}
#craft.benchV45 #craftTabs button .tl{font-size:11px;text-align:center}
body.mobile #craft.benchV45{grid-template-columns:minmax(0,1fr) 88px;width:min(96vw,560px)}
body.mobile #craft.benchV45 #craftTabs button{min-height:52px!important;padding:5px 2px!important}
body.mobile #craft.benchV45 #craftTabs button .ti{font-size:18px}
body.mobile #craft.benchV45 #craftTabs button .tl{font-size:9px}
.benchGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.benchTile{position:relative;min-height:110px;border-radius:11px;background:var(--ui-blk);border:1px solid var(--ui-line);padding:10px 8px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;overflow:hidden;user-select:none}
.benchTile:hover{border-color:var(--acc);background:var(--ui-blk2)}
.benchTile.locked{opacity:.55}
.benchTile.busy{border-color:rgba(255,208,112,.5)}
.btIco{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.btIco .i23,.btIco svg,.btIco img{width:42px;height:42px}
.btName{font-size:13px;font-weight:600;color:var(--txt);line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btMeta{font-size:11px;color:var(--dim)}
.btCost{font-size:10px;color:#cfc;line-height:1.25;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btQ{position:absolute;top:6px;right:8px;font-style:normal;background:rgba(255,90,31,.25);border:1px solid var(--acc);color:#fff;border-radius:8px;padding:1px 6px;font-size:11px}
.reqlv{color:#f0a070}
body.portrait .benchGrid{gap:6px}
body.portrait .benchTile{min-height:100px;padding:8px 6px}
body.mobile .stSlot{min-height:88px}

/* v48: rounded corners restored (v46 square override removed). */
.glowRing rect{rx:10;ry:10}
.fireFuel{display:flex;align-items:center;gap:12px;margin:4px 0 12px;color:var(--dim);font-size:12px}
.fuelSlot{min-width:76px;min-height:52px;border:1px solid var(--ui-line);background:var(--ui-blk);color:var(--acc)}
#craftTitle{white-space:normal}
body.mobile #craft.benchV45 #craftList,body.mobile #craft.benchV45 #craftTabs{scrollbar-width:none;-webkit-overflow-scrolling:touch}
body.mobile #craft.benchV45 #craftList::-webkit-scrollbar,body.mobile #craft.benchV45 #craftTabs::-webkit-scrollbar{display:none}


/* v47 station headers, fuel slot, picker chrome */
#craft .ptitle{align-items:flex-start}
#craftTitle{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-transform:none;letter-spacing:0;line-height:1.15;white-space:normal}
#craftTitle .ctName{text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:18px}
#craftTitle .ctHint{text-transform:none!important;letter-spacing:0;font-size:12px;font-weight:500;color:var(--dim);line-height:1.3}
#craftMats:empty{display:none}
.stSec{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:8px 0 4px;font-weight:600}
.fuelRow{display:flex;flex-direction:column;align-items:center;margin-top:10px}
.fuelRow .stSec{align-self:center;margin-bottom:6px}
.fuelRow .fuelSlot{width:min(140px,42%);min-height:96px}
.stSlot.fuelSlot.locked{cursor:default;opacity:.95}
.stSlot.fuelSlot .stMeta span[data-fuel-rem]{display:block;color:var(--acc2);font-size:11px}
.fuelWarn{color:#f0a080!important;text-transform:none!important;letter-spacing:0!important;text-align:center;margin-top:6px}
.cpickBox,.cpickList,.cdBox{scrollbar-width:none;-ms-overflow-style:none}
.cpickBox::-webkit-scrollbar,.cpickList::-webkit-scrollbar,.cdBox::-webkit-scrollbar{display:none;width:0;height:0}
.cpickAmt input[type=number]{-moz-appearance:textfield;appearance:textfield}
.cpickAmt input[type=number]::-webkit-outer-spin-button,
.cpickAmt input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
body.mobile #craftList,body.mobile #craftTabs,.cpickBox{scrollbar-width:none}
body.mobile #craftList::-webkit-scrollbar,body.mobile #craftTabs::-webkit-scrollbar{display:none}

/* v48 fuel drain + take-all */
.fuelBurnFill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(255,150,40,.92),rgba(230,80,10,.85));border-radius:inherit;transition:height .2s linear;pointer-events:none;z-index:0}
.stSlot.fuelSlot .stIco,.stSlot.fuelSlot .stMeta,.stSlot.fuelSlot .stCancel,.stSlot.fuelSlot .stPlus{position:relative;z-index:1}
.stSlot .stMeta b{display:block;font-size:12px;line-height:1.2}
.stSlot .stMeta .stReady{display:block;color:#7dff8a;font-size:11px;margin-top:2px}
.stSlot .stAct{display:block;font-size:10px;color:var(--dim);margin-top:4px}
.stTakeAll{margin:8px 0 4px}
.stGrid1{grid-template-columns:1fr;max-width:160px;margin:0 auto}
.stGrid3{grid-template-columns:repeat(3,1fr)}


/* v49: rising craft progress fill (red→green), reverse of fuel drain */
.craftProgFill{position:absolute;left:0;right:0;bottom:0;height:0;pointer-events:none;z-index:0;border-radius:inherit;transition:height .12s linear,background .12s linear}
.stSlot > *:not(.craftProgFill),.benchTile > *:not(.craftProgFill){position:relative;z-index:1}
.stSlot .glowRing,.benchTile .glowRing{display:none!important}

/* v49 workbench: identical square category buttons + 3-col icon/name tiles */
#craft.benchV45{width:min(720px,96vw)!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"t t" "m m" "l tabs"!important;column-gap:10px}
#craft.benchV45>#craftTabs{
  display:grid!important;grid-template-columns:1fr!important;gap:6px!important;
  align-content:start;justify-items:center;width:70px;padding:0;margin:0!important;
  max-height:68vh;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
#craft.benchV45 #craftTabs button{
  width:64px!important;height:64px!important;min-width:64px!important;min-height:64px!important;
  max-width:64px!important;max-height:64px!important;aspect-ratio:1/1!important;
  box-sizing:border-box!important;padding:4px!important;border-radius:12px!important;
  flex-direction:column!important;align-items:center!important;justify-content:center!important;
  gap:2px!important;overflow:hidden!important}
#craft.benchV45 #craftTabs button .ti{font-size:22px;line-height:1}
#craft.benchV45 #craftTabs button .tl{font-size:9px;text-align:center;line-height:1.05;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#craft.benchV45 #craftTabs button em{right:2px;top:2px;font-size:9px}
.benchGrid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px;margin-top:6px}
.benchTile{min-height:0!important;aspect-ratio:1/1;border-radius:12px!important;padding:8px 6px!important;gap:4px;justify-content:center}
.benchTile .btIco{width:42%;max-width:56px;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.benchTile .btIco .ico,.benchTile .btIco img,.benchTile .btIco svg,.benchTile .btIco .i23{max-width:100%!important;max-height:100%!important}
.benchTile .btName{font-size:11px;line-height:1.15;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.benchTile .btMeta,.benchTile .btCost{display:none!important}
body.mobile #craft.benchV45,body.mobile #craft.benchL.benchV45{
  grid-template-columns:minmax(0,1fr) 56px!important;width:min(96vw,640px)!important;column-gap:6px!important}
body.mobile #craft.benchV45>#craftTabs{width:56px;gap:5px!important;max-height:68vh;overflow-y:auto}
body.mobile #craft.benchV45 #craftTabs button{
  width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;
  max-width:52px!important;max-height:52px!important;border-radius:10px!important;padding:3px!important}
body.mobile #craft.benchV45 #craftTabs button .ti{font-size:18px}
body.mobile #craft.benchV45 #craftTabs button .tl{font-size:8px}
body.mobile .benchGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px}
body.mobile .benchTile{padding:6px 4px!important;border-radius:10px!important}
body.mobile .benchTile .btIco{width:48%;max-width:48px}
body.mobile .benchTile .btName{font-size:10px}
/* landscape phones (~1024x440): 2-col square category rail so nothing is clipped */
@media (orientation:landscape) and (max-height:520px){
  body.mobile #craft.benchV45,body.mobile #craft.benchL.benchV45{
    width:min(96vw,920px)!important;max-height:92vh;grid-template-columns:minmax(0,1fr) 100px!important}
  body.mobile #craft.benchV45>#craftList{max-height:72vh;overflow:auto}
  body.mobile #craft.benchV45>#craftTabs{
    width:100px;grid-template-columns:1fr 1fr!important;gap:4px!important;max-height:72vh;overflow-y:auto;justify-items:center}
  body.mobile #craft.benchV45 #craftTabs button{
    width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
    max-width:44px!important;max-height:44px!important;border-radius:9px!important;padding:2px!important}
  body.mobile #craft.benchV45 #craftTabs button .ti{font-size:16px}
  body.mobile #craft.benchV45 #craftTabs button .tl{font-size:7px}
  body.mobile .benchTile .btName{font-size:9px}
}

/* ===== v50 ===== */
/* 1: workbench 4 columns of rounded-square tiles, bigger icons */
body .benchGrid,body.mobile .benchGrid,body.portrait .benchGrid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
.benchGrid .benchTile{aspect-ratio:1/1;border-radius:14px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 4px!important;min-height:0!important}
.benchGrid .btName{font-size:12px!important;line-height:1.15;text-align:center;margin-top:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
body.mobile.landscape .benchGrid{gap:6px!important}
body.mobile.landscape .benchGrid .btName{font-size:10px!important}
/* 5: bigger main-menu buttons on phones */
body.mobile .tbtns{width:min(360px,80vw)!important;gap:12px!important}
body.mobile #title .tbtns button{font-size:22px!important;padding:16px 12px!important;border-radius:12px!important;min-height:58px}
body.mobile.landscape #title .tbtns{gap:9px!important}body.mobile.landscape #title .tbtns button{padding:11px 12px!important;min-height:46px;font-size:19px!important}
/* 8: name entry in the current UI style */
#nameEntry{align-items:center!important;padding-top:0!important;background:radial-gradient(ellipse at 50% 60%,rgba(90,22,4,.35),rgba(0,0,0,.9) 75%)!important}
#nameEntry .nbox{background:#161618!important;border:1px solid var(--ui-line,rgba(255,255,255,.14))!important;border-radius:16px!important;box-shadow:0 10px 40px rgba(0,0,0,.6)!important;padding:22px 26px!important;width:min(440px,90vw);text-align:center}
#nameEntry .norn{color:#ff8a3a;opacity:.7;letter-spacing:8px;font-size:12px}
#nameHead{font-size:24px!important;color:#f3ede6!important;font-weight:600;margin:6px 0 4px}
#nameSub{font-size:14px!important;color:#b9b2aa!important;margin-bottom:14px}
#nameEntry .nrow{display:flex;gap:8px}
#nameIn{flex:1;font-size:18px!important;padding:10px 12px!important;border-radius:10px!important;background:rgba(0,0,0,.45)!important;border:1px solid var(--ui-line,rgba(255,255,255,.18))!important;color:#fff!important;outline:none}
#nameIn:focus{border-color:rgba(255,106,26,.7)!important}
#nameEntry button{border-radius:10px!important;background:var(--ui-blk2,#202024)!important;border:1px solid var(--ui-line,rgba(255,255,255,.16))!important;color:#eee!important;padding:10px 16px!important;font-size:16px!important}
#nameEntry .nbtns{display:flex;gap:10px;justify-content:center;margin-top:16px}
#nameEntry #nameGo{background:linear-gradient(#ff7a2a,#c2481a)!important;border-color:#ff8a3a!important;color:#fff!important;font-weight:600}
body.mobile.landscape #nameEntry .nbox{padding:14px 20px!important}
/* 11: help box */
#helpBox{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6)}
#helpBox.hidden{display:none}
#helpBox .hbx{background:var(--ui-blk2,rgba(18,18,20,.95));border:1px solid var(--ui-line,rgba(255,255,255,.14));border-radius:16px;padding:16px 20px;width:min(760px,94vw);max-height:90vh;display:flex;flex-direction:column;gap:10px;color:#eee}
#helpBox .hbxT{font-size:20px;font-weight:600;display:flex;align-items:center;gap:10px}
#helpBox .hbxQ{display:inline-flex;width:30px;height:30px;border-radius:50%;background:#c2481a;align-items:center;justify-content:center;font-weight:700}
#helpBox .hbxB{overflow:auto;min-height:0;flex:1}
#helpBox .hbxF{font-size:12px;color:#aaa}
#helpBox #helpOk{align-self:center;padding:10px 28px;border-radius:10px;border:1px solid #ff8a3a;background:linear-gradient(#ff7a2a,#c2481a);color:#fff;font-size:16px;font-weight:600}
body.mobile.landscape #helpBox .hbx{max-height:94vh;padding:10px 14px;gap:6px}
#nameEntry{z-index:90!important}body.naming #titleName{visibility:hidden}
body.mobile #title .tbtns{zoom:calc(0.9 / var(--ts,1));width:340px!important}
.benchGrid .benchTile .btIco{width:72px!important;height:72px!important;max-width:none!important;aspect-ratio:auto}
.benchGrid .benchTile .btIco .i23,.benchGrid .benchTile .btIco svg,.benchGrid .benchTile .btIco img,.benchGrid .benchTile .btIco .ico{width:70px!important;height:70px!important;max-width:none!important;max-height:none!important}
body.mobile.landscape .benchGrid .benchTile{aspect-ratio:4/3}
body.mobile .benchGrid .benchTile .btIco,body.mobile .benchGrid .benchTile .btIco .i23,body.mobile .benchGrid .benchTile .btIco svg,body.mobile .benchGrid .benchTile .btIco img,body.mobile .benchGrid .benchTile .btIco .ico{width:58px!important;height:58px!important}
/* v52: station slots are fixed squares side by side (like inventory buttons), centered with gaps */
.stGrid,.stGrid1,.stGrid2,.stGrid3,.stGrid6{display:flex!important;flex-wrap:wrap;justify-content:center;gap:14px!important;max-width:none!important;margin:8px auto 0!important}
.stGrid .stSlot,.fuelRow .fuelSlot{width:112px!important;height:112px!important;min-height:0!important;min-width:0!important;flex:0 0 auto;box-sizing:border-box;padding:6px 5px!important;gap:2px!important}
.stSlot .stIco{transform:scale(.9)}
.stSlot .stMeta b{font-size:11px!important;line-height:1.15;word-break:break-word;text-align:center}
.stSlot .stMeta .stReady,.stSlot .stAct{font-size:10px!important;line-height:1.1;text-align:center;margin-top:1px!important}
body.mobile .stGrid .stSlot,body.mobile .fuelRow .fuelSlot{width:92px!important;height:92px!important;padding:4px!important}
body.mobile .stSlot .stIco{transform:scale(.75);margin:-6px 0}
body.mobile .stSlot .stMeta b{font-size:10px!important}body.mobile .stSlot .stMeta .stReady,body.mobile .stSlot .stAct{font-size:9px!important}
/* v53: fuel drain fill was forced to position:relative by `.stSlot > *` (collapsed to 0 height); pin it absolute behind content */
.stSlot > .fuelBurnFill{position:absolute!important;left:0;right:0;bottom:0;z-index:0!important;display:block}
/* v53: opaque station panel and slots */
#craft.panel{background:#121214!important;backdrop-filter:none!important}
#craft .stSlot,#craft .fuelSlot{background:#1c1c1f!important}
/* v54: unspent points, top centre */
#ptsNote{left:50%!important;top:10px!important;transform:translateX(-50%);flex-direction:row!important;align-items:flex-start!important;gap:12px!important;pointer-events:auto}
#ptsNote .ptsBox{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;background:none!important;border:0!important;padding:0!important;cursor:pointer;pointer-events:auto}
#ptsNote .ptsPlus{width:46px;height:46px;border-radius:10px;background:#1a1a1d;border:2px solid #ffb040;color:#ffd070;font-size:32px;font-weight:700;line-height:40px;text-align:center;box-shadow:0 0 14px rgba(255,170,60,.55);animation:ptsPulse 1.6s ease-in-out infinite}
#ptsNote .ptsBox.sk .ptsPlus{border-color:#7ab8ff;color:#a8d0ff;box-shadow:0 0 14px rgba(110,170,255,.55)}
#ptsNote .ptsLab{font-size:12px;font-weight:600;color:#f0e8dc;text-shadow:0 1px 3px #000}
#ptsNote .ptsN{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;border-radius:9px;background:#c2481a;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;padding:0 4px}
@keyframes ptsPulse{50%{transform:scale(1.07)}}
/* v54: quest window + no tracker */
#qtrack{display:none!important}
#quests.panel{background:#121214!important}
.qwRow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:6px 0 12px;border-bottom:1px solid rgba(255,255,255,.1)}
.qwIco{position:relative;width:58px!important;height:58px!important;padding:0!important;border-radius:12px!important;font-size:28px!important;display:flex;align-items:center;justify-content:center;background:#1c1c1f!important;border:2px solid #3a3a40!important}
.qwIco.active{border-color:#ffb040!important;box-shadow:0 0 12px rgba(255,170,60,.45)!important}
.qwIco.done{opacity:.85}.qwIco.locked{opacity:.35;cursor:default}
.qwIco.sel{outline:2px solid #fff;outline-offset:2px}
.qwOk{position:absolute;right:-4px;bottom:-4px;font-style:normal;font-size:13px;background:#2e8a3a;color:#fff;border-radius:50%;width:20px;height:20px;line-height:20px;text-align:center}
.qwBody{padding:12px 6px}.qwTitle{font-size:20px;font-weight:700;color:#ffb060}.qwSt{font-size:12px;color:#aaa;margin:2px 0 10px}.qwSt.active{color:#ffd070}.qwSt.done{color:#7dff8a}
body.mobile #tLook.noLook{display:none!important} /* v54: no Look button; this spot is only the Veil button */
/* v54: mobile item details overlay the opposite column, fully opaque, above the new-item dots */
body.mobile #inv .invcols{position:relative}
body.mobile #invAct.ovl{position:absolute!important;bottom:auto!important;margin:0!important;z-index:40!important;background:#141416!important;overflow-y:auto;box-sizing:border-box;box-shadow:0 0 0 1px #3a3a40,0 8px 24px rgba(0,0,0,.7)!important}
body.mobile #invAct.ovl .iaDet{max-height:none!important;background:#1b1b1e!important}
/* v54: clean portrait HUD: one hotbar row, compact weapon/bag, orbs above the bar, minibars between the orbs */
body.portrait #hotbar{display:grid!important;grid-template-columns:repeat(8,34px)!important;gap:2px!important;flex-wrap:nowrap!important}
body.portrait #hotbar .slot{width:34px!important;height:34px!important}
body.portrait #hotbar .slot .cnt,body.portrait #hotbar .slot b{font-size:10px!important}
body.portrait #gearSlot{width:40px!important;height:40px!important;min-width:0!important}
body.portrait #bagBtn{width:46px!important;height:40px!important;min-width:0!important;font-size:9px!important}
body.portrait #bars2{display:flex!important;align-items:center;gap:4px!important;max-width:calc(100vw - 8px)}
#tArr{position:fixed;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;pointer-events:none;z-index:4;display:none;transform-origin:20px 20px;filter:drop-shadow(0 0 4px rgba(0,0,0,.9))}#qArr svg{width:100%;height:100%;display:block}
/* ===== v58: carved-stone skill tree + character sheet ===== */
.panel.stonep{background:var(--stoneimg,#1e1b18);background-color:#1d1a17;border:3px solid #4d4237;border-radius:4px;box-shadow:0 0 0 1px #0a0806,0 0 40px #000,inset 0 0 0 2px #2a241e,inset 0 0 60px rgba(0,0,0,.85);padding:10px 14px 12px}
.panel.stonep::before{display:none}
.stTitle{justify-content:center;position:relative;border-bottom:2px solid #3e352c!important;margin-bottom:8px;padding-bottom:6px}
.stTitle>span:first-child{font-family:Georgia,'Times New Roman',serif;font-size:26px;letter-spacing:.18em;font-weight:bold;background:linear-gradient(#fff0b0,#d8a640 55%,#8a5a18);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 0 rgba(0,0,0,.4);flex:1;text-align:center}
.stTitle .closeX{position:absolute;right:0;top:2px}
#skills{width:810px}#skillTree{display:block}
.stWrap{display:flex;gap:14px;background-image:var(--stone);background-size:256px;margin:-2px;padding:4px;border-radius:3px}
.stLeft{flex:0 0 auto}
.stTabs{display:flex;gap:4px;margin-bottom:6px}
.stTab{flex:1;font-family:Georgia,serif!important;font-size:14px!important;padding:6px 4px!important;background:linear-gradient(#2c2620,#17130f)!important;border:2px solid #4a3e30!important;color:#a89878!important;border-radius:3px 3px 0 0!important;position:relative}
.stTab small{display:inline-block;margin-left:6px;color:#d8b25a;font-size:11px}
.stTab.on{color:#f6e2a8!important;border-color:#c8963a!important;background:linear-gradient(#4a3a26,#221a12)!important;box-shadow:inset 0 -3px 0 var(--tc),0 0 10px rgba(216,166,64,.3)!important}
.stGrid{position:relative;background:rgba(0,0,0,.38);border:2px solid #3a3128;box-shadow:inset 0 0 30px #000;border-radius:2px}
.stArrows{position:absolute;left:0;top:0;pointer-events:none}
.stArrows line{stroke:#7a1810;stroke-width:3}.stArrows line.on{stroke:#e02a18;filter:drop-shadow(0 0 3px #ff3010)}
.stRowLv{position:absolute;left:3px;font:bold 10px Georgia,serif;color:#6e604c}
.stCell{position:absolute;width:58px;height:58px;box-sizing:border-box;border:3px solid #5a4c3a;border-radius:3px;background:#000;cursor:pointer;box-shadow:0 0 0 1px #000,inset 0 0 6px #000,0 3px 6px rgba(0,0,0,.7);
  outline:1px solid #8a7558;outline-offset:-6px}
.stCell img{width:100%;height:100%;display:block;image-rendering:auto}
.stCell.lock img{filter:grayscale(1) brightness(.4)}
.stCell.lrn{border-color:#c8963a;box-shadow:0 0 10px rgba(216,166,64,.45),0 0 0 1px #000}
.stCell.can{border-color:#d8c070}.stCell.can::after{content:'';position:absolute;inset:-6px;border:2px solid rgba(255,220,120,.55);border-radius:5px;animation:stPulse 1.4s ease-in-out infinite;pointer-events:none}
@keyframes stPulse{50%{opacity:.25}}
.stCell.sel{outline:2px solid #fff0b0;outline-offset:2px}
.stPts{position:absolute;right:-24px;bottom:-4px;min-width:16px;padding:1px 3px;text-align:center;font:bold 13px Georgia,serif;color:#f6e2a8;background:#120e0a;border:1px solid #6a5838;border-radius:2px}
.stCell:not(.lrn) .stPts{color:#7a6a50}
.stPas{position:absolute;left:1px;top:1px;font:bold 9px Arial;color:#fff;background:rgba(40,60,110,.85);padding:0 3px;border-radius:2px}
.stTodo{position:absolute;right:1px;top:1px;font:bold 11px Arial;color:#ffd040;background:rgba(120,30,10,.9);padding:0 4px;border-radius:2px}
.stRight{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0}
.stCls{display:flex;justify-content:space-between;align-items:baseline;font-family:Georgia,serif;border-bottom:1px solid #3e352c;padding-bottom:4px}.stCls b{font-size:17px}.stCls span{color:#c8b48a;font-size:13px}
.stPtsBox{display:flex;align-items:center;justify-content:space-between;background:#110d0a;border:2px solid #6a5434;padding:5px 10px;border-radius:3px;font-family:Georgia,serif;color:#c8b48a}
.stPtsBox b{font-size:24px;color:#ffd870;text-shadow:0 0 8px rgba(255,180,60,.5)}
.stDet{background:rgba(0,0,0,.45);border:1px solid #3a3128;padding:8px;border-radius:3px;flex:1;overflow:auto;min-height:0;max-height:330px}
.stDetHead{display:flex;gap:8px}.stDetHead img{width:48px;height:48px;border:2px solid #8a7050;flex:0 0 auto}
.stt-n{font:bold 16px Georgia,serif}.stt-t{font-size:11px;color:#a89878;margin-bottom:3px}.stt-d{font-size:12px;color:#ddd2bc;font-style:italic;margin-bottom:4px}
.stt-r{font-size:12px;color:#c8c0b0}.stt-r.bad{color:#ff5a4a}.stt-h{margin-top:5px;font:bold 12px Georgia,serif;color:#d8b25a}.stt-h.nx{color:#9a9080}
.stt-l{font-size:12px;color:#8fb4ff;line-height:1.35}.stt-l.nx{color:#9a9488}.stt-l.dim{color:#a09070}.todo{color:#ff9a40}
.stAct{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#stLearn{font-family:Georgia,serif!important;border-color:#c8963a!important;padding:6px 16px!important}
.stBind{display:flex;gap:3px;align-items:center;font-size:12px;color:#a89878}.stBind button{padding:3px 8px!important;font:bold 12px Arial!important}.stBind button.on{border-color:#ffd870!important;color:#ffd870!important;box-shadow:0 0 6px rgba(255,200,80,.5)}
.stBar{display:flex;gap:6px;justify-content:center}.stBk{position:relative;width:40px;height:40px;border:2px solid #5a4c3a;background:#0c0a08;border-radius:3px}.stBi{position:absolute;inset:0}.stBk b{position:absolute;left:2px;top:0;font:bold 11px Arial;color:#fff;text-shadow:0 0 3px #000}
.stHint{font-size:11px;color:#8a7c64;text-align:center}
.stEmpty{padding:30px;text-align:center;color:#aaa}
#skTip{position:absolute;display:none;z-index:5;width:260px;background:rgba(10,8,6,.96);border:2px solid #8a7050;padding:8px;border-radius:3px;pointer-events:none;box-shadow:0 0 20px #000}
#skills{position:fixed}
/* character sheet */
#char.stonep{width:560px}
.csWrap{background-image:var(--stone);background-size:256px;padding:4px;margin:-2px;font-family:Georgia,serif}
.csTop{display:flex;gap:6px;margin-bottom:6px}
.csBox{flex:1;background:#100c09;border:2px solid #5a4830;border-radius:3px;padding:3px 8px;text-align:center;position:relative}
.csBox small{display:block;font-size:10px;color:#a08c68;letter-spacing:.06em;text-transform:uppercase}.csBox b{font-size:16px;color:#f0e2c0}
.csName button{position:absolute;right:4px;top:4px;padding:1px 6px!important;font-size:11px!important}
.csGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.csCol{display:flex;flex-direction:column;gap:3px}
.csAttr{display:flex;align-items:center;gap:6px;background:linear-gradient(#2a2118,#140f0b);border:2px solid #7a6038;border-radius:3px;padding:3px 6px;margin-top:5px}
.csAttr .csL{flex:1;color:#e8d4a0;font-size:14px;letter-spacing:.04em}.csAttr b{font-size:17px;color:#fff;min-width:34px;text-align:right}.csAttr b.bon{color:#8fb4ff}
.csPlus{width:24px;height:24px;padding:0!important;font:bold 16px Arial!important;color:#ffd870!important;border:2px solid #c8963a!important;border-radius:50%!important;background:radial-gradient(#5a3a18,#1a1008)!important;line-height:18px}
.csPlus.off{display:inline-block;visibility:hidden}
.csKV{display:flex;justify-content:space-between;gap:6px;background:rgba(0,0,0,.4);border:1px solid #3a3026;padding:2px 7px;font-size:12.5px;color:#c8b896;border-radius:2px}.csKV b{color:#f4ead4;font-family:Arial,sans-serif;font-size:12.5px;text-align:right}
.csKV.lf b{color:#ff7a6a}.csKV.mn b{color:#7aa8ff}.csKV.st b{color:#ffc070}.csKV.fr b{color:#ff9a40}.csKV.cr b{color:#8fd8ff}.csKV.lr b{color:#ffe14a}.csKV.mf b{color:#c58cff}.csKV.gf b{color:#ffc53a}
.csRes{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:3px;margin-top:8px}.csRes .csKV{flex-direction:column;align-items:center;text-align:center;font-size:11px}
.csFoot{display:flex;gap:8px;margin-top:8px;align-items:stretch}.csFoot button{font-family:Georgia,serif!important}
.csPtsB.has b{color:#ffd870;text-shadow:0 0 8px rgba(255,180,60,.6)}.csPtsB.sk b{color:#ffa64d}
#char .chxp{margin:2px 0 0}
/* class choice */
.clsRow{display:flex;gap:8px;margin:12px 0 4px}
.clsCard{flex:1;display:flex!important;flex-direction:column;align-items:center;gap:2px;padding:8px 6px!important;background:linear-gradient(#24201c,#121010)!important;border:2px solid #4a4036!important;border-radius:4px!important;color:#ddd!important;font-family:Georgia,serif!important;cursor:pointer;min-width:0}
.clsCard img{width:44px;height:44px;border:2px solid #6a5838;margin-bottom:3px}.clsCard b{font-size:15px;color:var(--cc)}.clsCard small{font-size:11px;color:#c8b48a}.clsCard i{font-size:10px;color:#9a8c74;font-style:normal}.clsCard em{display:none;font-size:11px;color:#cfc4b0;font-style:italic;margin-top:3px;line-height:1.3}
.clsCard.on{border-color:var(--cc)!important;box-shadow:0 0 14px color-mix(in srgb,var(--cc) 45%,transparent)}.clsCard.on em{display:block}
#nameEntry .nbox{width:min(560px,94vw)}
#classPick{position:fixed;inset:0;z-index:72;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7)}#classPick.hidden{display:none}
#classPick .nbox{width:min(600px,94vw);padding:18px 20px;background:linear-gradient(#1c1a18,#0c0b0a);border:2px solid #6a5434;border-radius:6px;text-align:center;zoom:var(--ps,1)}
.cpHead{font:bold 22px Georgia,serif;color:#e8c878;letter-spacing:.1em}.cpSub{font-size:13px;color:#bbb;margin-top:4px}
#classPick .nbtns button{font-family:Georgia,serif;background:linear-gradient(#323236,#18181a);color:#ece6de;border:1px solid #c2481a;padding:8px 22px;cursor:pointer;font-size:15px;margin-top:10px}
/* skill buttons/HUD use procedural icons */
#tSk .skico{background-size:cover!important}
body.small #skills .stDet{max-height:none}
body.mobile #skills{width:850px}
/* v58: weapon set tabs, pouch slots, Tools row with pouches */
#equip .doll{grid-template-areas:"swap helm amulet" "weapon chest shield" "ring1 legs ring2" ". boots ."!important}
#equip .wswap{grid-area:swap;display:flex;flex-direction:column;gap:4px;justify-content:center}
#equip .wsT{position:relative;flex:1;display:flex!important;align-items:center;justify-content:center;gap:4px;padding:0 4px!important;font:bold 13px Georgia,serif!important;color:#9a8c74!important;background:linear-gradient(#24201c,#121010)!important;border:1px solid #4a4036!important;border-radius:3px!important}
#equip .wsT.on{color:#ffd870!important;border-color:#c8963a!important;box-shadow:0 0 8px rgba(255,190,80,.35)}
#equip .wsT .wsI{width:20px;height:20px;display:inline-block}#equip .wsT .wsI>*{width:100%;height:100%}
#equip .tools{grid-template-columns:repeat(4,46px)!important;gap:4px!important}
#equip .tools .slot{width:46px!important;height:46px!important}
body.portrait #equip .tools{grid-template-columns:repeat(4,42px)!important}
#equip .eq-jpouch .eqlab,#equip .eq-spouch .eqlab{font-size:8px}
.pouchrow{display:grid;grid-template-columns:repeat(8,48px);gap:3px;margin:2px 0 6px}body.portrait .pouchrow{grid-template-columns:repeat(8,1fr)}body.portrait .pouchrow .slot{width:auto;height:auto;aspect-ratio:1}
.pouchrow .slot{background:rgba(70,40,90,.25)}.pouchrow.spouch .slot{background:rgba(40,50,100,.25)}
#pouchRows .jbhead{margin-top:6px}
.caseIco{position:relative;display:inline-block;width:100%;height:100%}.caseIco b{position:absolute;right:0;bottom:0;color:var(--cc);font-size:14px;text-shadow:0 0 3px #000}
.caseLab{margin-top:8px}.casegrid .slot{background:rgba(70,40,90,.22)}
.stgrid .slot.prow{background:rgba(70,40,90,.22)}
.csTop{margin-bottom:4px}.csBox{padding:1px 8px}.csBox b{font-size:15px}.csRes{margin-top:5px}.csRes .csKV{padding:1px 4px}.csKV{padding:1px 7px}.csAttr{padding:2px 6px;margin-top:3px}.csFoot{margin-top:6px}
#char .chxp{height:12px}

/* v59: point buttons: menu-button size, placed by placePts() */
#ptsNote{position:fixed!important;inset:0!important;left:0!important;top:0!important;transform:none!important;zoom:1!important;pointer-events:none!important;z-index:6}
#ptsNote .ptsBox{position:fixed!important;display:block!important;width:46px;height:46px;pointer-events:auto}
#ptsNote .ptsPlus{position:absolute;inset:0;width:auto!important;height:auto!important;border-radius:12px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:24px!important;line-height:1!important;box-sizing:border-box}
#ptsNote .ptsPlus small{font-size:10px;font-weight:600;color:#f0e8dc;margin-top:1px;letter-spacing:.2px}
#ptsNote .ptsN{top:-7px!important;right:-7px!important}
#ptsNote .ptsKey{position:absolute;left:-6px;bottom:-6px;min-width:16px;height:16px;border-radius:4px;background:#e8e2d6;color:#141414;font:bold 10px/16px Arial;text-align:center;padding:0 3px;box-shadow:0 1px 3px #000}

/* v59: hold-to-aim skills */
body.skaim #crosshair{transform:translate(-50%,-50%) scale(1.8);filter:drop-shadow(0 0 4px #7ab8ff) brightness(1.6)}
#tSk button[data-aim]{border-color:#9cd0ff!important;box-shadow:0 0 14px rgba(120,180,255,.8)}
/* v59: small station windows (furnace / campfire / grill...): no dark plate behind the slots; the whole window scrolls instead of the slot list */
.stGrid{background:none!important;border:0!important;box-shadow:none!important}
#craft:not(.benchL):not(.benchV45)>#craftList{max-height:none!important;overflow:visible!important}
body.mobile .panel{max-height:calc(96dvh / var(--ps,1))}
@media (max-height:520px){body.mobile .stGrid .stSlot,body.mobile .fuelRow .fuelSlot{width:80px!important;height:80px!important}body.mobile .stGrid{margin-top:4px}}
/* v60: portrait hotbar = weapon slot + slots 1-4 + Inventory, XP bar tucked under the hotbar at its width (placed by placeXpPortrait) */
body.portrait #hotbar{grid-template-columns:repeat(4,46px)!important;gap:4px!important}
body.portrait #hotbar .slot{width:46px!important;height:46px!important}
body.portrait #hotbar .slot:nth-child(n+5){display:none!important}
body.portrait #gearSlot{width:46px!important;height:46px!important}
body.portrait #bagBtn{width:52px!important;height:46px!important}
body.portrait #bars2{bottom:calc(14px + env(safe-area-inset-bottom))!important}
body.portrait #xpbar{position:fixed!important;zoom:1!important;transform:none!important;height:7px!important}

/* v60 / v72.14: save export/import + storage warning */
#saveIO{position:fixed;inset:0;z-index:200;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(0,0,0,.94);padding:16px;font-family:Arial,sans-serif;color:#eee;touch-action:auto;-webkit-overflow-scrolling:touch}
#saveIO .sioT{font-size:20px;font-weight:700;color:#ffb070}#saveIO .sioH{max-width:520px;text-align:center;font-size:13px;line-height:1.4}
#saveIO textarea{width:min(560px,92vw);height:min(160px,30vh);font:11px monospace;background:#111;color:#ddd;border:1px solid #555;border-radius:6px;padding:6px;word-break:break-all;user-select:text!important;-webkit-user-select:text!important;-webkit-touch-callout:default;touch-action:auto;caret-color:#ffb070}
#saveIO .sioB{display:flex;gap:10px}#saveIO button,.sioRow button{padding:8px 16px;border-radius:8px;border:1px solid #6a5a4a;background:#221c18;color:#f0e6d8;font-size:14px;cursor:pointer}
#saveIO .sioM{font-size:13px;color:#9f9;text-align:center;max-width:520px;min-height:1.2em}
#saveIO .sioM.sioWarn{color:#ffd8a0}#saveIO .sioM.sioErr{color:#ff9a8a}
.sioRow{display:flex;gap:8px;justify-content:center;margin-top:8px;flex-wrap:wrap}
#title .sioRow.sioTitle{width:100%;margin:4px 0 0;gap:8px}
#title .sioRow.sioTitle button{flex:1;min-width:0;font-size:15px!important;padding:8px 10px!important;min-height:40px}
body.mobile #title .sioRow.sioTitle button{font-size:16px!important;padding:8px 10px!important;min-height:42px}
body.mobile.landscape #title .sioRow.sioTitle button{font-size:15px!important;padding:7px 10px!important;min-height:38px}
body.mobile #saveIO,body.mobile #saveIO textarea{touch-action:auto;user-select:text!important;-webkit-user-select:text!important}
#saveWarn{display:none;max-width:460px;margin:8px auto 0;padding:8px 12px;border:1px solid #c08030;border-radius:8px;background:rgba(60,30,10,.85);color:#ffd8a0;font:12px/1.4 Arial,sans-serif;text-align:center}
#ps-game .pbtns #btnExport,#ps-game .pbtns #btnImport{margin-top:2px}

/* v61: eye toggle for ground item names */
#lblBtn{position:fixed;z-index:6;display:none;padding:0;border-radius:12px;border:2px solid rgba(255,110,40,.55);background:rgba(18,18,20,.6);cursor:pointer;pointer-events:auto}
#lblBtn{flex-direction:column;align-items:center;justify-content:center;gap:1px}
#lblBtn svg{width:48%;height:48%;display:block;margin:0 auto}
#lblBtn .lblTxt{display:block;font:700 9px/1 Outfit,system-ui,sans-serif;color:#f0ece6;letter-spacing:.02em;text-shadow:0 1px 2px #000;margin-top:1px}#lblBtn .slash{display:none}#lblBtn.off .slash{display:inline}#lblBtn.off{opacity:.75}
#lblBtn.auto{border-color:rgba(255,190,80,.4)}#lblBtn.auto svg{opacity:.55}
#lblBtn .ptsKey{position:absolute;left:-6px;bottom:-6px;min-width:16px;height:16px;border-radius:4px;background:#e8e2d6;color:#141414;font:bold 10px/16px Arial;text-align:center;padding:0 3px;box-shadow:0 1px 3px #000}
body.uiopen #lblBtn,body.intitle #lblBtn{display:none!important}

/* v61: Refuge dragon names */
#prompt.dragon{font:700 26px Georgia,serif!important;letter-spacing:1px;color:#ffd890!important;background:rgba(10,10,11,.45)!important;padding:3px 16px!important;text-shadow:0 0 10px rgba(255,150,60,.7),0 2px 3px #000!important}
body.mobile #prompt.dragon{font-size:24px!important}

body.fanopen #lblBtn{visibility:hidden}

/* v68: Veil quick button square like other quick slots */
#tLook.noLook,#tLook[data-tb="veil"],#tVeil{border-radius:10px!important}
#tLook[data-tb="veil"] .fico.skico,#tVeil .fico.skico,#sk_veilstep .skico.sk-veilstep{
  border-radius:8px;background-color:transparent!important;background-size:contain;background-repeat:no-repeat;background-position:center}
.skico.sk-veilstep{background-color:transparent!important}
#sk_veilstep{border-radius:10px}

/* v68 veil square quick buttons (match other touch slots) */
body.mobile #tLook[data-tb="veil"],#tVeil{width:var(--tb,56px);height:var(--tb,56px);border-radius:10px!important;padding:0}
#tLook[data-tb="veil"] .fico.skico.sk-veilstep,#tVeil .fico.skico.sk-veilstep{width:70%;height:70%;border-radius:8px;background-color:transparent!important;background-size:contain!important;background-repeat:no-repeat;background-position:center}
#sk_veilstep{border-radius:10px!important}
#sk_veilstep .skico.sk-veilstep{background-color:transparent!important;background-size:contain!important;border-radius:8px}

/* ===== v70.2: menu above minimap, ember point buttons, stable item details ===== */

/* Portrait: hamburger sits in the top-right corner ABOVE the minimap. */
body.portrait #tMenu{
  right:calc(10px + env(safe-area-inset-right))!important;
  left:auto!important;
  top:calc(8px + env(safe-area-inset-top))!important;
  z-index:7;
}
body.portrait #mapwrap{
  right:10px!important;
  top:calc(8px + env(safe-area-inset-top) + 52px * var(--bs,1) + 6px)!important;
}
/* Fan opens as a column to the LEFT of the menu (beside the map), not down the right edge into Attack/Jump. */
body.portrait #tFan{
  right:calc(100% + 6px)!important;
  top:0!important;
  left:auto!important;
  flex-direction:column!important;
}
body.portrait #tFan button{transform:translateX(24px) scale(.6)!important;}
body.portrait.fanopen #tFan button{transform:none!important;}

/* Landscape: keep the menu at the top, left of the minimap — never by the orbs. Fan opens left along the top. */
body.landscape #tMenu{
  right:calc(12px + 176px * var(--hs,1) + 10px + env(safe-area-inset-right))!important;
  top:calc(10px + env(safe-area-inset-top))!important;
  left:auto!important;
  z-index:7;
}
body.landscape #mapwrap{right:12px!important;top:calc(10px + env(safe-area-inset-top))!important;}
body.landscape #tFan{
  right:calc(100% + 6px)!important;
  top:0!important;
  flex-direction:row-reverse!important;
}

/* Items toggle lives in the fan menu on phones */
#tFan #tLbl{font-size:15px!important;gap:1px;}
#tFan #tLbl svg{width:18px;height:18px;display:block;flex:none;}
#tFan #tLbl .slash{display:none;}
#tFan #tLbl.off .slash{display:inline;}
#tFan #tLbl.off{opacity:.75;}
#tFan #tLbl.auto svg{opacity:.55;}
body.mobile #lblBtn{display:none!important;}

/* Stats / Skills: black fill, ember-orange accents, readable point badge */
#ptsNote .ptsPlus{
  background:#0a0a0c!important;
  border:2px solid #ff6a1a!important;
  color:#ffb070!important;
  box-shadow:0 0 12px rgba(255,90,20,.55),inset 0 0 10px rgba(255,80,10,.12)!important;
}
#ptsNote .ptsBox.sk .ptsPlus{
  border-color:#ff6a1a!important;
  color:#ffb070!important;
  box-shadow:0 0 12px rgba(255,90,20,.55),inset 0 0 10px rgba(255,80,10,.12)!important;
}
#ptsNote .ptsPlus small{color:#ffc090!important;text-shadow:0 0 6px rgba(255,100,20,.65);}
#ptsNote .ptsN{
  background:#c23018!important;
  color:#fff!important;
  border:1px solid #ffd0a8;
  font-weight:800;
  box-shadow:0 0 6px rgba(255,80,20,.55);
}

/* Item details: close X + no-jump (hidden until placed) + wrapping hint */
#invAct.iaHide{visibility:hidden!important;}
#invAct .iaHead{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
#invAct .iaX{flex:0 0 auto;min-width:36px;height:32px;margin-left:auto;border:1px solid #5a4a40;background:#1a1210;color:#ffc8a0;border-radius:8px;font:700 16px/1 Arial;cursor:pointer;}
#invAct .iaX:hover,#invAct .iaX:active{border-color:#ff6a1a;color:#ffd8b0;}
body.mobile #invHint{max-width:none!important;white-space:normal;overflow:visible;font-size:11px;line-height:1.35;margin-top:6px;}
body.mobile #invAct.ovl{max-height:100%;}


/* v70.2: restore the top-left objective prompt (hidden in v54). Short text, black + ember, clear of Stats/Skills, map, and log. */
#qtrack{display:block!important;position:absolute;left:12px;top:calc(10px + env(safe-area-inset-top,0px));width:auto;max-width:240px;background:rgba(8,8,10,.78)!important;border:1px solid #ff6a1a!important;border-left:3px solid #ff6a1a!important;box-shadow:0 0 14px rgba(255,90,20,.4)!important;border-radius:8px;padding:6px 10px 7px;pointer-events:none;z-index:5;}
#qtrack .qt-act{display:none;}
#qtrack .qt-title{color:#ffb070;font:700 11px/1.2 Outfit,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;margin:0 0 2px;text-shadow:0 0 6px rgba(255,100,20,.5);}
#qtrack .qt-obj{color:#f4ece4;font:600 13px/1.3 Outfit,system-ui,sans-serif;margin:0;}
body.portrait #qtrack{left:8px;top:calc(8px + env(safe-area-inset-top,0px));max-width:46vw;width:auto;}
body.landscape #qtrack{left:10px;top:calc(8px + env(safe-area-inset-top,0px));max-width:36vw;}
body.uiopen #qtrack,body.intitle #qtrack,body.mobile.uiopen #qtrack{display:none!important;}


/* v70.3: portrait menu fan opens LEFT in a wrapping row, entirely above/outside the minimap (not a column down behind the map). */
body.portrait #tMenu{z-index:40!important;}
body.portrait #tFan{
  right:calc(100% + 6px)!important;
  left:auto!important;
  top:0!important;
  bottom:auto!important;
  flex-direction:row-reverse!important;
  flex-wrap:wrap!important;
  align-items:flex-start!important;
  align-content:flex-start!important;
  justify-content:flex-start!important;
  height:auto!important;
  width:auto!important;
  max-width:min(72vw, calc(100vw - 72px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)))!important;
  gap:6px!important;
  z-index:41!important;
  overflow:visible!important;
}
body.portrait #tFan button{transform:translateX(24px) scale(.6)!important;}
body.portrait.fanopen #tFan button{transform:none!important;opacity:1!important;}
body.portrait #mapwrap{z-index:4!important;}
body.landscape #tMenu,body.landscape #tFan{z-index:40!important;}
body.landscape #tFan{flex-direction:row-reverse!important;flex-wrap:wrap!important;height:auto!important;width:auto!important;z-index:41!important;}


/* v70.4: message log yields to the left Stats/Skills stack and stays off action buttons / orbs / map. */
#log{z-index:5;pointer-events:none;box-sizing:border-box;}
#log .msg{max-width:100%!important;}


/* v70.6: larger Stats/Skills labels — 10px was unreadable on PC; keep ember style, stronger contrast. */
#ptsNote .ptsPlus{
  font-size:28px!important;
}
#ptsNote .ptsPlus small{
  font-size:13px!important;
  font-weight:800!important;
  letter-spacing:.4px;
  color:#ffe7c8!important;
  text-shadow:0 1px 2px #000,0 0 8px rgba(255,120,30,.85)!important;
  margin-top:2px!important;
  line-height:1.05;
  text-transform:uppercase;
}
#ptsNote .ptsN{
  min-width:20px!important;
  height:20px!important;
  line-height:20px!important;
  font-size:13px!important;
  font-weight:800!important;
}


/* v70.6: + / − on the right of station material boxes (furnace, grill, pot, fuel) */
.stSlotRow{display:flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;}
.stQty{display:flex;flex-direction:column;justify-content:center;gap:5px;flex:0 0 auto;}
.stQtyBtn{
  width:28px;height:28px;padding:0;margin:0;
  border:1px solid #5a3a28;border-radius:5px;
  background:#161210;color:#ffc898;
  font:700 16px/1 Georgia,serif;
  box-shadow:inset 0 0 8px rgba(255,120,30,.18),0 1px 2px #000;
  cursor:pointer;user-select:none;
}
.stQtyBtn:hover:not(:disabled){border-color:#ff8a3a;color:#ffe7c8;background:#2a1a10;}
.stQtyBtn:disabled{opacity:.38;color:#6a6258;border-color:#3a342c;background:#141210;box-shadow:none;cursor:default;}
body.mobile .stQtyBtn{width:40px;height:40px;font-size:22px;border-width:2px;border-radius:7px;}
.fuelRow .stSlotRow{margin:0 auto;}


/* v71.2: OPEN box keeps the ember rim; fill is 50% black. PICK UP is a smaller plain rectangle, no border or glow. */
body:not(.mobile) #prompt{
  top:calc(50% + 12vh);
  bottom:auto;
  color:#ffc090;
  background:rgba(10,10,11,.5);
  padding:6px 16px;
  border-radius:12px;
  border:2px solid #ff6a1a;
  box-shadow:0 0 12px rgba(255,90,20,.55),inset 0 0 10px rgba(255,80,10,.12);
  font:700 15px/1.25 Outfit,system-ui,sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-shadow:0 0 6px rgba(255,100,20,.65),0 1px 2px #000;
  white-space:nowrap;
  width:max-content;
  max-width:min(90vw,720px);
}
body:not(.mobile) #prompt.loot{
  background:rgba(10,10,11,.5);
  border:0;
  box-shadow:none;
  padding:4px 11px;
  border-radius:6px;
  font:700 10px/1.25 Outfit,system-ui,sans-serif;
  letter-spacing:.04em;
  text-shadow:0 1px 2px #000;
}
body:not(.mobile) #prompt:empty{display:none}
body:not(.mobile) #prompt.gather{color:#ffd070}
body:not(.mobile) #prompt.bad{color:#ff8a7a;border-color:#d4321a;box-shadow:0 0 12px rgba(212,50,26,.45),inset 0 0 10px rgba(212,50,26,.12)}
/* keep the refuge dragon name treatment */
body:not(.mobile) #prompt.dragon{font:700 26px Georgia,serif!important;letter-spacing:1px;color:#ffd890!important;background:rgba(10,10,11,.45)!important;padding:3px 16px!important;border:0!important;box-shadow:none!important;text-transform:none;text-shadow:0 0 10px rgba(255,150,60,.7),0 2px 3px #000!important}

/* v72: overhead NPC name — PICK UP style; JS sets font-size as a world label (min/max) */
.npcTag{position:absolute;left:0;top:0;pointer-events:none;text-align:center;
  background:rgba(10,10,11,.5);border:0;border-radius:6px;padding:4px 11px;
  box-shadow:none;white-space:nowrap;opacity:1;z-index:5;
  color:#ffc090;font:700 13px/1.25 Outfit,system-ui,sans-serif;letter-spacing:.04em;
  text-transform:none;text-shadow:0 1px 2px #000;width:max-content;transform-origin:50% 100%}
.npcTag .nn{display:block;color:#ffc090;font:inherit;letter-spacing:inherit;text-transform:none;text-shadow:inherit}
.npcTag .nr{display:none}

/* v72.8: #pause (and other windows) use 900px !important on desktop; on phones the fitted portrait/landscape width must win so Menu Scale can grow without overflowing the viewport. */
body.portrait #pause,body.portrait #inv,body.portrait #skills,body.portrait #stash,body.portrait #story,body.portrait #char,body.portrait #craft,body.portrait #dialog,body.portrait #quests,body.portrait #build,body.portrait #wps,body.portrait #confirm{
  width:calc((100vw - 10px) / var(--ps,1))!important;max-width:none;max-height:calc((100vh - 20px) / var(--ps,1))!important;}
body.mobile:not(.portrait) #pause,body.mobile:not(.portrait) #inv,body.mobile:not(.portrait) #skills,body.mobile:not(.portrait) #story,body.mobile:not(.portrait) #char,body.mobile:not(.portrait) #craft,body.mobile:not(.portrait) #dialog,body.mobile:not(.portrait) #quests,body.mobile:not(.portrait) #build,body.mobile:not(.portrait) #wps,body.mobile:not(.portrait) #confirm{
  width:calc((100vw - 24px) / var(--ps,1))!important;max-width:none;max-height:calc((100vh - 16px) / var(--ps,1))!important;}

/* v72.9: character creation must fit short landscape (e.g. 1024x439) without being clipped.
   Compact when the viewport is short; always keep Back/Begin on screen; scroll the middle if needed.
   --ps (Menu Scale) is applied but the box is capped to the viewport so a large menu scale cannot push Begin off-screen. */
#nameEntry{position:fixed;inset:0;z-index:90!important;display:flex;align-items:center;justify-content:center;overflow:auto;box-sizing:border-box;
  padding:max(8px,env(safe-area-inset-top,0px)) 10px max(8px,env(safe-area-inset-bottom,0px));touch-action:pan-y;-webkit-overflow-scrolling:touch;}
#nameEntry.hidden{display:none!important}
#nameEntry .nbox{display:flex!important;flex-direction:column;min-height:0;box-sizing:border-box;overflow:hidden;
  width:min(560px,calc((100vw - 20px) / var(--ps,1)))!important;
  max-width:calc((100vw - 20px) / var(--ps,1))!important;
  max-height:calc((100dvh - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) / var(--ps,1))!important;
  zoom:var(--ps,1);}
#nameEntry .nscroll{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;}
#nameEntry .nbtns{flex:0 0 auto;position:sticky;bottom:0;margin-top:8px!important;padding-top:6px;background:inherit;z-index:1;}
@media (max-height:500px){
  #nameEntry{padding:max(4px,env(safe-area-inset-top,0px)) 8px max(4px,env(safe-area-inset-bottom,0px))!important;}
  #nameEntry .nbox{padding:8px 12px!important;border-radius:12px!important;}
  #nameEntry .norn{display:none;}
  #nameHead{font-size:16px!important;margin:0 0 2px!important;letter-spacing:0!important;}
  #nameSub{display:none;}
  #nameEntry .nrow{margin:0;}
  #nameIn{font-size:15px!important;padding:6px 10px!important;}
  #nameDice{width:40px!important;font-size:16px!important;padding:6px 0!important;}
  #nameEntry .clsRow{margin:6px 0 0!important;gap:6px;}
  #nameEntry .clsCard{padding:4px 4px!important;gap:0!important;}
  #nameEntry .clsCard img{width:28px;height:28px;margin-bottom:1px;}
  #nameEntry .clsCard b{font-size:12px;}
  #nameEntry .clsCard small{font-size:9px;}
  #nameEntry .clsCard i,#nameEntry .clsCard em{display:none!important;}
  #nameEntry .nbtns{margin-top:6px!important;padding-top:4px;}
  #nameEntry .nbtns button{padding:6px 14px!important;font-size:14px!important;}
}
/* same compact rules for mobile landscape even if a slightly taller device still feels cramped */
body.mobile.landscape #nameEntry .norn{display:none;}
body.mobile.landscape #nameHead{font-size:16px!important;margin:0 0 2px!important;}
body.mobile.landscape #nameSub{display:none;}
body.mobile.landscape #nameEntry .nbox{padding:8px 12px!important;}
body.mobile.landscape #nameIn{font-size:15px!important;padding:6px 10px!important;}
body.mobile.landscape #nameEntry .clsCard i,body.mobile.landscape #nameEntry .clsCard em{display:none!important;}
body.mobile.landscape #nameEntry .clsCard img{width:28px;height:28px;margin-bottom:1px;}
body.mobile.landscape #nameEntry .clsCard{padding:4px 4px!important;}
body.mobile.landscape #nameEntry .nbtns{margin-top:6px!important;}
body.mobile.landscape #nameEntry .nbtns button{padding:6px 14px!important;font-size:14px!important;}

/* v72.11: mobile context action sits on the right; JS places it between the viewmodel and Jump, vertically centered. Shape + Skills colouring unchanged. */
body.mobile #tAct.show,body.mobile.hudmeasure #tAct{left:auto!important;}

/* v72.10: context action keeps its arrow-tab shape; colouring matches the Skills button (dark fill, ember-orange rim/glow/text). */
body.mobile #tAct.show,body.mobile.hudmeasure #tAct{
  color:#ffb070!important;
  filter:drop-shadow(0 0 12px rgba(255,90,20,.55))!important;
  text-shadow:0 1px 2px #000,0 0 8px rgba(255,120,30,.85)!important;
}
body.mobile #tAct.on{filter:brightness(1.15) drop-shadow(0 0 14px rgba(255,90,20,.7))!important;}
body.mobile #tAct.need{color:#ff8a6a!important;filter:drop-shadow(0 0 10px rgba(255,80,20,.45))!important;}
body.mobile #tAct .ar,body.mobile #tAct .av{color:inherit;}

/* v72.12: Recipes button on furnace/cook windows; recipe book overlay; workbench have/need + level. */
#craft .ptitle{display:flex;align-items:flex-start;justify-content:flex-start;gap:8px;}
#craftTitle{flex:1;min-width:0;}
#craftRecs{
  flex:0 0 auto;align-self:center;display:none;align-items:center;justify-content:center;
  height:32px;padding:0 12px;margin:0 4px 0 auto;
  border:1px solid #ff6a1a;background:#0a0a0c;color:#ffb070;
  border-radius:8px;font:700 12px/1 Outfit,system-ui,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 0 10px rgba(255,90,20,.35);
}
#craftRecs:hover,#craftRecs:active{border-color:#ff8a3a;color:#ffe7c8;background:#1a1210;}
body.mobile #craftRecs{height:40px;min-width:88px;padding:0 14px;font-size:13px;}
.recBook .recBookBox{width:min(480px,96%);max-height:82%;}
.recBookRow{align-items:flex-start;}
.recBookRow .recTime{font-size:11px;color:var(--dim);margin-top:2px;}
.recBookRow.locked .reqlv,.recBookRow .reqlv{font-weight:700;}
.recBookRow.dim .reccost{opacity:1;}
.cdReq{margin-top:4px;font-size:12px;}
.cdReq.short,.btLv.short{color:#ff7a6a;font-weight:700;}
/* Show materials and level on workbench tiles (were hidden by the v49 square-tile pass). */
.benchTile .btMeta,.benchTile .btCost,.benchTile .btLv{display:block!important;}
.benchGrid .benchTile,.benchTile{
  aspect-ratio:auto!important;
  height:auto!important;
  min-height:0!important;
  justify-content:flex-start!important;
  padding:8px 6px 8px!important;
  gap:3px!important;
}
.benchTile .btCost{font-size:10px;line-height:1.25;width:100%;text-align:center;color:#cfc;}
.benchTile .btCost span{display:block;}
.benchTile .btLv{font-size:10px;font-weight:700;color:#cfc;line-height:1.2;}
.benchTile.lvlock{opacity:1!important;border-color:rgba(255,90,70,.55)!important;}
.benchTile.lvlock .btName{color:#f0a090;}
body.mobile .benchTile .btCost,body.mobile .benchTile .btLv{font-size:9px;}
@media (orientation:landscape) and (max-height:520px){
  body.mobile .benchTile .btCost,body.mobile .benchTile .btLv{font-size:8px;}
  body.mobile #craftRecs{height:34px;font-size:12px;min-width:76px;}
}