/* Shardbound: dark iron panels with bronze trim and a crystal-cyan accent; Cinzel titles, Barlow Condensed numbers */
@font-face{font-family:'Cinzel';src:url(assets/fonts/Cinzel-Variable.ttf) format('truetype');font-weight:400 900;font-display:swap}
@font-face{font-family:'Cinzel Decorative';src:url(assets/fonts/CinzelDecorative-Black.ttf) format('truetype');font-weight:900;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(assets/fonts/BarlowCondensed-SemiBold.ttf) format('truetype');font-weight:500 600;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(assets/fonts/BarlowCondensed-Bold.ttf) format('truetype');font-weight:700 900;font-display:swap}
@font-face{font-family:'Barlow';src:url(assets/fonts/Barlow-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow';src:url(assets/fonts/Barlow-SemiBold.ttf) format('truetype');font-weight:500 700;font-display:swap}
:root{
  --ink:#ece2c8; --dim:#a99c80; --mute:#6f6553; --gold:#e8c26c; --gold-hi:#ffe3a0; --trim:#c9a45c; --crys:#7fe2ff; --crys-d:#2f8fd0;
  --bg0:rgba(14,13,14,.92); --bg1:rgba(34,30,27,.94); --red:#e0503a; --green:#57c95a;
  --title:'Cinzel',serif; --deco:'Cinzel Decorative','Cinzel',serif; --ui:'Barlow Condensed',sans-serif; --body:'Barlow',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#0b0a09;color:var(--ink);font-family:var(--body);font-size:14px;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
img{display:block}
#gl{position:fixed;left:0;top:0;width:100%;height:100%;display:block;touch-action:none}
#vignette{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;background:radial-gradient(125% 100% at 50% 45%,transparent 58%,rgba(0,0,0,.55) 100%);z-index:1}
#labels,#floaters{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:2}
.screen{position:fixed;inset:0;display:none;z-index:5}
.screen.on{display:block}
.pn{background:linear-gradient(180deg,rgba(46,40,34,.95),rgba(17,14,12,.95));border:1px solid #000;box-shadow:inset 0 0 0 1px rgba(201,164,92,.5),inset 0 1px 0 rgba(255,230,170,.14),0 6px 18px rgba(0,0,0,.5);border-radius:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:5px;font:700 15px var(--ui);letter-spacing:.02em;color:#1a1208;
  background:linear-gradient(180deg,#ffe3a0,#d7a03a);box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(255,255,255,.55),0 3px 8px rgba(0,0,0,.4);transition:filter .12s,transform .08s}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(1px)}
.btn.blue{background:linear-gradient(180deg,#b5e9ff,#3f8ed6);color:#06121e}
.btn.dark{background:linear-gradient(180deg,#4a4038,#221c17);color:var(--ink);box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(201,164,92,.45)}
.btn.red{background:linear-gradient(180deg,#ff9a85,#b8321f);color:#1a0603}
.btn[disabled],.btn.off{filter:grayscale(.85) brightness(.55);pointer-events:none}
.coin{display:inline-block;width:18px;height:18px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 35%,#fff3b0,#e0a52c 60%,#8a6418);box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.gem{display:inline-block;width:14px;height:18px;flex:none;clip-path:polygon(50% 0,100% 35%,80% 100%,20% 100%,0 35%);background:linear-gradient(180deg,#d8f6ff,#3f8ed6)}

/* loading / start */
#scr-load{background:radial-gradient(80% 70% at 50% 45%,#1d2733,#08090b);display:none;align-items:center;justify-content:center;flex-direction:column;gap:22px}
#scr-load.on{display:flex}
.brand{text-align:center}
.brand .logo{font:900 clamp(40px,8vw,96px) var(--deco);letter-spacing:.06em;color:transparent;background:linear-gradient(180deg,#fff7d8 10%,#f0c66a 45%,#9a6a20 70%,#ffe3a0);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 4px 0 #1a0f04) drop-shadow(0 0 24px rgba(127,226,255,.35))}
.brand .tag{margin-top:6px;font:600 clamp(14px,1.6vw,19px) var(--title);letter-spacing:.14em;color:#bfe9ff;text-shadow:0 2px 6px #000}
.brand.small .logo{font-size:clamp(34px,5vw,64px)}
.loadbar{width:min(420px,70vw);height:8px;border-radius:4px;background:#000;box-shadow:inset 0 0 0 1px #3a3128;overflow:hidden}
.loadbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3f8ed6,#7fe2ff);transition:width .3s}
.loadtxt{font:600 14px var(--ui);color:var(--dim);letter-spacing:.08em}
#scr-start{background:linear-gradient(180deg,rgba(6,8,12,.55),rgba(6,8,12,.85))}
#scr-start.on{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,4vh,40px);padding:16px}
.starters{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.starter{width:min(250px,80vw);padding:12px;border-radius:8px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.starter:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--gold),0 10px 24px rgba(0,0,0,.6)}
.starter img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 18%;border-radius:6px;box-shadow:0 0 0 1px #000,0 0 0 2px rgba(201,164,92,.6)}
.starter b{display:block;margin-top:10px;font:700 22px var(--title);color:var(--gold-hi)}
.starter .role{font:700 14px var(--ui);color:var(--crys);letter-spacing:.06em}
.starter p{margin:8px 0 10px;font:500 14px/1.35 var(--body);color:#d4c9ae}
.starter .btn{width:100%}

/* game shell, arranged like Just a Hero: top bar, battle strip, tab bar, open tab, party column */
:root{--line:#4b3621;--line2:#7d5c33;--gold2:#a8792b;--frame:inset 0 0 0 1px #000a,inset 0 1px 0 #f3cf8a1f,0 2px 8px #0009}
#scr-hud{z-index:3;pointer-events:none}
#app{position:absolute;inset:0;display:grid;pointer-events:none}
#app>*{min-width:0;min-height:0;pointer-events:auto}
#app[data-mode=land]{grid-template-columns:minmax(0,1fr) 270px;grid-template-rows:auto 44% auto minmax(0,1fr);grid-template-areas:"top top" "stage stage" "nav side" "panel side"}
#app[data-mode=land].wide{grid-template-columns:minmax(0,1fr) 310px}
#app[data-mode=port]{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 31% minmax(0,1fr) auto auto;grid-template-areas:"top" "stage" "panel" "side" "nav"}
#app[data-mode=split]{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top top" "stage panel" "side nav"}
#topbar{grid-area:top;display:flex;align-items:center;gap:8px;padding:6px 10px;background:linear-gradient(#2c1f15,#140e09);border-bottom:2px solid var(--gold2);box-shadow:0 2px 0 #000,0 4px 12px #0008;z-index:2}
.tbrand{font:900 18px var(--deco);letter-spacing:.08em;color:var(--gold);text-shadow:0 2px 0 #000,0 0 12px #ecbd5240;white-space:nowrap}
#topbar .sp{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 11px 3px 5px;border-radius:999px;background:linear-gradient(#0d0906,#1b130d);border:1px solid var(--line2);box-shadow:inset 0 1px 3px #000;white-space:nowrap}
.pill b{font:800 17px var(--ui);color:var(--gold-hi)}.pill small{font:600 12px var(--ui);color:#9fd28a}
.pill.shard b{color:#c9f2ff}
.iconbtn{width:34px;height:34px;flex:none;border-radius:8px;display:grid;place-items:center;color:var(--ink);background:linear-gradient(#3a2a1c,#1d140d);border:1px solid var(--line2);box-shadow:inset 0 1px 0 #ffe2a822,0 2px 0 #000}
.iconbtn svg{width:19px;height:19px}
#stage{grid-area:stage;position:relative;overflow:hidden;border-bottom:2px solid #000;pointer-events:none!important}
#stage>*{pointer-events:auto}
#app[data-mode=split] #stage{border-bottom:0;border-right:2px solid var(--gold2)}
.stage-head{position:absolute;left:10px;top:7px;display:flex;flex-direction:column;gap:2px;max-width:min(60%,420px);pointer-events:none!important;text-shadow:0 2px 3px #000,0 0 10px #000}
.stage-head .realm{font:900 22px/1.05 var(--title);color:#fff4dc;letter-spacing:.04em}
.stage-head .where{font:700 13px var(--ui);color:#f1e3c4;letter-spacing:.03em}.stage-head .where b{color:var(--gold)}
.pips{display:flex;gap:4px;margin-top:3px;width:180px}
.pips i{flex:1;height:6px;border-radius:2px;background:#0b0806cc;box-shadow:inset 0 0 0 1px #000}
.pips i.done{background:linear-gradient(180deg,#ffe3a0,#d39a2c)}
.pips i.now{background:linear-gradient(90deg,#ffe3a0 50%,#0b0806 50%);animation:pip 1s ease-in-out infinite alternate}
.pips i.boss{flex:1.4;background:#3a120c;box-shadow:inset 0 0 0 1px #ff6a4a}.pips i.boss.done{background:linear-gradient(180deg,#ff9a7a,#c0391f)}.pips i.boss.now{background:#c0391f;animation:pip .5s ease-in-out infinite alternate}
@keyframes pip{from{opacity:.65}to{opacity:1}}
.bosstime{display:none;position:relative;height:16px;width:min(320px,70vw);margin-top:5px;border-radius:3px;background:#1a0705cc;overflow:hidden;box-shadow:inset 0 0 0 1px #ff6a4a}
.bosstime.on{display:block}.bosstime i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#c0391f,#ff8a5a)}
.bosstime span{position:relative;padding-left:6px;font:700 12px/16px var(--ui);color:#fff;text-shadow:0 1px 1px #000}
.stage-btns{position:absolute;right:8px;top:7px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.bossinfo{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:999px;background:#140e09cc;border:1px solid var(--line2);backdrop-filter:blur(4px)}
.bossinfo img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 15%;box-shadow:0 0 0 2px #ff6a4a;filter:saturate(.7) brightness(.85) sepia(.3) hue-rotate(-20deg)}
.bossinfo b{display:block;font:700 13px/1.1 var(--ui);color:#ff9d86}.bossinfo span{font:600 11px var(--ui);color:#cdbd98}
.autobtn button{padding:5px 10px;border-radius:999px;font:700 12px var(--ui);background:#140e09cc;border:1px solid var(--line2);color:var(--dim);backdrop-filter:blur(4px)}
.autobtn button.on{color:#06121e;background:linear-gradient(180deg,#b5e9ff,#3f8ed6);border-color:#000}
.feed{position:absolute;left:10px;bottom:8px;display:flex;flex-direction:column-reverse;gap:3px;width:min(300px,60%);pointer-events:none!important}
.feed div{padding:3px 8px;border-radius:4px;font:600 12px var(--ui);background:rgba(0,0,0,.6);box-shadow:inset 0 0 0 1px var(--c,#3a3128);color:var(--c,#ece2c8);animation:feedIn .3s both;transition:opacity 1s}
@keyframes feedIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.banner{position:absolute;left:0;right:0;top:30%;text-align:center;pointer-events:none!important;opacity:0}
.banner.show{animation:bn 2.4s both}
.bn-main{font:900 clamp(24px,3.6vw,48px) var(--title);color:var(--gold-hi);text-shadow:0 4px 0 #1a0f04,0 0 24px rgba(0,0,0,.8);letter-spacing:.04em}
.bn-sub{margin-top:4px;font:600 clamp(13px,1.4vw,18px) var(--ui);color:#e6dcc2;text-shadow:0 2px 3px #000}
@keyframes bn{0%{opacity:0;transform:scale(1.25)}12%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
/* tab bar */
#nav{grid-area:nav;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;padding:4px 5px;background:linear-gradient(#24190f,#120c08);border-top:1px solid var(--gold2);border-bottom:1px solid var(--gold2);box-shadow:0 2px 6px #000a}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px;min-height:52px;border-radius:7px;border:1px solid transparent;color:var(--dim);font:700 12px var(--title);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.tab .ti{width:28px;height:28px;border-radius:5px;box-shadow:0 0 0 1px #000;filter:saturate(.6) brightness(.8)}
.tab:hover{color:var(--ink)}
.tab[aria-selected=true]{color:var(--gold);background:linear-gradient(#3e2c1c,#21170f);border-color:var(--gold2);box-shadow:inset 0 0 14px #ecbd5222,inset 0 -2px 0 var(--gold);text-shadow:0 0 8px #ecbd5266}
.tab[aria-selected=true] .ti{filter:none}
.tab .dot{display:none;position:absolute;top:4px;right:calc(50% - 22px);width:10px;height:10px;border-radius:50%;background:#ff4a3a;box-shadow:0 0 0 2px #140e09,0 0 8px #ff4a3a;font-size:0}
.tab .dot.on{display:block}
#app[data-mode=port] #nav{border-bottom:0;padding:5px 5px calc(6px + env(safe-area-inset-bottom))}
/* open tab */
#panel{grid-area:panel;overflow:hidden;background:linear-gradient(#170f0a,#0d0806);display:flex;flex-direction:column}
#panel-body{flex:1;min-height:0;overflow:auto;padding:10px 12px;overscroll-behavior:contain}
/* party column */
#side{grid-area:side;display:flex;flex-direction:column;border-left:1px solid var(--gold2);background:linear-gradient(#1a120c,#0d0806)}
.side-head{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 10px;border-bottom:1px solid var(--line)}
.side-head b{font:700 14px var(--title);color:var(--gold);letter-spacing:.08em;text-transform:uppercase}
.multi{display:flex;gap:3px}
.multi button{padding:2px 9px;border-radius:4px;font:700 12px var(--ui);color:var(--dim);background:#0b0806;box-shadow:inset 0 0 0 1px #3a3128}
.multi button.on{color:#1a1208;background:linear-gradient(180deg,#ffe3a0,#d39a2c)}
.party{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:8px}
.hc{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"por nm" "por bars" "up up";column-gap:9px;row-gap:3px;padding:7px;border-radius:7px;background:linear-gradient(#24190f,#150e09);border:1px solid var(--line2);box-shadow:var(--frame)}
.hc .row{display:contents;cursor:pointer}
.hc .por{grid-area:por;position:relative;width:46px;height:46px;cursor:pointer}
.hc .por img{width:46px;height:46px;border-radius:6px;object-fit:cover;object-position:50% 15%;box-shadow:0 0 0 2px #000,0 0 0 3px var(--trim)}
.hc .por .lv{position:absolute;left:-4px;bottom:-5px;padding:0 5px;border-radius:8px;font:900 12px/16px var(--ui);color:#1a1208;background:linear-gradient(180deg,#ffe3a0,#d39a2c);box-shadow:0 0 0 1px #000}
.hc.dead .por img{filter:grayscale(1) brightness(.5)}
.hc .nm{grid-area:nm;display:flex;align-items:baseline;gap:6px;min-width:0;cursor:pointer}
.hc .nm b{font:700 15px var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc .nm em{font-style:normal;font:600 12px var(--ui);color:var(--dim);white-space:nowrap}
.hc .bars{grid-area:bars;display:flex;flex-direction:column;gap:3px;justify-content:center}
.hc .bar{height:6px;border-radius:3px;background:#000;overflow:hidden}
.hc .bar i{display:block;height:100%;width:0}
.hc .bar.hp i{background:linear-gradient(90deg,#3fa83f,#7be05a)}.hc .bar.mp i{background:linear-gradient(90deg,#3f7dff,#a6d0ff)}
.hc .bar.mp.full i{background:linear-gradient(90deg,#ffb52c,#fff0a0);box-shadow:0 0 8px #ffcf5a}
.hc .up{grid-area:up;margin-top:4px;width:100%;padding:5px 8px;border-radius:5px;font:700 13px var(--ui);color:#1a1208;background:linear-gradient(180deg,#ffe3a0,#d39a2c);box-shadow:0 0 0 1px #000,inset 0 1px 0 #fff8;display:flex;justify-content:space-between;align-items:center;gap:6px}
.hc .up.no{filter:grayscale(.85) brightness(.55)}
.hc .up .coin{width:11px;height:11px;margin-right:3px;vertical-align:-1px;display:inline-block}
.hc .up .uc{white-space:nowrap}
.hc.empty{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;cursor:pointer;color:var(--dim);font:700 14px var(--ui);border-style:dashed;background:rgba(0,0,0,.25)}
.hc.empty .plus{font:900 22px/1 var(--title);color:var(--gold)}
.hc.empty .plus.lock svg{width:18px;height:18px;color:var(--dim)}
.hc.empty .ec{color:var(--gold-hi)}
/* phone: party becomes one row of compact cards above the tab bar */
#app.narrow #side{border-left:0;border-top:1px solid var(--gold2)}
#app.narrow .side-head{padding:3px 8px}.side-head b{font-size:13px}
#app.narrow .party{flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:5px;padding:5px 6px 6px}
#app.narrow .hc{flex:1 0 64px;max-width:120px;grid-template-columns:minmax(0,1fr);grid-template-areas:"por" "bars" "up";justify-items:center;padding:5px;row-gap:3px}
#app.narrow .hc .nm{display:none}
#app.narrow .hc .por,#app.narrow .hc .por img{width:38px;height:38px}
#app.narrow .hc .bars{width:100%}
#app.narrow .hc .bar{height:4px}
#app.narrow .hc .up{padding:3px 4px;font-size:12px;justify-content:center;margin-top:2px}
#app.narrow .hc .up [data-ul]{display:none}
#app.narrow .hc.empty{flex-direction:column;gap:2px;font-size:11px;text-align:center;min-height:0}
#app.narrow .hc.empty .et{display:none}
#app[data-mode=split] .party{padding:4px 5px 5px}
#app[data-mode=split] .hc .por,#app[data-mode=split] .hc .por img{width:30px;height:30px}
#app[data-mode=split] #nav .tab{min-height:44px;font-size:10px}
#app[data-mode=split] #nav .tab .ti{width:22px;height:22px}
#app.narrow .tab{font-size:10px;letter-spacing:.03em}
#app.narrow .tbrand{font-size:15px}
#app.narrow .stage-head .realm{font-size:17px}
#app.narrow .pips{width:130px}
#app.narrow .bossinfo{display:none}
#app.narrow .feed{display:none}
/* overhead bars and floating numbers */
.ul{position:absolute;left:0;top:0;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:2px;will-change:transform}
.ul .nm{font:700 11px var(--ui);color:#ffb2a2;text-shadow:0 1px 1px #000,0 0 3px #000;white-space:nowrap}
.ul .hb{position:relative;width:54px;height:5px;background:#000;box-shadow:0 0 0 1px rgba(0,0,0,.8);overflow:hidden}
.ul .hb u{position:absolute;left:0;top:0;bottom:0;background:#fff0c0;text-decoration:none}
.ul .hb i{position:absolute;left:0;top:0;bottom:0;background:#d8321f}
.ul.hero .hb i{background:#4fbf47}.ul.hero .nm{display:none}
.ul.boss .hb{width:120px;height:8px}.ul.boss .nm{font-size:14px;color:#ffd2a0}
.fl{position:absolute;transform:translate(-50%,-50%);font:900 20px var(--ui);text-shadow:0 2px 0 #000,0 0 5px #000;white-space:nowrap;animation:fl .9s cubic-bezier(.2,.8,.3,1) both}
.fl.crit{font-size:30px;color:#ffb43a;animation:flc 1s cubic-bezier(.2,.8,.3,1) both}
.fl.gold{font-size:16px;color:#ffd75a}.fl.heal{color:#7dff7a}.fl.hurt{color:#ff6a5a;font-size:18px}
@keyframes fl{0%{opacity:0;transform:translate(-50%,-30%) scale(1.6)}12%{opacity:1;transform:translate(-50%,-55%) scale(.95)}100%{opacity:0;transform:translate(-50%,-170%) scale(1)}}
@keyframes flc{0%{opacity:0;transform:translate(-50%,-30%) scale(2.2)}12%{opacity:1;transform:translate(-50%,-55%) scale(.9)}22%{transform:translate(-50%,-62%) scale(1.08)}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}

/* modal windows */
.modal{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;background:rgba(4,4,6,.55);padding:12px}
.modal.on{display:flex}
.win{width:min(980px,96vw);max-height:min(720px,92vh);display:flex;flex-direction:column;border-radius:10px;animation:winIn .2s cubic-bezier(.2,1.2,.4,1)}
@keyframes winIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.win-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(201,164,92,.3)}
.win-head b{font:800 20px var(--title);color:var(--gold-hi);letter-spacing:.04em}
.win-head .x{width:32px;height:32px;border-radius:5px;font-size:16px;color:var(--dim);background:#0b0806;box-shadow:inset 0 0 0 1px #3a3128}
.win-body{padding:12px 14px;overflow:auto}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px}
.box{padding:10px;border-radius:6px;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(201,164,92,.25)}
.h4{font:700 13px var(--title);letter-spacing:.12em;color:var(--trim);margin-bottom:8px}
/* heroes */
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.hcard{position:relative;border-radius:6px;overflow:hidden;cursor:pointer;background:#0b0806;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(201,164,92,.35);transition:transform .1s}
.hcard:hover{transform:translateY(-2px)}.hcard.sel{box-shadow:0 0 0 2px var(--gold-hi)}
.hcard img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 16%}
.hcard .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 6px 5px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.92));font:700 13px var(--ui)}
.hcard .cap em{display:block;font-style:normal;font:600 11px var(--ui);color:var(--dim)}
.hcard.locked img{filter:grayscale(.9) brightness(.45)}
.hcard .tag2{position:absolute;right:5px;top:5px;padding:1px 6px;border-radius:3px;font:700 11px var(--ui);background:#3f8ed6;color:#fff}
.hcard .price{position:absolute;left:0;right:0;top:40%;text-align:center;font:900 15px var(--ui);color:#ffe3a0;text-shadow:0 1px 2px #000}
.hdet .top{display:flex;gap:12px;align-items:center}
.hdet .top img{width:84px;height:84px;border-radius:8px;object-fit:cover;object-position:50% 16%;box-shadow:0 0 0 2px #000,0 0 0 3px var(--trim)}
.hdet .top b{display:block;font:800 22px var(--title);color:var(--gold-hi)}.hdet .top em{font-style:normal;font:600 14px var(--ui);color:var(--crys)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}
.stats div{padding:6px 8px;border-radius:4px;background:rgba(0,0,0,.35);font:600 12px var(--ui);color:var(--dim)}.stats div b{display:block;font:800 16px var(--ui);color:var(--ink)}
.skl{display:flex;gap:10px;align-items:flex-start;padding:7px;border-radius:5px;background:rgba(0,0,0,.3);margin-bottom:6px}
.skl .icon,.skl img{width:42px;height:42px;flex:none;border-radius:4px;box-shadow:0 0 0 1px #000}
.skl b{font:700 15px var(--ui);color:var(--ink)}.skl i{font-style:normal;font:600 12px var(--ui);color:var(--gold);margin-left:6px}.skl p{font:500 13px/1.3 var(--body);color:#cfc4aa}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
/* inventory */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tabs button{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:5px;font:700 13px var(--ui);background:#0b0806;box-shadow:inset 0 0 0 1px #3a3128;color:var(--dim)}
.tabs button img{width:28px;height:28px;border-radius:4px;object-fit:cover;object-position:50% 15%}
.tabs button.on{color:var(--ink);box-shadow:inset 0 0 0 1px var(--gold)}
.doll{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot{position:relative;aspect-ratio:1;border-radius:6px;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px #3a3128;display:flex;align-items:center;justify-content:center;flex-direction:column;cursor:pointer}
.slot .sl{position:absolute;left:0;right:0;bottom:3px;text-align:center;font:600 11px var(--ui);color:var(--mute)}
.it{position:relative;aspect-ratio:1;border-radius:5px;cursor:pointer;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--r) 30%,#000),#0a0807 75%);box-shadow:inset 0 0 0 1px var(--r),0 0 0 1px #000}
.it svg{position:absolute;inset:14%;width:72%;height:72%}
.it .ilv{position:absolute;right:3px;bottom:2px;font:700 10px var(--ui);color:#ddd;text-shadow:0 1px 1px #000}
.it.new::after{content:'';position:absolute;left:4px;top:4px;width:7px;height:7px;border-radius:50%;background:#ffd25a;box-shadow:0 0 6px #ffd25a}
.slot .it{position:absolute;inset:0}
.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px}
.iteminfo{min-height:120px}
.iteminfo b{display:block;font:800 17px var(--ui)}.iteminfo .meta{font:600 12px var(--ui);color:var(--dim);margin-bottom:6px}
.iteminfo .ln{font:600 14px var(--ui);color:#d9cfb6}.iteminfo .ln.up{color:#7be05a}.iteminfo .ln.down{color:#ff8a7a}
.sel2{padding:5px 8px;border-radius:4px;background:#0b0806;color:var(--ink);font:600 13px var(--ui);box-shadow:inset 0 0 0 1px #3a3128;border:0}
/* workshop */
.ulist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
.urow{display:flex;gap:10px;align-items:center;padding:8px;border-radius:6px;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(201,164,92,.25)}
.urow img{width:46px;height:46px;border-radius:5px;box-shadow:0 0 0 1px #000}
.urow .t{flex:1}.urow b{font:700 16px var(--ui)}.urow em{font-style:normal;font:700 13px var(--ui);color:var(--gold);margin-left:6px}.urow p{font:500 13px var(--body);color:#cfc4aa}
.urow .btn{min-width:96px}
/* map */
.biome{margin-bottom:10px}
.biome .bh{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}.biome .bh b{font:800 17px var(--title);color:var(--gold-hi)}.biome .bh span{font:600 13px var(--ui);color:var(--dim)}
.sgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.sgrid button{padding:8px 0;border-radius:4px;font:700 14px var(--ui);background:#0b0806;box-shadow:inset 0 0 0 1px #3a3128;color:var(--ink)}
.sgrid button.boss{box-shadow:inset 0 0 0 1px #ff6a4a;color:#ffb2a2}
.sgrid button.cur{background:linear-gradient(180deg,#ffe3a0,#d39a2c);color:#1a1208}
.sgrid button:disabled{opacity:.3;cursor:default}
/* misc */
.tip{position:fixed;z-index:30;display:none;max-width:280px;padding:9px 11px;pointer-events:none;font:500 13px/1.35 var(--body)}
.toast{position:fixed;left:50%;top:18%;transform:translateX(-50%);z-index:40;padding:10px 18px;border-radius:6px;font:700 16px var(--ui);background:rgba(10,8,6,.92);box-shadow:0 0 0 1px var(--trim);opacity:0;pointer-events:none;transition:opacity .25s}
.toast.on{opacity:1}
.offline{text-align:center}.offline .big{font:900 34px var(--title);color:var(--gold-hi);margin:8px 0}.offline p{font:500 15px var(--body);color:#d4c9ae}
.note{font:500 13px/1.4 var(--body);color:#bfb39a}
#rotate{display:none;position:fixed;inset:0;z-index:60;background:rgba(8,8,10,.96);color:var(--ink);font:600 17px var(--ui);text-align:center;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:30px}
#rotate button{padding:8px 16px;border-radius:5px;background:#2a231c;box-shadow:inset 0 0 0 1px var(--trim);color:var(--ink);font:700 15px var(--ui)}

/* small screens: panel contents */
#app.narrow .cols,#app[data-mode=land]:not(.wide) .cols{grid-template-columns:1fr}
#app.narrow .sgrid{grid-template-columns:repeat(5,1fr)}
#app.narrow .hgrid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
#app.narrow .stats{grid-template-columns:repeat(2,1fr)}

/* race picker */
.starters.races .starter{width:min(330px,86vw)}
.starter.race b{font-size:28px}
.starter.race.orc b{color:#c9e07a}
.starter.race.orc:hover{box-shadow:inset 0 0 0 1px #9cc25a,0 10px 24px rgba(0,0,0,.6)}
.starter.race.orc img{box-shadow:0 0 0 1px #000,0 0 0 2px rgba(156,194,90,.6)}
.rmini{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:0 0 12px}
.rmini img{width:100%;aspect-ratio:1;border-radius:4px;box-shadow:0 0 0 1px #000}
.sback{flex-basis:100%;display:flex;justify-content:center}
.btn.ghost{background:rgba(20,17,14,.8);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(201,164,92,.6);width:auto;padding:8px 18px}
@media (orientation:portrait) and (max-width:820px),(max-height:520px){.starters.races .starter>img{aspect-ratio:2/1}.starters.races .rmini{display:none}.starters.races .starter p{margin:6px 0 8px;font-size:13px}.starter.race b{font-size:22px;margin-top:6px}}

/* panel contents sized for the tab area */
#panel .doll{grid-template-columns:repeat(3,minmax(0,78px));justify-content:start}
#panel .igrid .note{grid-column:1/-1}
#panel .hgrid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
#panel .iteminfo{min-height:0}
#app.narrow .tab{text-transform:none;letter-spacing:0;font:700 11px var(--ui)}
#app[data-mode=split] #nav .tab{font-size:11px}
#panel .hcard .price{top:6px;left:6px;right:auto;text-align:left;padding:1px 6px;border-radius:4px;background:rgba(0,0,0,.6);font-size:13px}
.pill.acc{padding:3px 10px;gap:8px}.pill.acc b{color:#c9f2ff;font-size:15px}
.xpb{display:block;width:70px;height:6px;border-radius:3px;background:#000;overflow:hidden;box-shadow:inset 0 0 0 1px #3a3128}
.xpb i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3f8ed6,#7fe2ff);transition:width .3s}
#app.narrow .xpb{width:40px}#app.narrow .pill small{display:none}#app.narrow #topbar{gap:5px;padding:5px 7px}#app.narrow .tbrand{font-size:13px}
.btn.swap img{width:22px;height:22px;border-radius:4px;object-fit:cover;object-position:50% 15%}
#app.narrow .hc{max-width:none}

/* party cards: no buttons, just state */
.hc{cursor:pointer;grid-template-areas:"por nm" "por bars"}
.hc:hover{border-color:var(--gold)}
.hc .bar.xp{height:4px}.hc .bar.xp i{background:linear-gradient(90deg,#b88a2a,#ffe08a)}
#party-n{font:700 13px var(--ui);color:var(--dim)}
#app.narrow .hc{grid-template-areas:"por" "bars"}
/* heroes tab: one grid, the action on each card */
.hhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px;font:600 14px var(--ui);color:var(--dim)}.hhead b{color:var(--gold-hi)}
#panel .hgrid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
#panel .hcard{display:flex;flex-direction:column;cursor:default;background:linear-gradient(#24190f,#150e09);border:1px solid var(--line2);box-shadow:var(--frame)}
#panel .hcard:hover{transform:none}
#panel .hcard.inp{border-color:var(--gold);box-shadow:var(--frame),0 0 0 1px var(--gold)}
#panel .hcard .pimg{position:relative}
#panel .hcard .pimg img{width:100%;aspect-ratio:1.15;object-fit:cover;object-position:50% 14%}
#panel .hcard.locked .pimg img{filter:grayscale(.85) brightness(.5)}
#panel .hcard .lv{position:absolute;left:5px;bottom:5px;padding:0 6px;border-radius:8px;font:900 12px/17px var(--ui);color:#1a1208;background:linear-gradient(180deg,#ffe3a0,#d39a2c);box-shadow:0 0 0 1px #000}
#panel .hcard .cap{position:static;padding:5px 7px 2px;background:none;font:700 14px/1.1 var(--ui)}
#panel .hcard .cap b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#panel .hcard .cap em{font:600 11px var(--ui);color:var(--dim)}
#panel .hcard .act{padding:5px 7px 7px;margin-top:auto}
#panel .hcard .act .btn{width:100%;padding:5px 6px;font-size:13px}
#panel .hcard .act .coin{width:12px;height:12px}
.inparty{display:flex;align-items:center;justify-content:space-between;gap:6px;height:28px;font:700 13px var(--ui);color:var(--gold)}
.inparty button{padding:3px 8px;border-radius:4px;font:700 12px var(--ui);color:var(--dim);background:#0b0806;box-shadow:inset 0 0 0 1px #3a3128}
.swaps{display:flex;gap:4px}.swaps button{flex:1;border-radius:5px;overflow:hidden;box-shadow:0 0 0 1px var(--gold)}.swaps img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 15%}
.fl.lvl{font-size:18px;color:#ffe08a;letter-spacing:.04em}
.swaps{align-items:center}.swaps span{font:700 11px var(--ui);color:var(--dim)}
#app.narrow .inparty{font-size:12px}#app.narrow .inparty button{padding:2px 5px;font-size:11px}
#app.narrow .hhead .note{font-size:12px}

/* items: rendered art inside a frame that grows with rarity */
.it{border-radius:6px;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--r) 26%,#1a120c),#0a0705 78%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--r) 70%,#000),0 0 0 1px #000;overflow:hidden}
.it .ia{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 2px 2px #000)}
.it .ilv{z-index:2;font-size:11px;font-weight:800}
.it.r0{background:radial-gradient(circle at 50% 42%,#2a241e,#0c0907 78%);box-shadow:inset 0 0 0 1px #4a4036,0 0 0 1px #000}
.it.r1,.it.r2{box-shadow:inset 0 0 0 2px var(--r),0 0 0 1px #000}
.it.r3,.it.r4,.it.r5{box-shadow:inset 0 0 0 2px var(--r),inset 0 0 14px color-mix(in srgb,var(--r) 45%,transparent),0 0 0 1px #000,0 0 8px color-mix(in srgb,var(--r) 40%,transparent)}
.it.r3::before,.it.r4::before,.it.r5::before,.it.r6::before,.it.r7::before,.it.r8::before,.it.r9::before{content:'';position:absolute;inset:3px;z-index:1;pointer-events:none;border-radius:4px;
  background:linear-gradient(var(--r),var(--r)) top left/9px 2px no-repeat,linear-gradient(var(--r),var(--r)) top left/2px 9px no-repeat,linear-gradient(var(--r),var(--r)) top right/9px 2px no-repeat,linear-gradient(var(--r),var(--r)) top right/2px 9px no-repeat,
  linear-gradient(var(--r),var(--r)) bottom left/9px 2px no-repeat,linear-gradient(var(--r),var(--r)) bottom left/2px 9px no-repeat,linear-gradient(var(--r),var(--r)) bottom right/9px 2px no-repeat,linear-gradient(var(--r),var(--r)) bottom right/2px 9px no-repeat}
.it.r6,.it.r7,.it.r8,.it.r9{box-shadow:inset 0 0 0 2px var(--r),inset 0 0 18px color-mix(in srgb,var(--r) 60%,transparent),0 0 0 1px #000,0 0 12px var(--r);animation:itglow 2.4s ease-in-out infinite alternate}
.it.r6::after,.it.r7::after,.it.r8::after,.it.r9::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%) -150% 0/250% 100% no-repeat;animation:itshine 3.2s linear infinite}
.it.r9{--r:#ff6fd0;box-shadow:inset 0 0 0 2px #ff6fd0,inset 0 0 20px #7f5cff99,0 0 0 1px #000,0 0 14px #ff6fd0;animation:itcosmic 4s linear infinite}
@keyframes itglow{from{filter:brightness(1)}to{filter:brightness(1.18)}}
@keyframes itshine{to{background-position:150% 0}}
@keyframes itcosmic{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(360deg)}}
.it.new::after{z-index:3}
.it.sel{outline:2px solid #fff;outline-offset:1px}
.it.big{width:74px;height:74px;flex:none}
.ihead{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.slot .it{position:absolute;inset:0}
#panel .igrid{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));max-height:none}
.bagcols .doll{grid-template-columns:repeat(3,minmax(0,84px))}
.tabs button em{font-style:normal;margin-left:4px;padding:0 5px;border-radius:7px;background:#000;color:var(--gold-hi);font-size:11px}
.btn.mini{padding:3px 9px;font-size:12px;margin-left:8px;vertical-align:1px}
/* skill points */
.sprow{display:flex;align-items:center;gap:8px;padding:5px;border-radius:6px;background:rgba(0,0,0,.3);margin-bottom:5px}
.spi .icon,.spi img{width:36px;height:36px;border-radius:4px}
.spt{flex:1;min-width:0}.spt b{display:block;font:700 14px var(--ui)}.spt em{font-style:normal;font:600 12px var(--ui);color:var(--dim)}
.spb{width:30px;height:30px;border-radius:6px;font:900 18px var(--ui);color:#1a1208;background:linear-gradient(180deg,#ffe3a0,#d39a2c);box-shadow:0 0 0 1px #000}
.spb:disabled{filter:grayscale(1) brightness(.5)}
.spfree{float:right;color:var(--gold-hi);letter-spacing:.04em}
.chk{display:inline-flex;align-items:center;gap:6px;font:600 13px var(--ui);color:var(--dim)}
/* cube */
.clist{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.crow{display:grid;grid-template-columns:18px minmax(0,1fr) 50px 14px minmax(0,1fr) auto;align-items:center;gap:8px;padding:4px 6px;border-radius:5px;background:rgba(0,0,0,.3);font:700 13px var(--ui)}
.crow .rf{width:16px;height:16px;border-radius:3px;box-shadow:inset 0 0 0 2px var(--r);background:color-mix(in srgb,var(--r) 25%,#000)}
.crow .cn{color:var(--ink);text-align:right}.crow .arr{color:var(--dim)}
.crow .btn{padding:3px 10px;font-size:12px}
/* runes */
.rbranches{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.rbr{padding:8px;border-radius:7px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px var(--line)}
.rbr .urow{margin-bottom:6px}
/* map */
.mhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.dtabs{display:flex;gap:4px}
.dtabs button{padding:5px 12px;border-radius:5px;font:700 13px var(--ui);background:#0b0806;box-shadow:inset 0 0 0 1px #3a3128;color:var(--dim)}
.dtabs button.on{color:#1a1208;background:linear-gradient(180deg,#ffe3a0,#d39a2c)}
.dtabs button:disabled{opacity:.45}
.soul{display:inline-flex;align-items:center;gap:6px;font:700 14px var(--ui);color:#d9b8ff}
.soulic{display:inline-block;width:14px;height:16px;flex:none;clip-path:polygon(50% 0,100% 40%,50% 100%,0 40%);background:linear-gradient(180deg,#f0d8ff,#8a3cff);filter:drop-shadow(0 0 4px #a46cff)}
.sgrid button.nosoul{opacity:.55;box-shadow:inset 0 0 0 1px #8a3cff}
/* pets */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.pcard{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px;border-radius:7px;background:linear-gradient(#24190f,#150e09);border:1px solid var(--line2);text-align:center}
.pcard img{width:84px;height:84px;object-fit:contain;filter:grayscale(1) brightness(.45)}
.pcard.on{border-color:var(--gold)}.pcard.on img{filter:drop-shadow(0 2px 4px #000)}
.pcard b{font:700 13px var(--ui)}.pcard em{font-style:normal;font:600 12px var(--ui);color:#9fe8ff}
.pcard span{font:600 11px var(--ui);color:var(--dim)}
.pbar{width:100%;height:5px;border-radius:3px;background:#000;overflow:hidden}.pbar i{display:block;height:100%;background:linear-gradient(90deg,#b88a2a,#ffe08a)}
/* chest timers on the battle strip */
.chests{display:flex;gap:5px;margin-top:4px;pointer-events:none}
.chip{display:inline-flex;align-items:center;gap:4px;padding:1px 7px 1px 4px;border-radius:999px;background:#0b0806b0;font:700 11px var(--ui);color:var(--dim);box-shadow:inset 0 0 0 1px #3a3128}
.chip.ready{color:#ffe08a;box-shadow:inset 0 0 0 1px #c9a45c}
.chi{display:inline-block;width:14px;height:11px;border-radius:2px;background:linear-gradient(180deg,#c98a3a 50%,#7a4a1a 50%);box-shadow:inset 0 0 0 1px #000}
.chi.b{background:linear-gradient(180deg,#5aa8ff 50%,#1f4f9a 50%)}
.soulchip b{color:#d9b8ff}
#app.narrow .chip{font-size:10px}
.chtab{display:flex;flex-direction:column;gap:6px}
.chrow{display:flex;gap:9px;align-items:flex-start;padding:6px;border-radius:6px;background:rgba(0,0,0,.3)}
.chrow b{font:700 14px var(--ui)}.chrow em{font-style:normal;font:600 12px var(--ui);color:var(--dim)}
.rates{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:2px;font:700 12px var(--ui)}
.chi.big{width:30px;height:24px;flex:none;border-radius:4px}
.chi.wood{background:linear-gradient(180deg,#c98a3a 50%,#7a4a1a 50%)}.chi.blue{background:linear-gradient(180deg,#5aa8ff 50%,#1f4f9a 50%)}.chi.gold{background:linear-gradient(180deg,#ffe08a 50%,#c9921a 50%);box-shadow:inset 0 0 0 1px #000,0 0 8px #ffcf5a}

/* ======== Taskbar Hero style windows ======== */
#app[data-mode=land],#app[data-mode=land].wide{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 41% auto minmax(0,1fr);grid-template-areas:"top" "stage" "nav" "panel"}
#app[data-mode=port]{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 29% minmax(0,1fr) auto;grid-template-areas:"top" "stage" "panel" "nav"}
#app[data-mode=split]{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top top" "stage panel" "stage nav"}
#side{display:none!important}
#panel-body{padding:10px}
.wins{display:flex;gap:12px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.tw{position:relative;flex:0 1 auto;background:linear-gradient(#24170f,#140d08);border:2px solid #0a0604;border-radius:6px;box-shadow:inset 0 0 0 2px #5a3a20,inset 0 0 0 3px #0a0604,inset 0 0 0 4px #8a6230,0 6px 18px #000a;padding:30px 10px 10px}
.tw-head{position:absolute;left:50%;top:-2px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;height:28px;padding:0 26px;
  background:linear-gradient(#b8301f,#6a140c);clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%);box-shadow:inset 0 2px 0 #ff8a5a55}
.tw-head span{font:900 15px var(--title);letter-spacing:.14em;color:#ffe9b8;text-shadow:0 2px 0 #3a0804;white-space:nowrap}
.tw-head i{width:7px;height:7px;transform:rotate(45deg);background:#f0c66a;box-shadow:0 0 0 1px #3a0804}
.tw-body{min-width:0}
.parch{background:linear-gradient(#d9b981,#b8905a);border-radius:4px;box-shadow:inset 0 0 0 2px #5a3a20,inset 0 0 18px #6a4a2266;padding:8px;color:#2a1a0e}
.w-hero{width:min(430px,100%)}.w-tip{width:min(300px,100%)}.w-stat{width:min(330px,100%)}.w-skill{width:min(400px,100%)}.w-runes{width:min(760px,100%)}.w-rtot{width:min(290px,100%)}.w-cube{width:min(360px,100%)}.w-chest{width:min(420px,100%)}.w-portal{width:min(720px,100%)}.w-pets{width:min(980px,100%)}
/* hero window */
.doll3{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;gap:6px;align-items:center}
.dcol{display:flex;flex-direction:column;gap:6px}
.eq{position:relative;width:54px;height:54px;border-radius:5px;background:#3a2716;box-shadow:inset 0 0 0 2px #6a4a2a,inset 0 2px 6px #000a;display:grid;place-items:center;color:#7a5a36;cursor:pointer}
.eq>svg{width:46%;height:46%}.eq .it{position:absolute;inset:0}
.dmid{display:flex;flex-direction:column;align-items:center;gap:4px}
.hsel{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;padding:2px 4px;border-radius:12px;background:#5a3a20;color:#ffe9b8}
.hsel b{font:700 14px var(--title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hsel button,.hsel i{width:22px;height:22px;border-radius:50%;background:#2a1a0e;color:#f0c66a;font-size:11px;flex:none}
.dpor{width:118px;height:118px;border-radius:8px;overflow:hidden;box-shadow:0 0 0 2px #2a1a0e,0 0 0 4px #8a6230}
.dpor img{width:100%;height:100%;object-fit:cover;object-position:50% 14%}
.dlv{width:100%;text-align:center}.dlv b{font:900 17px var(--title);color:#5a1a0a}
.xpb2{height:7px;border-radius:4px;background:#2a1a0e;overflow:hidden;box-shadow:inset 0 0 0 1px #000}.xpb2 i{display:block;height:100%;background:linear-gradient(90deg,#d8a530,#ffe08a)}
.prow{display:flex;justify-content:center;gap:8px;margin-top:8px}
.ps{position:relative;width:52px;height:52px;border-radius:6px;background:#3a2716;box-shadow:inset 0 0 0 2px #6a4a2a;display:grid;place-items:center;cursor:pointer;overflow:hidden;color:#f0c66a;font:900 22px var(--title)}
.ps img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}.ps em{position:absolute;right:2px;bottom:1px;font:900 11px var(--ui);font-style:normal;color:#fff;text-shadow:0 1px 2px #000}
.ps.cur{box-shadow:0 0 0 2px #5fd34a,inset 0 0 0 1px #000}.ps.sel:not(.cur){box-shadow:0 0 0 2px #f0c66a}
.ps.lock{cursor:default;flex-direction:column;color:#7a5a36}.ps.lock svg{width:18px;height:18px}.ps.lock span{font:700 10px var(--ui);color:#5a3a20}
.htabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0 6px}
.htabs button{padding:6px;border-radius:4px;font:700 14px var(--ui);color:#d8b67e;background:linear-gradient(#3a2414,#22150b);box-shadow:inset 0 0 0 1px #6a4a2a}
.htabs button.on{color:#ffe9b8;background:linear-gradient(#c4561f,#7a2a0e);box-shadow:inset 0 0 0 1px #f0a050}
.igrid2{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;max-height:196px;overflow:auto;padding:3px;border-radius:4px;background:#0d0806;box-shadow:inset 0 0 0 1px #3a2716}
.igrid2 .cell,.c9 .cell{aspect-ratio:1;border-radius:4px;background:#1c130c;box-shadow:inset 0 0 0 1px #2a1d12}
.igrid2 .it{aspect-ratio:1}
.ibar{display:flex;justify-content:space-between;align-items:center;margin-top:5px;font:700 12px var(--ui);color:var(--dim)}
.roster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;max-height:230px;overflow:auto}
.rc{position:relative;border-radius:5px;overflow:hidden;background:#1c130c;box-shadow:inset 0 0 0 1px #5a3a20;cursor:pointer;text-align:center;padding-bottom:3px}
.rc img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 15%}.rc b{display:block;font:700 12px var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}.rc em{font:600 11px var(--ui);font-style:normal;color:var(--dim)}
.rc.inp{box-shadow:inset 0 0 0 2px #5fd34a}.rc .tagp{position:absolute;left:3px;top:3px;padding:0 4px;border-radius:3px;font:700 10px var(--ui);background:#2f7a24;color:#fff}
.rc.lock{cursor:default}.rc.lock img{filter:grayscale(1) brightness(.35)}.rc .lk{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);color:#d8b67e}.rc .lk svg{width:22px;height:22px}
/* item card (tooltip) */
.tip2 .tbar{position:relative;margin:-2px -2px 8px;padding:5px 26px 5px 8px;border-radius:4px;font:800 15px var(--ui);color:#06121e;background:linear-gradient(90deg,var(--r),color-mix(in srgb,var(--r) 55%,#fff));text-shadow:0 1px 0 #fff6}
.tip2 .x2{position:absolute;right:4px;top:3px;width:20px;height:20px;border-radius:4px;background:#0006;color:#fff;font-size:11px}
.tip2 .main{font:700 14px var(--ui);color:var(--ink)}.h5{font:700 12px var(--title);letter-spacing:.06em;color:#f0c66a;margin:8px 0 3px}
.ln.aff{color:#c9a6ff;font:600 13px var(--ui)}.sellp{display:flex;align-items:center;gap:5px;margin-top:6px;font:700 13px var(--ui);color:var(--gold-hi)}.sellp .coin{width:13px;height:13px}
.hinfo .hi-top{display:flex;gap:8px;align-items:center}.hinfo img{width:56px;height:56px;border-radius:6px;object-fit:cover;object-position:50% 15%}.hinfo b{display:block;font:800 17px var(--title);color:var(--gold-hi)}.hinfo em{font-style:normal;font:600 12px var(--ui);color:var(--dim)}
.kv{display:grid;grid-template-columns:1fr auto;gap:2px 10px;margin:8px 0;font:600 13px var(--ui);color:var(--dim)}.kv b{color:var(--ink);text-align:right}
/* status */
.stl{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font:600 13px var(--ui);margin-top:6px}.stl b{text-align:right;color:#3a0e04}
.spt2{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font:700 14px var(--ui);color:var(--ink);margin-bottom:6px}.spt2 b{color:#ffe08a;font-size:17px}.spt2 span{font:500 12px var(--body);color:var(--dim)}
.tiers{position:relative;display:flex;flex-direction:column;gap:6px;padding-left:34px}
.tiers::before{content:'';position:absolute;left:14px;top:8px;bottom:8px;width:4px;border-radius:2px;background:linear-gradient(#e0402a,#7a140c)}
.tier{position:relative;display:flex;align-items:center;padding:5px;border-radius:6px;background:linear-gradient(#3a2414,#22150b);box-shadow:inset 0 0 0 1px #6a4a2a}
.tier .tl{position:absolute;left:-32px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:800 12px var(--ui);color:#fff;background:#b8301f;box-shadow:0 0 0 2px #3a0804}
.tier.off{opacity:.45}.tier.off .tl{background:#4a3a2a}
.tn{display:flex;gap:6px;flex-wrap:wrap}
.sn{position:relative;width:52px;height:52px;border-radius:6px;background:#140d08;box-shadow:inset 0 0 0 2px #5a3a20;display:grid;place-items:center;overflow:hidden}
.sn .icon,.sn img{width:40px;height:40px;border-radius:4px}.sn em{position:absolute;right:2px;bottom:1px;font:800 10px var(--ui);font-style:normal;color:#fff;text-shadow:0 1px 2px #000}
.sn.has{box-shadow:inset 0 0 0 2px #f0c66a}.sn:not(:disabled):hover{box-shadow:inset 0 0 0 2px #fff}.sn:disabled{cursor:default}
.sn:not(:disabled)::after{content:'+';position:absolute;left:2px;top:0;font:900 13px var(--ui);color:#5fd34a;text-shadow:0 1px 2px #000}
/* runes */
.rmap{height:min(330px,52vh);overflow:auto;border-radius:4px;background:radial-gradient(circle at 50% 50%,#2a2622,#151210);box-shadow:inset 0 0 0 1px #3a2716;cursor:grab}
.rgrid{position:relative;margin:10px}
.rgrid svg{position:absolute;inset:0}.rgrid line{stroke:#3a3026;stroke-width:4}.rgrid line.av{stroke:#8a6230}.rgrid line.on{stroke:#5fd34a}
.rn{position:absolute;width:46px;height:46px;transform:translate(-50%,-50%);border-radius:5px;background:#120e0b;box-shadow:inset 0 0 0 2px #3a3026,0 0 0 1px #000;display:grid;place-items:center}
.rn img{width:36px;height:36px;border-radius:3px}.rn em{position:absolute;right:-4px;bottom:-6px;padding:0 3px;border-radius:5px;font:800 10px var(--ui);font-style:normal;background:#000;color:#ddd}
.rn.lk img{filter:grayscale(1) brightness(.35)}.rn.av{box-shadow:inset 0 0 0 2px #a8792b,0 0 0 1px #000}.rn.own{box-shadow:inset 0 0 0 2px #5fd34a,0 0 0 1px #000}
.rn.can{animation:rcan 1.2s ease-in-out infinite alternate}@keyframes rcan{to{box-shadow:inset 0 0 0 2px #ffe08a,0 0 12px #ffcf5a}}
.rn.sel{outline:2px solid #fff;outline-offset:2px}.rn.cmd{background:#2a0c08}.rn.cmd.lk{background:#160806}
.rlock{display:flex;align-items:center;gap:8px;margin-bottom:6px;padding:6px 8px;border-radius:4px;background:#3a1a0e;font:700 13px var(--ui);color:#ffcfa0}.rlock svg{width:16px;height:16px}
.rinfo{padding:8px;border-radius:5px;background:linear-gradient(#3a2414,#22150b);box-shadow:inset 0 0 0 1px #6a4a2a;margin-bottom:8px}
.rinfo b{font:800 16px var(--title);color:var(--gold-hi)}.rinfo em{float:right;font-style:normal;font:700 13px var(--ui);color:var(--dim)}.rinfo p{font:500 13px var(--body);color:#d9cfb6;margin:4px 0 6px}.rinfo .btn{width:100%}.rinfo .coin{width:14px;height:14px}
.rtot{display:flex;flex-direction:column;gap:2px;max-height:170px;overflow:auto;margin-bottom:8px;padding:6px;border-radius:4px;background:#d9b981;color:#2a1a0e;font:600 12px var(--ui)}
.rtot div{display:flex;justify-content:space-between;gap:8px}.rtot b{color:#3a0e04}.rtot .note{color:#5a3a20}
/* cube */
.ctop{display:flex;align-items:center;gap:8px;margin-bottom:8px;font:700 13px var(--ui);color:#f0c66a}.ctop .sel2{flex:1;min-width:0}.clv{white-space:nowrap;color:var(--dim)}
.cring{width:230px;height:230px;margin:0 auto;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#3a3530 55%,#22201c 56%,#4a443c 62%,#1a1714 64%);box-shadow:0 0 0 3px #0a0806,0 0 18px #000}
.c9{display:grid;grid-template-columns:repeat(3,46px);gap:4px}.c9 .it{width:46px;height:46px}
.cbtns{justify-content:center}.cbtns .btn{min-width:140px}
/* portal */
.ptop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.atabs{display:flex;gap:4px;margin-bottom:6px}.atabs button{padding:5px 14px;border-radius:4px 4px 0 0;font:700 13px var(--ui);color:#d8b67e;background:linear-gradient(#3a2414,#22150b);box-shadow:inset 0 0 0 1px #6a4a2a}
.atabs button.on{color:#ffe9b8;background:linear-gradient(#c4561f,#7a2a0e)}.atabs button:disabled{opacity:.4}
.pmap{position:relative;height:210px;border-radius:5px;overflow:hidden;background:linear-gradient(#d9b981,#b8905a);box-shadow:inset 0 0 0 2px #5a3a20,inset 0 0 40px #6a4a2288}
.pmap.b-graveyard{background:linear-gradient(#a7a2b0,#6f6880)}.pmap.b-cave{background:linear-gradient(#8a7564,#5a4636)}.pmap.b-forest{background:linear-gradient(#b9c98a,#8aa058)}
.pmt{position:absolute;left:50%;top:6px;transform:translateX(-50%);padding:2px 14px;border-radius:10px;background:#3a2414;color:#ffe9b8;font:700 13px var(--title)}
.pmap svg{position:absolute;inset:0;width:100%;height:100%}.pmap polyline{fill:none;stroke:#5a3a20;stroke-width:.9;stroke-dasharray:2 1.5;vector-effect:non-scaling-stroke}
.mn{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1px}
.mn i{width:18px;height:18px;border-radius:50%;background:#f6ecd8;box-shadow:0 0 0 2px #3a2414}
.mn span{font:800 11px var(--ui);color:#2a1a0e;text-shadow:0 1px 0 #fff8}
.mn.done i{background:#5fd34a}.mn.boss i{width:26px;height:26px;background:#b8301f;box-shadow:0 0 0 2px #3a0804,0 0 10px #ff6a4a}.mn.cur i{box-shadow:0 0 0 3px #ffe08a,0 0 12px #ffcf5a}
.mn:disabled{opacity:.45;cursor:default}.mn.nosoul i{background:#7a5aa0}
.mn .flag{position:absolute;left:8px;top:-20px;width:14px;height:12px;background:#d8301f;clip-path:polygon(0 0,100% 30%,0 60%);box-shadow:none}
.mn .flag::before{content:'';position:absolute;left:0;top:0;width:2px;height:22px;background:#3a1a0e}
/* narrow screens */
#app.narrow .wins{flex-direction:column;align-items:stretch}#app.narrow .tw{width:100%}
#app.narrow .igrid2{grid-template-columns:repeat(7,minmax(0,1fr))}
#app[data-mode=split] .tw{width:100%}
#app[data-mode=land] .w-hero{width:min(800px,100%)}
#app[data-mode=land] .hbody{display:grid;grid-template-columns:320px minmax(0,1fr);gap:10px;align-items:start}
#app[data-mode=land] .hbody .htabs{margin-top:0}
#app[data-mode=land] .igrid2{max-height:236px}
#app[data-mode=land] .roster{max-height:270px}
/* socket materials */
.mat{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:5px;background:#140d08;box-shadow:inset 0 0 0 1px #3a2716}
.mat i{width:24px;height:24px;background:radial-gradient(circle at 35% 30%,#fff9,var(--g) 45%,color-mix(in srgb,var(--g) 50%,#000));filter:drop-shadow(0 0 4px var(--g))}
.mat.k-deco i{clip-path:polygon(50% 0,100% 40%,80% 100%,20% 100%,0 40%)}
.mat.k-engr i{border-radius:3px;clip-path:polygon(15% 0,85% 0,100% 15%,100% 85%,85% 100%,15% 100%,0 85%,0 15%);background:linear-gradient(135deg,#8a8a90,#3a3a40);box-shadow:inset 0 0 0 3px var(--g)}
.mat.k-insc i{width:28px;height:20px;border-radius:3px;background:linear-gradient(90deg,#c9a46a 0 18%,#f0dcb0 18% 82%,#c9a46a 82%);box-shadow:inset 0 -5px 0 var(--g)}
.mat b{position:absolute;right:2px;bottom:0;font:800 10px var(--ui);color:#fff;text-shadow:0 1px 2px #000}
.mat.sm{width:28px;height:28px}.mat.sm i{transform:scale(.75)}
.mgrid{display:flex;flex-wrap:wrap;gap:4px;max-height:236px;overflow:auto;padding:4px;border-radius:4px;background:#0d0806;box-shadow:inset 0 0 0 1px #3a2716;align-content:flex-start}
.sock{display:flex;align-items:center;gap:6px;margin-top:5px;padding:4px 6px;border-radius:5px;background:#1c130c;box-shadow:inset 0 0 0 1px #5a3a20;font:600 12px var(--ui)}
.sk-n{color:#f0c66a;flex:none}.sk-e{color:var(--dim);flex:1}.sk-v{flex:1;color:#9fe8ff}
.sock .btn.mini{margin-left:auto}
.spick{display:flex;flex-direction:column;gap:3px;margin:4px 0 2px;max-height:150px;overflow:auto}
.spick button{display:flex;align-items:center;gap:6px;padding:2px 4px;border-radius:4px;background:#0d0806;text-align:left}.spick button:hover{background:#2a1a0e}.spick em{font-style:normal;font:600 12px var(--ui);color:#d9cfb6}
.sockn{margin-top:4px;font-size:12px}
.htabs{grid-template-columns:1fr 1fr 1fr}

/* bottom bar: one row of round buttons, as in Taskbar Hero */
#nav{display:flex;justify-content:center;align-items:flex-start;gap:clamp(8px,2.2vw,26px);padding:6px 8px 5px;background:linear-gradient(#24170f,#120c08);border-top:2px solid #8a6230;border-bottom:1px solid #000}
#nav .tab{all:unset;position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;min-width:52px}
#nav .rb{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#7a3418,#3a160a 70%);box-shadow:inset 0 0 0 2px #2a0e06,0 0 0 2px #b8893e,0 3px 0 #000;transition:transform .1s}
#nav .rb svg{width:26px;height:26px;fill:#f0c66a;filter:drop-shadow(0 1px 0 #000)}
#nav .tl2{font:700 12px var(--ui);color:#b9a27f;letter-spacing:.02em;white-space:nowrap}
#nav .tab:hover .rb{transform:translateY(-2px)}
#nav .tab[aria-selected=true] .rb{background:radial-gradient(circle at 50% 35%,#d0602a,#7a2a0e 70%);box-shadow:inset 0 0 0 2px #2a0e06,0 0 0 2px #ffe08a,0 0 14px #ffb84a99,0 3px 0 #000}
#nav .tab[aria-selected=true] .rb svg{fill:#fff3cf}
#nav .tab[aria-selected=true] .tl2{color:#ffe08a}
#nav .tab .dot{top:0;right:2px;left:auto}
#nav .tab:focus-visible .rb{outline:2px solid #fff;outline-offset:2px}
#app.narrow #nav{gap:4px;justify-content:space-around}#app.narrow #nav .rb{width:42px;height:42px}#app.narrow #nav .rb svg{width:22px;height:22px}#app.narrow #nav .tl2{font-size:11px}
#app[data-mode=split] #nav .rb{width:36px;height:36px}#app[data-mode=split] #nav .rb svg{width:19px;height:19px}#app[data-mode=split] #nav .tl2{font-size:10px}
#tb-set.on{box-shadow:0 0 0 2px #ffe08a}
/* weapons another class uses */
.it.nouse::after{content:'';position:absolute;right:2px;top:2px;width:15px;height:15px;z-index:3;border-radius:3px;background:#c0281c;box-shadow:0 0 0 1px #000;
  -webkit-mask:linear-gradient(45deg,transparent 42%,#000 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,#000 42% 58%,transparent 58%);mask:linear-gradient(45deg,transparent 42%,#000 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,#000 42% 58%,transparent 58%)}
.it.nouse .ia{opacity:.55}
.wclass{margin-top:6px;padding:4px 6px;border-radius:4px;background:#14321a;font:700 12px var(--ui);color:#8fe08a}.wclass span{display:block;font-weight:600;color:var(--dim)}
.wclass.no{background:#3a1410;color:#ff8a7a}
/* ---------------------------------------------------------------- bottom bar: team on the left, menu in the middle, chests on the right */
#nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;padding:6px 14px 5px}
#nav .navc{display:flex;justify-content:center;align-items:flex-start;gap:clamp(8px,2vw,24px)}
.dock{display:flex;flex-direction:column;gap:3px;min-width:0}#dock-l{align-items:flex-start}#dock-r{align-items:flex-end}
.dkt{font:700 10px var(--ui);letter-spacing:.08em;color:#8a6a42;padding:0 2px}
.dkrow{display:flex;gap:6px;align-items:center}
.dk{position:relative;width:54px;height:54px;border-radius:7px;background:#2a1b10;box-shadow:inset 0 0 0 2px #6a4a2a,0 2px 0 #000;cursor:pointer;overflow:hidden;display:grid;place-items:center;color:#f0c66a}
.dk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%}
.dk em{position:absolute;right:3px;top:2px;font:900 11px var(--ui);font-style:normal;color:#fff;text-shadow:0 1px 2px #000}
.dk .ord,.ps .ord{position:absolute;left:2px;top:2px;z-index:2;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font:900 10px var(--ui);color:#2a1406;background:linear-gradient(#ffe08a,#c88a2a);box-shadow:0 0 0 1px #000}
.dk .bars{position:absolute;left:3px;right:3px;bottom:3px;display:flex;flex-direction:column;gap:2px}
.dk .bars i{display:block;height:5px;border-radius:2px;background:#000a;overflow:hidden}.dk .bars u{display:block;height:100%;width:0}
.dk .hp u{background:linear-gradient(#7af06a,#2f9a24)}.dk .xp{height:3px!important}.dk .xp u{background:#5ab8ff}
.dk.down img{filter:grayscale(1) brightness(.4)}.dk.dep img{filter:grayscale(.7) brightness(.55)}
.dk .dpt,.ps .dpt{position:absolute;left:0;right:0;top:40%;z-index:2;text-align:center;font:900 11px var(--ui);color:#ffe08a;text-shadow:0 1px 2px #000,0 0 6px #000}
.dk.empty b{font:900 22px var(--title,serif)}.dk.lock{cursor:pointer;color:#7a5a36;flex-direction:column}.dk.lock svg{width:16px;height:16px}.dk.lock em{position:static;font-size:10px;color:#6a4a2a;text-shadow:none}
.dk:hover{box-shadow:inset 0 0 0 2px #f0c66a,0 2px 0 #000}
.dbox{all:unset;position:relative;width:54px;height:54px;border-radius:7px;background:#2a1b10;box-shadow:inset 0 0 0 2px #6a4a2a,0 2px 0 #000;display:grid;place-items:center;cursor:pointer}
.dbox em{position:absolute;right:3px;bottom:2px;font:900 12px var(--ui);font-style:normal;color:#fff;text-shadow:0 1px 2px #000}
.dbox:not(.has){opacity:.5}.dbox.has{box-shadow:inset 0 0 0 2px #f0c66a,0 0 10px #ffcf5a66,0 2px 0 #000;animation:dbx 1.4s ease-in-out infinite alternate}@keyframes dbx{to{box-shadow:inset 0 0 0 2px #ffe8a8,0 0 16px #ffcf5aaa,0 2px 0 #000}}
.dpet{all:unset;width:54px;height:54px;border-radius:50%;background:radial-gradient(#3a2716,#1a0f08);box-shadow:inset 0 0 0 2px #4fe0c0,0 2px 0 #000;display:grid;place-items:center;cursor:pointer;overflow:hidden;margin-left:4px}
.dpet img{width:120%;height:120%;object-fit:contain}.dpet.none{box-shadow:inset 0 0 0 2px #4a3a2a;color:#5a4a3a}.dpet.none svg{width:22px;height:22px}
#app.narrow #nav,#app[data-mode=port] #nav,#app[data-mode=split] #nav{display:flex;padding:6px 8px 5px}#app.narrow .dock,#app[data-mode=port] .dock,#app[data-mode=split] .dock{display:none}
#app.narrow #nav .navc,#app[data-mode=port] #nav .navc{flex:1;justify-content:space-around;gap:4px}
@media (max-width:1080px){.dock{display:none}#nav{display:flex}#nav .navc{flex:1}}
/* CSS chest: wood, blue, gold */
.cbox{position:relative;width:64px;height:52px;--b:#7a4a24;--m:#5a5a5a}.cbox.blue{--b:#2a5ab0;--m:#d8b45a}.cbox.gold{--b:#e0a628;--m:#fff0b8}
.cbox .bod{position:absolute;left:0;right:0;bottom:0;height:58%;border-radius:3px 3px 5px 5px;background:linear-gradient(90deg,transparent 18%,var(--m) 18% 26%,transparent 26% 74%,var(--m) 74% 82%,transparent 82%),linear-gradient(var(--b),color-mix(in srgb,var(--b) 55%,#000));box-shadow:inset 0 0 0 2px #0006,0 3px 0 #000}
.cbox .lid{position:absolute;left:0;right:0;top:4%;height:42%;border-radius:40% 40% 3px 3px/80% 80% 3px 3px;background:linear-gradient(90deg,transparent 18%,var(--m) 18% 26%,transparent 26% 74%,var(--m) 74% 82%,transparent 82%),linear-gradient(color-mix(in srgb,var(--b) 80%,#fff),var(--b));box-shadow:inset 0 0 0 2px #0006;transform-origin:50% 0;z-index:2}
.cbox .lk{position:absolute;left:50%;top:38%;width:16%;height:22%;transform:translateX(-50%);border-radius:2px;background:var(--m);box-shadow:0 0 0 1px #000;z-index:3}
.cbox.gold .bod,.cbox.gold .lid{filter:drop-shadow(0 0 6px #ffcf5a)}.cbox.sm{width:38px;height:31px}
.cbox.open{animation:cshake .5s ease-in-out}.cbox.open .lid{animation:copen .35s .45s ease-out forwards}.cbox.open .lk{animation:cfade .2s .45s forwards}
.cbox.open::after{content:'';position:absolute;left:10%;right:10%;bottom:40%;height:160%;background:radial-gradient(ellipse at 50% 100%,#fff6c8,#ffd25a66 40%,transparent 70%);opacity:0;animation:cglow .8s .5s forwards;z-index:1}
@keyframes cshake{0%,100%{transform:none}20%{transform:rotate(-6deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}}
@keyframes copen{to{transform:translateY(-30%) rotate(-28deg)}}@keyframes cfade{to{opacity:0}}@keyframes cglow{to{opacity:1}}
.boxw{display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 4px;min-width:min(420px,86vw)}.boxw .cbox{width:128px;height:104px;margin-top:20px}
.boxn{font:700 16px var(--title,serif);color:#ffe08a}
.boxit{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;min-height:20px}
.boxit>div{display:flex;flex-direction:column;align-items:center;gap:3px;opacity:0;transform:translateY(10px) scale(.8);animation:bitem .35s ease-out forwards}.boxit .it{width:58px;height:58px}.boxit span{font:700 11px var(--ui);max-width:90px;text-align:center}
@keyframes bitem{to{opacity:1;transform:none}}
/* hero formation */
.prow{align-items:center}.swp{all:unset;cursor:pointer;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:900 13px var(--ui);color:#3a2008;background:linear-gradient(#ffe08a,#c88a2a);box-shadow:0 0 0 1px #000,0 2px 0 #000}.swp:hover{filter:brightness(1.15)}.swp0{width:22px}
.ps.dep img{filter:grayscale(.7) brightness(.5)}
.pnote{margin-top:5px;font:600 11px/1.3 var(--ui);color:#6a4a2a;text-align:center}
.fhint{font:600 12px var(--ui);color:var(--dim);margin:0 0 5px}
.rc.shop img{filter:saturate(.5) brightness(.75)}.rc .buy{margin:3px auto 2px;padding:2px 8px;font-size:12px}.rc .buy .coin{width:11px;height:11px}
.rc.own{box-shadow:inset 0 0 0 1px #a8792b}.rc.inp{box-shadow:inset 0 0 0 2px #5fd34a}
/* pets */
.pact{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:8px;background:linear-gradient(90deg,#123a32,#1a120a);box-shadow:inset 0 0 0 1px #4fe0c0}
.pact img{width:64px;height:64px;object-fit:contain}.pact span{display:block;font:600 11px var(--ui);color:#8fd8c8}.pact b{display:block;font:700 16px var(--title,serif);color:#fff}.pact em{font:700 13px var(--ui);font-style:normal;color:#9fe8ff}
.pact.none{background:#1a120a;box-shadow:inset 0 0 0 1px #4a3a2a}.pact.none em{color:var(--dim);font-weight:600}
.pcard img{filter:brightness(.7) saturate(.6)}.pcard.own img,.pcard.on img{filter:drop-shadow(0 2px 4px #000)}.pcard.on{border-color:#4fe0c0;box-shadow:0 0 0 1px #4fe0c0,0 0 14px #4fe0c044}
.pcard .btn{margin-top:4px;padding:3px 10px;font-size:12px}.pcard .btn .coin{width:11px;height:11px}.pon{margin-top:6px;font:800 12px var(--ui)!important;color:#4fe0c0!important}
/* status */
.w-stat{width:min(400px,100%)}.w-skill{width:min(430px,100%)}
.shead{display:flex;align-items:center;gap:10px;margin:8px 0;padding:8px;border-radius:7px;background:linear-gradient(#3a2414,#22150b);box-shadow:inset 0 0 0 1px #6a4a2a}
.smed{position:relative;width:62px;height:62px;flex:none;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px #c8962e,0 0 0 4px #000}.smed img{width:100%;height:100%;object-fit:cover;object-position:50% 14%}
.smed em{position:absolute;left:50%;bottom:0;transform:translateX(-50%);padding:0 6px;border-radius:6px 6px 0 0;font:900 11px var(--ui);font-style:normal;color:#2a1406;background:linear-gradient(#ffe08a,#c88a2a)}
.sinfo{flex:1;min-width:0}.sinfo b{display:block;font:700 16px var(--title,serif);color:#ffe9b8}.sinfo span{font:600 12px var(--ui);color:var(--dim)}.sinfo small{display:block;font:600 11px var(--ui);color:#a88a62;margin-top:2px}.sinfo .xpb2{margin-top:4px}
.spow{text-align:center;padding:4px 8px;border-radius:6px;background:#140d08;box-shadow:inset 0 0 0 1px #8a6230}.spow span{display:block;font:700 10px var(--ui);color:#a88a62}.spow b{font:900 18px var(--ui);color:#ffd24a}
.sgrid{display:flex;flex-direction:column;gap:8px}
.sgrp,.ssrc{padding:6px 8px;border-radius:7px;background:linear-gradient(#e9d6ad,#d7bd8a);color:#3a2008;box-shadow:inset 0 0 0 1px #8a6230}
.sgh{font:800 11px var(--ui);letter-spacing:.06em;color:#8a4a12;margin-bottom:3px}
.srow{display:flex;align-items:center;gap:7px;padding:3px 0;font:600 13px var(--ui);border-top:1px solid #0000001a}.sgh+.srow{border-top:0}
.srow .sic{width:18px;height:18px;flex:none;color:#7a3a10}.srow .sic svg{width:100%;height:100%}.srow span{flex:1}.srow b{font-weight:800;color:#3a0e04}
.ssrc table{width:100%;border-collapse:collapse;font:600 12px var(--ui)}.ssrc th{font:800 11px var(--ui);color:#8a4a12;text-align:right}.ssrc td{padding:2px 0;border-top:1px solid #0000001a}.ssrc td+td{text-align:right;font-weight:800}.ssrc td i{color:#0005;font-style:normal}
.tier{padding:6px 6px 6px 8px}.tier .tl{font-size:11px}.tn{display:flex;gap:6px;flex-wrap:wrap}
.tlock{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:4px;font:700 11px var(--ui);color:#c8a878}.tlock svg{width:13px;height:13px}
.sn2{all:unset;position:relative;width:78px;padding:5px 3px 4px;border-radius:6px;background:#140d08;box-shadow:inset 0 0 0 2px #4a3220;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;text-align:center}
.sn2 .sni{width:34px;height:34px;display:grid;place-items:center;color:#c8a878}.sn2 .sni svg,.sn2 .sni .icon{width:30px;height:30px}.sn2 small{font:700 10px/1.15 var(--ui);color:#d8c098;max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn2 em{font:800 10px var(--ui);font-style:normal;color:#a88a62}.sn2.has{box-shadow:inset 0 0 0 2px #c8962e}.sn2.has .sni{color:#ffd24a}.sn2.has em{color:#ffd24a}
.sn2.sel{box-shadow:inset 0 0 0 2px #fff,0 0 10px #ffe08a66}.sn2.can::after{content:'+';position:absolute;right:4px;top:1px;font:900 14px var(--ui);color:#5fd34a}
.tier.off .sn2{cursor:default}
.skdet{display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px;border-radius:7px;background:#140d08;box-shadow:inset 0 0 0 1px #8a6230}.skdet .sni.big{width:40px;height:40px;color:#ffd24a;display:grid;place-items:center}.skdet .sni.big svg,.skdet .sni.big .icon{width:36px;height:36px}
.skdet div{flex:1}.skdet b{font:700 14px var(--ui);color:#ffe9b8}.skdet p{margin:2px 0 0;font:600 12px var(--ui);color:var(--dim)}
/* runes: carved stones on a circle board */
.rmap2{height:min(380px,54vh);overflow:auto;border-radius:6px;background:radial-gradient(circle at 50% 50%,#2c2620,#14100d 75%);box-shadow:inset 0 0 0 1px #3a2716,inset 0 0 40px #000}
.rgrid .ring{fill:none;stroke:#ffffff0d;stroke-width:1.5;stroke-dasharray:3 7}
.rgrid line{stroke:#2a221b;stroke-width:6;stroke-linecap:round}.rgrid line.av{stroke:#5a4228}.rgrid line.on{stroke:var(--c);filter:drop-shadow(0 0 4px var(--c));stroke-width:4}
.rn2{all:unset;position:absolute;width:58px;height:58px;transform:translate(-50%,-50%);cursor:pointer;display:grid;place-items:center}
.rstone{width:100%;height:100%;overflow:visible}.rstone .st{fill:#2b2621;stroke:#0b0907;stroke-width:2}.rstone .si{fill:#3a342d;stroke:#1a1612;stroke-width:1}
.rstone .gl{fill:none;stroke:#141210;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.rn2.av .rstone .st{stroke:#8a6230}.rn2.av .rstone .gl{stroke:color-mix(in srgb,var(--c) 45%,#3a3029)}
.rn2.own .rstone .st,.rstone.lit .st{fill:color-mix(in srgb,var(--c) 22%,#221c17);stroke:var(--c)}.rn2.own .rstone .si,.rstone.lit .si{fill:color-mix(in srgb,var(--c) 14%,#2e2822)}
.rn2.own .rstone .gl,.rstone.lit .gl{stroke:var(--c);filter:drop-shadow(0 0 3px var(--c)) drop-shadow(0 0 6px var(--c))}
.rn2.max .rstone .st{stroke:#ffe08a;stroke-width:3}.rn2.lk{opacity:.75}
.rn2.can{animation:rcan2 1.1s ease-in-out infinite alternate}@keyframes rcan2{to{filter:drop-shadow(0 0 8px #ffcf5a)}}
.rn2.sel::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px dashed #fff8;animation:rspin 6s linear infinite}@keyframes rspin{to{transform:rotate(360deg)}}
.rn2:hover .rstone{transform:scale(1.07)}.rstone{transition:transform .12s}
.rpips{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);display:flex;gap:2px;padding:2px 3px;border-radius:5px;background:#000c}.rpips i{width:5px;height:5px;border-radius:50%;background:#3a3029}.rpips i.on{background:var(--c);box-shadow:0 0 3px var(--c)}
.rlv{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);padding:0 4px;border-radius:5px;font:800 10px var(--ui);background:#000c;color:#ddd}.rn2.own .rlv{color:var(--c)}
.rinfo2{display:flex;align-items:center;gap:10px}.rinfo2 .rstone{width:58px;height:58px;flex:none}.rinfo2 b{display:block;font:700 16px var(--title,serif);color:#ffe9b8}.rinfo2 em{font:600 12px var(--ui);font-style:normal;color:var(--c)}
.reff{display:flex;gap:8px;margin:10px 0}.reff div{flex:1;padding:6px 8px;border-radius:6px;background:#140d08;box-shadow:inset 0 0 0 1px #4a3220}.reff span{display:block;font:700 10px var(--ui);color:#a88a62}.reff b{font:800 13px var(--ui);color:#e8d8b8}.reff b.nx{color:#7af06a}
.rdone{font:800 13px var(--ui);color:#ffe08a;text-align:center;padding:6px}.w-rtot #rbuy{width:100%}
.rtot2{display:flex;flex-direction:column;gap:2px;max-height:180px;overflow:auto;margin-bottom:8px}.rtot2 div{display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:4px;background:#ffffff08;font:600 12px var(--ui)}.rtot2 i{width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:var(--c);box-shadow:0 0 4px var(--c)}.rtot2 span{flex:1;color:#d8c098}.rtot2 b{color:var(--c)}
.w-runes{width:min(800px,100%)}
/* the panel area: a carved backdrop instead of empty black */
#panel{background:radial-gradient(ellipse at 50% 0%,#2a1a0f 0%,transparent 60%),repeating-linear-gradient(90deg,#00000000 0 46px,#0000002a 46px 48px),linear-gradient(#1c120b,#0d0806)}
/* chest pictures rendered from the 3D chest */
.cbx{position:relative;width:64px;height:56px}.cbx img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px #000a)}.cbx .c1{opacity:0}
.cbx.sm{width:44px;height:40px}.cbx.gold img{filter:drop-shadow(0 0 6px #ffcf5a88) drop-shadow(0 3px 3px #000a)}
.boxw .cbx{width:170px;height:150px;margin-top:10px}
.cbx.open{animation:cshake .5s ease-in-out}.cbx.open .c0{animation:cfade .12s .48s forwards}.cbx.open .c1{animation:cshow .12s .48s forwards}
.cbx.open::before{content:'';position:absolute;left:-10%;right:-10%;top:-30%;bottom:10%;background:radial-gradient(ellipse at 50% 70%,#fff6c8cc,#ffd25a55 35%,transparent 65%);opacity:0;animation:cglow .6s .5s forwards}
@keyframes cshow{to{opacity:1}}
/* portal: difficulty tabs, three act cards, the act map, the stage card */
.w-portal{width:min(780px,100%)}.w-stage{width:min(320px,100%)}
.ptop2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}.ptop2 .soul{margin-left:auto}
.dtabs{display:flex;gap:4px}.dtabs button{all:unset;cursor:pointer;display:flex;align-items:center;gap:4px;padding:5px 12px;border-radius:5px;font:700 13px var(--ui);color:#c8a878;background:#1c130c;box-shadow:inset 0 0 0 1px #5a3a20}
.dtabs button.on{color:#2a1406;background:linear-gradient(#ffe08a,#c88a2a);box-shadow:0 0 0 1px #000}.dtabs button:disabled{opacity:.45;cursor:default}.dtabs svg{width:12px;height:12px}
.acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:8px}
.act{all:unset;position:relative;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:8px 10px;min-height:104px;border-radius:7px;background-size:cover;background-position:center;box-shadow:inset 0 0 0 2px #4a3220}
.act .an{font:700 11px var(--ui);color:#e8c27a}.act b{font:700 17px var(--title,serif);color:#fff;text-shadow:0 2px 4px #000}.act .ar{font:600 11px var(--ui);color:#d8c8a8}
.act .am{display:flex;gap:2px;margin-top:auto}.act .am img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 1px 2px #000)}
.act .as{position:absolute;right:8px;top:8px;display:flex;align-items:center;gap:3px;padding:1px 7px;border-radius:9px;font:800 11px var(--ui);background:#000a;color:#d8c8a8}.act .as svg{width:11px;height:11px}
.act .as.ok{color:#7af06a}.act .as.cur{color:#2a1406;background:#ffd24a}
.act.on{box-shadow:inset 0 0 0 2px #ffe08a,0 0 12px #ffcf5a55}.act.lk{cursor:default;filter:grayscale(.8) brightness(.6)}.act:not(.lk):not(.on):hover{box-shadow:inset 0 0 0 2px #a8792b}
.pmap2{position:relative;height:250px;border-radius:7px;background-size:cover;background-position:center;box-shadow:inset 0 0 0 2px #4a3220;overflow:hidden}
.pmt2{position:absolute;left:10px;top:8px;font:700 14px var(--title,serif);color:#ffe9b8;text-shadow:0 2px 4px #000}
.pmap2 svg{position:absolute;inset:0;width:100%;height:100%}.pmap2 .pbg{fill:none;stroke:#0009;stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-dasharray:0}.pmap2 polyline{fill:none;vector-effect:non-scaling-stroke}
.pmap2 .pbg{stroke:#f0d8a866;stroke-width:4;stroke-dasharray:2 8;stroke-linecap:round}.pmap2 .pon{stroke:#ffd24a;stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 3px #ffcf5a)}
.mn2{all:unset;position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:radial-gradient(#5a3a20,#2a1a0c);box-shadow:0 0 0 2px #c8962e,0 3px 6px #000}
.mn2 i{font:900 13px var(--ui);font-style:normal;color:#ffe9b8}.mn2.done{background:radial-gradient(#3a6a2a,#1a3a12);box-shadow:0 0 0 2px #7af06a,0 3px 6px #000}
.mn2.boss{width:58px;height:58px;background:radial-gradient(#7a1a10,#2a0806);box-shadow:0 0 0 3px #ff6a3d,0 0 14px #ff6a3d88}.mn2.boss img{width:120%;height:120%;object-fit:contain;margin-top:-10%}
.mn2:disabled{cursor:default;filter:grayscale(1) brightness(.55)}.mn2 u{position:absolute;inset:0;display:grid;place-items:center;color:#ddd}.mn2 u svg{width:14px;height:14px}.mn2.boss:disabled img{opacity:.5}
.mn2.sel{outline:3px solid #fff;outline-offset:3px}.mn2 .me{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-4px);width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 14%;box-shadow:0 0 0 2px #ffd24a,0 2px 4px #000}
.plegend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font:600 11px var(--ui);color:var(--dim)}.plegend span{display:flex;align-items:center;gap:5px}
.lg{width:12px;height:12px;border-radius:50%;display:inline-block}.lg.n{background:#5a3a20;box-shadow:0 0 0 2px #c8962e}.lg.b{background:#7a1a10;box-shadow:0 0 0 2px #ff6a3d}.lg.c{background:#ffd24a}
.scard{display:flex;flex-direction:column;gap:6px}.sch b{display:block;font:700 17px var(--title,serif);color:#ffe9b8}.sch em{font:600 12px var(--ui);font-style:normal;color:var(--dim)}
.spw{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;padding:8px;border-radius:7px;background:#140d08;box-shadow:inset 0 0 0 1px #4a3220}.spw span{display:block;font:700 10px var(--ui);color:#a88a62}.spw b{font:900 16px var(--ui);color:#e8d8b8}
.spw .sbar{grid-column:1/-1;position:relative;height:8px;border-radius:4px;background:#000;overflow:visible}.spw .sbar i{display:block;height:100%;border-radius:4px}.spw .sbar u{position:absolute;top:-3px;bottom:-3px;width:2px;background:#fff}
.spw p{grid-column:1/-1;margin:0;font:800 12px var(--ui)}.spw.ok .sbar i{background:#5fd34a}.spw.ok p{color:#7af06a}.spw.mid .sbar i{background:#ffc23a}.spw.mid p{color:#ffd24a}.spw.bad .sbar i{background:#ff5a3d}.spw.bad p{color:#ff8a7a}
.smons{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.smons div{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 2px;border-radius:5px;background:#ffffff08}.smons img{width:46px;height:46px;object-fit:contain}.smons span{font:600 10px/1.15 var(--ui);color:#d8c098}
.sboss{display:flex;align-items:center;gap:8px;padding:6px;border-radius:6px;background:linear-gradient(90deg,#3a0e08,#1a0c06);box-shadow:inset 0 0 0 1px #8a2a18}.sboss img{width:58px;height:58px;object-fit:contain;flex:none}.sboss img.elite{filter:drop-shadow(0 0 5px #ffb040)}
.sboss b{display:block;font:700 14px var(--ui);color:#ffb59a}.sboss span{font:600 11px/1.3 var(--ui);color:#d8c098}
.srew{display:flex;flex-wrap:wrap;gap:4px 10px;font:600 12px var(--ui);color:#d8c098;align-items:center}.srew span{display:flex;align-items:center;gap:4px}.srew .coin{width:13px;height:13px}.srew .cbx.sm{width:28px;height:24px}
.scard #pgo{margin-top:4px;width:100%}
#app.narrow .acts{grid-template-columns:1fr}#app.narrow .act{min-height:80px}
/* first-time clarity: the next-step card, the one-line help on each window, a pulse on the menu that the next step needs */
.goal{all:unset;position:absolute;right:10px;bottom:10px;z-index:6;display:flex;align-items:center;gap:10px;max-width:min(340px,70%);padding:8px 14px 8px 8px;border-radius:10px;cursor:pointer;
  background:linear-gradient(180deg,#2e1d10f0,#1a1009f0);box-shadow:0 0 0 2px #c8962e,0 6px 16px #000a;pointer-events:auto}
.goal:hover{box-shadow:0 0 0 2px #ffe08a,0 0 14px #ffcf5a66,0 6px 16px #000a}.goal:focus-visible{outline:2px solid #fff;outline-offset:3px}
.goal .gi{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;color:#2a1406;background:radial-gradient(circle at 50% 35%,#ffe8a8,#d39a2c)}.goal .gi svg{width:24px;height:24px}
.goal .gt{display:flex;flex-direction:column;min-width:0}.goal small{font:800 10px var(--ui);letter-spacing:.06em;color:#e8a840}.goal b{font:800 14px/1.2 var(--ui);color:#fff}.goal em{font:600 12px/1.25 var(--ui);font-style:normal;color:#d8c098}
.goal .gp{display:block;margin-top:4px;height:4px;border-radius:2px;background:#000;overflow:hidden}.goal .gp u{display:block;height:100%;background:linear-gradient(90deg,#c88a2a,#ffe08a)}
.goal.pop{animation:gpop .5s ease-out}@keyframes gpop{0%{transform:scale(.92);opacity:.4}60%{transform:scale(1.03)}100%{transform:none;opacity:1}}
#nav .tab.hint .rb{animation:thint 1.1s ease-in-out infinite alternate}@keyframes thint{to{box-shadow:inset 0 0 0 2px #2a0e06,0 0 0 3px #ffe08a,0 0 18px #ffcf5acc,0 3px 0 #000}}
.helpbar{display:flex;align-items:center;gap:12px;max-width:1080px;margin:0 auto 10px;padding:8px 12px;border-radius:8px;background:#2a2014;box-shadow:inset 0 0 0 1px #8a6230;font:600 13px/1.35 var(--ui);color:#e8d8b8}
.helpbar span{flex:1}.helpbar button{all:unset;cursor:pointer;padding:4px 12px;border-radius:5px;font:800 12px var(--ui);color:#2a1406;background:linear-gradient(#ffe08a,#c88a2a)}
#app[data-mode=land]:not(.narrow) .stage-head .chests{display:none}
.feed div:nth-child(n+5){display:none}
#app.narrow .goal{left:50%;right:auto;transform:translateX(-50%);bottom:6px;max-width:92%}#app.narrow .goal.pop{animation:none}
#nav .tl2{font-size:12px;color:#d8c098}
#app[data-mode=split] .goal,#app[data-mode=port] .goal{left:8px;right:auto;bottom:8px;max-width:min(250px,58%);padding:5px 10px 5px 5px;gap:7px}
#app[data-mode=split] .goal .gi,#app[data-mode=port] .goal .gi{width:30px;height:30px}#app[data-mode=split] .goal .gi svg{width:18px;height:18px}
#app[data-mode=split] .goal b,#app[data-mode=port] .goal b{font-size:12px}#app[data-mode=split] .goal em,#app[data-mode=port] .goal em{font-size:11px}#app[data-mode=split] .goal small,#app[data-mode=port] .goal small{display:none}
#app[data-mode=split] .goal{transform:none!important}

.cbx.gold img{filter:saturate(1.7) sepia(.25) drop-shadow(0 0 6px #ffcf5a88) drop-shadow(0 3px 3px #000a)}
.pact .ptot{display:flex;flex-wrap:wrap;gap:2px 10px}.pcard .pbar{width:100%;height:5px;border-radius:3px;background:#000;overflow:hidden;margin-top:4px}.pcard .pbar i{display:block;height:100%;background:linear-gradient(90deg,#2a9a8a,#4fe0c0)}
/* wide screens: the windows use the whole width (main window grows, side card stays a readable width), nothing floats in empty space */
#app[data-mode=land]:not(.narrow) .wins{flex-wrap:nowrap;align-items:stretch;width:100%;max-width:1800px;margin:0 auto}
#app[data-mode=land]:not(.narrow) .wins>.tw{width:auto;max-width:none;min-width:0}
#app[data-mode=land]:not(.narrow) .wins>.tw:first-child{flex:1 1 0}
#app[data-mode=land]:not(.narrow) .wins>.tw:nth-child(2){flex:0 0 clamp(300px,24%,400px)}
#app[data-mode=land]:not(.narrow) .wins:has(.w-skill)>.tw,#app[data-mode=land]:not(.narrow) .wins:has(.w-chest)>.tw{flex:1 1 0}
#app[data-mode=land]:not(.narrow) .hbody{grid-template-columns:minmax(300px,380px) minmax(0,1fr)}
#app[data-mode=land]:not(.narrow) .igrid2{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));max-height:min(46vh,420px)}
#app[data-mode=land]:not(.narrow) .roster{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));max-height:min(46vh,420px)}
#app[data-mode=land]:not(.narrow) .rmap2{height:min(50vh,460px)}
#app[data-mode=land]:not(.narrow) .pmap2{height:min(34vh,320px)}
#app[data-mode=land]:not(.narrow) .pgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
#app[data-mode=land]:not(.narrow) .helpbar{max-width:1800px}
#app[data-mode=land]:not(.narrow) .sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}#app[data-mode=land]:not(.narrow) .tn{flex-wrap:nowrap}#app[data-mode=land]:not(.narrow) .sn2{width:auto;flex:1 1 0;max-width:180px}
/* the panel never scrolls on wide screens: windows take the panel height, long lists scroll inside themselves */
#app[data-mode=land]:not(.narrow) #panel-body{overflow:hidden;display:flex;flex-direction:column;padding:6px 10px}
#app[data-mode=land]:not(.narrow) #panel-body>.helpbar{flex:none;margin-bottom:6px;padding:5px 10px}
#app[data-mode=land]:not(.narrow) #panel-body>.wins{flex:1;min-height:0}
#app[data-mode=land]:not(.narrow) .wins>.tw{display:flex;flex-direction:column;min-height:0;max-height:100%;padding-top:26px}
#app[data-mode=land]:not(.narrow) .tw-body{flex:1;min-height:0;overflow:auto;scrollbar-width:thin}
#app[data-mode=land]:not(.narrow) .igrid2,#app[data-mode=land]:not(.narrow) .roster{max-height:none}
#app[data-mode=land]:not(.narrow) .hbody{height:100%;min-height:0}#app[data-mode=land]:not(.narrow) .hright{display:flex;flex-direction:column;min-height:0;height:100%}
#app[data-mode=land]:not(.narrow) .hright .igrid2,#app[data-mode=land]:not(.narrow) .hright .roster,#app[data-mode=land]:not(.narrow) .hright .mgrid{flex:1;min-height:0;overflow:auto}
#app[data-mode=land]:not(.narrow) .rmap2{height:100%;min-height:200px}
#app[data-mode=land]:not(.narrow) .w-runes .tw-body{display:flex;flex-direction:column;overflow:hidden}#app[data-mode=land]:not(.narrow) .w-runes .rmap2{flex:1}
/* ---------------------------------------------------------------- MMORPG action bar: dark iron plate, gold rails, square bevelled sockets */
#nav{position:relative;padding:9px 18px 7px;background:
  radial-gradient(ellipse at 50% -40%,#5a3a1a55,transparent 60%),
  repeating-linear-gradient(90deg,#ffffff05 0 2px,transparent 2px 7px),
  linear-gradient(#2c2620,#17130f 55%,#0d0a08);
  border-top:0;border-bottom:0;box-shadow:inset 0 3px 0 #0a0806,inset 0 4px 0 #c8962e,inset 0 6px 0 #0a0806,inset 0 7px 0 #5a4020,inset 0 -2px 0 #000,0 -4px 14px #000a}
#nav::before,#nav::after{content:'';position:absolute;top:-9px;width:18px;height:18px;transform:rotate(45deg);background:linear-gradient(135deg,#ffe8a0,#c8902e 45%,#5a3a10);box-shadow:0 0 0 2px #0a0806,0 0 10px #ffb84a66;z-index:3}
#nav::before{left:calc(50% - 9px)}#nav::after{display:none}
#nav .navc{position:relative;gap:6px;padding:4px 14px;border-radius:6px;background:linear-gradient(#0e0b08,#1a140f);box-shadow:inset 0 2px 6px #000,0 0 0 1px #000,0 0 0 2px #6a4a20,0 0 0 3px #000}
#nav .tab{gap:2px;min-width:64px}
#nav .rb{width:50px;height:50px;border-radius:7px;background:radial-gradient(circle at 50% 30%,#4a2c16,#1a0e07 75%);
  box-shadow:inset 0 0 0 2px #000,inset 0 0 0 4px #a8782c,inset 0 0 0 5px #3a2610,inset 0 6px 10px #0008,0 2px 0 #000}
#nav .rb svg{width:26px;height:26px;fill:#e8c27a;filter:drop-shadow(0 2px 0 #000)}
#nav .tab:hover .rb{transform:none;box-shadow:inset 0 0 0 2px #000,inset 0 0 0 4px #ffe08a,inset 0 0 0 5px #3a2610,inset 0 6px 10px #0008,0 0 10px #ffcf5a55}
#nav .tab[aria-selected=true] .rb{background:radial-gradient(circle at 50% 35%,#c86a24,#5a200a 75%);box-shadow:inset 0 0 0 2px #000,inset 0 0 0 4px #ffe08a,inset 0 0 0 5px #6a3a10,inset 0 0 14px #ffb84a88,0 0 14px #ffb84a88}
#nav .tab[aria-selected=true] .rb svg{fill:#fff6d8}
#nav .tl2{font:800 11px var(--ui);letter-spacing:.04em;color:#c8a878;text-shadow:0 1px 0 #000}#nav .tab[aria-selected=true] .tl2{color:#ffe08a}
#nav .tab.hint .rb{animation:thint2 1.1s ease-in-out infinite alternate}@keyframes thint2{to{box-shadow:inset 0 0 0 2px #000,inset 0 0 0 4px #ffe08a,inset 0 0 0 5px #3a2610,0 0 18px #ffcf5acc}}
/* side docks: same sockets on a recessed plate with a title tab */
.dock{padding:4px 8px 5px;border-radius:6px;background:linear-gradient(#0e0b08,#1a140f);box-shadow:inset 0 2px 6px #000,0 0 0 1px #000,0 0 0 2px #5a4020,0 0 0 3px #000;position:relative}
.dkt{position:absolute;top:-9px;left:10px;padding:0 8px;border-radius:3px;font:800 9px var(--ui);letter-spacing:.12em;color:#ffe08a;background:linear-gradient(#5a1a0e,#2a0a04);box-shadow:0 0 0 1px #000,0 0 0 2px #8a6230}
#dock-r .dkt{left:auto;right:10px}
.dk,.dbox{border-radius:6px;background:radial-gradient(circle at 50% 30%,#3a2616,#120a05 75%);box-shadow:inset 0 0 0 2px #000,inset 0 0 0 3px #8a6230,inset 0 0 0 4px #2a1a0a,0 2px 0 #000}
.dk:hover,.dbox:hover{box-shadow:inset 0 0 0 2px #000,inset 0 0 0 3px #ffe08a,inset 0 0 0 4px #2a1a0a,0 0 10px #ffcf5a55}
.dbox.has{box-shadow:inset 0 0 0 2px #000,inset 0 0 0 3px #ffe08a,inset 0 0 0 4px #2a1a0a,0 0 12px #ffcf5a77;animation:none}
.dpet{box-shadow:inset 0 0 0 2px #000,inset 0 0 0 3px #4fe0c0,0 2px 0 #000}
/* windows: iron frame with gold rivets in the corners */
.tw{background:linear-gradient(#221a12,#120d09);border:2px solid #000;box-shadow:inset 0 0 0 2px #6a4a20,inset 0 0 0 3px #000,inset 0 0 0 5px #3a2a18,inset 0 0 0 6px #a8782c55,0 8px 20px #000c}
.tw::before,.tw::after{content:'';position:absolute;top:6px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff0b8,#c8902e 50%,#3a2008);box-shadow:0 0 0 1px #000}
.tw::before{left:6px}.tw::after{right:6px}
#panel{background:radial-gradient(ellipse at 50% 0%,#2a1c10 0%,transparent 55%),repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 4px),linear-gradient(#15100b,#0a0705)}
#nav{grid-template-columns:1fr auto 1fr}#dock-l{justify-self:start}#dock-r{justify-self:end}.dock{width:max-content}
/* Taskbar Hero style skill tree: actives, slots */
.sn2.act{background:linear-gradient(#2a1a10,#140d08);box-shadow:inset 0 0 0 2px #8a4a20}.sn2.act .sni .icon{width:34px;height:34px;border-radius:5px}.sn2.act:not(.has) .sni{filter:grayscale(.85) brightness(.6)}
.sn2.act.has{box-shadow:inset 0 0 0 2px #ff9a3c}.sn2.ult.has{box-shadow:inset 0 0 0 2px #ff5ad5}.sn2.eq{box-shadow:inset 0 0 0 2px #7af06a,0 0 10px #7af06a55}
.sn2 .atag{position:absolute;left:3px;top:2px;font:900 8px var(--ui);font-style:normal;letter-spacing:.06em;color:#2a1406;background:#ff9a3c;border-radius:3px;padding:0 3px}.sn2.ult .atag{background:#ff5ad5}
.skslots{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 8px;padding:6px 8px;border-radius:7px;background:#140d08;box-shadow:inset 0 0 0 1px #8a6230}.skslots .sgh{margin:0}
.skslots>div{display:flex;gap:6px}.ss{position:relative;width:44px;height:44px;border-radius:7px;display:grid;place-items:center;color:#8a6a42;font:900 18px var(--ui);background:radial-gradient(#2a1a10,#0d0805);box-shadow:inset 0 0 0 2px #000,inset 0 0 0 3px #8a6230;cursor:pointer}
.ss .icon{width:38px;height:38px;border-radius:5px}.ss em{position:absolute;right:2px;bottom:0;font:900 10px var(--ui);font-style:normal;color:#fff;text-shadow:0 1px 2px #000}.ss.on{box-shadow:inset 0 0 0 2px #000,inset 0 0 0 3px #7af06a}
.ss.ult{margin-left:10px;box-shadow:inset 0 0 0 2px #000,inset 0 0 0 3px #ff5ad5}.ss.ult:not(.on) .icon{filter:grayscale(1) brightness(.4)}.ss.lock{cursor:default;flex-direction:column;font-size:9px}.ss.lock svg{width:14px;height:14px}.ss.lock em{position:static;color:#6a4a2a;text-shadow:none}
.skk{font:700 11px var(--ui);font-style:normal;color:#e8a840}.skl2{color:#7af06a!important;font-weight:700!important}.skbtns{display:flex;flex-direction:column;gap:4px}.skl.off{opacity:.5}
/* ================================================================ DARK FANTASY THEME (Diablo / Warcraft): carved stone, gilded iron frames, gothic titles
   textures: assets/ui/stone.webp, leather.webp (made from Poly Haven CC0 textures), frame.svg and plaque.svg drawn for the game */
:root{--stone:url(assets/ui/stone.webp);--leather:url(assets/ui/leather.webp);--gilt:linear-gradient(180deg,#f6dc96,#b8862e 35%,#5a3a12 70%,#c8963e)}
/* backgrounds */
#topbar{background:linear-gradient(#0008,#000a),var(--stone) 0 0/256px;border-bottom:0;box-shadow:inset 0 -3px 0 #0a0604,inset 0 -5px 0 #b8862e,inset 0 -6px 0 #0a0604,0 4px 12px #000}
#panel{background:linear-gradient(#000a,#000c),var(--stone) 0 0/300px}
#nav{background:linear-gradient(#0007,#000a),var(--stone) 0 0/256px}
/* windows: gilded iron frame with ruby corners over dark stone */
.tw{background:linear-gradient(#0000004d,#000000a0),var(--stone) 0 0/260px;border:20px solid transparent;border-image:url(assets/ui/frame.svg) 30 fill stretch;border-radius:0;box-shadow:0 10px 24px #000d;padding:24px 8px 6px}
.tw::before,.tw::after{display:none}
.tw-head{top:-12px;height:34px;padding:0 34px;background:url(assets/ui/plaque.svg) center/100% 100% no-repeat;border:0;box-shadow:none;filter:drop-shadow(0 3px 4px #000)}
.tw-head span{font:700 15px var(--deco);letter-spacing:.12em;background:linear-gradient(#fff4c8,#e0b050 55%,#8a5a14);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 1px 0 #000)}
.tw-head i{width:6px;height:6px;background:#c0141c;box-shadow:0 0 0 1px #f0cc78,0 0 6px #ff3020}
#app[data-mode=land]:not(.narrow) .wins>.tw{padding-top:22px}
/* inner panels: dark leather and stone instead of light parchment */
.parch,.sgrp,.ssrc{background:linear-gradient(#0006,#000a),var(--leather) 0 0/220px;color:#e0cfa8;box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #5a4020,inset 0 0 20px #000c;border-radius:3px}
.sgrp .srow,.ssrc td{border-color:#ffffff12}.srow b,.ssrc td+td{color:#f6dc96}.srow .sic{color:#c8963e}.sgh{color:#e0a848;font-family:var(--title);letter-spacing:.08em}
.pnote{color:#a88a62}.dlv b{color:#f6dc96}
.shead,.spow,.skdet,.skslots,.tier,.reff div,.rinfo2,.pact,.scard .spw,.sboss{background:linear-gradient(#0008,#000b),var(--stone) 0 0/200px;box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #4a3218}
/* sockets: equipment, inventory, skills, team */
.eq,.igrid2 .cell,.c9 .cell,.ss,.dk,.dbox{background:radial-gradient(circle at 50% 40%,#1e1712,#070504 80%);border-radius:3px;box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #6a4a1e,inset 0 0 0 3px #1a1006,inset 0 4px 10px #000}
.igrid2{background:#050302;box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #4a3218}
.it{border-radius:3px}
.eq:hover,.dk:hover,.dbox:hover,.ss:hover{box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #f6dc96,inset 0 0 0 3px #1a1006,0 0 10px #ffcf5a55}
.dock{background:linear-gradient(#0009,#000b),var(--stone) 0 0/200px;border-radius:3px;box-shadow:0 0 0 1px #000,0 0 0 3px #8a6224,0 0 0 4px #000,0 4px 10px #000}
.dkt,.dkt{font-family:var(--title);background:linear-gradient(#5a0a08,#2a0404);color:#f6dc96;box-shadow:0 0 0 1px #000,0 0 0 2px #b8862e}
/* action bar: carved stone sockets with gilded rims */
#nav .navc{background:linear-gradient(#0009,#000c),var(--stone) 0 0/200px;border-radius:3px;box-shadow:0 0 0 1px #000,0 0 0 3px #8a6224,0 0 0 4px #000,0 4px 10px #000}
#nav .rb{border-radius:4px;background:radial-gradient(circle at 50% 35%,#3a2a1c,#0a0604 80%);box-shadow:inset 0 0 0 1px #000,inset 0 0 0 3px #b8862e,inset 0 0 0 4px #2a1a08,inset 0 6px 12px #000c,0 2px 0 #000}
#nav .rb svg{fill:#d8b070}
#nav .tab[aria-selected=true] .rb{background:radial-gradient(circle at 50% 40%,#8a1a10,#2a0404 80%);box-shadow:inset 0 0 0 1px #000,inset 0 0 0 3px #f6dc96,inset 0 0 0 4px #4a1006,inset 0 0 16px #ff4a2088,0 0 14px #ff6a3077}
#nav .tl2{font-family:var(--title);font-size:10px;letter-spacing:.06em;color:#b89a6a}#nav .tab[aria-selected=true] .tl2{color:#f6dc96}
#nav::before{background:radial-gradient(circle at 40% 35%,#ffb0a0,#c0141c 45%,#3a0206);border-radius:50%;transform:none;box-shadow:0 0 0 2px #f0cc78,0 0 0 4px #000,0 0 12px #ff3020aa}
/* buttons: gilded and blood red */
.btn{border-radius:2px;font-family:var(--title);font-weight:700;letter-spacing:.04em;color:#fff0c8;background:linear-gradient(#a8241a,#5a0a06 60%,#3a0404);box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #e0b050,inset 0 0 0 3px #3a0404,inset 0 8px 10px #ffffff18,0 2px 4px #000;text-shadow:0 1px 0 #000}
.btn:hover:not(:disabled){filter:brightness(1.18)}
.btn.dark{color:#e0cfa8;background:linear-gradient(#3a2e24,#1a120c);box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #8a6224,inset 0 0 0 3px #1a120c,0 2px 4px #000}
.btn.blue{color:#e8f6ff;background:linear-gradient(#2a5a8a,#0a2240);box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #b8d0e8,inset 0 0 0 3px #0a2240,0 2px 4px #000}
.btn:disabled{filter:grayscale(.8) brightness(.6)}
.htabs button{border-radius:2px;font-family:var(--title);font-size:13px;letter-spacing:.06em;color:#c8a878;background:linear-gradient(#2a2018,#120c08);box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #5a4020}
.htabs button.on{color:#fff0c8;background:linear-gradient(#7a1a10,#3a0604);box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #e0b050}
.dtabs button,.atabs button{border-radius:2px;font-family:var(--title)}
/* help strip, next-step card, top pills */
.helpbar{border-radius:2px;background:linear-gradient(#0008,#000b),var(--leather) 0 0/200px;box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #8a6224;color:#e0cfa8}
.helpbar button{border-radius:2px;font-family:var(--title)}
.goal{border-radius:3px;background:linear-gradient(#000a,#000d),var(--stone) 0 0/200px;box-shadow:0 0 0 1px #000,0 0 0 3px #b8862e,0 0 0 4px #000,0 6px 16px #000c}
.goal .gi{border-radius:3px;background:radial-gradient(circle at 50% 35%,#ffe8a0,#b8862e 60%,#5a3a12);box-shadow:0 0 0 1px #000}
.goal b{font-family:var(--title);letter-spacing:.02em}
.pill{border-radius:3px;background:linear-gradient(#000,#1a120c);border:0;box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #8a6224}
.iconbtn{border-radius:3px!important}
/* tooltip card and item names in gothic type */
.tip2 .tbar{border-radius:2px;font-family:var(--title);letter-spacing:.03em;background:linear-gradient(90deg,color-mix(in srgb,var(--r) 45%,#000),#0a0604);color:#fff;box-shadow:inset 0 0 0 1px var(--r)}
.hinfo b,.sinfo b,.rinfo2 b,.sch b,.boxn{font-family:var(--title)}
.tier .tl{background:radial-gradient(circle at 40% 35%,#ff8a70,#a8141a 50%,#3a0206);box-shadow:0 0 0 2px #f0cc78,0 0 0 3px #000}
.tiers::before{background:linear-gradient(#b8862e,#5a3a12)}
.sn2{border-radius:3px;background:radial-gradient(circle at 50% 35%,#1e1712,#070504 80%);box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #5a4020}
.sn2{align-self:flex-start}
/* ---------------------------------------------------------------- Aldenhorn logo: breathing glow, a light sweep over the gold, pulsing sapphires, rising embers */
.alogo{position:relative;width:min(520px,78vw);aspect-ratio:900/885;margin:0 auto;animation:alIn 1.4s cubic-bezier(.2,.8,.2,1) both}
.brand.small .alogo{width:min(300px,52vw)}
.alogo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:alBreath 4s ease-in-out infinite}
.alogo .shine,.tbrand .shine{position:absolute;inset:0;pointer-events:none;-webkit-mask:var(--lm) center/contain no-repeat;mask:var(--lm) center/contain no-repeat;
  background:linear-gradient(105deg,transparent 40%,rgba(255,250,220,.0) 44%,rgba(255,250,220,.75) 50%,rgba(255,250,220,0) 56%,transparent 60%) -150% 0/250% 100% no-repeat;mix-blend-mode:screen;animation:alShine 5s ease-in-out infinite 1.2s}
.alogo{--lm:url(assets/ui/aldenhorn_logo.webp)}.tbrand{--lm:url(assets/ui/aldenhorn_title.webp)}
.alogo .gem{position:absolute;width:9%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#dff0ff 0%,#5aa0ff 25%,#1a4aff55 50%,transparent 70%);mix-blend-mode:screen;animation:alGem 2.6s ease-in-out infinite}
.alogo .g1{left:50%;top:22%}.alogo .g2{left:69.2%;top:49.6%;animation-delay:.9s}.alogo .g3{left:50%;top:61.6%;animation-delay:1.7s;width:7%}
.alogo .emb{position:absolute;inset:0;pointer-events:none;overflow:visible}
.alogo .emb i{position:absolute;bottom:18%;width:4px;height:4px;border-radius:50%;background:#ffcf6a;box-shadow:0 0 6px 2px #ff9a2a;opacity:0;animation:alEmb 5s linear infinite}
.alogo .emb i:nth-child(1){left:12%;animation-delay:0s}.alogo .emb i:nth-child(2){left:22%;animation-delay:1.3s}.alogo .emb i:nth-child(3){left:33%;animation-delay:2.6s}.alogo .emb i:nth-child(4){left:41%;animation-delay:.7s}
.alogo .emb i:nth-child(5){left:56%;animation-delay:3.4s}.alogo .emb i:nth-child(6){left:63%;animation-delay:1.9s}.alogo .emb i:nth-child(7){left:72%;animation-delay:4.1s}.alogo .emb i:nth-child(8){left:81%;animation-delay:.3s}
.alogo .emb i:nth-child(9){left:88%;animation-delay:2.2s}.alogo .emb i:nth-child(10){left:47%;animation-delay:3.8s}
@keyframes alIn{from{opacity:0;transform:scale(.86);filter:brightness(2.2) blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes alBreath{0%,100%{filter:drop-shadow(0 0 8px #ff9a2a44)}50%{filter:drop-shadow(0 0 22px #ffb84a88) brightness(1.08)}}
@keyframes alShine{0%{background-position:-150% 0}45%,100%{background-position:150% 0}}
@keyframes alGem{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.8)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}}
@keyframes alEmb{0%{opacity:0;transform:translate(0,0) scale(1)}10%{opacity:1}100%{opacity:0;transform:translate(14px,-260%) scale(.4)}}
.alogo .emb i{--rise:-220px}@keyframes alEmb{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}100%{opacity:0;transform:translate(18px,var(--rise)) scale(.3)}}
.brand .logo{display:none}
.tbrand{position:relative;display:block;height:34px;font-size:0}.tbrand img{height:100%;width:auto;display:block;filter:drop-shadow(0 0 6px #ff9a2a55)}
@media (prefers-reduced-motion:reduce){.alogo,.alogo *,.tbrand .shine{animation:none!important}.alogo .shine,.alogo .emb{display:none}}
#scr-start{justify-content:flex-start!important;padding-top:14px}.brand.small .alogo{width:min(280px,46vw);margin-top:6px}
.starter{background:linear-gradient(#0006,#000b),var(--stone) 0 0/260px!important;border:18px solid transparent!important;border-image:url(assets/ui/frame.svg) 30 fill stretch!important;border-radius:0!important;box-shadow:0 10px 24px #000d!important}.starter .btn{width:100%}
.tn{align-items:flex-start!important}.tier{align-items:center}.sn2{height:auto!important;min-height:0}
/* ---------------------------------------------------------------- no scroll: windows fill the panel, the bag grid sizes itself from the bag */
#panel-body{overflow:hidden!important}
.tw-body{overflow:hidden!important}.w-runes .tw-body{overflow:hidden!important}
.twi{min-height:0}
#app[data-mode=land]:not(.narrow) .twi{height:100%;display:flex;flex-direction:column}
#app[data-mode=land]:not(.narrow) .twi>.hbody{flex:1;min-height:0}
#app[data-mode=land]:not(.narrow) .w-runes .twi{overflow:hidden}
.igrid2{grid-template-columns:repeat(var(--cols,8),minmax(0,1fr))!important;grid-template-rows:repeat(var(--rows,4),minmax(0,1fr));grid-auto-rows:0;align-content:stretch;overflow:hidden!important;max-height:none!important}
.igrid2 .cell,.igrid2 .it{aspect-ratio:auto!important;width:100%;height:100%;min-height:0}
.igrid2 .it .ia{width:100%;height:100%;object-fit:contain;padding:8%}
#app:not([data-mode=land]) .igrid2{aspect-ratio:calc(var(--cols)/var(--rows))}
.rmap2{overflow:auto}
/* the info card: compact skill list */
.hinfo .skl{padding:4px 6px;margin-top:4px}.hinfo .skl p{display:none}.hinfo .skl .icon{width:30px;height:30px}.hinfo .skl b{font-size:13px}
/* skill tree laid out in columns, one per tier, so it fits next to the stats */
#app[data-mode=land]:not(.narrow) .tiers{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding-left:0}
#app[data-mode=land]:not(.narrow) .tiers::before{display:none}
#app[data-mode=land]:not(.narrow) .tier{flex-direction:column;align-items:center;padding:20px 4px 6px;min-height:0}
#app[data-mode=land]:not(.narrow) .tier .tl{left:50%;top:-2px;transform:translate(-50%,-30%);width:24px;height:24px}
#app[data-mode=land]:not(.narrow) .tn{flex-direction:column;flex-wrap:nowrap;align-items:stretch!important;width:100%;gap:4px}
#app[data-mode=land]:not(.narrow) .sn2{width:100%;max-width:none;flex:none;flex-direction:row;padding:3px 4px;gap:4px;text-align:left}
#app[data-mode=land]:not(.narrow) .sn2 .sni{width:28px;height:28px;flex:none}#app[data-mode=land]:not(.narrow) .sn2 .sni svg,#app[data-mode=land]:not(.narrow) .sn2 .sni .icon{width:26px;height:26px}
#app[data-mode=land]:not(.narrow) .sn2 small{flex:1;max-width:none;white-space:normal;line-height:1.1}
#app[data-mode=land]:not(.narrow) .sn2 em{font-size:10px}#app[data-mode=land]:not(.narrow) .sn2 .atag{top:-6px;left:2px}
#app[data-mode=land]:not(.narrow) .tier .tlock{position:static;transform:none;margin-top:4px;font-size:10px}
#app[data-mode=land]:not(.narrow) .ssrc{display:none}
/* hero roster: every card keeps its name and price/buy button visible; the picture takes what room is left */
.rc{display:flex;flex-direction:column;min-height:0}
.rc img{flex:1 1 auto;min-height:0;aspect-ratio:auto!important;height:auto;width:100%}
.rc b,.rc em,.rc .buy{flex:none}
.rc .buy{display:flex;margin:3px auto 4px;padding:3px 10px;font-size:13px}
#app[data-mode=land]:not(.narrow) .roster{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr));grid-auto-rows:0;overflow:hidden!important;flex:1;min-height:0}
#app:not([data-mode=land]) .rc img{aspect-ratio:1!important;flex:none}
/* materials: rendered gem, carved stone and scroll icons */
.mat{width:46px;height:46px;border-radius:3px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--g) 22%,#140d08),#060403 80%);box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px color-mix(in srgb,var(--g) 55%,#3a2716),0 0 6px color-mix(in srgb,var(--g) 25%,transparent)}
.mat img{width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 2px 2px #000)}.mat i{display:none}
.mat b{right:3px;bottom:1px;font:900 11px var(--ui);color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000}
.mat.sm{width:34px;height:34px}.mat.sm b{font-size:9px}.mat.big{width:64px;height:64px}.mat.big b{font-size:13px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;align-content:start}.mgrid .mat{width:100%;height:auto;aspect-ratio:1}
.sock{font-size:14px}.sock .sk-n{font:700 14px var(--title)}.sock .sk-v{font:700 14px var(--ui);color:#9fe8ff}
.sockw{display:flex;flex-direction:column;gap:12px;min-width:min(560px,88vw)}
.sockh{display:flex;align-items:center;gap:12px}.sockh b{display:block;font:700 18px var(--title)}.sockh span{font:600 15px var(--ui);color:#d8c098}.sockh .it{width:60px;height:60px}
.sockg{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.sockg button{all:unset;cursor:pointer;display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto auto;column-gap:10px;align-items:center;padding:8px;border-radius:3px;background:linear-gradient(#0008,#000b),var(--stone) 0 0/200px;box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #5a4020}
.sockg button:hover{box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #f6dc96,0 0 10px #ffcf5a55}
.sockg .mat{grid-row:1/4}.sockg b{font:900 20px var(--ui);color:#7af06a}.sockg em{font:700 15px var(--ui);font-style:normal;color:#f0e0c0}.sockg small{font:600 12px var(--ui);color:#a88a62}
@keyframes winIn{from{transform:scale(.96)}to{transform:none}}
#modal .win{width:auto;max-width:96vw;background:linear-gradient(#0000004d,#000000a0),var(--stone) 0 0/260px;border:22px solid transparent;border-image:url(assets/ui/frame.svg) 30 fill stretch;border-radius:0;box-shadow:0 12px 30px #000e}
#modal .win-head{display:flex;justify-content:center;align-items:center;position:relative;margin:-6px 0 8px}
#modal .win-head b{font:700 18px var(--deco);letter-spacing:.1em;background:linear-gradient(#fff4c8,#e0b050 55%,#8a5a14);-webkit-background-clip:text;background-clip:text;color:transparent}
#modal .x{position:absolute;right:-6px;top:-6px}
/* chest pictures: closed and open share the bottom edge; the opened lid has room above */
.cbx img{object-position:50% 100%}
.boxw .cbx{width:200px;height:190px;margin-top:24px}
.boxw{padding-top:14px}
.boxw .cbx{width:200px;height:170px;margin-top:10px}
.it svg.fb{width:60%;height:60%;margin:auto;opacity:.8}