@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@500;700&display=swap");
:root {
  --fundo: #0e0b08;
  --cartao: #1f1a15;
  --borda: #4a3d2f;
  --gema: #4fe0cf;
  --texto: #efe6d4;
  --suave: #b3a58c;
  --destaque: #ff9a3c;
  --ouro: #ffd84d;
  --perigo: #ff6b6b;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 900px; margin: 0 auto; padding: 24px 16px 64px; }
h1, h2, h3 { font-family: "Silkscreen", system-ui, sans-serif; font-weight: 700; line-height: 1.2; }
h1 { font-size: 30px; margin: 8px 0 4px; color: var(--destaque); }
h2 { font-size: 18px; margin: 32px 0 10px; color: var(--ouro); }
p { margin: 8px 0; }
a { color: var(--destaque); }
code, kbd { background: #2e261e; padding: 1px 6px; border-radius: 4px; font-size: 13px; }
.sub { color: var(--suave); margin-top: 0; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 16px; margin: 12px 0; }
label { display: block; font-weight: 600; margin-bottom: 6px; }
input, textarea, button { font: inherit; color: var(--texto); }
input, textarea { width: 100%; background: #15110d; border: 1px solid var(--borda); border-radius: 8px; padding: 9px 12px; }
input[type=checkbox] { width: auto; margin-right: 8px; vertical-align: middle; accent-color: var(--ouro); }
textarea { min-height: 110px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
button { background: #8a4a14; border: 1px solid #d9822b; border-radius: 8px; padding: 8px 14px; cursor: pointer; }
button.perigo { background: #5a1f2a; border-color: var(--perigo); }
button:disabled { opacity: .5; cursor: default; }
.linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.url { display: flex; gap: 8px; margin: 6px 0 14px; }
.url input { flex: 1; min-width: 0; }
ol, ul { padding-left: 22px; }
li { margin: 4px 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--borda); }
th { color: var(--suave); font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela { overflow-x: auto; }
.cmds td:first-child { white-space: nowrap; }
.aviso { color: var(--suave); font-size: 13px; }
.ok { color: #7dffa0; }
.erro { color: var(--perigo); }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.numeros div { background: #15110d; border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; }
.numeros b { display: block; font-size: 22px; color: var(--ouro); font-variant-numeric: tabular-nums; }
.numeros span { color: var(--suave); font-size: 13px; }

/* ---------- site: topo e navegação ---------- */
.topo { position: sticky; top: 0; z-index: 10; background: #0a0806ee; border-bottom: 1px solid var(--borda); backdrop-filter: blur(6px); }
.topo-dentro { max-width: 1240px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 22px; }
.marca { font-family: "Silkscreen", system-ui, sans-serif; font-weight: 700; color: var(--destaque); text-decoration: none; font-size: 18px; white-space: nowrap; }
.menu { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.menu a { color: var(--suave); text-decoration: none; padding: 6px 10px; border-radius: 8px; font-size: 14px; }
.menu a:hover { color: var(--texto); background: #2e261e; }
.menu a.atual { color: var(--texto); background: #2e261e; }
.conta { display: flex; align-items: center; gap: 10px; font-size: 14px; white-space: nowrap; }
.conta img { width: 28px; height: 28px; border-radius: 50%; }
/* Celular: marca e conta numa linha, menu embaixo numa faixa que rola para o lado. */
@media (max-width: 760px) {
  .topo-dentro { flex-wrap: wrap; gap: 6px 12px; padding: 8px 12px; }
  .marca { font-size: 15px; }
  .conta { margin-left: auto; gap: 8px; font-size: 13px; }
  .conta b { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
  .conta button { padding: 6px 10px; }
  .menu { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 8px; }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { white-space: nowrap; padding: 6px 9px; font-size: 13px; }
}
.btn-twitch { background: #6441a5; border-color: #9147ff; }
.btn-leve { background: transparent; border-color: var(--borda); color: var(--suave); }
.btn-leve:hover { color: var(--texto); }
main.largo { max-width: 1240px; }

/* ---------- avisos rápidos ---------- */

/* ---------- personagem ---------- */
.cabeca { display: flex; align-items: center; gap: 16px; margin: 8px 0 16px; flex-wrap: wrap; }
.cabeca img { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--borda); }
.cabeca h1 { margin: 0; }
.selo { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; background: #2e261e; color: var(--suave); }
.selo.vivo { background: #1f4a2c; color: #7dffa0; }
/* Topo da página do personagem: retrato pequeno, nome, classe, XP, poder e ouro. */
.topo-perso { display: flex; gap: 14px; align-items: center; margin: 4px 0 10px; }
.retrato-mini { width: 84px; height: auto; flex: none; image-rendering: pixelated; background: radial-gradient(#2a1a3d, #140c22); border: 1px solid var(--borda); border-radius: 10px; }
.topo-info { flex: 1; min-width: 0; }
.topo-info h1 { margin: 0; font-size: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-classe { font-family: "Silkscreen", system-ui, sans-serif; font-size: 13px; margin: 2px 0 6px; }
.topo-numeros { display: flex; gap: 4px 14px; flex-wrap: wrap; font-size: 14px; margin: 6px 0; color: var(--suave); }
.topo-numeros b { color: var(--texto); font-variant-numeric: tabular-nums; }
.btn-mini { padding: 2px 10px; font-size: 12px; border-radius: 999px; }
/* As 4 classes do jogador, como fichas pequenas. */
.classes { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.classes::-webkit-scrollbar { display: none; }
.classes button { background: var(--cartao); border-color: var(--borda); display: flex; gap: 6px; align-items: baseline; padding: 6px 12px; white-space: nowrap; border-radius: 999px; }
.classes button b { font-family: "Silkscreen", system-ui, sans-serif; font-size: 12px; color: var(--cor); }
.classes button span { font-size: 12px; color: var(--suave); }
.classes button.atual { border-color: var(--cor); background: color-mix(in srgb, var(--cor) 14%, var(--cartao)); }
/* Abas da página: no celular rolam para o lado; no computador o equipamento fica fixo à esquerda. */
.perso { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.perso > * { min-width: 0; }
/* Computador: herói à esquerda e o painel da aba aberta ao lado, esticados para a mesma altura. */
@media (min-width: 960px) {
  .perso { grid-template-columns: 360px 1fr; align-items: stretch; }
  .perso-lado { display: flex; }
  .perso-lado > .cartao { flex: 1; margin: 0; }
  .lado .retrato { height: 190px; object-fit: contain; }
}
.perso .cartao { margin: 0 0 14px; }
.perso h2 { margin: 0 0 10px; font-size: 15px; }
.abas-perso { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--borda); overflow-x: auto; scrollbar-width: none; }
.abas-perso::-webkit-scrollbar { display: none; }
.abas-perso button { background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 8px 12px; color: var(--suave); white-space: nowrap; font-size: 14px; }
.abas-perso button.atual { color: var(--texto); border-bottom-color: var(--destaque); }
/* Ícone da aba: uma célula da folha img/abas.png (7 células em fila). Apagado fora da aba aberta. */
.abas-perso button { display: inline-flex; align-items: center; gap: 6px; }
.ico-aba { --t: 26px; width: var(--t); height: var(--t); flex: none; background: url(img/abas.png) calc(var(--k) * var(--t) * -1) 0 / calc(var(--t) * 10) var(--t) no-repeat; image-rendering: pixelated; filter: saturate(.7) brightness(.85); }
.abas-perso button.atual .ico-aba, .abas-perso button:hover .ico-aba { filter: none; }
@media (max-resolution: 1.5dppx) { .ico-aba { image-rendering: auto; } }
@media (max-width: 600px) {
  .abas-perso button:has(.ico-aba) { position: relative; flex-direction: column; gap: 2px; padding: 6px 10px; font-size: 10px; }
  .abas-perso button:has(.ico-aba) .conta-aba { position: absolute; top: 2px; right: 0; }
}
/* Computador: o painel à esquerda e as abas empilhadas na lateral direita, encostadas nele (a aberta
   fica da cor do painel, como se saísse dele); acompanham a rolagem. */
@media (min-width: 960px) {
  .perso-conteudo { display: grid; grid-template-columns: minmax(0, 1fr) 96px; grid-template-rows: 1fr; align-items: start; }
  .perso-conteudo > :not(.abas-perso) { grid-column: 1; grid-row: 1; margin: 0; min-height: 600px; align-self: stretch; }
  .perso-conteudo > .abas-perso { grid-column: 2; grid-row: 1; flex-direction: column; gap: 6px; margin: 14px 0 0; border: 0;
    overflow: visible; position: sticky; top: 76px; }
  .perso-conteudo .abas-perso button { position: relative; flex-direction: column; justify-content: center; gap: 4px; width: 96px; min-height: 78px;
    padding: 8px 4px; margin-left: -2px; background: #1c1713; border: 2px solid #5a4a3c; border-left: 0; border-radius: 0 6px 6px 0;
    font-size: 10px; white-space: normal; text-align: center; }
  .perso-conteudo .abas-perso button:hover { background: #2e261e; }
  .perso-conteudo .abas-perso button.atual { background: #28211a; color: var(--ouro); box-shadow: inset 4px 0 0 #28211a, inset 0 -3px 0 var(--ouro); }
  .perso-conteudo .abas-perso .ico-aba { --t: 36px; }
  .perso-conteudo .abas-perso .conta-aba { position: absolute; top: 4px; right: 4px; }
}
.conta-aba { font-size: 11px; background: #2e261e; color: var(--suave); padding: 0 6px; border-radius: 999px; }
.rodape-conta { text-align: center; margin-top: 28px; display: flex; gap: 8px; justify-content: center; align-items: baseline; flex-wrap: wrap; }
.link-perigo { background: none; border: 0; padding: 0; color: var(--perigo); text-decoration: underline; font-size: 13px; }
/* Painéis no estilo pixel (inspirado em jogos de navegador): borda dupla reta, rótulos na fonte pixel. */
.perso .cartao, .perso-lado .cartao { border-radius: 4px; border: 2px solid #5a4a3c; background: #28211a; box-shadow: inset 0 0 0 2px #1c1713; }
.perso h2, .rotulo { font-family: 'Silkscreen', system-ui, sans-serif; letter-spacing: 1px; }
.rotulo { text-align: center; font-size: 12px; color: #d8cdb8; margin: 16px 0 8px; padding-top: 12px; border-top: 2px solid #43372b; }
.centro { text-align: center; justify-content: center; }
.so-largo { display: none; }
@media (min-width: 960px) { .so-largo { display: block; } .linha.so-largo { display: flex; } }
/* Painel do herói. */
.lado h1 { font-size: 22px; margin: 0 0 10px; text-align: center; }
.lado .retrato { border: 2px solid #5a4a3c; border-radius: 2px; margin-bottom: 10px; }
.lado-classe { display: flex; justify-content: space-between; align-items: baseline; font-family: 'Silkscreen', system-ui, sans-serif; margin: 6px 0 8px; }
.lado-classe b { font-size: 14px; }
.lado-classe span { font-size: 11px; color: var(--suave); }
.lado-classe big { font-size: 22px; color: var(--texto); margin-left: 4px; }
.xp { position: relative; height: 18px; background: #0e0b08; border: 2px solid #5a4a3c; margin-bottom: 10px; }
.xp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #f3eeff, #b9a6f2); }
.xp span { position: relative; display: block; text-align: center; font-family: 'Silkscreen', system-ui, sans-serif; font-size: 10px; line-height: 14px; color: #fff; text-shadow: 1px 0 #1c1713, -1px 0 #1c1713, 0 1px #1c1713, 0 -1px #1c1713; }
.ladrilhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 14px; }
@media (max-width: 520px) { .ladrilhos { gap: 6px; } .ladrilho b { font-size: 13px; } .ladrilho { padding: 6px 5px; } }
.ladrilhos.dois { grid-template-columns: 1fr 1fr; }
.ladrilho { background: #1c1713; border: 2px solid #5a4a3c; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ladrilho small { font-family: 'Silkscreen', system-ui, sans-serif; font-size: 10px; color: var(--suave); text-transform: uppercase; }
.ladrilho b { font-family: 'Silkscreen', system-ui, sans-serif; font-size: 16px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ladrilho em { font-style: normal; font-size: 11px; color: var(--suave); }
.ladrilho.destaque { border-color: var(--ouro); }
.ladrilhos.dois .ladrilho { align-items: center; }
.ouro { color: var(--ouro); }
.lado .linha { margin-bottom: 4px; }
/* Equipado: os 6 espaços numa grade. */
.equipado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; justify-items: center; }
.equipado .espaco { width: 100%; border: 0; min-height: 0; padding: 0; font-size: 11px; gap: 3px; }
.equipado .espaco .item { width: 100%; max-width: 72px; border-radius: 4px; }
/* Conjuntos com peças equipadas. */
.conjunto { margin-top: 10px; background: #1c1713; border: 2px solid #5a4a3c; padding: 8px 10px; text-align: center; font-size: 13px; color: var(--suave); }
.conjunto > b { display: block; color: var(--texto); font-size: 15px; margin-bottom: 2px; }
.conjunto > b span { color: var(--suave); font-weight: 400; font-size: 13px; }
.conjunto .ativo { color: var(--ouro); }
/* Gastar ouro: linhas com botão amarelo (+1 · custo) e escuro (+10). */
.gastar-topo { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid #43372b; padding-top: 12px; margin-bottom: 8px; }
.gastar-topo h2 { margin: 0 !important; }
.gastar-topo b { font-family: 'Silkscreen', system-ui, sans-serif; font-weight: 400; font-size: 13px; }
.gastar { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; background: #1c1713; border: 2px solid #5a4a3c; padding: 8px 10px; margin-bottom: 6px; }
.gastar b { display: block; font-family: 'Silkscreen', system-ui, sans-serif; font-weight: 400; font-size: 13px; }
.gastar small { color: var(--suave); font-size: 12px; }
.gastar .nv { font-family: 'Silkscreen', system-ui, sans-serif; font-size: 11px; color: #d8cdb8; }
@media (max-width: 520px) { .gastar { grid-template-columns: 1fr auto auto; } .gastar > div { grid-column: 1 / -1; } }
.btn-ouro, .btn-escuro { font-family: 'Silkscreen', system-ui, sans-serif; font-size: 12px; border-radius: 0; padding: 6px 10px; border-width: 2px; }
.btn-ouro { background: #ffe14d; border-color: #fff3a8 #b8962a #b8962a #fff3a8; color: #2a1d05; box-shadow: 0 2px 0 #7a5f12; }
.btn-escuro { background: #3a2a18; border-color: #7a5a30; color: var(--texto); }
.btn-ouro:disabled { background: #6e6236; color: #2a1d05; box-shadow: none; }
/* Botão das gemas: turquesa de pedra lapidada, com o mesmo relevo dos botões pixel. */
.btn-gema { font-family: 'Silkscreen', system-ui, sans-serif; font-size: 12px; border-radius: 0; padding: 7px 12px; border: 2px solid; border-color: #8ff5ea #1c7a71 #1c7a71 #8ff5ea;
  background: linear-gradient(180deg, #3cc9b9, #23998c); color: #06221f; box-shadow: 0 2px 0 #0f4f49; letter-spacing: .5px; }
.btn-gema:hover:not(:disabled) { background: linear-gradient(180deg, #55dccc, #2aab9d); }
.btn-gema:disabled { background: #24524d; border-color: #2f6b65; color: #0b2a27; box-shadow: none; }
.btn-gema.largo { display: block; width: 100%; margin: 8px 0 4px; padding: 10px; }
/* Botão pequeno logo abaixo do último encaixe (janela do item). */
.btn-gema.compacto { display: inline-block; width: auto; margin: 2px 0 12px; padding: 5px 16px; font-size: 11px; }
.encaixes-lista:has(+ .btn-gema.compacto) { margin-bottom: 4px; }
.tom-gema { color: var(--gema); }
.abas-perso button { font-family: 'Silkscreen', system-ui, sans-serif; font-size: 12px; letter-spacing: .5px; }
.retrato { display: block; margin: 0 auto 10px; image-rendering: pixelated; background: radial-gradient(#2a1a3d, #140c22); border-radius: 10px; width: 100%; height: auto; }
/* Janela do item: no meio no computador, vindo de baixo no celular; botões presos no rodapé. */
body.com-janela { overflow: hidden; }
.janela-fundo { position: fixed; inset: 0; background: #000a; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; }
.janela { position: relative; background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto; padding: 18px 18px 0; box-shadow: 0 20px 60px #000c; }
.janela h3 { margin: 0 76px 2px 0; font-size: 17px; }
.janela .rar { font-size: 13px; }
.janela .acoes { position: sticky; bottom: 0; background: var(--cartao); margin: 12px -18px 0; padding: 12px 18px 16px; border-top: 1px solid var(--borda); }
.janela .acoes button { flex: 1; }
.fechar { position: absolute; top: 8px; right: 8px; background: none; border: 0; font-size: 26px; line-height: 1; padding: 4px 10px; color: var(--suave); }
/* Janela "Engastar gema": item à esquerda, gemas e comparação à direita (uma coluna no celular). */
.janela.larga { max-width: 760px; }
.engaste-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 2px solid #43372b; }
.engaste-topo h2 { margin: 0; font-family: 'Silkscreen', system-ui, sans-serif; color: var(--gema); font-size: 18px; letter-spacing: 1px; }
.engaste { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.engaste-item { border: 2px solid var(--rc); background: #15110d; padding: 12px; border-radius: 4px; box-shadow: 0 0 12px color-mix(in srgb, var(--rc) 25%, transparent); }
.engaste-item .item { pointer-events: none; }
.engaste-item .rar { font-size: 12px; }
.engaste-encaixes { list-style: none; padding: 0; margin: 10px 0 0; }
.engaste-encaixes li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; color: var(--suave); }
.engaste-encaixes li.proximo { color: var(--gema); }
.engaste-encaixes li.proximo .gema { animation: piscar 1.2s ease-in-out infinite; }
@keyframes piscar { 50% { opacity: .35; } }
.rotulo-esq { font-family: 'Silkscreen', system-ui, sans-serif; font-size: 13px; color: #9fd0ff; letter-spacing: 1px; margin: 0 0 10px; }
.engaste-niveis { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.engaste-niveis button:disabled { opacity: .4; }
.engaste-lista { display: flex; flex-direction: column; gap: 6px; }
.engaste-gema { display: flex; align-items: center; gap: 10px; background: #15110d; border: 2px solid #43372b; border-radius: 2px; padding: 9px 12px; text-align: left; color: var(--texto); }
.engaste-gema span { flex: 1; }
.engaste-gema b { font-family: 'Silkscreen', system-ui, sans-serif; font-size: 12px; }
.engaste-gema.atual { border-color: var(--gema); background: #0f2624; }
.engaste-detalhe { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--gema); background: #1c1713; font-size: 13px; }
.engaste-detalhe p { margin: 4px 0; }
.engaste-nome { font-family: 'Silkscreen', system-ui, sans-serif; font-size: 13px; }
.engaste-poder { display: flex; gap: 10px; align-items: center; margin: 8px 0 4px; padding: 8px 10px; border: 2px solid #45d483; background: #0f1a14; font-variant-numeric: tabular-nums; }
.engaste-poder span { color: var(--suave); font-size: 12px; }
.engaste-poder b:first-of-type { flex: 1; }
.engaste-aviso { margin: 14px 0 0; padding: 10px 12px; border: 2px solid #2f8f86; background: #0f2624; font-size: 13px; }
.janela.larga .acoes { display: flex; justify-content: flex-end; gap: 8px; }
.janela.larga .acoes button { flex: 0 0 auto; min-width: 120px; }
@media (max-width: 600px) {
  .engaste { grid-template-columns: 1fr; }
  .janela.larga .acoes button { flex: 1; }
}
/* Cadeado ao lado do X: aberto e apagado quando o item está livre, fechado e aceso quando travado. */
.trava-janela { position: absolute; top: 10px; right: 46px; width: 34px; height: 30px; padding: 0; font-size: 17px; line-height: 1; background: none; border: 1px solid transparent; border-radius: 6px; filter: grayscale(1); opacity: .6; }
.trava-janela:hover { opacity: 1; border-color: var(--borda); }
.trava-janela.travado { filter: none; opacity: 1; background: #3a2f1a; border-color: var(--ouro); }
@media (max-width: 600px) {
  .janela-fundo { align-items: flex-end; padding: 0; }
  .janela { max-width: none; border-radius: 16px 16px 0 0; max-height: 85vh; animation: subir .18s ease-out; }
}
@keyframes subir { from { transform: translateY(40px); opacity: .5; } }
/* Árvore de talentos: fileiras de cartões, com seta entre elas. */
.escolha-sub { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.sub-card { background: #15110d; border: 1px solid var(--borda); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; }
.sub-card > b { font-family: "Silkscreen", system-ui, sans-serif; color: var(--destaque); }
.sub-card p { margin: 6px 0; font-size: 14px; }
.sub-card button { margin-top: auto; }
.arvore { margin-top: 10px; }
.fileira-titulo { font-family: "Silkscreen", system-ui, sans-serif; font-size: 12px; color: var(--destaque); margin-bottom: 6px; display: flex; justify-content: space-between; }
.fileira-titulo span { font-family: system-ui, sans-serif; color: var(--suave); }
.fileira.fechada .fileira-titulo { color: var(--suave); }
.fileira-talentos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fileira-talentos.um { grid-template-columns: minmax(0, 340px); justify-content: center; }
.fileira.final .fileira-titulo { justify-content: center; gap: 10px; }
.seta { text-align: center; color: var(--borda); font-size: 12px; margin: 4px 0; }
.tal-icone { flex: none; background: url(img/classes/talentos.png) no-repeat; image-rendering: pixelated; }
.talento-texto { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.talento:not(.ativo) .tal-icone { opacity: .6; }
.fileira.fechada .talento .tal-icone { filter: grayscale(.8); }
.sub-titulo { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.sub-titulo .sub-icone { margin: 0; }
.sub-card .sub-icone { margin-bottom: 6px; }
.talento { background: #15110d; border: 1px solid var(--borda); border-radius: 10px; padding: 8px 10px; text-align: left; display: flex; flex-direction: row; align-items: center; gap: 10px; color: var(--texto); }
.talento:not(:disabled):hover { border-color: var(--destaque); }
.talento:disabled { opacity: 1; cursor: default; }
.fileira.fechada .talento { opacity: .5; }
.talento-topo { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.talento b { font-size: 14px; }
.talento .grau { font-size: 12px; color: var(--suave); font-variant-numeric: tabular-nums; }
.talento small { font-size: 12px; color: var(--suave); line-height: 1.35; }
.talento.ativo { border-color: #d9822b; }
.talento.ativo b, .talento.ativo .grau { color: var(--ouro); }
.talento.cheio { border-color: var(--ouro); background: color-mix(in srgb, var(--ouro) 8%, #15110d); }
.talento:not(:disabled) .grau::after { content: " +"; color: var(--destaque); font-weight: 700; }
.livres { color: var(--ouro); }
.artefato { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--borda); border-radius: 10px; font-size: 14px; color: var(--suave); }
.artefato.ativo { border: 1px solid var(--ouro); color: var(--texto); }
.artefato.ativo b { color: var(--ouro); }
.barra { height: 8px; background: #15110d; border-radius: 4px; overflow: hidden; border: 1px solid var(--borda); }
.barra i { display: block; height: 100%; background: linear-gradient(90deg, #d9822b, #ff9a3c); }
.dados { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 14px; margin-top: 10px; }
.dados span { color: var(--suave); }
.dados b { text-align: right; font-variant-numeric: tabular-nums; }
.atributo { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--borda); }
.atributo:first-of-type { border-top: 0; }
.atributo small { color: var(--suave); font-size: 12px; grid-column: 1; }
.atributo .linha { grid-row: 1 / span 2; grid-column: 2; }
.atributo button { padding: 4px 10px; font-size: 13px; }

/* ---------- itens ---------- */
.espacos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.espaco { border: 1px dashed var(--borda); border-radius: 10px; min-height: 84px; padding: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; color: var(--suave); text-align: center; }
.mochila { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
@media (max-width: 600px) { .mochila { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); } }
/* Caixa do item: encaixes de gema na coluna da esquerda, nível no canto de baixo à direita,
   cadeado em cima à direita; o desenho fica um pouco à direita para não ficar embaixo deles. */
.item { position: relative; border: 2px solid var(--rc); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 22%, #15110d), #15110d); border-radius: 10px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--rc); padding: 0 0 6px 9px; }
.item svg { width: 54%; height: 54%; }
.item .ico { width: 74%; height: 74%; object-fit: contain; image-rendering: pixelated; }
.item .nv { position: absolute; right: 3px; bottom: 3px; padding: 0 4px; border-radius: 4px; background: #090705cc; font-size: 11px; line-height: 15px; color: var(--texto); font-variant-numeric: tabular-nums; }
.item .cadeado { position: absolute; right: 4px; top: 2px; font-size: 11px; }
.item .seta-up { position: absolute; left: 5px; bottom: 5px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #6be08a; filter: drop-shadow(0 0 3px #000); pointer-events: none; }
.seta-up.legenda { position: static; display: inline-block; vertical-align: middle; margin: 0 2px; filter: none; }
.item .pontos { position: absolute; left: 7px; top: 7px; display: flex; flex-direction: column; gap: 5px; }
.item .pontos i { width: 8px; height: 8px; transform: rotate(45deg); border: 1px solid #ffffff55; background: #090705; }
.item .pontos i.cheio { background: var(--gc); border-color: #090705; box-shadow: inset 1px 1px 0 #ffffff99, 0 0 4px var(--gc); }
.gema { display: inline-block; width: 12px; height: 12px; transform: rotate(45deg); background: var(--gc);
  border: 2px solid #090705; box-shadow: inset 2px 2px 0 #ffffff66; flex: none; }
.gema.n2 { width: 15px; height: 15px; }
.gema.n3 { width: 18px; height: 18px; box-shadow: inset 2px 2px 0 #ffffffaa, 0 0 6px var(--gc); }
.gema.vazia { background: transparent; border: 2px dashed var(--borda); box-shadow: none; }
.titulo-encaixes { margin: 14px 0 4px; font-size: 15px; }
.encaixes-lista { list-style: none; padding: 0; margin: 0 0 10px; }
.encaixes-lista li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #2e261e; font-size: 14px; flex-wrap: wrap; }
.encaixes-lista li > span { flex: 1; min-width: 120px; }
.encaixes-lista select { flex: 1; min-width: 0; max-width: 100%; }
.bolsa { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bolsa-tipo { background: #15110d; border: 1px solid var(--borda); border-radius: 8px; padding: 8px; }
.bolsa-nivel { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; }
.bolsa-nivel span { flex: 1; }
.bolsa-nivel button { padding: 2px 8px; font-size: 12px; }
.bolsa-nivel.zerada { opacity: 0.45; }
.item.marcado { outline: 3px solid #fff; outline-offset: 1px; }
.item.vazio { border-style: dashed; border-color: var(--borda); background: transparent; cursor: default; }
.espaco .item { width: 72px; }
/* Forja: bancada com os itens que entram, seta e o item que sai. */
.bancada { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px 0 6px; padding: 14px; background: radial-gradient(#3a2414, #15110d 75%); border: 2px solid #5a4a3c; border-radius: 4px; flex-wrap: wrap; }
.bancada-entrada { display: flex; gap: 8px; }
.bancada .item { width: 72px; }
.bancada-seta { font-size: 22px; color: var(--ouro); }
.item.forja-saida { border-style: solid; border-color: var(--rc, var(--borda)); color: var(--rc, var(--suave)); font-size: 22px; }
.bancada-texto { font-size: 14px; min-height: 20px; margin: 4px 0 10px; }
.forja-prontos { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.forja-prontos button { font-size: 13px; padding: 4px 10px; }
.item.apagado { opacity: .3; cursor: default; }
@media (max-width: 600px) { .bancada .item { width: 60px; } .bancada { gap: 8px; padding: 10px; } }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
/* Filtros do inventário: um painel com uma linha por critério; chips em vez de listas. */
.filtro-painel { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin-bottom: 10px; background: #15110d; border: 2px solid var(--borda); border-radius: 4px; }
.frow { display: flex; align-items: center; gap: 10px; }
.flabel { flex: none; width: 62px; font-family: "Silkscreen", system-ui, sans-serif; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--suave); }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.fchip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 3px 10px; font: inherit; font-size: 13px; color: var(--rc, var(--suave)); background: #1f1a15; border: 2px solid var(--borda); border-radius: 4px; cursor: pointer; }
.fchip svg { width: 18px; height: 18px; }
.fchip:hover { border-color: var(--rc, var(--suave)); color: var(--rc, var(--texto)); }
.fchip.ativo { background: color-mix(in srgb, var(--rc, var(--destaque)) 22%, #15110d); border-color: var(--rc, var(--destaque)); color: var(--rc, var(--texto)); box-shadow: inset 0 0 0 1px #0007; font-weight: 700; }
.fchip .seta-up { position: static; border-left-width: 5px; border-right-width: 5px; border-bottom-width: 8px; }
.bolinha-nova { width: 9px; height: 9px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 2px #0006; }
.frow select { min-height: 30px; padding: 3px 8px; border: 2px solid var(--borda); border-radius: 4px; }
.filtro-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.fbtn { display: inline-flex; align-items: center; gap: 6px; }
.fcont { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--destaque); color: #1b1208; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.fresumo { min-width: 0; color: var(--suave); font-size: 13px; }
.filtro-painel { margin-top: -2px; }
@media (max-width: 600px) { .frow { flex-direction: column; align-items: flex-start; gap: 4px; } .flabel { width: auto; } }
select { font: inherit; color: var(--texto); background: #15110d; border: 1px solid var(--borda); border-radius: 8px; padding: 6px 10px; }
.detalhe h3 { margin: 0 0 2px; font-size: 16px; }
.detalhe .rar { font-size: 13px; }
.bonus { list-style: none; padding: 0; margin: 10px 0; }
.bonus li { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #2e261e; font-size: 14px; }
.sobe { color: #7dffa0; }
.desce { color: var(--perigo); }
.comparacao { background: #15110d; border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; margin: 10px 0; font-size: 14px; }
.comparacao b { font-variant-numeric: tabular-nums; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.vazio-txt { color: var(--suave); font-size: 14px; text-align: center; padding: 24px 8px; }

/* ---------- tabelas de ranking e páginas públicas ---------- */
.ranking td img { width: 24px; height: 24px; border-radius: 50%; vertical-align: middle; margin-right: 8px; }
.ranking tr.eu td { background: #2e261e; }
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cartoes .cartao { margin: 0; }
.cartoes a.cartao { text-decoration: none; color: inherit; display: block; }
.cartoes a.cartao:hover { border-color: var(--destaque); }
.chave-oculta { filter: blur(6px); transition: filter .2s; }
.chave-oculta.ver { filter: none; }
dialog { background: var(--cartao); color: var(--texto); border: 1px solid var(--borda); border-radius: 12px; padding: 20px; max-width: 460px; }
dialog::backdrop { background: #0009; }

/* ---------- rodapé ---------- */
.rodape { max-width: 1240px; margin: 0 auto; padding: 24px 16px 40px; color: var(--suave); font-size: 13px; text-align: center; border-top: 1px solid var(--borda); }
.rodape a { color: var(--suave); }

/* ---------- escolha de classe ---------- */
.escolha { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 16px; }
.classe-card { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; border-top: 3px solid var(--cor); }
.classe-card h2 { margin: 10px 0 0; color: var(--cor); }
.classe-card .papel { margin: 2px 0 6px; font-weight: 600; }
.classe-card .aviso { min-height: 0; }
.classe-card button { margin-top: auto; width: 100%; background: transparent; border-color: var(--cor); color: var(--cor); font-weight: 600; }
.classe-card button:hover { background: var(--cor); color: #0e0b08; }
.caminhos { width: 100%; margin: 4px 0 12px; padding-top: 8px; border-top: 1px solid var(--borda, #3a2b5c); color: #8a6a45; }
.caminhos .aviso { color: var(--suave, #a595c9); font-size: 12px; margin: 0; }
.caminhos .fork { width: 100%; height: 34px; display: block; }
.caminhos-par { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: -2px; }
.caminho { border: 1px solid #8a6a45; padding: 8px 4px; font-size: 13px; color: var(--texto, inherit); }
.sub-icone { display: block; margin: 0 auto 4px; background: url(img/classes/subclasses.png) no-repeat; image-rendering: pixelated; }
.chips { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; margin-top: 6px; }
.chip { font-size: 10px; padding: 1px 5px; background: #2b2147; color: #a595c9; }
.chip.ganho { background: #2d3a24; color: #a8d98a; }
.classe-sprite { width: 160px; height: 192px; object-fit: contain; object-position: bottom; image-rendering: pixelated; }
.barras { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; width: 100%; max-width: 220px; margin: 6px 0 10px; font-size: 13px; }
.barras dt { color: var(--suave); text-align: left; }
.barras dd { margin: 0; display: flex; gap: 3px; }
.barras i { flex: 1; height: 8px; border-radius: 2px; background: var(--cor); }
.barras i.off { background: var(--borda); }
.pronto { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; border-top: 3px solid var(--cor); padding: 24px; }
.pronto h1 { margin-top: 0; }
.pronto .grande { font-size: 18px; margin: 14px 0; }
.pronto .grande code { font-size: 18px; color: var(--ouro); }

/* Chamada ao banco em andamento (comum.js › chamar): nada da página recebe clique. */
body.ocupado main button, body.ocupado main .item { pointer-events: none; }
body.ocupado main button { opacity: .6; }
.janela-cabeca { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.janela-icone { width: 64px; flex: none; pointer-events: none; }
/* Grade de cartões usada na página das lives. */
.grade-personagem { display: grid; gap: 16px; align-items: start; }
.grade-personagem .cartao { margin: 0 0 16px; }
.grade-personagem h2 { margin: 0 0 10px; font-size: 15px; }
@media (max-width: 720px) { .grade-personagem { grid-template-columns: 1fr !important; } }

/* Telas grandes (1920, 2560, ultrawide): o site inteiro cresce por igual, sem mudar o desenho.
   zoom aumenta textos, ícones e espaços juntos. Cada degrau pede largura E altura, para não
   crescer demais num ultrawide baixo. Abaixo de 1500 px de largura fica como está. */
@media (min-width: 1500px) and (min-height: 800px) { body { zoom: 1.05; } }
@media (min-width: 1800px) and (min-height: 1000px) { body { zoom: 1.1; } }
@media (min-width: 2200px) and (min-height: 1000px) { body { zoom: 1.2; } }
@media (min-width: 2800px) and (min-height: 1300px) { body { zoom: 1.35; } }
@media (min-width: 3400px) and (min-height: 1400px) { body { zoom: 1.5; } }

/* ---------- coleção, conquistas e títulos ---------- */
.titulo-nome { color: var(--suave); font-weight: normal; font-size: 0.8em; white-space: nowrap; }
.sub-abas { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.sub-abas button { background: var(--cartao); border: 1px solid var(--borda); color: var(--suave); padding: 6px 12px; border-radius: 8px; font-size: 14px; }
.sub-abas button.atual { color: var(--texto); border-color: var(--destaque); }
.apar-titulo { margin: 16px 0 6px; font-size: 14px; }
.apar-linha { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.apar-nome { width: 130px; flex: none; font-size: 13px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apar { padding: 0; cursor: pointer; width: 52px; height: 52px; display: grid; place-items: center; border: 2px solid var(--rc, var(--borda)); border-radius: 8px; background: #16120d; flex: none; }
.apar .ico, .apar canvas, .apar svg, .apar img { max-width: 80%; max-height: 80%; image-rendering: pixelated; }
.apar.bloqueada { border-color: var(--borda); }
.apar.bloqueada > * { filter: brightness(0); opacity: 0.35; }
.titulos-lista, .conquistas-lista { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.titulo-cartao, .conquista { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: #16120d; }
.titulo-cartao.bloqueada, .conquista:not(.feita) { opacity: 0.55; }
.conquista { justify-content: flex-start; align-items: flex-start; }
.conquista .marca { width: 20px; height: 20px; flex: none; border: 2px solid var(--borda); border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: 13px; }
.conquista.feita .marca { background: var(--destaque); border-color: var(--destaque); color: #16120d; }
@media (max-width: 600px) {
  .apar-linha { gap: 6px; }
  .apar-nome { width: 52px; font-size: 11px; }
  .apar { width: 46px; height: 46px; }
}
.apar.grande { width: 72px; height: 72px; cursor: default; }
.lado .nome-heroi, .topo-info .nome-heroi { margin: 0 0 10px; text-align: left; white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.4; }
.topo-info .nome-heroi { margin-bottom: 4px; }
.lado .nome-heroi { font-size: 22px; } .lado .nome-heroi.n2 { font-size: 16px; } .lado .nome-heroi.n3 { font-size: 12px; }
.topo-info .nome-heroi { font-size: 24px; } .topo-info .nome-heroi.n2 { font-size: 17px; } .topo-info .nome-heroi.n3 { font-size: 12px; }
.nome-heroi .titulo-nome { display: inline-block; font-family: 'Silkscreen', system-ui, sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 0.5px; color: #d8cdb8; vertical-align: baseline; }
.nome-heroi.n2 .titulo-nome { font-size: 13px; }
.nome-heroi.n3 .titulo-nome { font-size: 11px; }
.titulo-acao { width: 104px; flex: none; text-align: center; }
.titulo-acao button { width: 100%; }
.btn-leve.equipado:disabled { background: #1f4a2c; border-color: #2f7a47; color: #7dffa0; opacity: 1; cursor: default; }
.recompensa { margin-top: 2px; font-size: 12px; color: var(--ouro); }

/* Dungeon */
.dg-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
.dg-card { border: 2px solid #5a4a3c; background: #1c1713; border-radius: 4px; padding: 10px 12px; }
.dg-card h3 { margin: 0 0 4px; font-size: 14px; }
.dg-cena { display: block; width: 100%; aspect-ratio: 1280 / 234; object-fit: cover; margin-bottom: 8px; border: 2px solid #3a2f24; border-radius: 2px; image-rendering: auto; }
.dg-card.bloqueada .dg-cena { filter: grayscale(.7) brightness(.7); }
.dg-card p { margin: 4px 0; }
.dg-card.bloqueada { opacity: 0.6; }
.dg-tela { width: 100%; height: auto; aspect-ratio: 1280 / 300; image-rendering: pixelated; background: #0d0a18; border-radius: 4px; display: block; }

/* Roleta da forja (src/site/roleta.js): faixa de células que gira e para no resultado já sorteado pelo servidor. */
.rl-fundo { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(9, 6, 3, .88); }
.rl-caixa { width: min(760px, 100%); max-height: 100%; overflow: auto; padding: 16px; text-align: center; background: var(--cartao); border: 2px solid #5a4a3c; border-radius: 6px; box-shadow: 0 0 40px rgba(0, 0, 0, .6); }
.rl-titulo { margin: 0; font-size: 16px; color: var(--ouro); }
.rl-chance { margin: 4px 0 12px; font-size: 13px; color: var(--suave); }
.rl-janela { position: relative; overflow: hidden; padding: 12px 0; background: radial-gradient(#33200f, #0e0b08 80%); border: 2px solid #5a4a3c; border-radius: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.rl-trilho { display: flex; gap: 8px; width: max-content; will-change: transform; }
.rl-marca { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1px; background: var(--ouro); box-shadow: 0 0 10px var(--ouro), 0 0 2px #fff; z-index: 2; }
.rl-cel { flex: 0 0 auto; width: 96px; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 2px solid #5a4a3c; border-radius: 4px; background: #1b1610; }
.rl-cel .ico { width: 64px; height: 64px; image-rendering: pixelated; }
.rl-cel svg { width: 48px; height: 48px; color: var(--rc, var(--ouro)); }
.rl-cel.ouro { border-color: var(--rc); background: linear-gradient(#3a2a10, #1b1610); box-shadow: inset 0 0 14px rgba(255, 182, 46, .35); }
.rl-cel.falha { border-color: #8a2b2b; background: linear-gradient(#3a1216, #1b1610); color: #ff8a8a; }
.rl-cel.falha.selo { border-color: #2b5f8a; background: linear-gradient(#10263a, #1b1610); color: #8ad0ff; }
.rl-cel.falha b { font-size: 30px; line-height: 1; }
.rl-cel.falha small { font-size: 11px; }
.rl-cel.vencedora { animation: rl-pulso .9s ease-in-out 3; position: relative; z-index: 1; }
.rl-ganhou .rl-cel.vencedora { box-shadow: 0 0 22px 4px rgba(255, 182, 46, .9); }
.rl-perdeu .rl-cel.vencedora { box-shadow: 0 0 22px 4px rgba(255, 70, 70, .8); }
@keyframes rl-pulso { 50% { transform: scale(1.12); } }
.rl-resultado { min-height: 76px; margin: 10px 0 4px; }
.rl-res { margin: 8px 0 2px; font-size: 20px; }
.rl-res.ouro { color: #ffb62e; text-shadow: 0 0 12px rgba(255, 182, 46, .7); }
.rl-res.falha { color: #ff6b6b; }
.rl-res.selo { color: #8ad0ff; font-size: 16px; }
.rl-perdidos { display: flex; gap: 8px; justify-content: center; }
.rl-perdidos .item { width: 60px; pointer-events: none; }
.rl-stats { margin: 6px 0 0; font-size: 13px; color: var(--suave); }
.rl-rodape { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.rl-rapida { font-size: 13px; color: var(--suave); display: inline-flex; gap: 6px; align-items: center; }
@media (max-width: 600px) { .rl-cel { width: 76px; height: 76px; } .rl-cel .ico { width: 52px; height: 52px; } .rl-cel svg { width: 38px; height: 38px; } }
@media (prefers-reduced-motion: reduce) { .rl-cel.vencedora { animation: none; } }

/* Gemas: imagem da folha img/gemas.png (src/site/comum.js) e a aba Gemas (lista à esquerda, resumo à direita). */
.gema-img { display: inline-block; flex: none; width: var(--t); height: var(--t); background: url(img/gemas.png) no-repeat; image-rendering: pixelated; vertical-align: middle; }
.gemas-lista { display: flex; flex-direction: column; gap: 10px; max-width: 460px; margin-top: 10px; }
.gema-bloco { background: #15110d; border: 1px solid var(--borda); border-left: 4px solid var(--gc); border-radius: 8px; padding: 8px 10px; }
.gema-bloco header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.gema-bloco header button, .gema-linha button { flex: none; width: auto; }
.gema-bloco header button { padding: 1px 8px; font-size: 11px; }
.gema-bloco header .gema-nome { flex: 1; line-height: 1.25; }
.gema-bloco header .gema-nome b { color: var(--gc); font-size: 16px; }
.gema-bloco header .gema-nome small { display: block; color: var(--suave); font-size: 12px; }
.gema-linha { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid #2e261e; font-size: 13px; }
.gema-linha.zerada { opacity: .45; }
.gema-linha .gema-icone { width: 36px; display: flex; align-items: center; justify-content: center; }
.gema-linha .gema-rotulo { flex: 1; }
.gema-linha .gema-rotulo small { display: block; color: var(--suave); font-size: 11px; }
.gema-linha .gema-qtd { min-width: 38px; text-align: right; font-size: 15px; }
.gema-linha button { padding: 2px 8px; font-size: 12px; min-width: 76px; }
.gema-linha button.pronto { animation: piscar 1.4s ease-in-out infinite; }

/* Linhas de nível da aba Gemas: quantidade como etiqueta no ícone, porcentagem em pílula e progresso da fusão em bolinhas. */
.gema-linha .gema-icone { position: relative; width: 46px; height: 46px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--gc) 30%, #1f1a15), #1f1a15 75%); border: 1px solid color-mix(in srgb, var(--gc) 45%, #4a3d2f); border-radius: 8px; flex: none; }
.gema-linha .gema-qtd { position: absolute; right: -4px; bottom: -4px; min-width: 20px; padding: 0 5px; border-radius: 10px; background: #090705; border: 1px solid var(--gc); color: #fff; font-size: 12px; line-height: 18px; text-align: center; }
.gema-linha .gema-rotulo { display: flex; flex-direction: column; gap: 3px; font-size: 14px; font-weight: 600; }
.gema-pilula { align-self: flex-start; font-style: normal; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 10px; color: var(--gc); background: color-mix(in srgb, var(--gc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 45%, transparent); }
.gema-pips { display: inline-flex; gap: 5px; align-items: center; padding: 0 6px; }
.gema-pips i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #5a4a3c; background: transparent; }
.gema-pips i.on { background: var(--gc); border-color: var(--gc); box-shadow: 0 0 6px var(--gc); }
.gema-max { font-size: 12px; color: var(--ouro); padding: 0 6px; }
.gema-linha button.btn-gema { min-width: 0; padding: 3px 10px; font-size: 10px; }
.gema-linha.zerada .gema-icone { filter: grayscale(.6); }

/* Forja: o item que saiu de uma fusão garantida fica na caixa de resultado. */
.forja-resultado .item { animation: rl-pulso .7s ease-in-out 2; box-shadow: 0 0 14px color-mix(in srgb, var(--rc) 70%, transparent); }

/* Avisos (balões) no alto da tela */
#toast { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 90; pointer-events: none; width: min(520px, calc(100vw - 24px)); }
#toast div { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; background: #1f1a15f2; border: 1px solid var(--borda); border-left: 4px solid var(--destaque); padding: 10px 16px 12px 12px; border-radius: 8px; box-shadow: 0 10px 28px #000a; animation: toast-entra .25s ease-out; backdrop-filter: blur(4px); }
#toast div.saindo { opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s; }
#toast div::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--destaque); opacity: .8; transform-origin: left; animation: toast-barra var(--dur, 3500ms) linear forwards; }
#toast div.erro { border-left-color: var(--perigo); color: var(--texto); }
#toast div.erro::after { background: var(--perigo); }
#toast div.ok { border-left-color: #7dffa0; color: var(--texto); }
#toast div.ok::after { background: #7dffa0; }
#toast .toast-icone { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 13px/1 system-ui; font-style: normal; background: color-mix(in srgb, var(--destaque) 25%, transparent); color: var(--destaque); }
#toast .toast-icone::before { content: 'i'; }
#toast div.ok .toast-icone { background: #7dffa033; color: #7dffa0; }
#toast div.ok .toast-icone::before { content: '✓'; }
#toast div.erro .toast-icone { background: #ff6b6b33; color: var(--perigo); }
#toast div.erro .toast-icone::before { content: '!'; }
#toast .toast-texto { flex: 1; min-width: 0; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes toast-barra { to { transform: scaleX(0); } }

/* Janelas de confirmação do jogo (src/site/comum.js: confirmar e informar), no lugar das caixas do navegador. */
.dlg-fundo { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 5, 16, .82); animation: dlg-fundo .15s ease-out; }
.dlg { width: min(440px, 100%); max-height: 100%; overflow: auto; padding: 18px; background: var(--cartao); border: 2px solid #5a4a3c; border-radius: 6px; box-shadow: 0 0 40px rgba(0, 0, 0, .65); animation: dlg-entra .18s ease-out; }
.dlg.perigo { border-color: #8a2b3a; }
.dlg-titulo { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 15px; color: var(--ouro); }
.dlg.perigo .dlg-titulo { color: #ff8a8a; }
.dlg-icone { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #ff9a3c33; color: var(--destaque); font: 700 15px/1 system-ui; font-style: normal; }
.dlg.perigo .dlg-icone { background: #ff6b6b33; color: var(--perigo); }
.dlg-texto { margin: 6px 0; font-size: 14px; line-height: 1.5; }
.dlg-campo { display: block; margin: 12px 0 4px; font-size: 13px; color: var(--suave); }
.dlg-campo b { color: var(--texto); }
.dlg-campo input { display: block; width: 100%; margin-top: 6px; padding: 8px 10px; background: #0f0a1c; border: 2px solid #5a4a3c; border-radius: 4px; color: var(--texto); font: inherit; }
.dlg-campo input:focus { outline: none; border-color: var(--destaque); }
.dlg-acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.dlg-acoes button { min-width: 96px; }
.btn-perigo { font-family: 'Silkscreen', system-ui, sans-serif; font-size: 12px; border-radius: 0; padding: 7px 14px; border: 2px solid; border-color: #ff9a9a #7a1f2a #7a1f2a #ff9a9a; background: linear-gradient(180deg, #d64a5a, #a02a3a); color: #fff; cursor: pointer; }
.btn-perigo:hover:not(:disabled) { background: linear-gradient(180deg, #e55b6b, #b33a4a); }
.btn-perigo:disabled { background: #4a2229; border-color: #5e2c36; color: #8a6068; cursor: not-allowed; }
.dlg-gemas { margin: 8px 0 2px; font-size: 13px; }
.dlg-cab, .dlg-lin { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 6px; align-items: center; padding: 5px 0; }
.dlg-cab { color: var(--suave); font-size: 11px; border-bottom: 1px solid #2e261e; }
.dlg-lin { border-bottom: 1px solid #231b3a; }
.dlg-lin > b { display: inline-flex; align-items: center; gap: 6px; }
.dlg-lin span { text-align: center; color: var(--suave); }
.dlg-lin span b { color: var(--texto); font-size: 15px; }
@keyframes dlg-fundo { from { opacity: 0; } }
@keyframes dlg-entra { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .dlg, .dlg-fundo, #toast div { animation: none; } }

/* Bolinha vermelha de novidade (item novo, gema que dá para fundir, ponto de talento, título e conquista novos). */
.ponto-novo { position: absolute; left: -4px; top: -4px; z-index: 3; width: 11px; height: 11px; border-radius: 50%; background: #ff3b3b; border: 2px solid #1f1a15; box-shadow: 0 0 7px #ff3b3b; pointer-events: none; animation: ponto-novo 1.8s ease-in-out infinite; }
.ponto-novo.aba { left: 5px; top: 5px; }
.abas-perso button, .sub-abas button, .titulo-cartao, .conquista, .btn-gema.compacto, .gema-bloco header button, .gema-linha .gema-icone { position: relative; }
.sub-abas button .ponto-novo { left: auto; right: -3px; top: -3px; }
.titulo-cartao .ponto-novo, .conquista .ponto-novo { left: -5px; top: -5px; }
@keyframes ponto-novo { 50% { box-shadow: 0 0 2px #ff3b3b; transform: scale(.88); } }
@media (prefers-reduced-motion: reduce) { .ponto-novo { animation: none; } }

/* Perfil público: retrato, poder e números à esquerda; atributos, equipamento e conjuntos à direita (perfil.html). */
.pf-classes { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.pf-classes button { font: inherit; font-family: 'Silkscreen', system-ui, sans-serif; font-size: 13px; color: var(--suave); background: #1c1713; border: 2px solid #5a4a3c; padding: 6px 12px; cursor: pointer; }
.pf-classes button span { font-size: 11px; opacity: .8; }
.pf-classes button.ativa { color: var(--cc); border-color: var(--cc); background: color-mix(in srgb, var(--cc) 12%, #1c1713); }
.pf-grade { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.pf-lado, .pf-corpo { background: var(--cartao); border: 2px solid #5a4a3c; padding: 16px; }
.pf-retrato { background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--cc) 28%, #1c1713), #0e0b08 72%); border: 2px solid #5a4a3c; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.pf-retrato canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.pf-poder { margin: 14px 0; border: 2px solid var(--ouro); background: #15110d; padding: 12px 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pf-poder small { font-family: 'Silkscreen', system-ui, sans-serif; font-size: 11px; color: var(--ouro); text-transform: uppercase; }
.pf-poder b { font-family: 'Silkscreen', system-ui, sans-serif; font-size: 28px; font-weight: 700; color: var(--ouro); font-variant-numeric: tabular-nums; }
.pf-linhas { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: baseline; }
.pf-linhas span { font-family: 'Silkscreen', system-ui, sans-serif; font-size: 11px; color: var(--suave); text-transform: uppercase; }
.pf-linhas b { font-family: 'Silkscreen', system-ui, sans-serif; font-weight: 400; font-size: 15px; text-align: right; }
.pf-titulo { font-size: 15px; color: var(--ouro); text-transform: uppercase; letter-spacing: 1px; margin: 4px 0 10px; }
.pf-corpo .pf-titulo:not(:first-child) { margin-top: 18px; padding-top: 14px; border-top: 2px solid #43372b; }
.pf-atributos { grid-template-columns: repeat(6, 1fr); }
.pf-pecas { display: grid; gap: 8px; }
.pf-peca { display: flex; gap: 12px; align-items: center; background: #1c1713; border: 2px solid #5a4a3c; padding: 8px 10px; }
.pf-peca > .item, .pf-ico .item { width: 52px; flex: none; cursor: default; }
.pf-peca > div:last-child { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-peca b { font-size: 15px; }
.pf-peca small { color: var(--suave); font-size: 12px; }
.pf-peca em { font-style: normal; color: #7dffa0; font-size: 13px; }
.pf-peca.vazia { opacity: .55; }
.pf-ico .pontos { display: none; } /* os encaixes de gema ficam em segredo no perfil público */
.pf-conjunto { background: #1c1713; border: 2px solid #5a4a3c; padding: 8px 12px; margin-top: 8px; font-size: 13px; color: var(--suave); }
.pf-conjunto > b { display: block; color: var(--texto); font-size: 15px; margin-bottom: 4px; }
.pf-conjunto > b span { color: var(--suave); font-weight: 400; font-size: 12px; margin-left: 4px; }
.pf-conjunto .ativo { color: #7dffa0; }
@media (max-width: 900px) {
  .pf-grade { grid-template-columns: 1fr; }
  .pf-lado { display: grid; grid-template-columns: 160px 1fr; gap: 0 16px; }
  .pf-retrato { grid-row: span 2; }
  .pf-poder { margin: 0 0 10px; }
  .pf-atributos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .pf-lado { grid-template-columns: 1fr; }
  .pf-retrato { max-width: 220px; width: 100%; margin: 0 auto; grid-row: auto; }
  .pf-poder { margin: 12px 0; }
  .pf-poder b { font-size: 24px; }
  .pf-atributos { grid-template-columns: 1fr 1fr; }
}

/* ---------- tema Cripta: pedra e tocha ---------- */
:root { --tocha: #ff9a3c; --brasa: #ff6a1f; --pedra-clara: #6b5a46; --pedra-escura: #090705; }
body {
  background-color: var(--fundo);
  background-image:
    radial-gradient(ellipse 60% 40% at 50% -10%, #ff9a3c22, transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 46px, #00000040 46px 48px),
    repeating-linear-gradient(90deg, transparent 0 94px, #00000030 94px 96px);
  background-attachment: fixed;
}
h1, h2, h3 { font-family: "Pixelify Sans", "Silkscreen", system-ui, sans-serif; letter-spacing: .5px; }
h1 { color: var(--tocha); text-shadow: 0 0 14px #ff6a1f55, 0 2px 0 #000; }
h2 { color: var(--ouro); text-shadow: 0 2px 0 #000; }
.cartao { border-radius: 2px; border: 2px solid var(--borda);
  border-top-color: var(--pedra-clara); border-left-color: var(--pedra-clara);
  border-bottom-color: var(--pedra-escura); border-right-color: var(--pedra-escura);
  box-shadow: 0 4px 0 #00000066, inset 0 0 24px #00000055; }
button { border-radius: 2px; border-width: 2px; border-top-color: #ffb866; border-left-color: #ffb866;
  border-bottom-color: #4a2208; border-right-color: #4a2208; background: #8a4a14; text-shadow: 0 1px 0 #000;
  box-shadow: 0 3px 0 #2a1304; transition: transform .05s, box-shadow .05s, filter .15s; }
button:hover:not(:disabled) { filter: brightness(1.15); }
button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 #2a1304; }
button.perigo { background: #6a1f1f; border-top-color: #ff8a8a; border-left-color: #ff8a8a; border-bottom-color: #2a0808; border-right-color: #2a0808; box-shadow: 0 3px 0 #1a0505; }
.btn-twitch { background: #6441a5; border-top-color: #b896ff; border-left-color: #b896ff; border-bottom-color: #2a1850; border-right-color: #2a1850; box-shadow: 0 3px 0 #1a0f33; }
.btn-leve { background: transparent; box-shadow: none; border-color: var(--borda); }
input, textarea { border-radius: 2px; border-width: 2px; border-color: var(--pedra-escura) var(--pedra-clara) var(--pedra-clara) var(--pedra-escura); box-shadow: inset 0 2px 6px #000a; }
code, kbd { background: #2e261e; border-radius: 2px; color: var(--tocha); }
.topo { border-bottom: 3px solid var(--pedra-escura); box-shadow: 0 2px 0 var(--pedra-clara), 0 8px 24px #0009; }
.marca { color: var(--tocha); text-shadow: 0 0 10px #ff6a1f88, 0 2px 0 #000; }
.menu a { border-radius: 2px; }
.menu a:hover, .menu a.atual { color: var(--tocha); background: #2e261e; box-shadow: inset 0 -3px 0 var(--tocha); }
.numeros div, .selo { border-radius: 2px; }
a { color: var(--tocha); }
/* Cena de abertura: os heróis diante da cripta */
.cena { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 4%; height: 190px; margin: 14px 0; padding: 0 16px 8px; overflow: hidden;
  background: linear-gradient(#090705cc, #09070500 40%, #090705aa), url("img/cenarios/zona1.png") center bottom / cover;
  border: 2px solid var(--borda); border-top-color: var(--pedra-clara); border-left-color: var(--pedra-clara); border-bottom-color: var(--pedra-escura); border-right-color: var(--pedra-escura);
  box-shadow: 0 4px 0 #00000066, inset 0 0 40px #000000aa; image-rendering: pixelated; }
.cena img { height: 130px; width: auto; image-rendering: pixelated; filter: drop-shadow(0 4px 0 #000a); animation: respira 2.4s ease-in-out infinite alternate; }
.cena img:nth-child(2) { animation-delay: .3s; } .cena img:nth-child(3) { animation-delay: .6s; } .cena img:nth-child(4) { animation-delay: .9s; }
@keyframes respira { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .cena img { animation: none; } }
@media (max-width: 600px) { .cena { height: 150px; } .cena img { height: 100px; } }

/* ---------- Ranking ---------- */
.rk-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 14px 0 18px; }
.rk-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--cartao); border: 2px solid var(--borda); border-top-color: var(--pedra-clara); border-left-color: var(--pedra-clara); border-bottom-color: var(--pedra-escura); border-right-color: var(--pedra-escura); box-shadow: 0 4px 0 #00000066, inset 0 0 24px #00000055; min-width: 0; }
.rk-card span { font-family: "Silkscreen", system-ui, sans-serif; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--suave); }
.rk-card b { font-family: "Pixelify Sans", "Silkscreen", sans-serif; font-size: 30px; line-height: 1.1; color: var(--ouro); text-shadow: 0 2px 0 #000; font-variant-numeric: tabular-nums; }
.rk-card small { color: var(--suave); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-abas { display: flex; gap: 8px; margin: 4px 0 12px; }
.rk-aba { font-family: "Silkscreen", system-ui, sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; color: var(--suave); background: #1f1a15; border: 2px solid var(--borda); padding: 9px 18px; border-radius: 2px; cursor: pointer; }
.rk-aba.atual { background: var(--tocha); border-color: #ffb866 #4a2208 #4a2208 #ffb866; color: #1a0e04; box-shadow: 0 3px 0 #2a1304; text-shadow: none; }
.rk-aba:hover:not(.atual) { color: var(--texto); }
.rk-barra { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.rk-barra input { flex: 1 1 240px; width: auto; }
.rk-barra select { flex: 0 1 200px; background: #15110d; color: var(--texto); border: 2px solid var(--borda); border-radius: 2px; padding: 8px 10px; }
.rk-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; color: var(--suave); font-size: 14px; }
.rk-chips > span:last-child { display: flex; gap: 6px; flex-wrap: wrap; }
.rk-chip { --cor: var(--tocha); background: #1f1a15; border: 2px solid var(--borda); color: var(--texto); padding: 4px 12px; font-family: "Silkscreen", system-ui, sans-serif; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; box-shadow: none; text-shadow: none; }
.rk-chip.atual { border-color: var(--cor); color: var(--cor); background: #2e261e; box-shadow: inset 0 -3px 0 var(--cor); }
.rk-tabela { margin-top: 14px; padding: 0; }
.ranking th { font-family: "Silkscreen", system-ui, sans-serif; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 12px 10px; background: #15110d; }
.ranking td { padding: 10px; }
.ranking tbody tr:hover td { background: #2a221a; }
.rk-pos { display: inline-block; min-width: 30px; padding: 3px 6px; text-align: center; font-family: "Silkscreen", system-ui, sans-serif; font-size: 12px; border: 2px solid var(--borda); background: #15110d; border-radius: 2px; }
.top1 .rk-pos { border-color: #ffd84d; color: #ffd84d; } .top2 .rk-pos { border-color: #d6dbe4; color: #d6dbe4; } .top3 .rk-pos { border-color: #d98a4a; color: #d98a4a; }
.top1 td:first-child { box-shadow: inset 4px 0 0 #ffd84d; } .top2 td:first-child { box-shadow: inset 4px 0 0 #d6dbe4; } .top3 td:first-child { box-shadow: inset 4px 0 0 #d98a4a; }
.rk-poder { font-family: "Pixelify Sans", "Silkscreen", sans-serif; font-size: 18px; color: var(--ouro); font-variant-numeric: tabular-nums; }

/* Números legíveis: fonte limpa em vez da pixel nos valores */
.rk-card b, .rk-poder { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 800; letter-spacing: 0; }
.rk-card b { font-size: 28px; }
.rk-poder { font-size: 17px; }
.rk-n { font-variant-numeric: tabular-nums; font-weight: 600; }
.rk-check { display: flex; align-items: center; margin: 0; font-weight: 500; color: var(--suave); background: #15110d; border: 2px solid var(--borda); padding: 0 12px; }
.rk-check input { margin-right: 8px; }
.rk-ponto { display: inline-block; width: 9px; height: 9px; margin-right: 8px; background: #4a3d2f; border-radius: 1px; vertical-align: middle; }
.rk-ponto.on { background: #7dffa0; box-shadow: 0 0 8px #7dffa0; }
.rk-agora { color: #7dffa0; font-family: "Silkscreen", system-ui, sans-serif; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
[hidden] { display: none !important; }
.rk-check { flex: none; white-space: nowrap; padding: 8px 12px; cursor: pointer; }
.rk-check input { width: auto; flex: none; margin: 0 8px 0 0; }
.rk-barra input[type=search] { flex: 1 1 240px; }

/* ---------- Página de uma live ---------- */
.lv-topo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 8px 0 4px; padding: 16px; background: linear-gradient(90deg, #ff9a3c14, transparent 60%), var(--cartao); border: 2px solid var(--borda); border-top-color: var(--pedra-clara); border-left-color: var(--pedra-clara); border-bottom-color: var(--pedra-escura); border-right-color: var(--pedra-escura); box-shadow: 0 4px 0 #00000066, inset 0 0 24px #00000055; }
.lv-avatar { width: 72px; height: 72px; border: 3px solid var(--pedra-clara); border-radius: 2px; image-rendering: auto; }
.lv-quem { flex: 1 1 240px; min-width: 0; }
.lv-quem h1 { margin: 0 0 6px; overflow: hidden; text-overflow: ellipsis; }
.lv-selos { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.lv-vivo { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px; background: #17361f; color: #7dffa0; border: 2px solid #2f7a47; font-family: "Silkscreen", system-ui, sans-serif; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.lv-vivo i { width: 8px; height: 8px; background: #7dffa0; box-shadow: 0 0 8px #7dffa0; animation: pisca 1.4s ease-in-out infinite; }
@keyframes pisca { 50% { opacity: .35; } }
.lv-off { padding: 3px 12px; background: #1f1a15; color: var(--suave); border: 2px solid var(--borda); font-family: "Silkscreen", system-ui, sans-serif; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.lv-fato { color: var(--suave); }
.lv-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.lv-btn { display: inline-block; padding: 9px 16px; text-decoration: none; color: var(--texto); background: #1f1a15; border: 2px solid var(--borda); border-top-color: var(--pedra-clara); border-left-color: var(--pedra-clara); box-shadow: 0 3px 0 #00000088; font-size: 14px; }
.lv-btn:hover { filter: brightness(1.2); }
.lv-btn.principal { background: #6441a5; border-color: #b896ff #2a1850 #2a1850 #b896ff; }
@media (prefers-reduced-motion: reduce) { .lv-vivo i { animation: none; } }
.lv-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 4px; align-items: start; }
.lv-secao { background: var(--cartao); border: 2px solid var(--borda); border-top-color: var(--pedra-clara); border-left-color: var(--pedra-clara); border-bottom-color: var(--pedra-escura); border-right-color: var(--pedra-escura); box-shadow: 0 4px 0 #00000066, inset 0 0 24px #00000055; padding: 14px 16px; min-width: 0; }
.lv-secao h2 { margin: 0 0 10px; font-size: 17px; }
.lv-qtd { display: inline-block; margin-left: 6px; padding: 0 8px; font-family: "Silkscreen", system-ui, sans-serif; font-size: 11px; color: var(--texto); background: #2e261e; border: 2px solid var(--borda); vertical-align: middle; }
.lv-lista { list-style: none; margin: 0; padding: 0; }
.lv-lista li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 4px; border-top: 1px solid var(--borda); min-width: 0; }
.lv-lista li:first-child { border-top: 0; }
.lv-lista li > a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lv-lista li[style*="--cor"] { border-left: 3px solid var(--cor); padding-left: 10px; }
.lv-classe { font-size: 12px; color: var(--cor); font-family: "Silkscreen", system-ui, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.lv-dir { text-align: right; line-height: 1.25; color: var(--suave); font-size: 13px; white-space: nowrap; }
.lv-dir b { color: var(--ouro); font-size: 15px; font-variant-numeric: tabular-nums; }
.lv-dir small { display: block; font-size: 12px; }
.lv-icone { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #15110d; border: 2px solid #d9822b66; box-shadow: inset 0 0 10px #ff9a3c33; }
.lv-item { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.lv-item small { color: var(--suave); font-size: 13px; }
.lv-vazio { margin: 6px 0; }
.dg-canal { margin: 8px 0 12px; padding: 10px 12px; background: #15110d; border: 2px solid var(--borda); } .dg-canal p { margin: 4px 0; } .dg-abrir { margin-top: 2px; }

/* Artefato: o ícone vem do talento Despertar (linha da subclasse, última coluna de talentos.png) */
.art-icone { display: block; width: 78%; aspect-ratio: 1; background: url(img/classes/talentos.png) no-repeat; background-size: 900% 800%; image-rendering: pixelated; }
.artefato-desc { font-style: italic; margin: 10px 0; }

/* Só o item de verdade tem encaixes de gema (à esquerda) e nível (embaixo): o padding do .item deixa esse espaço.
   Espaço vazio, resultado da forja e Artefato não têm nenhum dos dois, então o desenho fica no centro da caixa. */
.item.vazio, .item.artefato, .item.forja-saida { padding: 0; }