/* ============ Cores e base ============ */
:root {
  --fundo: #f3efe7;
  --papel: #fffdf8;
  --tinta: #22201d;
  --suave: #6d675e;
  --linha: #ddd5c6;
  --vermelho: #a8282d;
  --vermelho-escuro: #7d1b1f;
  --treinada: #f6e3e1;
  --cabecalho: #7d1b1f;
  --superficie: #fff;
  --creme: #faf6ee;
  --creme-forte: #f6f1e7;
  --rosado: #fdf3f2;
  --verde-claro: #f2f9f5;
  --verde-borda: #8fc5a6;
  --verde-texto: #1f6b43;
  --tinta-suave: #4a453d;
  --linha-forte: #c9b9a0;
  --amarelo-claro: #fff4d6;
  --roxo-claro: #efe6fb;
  --roxo-texto: #5b2c91;
  --sombra: rgba(60,40,20,.22);
  color-scheme: light;
}
/* ============ Tema escuro ============ */
:root[data-tema="escuro"] {
  --fundo: #14120f;
  --papel: #1d1a16;
  --superficie: #26221d;
  --tinta: #ece5d8;
  --tinta-suave: #d4ccbe;
  --suave: #a79f92;
  --linha: #3d372f;
  --linha-forte: #5a5146;
  --vermelho: #e0656a;
  --vermelho-escuro: #f0959a;
  --treinada: #45262a;
  --cabecalho: #5c1418;
  --creme: #2b2620;
  --creme-forte: #332d26;
  --rosado: #3a2427;
  --verde-claro: #1d2f25;
  --verde-borda: #3f7a58;
  --verde-texto: #8fd3a9;
  --amarelo-claro: #3a3220;
  --roxo-claro: #2f2540;
  --roxo-texto: #c9a8f5;
  --sombra: rgba(0,0,0,.5);
  color-scheme: dark;
}
:root[data-tema="escuro"] { --amarelo-borda: #7a6326; }
:root[data-tema="escuro"] .caixa.borda-herois h4 { color: #8cbfe6; }
:root[data-tema="escuro"] .caixa.borda-atlas h4,
:root[data-tema="escuro"] .dica-regiao,
:root[data-tema="escuro"] .hint-balao b { color: #86d09f; }
:root[data-tema="escuro"] .dado.descartado { background: #4a443c; color: #8d857a; }
:root[data-tema="escuro"] img.simbolo-cartao, :root[data-tema="escuro"] .ilustracao.simbolo img { filter: drop-shadow(0 0 6px rgba(255,255,255,.08)); }
/* Escala geral das letras: cresce um pouco em telas grandes */
:root { --escala-fonte: 1.06; }
@media (min-width: 1200px) { :root { --escala-fonte: 1.12; } }
@media (min-width: 1600px) { :root { --escala-fonte: 1.18; } }
@media (max-width: 600px)  { :root { --escala-fonte: 1; } }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Alegreya Sans", "Segoe UI", system-ui, sans-serif; background: var(--fundo); color: var(--tinta); font-size: calc(16px * var(--escala-fonte)); line-height: 1.4; }
h3, h4 { margin: 18px 0 8px; color: var(--vermelho-escuro); }
h4 { margin-top: 4px; }

/* ============ Topo ============ */
:root { --ouro: #d6ad55; --ouro-claro: #f6dc95; --pergaminho: #fbf1dd; }
.topo { color: var(--pergaminho); border-bottom: 2px solid var(--ouro);
  background: radial-gradient(120% 160% at 15% 0%, #9b2a2f 0%, #6e171b 55%, #4c0e11 100%);
  box-shadow: 0 2px 0 rgba(0,0,0,.25), 0 8px 24px rgba(40,8,8,.25); }
:root[data-tema="escuro"] .topo { background: radial-gradient(120% 160% at 15% 0%, #6d1a1f 0%, #4a0f12 55%, #2c0709 100%); }
/* Mesmo alinhamento do conteúdo da página */
.topo-interno { max-width: 1560px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; }
.marca { margin: 0; display: flex; align-items: center; gap: 14px; line-height: 1; }
.marca-criador { font-family: "Cinzel", Georgia, serif; font-weight: 700; font-size: calc(17px * var(--escala-fonte)); letter-spacing: .14em; color: var(--pergaminho);
  padding-right: 14px; border-right: 1px solid rgba(214,173,85,.55); }
.marca-t20 { font-family: "Grenze Gotisch", "Cinzel", Georgia, serif; font-weight: 800; font-size: calc(38px * var(--escala-fonte)); letter-spacing: .01em;
  background: linear-gradient(180deg, #fff1c4 0%, var(--ouro-claro) 38%, #c98f2f 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(40,6,6,.65)) drop-shadow(0 0 10px rgba(246,190,90,.18)); padding: 2px 2px 4px; }
@media (max-width: 640px) { .marca-criador { font-size: calc(13px * var(--escala-fonte)); padding-right: 10px; } .marca-t20 { font-size: calc(30px * var(--escala-fonte)); } }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
button, .botao-arquivo { border: 0; border-radius: 6px; padding: 8px 14px; font: inherit; cursor: pointer; }
/* Botões do topo: contorno dourado discreto que acende ao passar o mouse */
.acoes > button, .acoes > .botao-arquivo { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; line-height: 1;
  font-weight: 600; font-size: calc(15px * var(--escala-fonte)); letter-spacing: .01em; border-radius: 8px; }
.sec { background: rgba(255,240,215,.07); color: var(--pergaminho); box-shadow: inset 0 0 0 1px rgba(246,220,149,.28); }
.sec:hover { background: rgba(255,240,215,.16); box-shadow: inset 0 0 0 1px rgba(246,220,149,.7); }
.pri { background: linear-gradient(180deg, #fffaf0, var(--pergaminho)); color: #6e171b; font-weight: 800; box-shadow: inset 0 0 0 1px var(--ouro), 0 2px 6px rgba(0,0,0,.25); }
.pri:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--ouro), 0 0 0 3px rgba(214,173,85,.35), 0 4px 12px rgba(0,0,0,.3); }
/* Animação dos botões: transição suave e "afundar" ao clicar */
button, .botao-arquivo { transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease, transform .12s ease, opacity .18s; }
button:active:not(:disabled), .botao-arquivo:active { transform: translateY(1px) scale(.985); }
button:focus-visible, .botao-arquivo:focus-within { outline: 2px solid var(--ouro); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
button:disabled { opacity: .6; cursor: wait; }

/* ============ Layout ============ */
.layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; max-width: 1560px; margin: 20px auto; padding: 0 16px; }
main { background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; padding: 0 20px 20px; min-width: 0; }
@media (max-width: 860px) { .layout { grid-template-columns: 1fr; } }

/* ============ Abas ============ */
/* Abas: texto com uma barra que desliza até a aba escolhida */
.abas { position: relative; display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--linha); margin: 0 -20px 18px; padding: 8px 14px 0; }
.abas button { position: relative; background: none; color: var(--suave); border-radius: 8px 8px 0 0; padding: 12px 14px 12px; white-space: nowrap;
  font-weight: 600; font-size: calc(16px * var(--escala-fonte)); }
.abas button:hover:not(:disabled) { color: var(--tinta); background: var(--creme); }
.abas button.ativa { color: var(--vermelho-escuro); font-weight: 800; background: none; }
.abas button:active:not(:disabled) { transform: none; }
.indicador-aba { position: absolute; left: 0; top: 0; height: 3px; width: 0; border-radius: 3px 3px 0 0; background: var(--vermelho); pointer-events: none;
 }
.indicador-aba.animar { transition: transform .32s cubic-bezier(.3,.8,.25,1), width .32s cubic-bezier(.3,.8,.25,1); }
.aba { display: none; }
.aba.ativa { display: block; }

/* ============ Formulários ============ */
label { display: flex; flex-direction: column; gap: 4px; font-size: calc(13px * var(--escala-fonte)); color: var(--suave); margin-bottom: 10px; }
label.check { flex-direction: row; align-items: center; gap: 6px; }
input, select, textarea { font: inherit; color: var(--tinta); padding: 7px 9px; border: 1px solid var(--linha); border-radius: 6px; background: var(--superficie); width: 100%; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--vermelho); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--vermelho); outline-offset: -1px; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grade4 { display: grid; grid-template-columns: 2fr 1fr 1fr 1.6fr; gap: 0 12px; align-items: end; }
@media (max-width: 600px) { .grade2, .grade4 { grid-template-columns: 1fr; } }
.dica { color: var(--suave); font-size: calc(13px * var(--escala-fonte)); }
.caixa { border: 1px solid var(--linha); border-left: 4px solid var(--vermelho); border-radius: 6px; padding: 10px 14px; margin: 12px 0; background: var(--superficie); }
.caixa p { margin: 6px 0; }
.caixa select { width: auto; padding: 3px 6px; }
.hab { font-size: calc(14px * var(--escala-fonte)); }
.alerta { color: var(--vermelho); font-weight: 700; }

/* Botões de escolha (chips) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip { flex-direction: row; align-items: center; gap: 6px; margin: 0; padding: 5px 10px; border: 1px solid var(--linha); border-radius: 20px; background: var(--superficie); color: var(--tinta); cursor: pointer; }
.chip.on { background: var(--treinada); border-color: var(--vermelho); }

/* ============ Atributos ============ */
.atributos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 700px) { .atributos { grid-template-columns: repeat(3, 1fr); } }
.atributo { text-align: center; border: 2px solid var(--tinta); border-radius: 10px; padding: 10px 8px; background: var(--superficie); }
.atributo .sigla { font-weight: 800; color: var(--vermelho-escuro); }
.atributo .mod { font-size: calc(34px * var(--escala-fonte)); font-weight: 800; }
.atributo input { text-align: center; }
.atributo .detalhe { font-size: calc(12px * var(--escala-fonte)); color: var(--suave); margin-top: 6px; }

/* ============ Tabelas ============ */
table { width: 100%; border-collapse: collapse; font-size: calc(14px * var(--escala-fonte)); }
th { text-align: left; font-size: calc(12px * var(--escala-fonte)); color: var(--suave); font-weight: 600; padding: 6px; border-bottom: 2px solid var(--linha); }
td { padding: 4px 6px; border-bottom: 1px solid var(--linha); }
td small { color: var(--vermelho); font-size: calc(11px * var(--escala-fonte)); margin-left: 4px; }
td.total { font-weight: 800; font-size: calc(16px * var(--escala-fonte)); }
tr.treinada { background: var(--treinada); }
tr.bloqueada { color: var(--suave); opacity: .7; }
input.mini { width: 70px; padding: 4px 6px; }
.tabela-ataques input:not(.mini), .tabela-itens input:not(.mini) { padding: 4px 6px; }

/* ============ Resumo lateral ============ */
.resumo { background: var(--papel); border: 1px solid var(--linha); border-top: 5px solid var(--vermelho); border-radius: 10px; padding: 16px; align-self: start; position: sticky; top: 16px; font-size: calc(14px * var(--escala-fonte)); }
.resumo .nome { font-size: calc(20px * var(--escala-fonte)); font-weight: 800; }
.resumo .sub { color: var(--suave); margin-bottom: 12px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.stats div { background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; padding: 8px; text-align: center; }
.stats span { display: block; font-size: calc(12px * var(--escala-fonte)); color: var(--suave); }
.stats b { font-size: calc(22px * var(--escala-fonte)); }
.mini-atrib { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.mini-atrib div { text-align: center; border: 1px solid var(--linha); border-radius: 6px; padding: 4px; background: var(--superficie); }
.mini-atrib span { display: block; font-size: calc(11px * var(--escala-fonte)); color: var(--suave); }
.mini-atrib i { font-style: normal; font-size: calc(12px * var(--escala-fonte)); color: var(--vermelho); margin-left: 4px; }
.treinadas { color: var(--suave); }

/* ============ Fontes (livros) ============ */
:root { --basico: #a8282d; --herois: #1f5f8b; --atlas: #2f7a45; --deuses: #9a6a12; }
.selo { display: inline-block; font-size: calc(11px * var(--escala-fonte)); font-weight: 700; color: #fff; border-radius: 4px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; white-space: nowrap; }
.selo-basico { background: var(--basico); }
.selo-herois { background: var(--herois); }
.selo-atlas  { background: var(--atlas); }
.selo-deuses { background: var(--deuses); }
.fonte { border-left-width: 6px; }
.fonte-basico { border-left-color: var(--basico); }
.fonte-herois { border-left-color: var(--herois); }
.fonte-atlas  { border-left-color: var(--atlas); }
.fonte-deuses { border-left-color: var(--deuses); }
.fonte-cab { display: flex; align-items: center; gap: 8px; }
.fonte-cab h4 { margin: 4px 0; color: var(--tinta); }
.fonte-cab .selo { margin-left: 0; }
label.check.opcao { align-items: flex-start; color: var(--tinta); padding: 6px 0; border-top: 1px solid var(--linha); margin: 0; }
label.check.opcao small { display: block; color: var(--suave); }
label.check.todas { font-weight: 600; color: var(--tinta); }

.bloco-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bloco-cab h4 small { font-weight: 400; color: var(--suave); }
.sub { color: var(--suave); font-size: calc(13px * var(--escala-fonte)); margin: 8px 0 2px; }
.etiqueta { display: inline-block; background: var(--treinada); color: var(--vermelho-escuro); border-radius: 4px; padding: 2px 8px; font-size: calc(12px * var(--escala-fonte)); font-weight: 700; }
label.escolha { flex-direction: row; align-items: center; gap: 8px; color: var(--tinta); font-weight: 600; margin: 8px 0; flex-wrap: wrap; }
label.escolha select { width: auto; min-width: 180px; }
label.largo { grid-column: 1 / -1; }
.chip.poder { border-style: dashed; }
.aviso { background: var(--amarelo-claro); border: 1px solid var(--amarelo-borda, #e9c46a); border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; }
tr.da-classe td:nth-child(2) { font-weight: 600; }
tr.da-classe td:nth-child(2)::before { content: "• "; color: var(--vermelho); }
.rolagem { overflow-x: auto; }
.atributo .valor { font-size: calc(34px * var(--escala-fonte)); font-weight: 800; }
.atributo label { margin: 6px 0 0; font-size: calc(11px * var(--escala-fonte)); }
optgroup { font-style: normal; font-weight: 700; }

.caixa.borda-herois { border-left-color: var(--herois); }
.caixa.borda-herois h4 { color: var(--herois); }
.caixa.borda-atlas { border-left-color: var(--atlas); }
.caixa.borda-deuses { border-left-color: var(--deuses); }
.caixa.borda-deuses h4 { color: var(--deuses); }
.caixa.borda-atlas h4 { color: var(--atlas); }

/* ============ Personagem em seções ============ */
.grade3 { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 0 16px; }
@media (max-width: 600px) { .grade3 { grid-template-columns: 1fr; } }
.secao { margin-top: 18px; }
.rotulo-secao { display: flex; flex-direction: column; gap: 6px; font-size: calc(15px * var(--escala-fonte)); font-weight: 800; color: var(--vermelho-escuro); margin: 0 0 4px; }
.rotulo-secao select { font-weight: 600; font-size: calc(15px * var(--escala-fonte)); }
.secao .caixa { margin-top: 6px; }
h5 { margin: 14px 0 6px; font-size: calc(13px * var(--escala-fonte)); text-transform: uppercase; letter-spacing: .5px; color: var(--suave); }
.contexto { font-style: italic; background: var(--creme); border-radius: 6px; padding: 8px 12px; color: var(--tinta-suave); }

/* Cartões de habilidades e benefícios */
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.cartao { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--linha); border-radius: 8px; padding: 8px 10px; background: var(--superficie); font-size: calc(13px * var(--escala-fonte)); color: var(--tinta); margin: 0; }
.cartao b { font-size: calc(14px * var(--escala-fonte)); }
.cartao.escolhivel { cursor: pointer; transition: border-color .15s, background .15s; }
.cartao.escolhivel:hover { border-color: var(--vermelho); }
.cartao.escolhivel.on { border: 2px solid var(--vermelho); background: var(--treinada); }
.cartao.escolhivel.cheio { opacity: .55; cursor: default; }
.topo-cartao { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tipo { font-style: normal; font-size: calc(11px * var(--escala-fonte)); font-weight: 700; text-transform: uppercase; border-radius: 4px; padding: 1px 6px; background: var(--creme-forte); color: var(--suave); }
.tipo.poder { background: var(--roxo-claro); color: var(--roxo-texto); }
.tipo.pericia { background: var(--verde-claro); color: var(--verde-texto); }
.ganhos { margin-top: 12px; border-top: 1px dashed var(--linha); padding-top: 6px; }
.ganhos ul { margin: 4px 0; padding-left: 18px; }
.ganhos li { margin: 2px 0; }
.contador { font-weight: 700; color: var(--vermelho-escuro); }
.ok { color: var(--verde-texto); font-weight: 700; font-style: normal; }
.botao-link { background: none; color: var(--vermelho); padding: 4px 0; font-weight: 700; }

/* Perícias da classe */
.pericias-classe { background: var(--creme); border: 1px solid var(--linha); border-radius: 8px; padding: 6px 12px 10px; margin-top: 10px; }
.chip.fixa { background: var(--verde-claro); border-color: var(--verde-borda); color: var(--verde-texto); font-weight: 600; }
.chip.fixa select { padding: 2px 4px; width: auto; }
.chip.classe.on { background: var(--verde-claro); border-color: var(--verde-texto); }
.chip.classe.outra { opacity: .7; }
.chip small { color: var(--suave); font-weight: 400; }
.tag-classe { display: inline-block; font-size: calc(11px * var(--escala-fonte)); font-weight: 700; color: var(--verde-texto); background: var(--verde-claro); border: 1px solid var(--verde-borda); border-radius: 4px; padding: 0 6px; }
.tag-classe.fixa { background: var(--verde-texto); color: #fff; }
tr.da-classe { box-shadow: inset 4px 0 0 var(--verde-texto); }
tr.da-classe td:nth-child(2)::before { content: none; }
label.check.filtro { color: var(--tinta); font-weight: 600; margin: 8px 0; }

/* Deuses */
.grade-deuses { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.cartao-deus { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; padding: 10px; color: var(--tinta); }
.cartao-deus:hover { border-color: var(--vermelho); }
.cartao-deus span { font-size: calc(12px * var(--escala-fonte)); color: var(--suave); }
.cartao-deus em { font-size: calc(11px * var(--escala-fonte)); }
.cartao-deus.on { border: 2px solid var(--vermelho); background: var(--treinada); }
.cartao-deus.bloqueado { opacity: .6; }
.ficha-deus p { margin: 6px 0; }

/* ============ Atributos ============ */
.metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.metodo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; background: var(--superficie); border: 2px solid var(--linha); border-radius: 10px; padding: 12px 14px; color: var(--tinta); }
.metodo span { font-size: calc(12px * var(--escala-fonte)); color: var(--suave); }
.metodo.on { border-color: var(--vermelho); background: var(--treinada); }
.metodo.nimb b { font-style: italic; }
@media (max-width: 600px) { .metodos { grid-template-columns: 1fr; } }
.compra { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 6px 16px; }
.linha-compra { display: grid; grid-template-columns: 1fr auto 48px auto 64px; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--linha); }
.linha-compra small { color: var(--suave); }
.passo { width: 32px; height: 32px; padding: 0; font-size: calc(18px * var(--escala-fonte)); font-weight: 800; background: var(--superficie); border: 1px solid var(--linha); color: var(--vermelho-escuro); }
.passo:disabled { opacity: .35; cursor: default; }
.valor-compra { text-align: center; font-size: calc(20px * var(--escala-fonte)); font-weight: 800; }
.pri.grande { background: var(--vermelho); color: #fff; font-size: calc(16px * var(--escala-fonte)); padding: 12px 20px; }
.sec-claro { background: var(--superficie); border: 1px solid var(--linha); color: var(--vermelho-escuro); margin-top: 10px; }
.rolagens { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 8px 0 12px; }
@media (max-width: 800px) { .rolagens { grid-template-columns: repeat(3, 1fr); } }
.rolagem-card { border: 2px solid var(--linha); border-radius: 10px; padding: 8px; text-align: center; background: var(--superficie); }
.rolagem-card.usada { border-color: var(--verde-borda); background: var(--verde-claro); }
.rolagem-card small { display: block; color: var(--suave); font-size: calc(11px * var(--escala-fonte)); }
.dados { display: flex; justify-content: center; gap: 3px; }
.dado { width: 22px; height: 22px; line-height: 22px; border-radius: 5px; background: var(--cabecalho); color: #fff; font-weight: 800; font-size: calc(13px * var(--escala-fonte)); }
.dado.descartado { background: #ccc; color: #888; text-decoration: line-through; }
.soma { font-size: calc(22px * var(--escala-fonte)); font-weight: 800; margin-top: 4px; }
.soma span { font-size: calc(15px * var(--escala-fonte)); color: var(--vermelho); }
/* Arrastar e soltar */
.rolagens[data-zona-livre] { padding: 6px; border: 2px dashed transparent; border-radius: 12px; }
.em-arraste .rolagens[data-zona-livre] { border-color: var(--linha); }
.rolagens.alvo { border-color: var(--vermelho) !important; background: var(--rosado); }
.rolagem-card { cursor: grab; user-select: none; transition: transform .1s, opacity .1s; }
.rolagem-card:hover { transform: translateY(-2px); box-shadow: 0 3px 8px rgba(0,0,0,.12); }
.rolagem-card.usada { opacity: .75; }
.rolagem-card.usada .destino { color: var(--verde-texto); font-weight: 700; font-size: calc(12px * var(--escala-fonte)); }
.rolagem-card.selecionada { border-color: var(--vermelho); box-shadow: 0 0 0 3px rgba(168,40,45,.25); opacity: 1; }
.arrastando { opacity: .4 !important; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 600px) { .slots { grid-template-columns: 1fr 1fr; } }
.slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 76px;
  border: 2px dashed var(--linha); border-radius: 10px; background: var(--creme); padding: 8px; }
.slot-nome { font-weight: 700; font-size: calc(13px * var(--escala-fonte)); color: var(--vermelho-escuro); }
.slot-vazio { font-size: calc(12px * var(--escala-fonte)); color: var(--suave); }
.slot.ocupado { border-style: solid; border-color: var(--verde-borda); background: var(--verde-claro); }
.slot-valor { cursor: grab; font-size: calc(20px * var(--escala-fonte)); font-weight: 800; background: var(--superficie); border: 1px solid var(--verde-borda); border-radius: 8px; padding: 2px 10px; }
.slot-valor b { color: var(--vermelho); font-size: calc(15px * var(--escala-fonte)); }
.slot-limpar { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; line-height: 20px; border-radius: 50%; background: var(--superficie); border: 1px solid var(--linha); color: var(--suave); }
.slot.alvo { border-color: var(--vermelho); border-style: solid; background: var(--rosado); transform: scale(1.03); }
.em-arraste .slot:not(.ocupado) { border-color: var(--linha-forte); }
#metodoAtributos:has(.rolagem-card.selecionada) .slot { cursor: pointer; border-color: var(--vermelho); }

/* Compra de pontos */
.desvantagem { font-size: calc(13px * var(--escala-fonte)); background: var(--creme); border-left: 3px solid var(--linha); padding: 6px 10px; margin: 6px 0; }
.desvantagem.on { border-left-color: var(--vermelho); background: var(--rosado); }
.pontos-resta { font-size: calc(15px * var(--escala-fonte)); margin: 6px 0 10px; }
.pontos-resta.alerta { color: var(--vermelho); }
.linha-compra.negativo .valor-compra { color: var(--vermelho); }
.link-aba { color: var(--vermelho); font-weight: 700; }

/* ============ Origens ============ */
.modo-origem { display: flex; gap: 18px; flex-wrap: wrap; margin: 2px 0 8px; }
.modo-origem label { color: var(--tinta); margin: 0; }
.rotulo-sub { font-weight: 700; color: var(--tinta); margin-top: 6px; }
#secaoOrigem2 { margin-top: 12px; }
.rotulo-sub { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }

/* Seletor de origens com resumo ao passar o mouse */
.seletor { position: relative; }
.seletor-botao { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left;
  background: var(--superficie); border: 1px solid var(--linha); color: var(--tinta); font-weight: 600; padding: 8px 10px; }
.seletor-botao:disabled { cursor: not-allowed; opacity: .6; }
.seletor.aberto .seletor-botao { outline: 2px solid var(--vermelho); outline-offset: -1px; }
.seletor-atual small, .seletor-item small { font-weight: 400; color: var(--suave); }
.seletor-atual .vazio { font-weight: 400; color: var(--suave); }
.seta { color: var(--suave); }
.seletor-lista { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 8px; box-shadow: 0 8px 24px var(--sombra); padding: 6px; }
.seletor-busca { margin-bottom: 6px; }
.seletor-itens { max-height: 340px; overflow-y: auto; }
.seletor-grupo { position: sticky; top: 0; background: var(--creme-forte); font-size: calc(12px * var(--escala-fonte)); font-weight: 800; color: var(--suave); text-transform: uppercase;
  letter-spacing: .3px; padding: 5px 8px; border-radius: 4px; }
.seletor-item { padding: 6px 10px 6px 12px; border-left: 3px solid transparent; border-radius: 4px; cursor: pointer; font-weight: 400; }
.seletor-item:hover { background: var(--treinada); }
.seletor-item.on { font-weight: 700; background: var(--creme); }
.seletor-item.item-basico { border-left-color: var(--basico); }
.seletor-item.item-herois { border-left-color: var(--herois); }
.seletor-item.item-atlas  { border-left-color: var(--atlas); }
.dica-flutuante { position: fixed; z-index: 50; max-width: 340px; background: var(--papel); border: 1px solid var(--linha); border-radius: 10px;
  box-shadow: 0 10px 28px var(--sombra); padding: 10px 14px; font-size: calc(13px * var(--escala-fonte)); line-height: 1.45; pointer-events: none; }
.dica-flutuante p { margin: 6px 0 0; }
.dica-regiao { color: var(--atlas); }
.dica-beneficio { color: var(--tinta-suave); }

/* Ícone de dica da região */
.hint { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 6px;
  border-radius: 50%; background: var(--atlas); color: #fff; font-size: calc(13px * var(--escala-fonte)); font-weight: 900; cursor: help; vertical-align: middle; font-style: normal; }
.hint:focus { outline: 2px solid var(--atlas); outline-offset: 2px; }
.hint-balao { display: none; position: absolute; z-index: 30; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); width: min(360px, 80vw);
  background: var(--papel); color: var(--tinta); border: 1px solid var(--linha); border-top: 3px solid var(--atlas); border-radius: 8px;
  box-shadow: 0 10px 28px var(--sombra); padding: 10px 14px; font-size: calc(13px * var(--escala-fonte)); font-weight: 400; line-height: 1.45; text-align: left; }
.hint-balao b { color: var(--atlas); }
.hint-balao small { display: block; margin-top: 6px; color: var(--suave); }
.hint-balao hr { border: 0; border-top: 1px solid var(--linha); margin: 8px 0; }
.hint:hover .hint-balao, .hint:focus .hint-balao { display: block; }

/* ============ Ilustrações dos livros ============ */
.com-figura { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.com-figura > .conteudo-figura { min-width: 0; }
.com-figura:not(:has(.ilustracao)) { grid-template-columns: 1fr; }
/* Moldura de tamanho fixo: todas as ilustrações ocupam o mesmo espaço */
.ilustracao { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 300px; padding: 10px; border: 1px solid var(--linha); border-radius: 10px;
  background: radial-gradient(circle at 50% 40%, var(--superficie), var(--creme)); }
.ilustracao img { width: 280px; height: 373px; object-fit: contain; cursor: zoom-in; filter: drop-shadow(0 4px 8px var(--sombra)); }
.ilustracao.vazia { border-style: dashed; background: none; padding: 14px 10px; text-align: center; color: var(--suave); }
.ilustracao.vazia span { font-size: calc(26px * var(--escala-fonte)); opacity: .6; }
.ilustracao.vazia small { font-size: calc(11px * var(--escala-fonte)); line-height: 1.35; }
.troca-figura { display: flex; gap: 6px; }
.troca-figura button { width: 10px; height: 10px; padding: 0; border-radius: 50%; background: var(--linha); }
.troca-figura button.on { background: var(--vermelho); }
.deus-topo { grid-template-columns: minmax(0, 1fr) 120px; align-items: center; }
.ilustracao.simbolo { width: 120px; padding: 6px; position: static; }
.ilustracao.simbolo img { width: 108px; height: 108px; }
@media (max-width: 640px) {
  .com-figura { grid-template-columns: 1fr; }
  .com-figura > .ilustracao { order: -1; }
  .ilustracao { position: static; width: 100%; }
  .ilustracao img { height: 380px; width: 100%; }
}
.cartao-deus.com-simbolo { display: grid; grid-template-columns: 40px 1fr; column-gap: 10px; align-items: center; }
.cartao-deus.com-simbolo > *:not(img) { grid-column: 2; }
.simbolo-cartao { grid-row: 1 / span 3; width: 40px; height: 40px; object-fit: contain; }
.deus-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.simbolo-mini { width: 36px; height: 36px; object-fit: contain; }
#aba-deuses h3.primeiro { margin-top: 0; }
#painelDeus { margin-top: 16px; }
.linha-imagens { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.acoes-imagens { display: flex; gap: 8px; align-items: center; }
.acoes-imagens .sec-claro { margin-top: 0; }
.borda-basico { border-left-color: var(--basico); }
#btnTema { min-width: 96px; }

/* Nível com + e - */
.campo-nivel { display: flex; flex-direction: column; gap: 4px; font-size: calc(13px * var(--escala-fonte)); color: var(--suave); }
.nivel-controle { display: flex; align-items: center; gap: 8px; }
.nivel-controle output { min-width: 44px; text-align: center; font-size: calc(22px * var(--escala-fonte)); font-weight: 800; color: var(--tinta); }
.nivel-controle .passo:disabled { opacity: .35; cursor: default; }

/* Botão de re-rolagem: só o dado, com balão */
.rerolar { position: relative; margin-top: 10px; width: 48px; height: 48px; padding: 0; font-size: calc(26px * var(--escala-fonte)); line-height: 1;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; }
.rerolar span { display: inline-block; transition: transform .2s; }
.rerolar:hover { border-color: var(--vermelho); }
.rerolar:hover span { transform: rotate(-20deg) scale(1.1); }
.rerolar::after { content: attr(data-balao); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: calc(12px * var(--escala-fonte)); font-weight: 600; color: var(--tinta); background: var(--papel); border: 1px solid var(--linha);
  border-radius: 6px; padding: 5px 9px; box-shadow: 0 4px 12px var(--sombra); opacity: 0; pointer-events: none; transition: opacity .15s; }
.rerolar::before { content: ""; position: absolute; left: calc(100% + 4px); top: 50%; transform: translateY(-50%);
  border: 6px solid transparent; border-right-color: var(--linha); opacity: 0; transition: opacity .15s; }
.rerolar:hover::after, .rerolar:focus-visible::after, .rerolar:hover::before, .rerolar:focus-visible::before { opacity: 1; }

/* ============ Aba Poderes ============ */
.linha-poderes { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.nivel-linha { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start; }
.nivel-num { font-size: calc(18px * var(--escala-fonte)); font-weight: 800; color: var(--vermelho-escuro); text-align: right; padding-top: 6px; }
.nivel-conteudo { border-left: 3px solid var(--linha); padding-left: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fixas { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-hab { background: var(--creme-forte); border: 1px solid var(--linha); border-radius: 14px; padding: 3px 10px; font-size: calc(13px * var(--escala-fonte)); cursor: help; }
.escolher-poder { width: 100%; text-align: left; background: var(--superficie); border: 2px dashed var(--linha-forte); color: var(--vermelho-escuro); font-weight: 700; padding: 10px 14px; }
.escolher-poder:hover { border-color: var(--vermelho); background: var(--rosado); }
.slot-poder.aberto { background: var(--creme); border-radius: 10px; padding: 8px; }
.poder-escolhido { background: var(--superficie); border: 1px solid var(--linha); border-left: 4px solid var(--vermelho); border-radius: 8px; padding: 8px 12px; }
.poder-escolhido p { margin: 4px 0; font-size: calc(14px * var(--escala-fonte)); }
.topo-poder { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.acoes-poder { margin-left: auto; display: flex; gap: 6px; }
.acoes-poder button { margin: 0; padding: 4px 10px; }
.grupo { font-style: normal; font-size: calc(11px * var(--escala-fonte)); font-weight: 700; text-transform: uppercase; border-radius: 4px; padding: 1px 6px; background: var(--creme-forte); color: var(--suave); }
.grupo-classe { background: var(--treinada); color: var(--vermelho-escuro); }
.grupo-combate { background: var(--rosado); color: var(--vermelho); }
.grupo-magia { background: var(--roxo-claro); color: var(--roxo-texto); }
.grupo-destino { background: var(--verde-claro); color: var(--verde-texto); }
.grupo-tormenta { background: #5c1418; color: #ffd7d7; }
.escolha-poder { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: calc(13px * var(--escala-fonte)); font-weight: 600; margin: 4px 8px 4px 0; }
.escolha-poder select, .escolha-poder input { width: auto; padding: 3px 6px; }
.reqs { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: calc(12px * var(--escala-fonte)); color: var(--suave); margin-top: 4px; }
.req.ok { color: var(--verde-texto); }
.req.falta { color: var(--vermelho); font-weight: 700; }
.req.livre { color: var(--suave); font-style: italic; }
.picker-poder { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.grupos-poder { display: flex; flex-wrap: wrap; gap: 6px; }
.grupos-poder button { background: var(--superficie); border: 1px solid var(--linha); color: var(--tinta); padding: 6px 12px; }
.grupos-poder button.on { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.filtros-poder { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.filtros-poder input[type=search] { max-width: 280px; }
.filtros-poder .check { margin: 0; }
.opcoes-poder { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; max-height: 460px; overflow-y: auto; padding: 2px; }
.poder-opcao { display: flex; flex-direction: column; gap: 4px; text-align: left; background: var(--superficie); border: 1px solid var(--linha); color: var(--tinta); padding: 8px 10px; font-size: calc(13px * var(--escala-fonte)); cursor: pointer; }
.poder-opcao:hover:not(:disabled) { border-color: var(--vermelho); background: var(--rosado); }
.poder-opcao.on { border: 2px solid var(--vermelho); }
.poder-opcao.indisponivel { opacity: .55; cursor: not-allowed; }
.poder-opcao:disabled { cursor: not-allowed; }
.poder-opcao .motivo { font-size: calc(11px * var(--escala-fonte)); font-weight: 700; color: var(--vermelho); }
.opcoes-poder.so-disponiveis .poder-opcao[data-disponivel="0"]:not(.on) { display: none; }
.poder-opcao[hidden] { display: none; }
@media (max-width: 600px) { .nivel-linha { grid-template-columns: 36px 1fr; } .acoes-poder { margin-left: 0; } }

/* ============ Etapas (passo a passo) ============ */
.etapas { display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px; border-bottom: 2px solid var(--linha); margin: 0 -20px 16px; padding: 10px 20px 0; overflow-x: auto; }
.etapas button { display: flex; align-items: center; gap: 6px; background: none; color: var(--suave); border-radius: 8px 8px 0 0; padding: 8px 12px; white-space: nowrap; }
.etapas button .num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--linha-forte); font-size: calc(12px * var(--escala-fonte)); font-weight: 800; color: var(--suave); background: var(--superficie); }
.etapas button.feita .num { background: var(--verde-texto); border-color: var(--verde-texto); color: var(--papel); font-size: 0; }
.etapas button.feita .num::before { content: "✓"; font-size: calc(12px * var(--escala-fonte)); }
.etapas button.pendente .num { border-color: var(--vermelho); color: var(--vermelho); }
.etapas button.ativa { background: var(--vermelho); color: #fff; }
.etapas button.ativa .num { border-color: #fff; color: #fff; background: transparent; }
.etapas button.ativa.feita .num { background: #fff; color: var(--vermelho); }
.etapas .sep-etapas { flex: 1; min-width: 16px; }
.etapas button.extra { font-size: calc(13px * var(--escala-fonte)); padding: 8px 10px; }
.intro { font-style: italic; color: var(--suave); margin: 0 0 12px; }
i.obrig, .campo-basico i { color: var(--vermelho); font-style: normal; }
.grade-basico { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 16px; align-items: end; }
@media (max-width: 760px) { .grade-basico { grid-template-columns: 1fr; } }
.campo-basico { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: calc(14px * var(--escala-fonte)); color: var(--tinta); margin: 0; }
.campo-basico select, .campo-basico .seletor-botao { font-weight: 600; min-height: 40px; }
.campo-basico .nivel-controle { min-height: 40px; }
#modoOrigem .modo-origem { margin-top: 12px; }
.previa-basico { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 16px 0 4px; }
.previa { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--superficie); border: 1px solid var(--linha); color: var(--tinta); padding: 8px 10px; border-radius: 10px; }
.previa:hover { border-color: var(--vermelho); }
.previa-img { flex: 0 0 56px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--creme); overflow: hidden; }
.previa-img img { max-width: 56px; max-height: 64px; object-fit: contain; }
.previa-img .sem-img { font-size: calc(24px * var(--escala-fonte)); opacity: .6; }
.previa-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.previa-txt small { color: var(--suave); font-size: calc(12px * var(--escala-fonte)); line-height: 1.3; }
.nav-etapa { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--linha); flex-wrap: wrap; }
.nav-etapa .sec-claro { margin: 0; }
.nav-etapa .pendencia { color: var(--vermelho); font-size: calc(13px * var(--escala-fonte)); }
.nav-etapa .feito { color: var(--verde-texto); font-size: calc(13px * var(--escala-fonte)); font-weight: 700; }
.nav-etapa .pri.grande { background: var(--vermelho); color: #fff; }

/* Identidade */
.idade-regra { margin-top: 14px; }
.faixa-efeito { background: var(--creme); border-radius: 6px; padding: 8px 12px; margin-top: 8px; font-size: calc(14px * var(--escala-fonte)); }
#retratoIdentidade:empty { display: none; }

/* Retrato no resumo lateral */
.resumo .retrato { display: flex; justify-content: center; margin: -4px 0 8px; }
.resumo .retrato img { max-height: 320px; cursor: zoom-in; max-width: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px var(--sombra)); }

/* Perícias por pontos */
.pontos-pericias { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp { display: flex; flex-direction: column; border-radius: 10px; padding: 10px 14px; border: 2px solid; }
.pp span { font-size: calc(13px * var(--escala-fonte)); font-weight: 700; }
.pp b { font-size: calc(24px * var(--escala-fonte)); }
.pp small { font-size: calc(12px * var(--escala-fonte)); opacity: .8; }
.pp-classe { border-color: var(--vermelho); color: var(--vermelho); background: var(--rosado); }
.pp-int { border-color: var(--azul, #2c6fb5); color: var(--azul, #2c6fb5); background: var(--azul-claro, #eef4fb); }
.pp.estourou { outline: 3px solid var(--vermelho); }
.txt-classe { color: var(--vermelho); }
.txt-int { color: var(--azul, #2c6fb5); }
.chip-pericia { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; padding: 5px 12px; border: 1px solid var(--linha);
  border-radius: 20px; background: var(--superficie); color: var(--tinta); cursor: pointer; font-size: calc(14px * var(--escala-fonte)); }
.chip-pericia input { width: auto; margin: 0; }
.chip-pericia small { font-size: calc(11px * var(--escala-fonte)); opacity: .85; }
.chip-pericia.pts-classe { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.chip-pericia.pts-int { background: var(--azul, #2c6fb5); border-color: var(--azul, #2c6fb5); color: #fff; }
.chip-pericia.pts-outra { background: var(--creme-forte); color: var(--suave); cursor: default; }
.chip-pericia.pts-fixa { background: var(--verde-claro); border-color: var(--verde-borda); color: var(--verde-texto); font-weight: 700; cursor: default; }
.chip-pericia.pts-fixa select { width: auto; padding: 2px 4px; }
.chip-pericia.sem-pontos { opacity: .45; cursor: not-allowed; }
small.pts-int { color: var(--azul, #2c6fb5); font-weight: 700; }
small.pts-classe { color: var(--vermelho); font-weight: 700; }
.tabela-completa { margin-top: 16px; }
.tabela-completa summary { cursor: pointer; font-weight: 700; color: var(--vermelho-escuro); padding: 6px 0; }
:root[data-tema="escuro"] { --azul: #6aa7e6; --azul-claro: #1c2a3a; }
:root[data-tema="escuro"] .chip-pericia.pts-int, :root[data-tema="escuro"] .chip-pericia.pts-classe { color: #10141a; }
.previa-txt .selo { align-self: flex-start; margin-left: 0; }
.etapas button.extra { color: var(--suave); opacity: .85; }

/* Magias citadas: sublinhado pontilhado com balão */
.magia-ref { color: var(--roxo-texto); border-bottom: 1px dotted currentColor; cursor: help; font-weight: 600; }
.dica-magia-tipo { color: var(--roxo-texto); font-weight: 700; margin-top: 2px !important; }
.dica-magia-ficha { font-size: calc(12px * var(--escala-fonte)); color: var(--suave); }
.nota-patamar { display: block; font-size: calc(12px * var(--escala-fonte)); color: var(--suave); margin-top: 2px; }
.regra-grupo { display: block; font-size: calc(12px * var(--escala-fonte)); color: var(--suave); background: var(--creme); border-radius: 4px; padding: 3px 6px; margin: 2px 0; }
.texto-poder { line-height: 1.4; }

/* ============ Aba Magias ============ */
small.opcional { font-weight: 400; font-size: calc(12px * var(--escala-fonte)); color: var(--suave); }
label > span:first-child small.opcional { margin-left: 4px; }
.cab-magias .stats-magia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0; }
.stats-magia div { background: var(--creme); border-radius: 8px; padding: 8px; text-align: center; }
.stats-magia span { display: block; font-size: calc(12px * var(--escala-fonte)); color: var(--suave); }
.stats-magia b { font-size: calc(20px * var(--escala-fonte)); }
@media (max-width: 600px) { .cab-magias .stats-magia { grid-template-columns: 1fr 1fr; } }
.grade-escolas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-bottom: 12px; }
.cartao-escola { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--linha); border-radius: 8px; padding: 8px 10px; background: var(--superficie); font-size: calc(13px * var(--escala-fonte)); margin: 0; cursor: pointer; color: var(--tinta); }
.cartao-escola.on { border: 2px solid var(--roxo-texto); background: var(--roxo-claro); }
.cartao-escola.cheio { opacity: .55; cursor: not-allowed; }
.cartao-escola .exemplos { color: var(--suave); font-size: calc(12px * var(--escala-fonte)); }
.fonte-magias .bloco-cab .sec-claro { margin: 0; }
.caixa.borda-poder { border-left-color: var(--roxo-texto); }
.txt-outra { color: var(--roxo-texto); }
.lista-magias { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.lista-magias.navegando { max-height: 520px; overflow-y: auto; padding-right: 4px; }
.magia-linha { border: 1px solid var(--linha); border-left: 4px solid var(--linha-forte); border-radius: 6px; background: var(--superficie); padding: 5px 8px; }
.magia-linha.tipo-A { border-left-color: #2c6fb5; }
.magia-linha.tipo-D { border-left-color: #c08a1e; }
.magia-linha.tipo-U { border-left-color: #6a5acd; }
.magia-linha.outra-lista { background: var(--roxo-claro); box-shadow: inset 0 0 0 1px var(--roxo-texto); }
.magia-linha.bloqueada { opacity: .55; }
.magia-linha[hidden] { display: none; }
.magia-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: calc(14px * var(--escala-fonte)); }
.magia-topo .circ { font-weight: 800; color: var(--vermelho-escuro); min-width: 24px; }
.tipo-magia { font-size: calc(11px * var(--escala-fonte)); font-weight: 700; border-radius: 4px; padding: 1px 6px; color: #fff; }
.t-A { background: #2c6fb5; } .t-D { background: #b07a10; } .t-U { background: #6a5acd; }
.escola-magia { font-size: calc(12px * var(--escala-fonte)); color: var(--suave); }
.magia-resumo-curto { font-size: calc(12px * var(--escala-fonte)); color: var(--suave); margin-left: auto; }
.badge-outra { font-size: calc(11px * var(--escala-fonte)); font-weight: 700; color: var(--roxo-texto); border: 1px solid var(--roxo-texto); border-radius: 4px; padding: 0 5px; }
.magia-topo .motivo { font-size: calc(11px * var(--escala-fonte)); color: var(--vermelho); font-weight: 700; }
.btn-detalhe { background: none; border: 0; color: var(--vermelho); font-weight: 700; font-size: calc(12px * var(--escala-fonte)); padding: 2px 4px; }
/* Botão de escolher magia: pílula com ícone */
.btn-add { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 4px; border-radius: 999px; border: 0;
  background: linear-gradient(180deg, #c4373d, var(--vermelho-escuro)); color: #fff; font-size: calc(12px * var(--escala-fonte)); font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 2px 6px rgba(125,27,31,.35); cursor: pointer; transition: transform .12s, box-shadow .12s, filter .12s; }
.btn-add .ico { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.22); font-size: calc(15px * var(--escala-fonte)); line-height: 1; }
.btn-add:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 4px 10px rgba(125,27,31,.45); }
.btn-add:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(125,27,31,.4); }
.btn-add:focus-visible, .btn-rem:focus-visible, .btn-escolher:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.btn-add.travado { background: var(--creme-forte); color: var(--suave); box-shadow: none; padding: 0 9px; cursor: not-allowed; font-size: calc(12px * var(--escala-fonte)); }
.selo-ja { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; font-size: calc(12px * var(--escala-fonte)); font-weight: 700;
  color: var(--verde-texto); background: var(--verde-claro); border: 1px solid var(--verde-borda); }
.btn-rem { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid var(--linha); background: var(--superficie); color: var(--suave); font-size: calc(12px * var(--escala-fonte)); cursor: pointer; transition: all .12s; }
.btn-rem:hover { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.btn-escolher { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 14px 6px 6px; border: 1px solid var(--vermelho); background: var(--superficie); color: var(--vermelho-escuro); font-weight: 700; cursor: pointer; transition: all .12s; }
.btn-escolher .ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--vermelho); color: #fff; font-size: calc(16px * var(--escala-fonte)); line-height: 1; }
.btn-escolher small { font-weight: 400; color: var(--suave); }
.btn-escolher:hover { background: var(--rosado); }
.btn-escolher.aberto { padding: 6px 14px; background: var(--creme); border-color: var(--linha); color: var(--tinta); }
.selo-completa { font-size: calc(13px * var(--escala-fonte)); font-weight: 700; color: var(--verde-texto); background: var(--verde-claro); border: 1px solid var(--verde-borda); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.fonte-magias.completa { border-left-color: var(--verde-borda); }
.contador.ok { color: var(--verde-texto); }
/* Grupos por escola */
.grupo-escola { display: flex; flex-direction: column; gap: 4px; }
.grupo-escola + .grupo-escola { margin-top: 8px; }
.grupo-escola[hidden] { display: none; }
.cab-escola { display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--escala-fonte)); color: var(--tinta-suave); padding: 4px 2px 2px; border-bottom: 2px solid var(--cor-escola, var(--linha)); }
.cab-escola b { color: var(--cor-escola, var(--tinta)); letter-spacing: .02em; }
.cab-escola small { margin-left: auto; color: var(--suave); }
.ico-escola { font-size: calc(14px * var(--escala-fonte)); }
.grupo-escola .escola-magia { display: none; }
.lista-magias.navegando .cab-escola { position: sticky; top: 0; background: var(--papel); z-index: 1; }
.esc-abjuracao { --cor-escola: #2f6fa8; } .esc-adivinhacao { --cor-escola: #6b5aa8; } .esc-convocacao { --cor-escola: #2a8a7a; }
.esc-encantamento { --cor-escola: #b4437e; } .esc-evocacao { --cor-escola: #c0521d; } .esc-ilusao { --cor-escola: #7d5bbf; }
.esc-necromancia { --cor-escola: #5a5a5a; } .esc-transmutacao { --cor-escola: #4f8a2b; }
:root[data-tema="escuro"] .esc-abjuracao { --cor-escola: #7fb3e6; } :root[data-tema="escuro"] .esc-adivinhacao { --cor-escola: #b3a6ef; }
:root[data-tema="escuro"] .esc-convocacao { --cor-escola: #6fd0bf; } :root[data-tema="escuro"] .esc-encantamento { --cor-escola: #ee8fc1; }
:root[data-tema="escuro"] .esc-evocacao { --cor-escola: #f29a68; } :root[data-tema="escuro"] .esc-ilusao { --cor-escola: #c3a5f5; }
:root[data-tema="escuro"] .esc-necromancia { --cor-escola: #b8b8b8; } :root[data-tema="escuro"] .esc-transmutacao { --cor-escola: #9fd47a; }
/* Funções das magias com vários modos */
.badge-modos { font-size: calc(11px * var(--escala-fonte)); font-weight: 700; color: var(--tinta-suave); background: var(--creme-forte); border-radius: 4px; padding: 1px 6px; }
.modos-magia { margin: 8px 0 10px; }
.modos-magia h5 { margin: 0 0 6px; font-size: calc(13px * var(--escala-fonte)); color: var(--vermelho-escuro); }
.grade-modos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.modo { background: var(--creme); border: 1px solid var(--linha); border-left: 3px solid var(--roxo-texto); border-radius: 6px; padding: 6px 9px; display: flex; flex-direction: column; gap: 2px; }
.modo b { color: var(--roxo-texto); }
.nota-modo { font-size: calc(12px * var(--escala-fonte)); color: var(--suave); margin: 6px 0 0; }
.magia-detalhe { border-top: 1px dashed var(--linha); margin-top: 6px; padding-top: 6px; font-size: calc(13px * var(--escala-fonte)); }
.magia-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 12px; }
.magia-desc { margin: 6px 0; }
.aprimoramentos { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--escala-fonte)); }
.aprimoramentos th, .aprimoramentos td { border-bottom: 1px solid var(--linha); padding: 3px 6px; text-align: left; vertical-align: top; }
.aprimoramentos td.custo { white-space: nowrap; font-weight: 700; color: var(--roxo-texto); }
.navegador-magias { margin-top: 10px; border-top: 1px solid var(--linha); padding-top: 8px; }
.filtros-magia { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtros-magia select, .filtros-magia input { width: auto; }
.botoes-circ { display: flex; gap: 4px; }
.botoes-circ button { padding: 4px 10px; background: var(--superficie); border: 1px solid var(--linha); color: var(--tinta); }
.botoes-circ button.on { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }
.botoes-circ button.travado { opacity: .6; }

/* ============ Aba Livros: carrossel ============ */
.carrossel-livros { --vao: 24px; position: relative; margin: 6px 0 24px; padding: 0 54px; }
.janela-carrossel { overflow: hidden; padding: 14px 6px 10px; margin: 0 -6px; }
.trilho-livros { position: relative; display: flex; gap: var(--vao); align-items: stretch; transition: transform .45s cubic-bezier(.2,.8,.2,1);
  transform: translateX(calc(var(--pos, 0) * -1 * (100% + var(--vao)) / var(--vis, 2))); }
.cartao-livro { flex: 0 0 calc((100% - (var(--vis, 2) - 1) * var(--vao)) / var(--vis, 2)); background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; overflow: hidden;
  box-shadow: 0 6px 20px var(--sombra); transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s; transform: scale(.88); opacity: .5; cursor: pointer; }
.cartao-livro > * { pointer-events: none; }
.cartao-livro.ativo { transform: none; opacity: 1; cursor: default; border-top: 4px solid var(--cor-livro); }
.cartao-livro.ativo > * { pointer-events: auto; }
.cartao-livro.livro-basico { --cor-livro: var(--basico); } .cartao-livro.livro-herois { --cor-livro: var(--herois); } .cartao-livro.livro-atlas { --cor-livro: var(--atlas); } .cartao-livro.livro-deuses { --cor-livro: var(--deuses); }
.capa-livro { position: relative; aspect-ratio: 581 / 780; background: #1a1412; overflow: hidden; }
.capa-livro img { width: 100%; height: 100%; object-fit: cover; display: block; }
.capa-livro .faixa-capa { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.82)); }
.capa-livro .faixa-capa b { display: block; font-size: calc(19px * var(--escala-fonte)); text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.capa-livro .faixa-capa small { opacity: .85; }
.capa-livro .selo { position: absolute; top: 10px; left: 10px; margin: 0; font-size: calc(12px * var(--escala-fonte)); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.capa-vazia { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px;
  color: #f4e9d8; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--cor-livro) 85%, #fff), color-mix(in srgb, var(--cor-livro) 55%, #000) 75%); }
.capa-vazia .sigla-grande { font-size: calc(54px * var(--escala-fonte)); font-weight: 900; letter-spacing: .04em; text-shadow: 0 3px 10px rgba(0,0,0,.4); }
.capa-vazia small { font-size: calc(12px * var(--escala-fonte)); opacity: .9; max-width: 200px; }
.capa-vazia a { color: #fff; font-weight: 700; }
.corpo-livro { padding: 12px 14px 14px; }
.corpo-livro h4 { margin: 0 0 2px; color: var(--tinta); font-size: calc(16px * var(--escala-fonte)); }
.corpo-livro .estado-livro { font-size: calc(12px * var(--escala-fonte)); color: var(--suave); margin: 0 0 10px; }
.funcoes-livro { display: flex; flex-direction: column; gap: 2px; }
.funcao-livro { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 0; padding: 8px 2px; border-top: 1px solid var(--linha); color: var(--tinta); cursor: pointer; }
.funcao-livro .txt-funcao { flex: 1; display: flex; flex-direction: column; }
.funcao-livro .txt-funcao b { font-size: calc(14px * var(--escala-fonte)); }
.funcao-livro .txt-funcao small { color: var(--suave); font-size: calc(12px * var(--escala-fonte)); line-height: 1.35; }
.funcao-livro.fixa { cursor: default; }
.funcao-livro .check-fixo { flex: 0 0 38px; color: var(--verde-texto); font-weight: 800; text-align: center; order: 2; }
/* Interruptor */
.interruptor { position: relative; flex: 0 0 38px; width: 38px; height: 22px; }
.interruptor input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.interruptor i { position: absolute; inset: 0; border-radius: 999px; background: var(--linha-forte); transition: background .2s; pointer-events: none; }
.interruptor i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.interruptor input:checked + i { background: var(--cor-livro, var(--vermelho)); }
.interruptor input:checked + i::after { transform: translateX(16px); }
.interruptor input:focus-visible + i { outline: 2px solid var(--cor-livro, var(--vermelho)); outline-offset: 2px; }
.funcao-livro.todas { font-weight: 700; border-top: 0; padding-top: 0; }
.seta-carrossel { position: absolute; top: calc(50% - 36px); z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linha); background: var(--superficie); color: var(--tinta);
  font-size: calc(24px * var(--escala-fonte)); line-height: 1; display: grid; place-items: center; box-shadow: 0 4px 12px var(--sombra); cursor: pointer; padding: 0; }
.seta-carrossel:hover:not(:disabled) { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }
.seta-carrossel:disabled { opacity: .3; cursor: default; }
.seta-carrossel.ant { left: 2px; } .seta-carrossel.prox { right: 2px; }
/* Dois livros lado a lado: capa à esquerda e funcionalidades à direita, para caber tudo */
.cartao-livro { display: grid; grid-template-columns: minmax(150px, 42%) 1fr; }
.cartao-livro .capa-livro { align-self: stretch; aspect-ratio: auto; min-height: 300px; }
.cartao-livro .capa-livro img, .cartao-livro .capa-livro .capa-vazia { position: absolute; inset: 0; width: 100%; height: 100%; }
.cartao-livro .corpo-livro { padding: 14px 16px 16px; }
@media (max-width: 1000px) { .cartao-livro { grid-template-columns: 1fr; } .cartao-livro .capa-livro { aspect-ratio: 581 / 780; min-height: 0; max-height: 360px; } }
@media (max-width: 700px) { .carrossel-livros { padding: 0 44px; } }
.pontos-carrossel { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.pontos-carrossel button { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 0; background: var(--linha-forte); cursor: pointer; transition: width .25s, background .25s; }
.pontos-carrossel button.on { width: 26px; background: var(--vermelho); }

.cartao-livro { border-top: 4px solid var(--cor-livro); }   /* todos com a mesma borda: alturas iguais */
/* Mago: grimório e memorização */
.caixa-mago { margin-top: 8px; background: var(--creme); border: 1px dashed var(--linha-forte); border-radius: 8px; padding: 8px 12px; font-size: calc(14px * var(--escala-fonte)); }
.caixa-mago .sub { margin: 2px 0 0; }
.btn-memo { height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--tinta-suave); font-size: calc(12px * var(--escala-fonte)); font-weight: 700; cursor: pointer; }
.btn-memo:hover:not(:disabled):not(.on) { border-color: #2c6fb5; color: #2c6fb5; }
.btn-memo.on { background: #2c6fb5; border-color: #2c6fb5; color: #fff; }
.btn-memo:disabled { opacity: .45; cursor: not-allowed; }
.btn-memo.on:hover { filter: brightness(1.1); }

/* ============ Proficiências (bloco da classe) ============ */
.proficiencias { margin: 8px 0; }
.chips-prof { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip-prof { font-size: calc(12px * var(--escala-fonte)); font-weight: 600; border-radius: 999px; padding: 3px 10px; border: 1px solid var(--linha); }
.chip-prof.sim { background: var(--verde-claro); border-color: var(--verde-borda); color: var(--verde-texto); }
.chip-prof.parcial { background: var(--amarelo-claro); border-color: var(--amarelo-borda, #e9c46a); color: var(--tinta); }
.chip-prof.nao { color: var(--suave); background: var(--superficie); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }

/* ============ Aba Equipamento ============ */
.lista-kit { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.lista-kit li { padding: 6px 10px; border-radius: 6px; background: var(--creme); border: 1px solid var(--linha); }
.lista-kit li.ok { background: var(--verde-claro); border-color: var(--verde-borda); }
.lista-kit .marca { display: inline-block; width: 18px; font-weight: 800; color: var(--verde-texto); }
.stats-dinheiro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.stats-dinheiro > div { background: var(--creme); border-radius: 8px; padding: 8px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stats-dinheiro span { font-size: calc(12px * var(--escala-fonte)); color: var(--suave); }
.stats-dinheiro b { font-size: calc(20px * var(--escala-fonte)); }
.stats-dinheiro .negativo b { color: var(--vermelho); }
.stats-dinheiro small { color: var(--suave); font-size: calc(11px * var(--escala-fonte)); }
.btn-rolar-din { margin-top: 4px; font-size: calc(12px * var(--escala-fonte)); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--vermelho); background: var(--superficie); color: var(--vermelho-escuro); font-weight: 700; cursor: pointer; }
.btn-rolar-din:hover { background: var(--rosado); }
.campos-dinheiro { align-items: end; }
.campos-dinheiro input:disabled { background: var(--creme); color: var(--tinta); font-weight: 700; }
@media (max-width: 600px) { .stats-dinheiro { grid-template-columns: 1fr; } }
.tabela-equip, .tabela-armas { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--escala-fonte)); }
.tabela-equip td, .tabela-armas td { vertical-align: middle; }
.tabela-equip tr.invalido { background: var(--amarelo-claro); }
.tabela-equip select { width: auto; font-size: calc(13px * var(--escala-fonte)); padding: 4px 6px; }
.tabela-equip .usar { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; margin: 0 6px 0 0; color: var(--tinta); font-size: calc(12px * var(--escala-fonte)); }
.tabela-equip .mini, .tabela-ataques .mini { width: 60px; }
td.num, th.num { text-align: center; white-space: nowrap; }
.btn-mini { font-size: calc(12px * var(--escala-fonte)); padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--linha-forte); background: var(--superficie); color: var(--tinta-suave); cursor: pointer; }
.btn-mini:hover { border-color: var(--vermelho); color: var(--vermelho-escuro); }
.tabela-armas tr.subcab td { background: var(--creme-forte); font-weight: 700; color: var(--vermelho-escuro); font-size: calc(12px * var(--escala-fonte)); text-transform: uppercase; letter-spacing: .04em; }
.tabela-armas tr.sem-prof, .tabela-ataques tr.sem-prof { opacity: .7; }
.tabela-armas .btn-add { height: 26px; }
.nota-arma { font-size: calc(12px * var(--escala-fonte)); color: var(--suave); max-width: 340px; }
.chips-hab { min-width: 160px; }
.hab-arma { display: inline-block; font-size: calc(11px * var(--escala-fonte)); font-weight: 700; border-radius: 4px; padding: 1px 6px; margin: 1px 2px 1px 0; background: var(--roxo-claro); color: var(--roxo-texto); cursor: help; border-bottom: 1px dotted currentColor; }
.hab-arma.emp { background: var(--creme-forte); color: var(--tinta-suave); }
.hab-arma small { font-weight: 400; }
.grupo-cat { margin-bottom: 10px; border: 1px solid var(--linha); border-radius: 8px; background: var(--superficie); overflow: hidden; }
.grupo-cat .rolagem { padding: 0 8px 8px; }
.cab-cat { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; background: var(--creme); border: 0; padding: 10px 12px; cursor: pointer; color: var(--tinta); font-size: calc(15px * var(--escala-fonte)); flex-wrap: wrap; }
.cab-cat .seta { color: var(--vermelho); width: 12px; }
.cab-cat small { color: var(--suave); }
.cab-cat .sub { font-size: calc(12px * var(--escala-fonte)); margin: 0; }
.grupo-cat.fechado .cab-cat { background: var(--superficie); }
div.cab-cat { cursor: default; }
.filtro-prof { flex-direction: row; align-items: center; gap: 6px; color: var(--tinta); font-weight: 600; }
.municoes { padding: 0 8px; }
.legenda-armas h3 { margin-top: 4px; }
.grade-legenda { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.item-legenda { display: flex; flex-direction: column; gap: 2px; background: var(--creme); border-radius: 6px; padding: 8px 10px; font-size: calc(13px * var(--escala-fonte)); border-left: 3px solid var(--roxo-texto); }
.item-legenda b { color: var(--roxo-texto); }
.tabela-ataques.auto td .sub { margin: 0; font-size: calc(11px * var(--escala-fonte)); }
.titulo-manual { color: var(--tinta-suave); font-size: calc(14px * var(--escala-fonte)); }
#camposArmadura input:disabled { opacity: .6; }
.btn-add { white-space: nowrap; }
.ja-tem { color: var(--verde-texto); font-weight: 700; font-size: calc(11px * var(--escala-fonte)); }
.tabela-armas tr.subcab td .sub { text-transform: none; letter-spacing: 0; font-weight: 400; }
.hab-arma small, .ja-tem { color: inherit; } .ja-tem { color: var(--verde-texto); }

/* ============ Títulos de seção (destacados do conteúdo) ============ */
.titulo-secao { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: "Cinzel", Georgia, serif; font-size: calc(22px * var(--escala-fonte)); font-weight: 700; color: var(--vermelho-escuro);
  margin: 30px 0 12px; padding-bottom: 8px; border-bottom: 3px solid var(--vermelho); letter-spacing: .01em; }
#aba-equipamento > div:first-child .titulo-secao, #painelKit .titulo-secao:first-child { margin-top: 6px; }
.ico-secao { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--rosado); font-size: calc(19px * var(--escala-fonte)); }
.contador-secao { font-family: "Alegreya Sans", system-ui, sans-serif; margin-left: auto; font-size: calc(13px * var(--escala-fonte)); font-weight: 700; color: var(--tinta-suave); background: var(--creme-forte); border-radius: 999px; padding: 3px 12px; }
.contador-secao.ok { color: var(--verde-texto); background: var(--verde-claro); }
.contador-secao.alerta { color: #fff; background: var(--vermelho); }
.rotulo-mini { font-size: calc(11px * var(--escala-fonte)); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }

/* Checklist do equipamento inicial */
.lista-kit li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: calc(14px * var(--escala-fonte)); }
.lista-kit li .escolhido { margin-left: auto; color: var(--verde-texto); }
.lista-kit li.falta { background: var(--superficie); border-style: dashed; }
.lista-kit li.falta .marca { color: var(--suave); }
.lista-kit li.nao { background: var(--superficie); color: var(--suave); }
.lista-kit li.nao .marca { color: var(--vermelho); }
.itens-origem { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 8px; background: var(--creme); font-size: calc(14px * var(--escala-fonte)); }
.btn-origem { border-radius: 999px; padding: 6px 14px; border: 1px solid #2c6fb5; background: var(--superficie); color: #2c6fb5; font-weight: 700; cursor: pointer; }
.btn-origem.on { background: #2c6fb5; color: #fff; }
.vazio-equip { padding: 14px; border: 2px dashed var(--linha); border-radius: 8px; color: var(--suave); text-align: center; }
.tabela-equip .uso { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tabela-equip .qtd { flex-direction: row; align-items: center; gap: 4px; margin: 0; font-size: calc(12px * var(--escala-fonte)); }
.falta-municao { font-size: calc(12px * var(--escala-fonte)); color: var(--suave); display: inline-flex; align-items: center; gap: 4px; }
.barra-loja { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.barra-loja .sub { margin: 0; }
.btn-add.como-kit { background: linear-gradient(180deg, #2f8a55, #1f6b43); box-shadow: 0 2px 6px rgba(31,107,67,.35); }
.btn-add.como-origem { background: linear-gradient(180deg, #3b82c4, #2c6fb5); box-shadow: 0 2px 6px rgba(44,111,181,.35); }
.btn-add.travado { height: 26px; display: inline-flex; align-items: center; white-space: nowrap; }
.municoes { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 6px 10px 10px; }
.item-municao { display: inline-flex; align-items: center; gap: 6px; font-size: calc(13px * var(--escala-fonte)); }
.tabela-armas tr.regra-linha td { font-size: calc(12px * var(--escala-fonte)); color: var(--suave); background: var(--superficie); }
details.legenda-armas summary { cursor: pointer; font-size: calc(17px * var(--escala-fonte)); font-weight: 800; color: var(--roxo-texto); padding: 4px 0; }
details.legenda-armas[open] summary { margin-bottom: 8px; }

/* Idade: um campo só, com a regra escolhida ao lado */
.bloco-idade { margin-top: 4px; }
.linha-idade { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.campo-idade { width: 120px; margin-bottom: 0; }
#alternadorIdade { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.alternador { display: inline-flex; border: 1px solid var(--linha-forte); border-radius: 999px; overflow: hidden; background: var(--superficie); }
.alternador button { border: 0; background: none; padding: 7px 14px; font-size: calc(13px * var(--escala-fonte)); font-weight: 600; color: var(--tinta-suave); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.alternador button + button { border-left: 1px solid var(--linha-forte); }
.alternador button.on { background: var(--vermelho); color: #fff; }
.alternador button.on .selo { background: rgba(255,255,255,.25); }
.rotulo-versatil { font-size: calc(13px * var(--escala-fonte)); font-weight: 700; color: var(--tinta); }
.faixas-idade { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.faixa-btn { display: flex; flex-direction: column; align-items: center; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--linha); background: var(--superficie); cursor: pointer; color: var(--tinta); }
.faixa-btn small { color: var(--suave); font-size: calc(11px * var(--escala-fonte)); }
.faixa-btn.on { border: 2px solid var(--herois); background: color-mix(in srgb, var(--herois) 12%, var(--superficie)); }
.escolha-versatil { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; padding: 8px 10px; border-radius: 8px; background: var(--creme); }
.escolha-versatil .sub { margin: 0; }
.nivel-linha.versatil .nivel-num { color: #b07a10; }
.tabela-armas td:nth-child(2) { min-width: 250px; }
.tabela-armas .chips-hab { min-width: 120px; }
.lista-kit li.da-origem.ok { background: color-mix(in srgb, #2c6fb5 10%, var(--superficie)); border-color: #7aa7d6; }
.lista-kit li.da-origem.ok .marca, .lista-kit li.da-origem.ok .escolhido { color: #2c6fb5; }
:root[data-tema="escuro"] .lista-kit li.da-origem.ok .marca, :root[data-tema="escuro"] .lista-kit li.da-origem.ok .escolhido { color: #8cbfe6; }
.tag-origem { font-size: calc(11px * var(--escala-fonte)); font-weight: 700; color: #fff; background: #2c6fb5; border-radius: 4px; padding: 1px 6px; margin-left: 4px; }
.rotulo-origem { margin: 12px 0 0; color: #2c6fb5; }
.escolhas-origem { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; padding: 10px 12px; border-radius: 8px; background: var(--creme); border: 1px solid var(--linha); }
.escolha-origem { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: calc(14px * var(--escala-fonte)); }
.escolha-origem select { width: auto; min-width: 180px; }
.duplo-texto { margin: 0; }

/* ============ Hierarquia de títulos em todas as abas ============ */
/* 1) Título de seção (h2.titulo-secao): grande, com ícone e linha vermelha
   2) Título de caixa (h4 dentro de .caixa): médio, escuro
   3) Subtítulo (h5): pequeno, em maiúsculas, cinza
   4) Conteúdo: texto normal; .sub e .dica mais claros */
.titulo-secao.primeiro { margin-top: 4px; }
.titulo-secao small { font-family: "Alegreya Sans", system-ui, sans-serif; font-size: calc(14px * var(--escala-fonte)); font-weight: 600; color: var(--suave); }
.caixa h4, .caixa .bloco-cab h4 { font-size: calc(18px * var(--escala-fonte)); font-weight: 800; letter-spacing: .01em; }
.caixa h4 small { font-size: calc(13px * var(--escala-fonte)); font-weight: 500; }
.subtitulo-secao { font-size: calc(15px * var(--escala-fonte)); font-weight: 800; color: var(--tinta); margin: 18px 0 6px; padding-left: 10px; border-left: 4px solid var(--vermelho); }
main .dica, main p.sub { line-height: 1.45; }
/* Seções numeradas da aba Personagem */
.rotulo-secao { gap: 10px; margin-top: 26px; }
.titulo-rotulo { display: flex; align-items: center; gap: 10px; font-size: calc(21px * var(--escala-fonte)); font-weight: 800; color: var(--vermelho-escuro);
  padding-bottom: 8px; border-bottom: 3px solid var(--vermelho); }
.num-secao { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--vermelho); color: #fff; font-size: calc(17px * var(--escala-fonte)); }
.secao:first-of-type .rotulo-secao { margin-top: 10px; }

/* ============ Complicações ============ */
.campo-genero { display: flex; align-items: flex-end; gap: 10px; }
.campo-genero > label:first-child { flex: 1; }
.liga-complicacoes { flex-direction: row; align-items: center; gap: 6px; margin-bottom: 10px; font-size: calc(12px * var(--escala-fonte)); font-weight: 700; color: var(--tinta-suave); cursor: pointer; white-space: nowrap; }
.liga-complicacoes .interruptor { --cor-livro: var(--herois); }
#abas button:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.status-comp { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: var(--creme); }
.status-comp .sec-claro { margin-left: auto; }
.grade-comp { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.cartao-comp { display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--superficie);
  color: var(--tinta); font: inherit; font-size: calc(13px * var(--escala-fonte)); cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; position: relative; }
.cartao-comp:hover:not(:disabled) { border-color: var(--herois); box-shadow: 0 3px 10px var(--sombra); transform: translateY(-1px); }
.cartao-comp.on { border: 2px solid var(--herois); background: color-mix(in srgb, var(--herois) 10%, var(--superficie)); }
.cartao-comp.bloqueada { opacity: .5; cursor: not-allowed; }
.topo-comp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.topo-comp b { font-size: calc(14px * var(--escala-fonte)); }
.selo-comp { font-weight: 800; color: #fff; background: var(--vermelho); border-radius: 4px; padding: 0 6px; cursor: help; }
.tag-classe { font-size: calc(11px * var(--escala-fonte)); font-weight: 700; color: #fff; background: var(--herois); border-radius: 4px; padding: 1px 6px; }
.topo-comp .pag { margin-left: auto; font-size: calc(11px * var(--escala-fonte)); color: var(--suave); }
.texto-comp { line-height: 1.4; }
.ef-aplicado { font-size: calc(11px * var(--escala-fonte)); font-weight: 700; color: var(--verde-texto); }
.ef-texto { font-size: calc(11px * var(--escala-fonte)); color: var(--suave); font-style: italic; }
.marca-on { position: absolute; top: -9px; right: 10px; font-size: calc(11px * var(--escala-fonte)); font-weight: 800; color: #fff; background: var(--herois); border-radius: 999px; padding: 1px 8px; }
.bloco-classe-comp.outra .subtitulo-secao { color: var(--suave); border-left-color: var(--linha-forte); }
.bloco-classe-comp.minha .subtitulo-secao { border-left-color: var(--herois); }
.detalhe-comp { margin: 4px 0 0; font-size: calc(12px * var(--escala-fonte)); }
/* "!" de buffs nos itens */
.marca-buff { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%; font-size: calc(12px * var(--escala-fonte)); font-weight: 900; color: #fff; cursor: help; vertical-align: 1px; }
.marca-buff.bom { background: #2f8a55; box-shadow: 0 0 0 2px rgba(47,138,85,.25); }
.marca-buff.ruim { background: #d07a12; box-shadow: 0 0 0 2px rgba(208,122,18,.25); }
.marca-buff.misto { background: linear-gradient(90deg, #2f8a55 50%, #d07a12 50%); }
.dica-buff-titulo { margin: 6px 0 2px !important; font-weight: 800; font-size: calc(12px * var(--escala-fonte)); text-transform: uppercase; letter-spacing: .04em; }
.dica-buff-titulo.bom { color: var(--verde-texto); }
.dica-buff-titulo.ruim { color: #c06a08; }
.lista-buff { margin: 0; padding-left: 16px; }
.lista-buff li { margin: 2px 0; }
.escolha-nivel { padding: 10px 12px; }
.escolha-nivel .escolha { margin: 0 0 6px; }
.opcoes-nivel { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin-top: 6px; }
.opcoes-nivel > div { display: flex; flex-direction: column; gap: 2px; padding: 6px 9px; border: 1px solid var(--linha); border-radius: 6px; font-size: calc(13px * var(--escala-fonte)); background: var(--superficie); }
.opcoes-nivel > div.on { border: 2px solid var(--vermelho); background: var(--rosado); }
.quadro-pvpm { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 10px; }
.pvpm { display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; border-radius: 8px; background: var(--creme); border-left: 4px solid; font-size: calc(13px * var(--escala-fonte)); }
.pvpm.pv { border-left-color: #c0392b; } .pvpm.pm { border-left-color: #2c6fb5; }
.pvpm .rot { font-size: calc(12px * var(--escala-fonte)); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); }
.pvpm .total { margin-top: 3px; padding-top: 4px; border-top: 1px dashed var(--linha); }
.pvpm .sub { margin: 0; }
@media (max-width: 700px) { .quadro-pvpm { grid-template-columns: 1fr; } }
.funcao-livro.desativada { opacity: .55; cursor: not-allowed; }
.funcao-livro.desativada .interruptor { pointer-events: none; }
/* Habilidades elementais (Golem / Qareen) */
.elem { --el: #888; border-left: 4px solid var(--el) !important; background: color-mix(in srgb, var(--el) 12%, transparent) !important; }
.elem b { color: color-mix(in srgb, var(--el) 80%, currentColor); }
.elem-agua { --el: #2f86c9; } .elem-ar { --el: #8a63c9; } .elem-fogo { --el: #d9481c; }
.elem-terra { --el: #6f8f2a; } .elem-luz { --el: #d4a514; } .elem-trevas { --el: #4a3a6b; }
p.hab.elem { padding: 4px 8px; border-radius: 4px; }
.gota-elem { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--el); margin-right: 6px; vertical-align: middle; }
.tabela-ataques tr.duas-armas td { background: color-mix(in srgb, var(--destaque, #b8862b) 10%, transparent); }
.tabela-ataques tr.duas-armas td:first-child b::before { content: "⚔ "; }
/* Deuses de Arton */
.regras-devocao .funcoes-livro { margin: 6px 0 10px; }
.alternador.mini-alt { margin: 4px 0 6px; }
.alternador.mini-alt button { font-size: calc(12px * var(--escala-fonte)); padding: 3px 10px; }
/* "Abrir ficha" é um label: neutraliza o estilo geral de label para ficar igual aos botões */
.acoes > label.botao-arquivo { flex-direction: row; margin: 0; font-size: calc(15px * var(--escala-fonte)); color: var(--pergaminho); }

/* ============ Botões de adicionar (itens e magias) ============ */
/* O "+" é desenhado com duas barras, então fica sempre no centro da bolinha */
.btn-add { --cor-btn: #a8282d; --cor-btn-clara: #cc4248; height: 30px; padding: 0 13px 0 3px; gap: 8px; border-radius: 999px; font-size: calc(13px * var(--escala-fonte)); font-weight: 700; letter-spacing: .01em;
  background: linear-gradient(180deg, var(--cor-btn-clara), var(--cor-btn)); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.18), 0 2px 6px color-mix(in srgb, var(--cor-btn) 35%, transparent);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.btn-add.como-kit    { --cor-btn: #1f6b43; --cor-btn-clara: #2f9a5f; background: linear-gradient(180deg, var(--cor-btn-clara), var(--cor-btn)); }
.btn-add.como-origem { --cor-btn: #245f9e; --cor-btn-clara: #3b82c4; background: linear-gradient(180deg, var(--cor-btn-clara), var(--cor-btn)); }
.btn-add .ico, .btn-escolher .ico { position: relative; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; font-size: 0; color: transparent;
  background: rgba(255,255,255,.95); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .3s cubic-bezier(.3,.8,.25,1); }
.btn-add .ico::before, .btn-add .ico::after, .btn-escolher .ico::before, .btn-escolher .ico::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; border-radius: 2px; background: var(--cor-btn, var(--vermelho)); transform: translate(-50%, -50%); }
.btn-add .ico::after, .btn-escolher .ico::after { transform: translate(-50%, -50%) rotate(90deg); }
.btn-escolher .ico { background: var(--vermelho); }
.btn-escolher .ico::before, .btn-escolher .ico::after { background: #fff; }
.btn-add:hover { transform: translateY(-1px); filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.18), 0 5px 12px color-mix(in srgb, var(--cor-btn) 45%, transparent); }
.btn-add:hover .ico, .btn-escolher:hover .ico { transform: rotate(90deg); }
.btn-add:active:not(:disabled) { transform: translateY(1px) scale(.98); filter: brightness(.96); box-shadow: inset 0 2px 4px rgba(0,0,0,.25); }
.btn-add.travado { height: 30px; border-radius: 999px; padding: 0 12px; background: var(--creme-forte); color: var(--suave); box-shadow: inset 0 0 0 1px var(--linha); filter: none; transform: none; }
.tabela-armas .btn-add { height: 30px; }
/* Botão de tirar: um "×" desenhado, também centralizado */
.btn-rem { position: relative; width: 28px; height: 28px; font-size: 0; color: transparent; }
.btn-rem::before, .btn-rem::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; border-radius: 2px; background: var(--suave);
  transform: translate(-50%, -50%) rotate(45deg); transition: background .15s; }
.btn-rem::after { transform: translate(-50%, -50%) rotate(-45deg); }
.btn-rem:hover::before, .btn-rem:hover::after { background: #fff; }
.btn-rem:hover { transform: rotate(90deg); }
/* Linha recém-adicionada: um brilho rápido para mostrar onde o item entrou */
@keyframes brilho-novo { from { background: color-mix(in srgb, var(--verde-borda) 45%, transparent); } to { background: transparent; } }
tr.recem td { animation: brilho-novo 1.4s ease-out; }

/* ============ Marcas de papel nas origens ============ */
.marcas-papel { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: 1px; }
.marca-papel { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; font-size: calc(11px * var(--escala-fonte)); font-weight: 900; line-height: 1;
  font-family: "Alegreya Sans", system-ui, sans-serif; color: #fff; opacity: .28; }
.marca-papel.da-classe { opacity: 1; }
.marca-papel.papel-combate { background: #c62f35; }
.marca-papel.papel-magia   { background: #2f6fd0; }
.marca-papel.papel-suporte { background: #23874f; }
.marca-papel.papel-tanque  { background: #fff; color: #3a2f25; box-shadow: inset 0 0 0 1.5px #8d7f6c; }
.legenda-papeis { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 10px; margin-bottom: 6px; font-size: calc(13px * var(--escala-fonte)); color: var(--suave);
  border-bottom: 1px solid var(--linha); }
.legenda-papeis > span { display: inline-flex; align-items: center; gap: 5px; opacity: .55; }
.legenda-papeis > span.da-classe { opacity: 1; color: var(--tinta); font-weight: 700; }
.legenda-papeis small { flex-basis: 100%; font-size: calc(12px * var(--escala-fonte)); }
.dica-papeis { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: calc(13px * var(--escala-fonte)); }

/* Ilustração ampliada: clique na imagem para ver grande */
.zoom-figura { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(20,10,8,.82); cursor: zoom-out;
  animation: zoom-entra .2s ease-out; }
.zoom-figura img { max-width: min(92vw, 720px); max-height: 92vh; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
@keyframes zoom-entra { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1100px) { .com-figura { grid-template-columns: minmax(0, 1fr) 240px; } .ilustracao { width: 240px; } .ilustracao img { width: 220px; height: 293px; } }
.caixa.borda-raca { border-left-color: var(--verde-texto); }
.escolha-presente { flex-direction: row; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--tinta); font-weight: 600; }
.escolha-presente select { width: auto; }
/* Equipamento: vender e guardar */
.acoes-equip { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.btn-vender { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid #c79a2e;
  background: linear-gradient(180deg, #fff7df, #f6e2a6); color: #6b4a07; font-size: calc(12px * var(--escala-fonte)); font-weight: 700; white-space: nowrap; }
.btn-vender small { font-weight: 600; opacity: .85; }
.btn-vender:hover { background: #f3d77f; box-shadow: 0 2px 6px rgba(160,120,20,.3); }
:root[data-tema="escuro"] .btn-vender { background: #3a3220; color: #f1d78c; border-color: #7a6326; }
.btn-texto { background: none; color: var(--vermelho); font-weight: 700; padding: 4px 8px; }
.btn-texto:hover { text-decoration: underline; }
tr.vendido td { opacity: .6; } tr.vendido b { text-decoration: line-through; }
.selo-venda { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--verde-claro); color: var(--verde-texto); font-weight: 700; font-size: calc(12px * var(--escala-fonte)); }
tr.guardada td:first-child b::after { content: " (guardada)"; font-weight: 400; color: var(--suave); }
.tag-origem { font-size: calc(11px * var(--escala-fonte)); font-weight: 700; color: #fff; background: #2c6fb5; border-radius: 999px; padding: 1px 8px; }