:root{
  --bg:#cfe5d6; --panel:#f1fbf3; --ink:#17363b; --muted:#4b6b6a;
  --accent:#ef7c9a; --accent-ink:#3a1020; --water:#3fa7b5; --ctrl:rgba(23,54,59,.16); --ctrl-line:rgba(23,54,59,.35);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--bg:#0e2a30;--panel:#17404a;--ink:#e6f3ea;--muted:#9bc2bd;--ctrl:rgba(230,243,234,.12);--ctrl-line:rgba(230,243,234,.35);}
}
:root[data-theme="dark"]{--bg:#0e2a30;--panel:#17404a;--ink:#e6f3ea;--muted:#9bc2bd;--ctrl:rgba(230,243,234,.12);--ctrl-line:rgba(230,243,234,.35);}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:'Nunito',ui-rounded,system-ui,sans-serif;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#app{height:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column}



#stage{position:relative;flex:1;min-height:0}
canvas{display:block;width:100%;height:100%;object-fit:contain}


h1{margin:0;font-size:46px;font-weight:700;letter-spacing:.5px;line-height:1}
h2{margin:0;font-size:26px;font-weight:700}

.small{font-size:13px;color:#a9cbc2;max-width:310px;line-height:1.4;margin:0}



.btn:focus-visible,.card:focus-visible,.mini:focus-visible{outline:3px solid #ffe08a;outline-offset:2px}



































@media (prefers-reduced-motion: reduce){*{transition:none!important}}
/* ===== /clean + /animate ===== */
:root{--r-lg:22px;--r-md:16px;--ease-out:cubic-bezier(.22,1,.36,1);--ease-pop:cubic-bezier(.34,1.56,.64,1);--shadow-soft:0 6px 18px rgba(10,36,40,.18);--shadow-btn:0 4px 0 rgba(58,16,32,.28)}
/* HUD: chips arredondados */




/* Overlays: entrada em 280ms ease-out, conteúdo sobe 12px */






@keyframes ovIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
h1{text-shadow:0 3px 0 rgba(0,0,0,.25);letter-spacing:.3px}
.small{font-size:14px;color:#b9d9cf}
/* Botões: 90ms de pressão, 200ms de retorno elástico */





/* Cartões e itens */
.card,.item{border-radius:var(--r-md);box-shadow:var(--shadow-soft);transition:transform 200ms var(--ease-pop),box-shadow 200ms var(--ease-out)}



@keyframes selPop{0%{transform:scale(.96)}100%{transform:scale(1)}}
.card span,.item .tx span{font-size:13px}





/* Controles */








:focus-visible{outline:3px solid #ffe08a;outline-offset:3px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* ===== passo 1: paleta madeira/folha + tipografia ===== */
:root{
  --wood-900:#2b1a10; --wood-800:#3d2616; --wood-700:#553621; --wood-500:#8a5a34; --wood-300:#c48e58;
  --cream:#f6e7c8; --cream-dim:#d9c39a; --leaf-700:#2f6b2a; --leaf-500:#4f9a3a; --leaf-300:#8fd16a;
  --gold:#f2c14e; --gold-dk:#b9852a; --hp:#5cc043; --mp:#f08a2c; --dusk:#f4a36b;
  --font-title:'Lilita One','Nunito',system-ui,sans-serif;
}
h1,h2,#hud .r span,.btn{font-family:var(--font-title);font-weight:400;letter-spacing:.4px}

h1{color:var(--cream);text-shadow:0 3px 0 var(--wood-900),0 0 18px rgba(242,193,78,.35)}
h2{color:var(--cream);text-shadow:0 2px 0 var(--wood-900)}
.small{color:#cdb48a}

/* ===== passo 4: paisagem ===== */
#app{max-width:none;position:relative;height:100%}
#stage{position:absolute;inset:0;background:#2f8fa0}






@media (max-height:460px){h1{font-size:38px}}
/* tela de carregamento (M3): aparece antes do JS e some quando as imagens essenciais chegam */
#boot{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:radial-gradient(120% 90% at 50% 30%,#553621,#1a0f08);color:#f6e7c8;font-family:var(--font-title,system-ui),system-ui,sans-serif;transition:opacity .25s}
#boot.fim{opacity:0;pointer-events:none}
#boot .bt{font-size:34px;letter-spacing:1px;text-shadow:0 3px 0 rgba(0,0,0,.35)}
#boot .bb{width:min(60vw,320px);height:12px;border-radius:8px;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 2px rgba(246,231,200,.25);overflow:hidden}
#boot .bb i{display:block;height:100%;width:0;background:linear-gradient(#ffd56a,#e8a43a);border-radius:8px;transition:width .12s}
#boot .bm{font-size:13px;opacity:.8;font-weight:700}
#rotate{display:none;position:fixed;inset:0;z-index:50;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(120% 90% at 50% 30%,#553621,#1a0f08);color:var(--cream);text-align:center;padding:24px;font-weight:800}
#rotate .ph{width:56px;height:96px;border:4px solid var(--cream);border-radius:12px;animation:rot 1.8s var(--ease-out) infinite}
@keyframes rot{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (orientation:portrait) and (pointer:coarse){#rotate{display:flex}}
/* ===== passo 2: painel de madeira com folhas ===== */









@keyframes woodIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}



/* conteúdo interno: tábuas escuras com texto creme */
.card,.item{background:linear-gradient(180deg,rgba(26,15,8,.45),rgba(26,15,8,.62));color:var(--cream);
  box-shadow:inset 0 0 0 1.5px rgba(196,142,88,.55),inset 0 1px 0 rgba(255,220,160,.12)}
.card span,.item .tx span{color:var(--cream-dim)}







/* ===== passo 3: botões tábua ===== */









/* controles: discos de madeira */






/* ===== passo 8: cartão do personagem ===== */




@keyframes cardHit{0%{transform:translateX(0)}20%{transform:translateX(-4px)}45%{transform:translateX(3px)}70%{transform:translateX(-2px)}100%{transform:none}}













/* ===== passo 10: recarga com véu branco ===== */







@keyframes readyPop{0%{transform:scale(.9);box-shadow:inset 0 0 0 2px var(--gold),0 0 0 0 rgba(242,193,78,.8)}
  60%{transform:scale(1.08);box-shadow:inset 0 0 0 2px var(--gold),0 0 0 8px rgba(242,193,78,0)}100%{transform:scale(1)}}

/* ===== passo 11: minimapa ===== */




@keyframes mmPulse{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.6);opacity:0}}


/* ===== passo 12a: barra lateral + janela de missões ===== */








.wbtn{width:28px;height:28px;border-radius:8px;border:1.5px solid var(--wood-900);background:rgba(26,15,8,.5);color:var(--cream);font:900 16px/1 var(--font-title);cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(196,142,88,.5);position:relative}
.wbtn::before{content:"";position:absolute;inset:-8px}
.wbtn:active{transform:scale(.9)}


















/* ===== escala da interface por tamanho de tela ===== */
:root{--ui:1}








/* tamanhos-base um pouco menores */






/* ===== passo 12b: chat ===== */













/* ===== passo 9: barra de nível/XP + capim ===== */









/* ===== passo 12c: mochila ===== */














/* ===== passo 12d: configurações ===== */










/* ===== passo 17: tela de título ===== */



.logo{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 44px}
.logo::before,.logo::after{content:"";position:absolute;top:2px;width:64px;height:64px;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGcgc3Ryb2tlPSIjMWY0YTFiIiBzdHJva2Utd2lkdGg9IjEuNiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTYgNDBDOCAyMiAyMiAxMCA0NCA4QzQwIDI2IDI2IDM4IDYgNDBaIiBmaWxsPSIjNGY5YTNhIi8+PHBhdGggZD0iTTggMzhDMTggMjggMjggMjAgNDAgMTIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzhmZDE2YSIgc3Ryb2tlLXdpZHRoPSIxLjQiLz48cGF0aCBkPSJNNCAzMEMyIDE4IDggNiAyMCAyQzI0IDE0IDE4IDI2IDQgMzBaIiBmaWxsPSIjM2Q4MDMwIi8+PHBhdGggZD0iTTE0IDQ2QzI2IDQwIDQwIDQyIDUwIDU0QzM2IDYwIDIyIDU4IDE0IDQ2WiIgZmlsbD0iIzVmYWU0NSIvPjxwYXRoIGQ9Ik0xNiA0NkMyOCA0NyAzOCA1MCA0OCA1NCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYTZlMDdhIiBzdHJva2Utd2lkdGg9IjEuMyIvPjwvZz48L3N2Zz4K) center/contain no-repeat;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.45))}
.logo::before{left:-4px;transform:rotate(-20deg)}
.logo::after{right:-4px;transform:scaleX(-1) rotate(-20deg)}


.ribbon{position:relative;margin-top:-6px;padding:4px 22px;font-family:var(--font-title);font-size:16px;letter-spacing:.6px;color:var(--cream);
  background:linear-gradient(180deg,#4f9a3a,#2f6b22);border:2px solid var(--wood-900);border-radius:6px;box-shadow:inset 0 0 0 1.5px rgba(242,193,78,.7),0 3px 0 var(--wood-900);
  text-shadow:0 2px 0 rgba(26,15,8,.6)}



@keyframes logoIn{from{opacity:0;transform:translateY(-18px) scale(.9)}to{opacity:1;transform:none}}
@media (max-height:460px){.logo::before,.logo::after{width:52px;height:52px}}
/* ===== tela inicial A ===== */












@media (max-height:360px){
  
  .ribbon{font-size:13px;padding:2px 14px}
  
  
  
  
  
}
/* ===== tela inicial B: painel de classes ===== */


















@keyframes heroSwap{0%{transform:scale(.7);opacity:.2}100%{transform:none;opacity:1}}

/* ===== tela inicial C: vagas ===== */















@media (max-width:820px){.ribbon{font-size:12px;padding:2px 12px}}


/* ===== tela inicial D: editar/apagar ===== */

















/* ===== classe travada ===== */



/* ===== chás da Vovó Anta ===== */





/* ===== fim de run ===== */



#endStats{display:flex;gap:8px;justify-content:center;max-width:none}







/* ===== desmaio ===== */


@keyframes faintAn{0%{opacity:1;background-color:#000}15%{opacity:1}70%{opacity:1}100%{opacity:0}}



/* ===== tela de carregamento ===== */



@keyframes ldOut{from{opacity:1}to{opacity:0}}







@keyframes ldFill{0%{width:4%}60%{width:70%}100%{width:100%}}



/* ===== grade da mochila ===== */














/* ===== detalhe do item ===== */












/* ===== tela de equipamento ===== */




















/* ===== status ===== */



























/* ===== nível de classe ===== */




/* ===== menu de skills ===== */

#skDlg,#achDlg,#mapDlg{z-index:42}


#pName{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


#achCnt{font:800 12px var(--font-body,inherit);color:var(--cream-dim)}
































/* ===== vender ===== */







/* ===== bandeja de chás ===== */








/* ===== receitas ===== */





/* ===== reforço ===== */

.glow{animation:upGlow 1.6s ease-in-out infinite}
@keyframes upGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(242,193,78,0))}50%{filter:drop-shadow(0 0 6px rgba(242,193,78,.8))}}
@media (prefers-reduced-motion: reduce){.glow{animation:none;filter:drop-shadow(0 0 4px rgba(242,193,78,.6))}}
/* ===== barra lateral recolhível ===== */



#rbMenu{font:400 20px var(--font-title);color:var(--cream);position:relative}



/* ===== passo 44: acessibilidade ===== */
.wbtn{width:32px;height:32px;font-size:18px}





.cl small,.sks2 small,.skn small,.hv2,.es small,.an small{font-size:11px!important}

.skr u,.igrid .ic u{font-size:9.5px;line-height:12px}


button:focus-visible,[role=button]:focus-visible{outline:3px solid #ffe08a!important;outline-offset:2px}
#optSfx button,#optMus button{min-width:48px;padding:6px 8px}
.fly{position:fixed;z-index:60;pointer-events:none;font-size:16px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}

/* ===== talentos ===== */
















/* ---------- controles por toque: joystick invisível e toque para andar/mirar ---------- */
#tzone{position:absolute;inset:0;z-index:5;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}




.ico{width:1.5em;height:1.5em;object-fit:contain;image-rendering:pixelated;vertical-align:middle;pointer-events:none;-webkit-user-drag:none}

/* ---------- login e Worldbase ---------- */

























































@media (max-height:480px){#lgGo{padding:8px 12px}}
/* ---------- inventário em três colunas ---------- */











































/* ---------- cofre em duas metades ---------- */


















/* ---------- janelas arrastáveis ---------- */




/* ===== UI2 · fundação (P0): tokens ===== */
:root{
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;
  --r1:8px;--r2:12px;--r3:18px;--rp:999px;
  --t-fast:120ms;--t-mid:240ms;--t-slow:400ms;
  --ease-in:cubic-bezier(.55,0,1,.45);--ease-io:cubic-bezier(.65,0,.35,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --ui-bg1:#2b1a10;--ui-bg2:#3d2616;--ui-bg3:#553621;--ui-wood:#8a5a34;--ui-wood-hi:#c48e58;
  --ui-ink:#f6e7c8;--ui-dim:#d9c39a;--ui-line:rgba(196,142,88,.55);--ui-line-soft:rgba(196,142,88,.3);
  --ui-gold:#f2c14e;--ui-ok:#8fd16a;--ui-danger:#e5534b;--ui-info:#7fd0ff;--ui-edge:#1a0f08;
  --ui-panel:linear-gradient(180deg,rgba(84,52,28,.94),rgba(48,29,16,.95));
  --ui-sh1:0 3px 0 rgba(26,15,8,.55);--ui-sh2:0 8px 18px rgba(0,0,0,.4);
  --ui:1;
}
/* superfície padrão de HUD */
#pcard,#capimEl,#roomEl,#rail,.win,#xpbar .bar{--k:1}
/* ===== UI2 · P1: HUD de jogo ===== */
#hud{position:absolute;inset:0 0 auto 0;z-index:10;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);pointer-events:none;
  padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
#hearts{display:none!important}
#pcard{display:flex;align-items:center;gap:var(--s2);padding:5px 12px 5px 5px;border-radius:var(--r3);border:2px solid var(--ui-edge);color:var(--ui-ink);
  background:var(--ui-panel);box-shadow:inset 0 0 0 1.5px var(--ui-line),var(--ui-sh1),var(--ui-sh2);scale:var(--ui);transform-origin:top left}
#pcard.hit{animation:cardHit 320ms var(--ease-out)}
@keyframes cardHit{0%{transform:none}20%{transform:translateX(-4px)}45%{transform:translateX(3px)}70%{transform:translateX(-2px)}100%{transform:none}}
.pf{position:relative;width:46px;height:46px;flex:none;border-radius:50%;background:radial-gradient(circle at 50% 35%,#c9e9a6,#5e9a46);box-shadow:0 0 0 2px var(--ui-edge),0 0 0 4px var(--ui-gold)}
.pf canvas{width:46px;height:46px;border-radius:50%;image-rendering:pixelated;display:block}
#pBadge{position:absolute;left:-7px;bottom:-7px;min-width:22px;height:22px;padding:0 3px;box-sizing:border-box;border-radius:11px;display:grid;place-items:center;
  font:400 12px/1 var(--font-title);color:var(--ui-ink);background:var(--ui-bg2);box-shadow:0 0 0 2px var(--ui-gold)}
.pi{display:flex;flex-direction:column;gap:3px;min-width:138px}
.pi b{font:400 14px/1 var(--font-title);letter-spacing:.4px;text-shadow:0 2px 0 var(--ui-edge);white-space:nowrap}
.bar{position:relative;height:12px;border-radius:7px;background:rgba(10,6,3,.72);box-shadow:inset 0 0 0 1.5px var(--ui-line-soft);overflow:hidden}
.bar i{position:absolute;inset:2px auto 2px 2px;max-width:calc(100% - 4px);border-radius:5px;transition:width var(--t-mid) var(--ease-out)}
.bar span{position:relative;display:block;text-align:center;font:900 10px/12px Nunito,sans-serif;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.85)}
.bar.hp{height:15px}.bar.hp span{line-height:15px;font-size:11px}
.bar.hp i{background:linear-gradient(180deg,#8be26a,#3f9a2c)}
.bar.hp.low i{background:linear-gradient(180deg,#ff8a7a,#d63a2e);animation:lowHp 900ms ease-in-out infinite}
@keyframes lowHp{50%{filter:brightness(1.35)}}
.bar.sta{height:7px}.bar.sta i{background:linear-gradient(180deg,#8fd0ff,#2f7fd0);transition-duration:80ms}
.bar.dash{display:none}
#hud .r{display:flex;align-items:flex-start;gap:var(--s2);scale:var(--ui);transform-origin:top right}
.chip{display:inline-flex;align-items:center;min-height:30px;padding:3px 12px;border-radius:var(--rp);border:2px solid var(--ui-edge);color:var(--ui-gold);
  font:400 15px var(--font-title);white-space:nowrap;background:var(--ui-panel);box-shadow:inset 0 0 0 1.5px var(--ui-line),var(--ui-sh1)}
#capimEl{margin-top:4px;transition:transform var(--t-fast) var(--spring)}
#capimEl.pop{animation:readyPop 300ms var(--spring)}
#mini{position:relative;width:76px;height:76px;border-radius:50%;flex:none;box-shadow:0 0 0 2px var(--ui-edge),0 0 0 4px var(--ui-wood),0 0 0 6px var(--ui-edge),var(--ui-sh2)}
#mini canvas{width:76px;height:76px;border-radius:50%;display:block}
#mmPulse{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 2px var(--ui-gold);animation:mmPulse 1.4s var(--ease-out) infinite}
@keyframes mmPulse{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.6);opacity:0}}
#roomEl{white-space:nowrap;position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);min-height:0;padding:1px 9px;font:400 12px var(--font-title);color:var(--ui-ink)}
/* barra lateral: um botão; o resto abre em gaveta e fecha sozinho */
#rail{position:absolute;left:max(12px,env(safe-area-inset-left));top:calc(max(8px,env(safe-area-inset-top)) + 70px*var(--ui));z-index:10;display:grid;grid-template-columns:repeat(2,40px);gap:6px;padding:6px;
  border-radius:var(--r2);border:2px solid var(--ui-edge);background:var(--ui-panel);box-shadow:inset 0 0 0 1.5px var(--ui-line),var(--ui-sh1),var(--ui-sh2);scale:var(--ui);transform-origin:top left}
#rail:not(.open){grid-template-columns:40px;padding:4px;background:transparent;border-color:transparent;box-shadow:none}
@media (min-height:520px){#rail.open{grid-template-columns:40px}}
.rb{position:relative;width:40px;height:40px;border-radius:var(--r2);border:2px solid var(--ui-edge);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;color:var(--ui-ink);
  background:linear-gradient(180deg,#7a4a26,var(--ui-bg3));box-shadow:inset 0 2px 0 rgba(255,230,190,.18),0 2px 0 var(--ui-edge);
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast),filter var(--t-fast)}
@media (hover:hover){.rb:hover{filter:brightness(1.12);transform:translateY(-1px)}}
.rb:active{transform:translateY(2px) scale(.94)}
.rb.on{box-shadow:inset 0 0 0 2px var(--ui-gold),inset 0 2px 0 rgba(255,230,190,.18),0 2px 0 var(--ui-edge)}
#rail .rb.more{display:none}
#rail.open .rb.more{display:grid;animation:railIn var(--t-mid) var(--ease-out) both}
#rail.open .rb.more:nth-of-type(n+4){animation-delay:30ms}#rail.open .rb.more:nth-of-type(n+6){animation-delay:60ms}#rail.open .rb.more:nth-of-type(n+8){animation-delay:90ms}
@keyframes railIn{from{opacity:0;transform:translateX(-8px) scale(.9)}to{opacity:1;transform:none}}
#rail.open #menuBadge{display:none}
#rail em,#menuBadge,#chatBadge,#stBadge,#skBadge,#achBadge{position:absolute;right:-6px;top:-6px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:9px;font:400 11px/18px var(--font-title);font-style:normal;text-align:center;
  color:#fff;background:var(--ui-danger);box-shadow:0 0 0 2px var(--ui-edge);animation:readyPop 360ms var(--spring)}
#rail em[hidden]{display:none}
/* janelas flutuantes (missões, chat, opções) */
.win{position:absolute;z-index:10;color:var(--ui-ink);border-radius:var(--r3);border:2px solid var(--ui-edge);background:var(--ui-panel);
  box-shadow:inset 0 0 0 1.5px var(--ui-line),var(--ui-sh2);scale:var(--ui);
  transition:opacity var(--t-mid) var(--ease-out),transform var(--t-mid) var(--ease-out)}
.win.closed{opacity:0;transform:translateY(-6px) scale(.97);pointer-events:none}
.win header{display:flex;align-items:center;gap:6px;min-height:32px;padding:3px 6px 3px 12px;border-bottom:1.5px solid var(--ui-line-soft)}
.win header b{flex:1;font:400 15px var(--font-title);letter-spacing:.4px;cursor:pointer;text-shadow:0 2px 0 var(--ui-edge)}
.win .wb{display:flex;flex-direction:column;gap:6px;padding:8px 12px 10px;overflow:hidden;max-height:220px;transition:max-height var(--t-mid) var(--ease-out),padding var(--t-mid) var(--ease-out)}
.win.min .wb{max-height:0;padding-block:0}.win.min header{border-bottom-color:transparent}
.wbtn{width:28px;height:28px;border-radius:var(--r1);border:1.5px solid var(--ui-edge);background:rgba(26,15,8,.5);color:var(--ui-ink);font:900 16px/1 var(--font-title);cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--ui-line);position:relative;transition:transform var(--t-fast) var(--ease-out),filter var(--t-fast)}
.wbtn::before{content:"";position:absolute;inset:-8px}
@media (hover:hover){.wbtn:hover{filter:brightness(1.25)}}
.wbtn:active{transform:scale(.9)}
.wbtn.send{width:34px;height:auto;color:var(--ui-gold)}
#quest{right:max(12px,env(safe-area-inset-right));top:calc(max(8px,env(safe-area-inset-top)) + 100px*var(--ui));min-width:200px;max-width:260px;transform-origin:top right}
#quest.closed{transform:translateX(12px) scale(.97)}
.q{display:flex;align-items:center;gap:7px}
.q i{flex:none;width:14px;height:14px;border-radius:50%;border:2px solid var(--ui-ok);box-sizing:border-box}
.q.done i{background:var(--ui-ok);box-shadow:inset 0 0 0 2px var(--ui-bg2)}
.q b{font-size:13px;font-weight:900;white-space:nowrap}.q.done b{color:var(--ui-ok)}
.q span{margin-left:auto;padding-left:8px;font-size:12px;font-weight:700;color:var(--ui-dim);white-space:nowrap}
#chat{left:max(12px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));width:290px;transform-origin:bottom left}
#chat.closed{transform:translateY(10px) scale(.97)}
#chat .wb{max-height:170px}
#chatLog{max-height:92px;min-height:60px;overflow-y:auto;display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.3;touch-action:pan-y;user-select:text;-webkit-user-select:text}
.cm b{font-weight:900;color:var(--ui-ok)}.cm.sys b{color:var(--ui-gold)}.cm.me b{color:#9fd8ff}.cm.npc b{color:#ffb88a}.cm span{color:var(--ui-ink)}
#chatForm{display:flex;gap:6px;margin-top:4px}
#chatIn{flex:1;min-width:0;font:700 13px Nunito,sans-serif;color:var(--ui-ink);background:rgba(14,8,4,.6);border:1.5px solid var(--ui-line);border-radius:var(--r1);padding:6px 8px;user-select:text;-webkit-user-select:text;touch-action:manipulation}
#chatIn::placeholder{color:rgba(217,195,154,.6)}#chatIn:focus{outline:2px solid var(--ui-gold);outline-offset:1px}
#opt .wb{max-height:260px}
#opt{left:calc(max(12px,env(safe-area-inset-left)) + 92px*var(--ui));top:calc(max(8px,env(safe-area-inset-top)) + 70px*var(--ui));width:340px;z-index:30;transform-origin:top left}
#opt.closed{transform:translateX(-12px) scale(.97)}
.orow{display:flex;align-items:center;justify-content:space-between;gap:10px}.orow span{font-size:13px;font-weight:900}
.seg{display:flex;border-radius:var(--r1);overflow:hidden;border:1.5px solid var(--ui-edge);box-shadow:inset 0 0 0 1px var(--ui-line)}
.seg button{font:400 13px var(--font-title);color:var(--ui-dim);background:rgba(14,8,4,.45);border:0;padding:7px 10px;min-width:36px;min-height:34px;cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.seg button+button{border-left:1px solid var(--ui-line-soft)}
.seg button.sel,.seg button.on{background:linear-gradient(180deg,#ffd978,#c98f2c);color:var(--ui-bg1)}
.seg button:active{filter:brightness(.9)}

/* faixa de nível: fina, no rodapé, sem cobrir o centro do campo */
#xpbar{position:absolute;left:50%;bottom:max(6px,env(safe-area-inset-bottom));translate:-50% 0;width:min(340px,42vw);z-index:9;scale:var(--ui);transform-origin:bottom center;
  display:flex;align-items:center;gap:var(--s2);pointer-events:none;color:var(--ui-ink)}
#lvlEl{font:400 12px var(--font-title);white-space:nowrap;text-shadow:0 1px 0 var(--ui-edge),0 0 4px rgba(0,0,0,.8)}
#lvlEl.up{animation:readyPop 500ms var(--spring);color:var(--ui-gold)}
.xps{flex:1;display:flex;flex-direction:column;gap:2px}
.bar.xp{height:7px}.bar.xp i{background:linear-gradient(180deg,#9fe07a,#4f9a3a)}
.bar.cxp{height:4px}.bar.cxp i{background:linear-gradient(180deg,#d9a6ff,#8a4fd1)}
.bar.xp span,.bar.cxp span{display:none}
/* comandos de combate: ataque grande no canto, habilidades em arco */
#controls{position:absolute;inset:auto 0 0 0;z-index:10;height:0;pointer-events:none}
#controls>*{pointer-events:auto}
#stick{display:none!important}
.btns{position:absolute;right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));width:212px;height:152px;scale:var(--ui);transform-origin:bottom right}
.btns .row,.btns .potw{display:contents}
.cbtn{position:absolute;border-radius:50%;border:2px solid var(--ui-edge);color:var(--ui-ink);font:400 14px/1.1 var(--font-title);touch-action:none;display:flex;align-items:center;justify-content:center;text-align:center;padding:0;cursor:pointer;
  text-shadow:0 1px 0 rgba(0,0,0,.6);background:radial-gradient(circle at 50% 32%,#8a5a34,#3d2616 78%);
  box-shadow:inset 0 0 0 2px var(--ui-line),inset 0 2px 0 rgba(255,230,190,.2),0 3px 0 var(--ui-edge),0 6px 12px rgba(0,0,0,.35);
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast),filter var(--t-fast)}
.cbtn.down{transform:translateY(2px) scale(.92);transition-duration:70ms}
#btnAtk{right:0;bottom:0;width:84px;height:84px;font-size:18px;letter-spacing:.6px;background:radial-gradient(circle at 50% 30%,#b57a42,#6b4021 72%);
  box-shadow:inset 0 0 0 3px var(--ui-gold),inset 0 4px 0 rgba(255,230,190,.25),0 4px 0 var(--ui-edge),0 8px 16px rgba(0,0,0,.4)}
#btnAtk.down{transform:translateY(3px) scale(.94);box-shadow:inset 0 0 0 3px var(--ui-gold),0 1px 0 var(--ui-edge)}
#btnAtk.armed{background:radial-gradient(circle at 50% 30%,#ffe9a8,#e0a52c 72%);box-shadow:inset 0 0 0 3px #fff3c4,0 4px 0 var(--ui-edge),0 0 20px rgba(255,217,120,.8);color:var(--ui-bg1)}
#btnAtk.pick{background:radial-gradient(circle at 50% 30%,#7fd0ff,#2f7fb0 72%);box-shadow:inset 0 0 0 3px #bfe9ff,0 4px 0 var(--ui-edge),0 0 18px rgba(127,208,255,.6)}
.cbtn.sk{width:52px;height:52px;font-size:22px;overflow:hidden;isolation:isolate;--cd:0}
#btnS1{right:102px;bottom:8px}#btnS2{right:88px;bottom:63px}#btnS3{right:44px;bottom:97px}#btnS4{right:157px;bottom:54px}
#btnPot{right:-2px;bottom:103px;width:44px;height:44px;font-size:20px;overflow:visible}
#btnPot em{position:absolute;right:-4px;top:-4px;min-width:18px;height:18px;border-radius:9px;font:400 11px/18px var(--font-title);font-style:normal;color:var(--ui-bg1);background:var(--ui-gold);box-shadow:0 0 0 2px var(--ui-edge)}
#btnPot.empty{opacity:.5}#btnPot.empty em{background:var(--ui-dim)}
#btnDash{display:none!important}
.cbtn.sk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--cd)*100%);z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.5) 16%,rgba(255,255,255,.42));backdrop-filter:blur(3px) saturate(.6);-webkit-backdrop-filter:blur(3px) saturate(.6);box-shadow:0 -6px 10px rgba(255,255,255,.35)}
.cbtn.sk .ic{position:relative;z-index:0;font-size:22px;line-height:1}
.cbtn.sk .ico{width:34px;height:34px}
.cbtn.sk .cdn{position:absolute;inset:0;z-index:2;display:grid;place-items:center;font:400 20px var(--font-title);color:var(--ui-bg1);text-shadow:0 0 4px rgba(255,255,255,.9),0 1px 0 #fff}
.cbtn.sk.cooling .ic{filter:grayscale(.6)}
.cbtn.sk.nosta{filter:brightness(.5) saturate(.6)}
.cbtn.sk.none{opacity:.35}
.cbtn.sk.pas{border-style:dashed;filter:saturate(.8)}
.cbtn.sk.sel{transform:translateY(-6px);box-shadow:inset 0 0 0 3px #ffd978,0 0 0 2px var(--ui-edge),0 0 16px rgba(255,217,120,.85);filter:brightness(1.12)}
.cbtn.ready{animation:readyPop 420ms var(--spring)}
@keyframes readyPop{0%{transform:scale(.9)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
#controls.hub .sk,#controls.hub #btnPot{visibility:hidden}
#teaTray{position:absolute;right:0;bottom:calc(100% + 8px);display:flex;flex-direction:column-reverse;gap:6px;padding:6px;border-radius:var(--r2);border:2px solid var(--ui-edge);background:var(--ui-panel);
  box-shadow:inset 0 0 0 1.5px var(--ui-line),var(--ui-sh2);opacity:0;transform:translateY(6px) scale(.95);pointer-events:none;transition:opacity var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
#teaTray.open{opacity:1;transform:none;pointer-events:auto}#teaTray:empty,#controls.hub #teaTray{display:none}
#teaTray button{position:relative;width:44px;height:44px;border-radius:50%;font-size:20px;cursor:pointer;border:1.5px solid var(--ui-edge);color:var(--ui-ink);background:radial-gradient(circle at 50% 32%,#8a5a34,#3d2616 78%)}
#teaTray button:active{transform:scale(.9)}
#teaTray em{position:absolute;right:-4px;top:-4px;min-width:16px;height:16px;border-radius:8px;font:400 10px/16px var(--font-title);font-style:normal;color:var(--ui-bg1);background:var(--ui-gold)}
@media (max-height:380px){.btns{width:196px;height:146px}#btnAtk{width:76px;height:76px}.cbtn.sk{width:48px;height:48px}}
/* ===== UI2 · P2: botões globais, janela (shell), abas, células, Personagem, cofre ===== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:0;padding:8px 18px;border-radius:var(--r2);border:2px solid var(--ui-edge);cursor:pointer;
  font:400 16px/1.1 var(--font-title);letter-spacing:.4px;color:var(--ui-ink);text-shadow:0 2px 0 rgba(26,15,8,.55);
  background:linear-gradient(180deg,#6fbf4c,#3f8a2e 55%,#2f6b22);
  box-shadow:inset 0 0 0 2px rgba(242,193,78,.8),inset 0 3px 0 rgba(255,255,255,.22),0 3px 0 var(--ui-edge),0 6px 12px rgba(0,0,0,.3);
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast),filter var(--t-fast)}
@media (hover:hover){.btn:hover{filter:brightness(1.08)}}
.btn:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px rgba(242,193,78,.8),0 1px 0 var(--ui-edge)}
.btn:focus-visible{outline:3px solid var(--ui-gold);outline-offset:2px}
.btn:disabled,.btn.off{opacity:.45;filter:grayscale(.6);pointer-events:none}
.btn.alt{background:linear-gradient(180deg,#9a6638,#7a4a26 60%,#5e3a1e);box-shadow:inset 0 0 0 2px var(--ui-line),inset 0 3px 0 rgba(255,230,190,.18),0 3px 0 var(--ui-edge),0 6px 12px rgba(0,0,0,.3)}
.btn.alt:active{box-shadow:inset 0 0 0 2px var(--ui-line),0 1px 0 var(--ui-edge)}
.btn.gold{min-width:240px;min-height:54px;font-size:24px;letter-spacing:1.5px;text-transform:uppercase;color:#4a2a10;text-shadow:0 1px 0 rgba(255,240,200,.6);
  background:linear-gradient(180deg,#ffe08a,#f2b33a 55%,#d08a1f);box-shadow:inset 0 0 0 2px rgba(255,248,220,.7),inset 0 3px 0 rgba(255,255,255,.4),0 4px 0 var(--ui-edge),0 10px 18px rgba(0,0,0,.4)}
.btn.gold:active{box-shadow:inset 0 0 0 2px rgba(255,248,220,.7),0 1px 0 var(--ui-edge)}
.btn.danger{background:linear-gradient(180deg,#e0705c,#b23f2c 60%,#8a2c1e);box-shadow:inset 0 0 0 2px rgba(255,200,180,.6),inset 0 3px 0 rgba(255,255,255,.2),0 3px 0 var(--ui-edge),0 6px 12px rgba(0,0,0,.3)}
.btn.quick{grid-column:1/-1;justify-self:center;font-size:15px;min-height:42px}
.btn.sm{min-height:32px;padding:4px 10px;font-size:12px;border-radius:var(--r1)}
.pill{display:inline-flex;align-items:center;gap:4px;min-height:26px;padding:3px 12px;border-radius:var(--rp);background:rgba(246,231,200,.12);color:var(--ui-ink);font:800 12.5px Nunito,sans-serif;white-space:nowrap}
.pill.has{background:var(--ui-gold);color:var(--ui-bg1)}
/* janela padrão: cabeçalho, corpo, rodapé */
.shell{position:relative;display:flex;flex-direction:column;width:min(1000px,98vw);height:min(96vh,560px);border-radius:var(--r3);border:2px solid var(--ui-edge);color:var(--ui-ink);text-align:left;overflow:hidden;
  background:linear-gradient(180deg,#34200f,#241508);box-shadow:inset 0 0 0 1.5px var(--ui-line),0 14px 40px rgba(0,0,0,.55)}
.whd{display:flex;align-items:center;gap:var(--s2);min-height:48px;padding:6px 10px 6px 14px;border-bottom:2px solid rgba(138,90,52,.55);background:rgba(10,6,3,.35);flex:none}
.whd>b{font:400 20px var(--font-title);letter-spacing:.4px;text-shadow:0 2px 0 var(--ui-edge);margin-right:auto}
.whd .tabbar{margin-right:auto}
.shb{flex:1;min-height:0;position:relative}
.shf{display:flex;align-items:center;gap:var(--s2);padding:8px 12px;border-top:2px solid rgba(138,90,52,.55);background:rgba(10,6,3,.35);flex:none}
.tabbar{display:flex;gap:4px;padding:3px;border-radius:var(--rp);background:rgba(10,6,3,.5);box-shadow:inset 0 0 0 1.5px var(--ui-line-soft)}
.tabbar button{position:relative;min-height:32px;padding:4px 14px;border:0;border-radius:var(--rp);background:transparent;color:var(--ui-dim);font:400 14px var(--font-title);letter-spacing:.3px;cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease-out)}
@media (hover:hover){.tabbar button:not(.on):hover{color:var(--ui-ink);background:rgba(246,231,200,.08)}}
.tabbar button:active{transform:scale(.96)}
.tabbar button.on{background:linear-gradient(180deg,#ffd978,#c98f2c);color:var(--ui-bg1)}
.tabbar button:focus-visible{outline:3px solid var(--ui-gold);outline-offset:1px}
.tabbar em{position:absolute;right:-2px;top:-3px;min-width:15px;height:15px;padding:0 3px;box-sizing:border-box;border-radius:8px;font:400 10px/15px var(--font-title);font-style:normal;text-align:center;color:#fff;background:var(--ui-danger);box-shadow:0 0 0 2px #241508}
.tabbar em[hidden]{display:none}
.pg{position:absolute;inset:0;display:grid;gap:10px;padding:10px;animation:pgIn var(--t-mid) var(--ease-out) both}
.pg[hidden]{display:none}
@keyframes pgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pane{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:var(--r2);background:rgba(43,26,16,.7);border:2px solid rgba(138,90,52,.5)}
.panehead{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.panehead>b{font:900 11px Nunito,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-gold);margin-right:auto}
.field,.wbbar input[type=search],.wbbar select{min-width:0;padding:7px 10px;border-radius:10px;border:2px solid var(--ui-bg3);background:#fff8e6;color:var(--ui-bg1);font:700 13px Nunito,sans-serif}
.field:focus,.wbbar input:focus,.wbbar select:focus{outline:3px solid var(--ui-gold);outline-offset:1px}
select.field,.wbbar select{background:var(--ui-bg2);color:var(--ui-ink);font-size:12px}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chips button{min-height:30px;padding:3px 11px;border-radius:var(--rp);border:1.5px solid var(--ui-line);background:rgba(10,6,3,.4);color:var(--ui-ink);font:800 11px Nunito,sans-serif;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease-out)}
.chips button:active{transform:scale(.95)}.chips button.on{background:var(--ui-gold);border-color:var(--ui-gold);color:var(--ui-bg1)}
.chips button:focus-visible{outline:3px solid var(--ui-gold);outline-offset:1px}
.selbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font:800 12px Nunito,sans-serif;color:var(--ui-dim)}
/* células de item */
.ig2{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px;align-content:start}
.icl{position:relative;aspect-ratio:1;display:grid;place-items:center;padding:0;border-radius:11px;border:2px solid var(--rc,var(--ui-line));cursor:pointer;color:var(--ui-ink);font:inherit;
  background:radial-gradient(circle at 50% 30%,rgba(60,38,22,.9),rgba(20,12,6,.85));
  transition:transform var(--t-fast) var(--ease-out),filter var(--t-fast),box-shadow var(--t-fast)}
@media (hover:hover){.icl:not(.empty):hover{transform:translateY(-1px);filter:brightness(1.14)}}
.icl:not(.empty):active{transform:scale(.94)}
.icl:focus-visible{outline:3px solid var(--ui-gold);outline-offset:2px}
.icl>span{width:100%;height:100%;display:grid;place-items:center;font-size:22px;line-height:1}.icl .ico{width:74%;height:74%}
.icl em{position:absolute;left:3px;top:1px;font:900 10px Nunito,sans-serif;font-style:normal;color:var(--rc)}
.icl b{position:absolute;right:3px;bottom:1px;font:900 10.5px Nunito,sans-serif;text-shadow:0 1px 1px #000}
.icl i{position:absolute;right:3px;top:1px;font:900 9.5px Nunito,sans-serif;font-style:normal;color:var(--ui-gold)}
.icl u{position:absolute;left:2px;bottom:2px;text-decoration:none;font:900 8.5px/11px Nunito,sans-serif;color:var(--ui-bg1);background:var(--ui-gold);border-radius:3px;padding:0 3px}
.icl.empty{border:1.5px dashed rgba(196,142,88,.25);background:rgba(14,8,4,.3);cursor:default}
.icl.glow{box-shadow:0 0 8px var(--rc)}
.icl.chk::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;border-radius:9px;background:rgba(242,193,78,.45);font:900 20px Nunito,sans-serif;color:var(--ui-bg1)}
.icl.new::before{content:"";position:absolute;right:-3px;top:-3px;width:10px;height:10px;border-radius:50%;background:var(--ui-danger);border:2px solid #241508}
/* Personagem: abas Equipamento · Atributos · Habilidades · Talentos */
#invDlg,#vtDlg{z-index:44}
.pg-inv{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.pg-attr{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.pg-sk,.pg-tl{display:block;overflow:auto}

.invname{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.invname b{font:400 22px var(--font-title);margin-right:4px}











.sb{display:flex;flex-direction:column;font-size:11.5px;line-height:1.3;color:var(--ui-dim);padding:2px 2px 0}.sb b{font-size:12.5px;color:var(--ui-ink)}.sb.act b{color:var(--ui-gold)}
.attrgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.attrgrid .ar{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r2);background:rgba(20,12,6,.5);border:2px solid transparent}
.attrgrid .ar.main{border-color:rgba(242,193,78,.55)}.attrgrid .ai{font-size:22px;width:30px;text-align:center;flex:none}.attrgrid .ai .ico{width:28px;height:28px}
.attrgrid .an{flex:1;min-width:0}.attrgrid .an b{display:block;font:800 13px Nunito,sans-serif}.attrgrid .an small{display:block;font:700 10.5px Nunito,sans-serif;color:var(--ui-dim)}
.attrgrid .av{min-width:26px;text-align:center;font:900 15px Nunito,sans-serif}.attrgrid .av.pend{color:var(--ui-gold)}
.pm{position:relative;width:34px;height:34px;flex:none;border-radius:9px;border:1.5px solid var(--ui-edge);background:linear-gradient(180deg,#ffd978,#c98f2c);color:var(--ui-bg1);font:900 18px/1 Nunito,sans-serif;cursor:pointer;box-shadow:0 2px 0 var(--ui-edge);
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast)}
.pm::before{content:"";position:absolute;inset:-5px}
.pm[data-d="-1"]{background:linear-gradient(180deg,#a9713f,#6b4021);color:var(--ui-ink)}
.pm:disabled{opacity:.3;cursor:default}.pm:active:not(:disabled){transform:translateY(2px);box-shadow:none}
.derlist{display:flex;flex-direction:column;gap:5px}.dr{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:10px;background:rgba(20,12,6,.5);font:700 12.5px Nunito,sans-serif}
.dr span{flex:1;min-width:0;color:var(--ui-dim)}.dr b{font-weight:900}.dr em{font-style:normal;color:var(--ui-ok);font-size:11px}
/* habilidades e talentos */
.skbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px}
#skPts{font:900 13px Nunito,sans-serif;color:var(--ui-dim);padding:3px 12px;border-radius:var(--rp);background:rgba(246,231,200,.12)}#skPts.has{color:#fff;background:#8a4fd1}
.bld{display:flex;gap:4px}.bld button{min-height:30px;font:400 12px var(--font-title);padding:3px 12px;border-radius:var(--rp);border:1.5px solid var(--ui-line);background:rgba(10,6,3,.4);color:var(--ui-ink);cursor:pointer}
.bld button.on{background:#8a4fd1;border-color:#8a4fd1;color:#fff}
.skcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:10px;min-height:0}
#skList{display:flex;flex-direction:column;gap:4px;overflow-y:auto;padding-right:2px;max-height:calc(min(96vh,560px) - 140px)}.skside{overflow-y:auto;max-height:calc(min(96vh,560px) - 140px)}
.skcat{font:400 12px var(--font-title);letter-spacing:.5px;color:var(--cc);margin:4px 2px 0}
.skr{position:relative;display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;cursor:pointer;color:var(--ui-ink);text-align:left;font:inherit;
  background:rgba(14,8,4,.45);border:1.5px solid var(--ui-line-soft);border-left:4px solid var(--cc);transition:background var(--t-fast),transform var(--t-fast) var(--ease-out)}
.skr:active{transform:scale(.98)}.skr.sel{border-color:var(--ui-gold);border-left-color:var(--cc);background:rgba(242,193,78,.12)}.skr.locked{opacity:.65}
.ski{font-size:20px;text-align:center}.ski.big{font-size:28px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:rgba(14,8,4,.5);border:2px solid var(--cc)}
.skn b{display:block;font-size:13px;font-weight:900}.skn small{display:block;font-size:11px;color:var(--ui-dim)}
.pips{display:flex;gap:2px}.pips i{width:7px;height:7px;border-radius:2px;background:rgba(246,231,200,.18)}.pips i.on{background:var(--ui-gold)}
.skr u{position:absolute;right:4px;top:2px;text-decoration:none;font:900 9.5px/12px Nunito,sans-serif;color:var(--ui-bg1);background:var(--ui-gold);border-radius:3px;padding:0 3px}
.skh{display:flex;gap:10px;align-items:center}.skh b{display:block;font:400 18px var(--font-title)}.skh small{font-size:11px;color:var(--ui-dim)}
#skInfo p{font-size:12.5px;color:var(--ui-dim);margin:6px 0}
.skst{display:flex;flex-direction:column;gap:2px;font-size:12.5px;font-weight:800;padding:6px 8px;border-radius:10px;background:rgba(14,8,4,.45)}
#skInfo .drow{margin-top:8px}.drow{display:flex;gap:8px;margin-top:12px}.drow .btn{flex:1;min-width:0}
.lh{display:block;font-size:10.5px;font-weight:900;color:var(--ui-dim);text-align:right;margin-bottom:2px}
.skeq{margin-left:auto}
#skLoad{display:flex;gap:8px;justify-content:flex-end}
.sls{position:relative;width:42px;height:42px;border-radius:50%;cursor:pointer;font:inherit;color:var(--ui-ink);background:rgba(14,8,4,.5);border:2px dashed var(--ui-line);transition:transform var(--t-fast) var(--ease-out)}
.sls:active{transform:scale(.92)}.sls.on{border:2px solid var(--cc);background:radial-gradient(circle at 50% 35%,rgba(138,90,52,.7),rgba(14,8,4,.6))}
.sls span{font-size:22px}.sls small{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;background:var(--ui-bg2);box-shadow:0 0 0 1.5px var(--ui-line);font:900 11px/18px Nunito,sans-serif}
.tlh{font-size:12px;color:var(--ui-dim);margin:2px 2px 8px}.tlh b{color:var(--ui-gold)}
.tlgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tlc{display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:var(--r2);background:rgba(14,8,4,.45);border:1.5px solid var(--ui-line-soft)}
.tlc.sel{box-shadow:inset 0 0 0 2px var(--ui-gold),0 0 14px rgba(242,193,78,.3)}
.tlt{display:flex;align-items:center;gap:6px}.tlt span{font-size:22px}.tlt b{font:400 17px var(--font-title)}.tlc small{font-size:11.5px;color:var(--ui-dim)}
.tlc ol{list-style:none;margin:2px 0;padding:0;display:flex;flex-direction:column;gap:3px}
.tlc li{font-size:12px;font-weight:800;color:rgba(246,231,200,.45);padding:3px 6px;border-radius:6px}.tlc li em{font-style:normal;font-size:10.5px;margin-right:6px;color:var(--ui-dim)}
.tlc li.on{color:var(--ui-ok);background:rgba(143,209,106,.12)}.tlc li.can{color:var(--ui-gold)}
.tlc .btn{margin-top:auto}.tlok{margin-top:auto;text-align:center;font:400 13px var(--font-title);color:var(--ui-gold)}
/* cofre */
.pg-vt{grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr)}
.vthalf{min-height:0;display:flex;flex-direction:column;gap:7px;padding:10px;border-radius:var(--r2);background:rgba(43,26,16,.7);border:2px solid rgba(138,90,52,.5);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.vthalf.over{border-color:var(--ui-gold);box-shadow:0 0 0 3px rgba(242,193,78,.35)}
.vthead{display:flex;gap:6px;align-items:center}.vthead b{font:400 17px var(--font-title);margin-right:auto}.vthead .field{width:42%;padding:6px 8px;font-size:12px}
.vtacts{display:flex;gap:6px}.vtgrid{flex:1;min-height:0;overflow:auto;align-content:start;touch-action:pan-y}
.vtgrid .icl{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.vtmid{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:8px;text-align:center}.vtmid small{font:700 10.5px/1.3 Nunito,sans-serif;color:var(--ui-dim)}
.vtfoot span,.shf span{margin-right:auto;font:700 12.5px Nunito,sans-serif;color:var(--ui-dim);min-width:0}
.vtghost{position:fixed;z-index:80;pointer-events:none;width:54px;height:54px;border-radius:11px;border:2px solid var(--ui-gold);background:rgba(20,12,6,.9);display:grid;place-items:center;transform:translate(-50%,-60%) scale(1.1);box-shadow:0 6px 16px rgba(0,0,0,.5)}
.vtghost[hidden]{display:none}
.vtghost .ico{width:74%;height:74%}.vtghost b{position:absolute;right:-6px;top:-8px;padding:1px 6px;border-radius:var(--rp);background:var(--ui-gold);color:var(--ui-bg1);font:900 11px Nunito,sans-serif}
@media (max-height:480px){.invname b{font-size:18px}.pane{padding:8px;gap:6px}.pg{padding:8px;gap:8px}.whd{min-height:42px;padding-block:4px}.whd>b{font-size:17px}.tabbar button{min-height:28px;padding:2px 11px;font-size:13px}.chips button{min-height:26px;padding:2px 9px;font-size:10px}.field{padding:5px 8px;font-size:12px}.attrgrid .ar{padding:4px 6px}.attrgrid .an small{display:none}.pm{width:30px;height:30px}.dr{padding:4px 8px}.derlist{gap:3px}}
@media (max-width:760px){.pg-inv,.pg-attr,.pg-vt{grid-template-columns:1fr;overflow:auto}.pane{overflow:visible}.skcols,.tlgrid{grid-template-columns:1fr}.attrgrid{grid-template-columns:1fr}}
.dwin{position:relative;touch-action:pan-y;transform-origin:50% 50%}
.dwin header,.dwin h2,.dwin h3{touch-action:none;cursor:grab}
.wgrip{position:absolute;right:2px;bottom:2px;width:22px;height:22px;cursor:nwse-resize;touch-action:none;opacity:.55;z-index:3;
  background:linear-gradient(135deg,transparent 52%,var(--ui-dim) 52% 58%,transparent 58% 70%,var(--ui-dim) 70% 76%,transparent 76%);border-bottom-right-radius:16px}
.wgrip:hover{opacity:1}

@keyframes dlgPop{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.dlg:not([hidden])>*,.pg{animation:none}}
/* ===== UI2 · P3: janelas de NPC (loja, chás, armas, forja, classes, masmorras, mural, cofre antigo) ===== */
#panel{padding:10px}

@keyframes shellIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.shell.npc{height:auto;max-height:min(96vh,560px);width:min(780px,98vw);margin:auto 0}
.npcb{position:static;display:flex;flex-direction:column;gap:8px;overflow:hidden;padding:10px 12px;min-height:0}
.npcsay{position:relative;margin:0;padding:8px 12px 8px 34px;border-radius:var(--r2);background:rgba(246,231,200,.08);border:1.5px solid var(--ui-line-soft);color:var(--ui-dim);font:700 13px/1.35 Nunito,sans-serif;flex:none}
.npcsay::before{content:"“";position:absolute;left:10px;top:-2px;font:400 34px var(--font-title);color:var(--ui-gold);line-height:1}
#pBody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow-y:auto;min-height:0;padding:2px;align-content:start;touch-action:pan-y;-webkit-overflow-scrolling:touch}
#pBody *{touch-action:pan-y}
#pBody>:not(.item){grid-column:1/-1}
#pBody>*{animation:pgIn var(--t-mid) var(--ease-out) both}
#pBody>*:nth-child(2){animation-delay:30ms}#pBody>*:nth-child(3){animation-delay:60ms}#pBody>*:nth-child(n+4){animation-delay:90ms}
#pBtns{display:flex;gap:var(--s2);justify-content:flex-end;flex-wrap:wrap}
#pBtns:empty{display:none}
.wallet{font:400 15px var(--font-title);color:var(--ui-gold)}
.shell.npc .whd .pill{color:var(--ui-gold);font:400 14px var(--font-title)}
.setinfo{font:700 12px/1.4 Nunito,sans-serif;color:var(--ui-dim);padding:2px 4px}.setinfo.act{color:var(--ui-gold)}
.shh{grid-column:1/-1;display:flex;align-items:baseline;gap:8px;margin:4px 2px 0;font:900 11px Nunito,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-gold)}
.shh small{font:700 11px Nunito,sans-serif;letter-spacing:0;text-transform:none;color:var(--ui-dim)}
.item{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:var(--r2);color:var(--ui-ink);text-align:left;background:linear-gradient(180deg,rgba(26,15,8,.5),rgba(26,15,8,.65));
  box-shadow:inset 0 0 0 1.5px var(--ui-line-soft)}
.item.rar{box-shadow:inset 0 0 0 1.5px var(--rc)}.item.rcp.can{box-shadow:inset 0 0 0 1.5px var(--ui-ok)}
.item.bought{animation:readyPop 420ms var(--spring)}
.item .ic{flex:none;width:44px;height:44px;display:grid;place-items:center;font-size:24px;border-radius:10px;background:radial-gradient(circle at 50% 30%,rgba(60,38,22,.9),rgba(20,12,6,.85));box-shadow:inset 0 0 0 2px var(--rc,var(--ui-line-soft))}
.item .ic .ico{width:76%;height:76%}
.item .tx{flex:1;min-width:0}.item .tx b{display:block;font:800 14px Nunito,sans-serif}.item .tx span{display:block;font-size:12px;color:var(--ui-dim);line-height:1.3}
.item .hv{font-style:normal;color:var(--ui-gold);font-weight:900}
.pl,.item .tx b small{display:inline!important;color:var(--ui-gold);font:400 13px var(--font-title)}
.hv2{display:block;font-size:10.5px;color:var(--ui-dim);margin-top:2px}
.ings{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}.ing{font-size:11.5px;font-weight:900;padding:1px 6px;border-radius:6px;background:rgba(14,8,4,.5);color:#ffb0a0}
.ing.ok{color:var(--ui-ok);box-shadow:inset 0 0 0 1px rgba(143,209,106,.35)}
.mini{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:40px;min-width:44px;padding:6px 14px;border-radius:var(--r2);border:2px solid var(--ui-edge);cursor:pointer;
  font:400 15px var(--font-title);letter-spacing:.3px;color:var(--ui-bg1);background:linear-gradient(180deg,#ffd978,#f2c14e 55%,#c98f2c);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 3px 0 var(--ui-edge);
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast),filter var(--t-fast)}
@media (hover:hover){.mini:hover{filter:brightness(1.08)}}
.mini:active{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 1px 0 var(--ui-edge)}
.mini:focus-visible{outline:3px solid var(--ui-gold);outline-offset:2px}
.mini.on{background:linear-gradient(180deg,#8fd16a,#4f9a3a);color:var(--ui-bg1)}
.mini.off{filter:grayscale(.85) brightness(.7);pointer-events:none}
.item .mini+.mini{margin-left:4px}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:3px;border-radius:16px;background:rgba(10,6,3,.5);box-shadow:inset 0 0 0 1.5px var(--ui-line-soft);width:fit-content;justify-self:center;max-width:100%}
.tabs button{min-height:32px;min-width:0;padding:4px 14px;border:0;border-radius:var(--rp);background:transparent;color:var(--ui-dim);font:400 14px var(--font-title);letter-spacing:.3px;cursor:pointer;box-shadow:none;
  transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease-out)}
.tabs button:active{transform:scale(.96)}
.tabs button.on{background:linear-gradient(180deg,#ffd978,#c98f2c);color:var(--ui-bg1);box-shadow:none}
.tabs button.mini.off{filter:none;opacity:.5}
.nq{display:grid;grid-template-columns:1fr auto;column-gap:10px;row-gap:2px;align-items:center;padding:8px 12px;border-radius:var(--r2);background:rgba(242,193,78,.08);border:1.5px solid rgba(242,193,78,.4)}
.nq b{grid-column:1;font:400 15px var(--font-title);color:var(--ui-gold)}
.nq span{grid-column:1;font:700 12px/1.35 Nunito,sans-serif;color:var(--ui-ink)}
.nq small{grid-column:1;font:800 11px Nunito,sans-serif;color:var(--ui-dim)}
.nq .mini{grid-column:2;grid-row:1/span 4;align-self:center}
.nq{cursor:pointer}.nq b::after{content:" ▾";font-size:11px;color:var(--ui-dim)}.nq.open b::after{content:" ▴"}
.nq:not(.open) span,.nq:not(.open) small+small{display:none}
@media (max-width:700px){#pBody{grid-template-columns:1fr}}
@media (max-height:480px){.shell.npc{max-height:96vh}.npcsay{padding-block:5px;font-size:12px}.item{padding:6px 8px}.item .ic{width:38px;height:38px}.nq{padding:6px 10px}.mini{min-height:36px}}
@media (prefers-reduced-motion:reduce){#pBody>*,.overlay.show>.shell{animation:none}}
/* ===== UI2 · P4: caixas de diálogo, login e Worldbase ===== */
.dlg{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:rgba(14,8,4,.6);animation:ovIn var(--t-mid) var(--ease-out)}
.dlg[hidden]{display:none}
.dlg:not([hidden])>*:not(.vtghost){animation:dlgPop var(--t-fast) var(--ease-out)}
.dbox{width:min(360px,92%);padding:16px 18px;border-radius:var(--r3);border:2px solid var(--ui-edge);color:var(--ui-ink);text-align:left;scale:var(--ui);
  background:linear-gradient(180deg,#34200f,#241508);box-shadow:inset 0 0 0 1.5px var(--ui-line),0 14px 40px rgba(0,0,0,.55)}
.dbox h3{margin:0 0 8px;font:400 20px var(--font-title);letter-spacing:.3px;text-shadow:0 2px 0 var(--ui-edge)}
.dbox p{margin:0 0 10px;font-size:13px;line-height:1.35;color:var(--ui-dim)}
.dbox label{display:block;margin-bottom:3px;font:900 11px Nunito,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ui-dim)}
.dbox .field,.dbox textarea{width:100%;box-sizing:border-box}
.dbox textarea{padding:8px;border-radius:10px;border:2px solid var(--ui-bg3);background:#fff8e6;color:var(--ui-bg1);font:12px/1.3 monospace}
.dlink{display:block;margin:12px auto 0;min-height:32px;background:none;border:0;color:#ff9a8a;font:800 13px Nunito,sans-serif;text-decoration:underline;cursor:pointer}
.dlink:disabled{color:var(--ui-dim);text-decoration:none;cursor:default;font-size:12px}
/* login: marca à esquerda, formulário à direita (cabe em 390 px de altura) */
#login,#wb{background:radial-gradient(120% 90% at 50% 0%,#3a2515 0%,#1f1209 70%);color:var(--ui-ink)}
#login{padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
#login .lgbox{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,370px);gap:var(--s5);align-items:center;width:min(820px,100%);margin:auto}
.lgbrand{display:flex;flex-direction:column;align-items:center;gap:var(--s2);text-align:center}
#login .logo h1{position:relative;margin:0;font:400 clamp(38px,7vw,60px)/1.05 var(--font-title);letter-spacing:1.5px;text-transform:uppercase;color:#2b1a10;-webkit-text-stroke:9px #2b1a10;text-shadow:0 6px 0 #2b1a10,0 10px 14px rgba(0,0,0,.5)}
#login .logo h1::after{content:attr(data-t);position:absolute;inset:0;-webkit-text-stroke:0;text-shadow:none;color:transparent;background:linear-gradient(180deg,#fff6dc 0%,#f6e7c8 42%,#f2c14e 74%,#c98f2c 100%);-webkit-background-clip:text;background-clip:text}
#login.show .logo{animation:logoIn 600ms var(--spring) both}
@keyframes logoIn{from{opacity:0;transform:translateY(-18px) scale(.9)}to{opacity:1;transform:none}}
#lgHero{width:min(120px,26vh);height:min(120px,26vh);image-rendering:pixelated;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.lgtag{margin:0;font:700 13px Nunito,sans-serif;color:var(--ui-dim)}
.lgcard{box-sizing:border-box;width:100%;display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:var(--r3);background:rgba(43,26,16,.94);border:2px solid var(--ui-edge);box-shadow:inset 0 0 0 1.5px var(--ui-line),0 10px 30px rgba(0,0,0,.45)}
.lgcard label{margin-top:2px;font:800 10.5px Nunito,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-dim)}
.lgcard .field{width:100%;box-sizing:border-box;padding:9px 12px;font-size:15px}
.lgtabs{width:100%;margin-bottom:2px}.lgtabs button{flex:1}
.lgchk{display:flex;gap:8px;align-items:center;text-transform:none!important;letter-spacing:0!important;font-size:12.5px!important;margin-top:4px!important}
.lgerr{min-height:16px;margin:0;color:#ff9f8a;font:700 12.5px Nunito,sans-serif}.lgnote{opacity:.75;text-align:center;margin:0}
#lgGo{width:100%;min-width:0;min-height:48px;font-size:20px}
@media (max-width:700px){#login .lgbox{grid-template-columns:1fr;gap:var(--s3)}#lgHero{display:none}}
@media (max-height:480px){#login .lgbox{gap:var(--s4)}#login .ribbon,.lgnote{display:none}.lgcard{padding:10px 12px;gap:3px}.lgcard .field{padding:6px 10px}#lgGo{min-height:42px;font-size:18px}.lgtag{display:none}}
/* Worldbase */
#wb{display:none;flex-direction:column;padding:0;overflow:hidden;align-items:stretch;justify-content:flex-start;text-align:left;gap:0}#wb.show{display:flex}
.wbh{display:flex;align-items:center;gap:var(--s3);padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));border-bottom:2px solid rgba(138,90,52,.55);background:rgba(20,12,6,.55);flex:none}
.wblogo{font:400 20px var(--font-title);color:var(--ui-gold);flex:none;text-shadow:0 2px 0 var(--ui-edge)}
#wbTabs{display:flex;gap:4px;overflow-x:auto;flex:1;min-width:0;padding:3px;border-radius:var(--rp);background:rgba(10,6,3,.5);box-shadow:inset 0 0 0 1.5px var(--ui-line-soft);scrollbar-width:none}#wbTabs::-webkit-scrollbar{display:none}
#wbTabs button{flex:none;min-height:32px;padding:4px 14px;border:0;border-radius:var(--rp);background:transparent;color:var(--ui-dim);font:400 14px var(--font-title);letter-spacing:.3px;cursor:pointer;transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease-out)}
#wbTabs button:active{transform:scale(.96)}#wbTabs button.on{background:linear-gradient(180deg,#ffd978,#c98f2c);color:var(--ui-bg1)}
.wbacc{display:flex;gap:6px;flex:none}
.wbpill{min-height:34px;padding:4px 14px;border-radius:var(--rp);border:2px solid var(--ui-edge);background:rgba(61,38,22,.8);color:var(--ui-ink);font:800 12px Nunito,sans-serif;cursor:pointer;box-shadow:inset 0 0 0 1px var(--ui-line-soft);transition:filter var(--t-fast),transform var(--t-fast) var(--ease-out)}
@media (hover:hover){.wbpill:hover{filter:brightness(1.2)}}.wbpill:active{transform:scale(.96)}
#wbBody{flex:1;min-height:0;overflow:auto;padding:12px max(12px,env(safe-area-inset-right)) 14px max(12px,env(safe-area-inset-left))}
body.wbopen #opt{z-index:70}
.pc{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(220px,1fr);gap:12px;height:100%;min-height:260px}
.pcstage{position:relative;border-radius:var(--r3);border:2px solid rgba(138,90,52,.55);overflow:hidden;background:radial-gradient(70% 60% at 50% 62%,rgba(120,170,255,.25),transparent 70%),linear-gradient(#1b2c4a,#2a2036 60%,#2b1a10)}
.pcstage canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);image-rendering:pixelated;max-height:92%;max-width:70%}
.pcthumbs{position:absolute;left:10px;top:10px;bottom:10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;scrollbar-width:none;z-index:2}
.pcthumbs button{position:relative;width:58px;height:58px;flex:none;border-radius:var(--r2);border:2px solid rgba(246,231,200,.3);background:rgba(20,12,6,.7);color:var(--ui-ink);font-size:24px;cursor:pointer;transition:transform var(--t-fast) var(--ease-out),border-color var(--t-fast)}
.pcthumbs button:active{transform:scale(.94)}.pcthumbs button.sel{border-color:var(--ui-gold);box-shadow:0 0 0 2px rgba(242,193,78,.4)}
.pcthumbs button em{position:absolute;right:2px;bottom:1px;font:900 10px Nunito,sans-serif;font-style:normal;background:var(--ui-bg1);border-radius:6px;padding:0 4px}
.pcarr{position:absolute;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:50%;border:none;background:rgba(10,6,3,.6);color:var(--ui-ink);font-size:20px;cursor:pointer;z-index:2;transition:transform var(--t-fast) var(--ease-out)}.pcarr:active{transform:scale(.92)}
.pcarr.l{left:78px}.pcarr.r{right:12px}
.pclv{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);padding:5px 14px;border-radius:var(--rp);background:rgba(246,231,200,.92);color:#2b1a10;font:900 13px Nunito,sans-serif}
.pcinfo{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:14px;border-radius:var(--r3);border:2px solid rgba(138,90,52,.55);background:rgba(43,26,16,.85)}
.pcinfo h2{margin:0;font:400 30px var(--font-title);color:var(--ui-ink)}
.pcinfo p{margin:0;display:flex;gap:8px;align-items:center;color:var(--ui-dim);font:700 13px Nunito,sans-serif}
.pcinfo .btn.gold{width:100%;margin-top:6px;font-size:19px}.pcrow{display:flex;gap:8px}.pcrow .btn{flex:1;padding:8px 10px}
.pcnote{padding:8px 10px;border-radius:10px;background:rgba(111,209,106,.15);color:#c9f2b8;font:700 12px Nunito,sans-serif}
.pcempty{display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;height:100%;text-align:center;color:var(--ui-dim)}
.wbbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.wbbar input[type=search]{flex:1;min-width:140px}
.chips,.wbchips{display:flex;gap:6px;flex-wrap:wrap}
.wbchips button{min-height:30px;padding:3px 11px;border-radius:var(--rp);border:1.5px solid var(--ui-line);background:rgba(10,6,3,.4);color:var(--ui-ink);font:800 11px Nunito,sans-serif;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease-out)}
.wbchips button:active{transform:scale(.95)}.wbchips button.on{background:var(--ui-gold);border-color:var(--ui-gold);color:var(--ui-bg1)}
.wbsplit{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,1fr);gap:12px;align-items:start}
.wbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.wbcard{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border-radius:var(--r2);border:2px solid rgba(138,90,52,.5);background:rgba(61,38,22,.75);color:var(--ui-ink);cursor:pointer;text-align:center;font:inherit;transition:transform var(--t-fast) var(--ease-out),border-color var(--t-fast)}
.wbcard:active{transform:scale(.97)}.wbcard.sel{border-color:var(--ui-gold)}.wbcard .wic{font-size:30px;line-height:1;height:38px;display:grid;place-items:center}.wbcard .wic .ico{width:36px;height:36px}
.wbcard b{font:800 12px Nunito,sans-serif;line-height:1.15}.wbcard small{font:700 10px Nunito,sans-serif;color:var(--ui-dim)}
.wbdet{position:sticky;top:0;padding:14px;border-radius:var(--r3);border:2px solid rgba(138,90,52,.55);background:rgba(43,26,16,.9);display:flex;flex-direction:column;gap:8px}
.wbdet h3{margin:0;font:400 22px var(--font-title);color:var(--ui-ink)}.wbdet .wdh{display:flex;gap:10px;align-items:center}.wbdet .wdh .wic{font-size:44px}.wbdet .wdh .wic .ico{width:56px;height:56px}
.wbdet p,.wbdet li{margin:0;color:var(--ui-dim);font:700 12.5px/1.35 Nunito,sans-serif}.wbdet ul{margin:0;padding-left:16px}.wbdet h4{margin:4px 0 0;font:900 10.5px Nunito,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-gold)}
.wbtag{display:inline-block;padding:2px 9px;border-radius:var(--rp);background:rgba(246,231,200,.12);color:var(--ui-ink);font:800 10.5px Nunito,sans-serif;margin:0 4px 4px 0}
.wblist{display:flex;flex-direction:column;gap:8px}.wbrow{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:var(--r2);border:2px solid rgba(138,90,52,.5);background:rgba(61,38,22,.75)}
.wbrow .wic{font-size:30px;width:44px;text-align:center;flex:none}.wbrow .wic .ico{width:40px;height:40px}.wbrow b{display:block;font:800 14px Nunito,sans-serif;color:var(--ui-ink)}.wbrow span{font:700 12px Nunito,sans-serif;color:var(--ui-dim)}
.wbrow .wcd{margin-left:auto;font:900 11px Nunito,sans-serif;color:var(--ui-gold);flex:none}.wbrow.done{border-color:#6fd16a}
.wbsec{margin:10px 0 6px;font:900 11px Nunito,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ui-gold)}
.acbtns{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.nccls{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:8px 0}
.nccls button{display:flex;gap:8px;align-items:center;min-height:44px;padding:8px 10px;border-radius:var(--r2);border:2px solid rgba(138,90,52,.5);background:rgba(61,38,22,.75);color:var(--ui-ink);font:800 13px Nunito,sans-serif;cursor:pointer;text-align:left;transition:transform var(--t-fast) var(--ease-out),border-color var(--t-fast)}
.nccls button:active{transform:scale(.97)}.nccls button.sel{border-color:var(--ui-gold);background:rgba(242,193,78,.18)}.nccls .ico{width:28px;height:28px}.ncinfo{font:700 12px/1.35 Nunito,sans-serif;color:var(--ui-dim);min-height:48px}
@media (max-width:820px){.pc{grid-template-columns:1fr}.pcstage{min-height:240px}.wbsplit{grid-template-columns:1fr}.wbdet{position:static}}
@media (max-height:480px){.wbh{padding-block:5px}.wblogo{display:none}.pc{min-height:0}.pcinfo{padding:10px;gap:6px}.pcinfo h2{font-size:24px}.nccls button{min-height:38px;padding:5px 8px}}
@media (prefers-reduced-motion:reduce){#login.show .logo{animation:none}}
/* ===== UI2 · P5: sobreposições e telas de evento (melhoria, fim de run, desmaio, subir de nível, viagem) ===== */
.overlay{position:absolute;inset:0;z-index:20;display:none;flex-direction:column;align-items:center;justify-content:safe center;gap:var(--s3);padding:var(--s4);text-align:center;overflow-y:auto;
  background:radial-gradient(110% 100% at 50% 40%,rgba(40,24,12,.55),rgba(14,8,4,.86));color:var(--ui-ink)}
.overlay.show{display:flex;animation:ovIn var(--t-mid) var(--ease-out) both}
.overlay.show>.shell{animation:shellIn var(--t-slow) var(--ease-out) both}
.shell.evt{height:auto;max-height:min(96vh,560px);width:min(680px,98vw);margin:auto 0}
.evb{position:static;display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:14px 16px;overflow:auto;min-height:0}
.evb .small{margin:0;max-width:520px;font:700 13px/1.4 Nunito,sans-serif;color:var(--ui-dim)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);width:100%}
.card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px 12px;border-radius:var(--r3);border:2px solid var(--ui-edge);text-align:center;cursor:pointer;color:var(--ui-ink);font:inherit;
  background:linear-gradient(180deg,rgba(84,52,28,.9),rgba(48,29,16,.95));box-shadow:inset 0 0 0 1.5px var(--ui-line),var(--ui-sh1);
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast),filter var(--t-fast)}
@media (hover:hover){.card:hover{transform:translateY(-3px);filter:brightness(1.08);box-shadow:inset 0 0 0 2px var(--ui-gold),var(--ui-sh2)}}
.card:active{transform:scale(.97)}.card:focus-visible{outline:3px solid var(--ui-gold);outline-offset:2px}
.card .ic{display:grid;place-items:center;width:56px;height:56px;font-size:34px;line-height:1;border-radius:50%;background:radial-gradient(circle at 50% 30%,rgba(60,38,22,.9),rgba(20,12,6,.85));box-shadow:inset 0 0 0 2px var(--ui-gold)}
.card .ic .ico{width:76%;height:76%}
.card b{display:block;font:400 17px var(--font-title);letter-spacing:.3px}.card span{display:block;font-size:12.5px;line-height:1.3;color:var(--ui-dim)}
#endIc{font-size:44px;line-height:1;filter:drop-shadow(0 3px 0 rgba(26,15,8,.6))}
#end.victory #endIc{animation:readyPop 600ms var(--spring)}#end.victory #endTitle{color:var(--ui-gold)}
.tiles,#endStats{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:var(--s2);width:100%}
.et{display:flex;flex-direction:column;align-items:center;min-width:92px;padding:8px 10px;border-radius:var(--r2);background:rgba(10,6,3,.45);box-shadow:inset 0 0 0 1.5px var(--ui-line-soft)}
.et span{font-size:18px;line-height:1.2}.et b{font:400 22px/1.1 var(--font-title);color:var(--ui-ink)}.et small{font:900 11px Nunito,sans-serif;color:var(--ui-dim)}
.et.rec{box-shadow:inset 0 0 0 2px var(--ui-gold)}.et.rec small{color:var(--ui-gold)}.et.bad b{color:#ff9f8a}.et.good b{color:var(--ui-ok)}
/* tela de desmaio com resumo da saída */
#deathDlg{z-index:46}
.dtkill{display:flex;align-items:center;gap:var(--s3);padding:8px 14px;border-radius:var(--r2);background:rgba(229,83,75,.12);box-shadow:inset 0 0 0 1.5px rgba(229,83,75,.45);text-align:left}
.dtkill .ic{font-size:38px;line-height:1}.dtkill small{display:block;font:900 10.5px Nunito,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-dim)}
.dtkill b{display:block;font:400 20px var(--font-title)}.dtkill span{font:700 12px Nunito,sans-serif;color:var(--ui-dim)}
/* subir de nível */
#lvup{position:absolute;left:50%;top:max(14%,60px);z-index:30;translate:-50% 0;display:none;flex-direction:column;align-items:center;gap:4px;padding:12px 22px;border-radius:var(--r3);border:2px solid var(--ui-edge);text-align:center;
  background:var(--ui-panel);box-shadow:inset 0 0 0 2px var(--ui-gold),0 0 30px rgba(242,193,78,.45),var(--ui-sh2);scale:var(--ui)}
#lvup.show{display:flex;animation:lvIn 520ms var(--spring) both}
@keyframes lvIn{0%{opacity:0;transform:translateY(-16px) scale(.8)}60%{transform:translateY(2px) scale(1.06)}100%{opacity:1;transform:none}}
#lvup b{font:400 30px var(--font-title);color:var(--ui-gold);text-shadow:0 3px 0 var(--ui-edge);letter-spacing:.6px}
#lvup span{font:800 13px Nunito,sans-serif;color:var(--ui-ink)}
/* viagem (carregamento ilustrado) */
#loading{position:absolute;inset:0;z-index:50;display:none;align-items:center;justify-content:center;color:var(--ui-ink);text-align:center;
  background:radial-gradient(90% 80% at 50% 45%,#3d2616,#140b05)}
#loading.show{display:flex;animation:ovIn 300ms var(--ease-out) forwards}
#loading.done{animation:ldOut 320ms var(--ease-out) forwards}
@keyframes ldOut{from{opacity:1}to{opacity:0}}
.ldbox{--ldw:min(300px,70vw);display:flex;flex-direction:column;align-items:center;gap:4px;scale:var(--ui)}
.ldbox small{font:900 12px Nunito,sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--ui-dim)}
.ldbox b{font:400 34px var(--font-title);letter-spacing:.6px;text-shadow:0 3px 0 #000}
.ldbox span{font:900 14px Nunito,sans-serif;color:var(--ui-gold)}
.ldtrack{position:relative;width:var(--ldw);margin-top:30px}
#ldHero{position:absolute;left:0;bottom:12px;width:48px;height:48px;image-rendering:pixelated;filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}
#loading.show #ldHero{animation:ldRun 1000ms cubic-bezier(.3,.7,.4,1) forwards,ldBob 220ms ease-in-out infinite alternate}
@keyframes ldRun{from{translate:0 0}to{translate:calc(var(--ldw) - 48px) 0}}
@keyframes ldBob{from{margin-bottom:0}to{margin-bottom:3px}}
.ldbar{width:100%;height:14px;border-radius:8px;border:2px solid var(--ui-edge);background:rgba(10,6,3,.7);box-shadow:inset 0 0 0 1.5px var(--ui-line-soft);overflow:hidden}
.ldbar i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(180deg,#9fe07a,#4f9a3a)}
#loading.show .ldbar i{animation:ldFill 1000ms cubic-bezier(.3,.7,.4,1) forwards}
@keyframes ldFill{0%{width:4%}60%{width:70%}100%{width:100%}}
.ldbox p{max-width:340px;margin:12px 0 0;font:700 12.5px/1.35 Nunito,sans-serif;color:var(--ui-dim)}
.ldbox p::before{content:"Dica: ";font-weight:900;color:var(--ui-ok)}
@media (max-width:640px){.cards{grid-template-columns:1fr}.card{flex-direction:row;text-align:left;padding:10px 12px}}
@media (max-height:480px){.evb{padding:10px 12px;gap:var(--s2)}.shell.evt{max-height:96vh}#endIc{display:none}.card{padding:10px 8px}.card .ic{width:44px;height:44px;font-size:26px}.dtkill .ic{font-size:30px}}
@media (prefers-reduced-motion:reduce){#loading.show #ldHero,#lvup.show{animation:none}}
/* ===== UI2 · P6: mapa, conquistas, cartão do item, efeitos ativos, abas do chat ===== */
#mapDlg,#achDlg{z-index:42}
.shell.modal{height:auto;max-height:min(96vh,560px);width:min(560px,98vw)}
.listb{position:static;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-height:0}
.ach{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r2);background:linear-gradient(180deg,rgba(26,15,8,.5),rgba(26,15,8,.65));box-shadow:inset 0 0 0 1.5px var(--ui-line-soft)}
.ach .ai{flex:none;width:36px;height:36px;display:grid;place-items:center;font-size:20px;border-radius:10px;background:rgba(14,8,4,.5);filter:grayscale(1);opacity:.5}
.ach.ok .ai{filter:none;opacity:1}.ach .ai .ico{width:80%;height:80%}
.ach .at{flex:1;min-width:0;display:flex;flex-direction:column;font:800 13px Nunito,sans-serif;color:var(--ui-ink)}
.ach .at span{font:700 11.5px Nunito,sans-serif;color:var(--ui-dim)}
.ach:not(.ok) .at b{color:rgba(246,231,200,.55)}
.ach .mini{min-height:34px;padding:3px 12px;font-size:13px}
.whd .pill{font-size:12px}
/* cartão do item */
#itemDlg{z-index:45}
.idbox{width:min(340px,92%);border-color:color-mix(in srgb,var(--rc) 65%,#1a0f08)!important;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--rc) 55%,transparent),0 0 24px color-mix(in srgb,var(--rc) 25%,transparent),0 14px 40px rgba(0,0,0,.55)}
.idh{display:flex;gap:12px;align-items:center;margin:-16px -18px 10px;padding:12px 18px;border-radius:calc(var(--r3) - 2px) calc(var(--r3) - 2px) 0 0;background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 28%,rgba(10,6,3,.4)),rgba(10,6,3,.35))}
.idi{width:52px;height:52px;flex:none;display:grid;place-items:center;font-size:30px;border-radius:var(--r2);background:radial-gradient(circle at 50% 30%,rgba(60,38,22,.9),rgba(20,12,6,.85));box-shadow:inset 0 0 0 2px var(--rc),0 0 14px color-mix(in srgb,var(--rc) 40%,transparent)}
.idi .ico{width:78%;height:78%}
.idh b{display:block;font:400 19px var(--font-title);color:var(--rc);text-shadow:0 2px 0 var(--ui-edge)}
.idh small{font:800 12px Nunito,sans-serif;color:var(--ui-dim)}
.istats{display:flex;flex-direction:column;gap:3px;margin:6px 0;padding:8px 10px;border-radius:10px;background:rgba(14,8,4,.45)}
.isr{display:grid;grid-template-columns:1fr auto 64px;gap:8px;font:800 13px Nunito,sans-serif}.isr b{color:var(--ui-ink)}.isr em{font-style:normal;font-size:12px;text-align:right}.isr em.up{color:#7dff9a}.isr em.dn{color:#ff8a7a}
.idn{font-size:11.5px!important;margin:2px 0!important;color:var(--ui-dim)}
.idbox .drow{flex-wrap:wrap}.idbox .drow .btn{min-width:84px;padding:6px 10px;font-size:14px;white-space:nowrap}
/* efeitos ativos com tempo */
#buffs{display:flex;flex-wrap:wrap;gap:6px;align-self:flex-start;margin:6px auto 0 0;pointer-events:none;scale:var(--ui);transform-origin:top left;max-width:46vw}
#buffs:empty{display:none}
.bf{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:18px;line-height:1;
  background:conic-gradient(var(--ui-ok) calc(var(--p,100)*1%),rgba(10,6,3,.6) 0);box-shadow:0 0 0 2px var(--ui-edge),var(--ui-sh1);animation:readyPop 320ms var(--spring)}
.bf::before{content:"";position:absolute;inset:3px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#4a2e1a,#241508)}
.bf span{position:relative}.bf.bad{background:conic-gradient(var(--ui-danger) calc(var(--p,100)*1%),rgba(10,6,3,.6) 0)}
.bf em{position:absolute;left:50%;bottom:-8px;translate:-50% 0;min-width:22px;padding:0 4px;border-radius:var(--rp);background:var(--ui-bg1);box-shadow:0 0 0 1.5px var(--ui-edge);font:900 10px/14px Nunito,sans-serif;font-style:normal;text-align:center;color:var(--ui-ink)}
/* chat: abas por categoria */
.cft{display:flex;gap:2px;margin-right:4px}.cft button{min-height:24px;padding:1px 9px;border:0;border-radius:var(--rp);background:transparent;color:var(--ui-dim);font:400 11px var(--font-title);cursor:pointer}
.cft button.on{background:var(--ui-gold);color:var(--ui-bg1)}
#chatLog[data-f="sys"] .cm:not(.sys){display:none}#chatLog[data-f="npc"] .cm:not(.npc):not(.me){display:none}
@media (max-width:640px){#buffs{max-width:30vw}}
/* ===== UI2 · profundidade (revisão com o usuário): relevo em botões, janelas e células ===== */
.btn{box-shadow:inset 0 0 0 2px rgba(242,193,78,.85),inset 0 3px 0 rgba(255,255,255,.32),inset 0 -5px 0 rgba(0,0,0,.24),0 5px 0 var(--ui-edge),0 10px 16px rgba(0,0,0,.42)}
.btn:active{transform:translateY(4px);box-shadow:inset 0 0 0 2px rgba(242,193,78,.85),inset 0 2px 0 rgba(255,255,255,.2),inset 0 -2px 0 rgba(0,0,0,.2),0 1px 0 var(--ui-edge),0 3px 6px rgba(0,0,0,.35)}
.btn.alt{box-shadow:inset 0 0 0 2px var(--ui-line),inset 0 3px 0 rgba(255,230,190,.22),inset 0 -5px 0 rgba(0,0,0,.28),0 5px 0 var(--ui-edge),0 10px 16px rgba(0,0,0,.42)}
.btn.alt:active{box-shadow:inset 0 0 0 2px var(--ui-line),inset 0 2px 0 rgba(255,230,190,.14),inset 0 -2px 0 rgba(0,0,0,.25),0 1px 0 var(--ui-edge),0 3px 6px rgba(0,0,0,.35)}
.btn.gold{box-shadow:inset 0 0 0 2px rgba(255,248,220,.75),inset 0 4px 0 rgba(255,255,255,.45),inset 0 -6px 0 rgba(140,80,10,.35),0 6px 0 var(--ui-edge),0 12px 20px rgba(0,0,0,.45)}
.btn.gold:active{transform:translateY(5px);box-shadow:inset 0 0 0 2px rgba(255,248,220,.75),inset 0 2px 0 rgba(255,255,255,.3),0 1px 0 var(--ui-edge),0 3px 8px rgba(0,0,0,.4)}
.btn.danger{box-shadow:inset 0 0 0 2px rgba(255,200,180,.65),inset 0 3px 0 rgba(255,255,255,.24),inset 0 -5px 0 rgba(0,0,0,.28),0 5px 0 var(--ui-edge),0 10px 16px rgba(0,0,0,.42)}
.btn.sm{box-shadow:inset 0 0 0 1.5px rgba(242,193,78,.8),inset 0 2px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.24),0 3px 0 var(--ui-edge),0 6px 10px rgba(0,0,0,.38)}
.btn.sm.alt{box-shadow:inset 0 0 0 1.5px var(--ui-line),inset 0 2px 0 rgba(255,230,190,.2),inset 0 -3px 0 rgba(0,0,0,.28),0 3px 0 var(--ui-edge),0 6px 10px rgba(0,0,0,.38)}
.btn.sm:active{transform:translateY(2px)}
.mini{box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -4px 0 rgba(120,70,10,.3),0 4px 0 var(--ui-edge),0 8px 12px rgba(0,0,0,.38)}
.mini:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 1px 0 var(--ui-edge)}
.wbtn{box-shadow:inset 0 0 0 1px var(--ui-line),inset 0 2px 0 rgba(255,225,180,.14),inset 0 -3px 0 rgba(0,0,0,.35),0 2px 0 var(--ui-edge)}
.wbtn:active{transform:translateY(2px) scale(.96);box-shadow:inset 0 0 0 1px var(--ui-line),0 0 0 var(--ui-edge)}
.pm{box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.28),0 3px 0 var(--ui-edge)}
/* janelas: moldura dupla com chanfro e sombra funda */
.shell,.dbox{box-shadow:inset 0 0 0 1.5px var(--ui-line),inset 0 3px 0 rgba(255,225,180,.1),inset 0 -4px 0 rgba(0,0,0,.4),0 0 0 2px #0e0803,0 20px 46px rgba(0,0,0,.62)}
.win{box-shadow:inset 0 0 0 1.5px var(--ui-line),inset 0 2px 0 rgba(255,225,180,.12),inset 0 -3px 0 rgba(0,0,0,.35),0 0 0 2px #0e0803,0 10px 22px rgba(0,0,0,.5)}
.whd{box-shadow:inset 0 -2px 0 rgba(0,0,0,.35),0 2px 0 rgba(255,225,180,.06);background:linear-gradient(180deg,rgba(255,225,180,.07),rgba(10,6,3,.4))}
.shf{box-shadow:inset 0 3px 0 rgba(0,0,0,.3),0 -2px 0 rgba(255,225,180,.05)}
/* painéis internos afundados */
.pane,.vthalf{box-shadow:inset 0 4px 10px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,225,180,.05),0 1px 0 rgba(255,225,180,.1)}
.field{box-shadow:inset 0 3px 5px rgba(0,0,0,.28)}
.tabbar,#wbTabs,.tabs{box-shadow:inset 0 3px 6px rgba(0,0,0,.55),inset 0 0 0 1.5px var(--ui-line-soft),0 1px 0 rgba(255,225,180,.1)}
.tabbar button.on,#wbTabs button.on,.tabs button.on{box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(120,70,10,.35),0 2px 0 #4a2e0a,0 3px 5px rgba(0,0,0,.4)}
.pill{box-shadow:inset 0 2px 4px rgba(0,0,0,.45),0 1px 0 rgba(255,225,180,.1)}
.chips button{box-shadow:inset 0 -2px 0 rgba(0,0,0,.3),0 2px 0 var(--ui-edge)}.chips button.on{box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 2px 0 #4a2e0a}
/* células e casas de equipamento: parecem encaixes entalhados */
.icl,.eqs{box-shadow:inset 0 4px 7px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.04),0 1px 0 rgba(255,225,180,.14)}
.icl.glow,.eqs.glow{box-shadow:inset 0 4px 7px rgba(0,0,0,.6),0 0 10px var(--rc)}
.item,.card,.et,.ach,.wbrow,.wbcard,.nq{box-shadow:inset 0 0 0 1.5px var(--ui-line-soft),inset 0 2px 0 rgba(255,225,180,.07),0 3px 0 rgba(0,0,0,.45)}
.item.rar{box-shadow:inset 0 0 0 1.5px var(--rc),inset 0 2px 0 rgba(255,225,180,.07),0 3px 0 rgba(0,0,0,.45)}
.rb{box-shadow:inset 0 2px 0 rgba(255,230,190,.2),inset 0 -3px 0 rgba(0,0,0,.3),0 3px 0 var(--ui-edge)}
.rb.on{box-shadow:inset 0 0 0 2px var(--ui-gold),inset 0 -3px 0 rgba(0,0,0,.3),0 3px 0 var(--ui-edge)}
.cbtn{box-shadow:inset 0 0 0 2px var(--ui-line),inset 0 3px 0 rgba(255,230,190,.22),inset 0 -5px 0 rgba(0,0,0,.3),0 4px 0 var(--ui-edge),0 8px 14px rgba(0,0,0,.4)}
#btnAtk{box-shadow:inset 0 0 0 3px var(--ui-gold),inset 0 5px 0 rgba(255,230,190,.28),inset 0 -7px 0 rgba(0,0,0,.28),0 6px 0 var(--ui-edge),0 12px 20px rgba(0,0,0,.45)}
/* botões de fechar: sempre vermelhos */
.wbtn[aria-label="Fechar"],.idbox [data-a="x"]{color:#fff;text-shadow:0 1px 0 rgba(90,10,6,.7);border-color:var(--ui-edge);
  background:linear-gradient(180deg,#f0705f,#d2402f 55%,#a82a1e);
  box-shadow:inset 0 0 0 1px rgba(255,210,195,.55),inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(80,10,6,.4),0 2px 0 var(--ui-edge)}
.wbtn[aria-label="Fechar"]{width:30px;height:30px;font-size:19px}
@media (hover:hover){.wbtn[aria-label="Fechar"]:hover,.idbox [data-a="x"]:hover{filter:brightness(1.12)}}
.wbtn[aria-label="Fechar"]:active,.idbox [data-a="x"]:active{box-shadow:inset 0 0 0 1px rgba(255,210,195,.5),inset 0 -1px 0 rgba(80,10,6,.4),0 0 0 var(--ui-edge)}
/* ===== UI2 · Personagem: casas de equipamento em anel ao redor do boneco, com o tipo escrito embaixo ===== */
#invDlg .shell{--eqs:clamp(34px,calc((100vh - 200px)/6.2),50px);--lab:9px}
.invsum{display:flex;gap:6px;flex-wrap:wrap}.invsum span{padding:2px 9px;border-radius:var(--rp);background:rgba(246,231,200,.1);font:800 11.5px Nunito,sans-serif;color:var(--ui-dim)}
.eqring{position:relative;flex:1;min-height:170px}
.eqring #invCv{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(36%,150px);image-rendering:pixelated;border-radius:50%;background:radial-gradient(circle,rgba(120,170,255,.22),transparent 68%)}
.eqs{--hw:calc(var(--eqs)/2 + 10px);--hh:calc(var(--eqs)/2 + 7px);position:absolute;left:calc(50% + var(--sx)*(50% - var(--hw)));top:calc(50% + var(--sy)*(50% - var(--hh)) - 4px);translate:-50% -50%;
  width:var(--eqs);height:var(--eqs);display:grid;place-items:center;padding:0;border-radius:50%;border:2px solid var(--rc,rgba(246,231,200,.3));cursor:pointer;color:rgba(246,231,200,.35);
  background:radial-gradient(circle at 50% 30%,rgba(60,38,22,.9),rgba(20,12,6,.85));transition:scale var(--t-fast) var(--ease-out),filter var(--t-fast)}
@media (hover:hover){.eqs:hover{filter:brightness(1.15)}}
.eqs:active{scale:.93}.eqs:focus-visible{outline:3px solid var(--ui-gold);outline-offset:2px}
.eqs.on{color:var(--ui-ink)}
.eqs>span{width:100%;height:100%;display:grid;place-items:center;font-size:calc(var(--eqs)*.5)}.eqs .ico{width:74%;height:74%}
.eqs i{position:absolute;right:-2px;top:-2px;padding:0 4px;border-radius:var(--rp);background:var(--ui-gold);color:var(--ui-bg1);font:900 9.5px/13px Nunito,sans-serif;font-style:normal}
.eqs small{position:absolute;left:50%;top:100%;translate:-50% 2px;white-space:nowrap;font:800 var(--lab)/1 Nunito,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--ui-dim);text-shadow:0 1px 0 #000}
.eqs.on small{color:var(--ui-ink)}
@media (max-height:400px){.invsum{display:none}}
/* ===== UI2 · Personagem: coluna do boneco de ponta a ponta, borda fina; mochila à direita com a moldura normal ===== */
#invDlg .shell{display:grid;grid-template-columns:0 minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);--heroW:min(330px,40vw)}
#invDlg .shell.hero-on{grid-template-columns:var(--heroW) minmax(0,1fr)}
#invDlg .whd{grid-column:2;grid-row:1}
#invDlg .shb{grid-column:2;grid-row:2}
.herocol{grid-column:1;grid-row:1/3;display:none;flex-direction:column;min-width:0;min-height:0;border-right:1px solid rgba(196,142,88,.45);
  background:radial-gradient(80% 55% at 50% 50%,rgba(120,170,255,.10),transparent 70%),linear-gradient(180deg,rgba(10,6,3,.35),rgba(10,6,3,.55));box-shadow:inset -6px 0 12px rgba(0,0,0,.25)}
#invDlg .shell.hero-on .herocol{display:flex}
.herocol .invname{padding:10px 12px 0}
.herocol .eqring{margin:0 6px 6px}
.pg-inv{grid-template-columns:minmax(0,1fr)}
#invDlg .whd .tabbar button{padding:3px 7px;font-size:12px;min-height:30px}
#invDlg .shell.hero-on .whd .tabbar{margin-right:2px}
#invDlg .whd{gap:6px;padding:6px 8px 6px 10px}
#invDlg .whd .pill{padding:2px 9px;font-size:12px}
#invDlg .whd .tabbar{margin-right:auto;min-width:0}
.herocol .eqring #invCv{width:min(46%,160px)}
/*FORGE-CSS-BEGIN*/
/* Interface Forge: editor de menus com ponteiro virtual (fonte em src/forge; juntado por tools/build.py) */
#forge{position:fixed;inset:0;z-index:9000;display:none;touch-action:none;-webkit-user-select:none;user-select:none;font-family:Nunito,system-ui,sans-serif}
body.forge-on #forge{display:block}
#forge *{box-sizing:border-box}
#fgGrid,#fgSafe,#fgBox,#fgGuides,#fgCur{position:fixed;pointer-events:none}
#fgGrid{background-image:linear-gradient(to right,rgba(127,208,255,.22) 1px,transparent 1px),linear-gradient(to bottom,rgba(127,208,255,.22) 1px,transparent 1px)}
#fgGrid.maj{background-image:linear-gradient(to right,rgba(127,208,255,.22) 1px,transparent 1px),linear-gradient(to bottom,rgba(127,208,255,.22) 1px,transparent 1px)}
#fgSafe i{position:absolute;display:none;background:rgba(229,83,75,.28);border:1px dashed rgba(255,150,140,.8)}
#fgSafe .tv{inset:5%;background:transparent;border:2px dashed rgba(255,208,90,.85)}
#fgBox{border:1.5px solid #ffd84a;box-shadow:0 0 0 1px rgba(0,0,0,.6);display:none}
#fgBox b{position:absolute;left:0;top:-17px;padding:1px 6px;border-radius:5px;background:#ffd84a;color:#241508;font:900 10px/14px Nunito,sans-serif;white-space:nowrap;max-width:60vw;overflow:hidden;text-overflow:ellipsis}
#fgBox i{position:absolute;width:10px;height:10px;margin:-5px;border-radius:2px;background:#fff;border:1.5px solid #241508}
#fgGuides i{position:fixed;background:#ff3fa4;box-shadow:0 0 4px #ff3fa4}
#fgCur{left:0;top:0;width:26px;height:26px;z-index:9100;will-change:transform}
#fgCur svg{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
#fgCur.hold svg path{fill:#ff6a5c}
/* barra e painel (clicados só pelo ponteiro, a menos que "Toque livre" esteja ligado) */
#fgUI{position:fixed;left:0;right:calc(min(236px,36vw) + 14px);top:0;pointer-events:auto}
.fgbar{display:flex;gap:4px;align-items:center;flex-wrap:wrap;overflow:hidden;padding:4px 6px;background:rgba(20,12,6,.94);border-bottom:2px solid #8a5a34}
.fgb{flex:none;min-height:26px;padding:2px 7px;border-radius:8px;border:1.5px solid #1a0f08;background:linear-gradient(180deg,#9a6638,#6b4021);color:#f6e7c8;font:400 12px 'Lilita One',Nunito,sans-serif;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 0 #1a0f08;white-space:nowrap}
.fgb.on{background:linear-gradient(180deg,#ffd978,#c98f2c);color:#241508}
.fgb.red{background:linear-gradient(180deg,#f0705f,#a82a1e)}
.fgb.sm{padding:1px 6px;min-height:22px}
.fgsep{flex:none;width:1px;height:22px;background:#8a5a34;margin:0 2px}
#fgSide{position:fixed;left:6px;top:var(--fgtop,64px);bottom:var(--fgbot,6px);width:196px;display:flex;flex-direction:column;border-radius:12px;background:rgba(20,12,6,.93);border:2px solid #8a5a34;color:#f6e7c8;font-size:12px;pointer-events:auto;overflow:hidden}
#fgSide.off{display:none}
#fgTabs{display:flex;gap:3px;padding:5px;border-bottom:1.5px solid #553621;flex:none}#fgTabs .fgb{flex:1;padding:2px 4px}
#fgInsp{flex:1;overflow:auto;padding:7px;-webkit-overflow-scrolling:touch}
.fgpal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px}.fgpal .fgb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:28px;font-size:11px;padding:2px 4px;text-align:left}
#fgInsp h4{margin:2px 0 6px;font:900 10px Nunito,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#f2c14e}
#fgInsp .sel{font:800 10.5px Nunito,sans-serif;color:#d9c39a;word-break:break-all;margin-bottom:6px}
.fgrow{display:flex;align-items:center;gap:4px;margin:3px 0}.fgrow label{width:42px;font-weight:900;color:#d9c39a}
.fgrow input[type=number],.fgrow input[type=text]{flex:1;min-width:0;width:50px;padding:3px 4px;border-radius:6px;border:1.5px solid #553621;background:#fff8e6;color:#241508;font:800 12px Nunito,sans-serif}
.fgrow input[type=color]{width:40px;height:26px;padding:0;border:1.5px solid #553621;border-radius:6px;background:none}
.fgst{flex:none;width:26px;height:26px;border-radius:6px;border:1.5px solid #1a0f08;background:#6b4021;color:#f6e7c8;font:900 14px/1 Nunito,sans-serif;cursor:pointer}
#fgIO{position:fixed;left:50%;top:50%;translate:-50% -50%;width:min(420px,60vw);padding:10px;border-radius:12px;background:rgba(20,12,6,.97);border:2px solid #f2c14e;color:#f6e7c8;pointer-events:auto;display:none}
#fgIO.show{display:block}#fgIO textarea{width:100%;height:120px;border-radius:8px;border:1.5px solid #553621;background:#fff8e6;color:#241508;font:11px/1.25 monospace;padding:6px}
#fgIO .fgbar{background:none;border:0;padding:6px 0 0}
/* controle do ponteiro: lado direito, trackpad + botões (único lugar que aceita toque) */
#fgCtl{position:fixed;right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));width:min(236px,36vw);z-index:9200;display:grid;gap:6px;pointer-events:auto}
#fgPad{height:min(120px,26vh);border-radius:14px;border:2px solid #f2c14e;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 12px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 12px),rgba(20,12,6,.78);touch-action:none;display:grid;place-items:center;color:#d9c39a;font:800 11px Nunito,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.fgrow2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fgc{min-height:44px;border-radius:12px;border:2px solid #1a0f08;background:linear-gradient(180deg,#9a6638,#6b4021);color:#f6e7c8;font:400 15px 'Lilita One',Nunito,sans-serif;touch-action:none;box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 3px 0 #1a0f08;cursor:pointer}
.fgc.big{min-height:54px;font-size:18px;background:linear-gradient(180deg,#6fbf4c,#2f6b22)}
.fgc.on{background:linear-gradient(180deg,#ffd978,#c98f2c);color:#241508}
.fgc.hold.on{background:linear-gradient(180deg,#f0705f,#a82a1e);color:#fff}
.fgc.sm{min-height:34px;font-size:12px}
.fgc:active{transform:translateY(2px)}
@media (max-height:420px){#fgCtl{gap:4px}.fgc{min-height:38px;font-size:13px}.fgc.big{min-height:44px;font-size:16px}#fgPad{height:min(96px,24vh)}}
#forge.dockb #fgUI{top:auto;bottom:0}#forge.dockb .fgbar{border-bottom:0;border-top:2px solid #8a5a34}

/* compacto: botões e painéis menores */
#forge.compact .fgb{min-height:20px;padding:0 5px;font-size:10px;border-radius:6px}#forge.compact .fgb.sm{min-height:18px;padding:0 4px}
#forge.compact .fgbar{gap:2px;padding:2px 4px}#forge.compact #fgSide{width:150px;font-size:10px}#forge.compact #fgInsp{padding:4px}
#forge.compact .fgst{width:20px;height:20px;font-size:12px}#forge.compact .fgrow input[type=number],#forge.compact .fgrow input[type=text]{padding:1px 3px;font-size:10px}
#forge.compact .fgrow label{width:34px;font-size:10px}#forge.compact #fgCtl{width:min(170px,30vw);gap:3px}#forge.compact #fgPad{height:min(74px,20vh)}
#forge.compact .fgc{min-height:30px;font-size:12px}#forge.compact .fgc.big{min-height:36px;font-size:14px}#forge.compact .fgc.sm{min-height:24px;font-size:10px}
#forge.compact #fgUI{right:calc(min(170px,30vw) + 10px)}#forge.compact .fgpal .fgb{min-height:22px;font-size:10px}

/* mapa */
#fgWC{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;display:none}
body.forge-world #hud,body.forge-world #controls,body.forge-world #rail,body.forge-world #xpbar,body.forge-world #buffs{visibility:hidden}
/* itens criados */
#fgLayer{position:absolute;inset:0;z-index:60;pointer-events:none}
.fgcu{position:absolute;box-sizing:border-box;pointer-events:auto}
.fgcu.ghost{opacity:.4;outline:1px dashed #ff9}
.fgw{width:100%;height:100%;display:flex;flex-direction:column;border-radius:12px;border:2px solid #1a0f08;background:linear-gradient(180deg,var(--ui-bg2,#4a2f1a),var(--ui-bg1,#2a1a0e));box-shadow:0 4px 0 rgba(0,0,0,.4);overflow:hidden}
.fgwh{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;background:rgba(0,0,0,.25);color:var(--ui-gold,#f2c14e);font:400 14px 'Lilita One',Nunito,sans-serif}.fgwb{flex:1}
.fgp{width:100%;height:100%;border-radius:10px;border:2px solid #1a0f08;background:rgba(42,26,14,.88)}
.fgtog{display:flex;align-items:center;gap:8px;width:100%;height:100%;border:2px solid #1a0f08;border-radius:16px;background:#4a2f1a;color:#f6e7c8;font:800 12px Nunito,sans-serif;padding:0 8px}
.fgtog i{width:30px;height:16px;border-radius:8px;background:#222;position:relative;flex:none}.fgtog i:after{content:'';position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#aaa;transition:left .15s}
.fgtog.on i{background:#4a9a35}.fgtog.on i:after{left:16px;background:#fff}
.fghold{position:relative;overflow:hidden}.fghold u{position:absolute;left:0;bottom:0;height:4px;width:0;background:#ffd84a;text-decoration:none}.fghold.go u{width:100%;transition:width .9s linear}
.fgchk{display:flex;align-items:center;gap:8px;width:100%;height:100%;color:#f6e7c8;font:800 12px Nunito,sans-serif}.fgchk input{width:18px;height:18px}
.fgrad{display:flex;width:100%;height:100%;border:2px solid #1a0f08;border-radius:10px;overflow:hidden}.fgrb{flex:1;border:0;background:#4a2f1a;color:#f6e7c8;font:800 11px Nunito,sans-serif}.fgrb.on{background:#f2c14e;color:#241508}
.fgtx{color:#f6e7c8;font:800 13px Nunito,sans-serif;text-shadow:0 1px 0 #000}.fgti{color:#f2c14e;font:400 22px 'Lilita One',Nunito,sans-serif;text-shadow:0 2px 0 #000}
.fgbarw{width:100%;height:100%}.fgsl{width:100%}.fgim{width:100%;height:100%;display:grid;place-items:center;font-size:34px;border-radius:10px;background:rgba(0,0,0,.25);border:2px solid #1a0f08}
.fgsp{border:0;height:3px;background:#8a5a34;border-radius:2px;margin:2px 0}.fggr{display:grid;gap:3px;width:100%;height:100%}
.fgtb{width:100%;height:100%;display:flex}.fgtb button{flex:1}
.fgradial{position:relative;width:100%;height:100%}.fgradial .cbtn{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;font-size:18px;padding:0}

.fgrow2.r3{grid-template-columns:1fr 1fr 1fr}
/* dicas, ajuda */
#fgHint{position:fixed;left:50%;bottom:8px;transform:translateX(-50%);max-width:min(380px,44vw);padding:6px 10px;border-radius:10px;background:rgba(255,248,214,.97);color:#241508;border:2px solid #f2c14e;font:800 12px/1.3 Nunito,sans-serif;pointer-events:none;display:none;z-index:9300;text-align:center}
#forge.dockb #fgHint{bottom:auto;top:8px}
#fgHelp{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.45);pointer-events:auto;z-index:9250}#fgHelp.show{display:grid}
#fgHelp .hbox{width:min(460px,64vw);max-height:84vh;overflow:auto;padding:12px 14px;border-radius:12px;background:rgba(20,12,6,.98);border:2px solid #f2c14e;color:#f6e7c8;font:700 12px/1.4 Nunito,sans-serif}#fgHelp h3{margin:0 0 6px;color:#f2c14e;font:400 16px 'Lilita One',Nunito,sans-serif}#fgHelp p{margin:4px 0}
/* editor de sprites */
#fgSpr{position:fixed;left:6px;right:calc(min(236px,36vw) + 14px);top:var(--fgtop,60px);bottom:var(--fgbot,6px);display:none;flex-direction:column;border-radius:12px;background:rgba(20,12,6,.97);border:2px solid #f2c14e;color:#f6e7c8;font-size:11px;pointer-events:auto;z-index:9150;overflow:hidden}#fgSpr.show{display:flex}
#forge.compact #fgSpr{right:calc(min(170px,30vw) + 10px)}
#fgSprHd{display:flex;gap:4px;align-items:center;flex-wrap:wrap;padding:4px 6px;border-bottom:1.5px solid #553621;flex:none}#fgSprHd input[type=text]{width:110px;padding:2px 4px;border-radius:6px;border:1.5px solid #553621;background:#fff8e6;color:#241508;font:800 11px Nunito,sans-serif}
#fgSprBody{flex:1;min-height:0;display:flex;gap:6px;padding:6px}
#fgSprTools{flex:none;width:84px;display:grid;grid-template-columns:1fr 1fr;gap:3px;align-content:start}#fgSprTools .fgb{min-width:0;padding:1px 2px;font-size:10px;white-space:nowrap;overflow:hidden}
#fgSprC{flex:1;min-width:0;display:grid;place-items:center;overflow:hidden}
#fgSprCv{image-rendering:pixelated;border:2px solid #8a5a34;background-color:#cfc6b0;background-image:linear-gradient(45deg,#b9b09a 25%,transparent 25%,transparent 75%,#b9b09a 75%),linear-gradient(45deg,#b9b09a 25%,transparent 25%,transparent 75%,#b9b09a 75%);background-position:0 0,var(--cs,4px) var(--cs,4px)}
#fgSprSide{flex:none;width:150px;overflow:auto;-webkit-overflow-scrolling:touch}#fgSprSide .fgpal .fgb{font-size:10px;padding:1px 3px}
#fgSprPv{display:block;margin:0 auto 4px;image-rendering:pixelated;background:#cfc6b0;border:1.5px solid #553621;border-radius:4px}
.fgpal.fr{grid-template-columns:repeat(5,minmax(0,1fr))}
.fgsw{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}.fgsc{aspect-ratio:1;border:1.5px solid #1a0f08;border-radius:3px;padding:0}.fgsc.on{outline:2px solid #ffd84a;outline-offset:1px}
#fgLayer canvas.fgsc{image-rendering:pixelated;width:100%;height:100%;object-fit:contain;aspect-ratio:auto;border:0;outline:0}
.fgpal.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.fgpal.c3 .fgb{font-size:9px;padding:0 1px;text-align:center}
#fgSprSide{width:164px}

.fgpal.c4{grid-template-columns:repeat(4,minmax(0,1fr))}.fgpal.c4 .fgb{font-size:9px;padding:0 1px;text-align:center}
.fgpv{display:grid;grid-template-columns:repeat(3,22px);gap:3px;justify-content:start}.fgpv .fgb{min-width:0;width:22px;min-height:22px;padding:0}
.fgtr{display:flex;align-items:center;gap:2px;margin:1px 0}.fgtr .fgst{width:20px;height:20px;font-size:10px;flex:none}
.fgtl{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;border-radius:5px;background:rgba(255,255,255,.06);color:#f6e7c8;font:700 10.5px Nunito,sans-serif;padding:2px 4px}.fgtl.on{background:#f2c14e;color:#241508}.fgtl.dim{opacity:.5}.fgtl i{opacity:.6;font-style:normal}
.fgcu .fgcu{position:relative!important}
body.forge-on .fgcu[data-t=box]{outline:1px dashed rgba(255,216,74,.8);outline-offset:-1px}

/* biblioteca */
#fgLib{position:fixed;left:6px;right:calc(min(236px,36vw) + 14px);top:var(--fgtop,60px);bottom:var(--fgbot,6px);display:none;flex-direction:column;border-radius:12px;background:rgba(20,12,6,.97);border:2px solid #f2c14e;color:#f6e7c8;font-size:11px;pointer-events:auto;z-index:9150;overflow:hidden}#fgLib.show{display:flex}
#forge.compact #fgLib{right:calc(min(170px,30vw) + 10px)}
#fgLibHd,#fgLibAct{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:4px 8px;flex:none}#fgLibHd{border-bottom:1.5px solid #553621}#fgLibAct{border-top:1.5px solid #553621;min-height:34px}
#fgLibBody{flex:1;min-height:0;display:flex;gap:6px;padding:6px}
#fgLibCats{flex:none;width:88px;display:flex;flex-direction:column;gap:3px;overflow:auto}#fgLibCats .fgb{min-width:0;text-align:left;font-size:10px}
#fgLibGrid{flex:1;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:5px}
.fglc{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;padding:3px;border-radius:8px;border:1.5px solid #553621;background:rgba(255,255,255,.05);color:#f6e7c8;min-width:0;min-height:0;overflow:hidden}
.fglc.on{border-color:#ffd84a;background:rgba(255,216,74,.18)}.fglc canvas{flex:1;min-height:0;max-width:100%;object-fit:contain;image-rendering:pixelated}
.fglc span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 9px Nunito,sans-serif}.fglc i{position:absolute;right:3px;top:2px;font:800 8px Nunito,sans-serif;font-style:normal;opacity:.6}

/* navegação por teclado/controle e feedback de toque */
body.fg-nav .dlg button:focus,body.fg-nav .dlg input:focus,body.fg-nav .dlg select:focus,body.fg-nav #opt button:focus,body.fg-nav #opt input:focus{outline:3px solid #ffd84a!important;outline-offset:2px;box-shadow:0 0 0 6px rgba(255,216,74,.35)!important}
#fgLayer button{transition:scale .08s}#fgLayer button:active{scale:.95}

/* fluxo de menus */
#fgGraph{position:fixed;left:6px;right:calc(min(236px,36vw) + 14px);top:var(--fgtop,60px);bottom:var(--fgbot,6px);display:none;flex-direction:column;border-radius:12px;background:rgba(20,12,6,.97);border:2px solid #f2c14e;color:#f6e7c8;font-size:11px;pointer-events:auto;z-index:9150;overflow:hidden}#fgGraph.show{display:flex}#fgGraph.show.hide{display:none}
#forge.compact #fgGraph{right:calc(min(170px,30vw) + 10px)}
#fgGHd{display:flex;gap:5px;align-items:center;flex-wrap:wrap;padding:4px 8px;border-bottom:1.5px solid #553621;flex:none}#fgGHd .gcur{min-width:90px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}
#fgGBody{flex:1;min-height:0;display:flex;gap:6px;padding:6px}
#fgGArea{position:relative;flex:1;min-width:0;border-radius:8px;border:1.5px solid #553621;background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 16px),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 16px),rgba(0,0,0,.25);overflow:hidden}
#fgGArea svg{position:absolute;inset:0;width:100%;height:100%}.gtx{fill:#d9c39a;font:800 9px Nunito,sans-serif;pointer-events:none}
.fgnode{position:absolute;width:118px;height:34px;padding:2px 4px;border-radius:9px;border:2px solid #1a0f08;background:linear-gradient(180deg,#9a6638,#6b4021);color:#f6e7c8;font:800 10px/1.1 Nunito,sans-serif;text-align:center;overflow:hidden;box-shadow:0 2px 0 #1a0f08}.fgnode.grp{background:linear-gradient(180deg,#4a8a6a,#2b5a44)}.fgnode.on{outline:3px solid #ffd84a}
#fgGDet{flex:none;width:150px;overflow:auto}

/* editor de sprites v2: diálogo e cor atual */
#fgSprC{position:relative}
#fgSprDlg{position:absolute;inset:4px;display:none;flex-direction:column;gap:3px;padding:8px;border-radius:10px;background:rgba(20,12,6,.97);border:2px solid #f2c14e;overflow:auto;z-index:2}#fgSprDlg.show{display:flex}
#fgSprDlg b{color:#f2c14e;font:400 14px 'Lilita One',Nunito,sans-serif}#fgSprDlg .fgpal.c3 .fgb{font-size:10px}
.fgcolnow{display:inline-block;width:14px;height:14px;border:1.5px solid #1a0f08;border-radius:3px;vertical-align:middle}

/* etapa 3: vista do editor de sprites */
#fgSprC{display:block!important;overflow:hidden}#fgSprCv{display:block;width:100%!important;height:100%!important;border:0!important;background:#1b120b!important;image-rendering:auto}
#fgSprInfo{position:absolute;left:4px;bottom:4px;padding:1px 6px;border-radius:6px;background:rgba(0,0,0,.65);color:#f6e7c8;font:800 10px Nunito,sans-serif;pointer-events:none;white-space:nowrap}
.fgnud{grid-column:span 2;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.fgnud [data-nd="u"]{grid-column:2}.fgnud [data-nd="l"]{grid-column:1;grid-row:2}.fgnud [data-nd="r"]{grid-column:3;grid-row:2}.fgnud [data-nd="d"]{grid-column:2;grid-row:3}
#fgPtrP{position:fixed;right:calc(min(236px,36vw) + 14px);bottom:8px;width:210px;display:none;flex-direction:column;gap:3px;padding:8px;border-radius:10px;background:rgba(20,12,6,.97);border:2px solid #f2c14e;color:#f6e7c8;font-size:11px;pointer-events:auto;z-index:9260}#fgPtrP.show{display:flex}#fgPtrP b{color:#f2c14e}
#forge.compact #fgPtrP{right:calc(min(170px,30vw) + 10px)}
#fgLupa{position:fixed;width:168px;height:112px;overflow:hidden;border-radius:10px;border:2px solid #f2c14e;box-shadow:0 4px 12px rgba(0,0,0,.6);background:#000;z-index:9090;pointer-events:none;display:none}
.fgrow2.r4{grid-template-columns:repeat(4,1fr)}
@media (max-height:420px){.fgrow2.r4 .fgc{min-height:28px}}
#forge.compact .fgrow2.r4 .fgc{min-height:22px}

/* etapa 4: cores */
.fgcols{gap:4px}.fgcsw{width:26px;height:22px;border-radius:5px;border:2px solid #1a0f08;background:linear-gradient(var(--c),var(--c)),repeating-conic-gradient(#cfc6b0 0 25%,#b9b09a 0 50%) 0 0/8px 8px;padding:0}.fgcsw.on{outline:2px solid #ffd84a;outline-offset:1px}
.fgsw.rc{grid-template-columns:repeat(8,1fr);margin-bottom:3px;opacity:.95}
.fgcp{display:flex;gap:6px;align-items:flex-start}.fgcpc{display:flex;flex-direction:column;gap:3px}.fgcpo{display:block;width:30px;height:30px;border-radius:5px;border:2px solid #1a0f08;background-image:repeating-conic-gradient(#cfc6b0 0 25%,#b9b09a 0 50%);background-size:8px 8px}
#fgSprDlg canvas[data-cp]{display:block;border:1.5px solid #1a0f08;border-radius:4px;max-width:100%}#fgSprDlg textarea{width:100%;border-radius:6px;border:1.5px solid #553621;background:#fff8e6;color:#241508;font:11px monospace}
.fgramp{display:flex;flex:1;height:18px;border:1.5px solid #1a0f08;border-radius:4px;overflow:hidden}.fgramp i{flex:1}

/* etapa 5: barra de opções, radial */
#fgSprMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}#fgSprMid #fgSprC{flex:1;min-height:0}
#fgSprOpt{flex:none;display:flex;flex-wrap:wrap;gap:2px;align-items:center;max-height:52px;overflow:auto}#fgSprOpt .fgb{min-height:18px;padding:0 4px;font-size:9.5px}#fgSprOpt .fgst{width:18px;height:18px;font-size:11px}
.fgon{display:inline-flex;align-items:center;gap:2px;font:800 9.5px Nunito,sans-serif;color:#d9c39a}.fgosep{width:1px;height:16px;background:#553621;margin:0 2px}
#fgSprTools{overflow:auto}
#fgRadial{position:fixed;width:0;height:0;display:none;z-index:9280;pointer-events:auto}#fgRadial.show{display:block}#fgRadial .fgb{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.6)}
/* linha do tempo (Etapa 6) */
#fgSprTl{flex:none;display:none;border-top:1.5px solid #553621;padding:3px 6px 4px;font:800 10px Nunito,sans-serif;color:#f6e7c8}
#fgSprTl.show{display:block}
#fgSprTl .tlr{display:flex;flex-wrap:wrap;gap:2px;align-items:center;margin-bottom:2px}
#fgSprTl .tlr .fgb{min-height:17px;padding:0 4px;font-size:9.5px}
#fgSprTl .tlr .fgst{width:17px;height:17px;font-size:11px}
#fgSprTl .tlr input{height:16px;padding:0 3px;border-radius:5px;border:1.5px solid #553621;background:#fff8e6;color:#241508;font:800 10px Nunito,sans-serif}
#fgSprTl .tlr input[type=number]{width:52px}#fgSprTl .tlr input[type=text]{width:92px}
#fgSprTl .tli{padding:0 4px;color:#f2c14e}
#fgSprTl .tlg{overflow:hidden}
#fgSprTl .tltg{position:relative;height:11px;margin-left:100px}
#fgSprTl .tltag{position:absolute;top:0;height:10px;border:0;border-radius:3px;padding:0 3px;font:800 8px/10px Nunito,sans-serif;color:#1a0f08;text-align:left;white-space:nowrap;overflow:hidden;opacity:.85}
#fgSprTl .tltag.on{opacity:1;outline:1.5px solid #fff}
#fgSprTl .tlrw{display:flex;align-items:center;height:17px}
#fgSprTl .tlrw.hd{height:20px}
#fgSprTl .tlh{flex:none;width:100px;display:flex;align-items:center;gap:1px;overflow:hidden;white-space:nowrap;color:#c9b48f}
#fgSprTl .tlh .fgst{width:15px;height:15px;font-size:9px}
#fgSprTl .tln{flex:1;min-width:0;height:15px;padding:0 3px;border:0;border-radius:4px;background:#2d1c10;color:#f6e7c8;font:800 9.5px Nunito,sans-serif;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fgSprTl .tln.on{background:#7a4f22;color:#fff}
#fgSprTl .tlf,#fgSprTl .tlc{flex:none;width:20px;margin-right:2px;padding:0;border:1px solid #553621;border-radius:3px;background:#2d1c10;color:#f6e7c8;font:800 9px/1 Nunito,sans-serif}
#fgSprTl .tlf{height:19px;display:flex;flex-direction:column;align-items:center;justify-content:center}
#fgSprTl .tlf i{font-style:normal;font-size:6.5px;color:#c9b48f}
#fgSprTl .tlc{height:15px;position:relative;color:#d9c9a8}
#fgSprTl .tlrw.cur .tlc{background:#3a2615}
#fgSprTl .tlc.lk{border-color:var(--lk);border-width:1.5px;color:var(--lk)}
#fgSprTl .tlc.lp::before{content:'';position:absolute;left:-4px;top:5px;width:4px;height:3px;background:var(--lk)}
#fgSprTl .tlf.on,#fgSprTl .tlc.on{outline:2px solid #f2c14e;outline-offset:-1px;z-index:1}
#fgSprTl .tlf.rg,#fgSprTl .tlc.rg{background:#4a6a9a}
/* pré-visualização (Etapa 7) */
#fgPv{position:fixed;display:none;flex-direction:column;z-index:9200;border-radius:10px;background:rgba(20,12,6,.97);border:2px solid #f2c14e;color:#f6e7c8;font:800 10px Nunito,sans-serif;pointer-events:auto;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.6)}
#fgPv.show{display:flex}
#fgPv .pvh{flex:none;display:flex;align-items:center;gap:6px;padding:2px 4px 2px 8px;background:#3a2615;cursor:move}
#fgPv .pvh b{color:#f2c14e;font:400 12px 'Lilita One',Nunito,sans-serif}#fgPv .pvh span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#c9b48f}
#fgPv .pvc{flex:1;min-height:40px;position:relative}#fgPv .pvc canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
#fgPvScrub{flex:none;height:12px;margin:3px 6px;border-radius:6px;background:#2d1c10;border:1.5px solid #553621;overflow:hidden}#fgPvScrub i{display:block;height:100%;width:0;background:#f2c14e}
#fgPv .pvr{flex:none;display:flex;flex-wrap:wrap;gap:2px;align-items:center;padding:0 4px 3px}
#fgPv .pvr .fgb{min-height:17px;padding:0 5px;font-size:9.5px}#fgPv .pvt{flex:1;text-align:center;white-space:nowrap;overflow:hidden}
#fgPv .pvrs{position:absolute;right:1px;bottom:0;width:16px;height:16px;font-size:12px;line-height:16px;text-align:center;color:#f2c14e;cursor:nwse-resize}
#fgPvCtx{position:fixed;display:none;z-index:9140;pointer-events:none;image-rendering:pixelated;outline:1.5px dashed rgba(242,193,78,.7)}
/* animador (Etapa 8) */
#fgSprTl .tlr .fgon{display:inline-flex;align-items:center;gap:1px;padding:0 2px;border-radius:5px;background:#2d1c10}
#fgSprTl .tlr .fgon .fgst{width:16px;height:16px}
#fgSprTl .tlr .fgosep{width:1px;height:14px;background:#553621;margin:0 2px}
#fgSprTl .fgd8{display:inline-grid;grid-template-columns:repeat(3,26px);gap:1px;vertical-align:middle}#fgSprTl .fgd8 .fgb{min-height:13px;padding:0;font-size:8px}#fgSprTl .fgd8 b{text-align:center;color:#553621}
#fgSprTl .tlf u,#fgSprTl .tlf s{position:absolute;top:-1px;text-decoration:none;font-size:6px;color:#ff9a3c}#fgSprTl .tlf{position:relative}#fgSprTl .tlf u{left:1px}#fgSprTl .tlf s{right:1px;color:#4fe3ff}
#fgSprTl .tlc.tw{background-image:linear-gradient(90deg,transparent 45%,#ff4fd8 45%,#ff4fd8 55%,transparent 55%)}
/* edição rápida (Etapa 13) */
#fgMq{position:fixed;display:none;border:1.5px dashed #4fe3ff;background:rgba(79,227,255,.12);pointer-events:none;z-index:9120}
.fgms{position:fixed;display:none;outline:2px solid #4fe3ff;outline-offset:1px;pointer-events:none;z-index:9119}
#fgMeas{position:fixed;left:0;top:0;width:100vw;height:100vh;display:none;pointer-events:none;z-index:9118}
#fgRatios{position:fixed;left:50%;bottom:8px;transform:translateX(-50%);z-index:9210;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 8px;border-radius:10px;background:rgba(20,12,6,.96);border:2px solid #f2c14e;color:#f6e7c8;font:800 10px Nunito,sans-serif;max-width:96vw}
#fgRatios b{color:#f2c14e}#fgRatios .fgRq{display:flex;gap:8px;width:100%}#fgRatios .fgRb{position:relative;overflow:hidden;border:1.5px solid #553621;background:#000;flex:none}#fgRatios .fgRf{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}#fgRatios .fgRb>i{position:absolute;left:2px;bottom:1px;font-style:normal;background:rgba(0,0,0,.7);padding:0 3px;border-radius:3px}
.fglint{display:block;width:100%;text-align:left;margin:2px 0;white-space:normal;line-height:1.25}.fglint i{display:block;font-style:normal;font-size:9px;color:#c9b48f}
#fgInsp .fgst.sm1{width:14px;font-size:10px;padding:0}#fgInsp label[data-lk]{cursor:ew-resize;text-decoration:underline dotted}
/* 6 abas: quebram em duas linhas em vez de sumir */
#fgTabs{flex-wrap:wrap}#fgTabs .fgb{flex:1 0 28%;min-width:0;font-size:10px}
/* fontes bitmap (Etapa 14) */
#fgSprTl .fgfg{display:flex;flex-wrap:wrap;gap:1px;width:100%;max-height:33px;overflow:auto;margin-top:2px}
#fgSprTl .fgfg button{width:15px;height:15px;padding:0;border:1px solid #553621;border-radius:3px;background:#2d1c10;color:#f6e7c8;font:800 9px/13px Nunito,sans-serif}
#fgSprTl .fgfg button.on{background:#f2c14e;color:#1a0f08}
#fgFontPv{image-rendering:pixelated;background:#cfc6b0;border:1px solid #553621;border-radius:3px;vertical-align:middle;max-width:300px}
/* biblioteca de UI (Etapa 15) */
#fgTabs .fgb{flex:1 0 22%}
.fgkit{display:flex;align-items:center;gap:2px;margin:1px 0}.fgkit>.fgb{flex:1;display:flex;align-items:center;gap:4px;text-align:left;font-size:10px}.fgkit canvas{width:16px;height:16px;image-rendering:pixelated;flex:none}.fgkit span{width:16px;text-align:right;color:#c9b48f;font-size:9px}
/* fluxo de uso (Etapa 16) */
#fgSaved{flex:none;font:800 9.5px Nunito,sans-serif;color:#9ad48a;padding:2px 7px;border-top:1.5px solid #553621;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#fgSaved.bad{color:#ff8a7a}
#fgFavs{display:contents}#fgFavs .fgfav{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fgCmdP{position:fixed;left:50%;top:var(--fgtop,60px);transform:translateX(-50%);width:min(380px,92vw);max-height:calc(100vh - var(--fgtop,60px) - 10px);display:none;flex-direction:column;gap:3px;padding:6px;z-index:9260;border-radius:10px;background:rgba(20,12,6,.98);border:2px solid #f2c14e;color:#f6e7c8;font:800 10px Nunito,sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.6)}
#fgCmdP.show{display:flex}#fgCmdP b{color:#f2c14e;font-size:14px}#fgCmdP .cr{display:flex;gap:3px;align-items:center}#fgCmdP .cr input{flex:1;height:20px;border-radius:6px;border:1.5px solid #553621;background:#fff8e6;color:#241508;font:800 11px Nunito,sans-serif;padding:0 5px}
#fgCmdP .cl{flex:1;min-height:60px;max-height:150px;overflow:auto}#fgCmdP .ci{display:flex;gap:2px;margin:1px 0}#fgCmdP .ci>.fgb{flex:1;text-align:left;display:flex;justify-content:space-between;gap:6px}#fgCmdP .ci i{font-style:normal;color:#c9b48f;font-size:9px}
#fgCmdP .ce{max-height:110px;overflow:auto}#fgCmdP h5{margin:4px 0 2px;color:#f2c14e;font-size:10px}#fgCmdP .ce label{width:82px}#fgCmdP .fghist{display:block;width:100%;text-align:left;margin:1px 0}
#fgRadialG{position:fixed;width:0;height:0;display:none;z-index:9285}#fgRadialG.show{display:block}#fgRadialG .fgb{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.6);background:#3a2615}
/*FORGE-CSS-END*/