/* Emberthread v13.9.16 UI overhaul — layout grid, safe areas, Forged Console HUD.
   Selectors are prefixed with html body / body.etCon so they beat the JS-injected <style> tags without editing those modules. */
:root{--et-sl:max(10px,env(safe-area-inset-left));--et-sr:max(10px,env(safe-area-inset-right));--et-st:max(8px,env(safe-area-inset-top));--et-sb:max(8px,env(safe-area-inset-bottom));
 --et-orb:76px;--et-gap:8px;--et-tap:44px;--et-ax:calc(var(--et-sr) + 41px);--et-ay:calc(var(--et-sb) + var(--et-orb) + 47px)}
@media (max-height:500px){:root{--et-orb:62px;--et-ay:calc(var(--et-sb) + var(--et-orb) + 41px)}}
@media (min-width:900px) and (min-height:600px){:root{--et-orb:108px}}

/* ---------- Forged Console ---------- */
#etCon{position:fixed;left:var(--et-sl);right:var(--et-sr);bottom:var(--et-sb);height:var(--et-orb);z-index:6;pointer-events:none;contain:layout paint;display:none}
body.etCon #etCon{display:block}
body.etModal #etCon{display:none}
#etCon .frm{position:absolute;left:calc(var(--et-orb)*.62);right:calc(var(--et-orb)*.62);bottom:0;height:calc(var(--et-orb)*.5);width:auto;overflow:visible;filter:drop-shadow(0 2px 3px #000a)}
#etCon .orb{position:absolute;bottom:0;width:var(--et-orb);height:var(--et-orb);border-radius:50%}
#etCon .orb.hp{left:0}#etCon .orb.mp{right:0}
#etCon canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}
#etCon .rim{position:absolute;inset:-5px;border-radius:50%;pointer-events:none;
 background:radial-gradient(circle,#0000 calc(50% - 4px),#1a1018 calc(50% - 4px),#c98a3c calc(50% - 2px),#ffd27a calc(50% - 1px),#7a4420 calc(50% + 1px),#2a1610 50.5%,#0000 51%);
 box-shadow:0 0 0 2px #1a1018,0 3px 8px #000c}
#etCon .rim::before,#etCon .rim::after{content:'';position:absolute;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe6a8,#a0602a 60%,#3a1a0c);top:2px;left:50%;margin-left:-3.5px}
#etCon .rim::after{top:auto;bottom:2px}
#etCon .orb b{position:absolute;left:0;right:0;bottom:calc(var(--et-orb)*.16);text-align:center;font:700 10px/1 ui-monospace,Menlo,monospace;color:#fff4dc;text-shadow:0 1px 0 #000,0 0 3px #000}
#etCon.low .orb.hp .rim{animation:etLow .8s ease-in-out infinite alternate}@keyframes etLow{to{box-shadow:0 0 0 2px #1a1018,0 0 16px #ff4a2a}}
#etCon .lv{position:absolute;left:50%;bottom:calc(var(--et-orb)*.28);transform:translateX(-50%);min-width:22px;height:22px;padding:0 4px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;
 font:700 11px Georgia,serif;color:#ffd27a;background:radial-gradient(#3a1c12,#1a0c08);border:2px solid #c98a3c;border-radius:50%;box-shadow:0 0 0 1px #1a1018,0 0 8px #ff8a3a60}
#etCon .xpn{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);font:600 9px ui-monospace,Menlo,monospace;color:#f3e2c0c0;text-shadow:0 1px 0 #000;white-space:nowrap}
/* retire the old bars, keep the name/level/currency plate */
html body #cbHud .cbBar.hp,html body #cbHud .cbBar.mp,html body #cbHud #lvXp{display:none!important}
html body #cbHud .nm{gap:10px}html body #cbHud{min-width:0;padding:4px 8px;left:var(--et-sl)}

/* ---------- top band: one row of settings, gear at right ---------- */
html body.etCon #hud{left:var(--et-sl);right:calc(var(--et-sr) + 52px);top:var(--et-st);align-items:flex-start;gap:6px}
html body.etCon #title{display:none}
html body.etCon #opts{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;touch-action:pan-x;-webkit-overflow-scrolling:touch}
html body.etCon #opts::-webkit-scrollbar{display:none}
html body.etCon #opts button{flex:0 0 auto;min-height:var(--et-tap);white-space:nowrap;touch-action:pan-x manipulation;font-size:11px;padding:0 10px}
html body #etVol{top:var(--et-st)!important;right:var(--et-sr)!important}
/* right column under the gear: Arena, Skills book, quest tracker */
html body #etAr{top:calc(var(--et-st) + 52px);right:var(--et-sr)}
html body #etArP{max-height:calc(100vh - var(--et-st) - 110px - var(--et-sb));max-height:calc(100dvh - var(--et-st) - 110px - var(--et-sb));touch-action:pan-y;overscroll-behavior:contain}
html body #etArP{max-height:calc(100dvh - var(--et-st) - 110px - var(--et-sb) - var(--et-orb))}
html body #etArP *{touch-action:pan-y manipulation}
html body #skBook{top:calc(var(--et-st) + 104px);right:var(--et-sr);height:var(--et-tap);min-width:var(--et-tap)}
html body.etArOpen #skBook{display:none}
html body #qTrk{top:calc(var(--et-st) + 156px);max-width:min(210px,44vw)}
html body #ecShopBtn{top:calc(var(--et-st) + 104px);right:calc(var(--et-sr) + 92px);height:var(--et-tap)}
html body #wxp{top:calc(var(--et-st) + 52px)!important;right:calc(var(--et-sr) + 130px)!important;z-index:59!important}
/* center toasts/banners below the top band, above the console */
html body #qToast,html body .etArT{top:calc(var(--et-st) + 120px)}
html body #etSaveToast{top:calc(var(--et-st) + 52px)!important}
/* dialogs sit above the console and scroll if long */
html body #wDlg{bottom:calc(var(--et-sb) + var(--et-orb) + 10px);max-height:calc(100% - var(--et-sb) - var(--et-orb) - 80px);overflow:auto;touch-action:pan-y}

/* ---------- modal menus: scrollable, never under floating buttons ---------- */
html body #gInv .pn,html body #skP>*,html body #ptP>*{touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html body #gInv .pn{max-height:calc(100vh - var(--et-st) - var(--et-sb) - 8px);max-height:calc(100dvh - var(--et-st) - var(--et-sb) - 8px);max-width:calc(100vw - var(--et-sl) - var(--et-sr))}
html body #gInv .pn *,html body #skP *,html body #ptP *{touch-action:pan-y manipulation}
html body #gInv{z-index:62}html body #skP{z-index:63}html body #ptP{z-index:64}
body.etModal .skB,body.etModal #btnA,body.etModal #btnJ,body.etModal #gBlk,body.etModal #gPot,body.etModal #gBag,body.etModal #gLoot,body.etModal #wInt,
body.etModal #etAr,body.etModal #skBook,body.etModal #stickhint,body.etModal #ecShopBtn,body.etModal #qTrk,body.etModal #etVol{visibility:hidden!important}

/* ---------- touch layout: controls stacked above the MP orb ---------- */
body.etMob #btnA{right:var(--et-sr);bottom:calc(var(--et-sb) + var(--et-orb) + 10px)}
body.etMob #btnJ{right:calc(var(--et-sr) + 90px)!important;bottom:calc(var(--et-sb) + var(--et-orb) + 17px)!important}
body.etMob #gBlk{right:calc(var(--et-sr) + 162px);bottom:calc(var(--et-sb) + var(--et-orb) + 18px)}
body.etMob #gPot{left:calc(var(--et-sl) + var(--et-orb) + 10px);right:auto;bottom:var(--et-sb);width:var(--et-tap);height:var(--et-tap)}
body.etMob #gPotK{display:none!important}
body.etMob #gBag{right:calc(var(--et-sr) + var(--et-orb) + 10px);bottom:var(--et-sb);height:var(--et-tap);min-width:var(--et-tap)}
body.etMob #wInt{right:var(--et-sr);bottom:calc(var(--et-ay) + 140px)}
body.etMob #gLoot{right:calc(var(--et-sr) + 70px);bottom:calc(var(--et-ay) + 128px)}
body.etMob #stickhint{left:var(--et-sl);bottom:calc(var(--et-sb) + var(--et-orb) + 14px);max-width:36vw;font-size:10px;line-height:1.3}
/* skill arc above the A / Jump / Block row (overrides skills.js inline left/top) */
body.etMob .skB[data-slot="0"]{left:calc(100% - var(--et-ax) - 4px)!important;top:calc(100% - var(--et-ay) - 100px)!important}
body.etMob .skB[data-slot="1"]{left:calc(100% - var(--et-ax) - 68px)!important;top:calc(100% - var(--et-ay) - 92px)!important}
body.etMob .skB[data-slot="2"]{left:calc(100% - var(--et-ax) - 130px)!important;top:calc(100% - var(--et-ay) - 80px)!important}
body.etMob .skB[data-slot="3"]{left:calc(100% - var(--et-ax) - 190px)!important;top:calc(100% - var(--et-ay) - 62px)!important}
body.etMob #skKey{display:none}
@media (max-height:500px){
 body.etMob #wInt{right:calc(var(--et-sr) + 236px);bottom:calc(var(--et-sb) + var(--et-orb) + 14px)}
 body.etMob #gLoot{right:calc(var(--et-sr) + 236px);bottom:calc(var(--et-sb) + var(--et-orb) + 80px);width:64px;height:64px}
 body.etMob #stickhint{display:none}
 html body #qTrk{top:calc(var(--et-st) + 52px);right:calc(var(--et-sr) + 196px)}
 html body #skBook{top:calc(var(--et-st) + 52px);right:calc(var(--et-sr) + 124px)}
 html body #ecShopBtn{top:calc(var(--et-st) + 104px);right:var(--et-sr)}
}

/* ---------- desktop: skills ride the console ---------- */
@media (min-width:900px) and (min-height:600px){
 body.etCon:not(.etMob) #etCon{left:50%;right:auto;width:min(760px,92vw);transform:translateX(-50%)}
 body.etCon:not(.etMob) .skB{width:52px;height:52px}
 body.etCon:not(.etMob) .skB[data-slot="0"]{left:calc(50% - 96px)!important;top:calc(100% - var(--et-sb) - var(--et-orb)*.5 - 44px)!important}
 body.etCon:not(.etMob) .skB[data-slot="1"]{left:calc(50% - 32px)!important;top:calc(100% - var(--et-sb) - var(--et-orb)*.5 - 54px)!important}
 body.etCon:not(.etMob) .skB[data-slot="2"]{left:calc(50% + 32px)!important;top:calc(100% - var(--et-sb) - var(--et-orb)*.5 - 54px)!important}
 body.etCon:not(.etMob) .skB[data-slot="3"]{left:calc(50% + 96px)!important;top:calc(100% - var(--et-sb) - var(--et-orb)*.5 - 44px)!important}
 body.etCon:not(.etMob) #skKey{right:auto;left:50%;transform:translateX(-50%);bottom:calc(var(--et-sb) + var(--et-orb)*.5 + 82px)}
 body.etCon:not(.etMob) #help{max-width:280px;font-size:10px;line-height:1.35;left:var(--et-sl);right:auto;top:calc(var(--et-st) + 100px);bottom:auto;opacity:.7;background:#1a1018b0;padding:6px 8px;border-radius:4px;border:1px solid #5a405080}
 body.etCon:not(.etMob) #gKeys{left:var(--et-sl);bottom:calc(var(--et-sb) + var(--et-orb) + 12px);max-width:calc(50% - 400px);white-space:normal;line-height:1.4}
 body.etCon:not(.etMob) #gPot{left:var(--et-sl);bottom:var(--et-sb)}
}
body.etCon:not(.etMob) #hint{bottom:calc(var(--et-sb) + var(--et-orb) + 8px)}

/* ---------- v13.9.16b: arena panel reachable on phones, PvP HUD out of the Path picker ---------- */
body.etMob #etArP{width:calc(100vw - var(--et-sl) - var(--et-sr))!important;max-width:420px;max-height:calc(100dvh - var(--et-st) - 110px - var(--et-sb) - var(--et-orb))}
html body #etArH{min-width:var(--et-tap)}
html body #etArP .etQuick{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:4px}
html body #etArP .etQuick button{background:#5a2a14;border-color:#ffb060;color:#fff1d0}
html body #etPvp{left:var(--et-sl)!important;right:auto!important;transform:none!important;top:calc(var(--et-st) + 100px)!important;min-width:0!important;
 max-width:170px!important;/*15q collapsible pill wins: compact pill, sheet opens below*/box-sizing:border-box;z-index:57!important;font-size:12px!important}
html body #etPvp button{min-height:var(--et-tap)!important}
@media (min-width:900px){html body #etPvp{left:50%!important;transform:translateX(-50%)!important;top:calc(var(--et-st) + 52px)!important;max-width:200px!important}}
body.etModal #etPvp{visibility:hidden!important}

/* 13.9.16: PvP sheet sits under the pill, below the HUD plate */
html body #etPvpS{top:calc(var(--et-st) + 146px)}@media (min-width:900px){html body #etPvpS{top:calc(var(--et-st) + 96px)}}
/* 13.9.16: start screen owns the top band; arena toggle/toast/PvP pill wait until it fades (fixes ARENA + 'Training Arena' over save-slot Export) */
body:has(#ets:not(.out)) #etAr,body:has(#ets:not(.out)) .etArT,body:has(#ets:not(.out)) #etPvp,body:has(#ets:not(.out)) #etPvpB{visibility:hidden!important}