*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:'Trebuchet MS','Segoe UI',sans-serif;touch-action:none}
#app{position:fixed;inset:0;overflow:hidden}
#game{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ===== Celular em retrato: o jogo preenche a tela inteira (sem barras pretas) ===== */
@media (orientation: portrait){
  html,body{background:#0d0706}
  #app{
    inset:0;
    transform:none;
    width:100%;
    height:100%;
    box-shadow:none;
    background:#0d0706;
  }
}

/* ============ HUD topo esquerda ============ */
#hud-tl{position:absolute;top:8px;left:8px;display:flex;gap:8px;align-items:flex-start;z-index:5}
.portrait{position:relative;width:clamp(54px,9.5vh,80px);height:clamp(54px,9.5vh,80px);border:3px solid #c9a227;border-radius:10px;overflow:hidden;box-shadow:0 0 12px rgba(0,0,0,.8),inset 0 0 14px rgba(0,0,0,.6);background:#2a1410;flex:0 0 auto}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait .lvl{position:absolute;left:0;right:0;bottom:0;text-align:center;background:linear-gradient(#c0392b,#7b1f16);color:#fff;font-weight:bold;font-size:clamp(10px,1.8vh,14px);padding:2px 0;text-shadow:0 1px 2px #000}
.plate{background:linear-gradient(180deg,#1c2a33,#0d1418);border:2px solid #c9a227;border-radius:8px;padding:4px 10px;min-width:clamp(140px,24vh,210px);box-shadow:0 2px 8px rgba(0,0,0,.7)}
.pname{color:#f5d300;font-weight:bold;font-size:clamp(13px,2.5vh,19px);text-shadow:0 2px 3px #000,1px 1px 0 #000}
.moname{color:#ff8a80;font-size:clamp(9px,1.6vh,12px);font-weight:bold;text-shadow:0 1px 2px #000;margin-top:-2px;letter-spacing:.5px}
.rank{color:#cfd8dc;font-size:clamp(10px,1.7vh,13px);text-align:center;text-shadow:0 1px 2px #000;cursor:pointer;padding:2px 0;border-radius:4px}
.rank:hover{background:rgba(255,255,255,.06)}
.portrait{cursor:pointer;transition:transform .15s ease}
.portrait:hover{transform:scale(1.06)}
.portrait:active{transform:scale(.95)}
#panel-rank .rrow{display:flex;align-items:center;gap:10px;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.06);font-size:clamp(12px,2.1vh,15px);color:#fff}
#panel-rank .rrow.me{background:linear-gradient(90deg,rgba(255,213,79,.18),rgba(255,213,79,.04));border:1px solid #c9a227;border-radius:6px}
#panel-rank .rpos{font-weight:bold;color:#ffd54f;min-width:34px;text-align:right}
#panel-rank .rname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#panel-rank .rfloor{color:#7ee85a;min-width:60px;text-align:right}
#panel-rank .rscore{color:#ff8a80;min-width:90px;text-align:right;font-weight:bold}
#panel-rank .rrow.top1 .rpos{color:#ffeb3b;font-size:1.15em}
#panel-rank .rrow.top2 .rpos{color:#cfd8dc}
#panel-rank .rrow.top3 .rpos{color:#d49b6c}
.bars{margin-top:3px;display:flex;flex-direction:column;gap:2px}
.bar{position:relative;height:clamp(7px,1.5vh,12px);border:1px solid #000;border-radius:3px;background:#111;overflow:hidden}
.bar i{position:absolute;inset:0;width:0%;display:block}
.bar b{position:absolute;inset:0;text-align:center;font-style:normal;font-size:clamp(7px,1.3vh,10px);color:#fff;text-shadow:0 1px 2px #000,1px 0 1px #000;line-height:clamp(7px,1.5vh,12px);font-weight:bold}
.bar.exp{height:clamp(6px,1.3vh,10px)}
.bar.exp i{background:linear-gradient(#7ee85a,#2e9e1f)}
.bar.hp i{background:linear-gradient(#ff5a4e,#b71c1c)}
.bar.mp i{background:linear-gradient(#5ab8ff,#1565c0)}
.bar.fur{height:clamp(7px,1.3vh,10px)}.bar.fur i{background:linear-gradient(#ffe66b,#e8a100)}

/* ============ HUD topo centro ============ */
#hud-tc{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:6px;width:min(34vw,440px)}
.bossbar{position:relative;width:100%;height:clamp(13px,2.5vh,19px);border:3px solid #6d4c20;border-radius:4px;background:#0a0a0a;display:flex}
.bossbar .seg{flex:1;border-right:3px solid #c9a227}
/* barra amarela do chefe: removida da tela por solicitação */
.bossbar,#hud-tc{display:none!important}
.bossbar .seg:last-child{border-right:none}
.bossbar #bar-boss{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(#ffe66b,#d4a017);border-radius:2px}
.bossbar .skull{position:absolute;right:-30px;top:-9px;font-size:clamp(18px,3.2vh,28px);filter:drop-shadow(0 2px 2px #000)}

/* ============ HUD topo direita ============ */
#hud-tr{position:absolute;top:8px;right:8px;z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.res{display:flex;align-items:center;gap:10px;font-size:clamp(12px,2.3vh,18px);font-weight:bold;color:#fff;text-shadow:0 2px 3px #000}
.res .gold b{color:#ffd54f}.res .gem b{color:#ff6b5e}
.xclose{width:clamp(28px,4.4vh,38px);height:clamp(28px,4.4vh,38px);border-radius:8px;border:3px solid #8e2b20;background:linear-gradient(#d84a3a,#8e1f16);color:#fff;font-size:clamp(15px,2.5vh,21px);font-weight:bold;box-shadow:0 2px 6px rgba(0,0,0,.6);cursor:pointer}
#minimap{width:clamp(78px,13vh,124px);height:clamp(78px,13vh,124px);border:3px solid #6d4c20;border-radius:6px;background:#141414;box-shadow:0 2px 10px rgba(0,0,0,.7)}
.floor-label{background:rgba(10,10,10,.75);border:2px solid #6d4c20;border-radius:6px;padding:2px 10px;font-size:clamp(11px,2.1vh,16px);font-weight:bold;color:#fff;text-shadow:0 1px 2px #000;white-space:nowrap}
.floor-label b{color:#7ee85a}

/* ============ Menu vertical recolhível ============ */
#menu-btns{position:absolute;left:5px;top:calc(10px + clamp(54px,9.5vh,80px));bottom:auto;right:auto;z-index:6;display:flex;flex-direction:column;flex-wrap:nowrap;gap:4px;justify-content:flex-start;align-items:flex-start}
#menu-toggle{position:relative;width:clamp(26px,calc((100vh - 220px)/12),42px);height:clamp(26px,calc((100vh - 220px)/12),42px);border-radius:9px;border:2px solid #c9a227;background:linear-gradient(180deg,#6b4322,#33200f);color:#ffd54f;font-size:clamp(16px,2.6vh,22px);font-weight:bold;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.7);cursor:pointer;flex:0 0 auto}
#menu-toggle:active{transform:scale(.9)}
#menu-toggle .ic-open{display:none}
#menu-btns.open #menu-toggle .ic-open{display:block}
#menu-btns.open #menu-toggle .ic-closed{display:none}
#menu-toggle .tbadge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:10px;background:#ff1744;border:2px solid #fff;color:#fff;font-size:11px;font-weight:bold;display:none;align-items:center;justify-content:center;padding:0 4px;z-index:5;line-height:1}
#menu-toggle .tbadge.on{display:flex}
#menu-toggle.alert{animation:menuAlert .9s infinite alternate}
@keyframes menuAlert{from{box-shadow:0 0 4px rgba(255,23,68,.5)}to{box-shadow:0 0 16px rgba(255,23,68,.95)}}
.mbtn{position:relative;width:clamp(26px,calc((100vh - 220px)/12),42px);height:clamp(26px,calc((100vh - 220px)/12),42px);background:linear-gradient(180deg,#5a3a1e,#2e1c0e);border:2px solid #c9a227;border-radius:9px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;box-shadow:0 3px 8px rgba(0,0,0,.7);cursor:pointer;transition:transform .28s cubic-bezier(.2,.8,.3,1.25),opacity .2s ease;flex:0 0 auto}
#menu-btns.collapsed .mbtn{opacity:0;transform:translateY(-6px) scale(.6);pointer-events:none}
.mbtn .mi{font-size:clamp(13px,calc((100vh - 220px)/24),21px);line-height:1;filter:drop-shadow(0 2px 2px #000)}
.mbtn small{display:none;font-size:clamp(7px,1.2vh,9px);font-weight:bold;text-shadow:0 1px 2px #000;white-space:nowrap;margin-top:2px}
.mbtn .nbadge{position:absolute;top:-5px;right:-5px;background:#e74c3c;border:2px solid #fff;border-radius:6px;font-size:10px;font-style:normal;padding:0 4px;font-weight:bold;display:none}
.mbtn .nbadge.on{display:block}
.mbtn .dot{position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:#ff1744;border:2px solid #fff;display:none}
.mbtn .dot.on{display:block}

/* ============ BARRA INFERIOR: 3 zonas sem sobreposição ============ */
#bottom-hud{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:flex-end;justify-content:space-between;padding:6px 10px 8px;pointer-events:none}
.bh-zone{pointer-events:auto;display:flex;align-items:flex-end}
.bh-zone.left{gap:10px;flex:0 0 auto}
.bh-zone.center{flex:1 1 auto;justify-content:center;padding-bottom:10px;min-width:0}
.bh-zone.right{flex:0 0 auto}

/* Joystick */
#joy{position:relative;width:clamp(84px,13.5vh,108px);height:clamp(84px,13.5vh,108px);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),rgba(255,255,255,.03));border:2px solid rgba(255,255,255,.25);display:none;margin-bottom:4px}
#joy.on{display:block}
#joy .knob{position:absolute;left:50%;top:50%;width:46%;height:46%;margin:-23% 0 0 -23%;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.5),rgba(255,255,255,.12));border:2px solid rgba(255,255,255,.4)}

/* AUTO */
#auto-btn{border-radius:12px;border:3px solid #6d4c20;background:linear-gradient(180deg,#3a3a3a,#1c1c1c);color:#fff;padding:8px 14px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.7);display:flex;flex-direction:column;align-items:center;line-height:1.1;margin-bottom:6px}
#auto-btn b{font-size:clamp(12px,2.2vh,17px);letter-spacing:1px}
#auto-btn small{font-size:clamp(9px,1.4vh,11px);color:#bbb}
#auto-btn.on{border-color:#7ee85a;background:linear-gradient(180deg,#2e7d32,#143d15);box-shadow:0 0 14px rgba(126,232,90,.5)}
#auto-btn.on small{color:#c8f7c0}

/* Poções (sprites HD) */
#pots{display:flex;gap:16px;align-items:flex-end}
.pot{position:relative;display:flex;flex-direction:column;align-items:center;line-height:1}
.pot img{width:clamp(32px,5.6vh,46px);height:auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.7));pointer-events:none}
.pot b{font-size:clamp(8px,1.4vh,11px);color:#fff;text-shadow:0 1px 2px #000;background:rgba(0,0,0,.5);border-radius:8px;padding:0 7px;margin-top:1px}
.pot i{position:absolute;right:-10px;top:2px;width:22px;height:22px;border-radius:50%;background:#1a1a1a;border:2px solid #c9a227;color:#fff;font-style:normal;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:bold}

/* Skills: 2 colunas × 3 linhas (6 skills) - alinhadas e sem sobreposição */
#skills{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:1.5vh;width:clamp(140px,22vw,200px);flex:0 0 auto;align-items:end;justify-items:center}
.skl{position:relative;width:clamp(54px,8.8vh,72px);height:clamp(54px,8.8vh,72px);margin:auto;border-radius:50%;border:3px solid #c9a227;background:radial-gradient(circle at 35% 30%,#7a2a12,#2a0d08);box-shadow:0 0 10px rgba(0,0,0,.8),inset 0 0 14px rgba(255,120,0,.25);cursor:pointer;overflow:hidden;padding:0}
.skl img{width:100%;height:100%;object-fit:cover;border-radius:50%;pointer-events:none}
.skl .cd{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(0,0,0,.75) 100%,rgba(0,0,0,0) 0);display:flex;align-items:center;justify-content:center;color:#fff;font-size:clamp(11px,2vh,16px);font-weight:bold;text-shadow:0 2px 3px #000;pointer-events:none}
.skl .mp{position:absolute;left:0;right:0;bottom:1px;text-align:center;font-size:clamp(7px,1.2vh,10px);font-weight:bold;color:#8fd3ff;text-shadow:0 1px 2px #000;pointer-events:none;background:rgba(0,0,0,.45)}
.skl .badge{position:absolute;top:-4px;right:-4px;width:2.8vh;height:2.8vh;border-radius:50%;background:#222;border:2px solid #c9a227;color:#fff;font-size:1.6vh;font-style:normal;display:flex;align-items:center;justify-content:center;font-weight:bold}
.skl.fired{animation:sklpop .28s ease}
@keyframes sklpop{0%{transform:scale(1)}45%{transform:scale(.86)}100%{transform:scale(1)}}
/* skill 0 (básica) maior e destacada — primeira posição */
.skl.big{width:clamp(62px,10vh,82px);height:clamp(62px,10vh,82px);border-width:4px;box-shadow:0 0 16px rgba(255,213,79,.5),inset 0 0 18px rgba(255,120,0,.35)}
.skl:active{transform:scale(.92)}

/* ============ Toasts ============ */
/* Avisos minúsculos no canto */
#toasts{position:absolute;top:clamp(92px,14vh,120px);left:66px;z-index:8;display:flex;flex-direction:column;gap:2px;align-items:flex-start;pointer-events:none;max-width:52vw}
.toast{background:rgba(10,6,4,.55);border:1px solid rgba(201,162,39,.5);border-radius:6px;padding:1px 8px;color:#ffe9a8;font-weight:bold;font-size:clamp(8px,1.4vh,11px);text-shadow:0 1px 2px #000;box-shadow:0 2px 6px rgba(0,0,0,.5);animation:toastIn .25s ease;text-align:left;line-height:1.35}
.toast.good{border-color:rgba(126,232,90,.6);color:#c8f7c0}
@keyframes toastIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* ============ Modais ============ */
.modal{position:absolute;inset:0;z-index:20;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;padding:12px}
.modal.on{display:flex}
.window{width:min(680px,94vw);max-height:92vh;overflow-y:auto;background:linear-gradient(180deg,#4a3520,#2e2013);border:4px solid #c9a227;border-radius:14px;box-shadow:0 0 40px rgba(0,0,0,.9),inset 0 0 30px rgba(0,0,0,.5);padding:12px}
.window.wide{width:min(780px,96vw)}
.wtitle{text-align:center;color:#ffd54f;font-size:clamp(16px,2.7vh,21px);text-shadow:0 2px 3px #000;margin:6px 0}
.logo{text-align:center;color:#ffd54f;font-size:clamp(22px,4.5vh,34px);text-shadow:0 3px 6px #000,0 0 20px rgba(255,140,0,.4);letter-spacing:1px}
.sub{text-align:center;color:#cfd8dc;font-size:clamp(12px,2vh,16px);margin:6px 0 16px;text-shadow:0 1px 2px #000}

/* Dificuldade */
#diff-btns{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:8px}
.diff-inline{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:6px 0 4px}
.dbtn{border:3px solid #6d4c20;border-radius:12px;background:linear-gradient(180deg,#3a2a18,#1c1208);color:#fff;padding:12px 10px;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.6);text-align:center}
.dbtn b{display:block;font-size:clamp(15px,2.6vh,21px);text-shadow:0 2px 3px #000}
.dbtn small{display:block;font-size:clamp(10px,1.7vh,13px);color:#ddd;margin-top:3px}
.dbtn:active{transform:scale(.96)}
.dbtn.cur{box-shadow:0 0 16px rgba(255,255,255,.35)}
.dbtn.pend{background:linear-gradient(180deg,#6b2016,#2a0d08);animation:pendPulse .6s infinite alternate}
@keyframes pendPulse{from{box-shadow:0 0 6px rgba(255,80,60,.4)}to{box-shadow:0 0 20px rgba(255,80,60,.9)}}
.diff-warn{background:rgba(255,180,60,.12);border:1px solid rgba(255,180,60,.45);border-radius:10px;color:#ffe2b0;padding:9px 12px;font-size:clamp(11px,1.7vh,13px);line-height:1.5;margin:6px 0 12px}

.tabs{display:flex;gap:8px;margin-bottom:8px}
.tab{flex:1;padding:12px;border:3px solid #6d4c20;border-radius:10px;font-size:clamp(14px,2.5vh,21px);font-weight:bold;color:#ffd54f;background:linear-gradient(#8a8a8a,#4a4a4a);text-shadow:0 2px 2px #000;cursor:pointer}
.tab.active{background:linear-gradient(#e05a3a,#a02a18);border-color:#ffd54f;color:#fff}
.pts{display:flex;gap:8px;margin-bottom:10px}
.pt-card{flex:1;background:linear-gradient(#b98a3a,#7a5a22);border:2px solid #c9a227;border-radius:0 0 10px 10px;text-align:center;padding:4px;color:#fff}
.pt-card small{display:block;font-size:clamp(10px,1.6vh,13px);text-shadow:0 1px 2px #000}
.pt-card b{font-size:clamp(18px,3.4vh,28px);text-shadow:0 2px 3px #000}
.pt-card.act{background:linear-gradient(#e05a3a,#a02a18)}
.rows{display:flex;flex-direction:column;gap:8px}
.arow{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.35);border:2px solid #8a6a30;border-radius:10px;padding:6px 10px}
.arow .aic{width:clamp(38px,6.2vh,50px);height:clamp(38px,6.2vh,50px);border-radius:8px;overflow:hidden;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:26px;background:#1c1208;border:2px solid #6d4c20}
.arow .ain{flex:1;min-width:0}
.arow .ain b{color:#ffd54f;font-size:clamp(13px,2.3vh,18px);text-shadow:0 1px 2px #000;display:block}
.arow .ain small{color:#7ee85a;font-size:clamp(11px,1.9vh,15px);font-weight:bold}
.arow .atot{color:#7ee85a;font-size:clamp(13px,2.3vh,18px);font-weight:bold;min-width:78px;text-align:right;text-shadow:0 1px 2px #000}
.arow .alv{color:#e0e0e0;font-size:clamp(13px,2.3vh,18px);font-weight:bold;min-width:58px;text-align:right;text-shadow:0 1px 2px #000}
.aplus{width:clamp(40px,6.2vh,50px);height:clamp(40px,6.2vh,50px);border-radius:10px;border:3px solid #ffd54f;background:linear-gradient(#e05a3a,#a02a18);color:#fff;font-size:clamp(20px,3.2vh,28px);font-weight:bold;cursor:pointer;flex:0 0 auto;box-shadow:0 2px 6px rgba(0,0,0,.6)}
.aplus:disabled{filter:grayscale(.8) brightness(.6);cursor:default}
.wfooter{display:flex;gap:12px;margin-top:14px;justify-content:center;flex-wrap:wrap}
.class-row{display:flex;gap:10px;justify-content:center;margin:8px 0 10px;flex-wrap:wrap}
.classbtn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 14px;min-width:140px;border:2px solid #c9a227;border-radius:10px;background:linear-gradient(180deg,#3a2412,#1a0f08);color:#fff;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;font-family:inherit}
.classbtn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,213,79,.25)}
.classbtn:active{transform:translateY(0)}
.classbtn.cur{border-color:#ffd54f;box-shadow:0 0 14px rgba(255,213,79,.45);background:linear-gradient(180deg,#5a3a1e,#1a0f08)}
.classbtn .cbig{font-size:clamp(22px,4vh,30px);line-height:1}
.classbtn b{color:#ffd54f;font-size:clamp(13px,2.3vh,16px)}
.classbtn small{color:#cfd8dc;font-size:clamp(9px,1.6vh,11px);text-align:center;line-height:1.2}
.wfooter #btn-newgame{background:linear-gradient(180deg,#a23a2c,#5a1a14);border:2px solid #c9a227;color:#fff;font-weight:bold;padding:10px 18px;border-radius:8px;cursor:pointer;font-size:clamp(13px,2.2vh,16px);box-shadow:0 3px 8px rgba(0,0,0,.5)}
.wfooter #btn-newgame:active{transform:scale(.97)}
.btn-red,.btn-green{padding:12px 34px;font-size:clamp(15px,2.5vh,20px);font-weight:bold;border-radius:10px;border:3px solid #6d4c20;color:#fff;text-shadow:0 2px 2px #000;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.6)}
.btn-red{background:linear-gradient(#e05a3a,#a02a18);border-color:#ffb4a2}
.btn-green{background:linear-gradient(#5cc05a,#2e7d32);border-color:#b9f6b0}
.btn-red:active,.btn-green:active{transform:scale(.96)}

/* Habilidades */
.hero-skills{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px;background:rgba(0,0,0,.3);border:2px solid #8a6a30;border-radius:10px;padding:10px;max-width:100%}
.hs{text-align:center;cursor:pointer;min-width:0}
.hs .circ{width:100%;max-width:90px;aspect-ratio:1;margin:auto;border-radius:50%;border:3px solid #c9a227;overflow:hidden;background:#2a0d08;position:relative}
.hs .circ img{width:100%;height:100%;object-fit:cover}
.hs.sel .circ{border-color:#5ee84a;box-shadow:0 0 14px rgba(94,232,74,.8)}
.hs small{display:block;color:#fff;font-size:clamp(9px,1.7vh,13px);font-weight:bold;text-shadow:0 1px 2px #000;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skl-desc{text-align:center;color:#ffd54f;font-size:clamp(12px,2.2vh,17px);font-weight:bold;text-shadow:0 1px 2px #000;background:rgba(0,0,0,.35);border-radius:8px;padding:8px;margin:8px 0;line-height:1.4}
.runes{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px;background:rgba(0,0,0,.3);border:2px solid #8a6a30;border-radius:10px;padding:10px;max-width:100%}
.rn{text-align:center;cursor:pointer;min-width:0}
.rn .hex{width:100%;max-width:90px;aspect-ratio:1;margin:auto;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:linear-gradient(#e8c074,#a07c34);display:flex;align-items:center;justify-content:center;font-size:clamp(18px,3.4vh,32px);color:#6b5a40;font-weight:bold;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.rn.sel .hex{background:linear-gradient(#b9ff8a,#4ac02a);color:#1c4a10;box-shadow:0 0 16px rgba(120,255,80,.8)}
.rn small{display:block;color:#fff;font-size:clamp(9px,1.7vh,13px);font-weight:bold;text-shadow:0 1px 2px #000;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rune-desc{text-align:center;color:#ffb347;font-size:clamp(11px,2vh,15px);font-weight:bold;text-shadow:0 1px 2px #000;background:rgba(0,0,0,.35);border-radius:8px;padding:8px;margin-top:8px;line-height:1.4}

/* Inventário / equipamentos */
.auto-row{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:8px 0}
.tg{display:inline-flex;align-items:center;gap:8px;background:rgba(0,0,0,.4);border:2px solid #8a6a30;border-radius:999px;padding:7px 16px;color:#ffd54f;font-weight:bold;font-size:clamp(12px,2.1vh,16px);cursor:pointer}
.tg input{width:19px;height:19px;accent-color:#7ee85a;cursor:pointer}
/* Equipados: linhas com status sempre visíveis */
.equip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:8px}
.erow{display:flex;gap:8px;align-items:flex-start;background:linear-gradient(#2e2114,#1a1008);border:2px solid #6d4c20;border-radius:10px;padding:6px;cursor:pointer;position:relative;overflow:hidden}
.erow:hover{filter:brightness(1.15)}
.erow img.eic{width:clamp(34px,6vh,46px);height:clamp(34px,6vh,46px);object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.8))}
.erow .ph{width:clamp(34px,6vh,46px);height:clamp(34px,6vh,46px);flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:20px;opacity:.35}
.erow .emain{flex:1;min-width:0}
.erow .ename{font-size:clamp(10px,1.7vh,13px);font-weight:bold;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.erow .eslot-name{font-size:clamp(8px,1.3vh,10px);color:#cfd8dc}
.erow .echips{display:flex;flex-wrap:wrap;gap:2px;margin-top:3px}
.erow .echip{font-size:clamp(8px,1.3vh,10px);font-weight:bold;color:#bfffc0;text-shadow:0 1px 1px #000;background:rgba(126,232,90,.12);border-radius:4px;padding:0 4px;line-height:1.5}
.erow .echip.cdr,.erow .echip.ls{color:#8fd3ff;background:rgba(64,196,255,.14)}
.erow .echip.spchip{color:#ffe082;background:rgba(255,200,60,.22);border:1px solid rgba(255,215,64,.5)}
.erow .echip.supchip{color:#d1b3ff;background:rgba(150,70,255,.25);border:1px solid rgba(190,130,255,.7)}
/* Conjunto Supremo do Vazio */
.erow.sup,.slot.sup,.forge-row.sup{border-color:#b388ff !important;box-shadow:0 0 14px rgba(179,136,255,.8),inset 0 0 10px rgba(150,70,255,.35);animation:supGlow 1.3s infinite alternate}
@keyframes supGlow{from{box-shadow:0 0 8px rgba(179,136,255,.55),inset 0 0 6px rgba(150,70,255,.25)}to{box-shadow:0 0 20px rgba(190,140,255,.95),inset 0 0 14px rgba(170,100,255,.5)}}
.stat-card.sup{border-color:#b388ff;background:rgba(150,70,255,.16);box-shadow:0 0 10px rgba(179,136,255,.6)}
.stat-card.sup b{color:#d1b3ff}.stat-card.sup small{color:#e9dcff}
.erow .pbadge{position:absolute;top:3px;right:5px;font-size:clamp(8px,1.3vh,10px);font-weight:bold;color:#ffd54f;text-shadow:0 1px 2px #000}

/* Loja */
.shop-sec{background:rgba(0,0,0,.3);border:2px solid #8a6a30;border-radius:10px;padding:10px;margin-bottom:8px}
.shop-sec h4{color:#ffd54f;font-size:clamp(13px,2.2vh,16px);text-shadow:0 1px 2px #000;margin-bottom:4px}
.shop-opt{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.3);border-radius:8px;padding:6px 8px;margin-top:6px}
.shop-opt .oic{font-size:22px;flex:0 0 auto}
.shop-opt .oinf{flex:1;min-width:0}
.shop-opt .oinf b{display:block;font-size:clamp(11px,1.9vh,14px);color:#ffe9a8;text-shadow:0 1px 2px #000}
.shop-opt .oinf small{font-size:clamp(9px,1.5vh,12px);color:#cfd8dc}
.buybtn{flex:0 1 auto;max-width:100%;border-radius:8px;border:2px solid #ffd54f;background:linear-gradient(#e0a030,#a06818);color:#1c1208;font-weight:bold;font-size:clamp(10px,1.6vh,13px);padding:7px 10px;cursor:pointer;white-space:normal;overflow-wrap:anywhere;text-shadow:0 1px 0 rgba(255,255,255,.3)}
.buybtn:disabled{filter:grayscale(.8) brightness(.6);cursor:default}
.buybtn.gem{border-color:#ff8a80;background:linear-gradient(#e05050,#a02020);color:#fff;text-shadow:0 1px 2px #000}
.tgline{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.tgline .tg{padding:5px 12px;font-size:clamp(11px,1.8vh,14px)}

/* Grade de status completa */
.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:6px}
.stat-card{background:rgba(0,0,0,.35);border:1px solid #8a6a30;border-radius:8px;padding:6px 4px;text-align:center;min-width:0;overflow:hidden}
.stat-card b{display:block;font-size:clamp(12px,2vh,16px);color:#ffd54f;text-shadow:0 1px 2px #000;line-height:1.15;overflow-wrap:anywhere}
.stat-card small{display:block;font-size:clamp(8px,1.3vh,11px);color:#cfd8dc;white-space:normal;overflow-wrap:anywhere}
.stat-card.crit b{color:#ff9ff3}.stat-card.cdr b{color:#40c4ff}.stat-card.life b{color:#ff8a80}
.stat-card.sp{border-color:#ffd740;background:rgba(255,215,64,.12);box-shadow:0 0 8px rgba(255,215,64,.35)}
.stat-card.sp b{color:#ffd740}.stat-card.sp small{color:#fff3c4}

/* Lista de forja */
.forge-row{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.3);border:2px solid #8a6a30;border-radius:9px;padding:6px 8px;margin-top:6px}
.forge-row img.fric{width:clamp(30px,5.4vh,42px);height:clamp(30px,5.4vh,42px);object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.8))}
.forge-row .finf{flex:1;min-width:0}
.forge-row .finf b{font-size:clamp(11px,1.8vh,14px);text-shadow:0 1px 2px #000;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.forge-row .finf small{font-size:clamp(9px,1.4vh,11px);color:#cfd8dc}
.forge-row .buybtn{flex:0 0 auto}
.inv-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.slot{aspect-ratio:1;background:linear-gradient(#3a2a18,#221608);border:2px solid #6d4c20;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;cursor:pointer;overflow:hidden}
.slot img.iic{width:64%;height:64%;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.8))}
.slot .q{position:absolute;top:2px;left:4px;font-size:clamp(7px,1.2vh,9px);font-weight:bold}
.slot .n{font-size:clamp(6px,1.1vh,8px);color:#ddd;position:absolute;bottom:2px;text-align:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.slot .pw{position:absolute;top:1px;right:3px;font-size:clamp(7px,1.2vh,9px);font-weight:bold;color:#ffd54f}
/* 20 raridades */
.r-0{border-color:#9e9e9e !important}
.r-1{border-color:#4fc3f7 !important}
.r-2{border-color:#ba68c8 !important}
.r-3{border-color:#ffb300 !important;box-shadow:0 0 8px rgba(255,179,0,.35)}
.r-4{border-color:#ff5a4e !important;box-shadow:0 0 10px rgba(255,90,78,.5)}
.r-5{border-color:#ff9ff3 !important;box-shadow:0 0 10px rgba(255,159,243,.55)}
.r-6{border-color:#7cffb2 !important;box-shadow:0 0 12px rgba(124,255,178,.6)}
.r-7{border-color:#40c4ff !important;box-shadow:0 0 12px rgba(64,196,255,.65)}
.r-8{border-color:#fff59d !important;box-shadow:0 0 14px rgba(255,245,157,.75)}
.r-9{border-color:#ff1744 !important;box-shadow:0 0 18px rgba(255,23,68,.9);animation:legend .8s infinite alternate}
.r-10{border-color:#ff3d00 !important;box-shadow:0 0 18px rgba(255,61,0,.9)}
.r-11{border-color:#e040fb !important;box-shadow:0 0 18px rgba(224,64,251,.9)}
.r-12{border-color:#00e5ff !important;box-shadow:0 0 20px rgba(0,229,255,.95)}
.r-13{border-color:#ffd740 !important;box-shadow:0 0 20px rgba(255,215,64,.95)}
.r-14{border-color:#ff6e40 !important;box-shadow:0 0 20px rgba(255,110,64,.95)}
.r-15{border-color:#f50057 !important;box-shadow:0 0 22px rgba(245,0,87,1)}
.r-16{border-color:#69f0ae !important;box-shadow:0 0 22px rgba(105,240,174,1)}
.r-17{border-color:#b388ff !important;box-shadow:0 0 24px rgba(179,136,255,1)}
.r-18{border-color:#ffffff !important;box-shadow:0 0 26px rgba(255,255,255,1);animation:legend .9s infinite alternate}
.r-19{border-color:#fff !important;box-shadow:0 0 30px rgba(255,255,255,1),inset 0 0 14px rgba(255,215,64,.7);animation:legendG .6s infinite alternate;background:linear-gradient(135deg,#2b0a0a,#000)}
@keyframes legendG{from{box-shadow:0 0 18px rgba(255,215,64,.8),inset 0 0 10px rgba(255,255,255,.4)}to{box-shadow:0 0 40px rgba(255,255,255,1),inset 0 0 20px rgba(255,215,64,.9)}}
@keyframes legend{from{box-shadow:0 0 10px rgba(255,23,68,.6)}to{box-shadow:0 0 22px rgba(255,23,68,1)}}
.inv-sum{margin-top:10px;text-align:center;color:#ffd54f;font-size:clamp(12px,2.1vh,16px);text-shadow:0 1px 2px #000;background:rgba(0,0,0,.35);border-radius:8px;padding:8px}
.sto-body{color:#f3e5c8;font-size:clamp(12px,2.1vh,16px);line-height:1.8;background:rgba(0,0,0,.3);border-radius:10px;padding:14px;text-shadow:0 1px 2px #000}
.sto-body b{color:#ffd54f}

/* Loading */
#loading{position:absolute;inset:0;z-index:50;background:radial-gradient(circle at 50% 40%,#2a1208,#0b0605);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#ffd54f;font-size:20px;text-shadow:0 2px 4px #000}
#loading .lk{font-size:64px;animation:fl 1s infinite alternate}
@keyframes fl{from{transform:scale(1) rotate(-4deg);filter:drop-shadow(0 0 8px #ff9800)}to{transform:scale(1.15) rotate(4deg);filter:drop-shadow(0 0 22px #ff5722)}}

/* Detalhe do item */
.item-win{width:min(420px,92vw)}
.item-head{display:flex;gap:12px;align-items:center;background:rgba(0,0,0,.35);border:2px solid #8a6a30;border-radius:12px;padding:10px;margin-bottom:8px}
.item-ic{width:clamp(64px,11vh,86px);height:clamp(64px,11vh,86px);border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto;background:rgba(255,255,255,.05);border:3px solid #c9a227}
.item-ic img{width:100%;height:100%;object-fit:contain}
.item-info{flex:1;min-width:0}
.item-name{font-size:clamp(15px,2.5vh,20px);font-weight:bold;text-shadow:0 2px 3px #000;word-wrap:break-word}
.item-sub{font-size:clamp(12px,2vh,15px);font-weight:bold;margin-top:2px}
.item-pow{color:#ffd54f;font-size:clamp(12px,2vh,15px);font-weight:bold;margin-top:4px;text-shadow:0 1px 2px #000}
.item-aff{display:flex;flex-direction:column;gap:6px;background:rgba(0,0,0,.3);border:2px solid #8a6a30;border-radius:10px;padding:12px}
.aff{display:flex;align-items:center;gap:8px;font-size:clamp(13px,2.1vh,16px);font-weight:bold;color:#bfffc0;text-shadow:0 1px 2px #000;padding:3px 6px;border-radius:6px;background:rgba(126,232,90,.07)}
.aff.special{color:#8fd3ff;background:rgba(64,196,255,.1)}
.aff.legendary{color:#ffe082;background:linear-gradient(90deg,rgba(255,215,64,.22),rgba(255,110,0,.14));border:1px solid rgba(255,215,64,.5);text-shadow:0 0 6px rgba(255,180,40,.6);animation:legendPulse 1.4s infinite alternate}
@keyframes legendPulse{from{box-shadow:0 0 4px rgba(255,180,40,.25)}to{box-shadow:0 0 12px rgba(255,200,80,.7)}}
.dbtn small{white-space:pre-line;line-height:1.45;font-size:clamp(9px,1.5vh,12px)}
.diff-inline .dbtn{padding:10px 8px}

/* Telas baixas */
@media (max-height:500px){
  #hud-tc{width:min(30vw,300px)}
  .plate{padding:2px 8px}
  .bars{gap:1px}
  .bh-zone.center{padding-bottom:4px}
  #menu-btns{top:58px;flex-direction:row;flex-wrap:wrap;gap:4px;max-width:92px}
  .mbtn{width:42px;height:42px}
  .mbtn .mi{font-size:20px}
  #menu-toggle{width:42px;height:42px;font-size:18px}
}
@media (orientation:portrait){
  #hud-tc{top:auto;bottom:175px;width:min(56vw,360px)}
  .bossbar .skull{display:none}
  /* 9:16: HUD do topo mais compacto (tudo em vw do palco estreito) p/ não sobrepor */
  #hud-tl{top:5px;left:5px;gap:5px;max-width:62vw}
  #hud-tr{top:5px;right:5px;gap:3px;max-width:34vw}
  .portrait{width:clamp(38px,13vw,60px);height:clamp(38px,13vw,60px);border-width:2px}
  .portrait .lvl{font-size:clamp(8px,2.6vw,11px);padding:1px 0}
  .plate{padding:2px 6px;min-width:0;max-width:44vw;border-radius:6px;border-width:1px}
  .pname{font-size:clamp(10px,3.4vw,14px)}
  .rank{font-size:clamp(8px,2.6vw,11px)}
  .bars{gap:1px}
  .bar{height:clamp(6px,2.4vw,9px);border-radius:2px}
  .bar b{font-size:clamp(7px,2.2vw,9px);line-height:clamp(6px,2.4vw,9px)}
  .bar.exp{height:clamp(5px,2vw,8px)}
  .bar.fur{height:clamp(5px,1.8vw,7px)}
  #minimap{width:clamp(52px,19vw,78px);height:clamp(52px,19vw,78px);border-width:2px}
  .res{gap:6px;font-size:clamp(10px,3.2vw,14px)}
  .floor-label{font-size:clamp(9px,2.8vw,12px);padding:1px 7px;border-width:1px;white-space:nowrap;max-width:33vw;overflow:hidden}
  /* Menu do celular: toggle no topo, botões ABREM PARA BAIXO em coluna
     vertical a partir dele (não cresce para o lado nem sobrepõe o nível). */
  #menu-btns{
    top:calc(8px + clamp(38px,13vw,60px));bottom:auto;left:5px;right:auto;
    flex-direction:column;flex-wrap:nowrap;gap:4px;
    justify-content:flex-start;align-items:flex-start;
  }
  .mbtn{width:clamp(24px,calc((100vh - 230px)/12),40px);height:clamp(24px,calc((100vh - 230px)/12),40px);border-width:2px;border-radius:9px;padding:0;flex:0 0 auto}
  .mbtn small{display:none}
  .mbtn .mi{font-size:clamp(12px,calc((100vh - 230px)/30),20px);line-height:1}
  #menu-toggle{width:clamp(24px,calc((100vh - 230px)/12),40px);height:clamp(24px,calc((100vh - 230px)/12),40px);border-width:2px;border-radius:9px;font-size:clamp(12px,calc((100vh - 230px)/30),20px);margin:0}
  #menu-toggle .tbadge{min-width:14px;height:14px;font-size:9px;top:-4px;right:-4px}
  /* recolhido: botões SOMEM; toggle sozinho (sem lista) */
  #menu-btns.collapsed .mbtn{opacity:0;transform:translateY(-6px) scale(.6);pointer-events:none}
}

/* Doação Pix na tela inicial */
.pix-box{margin-top:14px;background:linear-gradient(135deg,rgba(126,232,90,.14),rgba(255,215,64,.1));border:2px dashed rgba(255,215,64,.6);border-radius:12px;padding:10px 12px;text-align:center}
.pix-title{font-size:clamp(12px,1.9vh,15px);font-weight:bold;color:#ffe082;text-shadow:0 1px 2px #000;margin-bottom:7px}
.pix-row{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.pix-label{font-size:clamp(11px,1.7vh,13px);color:#cfe8cf;font-weight:bold}
.pix-box code{background:rgba(0,0,0,.5);color:#b9f6ca;border:1px solid rgba(126,232,90,.4);border-radius:7px;padding:5px 8px;font-size:clamp(10px,1.5vh,12px);word-break:break-all;user-select:all}
.pix-copy{border:2px solid #c9a227;border-radius:8px;background:linear-gradient(180deg,#2e7d32,#143d15);color:#fff;font-weight:bold;font-size:clamp(11px,1.7vh,13px);padding:6px 12px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.6)}
.pix-copy:active{transform:scale(.95)}
.pix-thanks{margin-top:7px;font-size:clamp(10px,1.5vh,12px);color:#d7ffd0}
.abtns{display:flex;gap:5px;flex:0 0 auto}
.arow{gap:6px;padding:6px 8px}
.atot{flex:0 1 auto;min-width:0;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aplus{width:clamp(34px,5.4vh,44px);height:clamp(34px,5.4vh,44px);font-size:clamp(18px,2.8vh,24px)}
.aplus.amax{width:auto;min-width:clamp(42px,6.4vh,52px);padding:0 5px;font-size:clamp(9px,1.7vh,12px);letter-spacing:.3px;border-color:#7ee85a;background:linear-gradient(#2e7d32,#1b5e20);text-shadow:0 1px 2px rgba(0,0,0,.7)}
.obtns{display:flex;gap:5px;flex:0 1 auto;min-width:0;justify-content:flex-end}
.buybtn.bmax{flex:0 0 auto;min-width:44px;padding:7px 6px;font-size:10px;letter-spacing:.3px;background:linear-gradient(#2e7d32,#1b5e20);border-color:#7ee85a;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.shop-opt{flex-wrap:wrap}
@media (max-width:620px){.atot{display:none}.buybtn.bmax{min-width:40px}}