/* A Taverna Infinita — RPG d20 (beta). Pixel art, paleta de taverna. Vanilla, sem framework. */
:root{
  --bg:#160f0a; --panel:#241a12; --panel2:#2f2318; --edge:#4a3623; --edge2:#6b4e30;
  --amber:#ffcb47; --amber2:#e6a92e; --ink:#f2e7d0; --muted:#b09a76; --dim:#7d6c50;
  --hp:#e0533f; --hp2:#8a2f22; --energy:#ffcb47; --mag:#7fb2ff; --xp:#9ae66e;
  --good:#8ad46a; --bad:#e0533f; --shadow:0 4px 0 #0008;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{overflow-x:hidden} /* trava o sliver de scroll horizontal do full-bleed (taverna-hub) */
body{background:var(--bg);color:var(--ink);font-family:'Press Start 2P',monospace;font-size:12px;line-height:1.7;
  image-rendering:pixelated;-webkit-font-smoothing:none;
  background-image:radial-gradient(1200px 600px at 50% -10%,#2a1c10 0%,transparent 60%);}
#rpg{max-width:1040px;margin:0 auto;padding:0 14px 60px;min-height:100%}
a{color:var(--amber)}

/* topbar */
#topbar{position:relative;display:flex;align-items:center;gap:12px;padding:14px 4px;margin-bottom:18px;flex-wrap:wrap}
/* roda-teto: linha decorativa que atravessa a tela inteira (de canto a canto), ignorando o container de 1040px */
#topbar::after{content:"";position:absolute;bottom:0;left:50%;margin-left:-50vw;width:100vw;height:2px;
  background:linear-gradient(90deg,transparent,var(--edge) 6%,var(--edge2) 50%,var(--edge) 94%,transparent);pointer-events:none}
.brand{font-size:13px;text-decoration:none;color:var(--amber)}
#userbox{margin-left:auto;font-size:9px;color:var(--muted);display:flex;gap:10px;align-items:center}

/* telas / cabeçalhos */
.tela{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
h1{font-size:18px;color:var(--amber);text-shadow:2px 2px 0 #0008;margin:.2em 0 .1em}
h2{font-size:13px;color:var(--amber2);margin:1.2em 0 .5em}
.sub{color:var(--muted);font-size:9px;margin:.2em 0 1.4em}

/* painéis / botões */
.panel{background:var(--panel);border:2px solid var(--edge);border-radius:6px;padding:16px;box-shadow:var(--shadow)}
.grid{display:grid;gap:12px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spacer{flex:1}
button,.btn{font-family:inherit;font-size:11px;color:var(--bg);background:var(--amber);border:none;border-bottom:3px solid var(--amber2);
  padding:11px 14px;border-radius:5px;cursor:pointer;text-shadow:none}
button:hover,.btn:hover{filter:brightness(1.08)}
button:active{transform:translateY(2px);border-bottom-width:1px}
button:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.5)}
button.ghost{background:transparent;color:var(--amber);border:2px solid var(--edge2);border-bottom:3px solid var(--edge2)}
button.small{font-size:9px;padding:7px 9px}
button.danger{background:#7a2b22;color:#ffd9cf;border-bottom-color:#4a1610}
.msg{min-height:18px;font-size:9px;margin-top:8px}
.msg.err{color:var(--bad)} .msg.ok{color:var(--good)}
input,select{font-family:inherit;font-size:11px;background:#12100c;color:var(--ink);border:2px solid var(--edge2);border-radius:4px;padding:9px}
label{font-size:9px;color:var(--muted);display:block;margin-bottom:5px}

/* login / seleção */
.center{max-width:420px;margin:6vh auto 0}
.field{margin-bottom:12px}
.field input{width:100%}
.charlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:6px}
.charcard{background:var(--panel);border:2px solid var(--edge);border-radius:6px;padding:14px;cursor:pointer;transition:border-color .15s}
.charcard:hover{border-color:var(--amber)}
.charcard .cc-top{display:flex;justify-content:space-between;align-items:baseline}
.charcard .cc-name{color:var(--amber);font-size:12px}
.charcard .cc-meta{color:var(--muted);font-size:8px;margin:6px 0}
.charcard.new{display:flex;align-items:center;justify-content:center;border-style:dashed;color:var(--amber);min-height:110px;font-size:11px}

/* criação */
.pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.opt{background:var(--panel2);border:2px solid var(--edge);border-radius:5px;padding:10px;cursor:pointer;font-size:9px}
.opt:hover{border-color:var(--edge2)}
.opt.sel{border-color:var(--amber);background:#3a2c1c}
.opt .ot{font-size:11px;color:var(--ink)}
.opt .od{color:var(--muted);font-size:8px;margin-top:5px;line-height:1.5}
.opt.locked{opacity:.45;cursor:not-allowed}
.attrs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.attr{background:var(--panel2);border:2px solid var(--edge);border-radius:5px;padding:10px;text-align:center}
.attr .an{font-size:9px;color:var(--muted)}
.attr .av{font-size:20px;color:var(--amber);margin:4px 0}
.attr .amod{font-size:8px;color:var(--xp)}
.attr .ctrls{display:flex;gap:6px;justify-content:center;margin-top:6px}
.attr .ctrls button{padding:4px 9px;font-size:11px}
.budget{font-size:9px;color:var(--muted)}
.steps{display:flex;gap:6px;margin:6px 0 14px;flex-wrap:wrap}
.step{font-size:8px;color:var(--dim);border-bottom:2px solid var(--edge)}
.step.on{color:var(--amber);border-color:var(--amber)}

/* taverna */
.tav{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
@media(max-width:780px){.tav{grid-template-columns:1fr}}
.gorm{background:linear-gradient(#33251a,#241a12);border:2px solid var(--edge2);border-radius:6px;padding:14px;font-size:10px;line-height:1.8}
.gorm .who{color:var(--amber);font-size:9px;margin-bottom:6px}
.gorm.has-face{display:flex;gap:12px;align-items:flex-start}
.gorm-face{width:72px;height:72px;border-radius:6px;border:2px solid var(--edge2);image-rendering:pixelated;flex:0 0 auto}
.sheet .name{color:var(--amber);font-size:14px}
.sheet .tags{color:var(--muted);font-size:8px;margin:6px 0 12px}
.bar{height:16px;background:#12100c;border:2px solid var(--edge);border-radius:4px;overflow:hidden;position:relative;margin:4px 0 10px}
.bar > i{display:block;height:100%}
.bar.hpb > i{background:linear-gradient(var(--hp),var(--hp2))}
.bar.xpb > i{background:var(--xp)}
.bar span{position:absolute;inset:0;text-align:center;font-size:8px;line-height:12px;color:#fff;text-shadow:1px 1px 0 #000}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.stat{background:var(--panel2);border:1px solid var(--edge);border-radius:4px;padding:6px;text-align:center;font-size:8px;color:var(--muted)}
.stat b{display:block;color:var(--ink);font-size:13px;margin-top:3px}
.hunt{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.foe{background:var(--panel);border:2px solid var(--edge);border-radius:6px;padding:10px;cursor:pointer;text-align:center;transition:border-color .15s}
.foe:hover{border-color:var(--bad)}
.foe img{width:56px;height:56px;object-fit:contain;image-rendering:pixelated}
.foe .fn{font-size:9px;margin-top:6px}
.foe .fm{font-size:8px;color:var(--muted);margin-top:4px}
.foe.elite{border-color:#c77dff55} .foe.chefe{border-color:#e0533f88}

/* combate — CENA de duelo (FATIA 56): diagonal estilo Pokémon, herói visível, plataformas e placas */
.arena{position:relative;height:236px;border-radius:10px;border:3px solid #0007;overflow:hidden;background:linear-gradient(160deg,#3a2c1c,#191209);box-shadow:inset 0 0 46px #0009}
.arena::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 72% 16%,#ffffff21 0%,transparent 55%);pointer-events:none}
.arena::after{content:'';position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(#0000,#00000055);pointer-events:none}
/* fundo tingido conforme o bioma onde você luta (§8) */
.arena.bioma-campo{background:linear-gradient(#87b5e0,#87b5e0 26%,#2e5a2b 27%,#173316)}
.arena.bioma-floresta{background:linear-gradient(#4a6a52,#4a6a52 24%,#203f1d 25%,#0f1f0c)}
.arena.bioma-bruma{background:linear-gradient(#565070,#565070 26%,#343048 27%,#181428)}
.arena.bioma-montanha{background:linear-gradient(#b9cede,#b9cede 26%,#5d6a80 27%,#2e3a50)}
.arena.bioma-costa{background:linear-gradient(#a8dcE8,#a8dce8 26%,#c9ae74 27%,#8a6f42)}
/* ── BACKDROP de arena por bioma (§3): arte larga da cena (384×120) preenchendo a arena atrás dos
   combatentes (z-0), ancorada no rodapé pra a linha de chão bater com os pés dos personagens.
   Substitui as silhuetas de prop antigas — o backdrop já entrega a cena completa. ── */
.arena-scen{position:absolute;inset:0;z-index:0;pointer-events:none;image-rendering:pixelated;background-repeat:no-repeat;background-position:center bottom;background-size:cover}
/* default (masmorra/expedição, sem bioma) */
.arena-scen{background-image:url(/assets/arena-masmorra.png)}
.arena.bioma-campo .arena-scen{background-image:url(/assets/arena-campo.png)}
.arena.bioma-floresta .arena-scen{background-image:url(/assets/arena-floresta.png)}
.arena.bioma-bruma .arena-scen{background-image:url(/assets/arena-bruma.png)}
.arena.bioma-montanha .arena-scen{background-image:url(/assets/arena-montanha.png)}
.arena.bioma-costa .arena-scen{background-image:url(/assets/arena-costa.png)}
.cbt{position:absolute;z-index:1}
.cbt .plat{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:170%;height:32px;background:radial-gradient(ellipse at center,#000000a0 0%,#00000052 45%,transparent 70%);border-radius:50%}
.cbt-foe{right:15%;top:20%}
.cbt-foe img{width:110px;height:110px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 4px 6px #0008);animation:foeBob 2.8s ease-in-out infinite;position:relative;z-index:1;display:block}
.cbt-foe.ko img{filter:grayscale(1) brightness(.55);animation:none;opacity:.5}
@keyframes foeBob{50%{transform:translateY(-4px)}}
.cbt-me{left:16%;bottom:16%}
/* herói do combate: sprite DETALHADO por CLASSE (hero-cbt-<classe>, background-image inline em renderCombate),
   virado p/ a direita = encarando o inimigo. Caixa alta com contain ancorado no rodapé → o herói fica GRANDE
   (à altura do inimigo, ~110px) e assentado na linha do chão, seja qual for o aspecto do sprite. Bob suave. */
.hero-idle{width:128px;height:134px;background-position:center bottom;background-size:contain;background-repeat:no-repeat;image-rendering:pixelated;transform-origin:50% 100%;animation:heroBob 2.4s ease-in-out infinite;position:relative;z-index:1;filter:drop-shadow(0 4px 5px #0009)}
@keyframes heroBob{50%{transform:translateY(-4px)}}
.plq{position:absolute;z-index:2;background:linear-gradient(#2a2118ee,#17100aee);border:2px solid var(--edge2);border-radius:8px;padding:8px 10px;min-width:210px;box-shadow:0 3px 10px #0008;text-align:center}
.plq-foe{left:12px;top:10px}
.plq-me{right:12px;bottom:10px}
.plq .fh{font-size:11px;color:var(--amber)}
/* Afixo de elite (F1 §5): fita sob o nome do inimigo, com o efeito escrito por extenso. */
.plq .afixo{margin-top:3px;font-size:7px;line-height:1.6;color:#ffd48a;background:#4a2f0f88;border:1px solid #7a4f1a;border-radius:4px;padding:2px 5px}
/* Chefes 2.0 (F1 §6): fita da fase/mecânica e a barra do lacaio que intercepta o dano. */
.plq .fase{margin-top:3px;font-size:7px;line-height:1.6;color:#e2c4ff;background:#2e1a4a88;border:1px solid #5a3a8a;border-radius:4px;padding:2px 5px}
.bar.lacb{height:13px;margin:0 0 6px}
.bar.lacb > i{background:linear-gradient(#9a8fb8,#5c5170)}
.chips{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin-top:6px;min-height:16px}
.chip{font-size:8px;background:#12100c;border:1px solid var(--edge2);border-radius:3px;padding:2px 5px;color:var(--muted)}
.chip.blk{color:#bcd7ff;border-color:#3a5a8a}
.chip.ca{color:var(--muted)}
.intent{font-size:9px;color:var(--bad);margin-top:6px;min-height:14px}
.res-line{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:flex;gap:8px;font-size:8px;color:var(--muted)}
/* ── FEEDBACK de impacto (§1): portado do sistema morto battle.js/battle.css e ligado ao combate real ── */
@keyframes tiShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes tiShakeForte{0%,100%{transform:translate(0,0)}15%{transform:translate(-8px,3px)}30%{transform:translate(9px,-3px)}45%{transform:translate(-7px,2px)}60%{transform:translate(6px,-2px)}80%{transform:translate(-4px,1px)}}
.cbt.shake{animation:tiShake .42s}
.cbt.shake-forte{animation:tiShakeForte .46s}
.arena.shake{animation:tiShake .34s}
.arena.shake-forte{animation:tiShakeForte .44s}
/* números de dano/cura flutuando */
@keyframes tiFloat{0%{transform:translate(-50%,0) scale(.6);opacity:0}18%{transform:translate(-50%,-12px) scale(1.25);opacity:1}100%{transform:translate(-50%,-56px) scale(1);opacity:0}}
.dmg-pop{position:fixed;z-index:60;pointer-events:none;font-family:inherit;font-size:17px;font-weight:bold;transform:translate(-50%,0);animation:tiFloat .95s ease-out forwards;text-shadow:2px 2px 0 #000,0 0 6px #000}
.dmg-pop.me{color:#ff5a6e}
.dmg-pop.foe{color:#ffcb47}
.dmg-pop.heal{color:#7dff8a}
.dmg-pop.crit{font-size:23px;text-shadow:2px 2px 0 #000,0 0 10px #ffdf6e}
/* flash vermelho de tela ao herói tomar dano */
.combatflash{position:fixed;inset:0;pointer-events:none;z-index:55;background:radial-gradient(ellipse at center,rgba(255,0,40,0) 38%,rgba(255,0,40,.55) 100%);opacity:0}
.combatflash.on{opacity:1;animation:tiFlashOut .32s ease-out forwards}
@keyframes tiFlashOut{0%{opacity:1}100%{opacity:0}}
/* hit-flash/punch no sprite atingido */
@keyframes tiImpacto{0%{filter:brightness(3.4) drop-shadow(0 0 8px #fff)}100%{filter:none}}
.cbt-foe img.impacto{animation:tiImpacto .24s ease-out}
.hero-idle.impacto{animation:heroBob 2.4s ease-in-out infinite,tiImpacto .24s ease-out}
@media (max-width:640px){.arena{height:280px}.plq{min-width:140px;padding:6px 8px}.cbt-foe{right:6%}.cbt-me{left:8%}.cbt-foe img{width:88px;height:88px}.hero-idle{width:104px;height:112px}}
.combatbars{display:flex;gap:10px;align-items:center;margin:12px 0;flex-wrap:wrap}
.energy{font-size:11px;color:var(--energy)}
.spell{font-size:10px;color:var(--mag)}
.hand{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:10px 0;min-height:120px}
.card{width:120px;background:linear-gradient(#3a2c1c,#241a12);border:2px solid var(--edge2);border-radius:6px;padding:8px;cursor:pointer;position:relative;transition:transform .1s}
.card:hover{transform:translateY(-4px);border-color:var(--amber)}
.card.disabled{opacity:.4;cursor:not-allowed;transform:none;border-color:var(--edge)}
.card .cn{font-size:9px;color:var(--amber);min-height:22px}
/* arte da carta (§0): miolo ilustrado entre nome (topo) e efeito (base) */
.card .card-art{display:block;width:100%;height:70px;object-fit:cover;image-rendering:pixelated;border-radius:4px;margin:2px 0 4px;border:1px solid #0006;box-shadow:inset 0 0 8px #0008}
.card .ct{font-size:7px;color:var(--muted);margin-top:4px;line-height:1.6;min-height:36px}
.card .cost{position:absolute;top:-8px;left:-8px;width:22px;height:22px;background:var(--energy);color:#000;border-radius:50%;font-size:10px;display:flex;align-items:center;justify-content:center;border:2px solid #000}
.card .esp{position:absolute;top:-8px;right:-8px;background:var(--mag);color:#001;border-radius:8px;font-size:7px;padding:2px 4px;border:2px solid #012}
/* molduras de carta por raridade (§8): cor + brilho */
.card.r-comum{border-color:#8a7350}
.card.r-incomum{border-color:#4fae6b}
.card.r-rara{border-color:#4f8fe0;box-shadow:0 0 6px #4f8fe066}
.card.r-epica{border-color:#b46fe0;box-shadow:0 0 8px #b46fe077}
.card.r-lendaria{border-color:#e8a13a;box-shadow:0 0 10px #e8a13a88}
.card.r-melhorada{border-color:#e0d24f;box-shadow:0 0 7px #e0d24f77}
.card.r-inicial{border-color:var(--edge2)}
.card.disabled{box-shadow:none}
.combatlog{background:#100c08;border:2px solid var(--edge);border-radius:5px;padding:10px;height:120px;overflow:auto;font-size:8px;color:var(--muted);line-height:1.9}
.d20{display:inline-block;min-width:44px;padding:5px 8px;border:2px solid var(--amber2);border-radius:6px;color:var(--amber);font-size:13px;background:#12100c}
.d20.hit{border-color:var(--good);color:var(--good)} .d20.miss{border-color:var(--bad);color:var(--bad)}

/* overlay resultado */
.overlay{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:20;animation:fade .2s}
.result{max-width:420px;text-align:center;padding:26px}
.result h1{margin-top:0}
.epilogo{font-size:9px;line-height:1.9;color:var(--muted);background:#161226;border:2px solid #4a3a6f;border-radius:6px;padding:14px;margin:12px 0;text-align:left}
.epilogo b{color:#c9b0ff}
.result.win h1{color:var(--good)} .result.lose h1{color:var(--bad)}
.reward{font-size:11px;margin:12px 0;color:var(--ink)}
.reward b{color:var(--amber)}
.dingtag{display:inline-block;background:var(--xp);color:#0a1a05;padding:4px 8px;border-radius:4px;font-size:9px;margin-top:6px}

/* equipamento / mochila */
.equip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px;margin-bottom:6px}
.slotcell{background:var(--panel2);border:2px solid var(--edge);border-radius:5px;padding:8px;min-height:54px;display:flex;flex-direction:column;justify-content:center;gap:3px;text-align:center}
.slotcell.filled{cursor:pointer;border-color:var(--edge2)}
.slotcell.filled:hover{border-color:var(--bad)}
.slotcell .ic{font-size:18px}
.slotcell .nm{font-size:8px;line-height:1.4}
.slotcell .slotlbl{font-size:8px;color:var(--dim)}
.bag{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px}
.bagitem{background:var(--panel2);border:2px solid var(--edge);border-radius:5px;padding:8px;cursor:pointer;display:flex;align-items:center;gap:7px;font-size:8px}
.bagitem:hover{border-color:var(--amber)}
.bagitem .ic{font-size:16px}
.bagitem .nm{flex:1;line-height:1.4}
.bagitem .sl{color:var(--dim)}
.nm.comum{color:#cbd5c0}.nm.incomum{color:#8ad46a}.nm.rara{color:#7fb2ff}.nm.epica{color:#c77dff}.nm.lendaria{color:var(--amber)}
.loot{margin-top:10px;font-size:11px}

/* §Cartas Fase 2: carta ganha (drop) + abrir pacote */
.nova-carta{margin-top:12px;font-size:11px;color:var(--amber);font-weight:bold}
.card-ganha{display:flex;justify-content:center;margin-top:8px}
.card-ganha .card{cursor:default;animation:cartaPop .5s ease}
@keyframes cartaPop{0%{transform:scale(.4) rotate(-8deg);opacity:0}70%{transform:scale(1.08) rotate(2deg)}100%{transform:scale(1) rotate(0);opacity:1}}
.pacote-box{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px;border-color:var(--amber)}
.pacote-info{display:flex;align-items:center;gap:10px}
.pacote-ic{font-size:26px}
.pacote-nm{font-weight:bold;color:var(--amber);font-size:12px}
.pacote-abrir{max-width:520px}
.pacote-cartas{justify-content:center;margin:14px 0}
.pkt-slot{opacity:0;animation:cartaPop .5s ease forwards}
.pkt-slot .card{cursor:default}

/* regulares da taverna */
.regulars{display:grid;gap:8px}
.reg{display:flex;gap:10px;align-items:flex-start;background:var(--panel2);border:1px solid var(--edge);border-radius:5px;padding:9px}
.reg.clickable{cursor:pointer;transition:border-color .12s}
.reg.clickable:hover{border-color:var(--amber)}
.reg .ri{font-size:20px}
.reg .rn{font-size:9px;color:var(--amber)}
.reg .rc{font-size:7px;color:var(--dim)}
.reg .rf{font-size:8px;color:var(--muted);margin-top:4px;line-height:1.6}

/* diálogo de NPC */
.dlg{max-width:460px}
.dlg-h{font-size:11px;color:var(--amber);border-bottom:2px solid var(--edge);padding-bottom:9px;margin-bottom:11px}
.dlg-ic{font-size:20px;vertical-align:middle;margin-right:4px}
.dlg-fala{font-size:10px;line-height:1.9;color:var(--ink);min-height:48px}

/* mundo (overworld) */
.mundo-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.mundo-top h1{font-size:16px}
.mundo-top .sub{margin:0;flex:1;min-width:180px}
#mapa{display:block;image-rendering:pixelated;outline:none;cursor:pointer}

/* topbar botões + acessibilidade */
.topbtn{background:transparent;color:var(--amber);border:2px solid var(--edge2);border-bottom:2px solid var(--edge2);padding:5px 9px;font-size:11px;border-radius:5px}
body.no-anim *{animation:none!important;transition:none!important}
body.contrast{--muted:#e6dcc4;--dim:#cdbd9c}
body.fonte-g{font-size:13px}

/* codex */
.tabs2{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tab2{background:var(--panel2);color:var(--muted);border:2px solid var(--edge);font-size:9px;padding:8px 10px;border-radius:5px}
.tab2.on{color:var(--amber);border-color:var(--amber)}
.codex-body{display:grid;gap:8px}
.cx{background:var(--panel);border:2px solid var(--edge);border-radius:6px;padding:11px}
.cxh{font-size:10px;color:var(--amber)}
.cxp{font-size:9px;color:var(--ink);margin-top:5px;line-height:1.8}
.best-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.bmon{background:var(--panel);border:2px solid var(--edge);border-radius:6px;padding:10px;text-align:center}
.bmon img{width:52px;height:52px;object-fit:contain;image-rendering:pixelated}
.bmon .bn{font-size:9px;color:var(--amber);margin-top:5px}
.bmon .bs{font-size:8px;color:var(--muted);margin-top:4px}

/* configurações */
.cfg{display:flex;gap:10px;align-items:flex-start;padding:11px;border:2px solid var(--edge);border-radius:6px;margin-bottom:8px;cursor:pointer;font-size:10px}
.cfg input{margin-top:3px;width:16px;height:16px}

/* conquistas */
.conq-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;margin-bottom:6px}
.conq{display:flex;gap:9px;align-items:center;background:var(--panel2);border:2px solid var(--edge);border-radius:5px;padding:9px;opacity:.5}
.conq.got{opacity:1;border-color:var(--amber)}
.conq .ci{font-size:20px}
.conq .cn{font-size:9px;color:var(--muted)}
.conq.got .cn{color:var(--amber)}
.conq .cd{font-size:8px;color:var(--dim);margin-top:3px;line-height:1.5}

/* expedições */
.exped-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.exped{background:var(--panel);border:2px solid var(--edge);border-radius:6px;padding:12px}
.exped.locked{opacity:.5}
.exped .eh{font-size:11px;color:var(--amber)}
.exped .ed{font-size:8px;color:var(--muted);margin:6px 0;line-height:1.6;min-height:28px}
.exped .er{font-size:8px;color:var(--ink);margin-bottom:8px}

/* loja */
.shoplist{display:grid;gap:6px;max-height:440px;overflow:auto}
.shopitem{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--edge);border-radius:5px;padding:7px}
.shopitem .ic{font-size:16px}
.shopitem .si{flex:1;font-size:8px}
.shopitem .si .nm{font-size:9px}
.shopitem .si .sd{color:var(--dim)}
/* L1 — flavor text de item: uma linha de lore, discreta, sempre abaixo da regra */
.it-desc{color:var(--dim);opacity:.82;font-style:italic;line-height:1.7;margin-top:3px;font-size:7px}
.shopitem .si .it-desc{margin-top:4px}
.quest .it-desc{margin:2px 0 4px}

/* facções */
.faccoes-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.faccao{background:var(--panel);border:2px solid var(--edge);border-radius:6px;padding:12px}
.faccao .fh{font-size:11px;color:var(--amber)}
.faccao .ft{font-size:8px;color:var(--muted);margin:5px 0 8px}
.bar.repb > i{background:linear-gradient(var(--amber),var(--amber2))}
.frecs{margin-top:8px;display:grid;gap:4px}
.frec{font-size:8px;color:var(--dim);line-height:1.6}
.frec.got{color:var(--good)}
.frec b{color:var(--muted)}

/* missões */
.quests-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-bottom:6px}
.quest{background:var(--panel);border:2px solid var(--edge);border-radius:6px;padding:12px}
.quest.on{border-color:var(--edge2)}
.quest.done{border-color:var(--good)}
.quest .qh{font-size:10px;color:var(--amber)}
.quest .qd{font-size:8px;color:var(--muted);margin:6px 0;line-height:1.6;min-height:32px}
/* Cartaz do dia (F1 §7): selos de diária/semanal e o aviso de contrato que saiu do cartaz. */
.quest .selo{font-size:6px;padding:2px 5px;border-radius:3px;margin-left:6px;vertical-align:middle;letter-spacing:.5px}
.quest .selo.dia{background:#4a3a0f;border:1px solid #8a6f1a;color:#ffe08a}
.quest .selo.sem{background:#3a1a4a;border:1px solid #7a3a9a;color:#e8b0ff}
.quest .qd.exp{min-height:0;color:#d8a25a}
.quest .qr{font-size:8px;color:var(--ink);margin-bottom:8px}
.quest .qprog{font-size:9px;color:var(--amber2)}
.quest.locked{opacity:.55}
.quest .qh .rc{font-size:7px;color:var(--dim)}
/* Verbos de missão (F2 §4): selo do tipo no cabeçalho e a linha de objetivo, que é onde o
   jogador lê O QUE fazer (a descrição conta a história; o objetivo conta a mecânica). */
.quest .qverbo{font-size:6px;padding:2px 5px;border-radius:3px;margin-left:6px;vertical-align:middle;
  letter-spacing:.5px;background:#2a2436;border:1px solid var(--edge2);color:var(--muted)}
.quest .qo{font-size:8px;color:var(--amber2);margin:4px 0;line-height:1.6}
/* Arcos de cadeia (F2 §5): a trilha das 3 etapas, com as trancadas visíveis mas anônimas. */
.arcos-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.arco{background:var(--panel);border:2px solid var(--edge);border-radius:6px;padding:10px 12px}
.arco-h{font-size:9px;color:var(--amber);margin-bottom:6px}
.arco-l{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.arco-p{font-size:8px;line-height:1.6}
.arco-p.ok{color:var(--good)}
.arco-p.on{color:var(--amber2)}
.arco-p.aberta{color:var(--ink)}
.arco-p.lock{color:var(--dim)}
.arco-seta{font-size:8px;color:var(--dim)}

/* mural: boatos */
.boatos-list{display:grid;gap:10px;margin-bottom:6px}
.boato{background:var(--panel);border:2px solid var(--edge);border-left:4px solid var(--amber);border-radius:6px;padding:12px}
.boato .bt{font-size:10px;color:var(--amber);margin-bottom:6px}
.boato .bx{font-size:8px;color:var(--muted);line-height:1.8}
.boato .bf{font-size:7px;color:var(--dim);margin-top:8px;text-align:right;font-style:italic}

/* cozinha do Gorm */
.sd.efeito, .efeito{color:var(--good)}
.bandeja{border-color:var(--good)!important;font-size:9px;line-height:1.7}

/* ── MUNDO EM TELA CHEIA (estilo Pokémon): canvas cobre o navegador, HUD flutua por cima ── */
body.mundo-full{overflow:hidden}
body.mundo-full #topbar{display:none}
.mundo-wrap #mapa{position:fixed;inset:0;z-index:5;display:block;outline:none;image-rendering:pixelated;background:#0f1a0c}
.hud{position:fixed;z-index:6;background:#100c07d9;border:2px solid var(--edge2);border-radius:8px;padding:10px 14px;box-shadow:0 4px 14px #000a}
.hud-tl{top:12px;left:12px;max-width:min(46vw,520px)}
.hud-tl h1{margin:0;font-size:13px;color:var(--amber)}
.hud-tl .hud-dica{font-size:7px;color:var(--muted);line-height:1.8;margin-top:6px}
.hud-tr{top:12px;right:12px;display:flex;gap:8px;padding:8px}
.hud-bl{bottom:12px;left:12px;font-size:9px;color:var(--ink);line-height:1.6;min-width:190px}
.hud-nome{color:var(--amber);font-size:9px;margin-bottom:7px}
.hbar{position:relative;height:12px;background:#241a12;border:1px solid #2A1E14;border-radius:4px;margin:5px 0;overflow:hidden}
.hbar i{position:absolute;inset:0;border-radius:3px}
.hbar.hp i{background:linear-gradient(#E74C3C,#C0392B)}
.hbar.mag i{background:linear-gradient(#4EA7FF,#2E74D2)}
.hbar.xp i{background:linear-gradient(#FFD97A,#C9A24A)}
.hbar span{position:relative;display:block;text-align:center;font-size:7px;line-height:12px;color:#fff;text-shadow:1px 1px 0 #0009}
.hud-missoes{font-size:7px;color:var(--muted);margin-top:6px}
.hud-relogio{font-size:8px;color:var(--ink);margin:6px 0 4px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.zoom-ctl{display:inline-flex;align-items:center;gap:5px;background:rgba(20,14,8,.55);border:1px solid var(--edge);border-radius:7px;padding:2px 4px}
.zoom-ctl .zbtn{width:18px;height:18px;line-height:1;padding:0;font-size:12px;font-weight:bold;border-radius:5px;background:#3a2a1a;color:var(--ink);border:1px solid var(--edge);cursor:pointer;display:flex;align-items:center;justify-content:center}
.zoom-ctl .zbtn:hover{background:#5a3f22;color:#fff}
.zoom-ctl #zoom-lvl{font-size:8px;color:var(--muted);min-width:26px;text-align:center}
/* ── HUD estilo Diablo: painel do personagem (esq) + bússola circular (dir) ── */
.hud-char{min-width:230px;background:linear-gradient(160deg,#221708f2,#120c05f2);border:1px solid #8a6a42;border-radius:10px;box-shadow:0 4px 18px #000c, inset 0 0 22px #0009, inset 0 1px 0 #c9a24a33;padding:10px 12px}
.char-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.char-medal{width:44px;height:44px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:21px;background:radial-gradient(circle at 35% 30%,#4a3620,#160f07);border:2px solid #c9a24a;box-shadow:0 0 10px #c9a24a44, inset 0 2px 5px #00000088}
.char-nome{font-size:12px;color:#ffd97a;text-shadow:0 1px 0 #000,0 0 8px #c9a24a55;letter-spacing:.5px}
.char-sub{font-size:8px;color:#b09a76;margin-top:4px}
.hud-char .hbar{height:14px;border:1px solid #8a6a42;border-radius:7px;background:#1a120a;box-shadow:inset 0 2px 4px #000c}
.hud-char .hbar i{border-radius:6px;box-shadow:inset 0 -3px 4px #0006, inset 0 2px 2px #ffffff2e}
.hud-char .hbar.hp i{background:linear-gradient(#ff6b57,#a82315)}
.hud-char .hbar.xp{height:9px}.hud-char .hbar.xp span{line-height:9px;font-size:6px}
.hud-char .hud-missoes{margin-top:7px;font-size:8px;color:#ffcb47;text-shadow:0 1px 0 #000}
.hud-nav{display:flex;flex-direction:column;align-items:center;gap:6px;background:linear-gradient(160deg,#221708f2,#120c05f2);border:1px solid #8a6a42;border-radius:12px;box-shadow:0 4px 18px #000c, inset 0 1px 0 #c9a24a33;padding:10px 12px}
.nav-zona{margin:0;font-size:11px;color:var(--amber);text-shadow:0 1px 0 #000}
.mini-wrap{position:relative;width:150px;height:150px;margin:4px 8px}
#minimapa{display:block;width:150px;height:150px;image-rendering:pixelated;border-radius:50%;border:3px solid #8a6a42;box-shadow:0 0 0 2px #1a120a, 0 4px 14px #000a, inset 0 0 18px #0008;background:#111}
.mini-pt{position:absolute;font-size:8px;color:#ffd97a;text-shadow:0 1px 2px #000;background:#1a120acc;border:1px solid #8a6a42;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center}
.mini-n{top:-8px;left:50%;transform:translateX(-50%)}
.mini-s{bottom:-8px;left:50%;transform:translateX(-50%)}
.mini-l{left:-8px;top:50%;transform:translateY(-50%)}
.mini-r{right:-8px;top:50%;transform:translateY(-50%)}
.nav-btns{display:flex;gap:6px}
.hud-dica-box{max-width:min(46vw,480px)}
@media (max-width:700px){.hud-dica-box{display:none}.nav-zona{font-size:9px}.mini-wrap,#minimapa{width:100px;height:100px}.hud-char{min-width:170px}}

/* cena de batalha da montanha */

/* editor de mapas (F2) */
.hud-editor{top:70px;right:12px;max-width:250px;z-index:7}
.ed-t{color:var(--amber);font-size:10px;margin-bottom:8px}
.ed-pal{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:8px}
.ed-tile{width:32px;height:28px;border:2px solid #2A1E14;border-radius:4px;color:#fff;text-shadow:1px 1px 0 #000;font-family:inherit;font-size:10px;cursor:pointer;padding:0}
.ed-tile:hover{border-color:var(--amber)}
.ed-atual{font-size:8px;color:var(--ink);margin-bottom:6px}
.ed-dica{font-size:7px;color:var(--muted);line-height:1.7}

/* forja */
.bolsa-mat{font-size:9px;line-height:2.2;margin-bottom:10px}
.mat{display:inline-block;background:var(--edge);border-radius:4px;padding:3px 8px;margin:2px 4px 2px 0}
.qr .ok{color:var(--good)} .qr .falta{color:var(--bad)}
.qh .rc.rara,.qh .rc.lendaria{color:var(--amber2)}

/* talentos */
.trees{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:780px){.trees{grid-template-columns:1fr}}
.tree{background:var(--panel);border:2px solid var(--edge);border-radius:6px;padding:12px}
.tree h3{color:var(--amber2);font-size:11px;margin:.2em 0 .9em;text-align:center}
.tal{border:2px solid var(--edge);border-radius:5px;padding:9px;margin-bottom:8px;font-size:8px}
.tal .tt{font-size:9px;color:var(--ink)}
.tal .td{color:var(--muted);margin-top:5px;line-height:1.6}
.tal.learned{border-color:var(--amber);background:#3a2c1c}
.tal.learned .tt{color:var(--amber)}
.tal.avail{border-color:var(--good);cursor:pointer}
.tal.avail:hover{background:#22301c}
.tal.avail .tt::after{content:' ▸ aprender';color:var(--good);font-size:8px}
.tal.locked{opacity:.45}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--panel2);border:2px solid var(--amber);
  color:var(--ink);padding:10px 16px;border-radius:6px;font-size:9px;z-index:30;box-shadow:var(--shadow)}

/* ═══════════════ Telas iniciais — atmosfera (login / seleção / forja) ═══════════════ */
#topbar{position:relative;z-index:3}
/* sprite pixel do herói (idle animado por frames de 64px) */
/* idle REAL = 4 frames (256×64). Cada tamanho reescala a folha (largura = 4× a largura do quadro). */
.pixel-hero{width:64px;height:64px;background:url("/assets/pk2-hero-idle-down.png") 0 0/256px 64px no-repeat;
  image-rendering:pixelated;animation:heroframes 1.1s steps(4) infinite}
@keyframes heroframes{to{background-position:-256px 0}}
body.no-anim .pixel-hero{animation:none}

/* ---- LOGIN ---- */
.tela.auth{max-width:none;margin:0;animation:fade .35s ease}
.auth-bg{position:fixed;inset:0;z-index:0;background:url("/assets/login-bg.png") center/cover no-repeat;image-rendering:pixelated}
.auth-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(130% 95% at 50% 2%,rgba(30,18,8,.18),rgba(10,7,3,.82) 74%),linear-gradient(180deg,rgba(10,6,3,.35),rgba(9,6,3,.72))}
.auth-inner{position:relative;z-index:1;max-width:440px;margin:0 auto;padding:3vh 16px 40px;text-align:center}
.auth-logo{display:flex;align-items:flex-end;justify-content:center;margin-bottom:2px;animation:heroBob 4.2s ease-in-out infinite}
body.no-anim .auth-logo{animation:none}
@keyframes heroBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.auth-logo img{width:190px;height:190px;image-rendering:pixelated;
  filter:drop-shadow(0 6px 0 rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(255,183,71,.35))}
.tela.auth h1{font-size:22px;color:var(--amber);text-shadow:0 0 12px rgba(255,203,71,.35),3px 3px 0 #0009,-1px -1px 0 #0006;letter-spacing:1px;margin:.1em 0 .1em}
.tela.auth .sub{color:#d8c39c;text-shadow:1px 1px 0 #000a;font-size:9px;margin:.4em auto 1.2em;max-width:360px}
.auth-panel{position:relative;text-align:left;background:linear-gradient(180deg,#2c2013,#1d140c);
  border:3px solid #6b4e30;border-radius:11px;padding:20px 20px 18px;
  box-shadow:0 0 0 2px #120c07,0 0 0 3px rgba(255,203,71,.10),0 12px 0 rgba(0,0,0,.55),inset 0 1px 0 rgba(255,203,71,.10)}
.auth-panel::before{content:"";position:absolute;inset:6px;border:1px solid rgba(255,203,71,.14);border-radius:7px;pointer-events:none}
.auth-panel .field label{color:var(--amber2);text-transform:uppercase;letter-spacing:1px}
.auth-panel input{width:100%;background:#0f0b07;border-color:#5a4128}
.auth-panel input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 2px rgba(255,203,71,.18)}
.auth-panel .row{margin-top:4px}
.auth-panel #entrar{flex:1}
.auth-credits{position:relative;z-index:1;margin-top:16px;text-align:center;opacity:.68;font-size:8px;color:#c9b48c;text-shadow:1px 1px 0 #000a}

/* ---- SELEÇÃO DE HERÓIS ---- */
.charlist{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.charcard{display:flex;gap:12px;align-items:stretch;padding:12px;
  background:linear-gradient(180deg,#2a1e12,#20160d);border:2px solid #5a4128;border-radius:9px;
  box-shadow:0 4px 0 rgba(0,0,0,.45),inset 0 1px 0 rgba(255,203,71,.06);transition:border-color .15s,transform .12s}
.charcard:hover{border-color:var(--amber);transform:translateY(-2px)}
.cc-portrait{flex:0 0 66px;width:66px;height:78px;border-radius:7px;overflow:hidden;
  background:radial-gradient(70% 60% at 50% 30%,#3a2c1c,#1a120b);border:2px solid #4a3623;
  display:flex;align-items:flex-end;justify-content:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.cc-portrait .pixel-hero{width:72px;height:72px;margin-bottom:-4px;background-size:288px 72px;animation-name:heroframesCC}
@keyframes heroframesCC{to{background-position:-288px 0}}
.cc-body{flex:1;min-width:0;display:flex;flex-direction:column}
.cc-body .row{margin-top:auto;padding-top:8px}
.charcard.new{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;
  border:2px dashed var(--amber2);background:linear-gradient(180deg,#241a10,#1a120b);color:var(--amber);
  min-height:110px;font-size:11px;text-align:center;transition:border-color .15s,transform .12s,box-shadow .15s}
.charcard.new::before{content:"✦";font-size:26px;color:var(--amber);text-shadow:0 0 10px rgba(255,203,71,.4)}
.charcard.new:hover{border-color:var(--amber);transform:translateY(-2px);box-shadow:0 0 16px rgba(255,203,71,.15)}

/* ---- FORJA (criação em 2 colunas) ---- */
.criar-2col{display:grid;grid-template-columns:1fr 322px;gap:16px;align-items:start}
.criar-col-side{position:sticky;top:14px}
.pick .opt{display:flex;gap:9px;align-items:flex-start}
.opt .oi{flex:0 0 24px;font-size:20px;line-height:1;text-align:center;filter:drop-shadow(1px 1px 0 #0007)}
.opt.sel .oi{filter:drop-shadow(0 0 6px rgba(255,203,71,.5))}
.opt .ott{flex:1;min-width:0}
.attr{position:relative}
.attr .abar{height:6px;background:#160f0a;border-radius:4px;overflow:hidden;margin:6px 2px 4px;box-shadow:inset 0 0 0 1px #4a3623}
.attr .abar>i{display:block;height:100%;background:linear-gradient(90deg,var(--amber2),var(--amber));border-radius:4px}
.forja-preview{background:linear-gradient(180deg,#2c2013,#1c130b);border:3px solid #6b4e30;border-radius:11px;
  box-shadow:0 0 0 2px #120c07,0 8px 0 rgba(0,0,0,.5);padding:16px;text-align:center}
.fp-title{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--amber2);margin-bottom:4px}
.fp-hero{height:150px;display:flex;align-items:flex-end;justify-content:center}
.fp-hero .pixel-hero{width:140px;height:140px;background-size:560px 140px;filter:drop-shadow(0 6px 0 rgba(0,0,0,.45))}
@keyframes heroframesFp{to{background-position:-560px 0}}
.fp-hero .pixel-hero{animation-name:heroframesFp}
.fp-name{font-size:13px;color:var(--amber);text-shadow:2px 2px 0 #0009;margin:6px 0 2px;min-height:16px}
.fp-cls{font-size:9px;color:var(--ink);margin-bottom:12px}
.fp-cls b{color:var(--amber2)}
.fp-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px}
.fp-stat{background:#1a120b;border:2px solid #4a3623;border-radius:6px;padding:7px 4px}
.fp-stat .k{font-size:7px;letter-spacing:1px;color:var(--muted);text-transform:uppercase}
.fp-stat .v{font-size:15px;color:var(--amber);margin-top:3px}
.fp-stat.wide{grid-column:1/3}
.fp-attrs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.fp-attrs .fa{background:#160f0a;border:1px solid #3d2c1a;border-radius:5px;padding:5px 2px}
.fp-attrs .fa .fk{font-size:7px;color:var(--muted)}
.fp-attrs .fa .fv{font-size:12px;color:var(--ink)}
.fp-attrs .fa.prim{border-color:var(--amber2);background:#241a10}
.fp-attrs .fa.prim .fv{color:var(--amber)}
@media(max-width:820px){.criar-2col{grid-template-columns:1fr}.criar-col-side{position:static;order:-1}}

/* ═══════════════ MMO — contador de online + chat ═══════════════ */
.online-badge{font-size:9px;color:#bfe0ff;background:rgba(10,20,40,.55);border:1px solid rgba(120,180,255,.4);
  border-radius:10px;padding:2px 7px;margin-left:6px;vertical-align:middle;text-shadow:1px 1px 0 #0008;white-space:nowrap}
.online-badge.sozinho{color:#a49a86;border-color:rgba(150,150,150,.25);background:rgba(24,22,18,.45)}
.hud-chat{position:fixed;left:12px;bottom:66px;z-index:6;width:min(340px,42vw);display:flex;flex-direction:column;gap:5px;pointer-events:none}
.chat-log{display:flex;flex-direction:column;align-items:flex-start;gap:3px;max-height:34vh;overflow:hidden;
  opacity:.3;transition:opacity .25s;padding:2px 0;-webkit-mask-image:linear-gradient(180deg,transparent,#000 26px);mask-image:linear-gradient(180deg,transparent,#000 26px)}
.hud-chat.ativo .chat-log,.hud-chat.foco .chat-log{opacity:1;overflow-y:auto;pointer-events:auto}
.chat-msg{font-size:9px;line-height:1.55;color:#eadfc8;text-shadow:1px 1px 0 #000b;background:rgba(10,8,4,.5);
  border-radius:5px;padding:3px 8px;max-width:100%;word-break:break-word}
.chat-msg b{color:#bfe0ff;margin-right:3px}
.chat-msg.meu{background:rgba(62,45,16,.55)}
.chat-msg.meu b{color:#ffcb47}
/* Canais (F1 §9): global, sussurro e sistema se distinguem à primeira vista do papo da zona. */
.chat-msg.ch-global{background:rgba(12,34,52,.62)}
.chat-msg.ch-global b{color:#7fd4ff}
.chat-msg.ch-sussurro{background:rgba(40,16,48,.62);font-style:italic}
.chat-msg.ch-sussurro b{color:#e8a0ff}
.chat-msg.ch-sistema{background:rgba(40,32,10,.62);color:#d8c48a;font-style:italic}
.chat-in{pointer-events:auto;width:100%;box-sizing:border-box;font-family:inherit;font-size:9px;color:#f0e6cf;
  background:rgba(14,10,5,.72);border:2px solid #6b4e30;border-radius:7px;padding:8px 9px;outline:none;
  opacity:.5;transition:opacity .2s,border-color .2s}
.chat-in:focus{opacity:1;border-color:#ffcb47;background:rgba(20,14,7,.92)}
.chat-in::placeholder{color:#8a7a5c}
@media(max-width:640px){.hud-chat{width:66vw;bottom:60px}}

/* ═══════════════ Seletor de avatar (criação) ═══════════════ */
.av-pick{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 6px}
.av-opt{display:flex;flex-direction:column;align-items:center;gap:3px;width:76px;padding:7px 4px 5px;
  background:var(--panel2);border:2px solid var(--edge);border-radius:8px;cursor:pointer;color:var(--muted);
  font-family:inherit;font-size:7px;transition:border-color .12s,background .12s,transform .08s}
.av-opt:hover{border-color:var(--edge2);color:var(--ink);transform:translateY(-1px)}
.av-opt.sel{border-color:var(--amber);background:#241a10;color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset}
.av-sprite{width:52px;height:52px;background-repeat:no-repeat;background-position:left top;background-size:auto 52px;image-rendering:pixelated}
.av-nome{white-space:nowrap;letter-spacing:.3px}
.fp-cv{width:132px;height:132px;image-rendering:pixelated;filter:drop-shadow(0 6px 0 rgba(0,0,0,.45))}
.cc-cv{width:72px;height:72px;image-rendering:pixelated;margin-bottom:-4px}
.sexo-pick{max-width:340px}

/* ═══════════════ Tela de boas-vindas ═══════════════ */
.tela.bemvindo{max-width:none;margin:0;animation:fade .35s ease}
.bv-bg{position:fixed;inset:0;z-index:0;background:url("/assets/welcome-bg.png") center/cover no-repeat;image-rendering:pixelated}
.bv-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,rgba(20,14,7,.32),rgba(9,6,3,.86) 78%)}
.bv-inner{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:3vh 16px 5vh;text-align:center}
.bv-logo img{width:128px;height:128px;image-rendering:pixelated;filter:drop-shadow(0 5px 0 rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(255,183,71,.3))}
.bemvindo h1{font-size:22px;color:var(--amber);text-shadow:0 0 12px rgba(255,203,71,.35),3px 3px 0 #0009;margin:.1em 0}
.bemvindo .sub{color:#d8c39c;text-shadow:1px 1px 0 #000a;font-size:9px;margin:.4em auto 1.4em;max-width:520px}
.bv-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:left;margin-bottom:22px}
.bv-card{background:linear-gradient(180deg,rgba(44,32,19,.94),rgba(29,20,12,.94));border:2px solid var(--edge2);border-radius:10px;
  padding:14px 14px 10px;box-shadow:0 10px 0 rgba(0,0,0,.5),inset 0 1px 0 rgba(255,203,71,.1)}
.bv-h{font-size:11px;color:var(--amber);margin-bottom:10px;text-shadow:1px 1px 0 #0008}
.bv-li{font-size:8px;line-height:1.85;color:#e7dbc2;margin-bottom:7px}
.bv-li b{color:#ffcb47}
.bv-tag{color:#9ae66e;white-space:nowrap}
.bv-ic{display:inline-block;width:15px}
.bv-go{font-size:12px;padding:14px 30px}
.link-news{font-size:8px;color:var(--amber2);text-decoration:none;border-bottom:1px dotted var(--amber2);margin-left:6px;white-space:nowrap}
@media(max-width:720px){.bv-cols{grid-template-columns:1fr}}

/* ═══════════════ MMO Fase 2 — Grupo (party) ═══════════════ */
/* menu ao clicar num jogador */
.jm-panel{max-width:320px;text-align:center}
.jm-nome{font-size:13px;color:var(--amber)}
.jm-sub{font-size:8px;color:var(--muted);margin:4px 0 14px}
.jm-acoes{display:flex;flex-direction:column;gap:8px}
.jm-btn{width:100%;font-size:9px;padding:11px}
.jm-info{font-size:9px;color:var(--good);padding:8px;background:rgba(120,220,110,.1);border-radius:6px}
/* popup de convite recebido */
.grupo-convite-pop{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:20;
  background:linear-gradient(180deg,#2c2013,#1d140c);border:2px solid var(--amber);border-radius:10px;
  padding:12px 16px;box-shadow:0 10px 0 rgba(0,0,0,.5);text-align:center;animation:fade .25s ease}
.gcp-txt{font-size:9px;color:var(--ink);margin-bottom:10px}
.gcp-txt b{color:var(--amber)}
.gcp-btns{display:flex;gap:8px;justify-content:center}
.gcp-btns button{font-size:9px;padding:8px 12px}
.gcp-sim{background:#2f6a2f;border-color:#8ad46a;color:#eaffea}
.gcp-nao{background:#3a2418;color:var(--muted)}
/* roster do grupo (HUD esquerda) */
.grupo-hud{position:fixed;left:12px;top:200px;z-index:5;width:190px;background:rgba(20,28,16,.82);
  border:1px solid rgba(122,220,110,.4);border-radius:9px;padding:8px 9px;box-shadow:var(--shadow)}
.gh-tit{font-size:9px;color:#9ae66e;margin-bottom:6px;letter-spacing:.4px}
.gh-mb{display:flex;align-items:center;gap:5px;font-size:8px;color:#dceccf;padding:3px 0;line-height:1.4}
.gh-mb.eu{color:#fff}
.gh-medal{flex:none}
.gh-nome{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gh-meta{flex:none;color:#8fae82;font-size:7px}
.gh-sair{width:100%;margin-top:7px;font-size:7px;padding:6px;background:#3a2418;color:var(--muted);border:1px solid var(--edge)}
@media(max-width:640px){.grupo-hud{top:auto;bottom:120px;width:150px}}

/* ═══════════════ MMO Fase 2 — Troca (trade) ═══════════════ */
.troca-modal{position:fixed;inset:0;z-index:22;background:rgba(8,6,3,.72);display:flex;align-items:center;justify-content:center;animation:fade .2s ease}
.tr-box{width:min(560px,94vw);max-height:92vh;overflow-y:auto;background:linear-gradient(180deg,#2c2013,#1d140c);
  border:3px solid var(--edge2);border-radius:12px;padding:16px 18px;box-shadow:0 16px 0 rgba(0,0,0,.5)}
.tr-head{font-size:12px;color:var(--amber);text-align:center;margin-bottom:14px}
.tr-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.tr-col{background:rgba(0,0,0,.24);border:1px solid var(--edge);border-radius:8px;padding:10px;min-height:96px}
.tr-col.mine{border-color:rgba(255,203,71,.4)}
.tr-lbl{font-size:8px;color:var(--muted);margin-bottom:8px;letter-spacing:.3px}
.tr-ok{color:var(--good)}
.tr-wait{color:var(--dim)}
.tr-oferta{display:flex;flex-wrap:wrap;gap:5px;min-height:24px;margin-bottom:8px}
.tr-vazio{font-size:8px;color:var(--dim);font-style:italic}
.tr-chip{display:inline-flex;align-items:center;gap:3px;font-size:8px;color:var(--ink);background:#3a2c1a;
  border:1px solid var(--edge2);border-radius:5px;padding:3px 6px;cursor:default;max-width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tr-chip.inv{cursor:pointer;background:#2f2417}
.tr-chip.inv:hover{border-color:var(--amber);color:var(--amber)}
.tr-chip.rem{cursor:pointer}
.tr-chip.rem:hover{border-color:var(--bad);color:#ffb0a0}
.tr-ouro{font-size:9px;color:#ffcb47;display:flex;align-items:center;gap:6px}
.tr-ouro input{width:70px;font-family:inherit;font-size:9px;background:#161009;color:#ffe066;border:1px solid var(--edge2);border-radius:4px;padding:4px 6px}
.tr-gmax{color:var(--dim);font-size:8px}
.tr-inv{display:flex;flex-wrap:wrap;gap:5px;background:rgba(0,0,0,.24);border:1px solid var(--edge);border-radius:8px;padding:9px;min-height:40px;max-height:130px;overflow-y:auto;margin-bottom:14px}
.tr-btns{display:flex;gap:10px}
.tr-btns button{flex:1;font-size:9px;padding:11px}
#tr-conf{background:#2f6a2f;border-color:#8ad46a;color:#eaffea}
#tr-conf.confirmado{background:#4a3626;color:var(--good);border-color:var(--good)}
@media(max-width:560px){.tr-cols{grid-template-columns:1fr}}

/* ═══════════════ MMO Fase 2 — PvP (duelo) ═══════════════ */
.duelo-modal{position:fixed;inset:0;z-index:23;background:rgba(10,4,3,.78);display:flex;align-items:center;justify-content:center;animation:fade .2s ease}
.du-box{width:min(460px,94vw);background:linear-gradient(180deg,#2e1a12,#1c1009);border:3px solid #7a3a2a;border-radius:12px;padding:16px 18px;box-shadow:0 16px 0 rgba(0,0,0,.5)}
.du-head{font-size:13px;color:#ff9a6a;text-align:center;margin-bottom:14px;text-shadow:0 0 10px rgba(255,90,50,.3)}
.du-hps{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.du-lado{flex:1}
.du-nome{font-size:9px;color:var(--ink);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.du-nome.eu{color:var(--amber)}
.du-vs{font-size:14px;flex:none}
.du-hps .bar{position:relative;height:16px;background:#3a1010;border:1px solid #6b2020;border-radius:5px;overflow:hidden}
.du-hps .bar i{display:block;height:100%;background:linear-gradient(180deg,#e0533f,#8a2f22)}
.du-hps .bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:7px;color:#fff;text-shadow:1px 1px 0 #000}
.du-log{height:78px;overflow-y:auto;background:rgba(0,0,0,.3);border:1px solid var(--edge);border-radius:6px;padding:7px 9px;font-size:8px;line-height:1.7;color:#e7dbc2;margin-bottom:10px;display:flex;flex-direction:column;justify-content:flex-end}
.du-turno{text-align:center;font-size:9px;color:var(--muted);margin-bottom:10px}
.du-turno.ativo{color:#9ae66e;animation:pulseT 1s ease-in-out infinite}
@keyframes pulseT{0%,100%{opacity:.7}50%{opacity:1}}
.du-btns{display:flex;gap:10px}
.du-btns button{flex:1;font-size:10px;padding:12px}
#du-atk{background:#8a2f22;border-color:#e0533f;color:#ffeae5}
#du-atk:disabled{background:#2a1c18;color:var(--dim);border-color:var(--edge);opacity:.7}
#du-end{background:#3a2c1c;border-color:var(--amber);color:#ffeecb}
#du-end:disabled{background:#2a1c18;color:var(--dim);border-color:var(--edge);opacity:.7}

/* ── DUELO POR CARTAS (Fase 3) ── */
.duelo-cartas .du-box.du-cartas-box{width:min(820px,97vw);max-height:95vh;overflow-y:auto}
.du-cartas-box .du-lado{margin-bottom:8px}
.du-cartas-box .du-lado.dele{border-bottom:1px dashed var(--edge);padding-bottom:8px}
.du-cartas-box .du-lado.eu .du-nome{color:var(--amber)}
.du-cartas-box .bar.hpb{position:relative;height:16px;background:#3a1010;border:1px solid #6b2020;border-radius:5px;overflow:hidden;margin:4px 0}
.du-cartas-box .bar.hpb i{display:block;height:100%;background:linear-gradient(180deg,#e0533f,#8a2f22)}
.du-cartas-box .bar.hpb span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:7px;color:#fff;text-shadow:1px 1px 0 #000}
.du-cartas-box .chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.du-cartas-box .chip{font-size:7px;padding:2px 5px;background:rgba(0,0,0,.35);border:1px solid var(--edge);border-radius:4px;color:#e7dbc2}
.du-cartas-box .chip.nrg{color:#ffe08a}
.du-cartas-box .chip.blk{color:#8fd0ff}
.du-cartas-box .chip.sub{color:var(--muted)}
.du-cartas-n{font-size:8px;color:var(--muted)}
.du-mao-dorso{display:flex;gap:3px;flex-wrap:wrap;margin-top:5px;min-height:22px}
.du-dorso{width:16px;height:22px;background:linear-gradient(135deg,#4a2f6a,#26163a);border:1px solid #7a5aa0;border-radius:3px;font-size:11px;line-height:22px;text-align:center;color:#c9b3ec}
.du-hand{margin:8px 0;max-height:280px;overflow-y:auto}
.du-hand .card{width:104px}
.du-hand .card .card-art{height:58px}

/* ── DUNGEON (raid de chefe em grupo) ── */
.rd-box{width:min(500px,95vw)}
.rd-boss{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:10px 12px;background:rgba(0,0,0,.28);border:1px solid #6b2020;border-radius:8px}
.rd-boss-emoji{font-size:34px;line-height:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6));animation:bossBob 2.2s ease-in-out infinite}
@keyframes bossBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.rd-boss .bar{flex:1;position:relative;height:20px;background:#3a1010;border:1px solid #6b2020;border-radius:6px;overflow:hidden}
.rd-boss .bar i{display:block;height:100%;background:linear-gradient(180deg,#e0533f,#7a1f14)}
.rd-boss .bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:8px;color:#fff;text-shadow:1px 1px 0 #000}
.rd-party{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.rd-mb{display:flex;align-items:center;gap:8px}
.rd-mb-nome{flex:0 0 42%;font-size:8px;color:#dceccf;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-mb.eu .rd-mb-nome{color:#fff;font-weight:bold}
.rd-mb.turno{filter:none}
.rd-mb.turno .rd-mb-nome{color:#9ae66e}
.rd-mb.caido{opacity:.45}
.rd-mb.caido .rd-mb-nome{color:#b06a5a;text-decoration:line-through}
.rd-mb .bar.hpb.sm{flex:1;position:relative;height:13px;background:#2a1410;border:1px solid #5a3020;border-radius:4px;overflow:hidden}
.rd-mb .bar.hpb.sm i{display:block;height:100%;background:linear-gradient(180deg,#8ad06a,#4e8a3a)}
.rd-mb.caido .bar.hpb.sm i{background:#5a3030}
.rd-mb .bar.hpb.sm span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:6px;color:#fff;text-shadow:1px 1px 0 #000}
.gh-raid{width:100%;margin-top:7px;font-size:8px;padding:8px;background:#7a1f14;color:#ffeae5;border:1px solid #e0533f;font-weight:bold}
.gh-raid:hover{background:#9a2a1a}
#rd-atk{background:#8a2f22;border-color:#e0533f;color:#ffeae5}
#rd-atk:disabled{background:#2a1c18;color:var(--dim);border-color:var(--edge);opacity:.7}

/* ── Ranking PvP (leaderboard) ── */
.rk-panel{width:min(440px,94vw);max-height:88vh;overflow-y:auto}
.rk-lista{display:flex;flex-direction:column;gap:4px}
.rk-linha{display:flex;align-items:center;gap:8px;font-size:9px;color:var(--ink);background:var(--panel2);
  border:1px solid var(--edge);border-radius:6px;padding:7px 10px}
.rk-linha.top{border-color:var(--amber2);background:#2a2013}
.rk-pos{flex:none;width:22px;text-align:center;font-size:11px;color:var(--amber)}
.rk-medal{flex:none}
.rk-nome{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.rk-meta{flex:none;font-size:7px;color:var(--muted)}
.rk-vit{flex:none;font-size:9px;color:var(--good);font-variant-numeric:tabular-nums}
.rk-d{color:var(--dim)}
.rk-vazio{font-size:9px;color:var(--muted);text-align:center;padding:18px 8px;line-height:1.8;font-style:italic}

/* ══════════════════════════════════════════════════════════════════════
   REX — SKIN PERGAMINHO/MADEIRA (menus fora do mundo). 2026-07-14.
   Só material/moldura/hierarquia; nenhuma função tocada. Bloco removível
   por inteiro para reverter. Escopo: telas de menu (#rpg), não o mundo.
   Materiais: /assets/ui-parchment.png, /assets/ui-wood.png, portrait-gorm.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --parch-img:url('/assets/ui-parchment.png');
  --wood-dk:#24160c; --wood-md:#4a3018; --wood-lt:#7a5330;
  --brass:#d0a03a; --brass-dk:#8a5f22; --gold-ink:#ffe08a;
}
/* leve calor amadeirado no fundo geral dos menus */
body{background-image:
  radial-gradient(1200px 600px at 50% -10%,#33230f 0%,transparent 60%),
  radial-gradient(900px 500px at 50% 120%,#20140a 0%,transparent 55%);}

/* ── PAINÉIS: pergaminho envelhecido dentro de moldura de madeira entalhada ── */
#rpg .panel,#rpg .quest,#rpg .exped,#rpg .faccao,#rpg .tree,#rpg .boato,
#rpg .conq,#rpg .foe{
  background-color:#241a12;
  background-image:var(--parch-img);
  background-size:190px;
  background-blend-mode:multiply;
  border:3px solid var(--wood-lt);
  border-radius:9px;
  box-shadow:
    inset 0 0 0 2px var(--wood-dk),
    inset 0 3px 0 #ffffff12,
    inset 0 -14px 26px #00000055,
    0 5px 0 #0006, 0 9px 16px #00000070;
}
#rpg .boato{border-left-width:8px;border-left-color:var(--brass-dk)}
#rpg .quest.done{border-color:var(--good)}
#rpg .quest.on,#rpg .exped:not(.locked){border-color:var(--brass)}
#rpg .conq.got{border-color:var(--brass)}

/* painéis internos claros (slots, atributos, stats) recebem o mesmo grão */
#rpg .opt,#rpg .attr,#rpg .stat,#rpg .slotcell,#rpg .shopitem,#rpg .reg,
#rpg .fp-stat,#rpg .bandeja,#rpg .bolsa-mat{
  background-color:var(--panel2);
  background-image:var(--parch-img);
  background-size:150px;
  background-blend-mode:multiply;
  border-color:var(--wood-md);
}
#rpg .opt.sel{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass) inset}
#rpg .stat b{color:var(--gold-ink)}

/* ── TÍTULOS: placa de madeira com dourado gravado + tachas de latão ── */
#rpg .tela > h1{
  display:inline-block;position:relative;
  margin:.1em 0 .7em;padding:11px 26px 13px;
  color:var(--gold-ink);
  text-shadow:0 1px 0 #000,0 2px 3px #0009,0 0 10px rgba(255,190,80,.28);
  background:linear-gradient(180deg,#6b4a2b,#4a3018 58%,#37220f);
  border:3px solid var(--wood-dk);border-radius:10px;
  box-shadow:inset 0 2px 0 #ffffff22,inset 0 -7px 12px #00000066,0 4px 0 #0007,0 7px 13px #0008;
}
#rpg .tela > h1::before,#rpg .tela > h1::after{
  content:'';position:absolute;top:50%;width:7px;height:7px;border-radius:50%;transform:translateY(-50%);
  background:radial-gradient(circle at 35% 30%,#ffe9a8,#c0871f 68%,#6b4a12);box-shadow:0 0 3px #000,0 1px 1px #0008;}
#rpg .tela > h1::before{left:8px} #rpg .tela > h1::after{right:8px}

/* subtítulos das seções: fita de madeira com filete de latão */
#rpg .tela h2{
  display:inline-block;color:#ffd777;
  padding:3px 13px 4px;margin-top:1.1em;
  background:linear-gradient(90deg,#472e19,#37220f 78%,transparent);
  border-left:3px solid var(--brass);border-radius:0 6px 6px 0;
  text-shadow:0 1px 0 #000;}
#rpg .tree h3{color:var(--gold-ink);text-shadow:0 1px 0 #000,0 0 8px rgba(255,190,80,.2)}

/* ── BOTÕES: madeira com filete de latão (não mais o amarelo chapado) ── */
#rpg button,#rpg .btn{
  color:#ffe9b0;
  background:linear-gradient(180deg,#7d5631,#5c3d23 55%,#472e19);
  border:2px solid var(--wood-dk);border-bottom:4px solid var(--wood-dk);
  border-radius:7px;text-shadow:0 1px 0 #000;
  box-shadow:inset 0 2px 0 #ffffff20,inset 0 -3px 6px #00000055;}
#rpg button:hover,#rpg .btn:hover{filter:brightness(1.12) saturate(1.05)}
#rpg button:active{transform:translateY(2px);border-bottom-width:2px}
#rpg button.ghost{background:linear-gradient(180deg,#3c2b1b,#2b1e12);color:#e8c579;
  border-color:#1d130a;border-bottom-color:#1d130a;box-shadow:inset 0 1px 0 #ffffff12,inset 0 -2px 5px #0006}
#rpg button.danger{background:linear-gradient(180deg,#8c3b2c,#5f251b);color:#ffd9cf;
  border-color:#3a140d;border-bottom-color:#3a140d}
#rpg button:disabled{filter:grayscale(.5) brightness(.8)}
/* botão principal de ação (Forjar / Sair da loja / Ir ao mundo): brilho de latão */
#rpg #forjar,#rpg #ir-mundo{
  background:linear-gradient(180deg,#e6b955,#c8912f 55%,#a8761f);color:#3a2408;
  border-color:#6b4a12;border-bottom-color:#6b4a12;text-shadow:0 1px 0 #ffdf9a80;}

/* ── GORM (retrato) e diálogo ── */
#rpg .gorm{background:#241a12;background-image:var(--parch-img);background-size:200px;background-blend-mode:multiply;
  border:3px solid var(--wood-lt);border-radius:9px;box-shadow:inset 0 0 0 2px var(--wood-dk),0 4px 0 #0006}
#rpg .gorm-face{width:80px;height:80px;border:3px solid var(--brass);border-radius:8px;
  box-shadow:0 0 0 2px var(--wood-dk),inset 0 0 8px #0007}
#rpg .dlg.panel{border-color:var(--wood-lt)}

/* ── REGULARES DA TAVERNA: medalhão consistente (aro de latão + pergaminho) ── */
#rpg .regulars{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:11px}
#rpg .reg{align-items:center;gap:13px;border-radius:10px;padding:11px 12px}
#rpg .reg .ri{
  position:relative;overflow:hidden;
  flex:0 0 auto;width:54px;height:54px;display:flex;align-items:center;justify-content:center;
  font-size:25px;line-height:1;border-radius:50%;
  background-color:#d8bd82;background-image:var(--parch-img);background-size:cover;background-position:center;
  background-blend-mode:multiply;
  box-shadow:0 0 0 3px var(--brass),0 0 0 6px var(--wood-md),inset 0 -3px 7px #0006,inset 0 3px 5px #fff6;}
/* retrato pixel-art de CADA regular preenche o medalhão redondo (quadrado 128 → cover/center).
   onerror remove o <img> e o emoji por baixo reaparece como fallback. */
#rpg .reg .ri .ri-face{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  image-rendering:pixelated;border-radius:50%;}
#rpg .reg .rc{color:var(--brass)}

/* ── LOJA: elimina o espaço morto (colunas de altura igual + bolsa ilustrada) ── */
#rpg .loja-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
#rpg .loja-grid > .panel{display:flex;flex-direction:column}
#rpg .loja-grid .shoplist{max-height:58vh;flex:1}
#rpg .bag-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:26px 18px;border-radius:8px;
  border:2px dashed var(--wood-md);background:#00000026;min-height:220px}
#rpg .bag-empty .be-ic{font-size:46px;filter:drop-shadow(0 3px 0 #0007);opacity:.85}
#rpg .bag-empty .be-t{font-size:11px;color:var(--gold-ink)}
#rpg .bag-empty .be-s{font-size:8px;color:var(--muted);line-height:1.7;max-width:230px}
@media(max-width:780px){#rpg .loja-grid{grid-template-columns:1fr}}

/* ── moldura de pergaminho/madeira também no visor de baralho e overlays de menu ── */
#rpg .overlay .panel,#rpg .result.panel{border-color:var(--wood-lt)}

/* diálogo dos regulares da taverna (overlay anexado ao body — fora de #rpg).
   Escopado em .dlg-tav para NÃO afetar os diálogos de NPC do mundo. */
.dlg-tav.panel{
  background-color:#241a12;background-image:var(--parch-img);background-size:190px;background-blend-mode:multiply;
  border:3px solid var(--wood-lt);border-radius:9px;
  box-shadow:inset 0 0 0 2px var(--wood-dk),inset 0 3px 0 #ffffff12,0 6px 0 #0006,0 12px 22px #0008;}
.dlg-tav .dlg-ic{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;font-size:18px;line-height:1;
  vertical-align:middle;margin-right:5px;border-radius:50%;
  background-color:#d8bd82;background-image:var(--parch-img);background-size:cover;background-position:center;background-blend-mode:multiply;
  box-shadow:0 0 0 2px var(--brass),0 0 0 4px var(--wood-md),inset 0 -2px 5px #0006;}
/* retrato do regular com quem se fala; onerror → emoji de fallback reaparece */
.dlg-tav .dlg-ic .dlg-ic-face{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  image-rendering:pixelated;border-radius:50%;}
.dlg-tav .dlg-h{display:flex;align-items:center;color:var(--gold-ink)}
.dlg-tav button,.dlg-tav .btn{
  color:#ffe9b0;background:linear-gradient(180deg,#7d5631,#5c3d23 55%,#472e19);
  border:2px solid var(--wood-dk);border-bottom:4px solid var(--wood-dk);border-radius:7px;text-shadow:0 1px 0 #000;
  box-shadow:inset 0 2px 0 #ffffff20,inset 0 -3px 6px #00000055;}
.dlg-tav button:hover{filter:brightness(1.12)}
.dlg-tav button.ghost{background:linear-gradient(180deg,#3c2b1b,#2b1e12);color:#e8c579;border-color:#1d130a;border-bottom-color:#1d130a}

/* ══════════════════════════════════════════════════════════════════════
   REX — TAVERNA HUB EM TELA CHEIA. 2026-07-16.
   Só o menu-hub (classe .taverna-hub aplicada no renderTaverna) escapa do
   #rpg{max-width:1040px} via full-bleed (margens negativas de ±(50vw-50%)),
   sem tocar mundo/combate/outras telas. Bloco removível por inteiro.
   ══════════════════════════════════════════════════════════════════════ */
.taverna-hub{
  /* full-bleed: rompe o container central de 1040px sem usar 100vw (evita o
     sliver de scroll horizontal; body{overflow-x:hidden} termina o serviço). */
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:6px clamp(14px,4vw,60px) 60px;
}
/* container interno confortável: tela inteira, mas sem linhas quilométricas */
.taverna-hub .hub-inner{max-width:1560px;margin:0 auto}

/* ── BANNER de taverna ── */
.taverna-hub .hub-banner{
  display:flex;align-items:center;gap:18px;margin:0 0 20px;padding:14px 20px;
  background:linear-gradient(180deg,#6b4a2b,#4a3018 58%,#37220f);
  border:3px solid var(--wood-dk);border-radius:12px;
  box-shadow:inset 0 2px 0 #ffffff20,inset 0 -8px 16px #00000066,0 5px 0 #0007,0 9px 18px #0008;
}
.taverna-hub .hub-crest{
  flex:0 0 auto;width:66px;height:66px;display:flex;align-items:center;justify-content:center;
  font-size:34px;line-height:1;border-radius:12px;
  background-color:#d8bd82;background-image:var(--parch-img);background-size:cover;background-blend-mode:multiply;
  box-shadow:0 0 0 3px var(--brass),0 0 0 6px var(--wood-md),inset 0 -3px 8px #0007,inset 0 3px 6px #fff6;
}
.taverna-hub .hub-titles{flex:1 1 auto;min-width:0}
.taverna-hub .hub-banner h1{
  margin:0;font-size:22px;color:var(--gold-ink);
  text-shadow:0 1px 0 #000,0 2px 3px #0009,0 0 12px rgba(255,190,80,.30);
}
.taverna-hub .hub-sub{margin:.5em 0 0;color:#e8c98f;font-size:8px;line-height:1.7}
.taverna-hub .hub-sair{
  flex:0 0 auto;display:flex;flex-direction:column;gap:4px;align-items:center;
  padding:12px 18px;font-size:12px;
}
.taverna-hub .hub-sair small{font-size:7px;opacity:.85;font-family:inherit;text-transform:none}

/* ── COLUNAS: ficha larga à esquerda, salão à direita ── */
.taverna-hub .tav{grid-template-columns:360px 1fr;gap:18px}
/* botões de ação da ficha em 2 colunas arrumadas (não uma pilha estreita) */
.taverna-hub .hub-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.taverna-hub .hub-actions button{width:100%;margin:0;text-align:center}

/* coluna direita: gorm em destaque, salão, e Equipamento+Mochila lado a lado */
.taverna-hub .grid{gap:16px;align-content:start}
.taverna-hub .gorm{font-size:11px}
.taverna-hub .hub-gear{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.taverna-hub .hub-gear > .panel{display:flex;flex-direction:column}
/* regulares aproveitam a largura (2–3 colunas já via auto-fill de #rpg .regulars) */

/* ── RESPONSIVO: colapsa para 1 coluna, sem scroll lateral ── */
@media(max-width:900px){
  .taverna-hub .tav{grid-template-columns:1fr}
  .taverna-hub .hub-gear{grid-template-columns:1fr}
}
@media(max-width:560px){
  .taverna-hub{padding:6px 12px 48px}
  .taverna-hub .hub-banner{flex-wrap:wrap;gap:12px;padding:12px 14px}
  .taverna-hub .hub-sair{width:100%}
  .taverna-hub .hub-actions{grid-template-columns:1fr}
}

/* ── Aba Baralho (Fase 1 do sistema de cartas): coleção + deck ── */
.baralho-tela .deck-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px}
.baralho-tela .deck-head .row{margin-left:auto;gap:8px}
.baralho-tela .deck-count{font-size:12px;color:var(--ink)}
.baralho-tela .deck-count.ok b{color:var(--good)}
.baralho-tela .deck-count.bad b{color:var(--bad)}
.baralho-tela .deck-aviso .ok{color:var(--good);font-size:9px}
.baralho-tela .deck-aviso .falta{color:var(--bad);font-size:9px}
.baralho-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.baralho-cols .panel h2{margin-top:0}
.baralho-cols .deck-box{background:linear-gradient(#2a2013,#1d1610);border-color:var(--amber2)}
.card-grid{display:flex;flex-wrap:wrap;gap:14px 12px;align-content:flex-start}
.card-grid .card{cursor:pointer}
.card-grid .card.esgotada{opacity:.4;cursor:not-allowed}
.card-grid .card.esgotada:hover{transform:none;border-color:var(--edge2)}
.card-grid .card.rem:hover{border-color:var(--bad)}
.card .deck-qtd{position:absolute;bottom:-8px;right:-8px;background:#1a120a;color:var(--amber);border:2px solid var(--edge2);border-radius:8px;font-size:8px;padding:2px 5px;z-index:2}
.col-grid .card.add .deck-qtd{background:#231a10;color:var(--muted)}
@media(max-width:720px){ .baralho-cols{grid-template-columns:1fr} }


/* N1/N2 (F2 §6): selo de "tem fala nova" quando um marco destrava conversa com um regular. */
.dlg-novo{font-size:6px;padding:2px 5px;border-radius:3px;margin-left:8px;vertical-align:middle;
  letter-spacing:.5px;background:#2a3a1a;border:1px solid #6f8a2a;color:#cfe88a}

/* C2 (F2 §7): a loja fechada à noite. A vitrine fica visível e apagada — tela vazia não
   ensina nada; vitrine apagada ensina "volta de manhã". */
.selo-fechado{font-size:8px;padding:3px 7px;border-radius:4px;vertical-align:middle;margin-left:8px;
  background:#1a1a2e;border:1px solid #46466a;color:#9aa0c0;letter-spacing:.5px}
.aviso-fechado{border-color:#46466a;background:#15152a;font-size:8px;line-height:1.7;margin-bottom:12px}
.loja-fechada .shoplist{opacity:.5;filter:grayscale(.55)}
.loja-fechada .pacote-box{opacity:.5;filter:grayscale(.55)}

/* F2 §8: bancada de aprimoro na forja — os pips mostram o nível de relance (◆◆◇ = +2 de 3). */
.ap-pips{font-size:7px;letter-spacing:2px;margin-left:6px;color:var(--dim)}
.ap-pips .pip.on{color:var(--amber)}

/* F2 §9: Torre Infinita — placar e a encruzilhada do fim de cada andar. */
.placar{width:100%;border-collapse:collapse;font-size:8px}
.placar td{padding:4px 6px;border-bottom:1px solid var(--edge)}
.placar tr.eu{background:#2a2436}
.placar tr.eu td{color:var(--amber)}
.placar .tp{color:var(--dim);width:34px}
.placar .ta{text-align:right;color:var(--amber2);white-space:nowrap}
.torre-prox{margin-top:10px;padding:8px 10px;border:1px solid var(--edge2);border-radius:5px;
  background:#1a1626;font-size:8px;line-height:1.7;text-align:left}