:root{
  --ouro:#e6c36a; --ouro2:#a8812e; --fundo:#0d1420; --painel:rgba(14,18,28,.92); --borda:rgba(230,195,106,.45);
  --texto:#ece4d0; --suave:#a9a08c; --vida:#c8342c; --mana:#2f6fd0; --xp:#e6b030;
}
#jogo canvas{display:block}

/* carregamento */
#carrega{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(#1a2638,#070b12);z-index:50}
#carrega h1{font:700 26px Cinzel,serif;color:var(--ouro);margin:0}
.barra{width:min(320px,80vw);height:8px;border:1px solid var(--borda);background:#000;border-radius:4px;overflow:hidden}
.barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ouro2),var(--ouro));transition:width .2s}
#carrega p{color:var(--suave);font-size:13px;margin:0}

/* título */
.erro{color:#ff8a7a;font-size:13px;min-height:1em;margin:0}
.rodape{color:var(--suave);font-size:12px;margin-top:10px}

/* HUD */




/* números, avisos, faixas */
#numeros{position:fixed;inset:0;pointer-events:none;z-index:9}
.num{position:absolute;left:0;top:0;font:700 18px 'Alegreya Sans',sans-serif;color:#fff;text-shadow:0 2px 3px #000,0 0 2px #000;white-space:nowrap}
.num.critico{color:#ffd040;font-size:24px}
.num.sofrido{color:#ff6a5a}
.num.xp{color:#ffe08a;font-size:15px}
#avisos{position:fixed;top:30%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:20}
.aviso{background:var(--painel);border:1px solid var(--borda);padding:8px 16px;border-radius:4px;animation:aviso 3.6s forwards;text-align:center;max-width:90vw}
.aviso.nivel{color:var(--ouro);font:700 16px Cinzel,serif}
.aviso.morte{color:#ff8a7a}
@keyframes aviso{0%{opacity:0;transform:translateY(8px)}8%,80%{opacity:1;transform:none}100%{opacity:0}}
#faixa{position:fixed;top:16%;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;opacity:0;z-index:8}
#faixa.on{animation:faixa 4s forwards}
#faixa h2{margin:0;font:700 34px Cinzel,serif;color:var(--ouro);text-shadow:0 2px 8px #000}
#faixa p{margin:4px 0 0;color:#e8dfc8;text-shadow:0 1px 4px #000}
@keyframes faixa{0%{opacity:0}15%,70%{opacity:1}100%{opacity:0}}
#flashNivel,#flashTele{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:7}
#flashNivel{background:radial-gradient(rgba(255,215,110,.35),transparent 60%)}
#flashTele{background:radial-gradient(rgba(150,215,255,.5),transparent 70%)}
#flashNivel.on,#flashTele.on{animation:flash 1.2s}
@keyframes flash{0%{opacity:1}100%{opacity:0}}

/* painéis (sempre por cima de tudo, para o × funcionar) */
.pts{font:13px 'Alegreya Sans';color:var(--suave)}
.attr{display:grid;grid-template-columns:1fr 40px 32px;grid-template-rows:auto auto;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.attr small{grid-column:1;color:var(--suave);font-size:12px}
.attr span{grid-row:1/3;grid-column:2;text-align:center;font-weight:700}
.attr button{grid-row:1/3;grid-column:3;width:30px;height:30px;border:1px solid var(--borda);background:#24324a;color:var(--ouro);border-radius:3px;font-weight:700}
.attr button:disabled{opacity:.3;cursor:default}
.dest{display:block;width:100%;text-align:left;margin-bottom:6px;padding:10px 12px;border:1px solid var(--borda);background:linear-gradient(#1e2a3e,#121a28);color:var(--texto);border-radius:3px;font:700 14px Cinzel,serif}
.dest small{display:block;font:13px 'Alegreya Sans';color:var(--suave);margin-top:2px}
.dest:disabled{opacity:.4;cursor:default}
.dest:not(:disabled):hover{border-color:var(--ouro)}
.nota{color:#ffcf80;font-size:13px}

@media (max-width:640px){
}

/* ---------- fase 2: ouro, poções, rastreador, mochila, lojas, diálogos ---------- */
.ouroLinha{margin:0 0 10px;color:var(--suave)}
.ouroLinha b{color:#ffd56a}
.equipGrelha{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:8px}
.grelha{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:10px 0}
.cel{position:relative;aspect-ratio:1;border:1px solid rgba(255,255,255,.12);background:radial-gradient(circle,color-mix(in srgb,var(--rk,#000) 22%,transparent),rgba(0,0,0,.45) 70%);border-radius:3px;padding:3px;display:flex;align-items:center;justify-content:center;color:var(--texto)}
button.cel{border-color:var(--rk,rgba(255,255,255,.12))}
.cel.sel{outline:2px solid var(--ouro)}
.cel svg{width:100%;height:100%}
.cel small{font-size:10px;color:var(--suave);text-align:center}
.cel.vazia{background:rgba(0,0,0,.3)}
.cel .rk{position:absolute;left:2px;top:0;font-style:normal;font-size:10px;font-weight:700;color:var(--rk);text-shadow:0 1px 2px #000}
.cel .up{position:absolute;right:2px;bottom:0;font-style:normal;font-size:11px;color:#5aff6a;text-shadow:0 1px 2px #000}
.detalhe{border-top:1px solid var(--borda);padding-top:8px}
.detalhe h4{margin:0 0 2px}
.detalhe p{margin:4px 0}
.sub{color:var(--suave);font-size:13px}
.bom{color:#5aff6a}.pior{color:#ff8a7a}
.fala{font-style:italic;color:#e8dfc8;margin:0 0 12px}
.missao{border:1px solid rgba(230,195,106,.25);border-radius:3px;padding:8px 10px;margin-bottom:8px;background:rgba(0,0,0,.2)}
.missao.pronta{border-color:#7ad8ff}
.missao h4{margin:0 0 4px;font:700 14px Cinzel,serif;color:var(--ouro);display:flex;justify-content:space-between}
.missao h4 span{font:13px 'Alegreya Sans';color:var(--suave)}
.missao p{margin:4px 0}
.missao .rec{color:#ffd56a;font-size:13px}
.missao .dar{color:var(--suave);font-size:12px}
.linhaLoja{display:grid;grid-template-columns:40px 1fr auto auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.linhaLoja .ic{width:40px;height:40px;background:rgba(0,0,0,.35);border-radius:3px;padding:3px}
.linhaLoja .ic svg{width:100%;height:100%}
.linhaLoja small{display:block;color:var(--suave);font-size:12px}
.num.ouro{color:#ffd56a;font-size:14px}
.aviso.raro{color:#d08aff;font-weight:700}
.creditos{padding-left:18px;line-height:1.45;font-size:14px}
.creditos li{margin-bottom:6px}
.equipGrelha .cel{aspect-ratio:auto;height:58px}

/* ---------- fase 3: habilidades, instâncias, espíritos ---------- */
.linhaLoja .ic img{width:100%;height:100%;object-fit:contain}
.num.cura{color:#7aff8a}

/* ---------- fase 4: conta, servidores, chat, grupo, social, trocas ---------- */
#contaCaixa{display:flex;flex-direction:column;gap:8px}
#contaCaixa input,.painel input{background:rgba(0,0,0,.5);border:1px solid var(--borda);color:var(--texto);padding:10px;font:inherit;border-radius:3px}
#contaCaixa a,.rodape a{color:var(--ouro)}
.abas{display:flex;gap:4px;margin-bottom:6px}
.aba{flex:1;padding:8px 4px;border:1px solid var(--borda);background:rgba(0,0,0,.4);color:var(--suave);font:700 12px Cinzel,serif;border-radius:3px}
.aba.on{background:linear-gradient(#2a3a56,#18233a);color:var(--ouro)}
.srvh{font:700 12px Cinzel,serif;color:var(--suave);margin-bottom:4px}
.srvLinha{display:flex;gap:6px}
.srv{flex:1;padding:8px 4px;border:1px solid var(--borda);background:rgba(0,0,0,.4);color:var(--texto);border-radius:3px;display:flex;flex-direction:column;align-items:center}
.srv.on{border-color:var(--ouro);box-shadow:0 0 0 1px var(--ouro)}
.srv small{color:var(--suave);font-size:11px}
.heroiLinha{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid rgba(230,195,106,.25);border-radius:3px;background:rgba(0,0,0,.35)}
.heroiLinha div{flex:1}.heroiLinha small{display:block;color:var(--suave)}
.novoHeroi{display:flex;gap:6px;margin-top:6px}.novoHeroi input{flex:1;min-width:0}
.codigos{background:#000;padding:10px;border-radius:3px;font-size:16px;letter-spacing:.1em;color:#ffe08a;user-select:text}
.botoes{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rotulo{position:absolute;left:0;top:0;text-align:center;white-space:nowrap;font-size:13px;text-shadow:0 1px 3px #000,0 0 2px #000;pointer-events:none}
.rotulo b{color:#9ad8ff}.rotulo span{color:var(--suave);font-size:12px}
.rotulo i{display:block;font-style:normal;background:rgba(0,0,0,.7);border-radius:8px;padding:3px 8px;margin-bottom:3px;max-width:220px;white-space:normal}
.trocaCols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.trocaCols input{width:110px}
.pontoOn{width:10px!important;height:10px!important;border-radius:50%;background:#555}
.pontoOn.on{background:#5aff6a}

/* ---------- cidade: pergaminho no HUD ---------- */


/* =====================================================================
   Ajustes da v2 em cima da interface da v1 (css/v1.css + css/v1-tema.css)
   ===================================================================== */
body{font-family:Inter,system-ui,sans-serif}
#jogo canvas{display:block}
#title .tbox{max-width:min(520px,calc(100% - 28px))}
#title .rodape{color:var(--muted,#a9a08c);font-size:12px;margin-top:12px}
#contaCaixa{display:flex;flex-direction:column;gap:8px;margin-top:14px}
#contaCaixa .btn{padding:11px 14px}
.mini{padding:6px 10px;border:1px solid rgba(227,189,106,.45);background:rgba(7,10,16,.8);color:#f3e6c4;border-radius:4px;font:600 12px Inter,sans-serif;cursor:pointer}
.mini:hover{border-color:#e3bd6a;color:#fff}
.mini:disabled{opacity:.4;cursor:default}
.btn.mini{padding:7px 12px}
.btn.ouro{background:linear-gradient(#7a5418,#3a2608);color:#ffe7a8;border-color:#e3bd6a}
/* ícones dos botões do topo */
#topbtns .tbi{display:inline-flex;width:24px;height:24px}
#topbtns .tbi svg{width:100%;height:100%}
#topbtns .btn{position:relative}
#topbtns .btn.pontos{box-shadow:0 0 0 2px #e3bd6a,0 0 12px #e3bd6a}
/* barra de ações: ícones de habilidade e bloqueio */
#slots .slot .sic svg{width:100%;height:100%}
#slots .slot.bloq{opacity:.35;filter:grayscale(1)}
#slots .slot.semMana .sic{filter:saturate(.2) brightness(.6)}
/* missões no painel da direita */
#trackL .tp.ok{color:#9ee0ff}
/* grupo, por baixo do retrato */
#grupo{position:fixed;left:12px;top:150px;width:220px;z-index:6;display:flex;flex-direction:column;gap:4px}
#grupo:empty{display:none}
#grupo>b{font:700 12px Cinzel,serif;color:#e3bd6a}
#grupo div{position:relative;background:rgba(0,0,0,.6);height:20px;border-radius:2px;overflow:hidden;border:1px solid rgba(227,189,106,.3)}
#grupo div i{position:absolute;left:0;top:0;bottom:0;background:rgba(200,52,44,.7)}
#grupo div span{position:relative;font-size:12px;line-height:20px;padding-left:6px;z-index:1}
#sairInst{position:fixed;top:250px;right:14px;z-index:7}
/* janelas: conteúdo próprio da v2 */
.win .ajuda,.win .creditos{padding-left:18px;margin:0;line-height:1.5}
.win .ajuda li,.win .creditos li{margin-bottom:6px}
.win h4{font:700 14px Cinzel,serif;color:#e3bd6a;margin:14px 0 8px;display:flex;justify-content:space-between;gap:8px}
.win input{background:rgba(0,0,0,.5);border:1px solid rgba(227,189,106,.45);color:#f3e6c4;padding:8px;border-radius:4px;font:inherit}
.win table{width:100%;border-collapse:collapse}
.win td{padding:4px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.win td:last-child{text-align:right}

/* o aviso de zona é o #zoneTag da v1 */
#faixa{display:none}

/* mapa ilustrado */
#mapaC{width:100%;height:auto;display:block;border-radius:6px;margin-top:6px}
#pMapa .nota{margin:8px 0 0;font-size:12px}