/* ==========================================================================
   GRIFOS E GÁRGULAS — style.css
   Estética medieval/fantasia sombria. Sem bibliotecas CSS.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Alegreya:ital,wght@0,500;0,700;1,500;1,700&display=swap');

:root {
  --fundo:        #0f0e17;
  --dourado:      #c9a84c;
  --dourado-claro:#e6c96a;
  --roxo-painel:  #2d1b69;
  --pedra-borda:  #3a3a4a;
  --painel-bg:    #17162447;
  --texto:        #e7e3d4;
  --texto-suave:  #b8b3a0;
  --verde-vida:   #3ba55d;
  --amarelo-vida: #d4b34a;
  --vermelho-vida:#c0392b;
  --fonte-titulo: 'Cinzel', Georgia, 'Times New Roman', serif;
  --fonte-texto:  system-ui, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--fundo);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.25) 0 3px, transparent 3px 6px);
  color: var(--texto);
  font-family: var(--fonte-texto);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ==========================================================================
   BARRA DE ROLAGEM — tema do sistema (pedra escura + dourado)
   Vale para o scroll da página e o scroll interno dos modais/regras.
   ========================================================================== */
/* Firefox */
html { scrollbar-width: thin; scrollbar-color: var(--dourado) #100f1a; }

/* WebKit/Chromium (Chrome, Edge, navegadores mobile baseados em Chromium) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track {
  background: #100f1a;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
  border-left: 1px solid var(--pedra-borda);
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 2px solid #100f1a;
  background: linear-gradient(180deg, var(--dourado-claro), var(--dourado) 55%, #7a5c1e);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #f2dd93, var(--dourado-claro) 55%, var(--dourado));
  box-shadow: inset 0 0 4px rgba(0,0,0,0.4);
}
::-webkit-scrollbar-corner { background: #100f1a; }

/* Scroll interno dos modais (Regras, Habilidades, Ouro) — trilho combinando com o painel */
.modal-ficha-corpo { scrollbar-width: thin; scrollbar-color: var(--dourado) #14121f; }
.modal-ficha-corpo::-webkit-scrollbar-track { background: #14121f; border-left: 1px solid var(--pedra-borda); }

/* ==========================================================================
   MENU
   ========================================================================== */
#menu-topo {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px;
  background: linear-gradient(#141322, #0c0b14);
  border-bottom: 2px solid var(--dourado);
  box-shadow: 0 3px 12px rgba(0,0,0,0.6);
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-texto {
  font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700;
  color: var(--dourado); letter-spacing: 1px; text-shadow: 0 1px 2px #000;
}
.logo-texto em { color: var(--texto-suave); font-style: normal; }
.logo-sub {
  font-family: var(--fonte-titulo); font-size: 13px; color: var(--texto-suave);
  padding-left: 12px; margin-left: 10px; border-left: 1px solid var(--pedra-borda);
  letter-spacing: 0.5px;
}

nav { display: flex; gap: 10px; }
.nav-btn {
  font-family: var(--fonte-titulo); font-size: 15px; color: var(--texto);
  background: linear-gradient(#26243a, #16151f);
  border: 1px solid var(--pedra-borda); border-top-color: #55536b;
  border-radius: 4px; padding: 8px 16px; cursor: pointer; transition: all 0.2s;
  text-decoration: none; display: inline-flex; align-items: center;
}
.nav-btn:hover { box-shadow: 0 0 8px rgba(201,168,76,0.5); color: var(--dourado-claro); }
.nav-btn.active {
  color: var(--fundo);
  background: linear-gradient(var(--dourado-claro), var(--dourado));
  border-color: var(--dourado-claro);
  box-shadow: 0 0 10px rgba(201,168,76,0.6);
}

.aviso-erro {
  margin: 12px 20px; padding: 12px 16px;
  background: #3a1414; border: 1px solid var(--vermelho-vida);
  border-radius: 6px; color: #f0c0c0; font-size: 14px;
}

/* ==========================================================================
   ESTRUTURA GERAL
   ========================================================================== */
main { padding: 18px; max-width: 1440px; margin: 0 auto; }
.tela { display: none; }
.tela.ativa { display: block; }

.painel {
  background: var(--painel-bg);
  border: 1px solid var(--pedra-borda);
  border-radius: 8px; padding: 14px 16px; margin-bottom: 16px;
  box-shadow:
    inset 0 0 0 1px rgba(201,168,76,0.15),
    inset 0 0 22px rgba(0,0,0,0.5),
    0 4px 10px rgba(0,0,0,0.45);
}
.painel-titulo {
  font-family: var(--fonte-titulo); font-size: 17px; color: var(--dourado);
  margin: 0 0 12px; padding-bottom: 6px;
  border-bottom: 1px solid rgba(201,168,76,0.3); letter-spacing: 0.5px;
}

.rotulo {
  display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--texto-suave); margin: 8px 0 4px;
}
.input-pedra {
  width: 100%; background: #100f1a; color: var(--texto);
  border: 1px solid var(--pedra-borda); border-top-color: #4a4860;
  border-radius: 4px; padding: 8px 10px; font-family: var(--fonte-texto); font-size: 14px;
}
.input-pedra:focus { outline: none; border-color: var(--dourado); box-shadow: 0 0 6px rgba(201,168,76,0.4); }

.btn-pedra {
  font-family: var(--fonte-texto); color: var(--texto);
  background: linear-gradient(#2b2940, #17151f);
  border: 1px solid var(--pedra-borda); border-top-color: #56546e;
  border-radius: 4px; padding: 7px 12px; cursor: pointer;
  transition: box-shadow 0.2s, color 0.2s; font-size: 14px;
}
.btn-pedra:hover { box-shadow: 0 0 8px rgba(201,168,76,0.55); color: var(--dourado-claro); }
.btn-pedra:active { transform: translateY(1px); }
.btn-largo { width: 100%; margin-top: 10px; }
.btn-mini { padding: 5px 8px; font-size: 13px; }
.btn-destaque {
  color: var(--fundo);
  background: linear-gradient(var(--dourado-claro), var(--dourado));
  border-color: var(--dourado-claro); font-weight: 700;
}
.btn-destaque:hover { color: #000; box-shadow: 0 0 12px rgba(201,168,76,0.8); }

/* ==========================================================================
   TELA 1 — FICHA
   ========================================================================== */
.ficha-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 4.5fr) minmax(0, 2.5fr);
  gap: 16px; align-items: start;
}
.coluna { min-width: 0; }

.identidade { text-align: center; }
.avatar {
  font-size: 60px; line-height: 1; margin: 6px auto 8px;
  width: 96px; height: 96px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--dourado); border-radius: 50%;
  background: radial-gradient(circle, #241f3a, #0d0c16);
  box-shadow: 0 0 14px rgba(201,168,76,0.35); overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.classe-nome { font-family: var(--fonte-titulo); font-size: 24px; color: var(--dourado); margin-bottom: 8px; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-bloco { background: #14121f; border: 1px solid var(--pedra-borda); border-radius: 6px; padding: 8px; text-align: center; }
.pp-bloco { grid-column: 1 / -1; background: #1b1330; border-color: var(--roxo-painel); }
.stat-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--texto-suave); margin-bottom: 6px; }
.stat-valor { font-family: var(--fonte-titulo); font-size: 26px; font-weight: 700; color: var(--texto); min-width: 44px; display: inline-block; }
.stat-grande { font-size: 40px; color: var(--dourado); }
.pp-valor { color: var(--dourado-claro); }
.dado-select { margin-top: 2px; margin-bottom: 2px;}
.dano-bonus { display: block; font-size: 12px; color: var(--dourado); margin-top: 4px; min-height: 14px; }

.stepper { display: flex; align-items: center; justify-content: center; gap: 8px; }
.stepper .btn-pedra { width: 34px; padding: 4px 0; font-size: 18px; font-weight: 700; }
.stepper-grande { margin: 4px 0 8px; }
.stepper-grande .btn-pedra { width: 44px; height: 44px; font-size: 22px; }

@keyframes flash {
  0%   { color: var(--dourado-claro); text-shadow: 0 0 12px var(--dourado); transform: scale(1.25); }
  100% { color: inherit; text-shadow: none; transform: scale(1); }
}
.flash { animation: flash 0.3s ease-out; }

.pv-barra-externa {
  position: relative; height: 26px; background: #0a0910;
  border: 1px solid var(--pedra-borda); border-radius: 13px; overflow: hidden; margin-bottom: 10px;
}
.pv-barra-interna { height: 100%; width: 100%; background: var(--verde-vida); transition: width 0.15s linear, background 0.2s; }
.pv-texto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000; }
.pv-slider { width: 100%; accent-color: var(--vermelho-vida); }

.nivel-bonus { text-align: center; color: var(--dourado); font-size: 14px; margin-bottom: 8px; }

.gold-display { display: block; text-align: center; color: var(--dourado); }
.gold-display.piscar { animation: piscar-vermelho 0.5s ease; }
@keyframes piscar-vermelho {
  0%,100% { color: var(--dourado); }
  50% { color: var(--vermelho-vida); text-shadow: 0 0 12px var(--vermelho-vida); }
}
.gold-controles { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 8px; }
.gold-controles .input-pedra { text-align: center; }
.gold-atalhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }

.fichas-visual { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; min-height: 20px; }
.ficha-token {
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--dourado-claro), #8a6d20);
  border: 1px solid #5c4712; box-shadow: 0 0 4px rgba(201,168,76,0.5);
}
.fichas-numero { font-family: var(--fonte-titulo); font-size: 20px; color: var(--dourado); }

.lista-habilidades .vazio { color: var(--texto-suave); font-style: italic; font-size: 14px; }
.habilidade { background: #14121f; border: 1px solid var(--pedra-borda); border-radius: 6px; padding: 10px; margin-bottom: 10px; }
.habilidade-nome { font-family: var(--fonte-titulo); font-weight: 700; font-size: 15px; color: var(--texto); margin-bottom: 4px; }
.habilidade-desc { font-size: 13px; color: var(--texto-suave); line-height: 1.4; }
.badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-left: 6px; vertical-align: middle; font-weight: 700; }
.badge-passiva { color: #a9c0d8; border: 1px dashed #6f8aa8; background: #1a2230; }
.badge-combate { color: #fff; background: #6e1f1f; border: 1px solid #a83232; }
.badge-especial { color: #fff; background: #4a2b6e; border: 1px solid var(--dourado); }

.acordeao details { border: 1px solid var(--pedra-borda); border-radius: 6px; margin-bottom: 8px; background: #14121f; }
.acordeao summary { cursor: pointer; padding: 8px 10px; font-family: var(--fonte-titulo); font-size: 14px; color: var(--dourado); list-style: none; }
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary::before { content: '▸ '; color: var(--dourado); }
.acordeao details[open] summary::before { content: '▾ '; }
.acordeao .conteudo-regra { padding: 4px 12px 12px; font-size: 13px; line-height: 1.45; color: var(--texto-suave); white-space: pre-line; }

/* ==========================================================================
   TELA 2 — GERADOR
   ========================================================================== */
.gerador-grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 16px; align-items: start;
}
.dica-controle { font-size: 12px; color: var(--texto-suave); line-height: 1.4; margin: 12px 0 0; }

.fila-info { margin-bottom: 8px; font-family: var(--fonte-titulo); color: var(--dourado-claro); }
.fila-acoes { display: flex; gap: 8px; margin-bottom: 8px; }
.fila-acoes .btn-pedra { flex: 1; }
.dica-impressao { font-size: 12px; color: var(--texto-suave); cursor: help; margin: 4px 0 12px; line-height: 1.4; }

/* Folha branca da fila (tela de impressão em fundo branco) */
.folha-branca {
  background: #fff;
  border: 1px solid #cbb98a;
  border-radius: 6px;
  padding: 16px;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.4);
}
.grade-impressao {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.grade-vazia { grid-column: 1 / -1; color: #7a6f55; text-align: center; padding: 40px 10px; font-style: italic; }

/* Item da fila (carta + botões flutuantes) */
.fila-item { position: relative; }
/* Etiqueta do tipo de efeito (modo Checagem) — pílula escura, legível sobre a folha branca */
.fila-etiqueta {
  margin-top: 6px; text-align: center;
  font-family: var(--fonte-titulo); font-size: 12px; font-weight: 700;
  color: var(--dourado-claro); background: linear-gradient(#22203a, #14121f);
  border: 1px solid var(--pedra-borda); border-radius: 6px;
  padding: 3px 6px; line-height: 1.2; word-break: break-word;
}
.fila-item .carta-wrapper { width: 100%; }
.btn-lupa, .btn-remover {
  position: absolute; z-index: 8;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--pedra-borda);
  background: rgba(15,14,23,0.78); color: var(--dourado-claro);
  cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.45; transition: opacity 0.15s, box-shadow 0.15s;
}
.btn-lupa { top: 6px; right: 6px; }
.btn-remover { top: 6px; left: 6px; color: #f0a0a0; }
.fila-item:hover .btn-lupa, .fila-item:hover .btn-remover { opacity: 1; }
.btn-lupa:hover, .btn-remover:hover { box-shadow: 0 0 8px rgba(201,168,76,0.6); }

/* ==========================================================================
   A CARTA — moldura ornamentada (proporção 63×88).
   O interior escala pela LARGURA via unidades cqw (container query width),
   então prévia, fila e impressão ficam sempre proporcionais.
   ========================================================================== */
.carta-wrapper { display: flex; justify-content: center; width: 100%; }
.carta-placeholder { color: var(--texto-suave); text-align: center; padding: 40px 16px; font-style: italic; }

.carta {
  position: relative;
  width: 100%;
  aspect-ratio: 63 / 88;
  container-type: inline-size;    /* habilita cqw internas */
  border-radius: 2.5cqw;
  padding: 1cqw;                  /* moldura FINA */
  background: linear-gradient(150deg, #e8cf82, #b8912f 55%, #7a5c1e);
  box-shadow: 0 4px 14px rgba(0,0,0,0.55), 0 0 8px -2px var(--cor-accent);
  color: #fff; font-family: var(--fonte-texto); overflow: hidden;
}
.carta-epica { box-shadow: 0 0 16px 1px var(--cor-accent), 0 4px 14px rgba(0,0,0,0.55); }

.carta-interior {
  position: relative; width: 100%; height: 100%;
  border-radius: 1.6cqw;
  border: 0.4cqw solid var(--cor-accent);   /* detalhe na cor-tema */
  overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.6)), var(--cor-tema);
}

/* Cantos em filigrana (menores e discretos) */
.carta-canto { position: absolute; width: 7cqw; height: 7cqw; background-size: contain; background-repeat: no-repeat; pointer-events: none; z-index: 6; }
.canto-tl { top: 0.4cqw; left: 0.4cqw; }
.canto-tr { top: 0.4cqw; right: 0.4cqw; transform: scaleX(-1); }
.canto-bl { bottom: 0.4cqw; left: 0.4cqw; transform: scaleY(-1); }
.canto-br { bottom: 0.4cqw; right: 0.4cqw; transform: scale(-1, -1); }

/* Cabeçalho — adaptável a nomes longos (cresce conforme o texto) */
.carta-cabecalho {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 1.4cqw;
  margin: 1cqw 1cqw 0;
  padding: 1.2cqw 1.4cqw;
  background: linear-gradient(#1d1830, #0c0a15);
  border: 0.35cqw solid var(--cor-accent);
  border-radius: 1.2cqw;
  box-shadow: inset 0 0 2cqw rgba(0,0,0,0.7);
}
.carta-icone-tipo {
  flex: 0 0 auto; width: 11cqw; height: 11cqw;
  display: flex; align-items: center; justify-content: center;
  font-size: 6.4cqw; line-height: 1;
  background: radial-gradient(circle at 40% 35%, #2c2444, #0b0912);
  border: 0.4cqw solid var(--cor-accent); border-radius: 50%;
  box-shadow: inset 0 0 1.5cqw rgba(0,0,0,0.8), 0 0 2cqw -0.4cqw var(--cor-accent);
}
.carta-icone-tipo img { width:25px; height:25px; }
.carta-titulo-bloco { flex: 1; min-width: 0; }
.carta-nome {
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: 5.2cqw; line-height: 1.1;
  color: var(--dourado-claro); text-shadow: 0 0.3cqw 0.5cqw #000;
  word-break: break-word;
}
.carta-subtitulo {
  font-family: var(--fonte-titulo); font-size: 3cqw; letter-spacing: 0.4cqw;
  text-transform: uppercase; color: var(--cor-accent); margin-top: 0.5cqw;
}

/* Janela de arte (dominante, como no exemplo) */
.carta-arte {
  position: relative; flex: 5 1 0; min-height: 30cqw;
  margin: 1cqw;
  border: 0.4cqw solid var(--cor-accent); border-radius: 1cqw;
  background-color: var(--cor-tema); background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: inset 0 0 3cqw rgba(0,0,0,0.75);
}
.carta-arte-wm { font-size: 30cqw; line-height: 1; opacity: 0.32; filter: drop-shadow(0 0.5cqw 1cqw rgba(0,0,0,0.85)); }
.carta-arte.com-imagem .carta-arte-wm { display: none; }

/* Linha de tipo (estilo Magic), bordas na cor-tema */
.carta-tipo-linha {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 1.2cqw;
  margin: 0 1cqw; padding: 0.8cqw 1.4cqw;
  background: linear-gradient(#241f38, #100e1a);
  border-top: 0.3cqw solid var(--cor-accent);
  border-bottom: 0.3cqw solid var(--cor-accent);
  font-family: var(--fonte-titulo); font-style: italic; font-size: 3.4cqw;
  color: var(--dourado-claro); text-align: center;
}
.carta-tipo-gema { color: var(--cor-accent); font-style: normal; filter: drop-shadow(0 0 1cqw var(--cor-accent)); }

/* Caixa de texto (pergaminho) — compacta, fonte legível */
.carta-caixa-texto {
  flex: 4 1 0; min-height: 26cqw;
  margin: 1cqw; padding: 1.4cqw 1.8cqw; overflow: hidden;   /* sem rolagem: a impressão não rola */
  background: linear-gradient(#f5eeda, #e2d4b0);
  border: 0.4cqw solid var(--cor-accent); border-radius: 1cqw;
  /* fonte de card game (serifada, legível) + cor escura de alto contraste */
  font-family: 'Alegreya', Georgia, 'Times New Roman', serif;
  font-weight: 500; color: #17110a; line-height: 1.34;
  /* a fonte escala pela largura (cqw) e por um fator de ajuste (--ft) p/ caber */
  font-size: calc(4.6cqw * var(--ft, 1));
  display: flex; flex-direction: column;
  text-align: center;   /* texto centralizado para ficar mais harmônico */
}
.carta-efeito { font-weight: 600; }
.carta-efeito .linha-forte { font-weight: 700; color: #3a2c0e; }
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Sekuya&display=swap');

.carta-efeito { margin-bottom:5px; text-transform: uppercase; font-family: "Sekuya", system-ui;}
.carta-gatilho {
  display: inline-block;
  margin: 0 0 1cqw;
  padding: 0.3cqw 1.2cqw;
  font-family: var(--fonte-titulo);
  font-size: 2.7cqw;
  color: #2a2010;
  background: var(--cor-accent);
  border-radius: 1cqw;
  font-weight: 700;
}
.carta-selo { margin-top: 1cqw; text-align: center; font-weight: 700; color: #6a3b12; font-size: 0.92em; }
.carta-custo {
  margin-top: 1cqw;
  text-align: center; font-weight: 700; font-size: 0.92em; color: #6a4a12;
}
.carta-divisor {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 1cqw; margin: 0 0 2.2cqw;   /* respiro entre EFEITO e o texto */
  font-family: var(--fonte-titulo); font-size: 3cqw; letter-spacing: 0.4cqw; color: #6a5626;
}
.carta-divisor::before, .carta-divisor::after {
  content: ''; flex: 1; height: 0.3cqw;
  background: linear-gradient(90deg, transparent, var(--cor-accent), transparent);
}
.carta-efeito { flex: 0 0 auto; }
.carta-flavor {
  flex: 0 0 auto; margin-top: auto; padding-top: 1.4cqw;   /* fica embaixo, com respiro, sem linha */
  font-family: 'Alegreya', Georgia, serif; font-style: italic; font-weight: 500;
  text-align: center; font-size: 0.82em; color: #5a4a2e; line-height: 1.25;
}

/* Rodapé (na cor-tema) */
.carta-rodape {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  margin: 0.4cqw 1.4cqw 1cqw;
  font-family: var(--fonte-titulo); font-size: 3.1cqw;
  color: var(--cor-accent); text-shadow: 0 0.3cqw 0.5cqw #000;
}

/* ==========================================================================
   CARTA DE PERSONAGEM (identidade por cor-tema, atributos + habilidades)
   ========================================================================== */
.carta-pj {
  background: linear-gradient(150deg, var(--cor-accent), var(--cor-tema) 52%, var(--cor-escura));
  box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 10px -2px var(--cor-accent);
}
.pj-interior {
  border: 0.5cqw solid var(--cor-accent);
  background: linear-gradient(180deg, #14121c, #09070e);
}

.pj-cabecalho {
  flex: 0 0 auto;
  margin: 1cqw 1cqw 0; padding: 1cqw 1.4cqw;
  text-align: center;
  background: linear-gradient(var(--cor-tema), var(--cor-escura));
  border: 0.4cqw solid var(--cor-accent); border-radius: 1.4cqw;
  box-shadow: inset 0 0 2cqw rgba(0,0,0,0.5);
}
.pj-nome {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 5.4cqw; line-height: 1.05;
  color: #fff; text-shadow: 0 0.3cqw 0.6cqw #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pj-frase {
  font-family: 'Alegreya', Georgia, serif; font-style: italic; font-size: 3.9cqw;
  color: rgba(255,255,255,0.9); margin-top: 0cqw;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Área da imagem: ALTURA FIXA (não muda de tamanho entre as cartas) */
.pj-arte {
  flex: 0 0 auto; height: 75cqw; position: relative;
  margin: 1cqw; border-radius: 1cqw; overflow: hidden;
  border: 0.4cqw solid var(--cor-accent);
  background: radial-gradient(circle at 50% 42%, var(--cor-accent), var(--cor-tema) 55%, var(--cor-escura));
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 4cqw rgba(0,0,0,0.55);
}
.pj-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* preenche tudo proporcionalmente */
  object-position: center; /* centraliza o corte */
  filter: drop-shadow(0 1.5cqw 2cqw rgba(0,0,0,0.55));
  zoom: 1.2;
}
.pj-fallback { font-size: 34cqw; opacity: 0.9; filter: drop-shadow(0 0.5cqw 1cqw rgba(0,0,0,0.6)); }
.pj-arte.com-imagem .pj-fallback { display: none; }

.pj-stats {
  flex: 0 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8cqw;
  margin: 0 1cqw;
}
.pj-stat {
  display: flex; flex-direction: column; align-items: center; gap: 0.1cqw;
  padding: 0.6cqw 0.2cqw;
  background: linear-gradient(var(--cor-tema), var(--cor-escura));
  border: 0.3cqw solid var(--cor-accent); border-radius: 1cqw;
  box-shadow: inset 0 0 1cqw rgba(0,0,0,0.5);
}
.pj-stat-ic  { font-size: 3.4cqw; line-height: 1; }
.pj-stat-val { font-family: var(--fonte-titulo); font-weight: 700; font-size: 4.8cqw; color: #fff; text-shadow: 0 0.2cqw 0.4cqw #000; }
.pj-stat-lbl { font-size: 2.1cqw; letter-spacing: 0.2cqw; color: rgba(255,255,255,0.82); }

/* Habilidades: ALTURA FIXA (sempre o mesmo tamanho; a fonte se ajusta p/ caber) */
.pj-habilidades {
  flex: 0 0 auto; height: 34cqw; overflow: hidden;
  margin: auto 1cqw 1cqw; padding: 1.2cqw 1.4cqw;
  background: linear-gradient(#f5eeda, #e2d4b0);
  border: 0.4cqw solid var(--cor-accent); border-radius: 1cqw;
  font-family: 'Alegreya', Georgia, serif; color: #17110a;
  font-size: calc(3.9cqw * var(--ft, 1)); line-height: 1.24;
  display: flex; flex-direction: column; justify-content: center; gap: 1.2cqw;
}
.pj-hab-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1cqw; }
.pj-hab-nome { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.05em; color: var(--cor-escura); }
.pj-hab-desc { font-weight: 500; }
.pj-hab-badge {
  font-size: 0.68em; font-weight: 700; white-space: nowrap;
  padding: 0.2cqw 0.9cqw; border-radius: 0.9cqw; color: #fff;
  background: #555; text-shadow: 0 0.1cqw 0.2cqw rgba(0,0,0,0.6);
}
.pj-hab-badge.t-combate  { background: #9a2828; }
.pj-hab-badge.t-passiva  { background: #38607f; }
.pj-hab-badge.t-especial { background: #5f3088; }

/* ==========================================================================
   CARTA DE PASSAGEM (token de Ficha de Passagem)
   ========================================================================== */
.carta-passagem {
  background: linear-gradient(150deg, #f2dd93, #c9a84c 52%, #7a5c1e);
  box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 10px -2px #e6c96a;
}
.passagem-interior {
  border: 0.5cqw solid #7a5c1e;
  background: radial-gradient(circle at 50% 40%, #3a3120, #120e08);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 4cqw 2cqw;
}
.passagem-nome {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 6.4cqw;
  color: var(--dourado-claro); text-align: center; text-shadow: 0 0.3cqw 0.6cqw #000; line-height: 1.05;
}
.passagem-moeda { width: 44cqw; height: 44cqw; filter: drop-shadow(0 1cqw 2cqw rgba(0,0,0,0.6)); }
.passagem-usos {
  font-family: 'Alegreya', Georgia, serif; font-size: 3.6cqw; color: #efe6cf;
  text-align: center; width: 100%;
}
.passagem-usos div {
  padding: 0.7cqw 0; border-top: 0.3cqw solid rgba(230,201,106,0.35);
}
.passagem-usos div:first-child { border-top: none; font-weight: 700; color: var(--dourado-claro); }

/* ==========================================================================
   MODAL DE PREVIEW GRANDE
   ========================================================================== */
.modal-preview { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal-preview[hidden] { display: none; }
.modal-fundo { position: absolute; inset: 0; background: rgba(0,0,0,0.78); }
.modal-conteudo { position: relative; z-index: 1; width: min(84vw, 360px); }
#modal-carta { width: 100%; }
.modal-fechar {
  position: absolute; top: -16px; right: -16px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--dourado); background: #1a1622; color: var(--dourado-claro);
  font-size: 16px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.modal-fechar:hover { box-shadow: 0 0 12px rgba(201,168,76,0.8); }
.modal-nav-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.modal-nav-bar .btn-pedra { flex: 1; }
.modal-contador { font-family: var(--fonte-titulo); color: var(--dourado-claro); font-size: 14px; min-width: 54px; text-align: center; }

/* ==========================================================================
   RESPONSIVIDADE
   ========================================================================== */
@media (max-width: 1024px) {
  .gerador-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .grade-impressao { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ==========================================================================
   SALA (multiplayer) — modal
   ========================================================================== */
.sala-badge {
  position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--verde-vida); box-shadow: 0 0 5px var(--verde-vida); border: 1px solid #0c0b14;
}
.sala-bloco { margin-bottom: 8px; }
.sala-sub { font-family: var(--fonte-titulo); font-size: 14px; color: var(--dourado); margin: 4px 0 8px; }
.sala-bloco .input-pedra { margin-bottom: 7px; }
.sala-ou { text-align: center; color: var(--texto-suave); font-size: 12px; margin: 10px 0; letter-spacing: 1px; }
.sala-erro { color: #f0a0a0; font-size: 13px; margin: 8px 0 0; }
.sala-nota { font-size: 11px; color: var(--texto-suave); margin-top: 14px; line-height: 1.4; }

.sala-codigo-box {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #14121f; border: 1px solid var(--dourado); border-radius: 8px; padding: 10px; margin-bottom: 14px;
}
.sala-codigo-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--texto-suave); }
.sala-codigo-valor { font-family: var(--fonte-titulo); font-size: 28px; font-weight: 700; color: var(--dourado-claro); letter-spacing: 4px; }

.sala-roster { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sala-jogador {
  display: flex; align-items: center; gap: 8px;
  background: #14121f; border: 1px solid var(--pedra-borda); border-radius: 6px; padding: 7px 10px;
}
.sala-jogador.offline { opacity: 0.5; }
.sala-jog-status { width: 9px; height: 9px; border-radius: 50%; background: var(--verde-vida); box-shadow: 0 0 5px var(--verde-vida); flex: 0 0 auto; }
.sala-jogador.offline .sala-jog-status { background: #6a6a72; box-shadow: none; }
.sala-jog-nome { flex: 1; font-family: var(--fonte-titulo); font-size: 14px; color: var(--texto); }
.sala-jog-host { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--fundo); background: var(--dourado); border-radius: 4px; padding: 1px 6px; font-weight: 700; }

.sala-log { max-height: 160px; overflow-y: auto; background: #100f1a; border: 1px solid var(--pedra-borda); border-radius: 6px; padding: 8px 10px; margin-bottom: 14px; }
.sala-log-linha { font-size: 12px; color: var(--texto-suave); line-height: 1.5; }
.sala-log-linha b { color: var(--dourado-claro); }
.sala-log-hora { color: #6a6a72; font-variant-numeric: tabular-nums; }

.sala-acoes { display: flex; gap: 8px; }
.sala-acoes .btn-pedra { flex: 1; }

.sala-jog-click { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.sala-jog-click:hover { border-color: var(--dourado); box-shadow: 0 0 8px rgba(201,168,76,0.35); }
.sala-jog-ver { font-size: 10px; color: var(--dourado); text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.7; flex: 0 0 auto; }

/* Tela "Mesas dos Jogadores" (espectar) — tela cheia */
.tela-espectar { position: fixed; inset: 0; z-index: 1100; background: radial-gradient(circle at 50% -10%, #211d38, #0b0a12 68%); display: flex; flex-direction: column; overflow: hidden; }
.tela-espectar[hidden] { display: none; }
.espectar-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--pedra-borda); }
.espectar-chip { display: flex; align-items: center; gap: 6px; background: #14121f; color: var(--texto); border: 1px solid var(--pedra-borda); border-radius: 20px; padding: 6px 12px; cursor: pointer; font-family: var(--fonte-titulo); font-size: 13px; }
.espectar-chip.sel { border-color: var(--dourado); background: linear-gradient(#2a2340, #1a1626); color: var(--dourado-claro); box-shadow: 0 0 8px rgba(201,168,76,0.4); }
.espectar-chip.offline { opacity: 0.5; }
.espectar-chip .sala-jog-status { width: 8px; height: 8px; }
.espectar-chip.offline .sala-jog-status { background: #6a6a72; box-shadow: none; }
.espectar-conteudo { flex: 1; overflow-y: auto; padding: 14px; }
.espectar-nome-sel { font-family: var(--fonte-titulo); font-size: 18px; color: var(--dourado); margin-bottom: 12px; }
.espectar-status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 16px; }
.espectar-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #14121f; border: 1px solid var(--pedra-borda); border-radius: 6px; padding: 8px 3px; }
.espectar-tile-v { font-family: var(--fonte-titulo); font-weight: 700; font-size: 16px; color: #fff; text-align: center; }
.espectar-tile-l { font-size: 9px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.3px; text-align: center; }

/* Ver uma carta em tela cheia (somente leitura) */
.carta-cheia-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; }
.carta-cheia-overlay[hidden] { display: none; }
.carta-cheia-fundo { position: absolute; inset: 0; background: rgba(0,0,0,0.92); }
.carta-cheia-alvo { position: relative; z-index: 1; width: min(94vw, calc(82vh * 63 / 88)); }
.carta-cheia-x { position: absolute; top: 14px; right: 16px; z-index: 2; }

/* Diálogo próprio do sistema (confirmar / avisar) */
.modal-dialogo { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; }
.modal-dialogo[hidden] { display: none; }
.modal-dialogo-fundo { position: absolute; inset: 0; background: rgba(0,0,0,0.72); }
.modal-dialogo-caixa {
  position: relative; z-index: 1; width: min(90vw, 340px);
  background: linear-gradient(#1c1a2b, #141220); border: 1px solid var(--dourado);
  border-radius: 12px; padding: 20px 18px 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.7);
  animation: subir-modal 0.18s ease-out;
}
.dialogo-msg { color: var(--texto); font-size: 15px; line-height: 1.45; margin: 0 0 16px; text-align: center; }
.dialogo-acoes { display: flex; gap: 8px; }
.dialogo-acoes .btn-pedra { flex: 1; padding: 10px 0; }

/* ==========================================================================
   MESA / BARALHOS (Fase 1) — ambiente virtual de jogo
   ========================================================================== */
.tela-mesa {
  position: fixed; inset: 0; z-index: 900;
  background: radial-gradient(circle at 50% -10%, #211d38, #0b0a12 68%);
  display: flex; flex-direction: column; overflow: hidden;
}
.tela-mesa[hidden] { display: none; }
.body-ficha.mesa-aberta { overflow: hidden; }

.mesa-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; border-bottom: 2px solid var(--dourado);
  background: linear-gradient(#141322, #0c0b14);
}
.mesa-titulo { font-family: var(--fonte-titulo); color: var(--dourado); font-size: 18px; margin: 0; }

.mesa-barra {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 14px; border-bottom: 1px solid var(--pedra-borda);
}
.mesa-barra > .btn-pedra { padding: 6px 10px; font-size: 13px; }
.mesa-fichas { display: flex; align-items: center; gap: 6px; background: #14121f; border: 1px solid var(--pedra-borda); border-radius: 6px; padding: 3px 8px; }
.mesa-fichas .btn-pedra { width: 26px; height: 26px; padding: 0; font-weight: 700; }
#mesa-fichas-valor { font-family: var(--fonte-titulo); color: var(--dourado); min-width: 18px; text-align: center; }

.mesa-corpo { flex: 1; overflow-y: auto; padding: 8px 12px 14px; }
.mesa-secao { margin-bottom: 10px; }
.mesa-secao-tit {
  font-family: var(--fonte-titulo); color: var(--dourado-claro); font-size: 13px;
  margin: 0 0 7px; text-transform: uppercase; letter-spacing: 1px;
  border-bottom: 1px solid rgba(201,168,76,0.25); padding-bottom: 4px; overflow: hidden;
}
.mesa-dica { font-family: var(--fonte-texto); text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--texto-suave); }
.mesa-cont { float: right; font-family: var(--fonte-texto); font-size: 12px; color: var(--texto-suave); }

/* Baralhos pequenos, como pilhas de cartas vistas de cima (sombra em degraus) */
.mesa-baralhos { display: flex; gap: 10px 14px; flex-wrap: wrap; padding: 6px 4px 12px; }
.mesa-deck { background: none; border: none; padding: 0; width: 60px; position: relative; cursor: pointer; }
.mesa-deck:disabled { cursor: default; }
.mesa-deck-carta {
  aspect-ratio: 63 / 88; border-radius: 6px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--deck-cor) 70%, #ffffff 16%), var(--deck-cor) 60%, #05040a);
  border: 1.5px solid rgba(230,201,106,0.7);
  box-shadow:
    1.5px 1.5px 0 rgba(255,255,255,0.05), 2px 2px 0 #0a0912, 3.5px 3.5px 0 var(--deck-cor),
    4px 4px 0 #0a0912, 5.5px 5.5px 0 var(--deck-cor), 6px 6px 0 #0a0912, 9px 11px 12px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: transform 0.12s;
}
.mesa-deck:hover:not(:disabled) .mesa-deck-carta { transform: translate(-2px, -3px); }
.mesa-deck.vazio .mesa-deck-carta { filter: grayscale(0.85) brightness(0.5); box-shadow: 2px 2px 0 #0a0912, 4px 5px 8px rgba(0,0,0,0.5); }
.mesa-deck-ic { font-size: 20px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7)); }
.mesa-deck-nome { font-family: var(--fonte-titulo); font-weight: 700; font-size: 8.5px; color: #fff; text-shadow: 0 1px 2px #000; text-align: center; line-height: 1.05; }
.mesa-deck-contador {
  position: absolute; top: -5px; right: -5px; z-index: 3;
  background: #14121f; border: 1px solid var(--dourado); color: var(--dourado-claro);
  font-family: var(--fonte-titulo); font-size: 10px; min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}

/* Zonas mão / campo */
.mesa-zona { display: flex; gap: 8px; flex-wrap: wrap; min-height: 30px; align-items: flex-start; }
.mesa-vazia { color: var(--texto-suave); font-style: italic; font-size: 13px; margin: 4px 0; }
.mesa-carta-mini { width: 76px; cursor: grab; transition: transform 0.12s, box-shadow 0.12s; touch-action: none; }
.mesa-carta-mini:hover { transform: translateY(-4px) scale(1.04); }
.mesa-carta-mini:active { cursor: grabbing; }

/* Seção que aceita soltar carta (campo/mão) — destaca quando um arrasto passa por cima */
.mesa-secao-solta { border-radius: 8px; transition: background-color 0.15s, box-shadow 0.15s; padding: 4px 4px 2px; margin: -4px -4px 6px; }
.mesa-secao-solta.zona-alvo { background: rgba(201,168,76,0.1); box-shadow: inset 0 0 0 2px var(--dourado); }

/* Mão em leque (estilo "cartas na mão" de jogos de carta digitais):
   cada carta posicionada em arco via --dx/--dy/--rot definidos no JS. */
.mesa-mao-leque {
  position: relative; display: block;
  height: 128px; padding-top: 10px; margin-bottom: 4px;
}
.mesa-carta-leque {
  position: absolute; left: 50%; top: 10px; width: 82px;
  transform: translateX(calc(-50% + var(--dx, 0px))) translateY(var(--dy, 0px)) rotate(var(--rot, 0deg));
  transition: transform 0.15s ease, z-index 0s;
}
.mesa-carta-leque:hover {
  transform: translateX(calc(-50% + var(--dx, 0px))) translateY(calc(var(--dy, 0px) - 24px)) rotate(0deg) scale(1.12);
  z-index: 99 !important;
}
.mesa-mao-leque .mesa-vazia { position: static; }

/* Carta "fantasma" que segue o dedo/cursor durante o arrasto */
.mesa-drag-ghost {
  position: fixed; z-index: 2000; width: 120px; top: 0; left: 0;
  transform: translate(-50%, -50%) rotate(-4deg);
  pointer-events: none; filter: drop-shadow(0 12px 22px rgba(0,0,0,0.65));
}
.mesa-carta-arrastada { opacity: 0.25; }
body.arrastando-carta { cursor: grabbing; }
body.arrastando-carta, body.arrastando-carta * { user-select: none; -webkit-user-select: none; }

/* Overlays (revelação / detalhe) — TELA CHEIA com a carta o maior possível */
.mesa-overlay { position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.92); }
.mesa-overlay[hidden] { display: none; }
.mesa-overlay-fundo { position: absolute; inset: 0; }
.mesa-overlay-caixa {
  position: relative; z-index: 1; width: min(96vw, 420px); max-height: 96vh;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: transparent; border: none; box-shadow: none; padding: 10px;
}
.mesa-overlay-tit { font-family: var(--fonte-titulo); color: var(--dourado-claro); margin: 0; font-size: 16px; }
.mesa-carta-grande { width: min(90vw, calc(64vh * 63 / 88)); }
.mesa-overlay-acoes { display: flex; flex-direction: column; gap: 8px; width: min(90vw, 320px); }
.mesa-overlay-acoes .btn-pedra { width: 100%; padding: 11px 0; }
#mesa-detalhe-fechar { position: absolute; top: 14px; right: 16px; z-index: 2; }

/* ==========================================================================
   IMPRESSÃO — 9 CARTAS POR A4 (63mm × 88mm), FUNDO BRANCO
   ========================================================================== */
.area-impressao { display: none; }

@media print {
  @page { size: A4 portrait; margin: 0; }

  body { background: #fff; }
  body * { visibility: hidden; }
  #area-impressao, #area-impressao * { visibility: visible; }
  #area-impressao { display: block; position: absolute; top: 0; left: 0; background: #fff; }

  .pagina {
    width: 210mm; height: 297mm; background: #fff;
    display: grid;
    grid-template-columns: repeat(3, 63mm);
    grid-template-rows: repeat(3, 88mm);
    justify-content: space-evenly; align-content: space-evenly;
    page-break-after: always;
  }
  .pagina .carta-wrapper { width: 63mm; height: 88mm; }
  .pagina .carta {
    width: 63mm; height: 88mm;
    border: 0.4pt solid #000;   /* linha de corte */
    border-radius: 0; box-shadow: none;
  }

  /* Garante a impressão de cores/gradientes/imagens (fontes escalam por cqw) */
  #area-impressao, #area-impressao * {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .pagina .carta-nome, .pagina .carta-rodape, .pagina .carta-tipo-linha { text-shadow: none; }
}

/* ==========================================================================
   FICHA — LAYOUT OTIMIZADO PARA CELULAR (tela única, sem rolagem)
   ========================================================================== */
.menu-compacto { padding: 6px 12px; justify-content: space-between; }
.menu-compacto .logo-texto { font-size: 16px; }
.menu-compacto .logo svg { width: 24px; height: 24px; }

/* Ícones de ação no topo (instalar / resetar) */
.menu-acoes { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.icone-topo {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; cursor: pointer;
  color: var(--dourado-claro);
  background: linear-gradient(#26243a, #16151f);
  border: 1px solid var(--pedra-borda); border-top-color: #55536b;
  transition: box-shadow 0.2s, color 0.2s;
}
.icone-topo:hover { box-shadow: 0 0 8px rgba(201,168,76,0.55); color: #fff; }
.icone-topo:active { transform: translateY(1px); }
#btn-instalar { border-color: var(--dourado); color: var(--dourado-claro); box-shadow: 0 0 8px rgba(201,168,76,0.35); }

.body-ficha main { padding: 10px; }
.ficha-mobile {
  max-width: 460px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 9px;
}
.ficha-mobile .painel { margin-bottom: 0; padding: 9px 11px; }

/* Identidade compacta (avatar + classe + seletor + PP) */
.hero-strip {
  display: flex; align-items: center; gap: 10px;
  background: var(--painel-bg);
  border: 1px solid var(--pedra-borda); border-radius: 8px;
  padding: 8px 10px;
  box-shadow: inset 0 0 0 1px rgba(201,168,76,0.15), 0 4px 10px rgba(0,0,0,0.45);
}
.avatar-mini {
  width: 52px; height: 52px; font-size: 30px;
  margin: 0; border-width: 2px; flex: 0 0 auto;
}
.hero-info { flex: 1; min-width: 0; }
.hero-info .classe-nome {
  font-size: 17px; margin: 0 0 4px; line-height: 1.05;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.input-hero { padding: 5px 8px; font-size: 13px; }
.pp-pill {
  flex: 0 0 auto; text-align: center;
  background: #1b1330; border: 1px solid var(--roxo-painel);
  border-radius: 8px; padding: 5px 11px;
  display: flex; flex-direction: column; align-items: center;
}
.pp-pill-val { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; color: var(--dourado-claro); line-height: 1; }
.pp-pill-lbl { font-size: 9px; letter-spacing: 1px; color: var(--texto-suave); }

/* Atributos 2x2 compactos */
.painel-atributos { padding: 9px 10px; }
.stat-grid-2x2 { gap: 8px; }
.stat-grid-2x2 .stat-bloco { padding: 6px; }
.stat-grid-2x2 .stat-label { margin-bottom: 4px; font-size: 10px; }
.stat-grid-2x2 .stat-valor { font-size: 22px; min-width: 34px; }
.stat-grid-2x2 .stepper .btn-pedra { width: 30px; padding: 3px 0; font-size: 16px; }
.stat-grid-2x2 .dado-select { padding: 5px 6px; font-size: 13px; }
.stat-grid-2x2 .dano-bonus { font-size: 11px; margin-top: 3px; min-height: 12px; }

/* Stepper de modificador (+/−) sob os dados de Dano e Movimento */
.mod-linha { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 5px; }
.mod-linha .btn-mod { width: 26px; height: 24px; padding: 0; font-size: 15px; font-weight: 700; line-height: 1; }
.mod-val {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 14px;
  color: var(--dourado-claro); min-width: 26px; text-align: center;
}
.mod-val.flash { animation: flash 0.3s ease-out; }

/* ==========================================================================
   SELEÇÃO DE PERSONAGEM — botão que abre modal com cards (2 por linha)
   ========================================================================== */
.btn-hero-sel {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  text-align: left; cursor: pointer;
}
.btn-hero-sel #hero-sel-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-sel-seta { color: var(--dourado); flex: 0 0 auto; font-size: 12px; }
.btn-hero-sel:hover { border-color: var(--dourado); box-shadow: 0 0 6px rgba(201,168,76,0.4); }

.modal-painel-cheio { max-height: 92vh; }

/* Grade: 2 por linha por padrão; cai para 1 quando a largura não comporta. */
.grade-personagens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 10px;
}

.pj-card {
  display: flex; flex-direction: column; gap: 7px;
  cursor: pointer; color: var(--texto);
  background: #14121f; border: 1px solid var(--pedra-borda); border-radius: 8px;
  padding: 8px; font-family: var(--fonte-texto);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.pj-card:hover { border-color: var(--dourado); box-shadow: 0 0 10px rgba(201,168,76,0.35); }

/* Nome acima da imagem */
.pj-card-nome {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 15px; color: var(--dourado);
  text-align: center; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Imagem retangular do personagem */
.pj-card-img {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--cor-borda, var(--pedra-borda));
  background: radial-gradient(circle at 50% 32%, #2a2340, #0d0c16);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 14px rgba(0,0,0,0.6);
}
.pj-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.pj-card-emoji { font-size: 40px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }

/* 4 quadrados de atributos abaixo da imagem */
.pj-card-stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pj-stat4 {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: #100f1a; border: 1px solid var(--pedra-borda); border-radius: 5px; padding: 4px 2px;
}
.pj-stat4 .v { font-family: var(--fonte-titulo); font-weight: 700; font-size: 13px; color: #fff; line-height: 1; }
.pj-stat4 .l { font-size: 8px; letter-spacing: 0.3px; color: var(--texto-suave); text-transform: uppercase; }

/* Habilidades: só o nome; expande a descrição ao clicar.
   ESCOPADO em .pj-card para não vazar sobre a carta de personagem do gerador
   (.carta-pj usa as mesmas classes .pj-hab-nome / .pj-hab-desc). */
.pj-card-habs { display: flex; flex-direction: column; gap: 4px; }
.pj-card .pj-hab-toggle {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; cursor: pointer;
  background: #100f1a; border: 1px solid var(--pedra-borda); border-radius: 5px;
  padding: 5px 7px; color: var(--texto); font-family: var(--fonte-texto);
}
.pj-card .pj-hab-toggle:hover { border-color: var(--dourado); }
.pj-card .pj-hab-nome {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 11.5px; color: var(--texto);
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pj-card-habs .badge { font-size: 9px; padding: 1px 6px; flex: 0 0 auto; }
.pj-card .pj-hab-seta { color: var(--dourado); font-size: 10px; flex: 0 0 auto; transition: transform 0.15s; }
.pj-card .pj-hab-toggle.aberto .pj-hab-seta { transform: rotate(180deg); }
.pj-card .pj-hab-desc { font-size: 10.5px; color: var(--texto-suave); line-height: 1.3; padding: 5px 8px 2px; }
.pj-card .pj-hab-desc[hidden] { display: none; }

/* Tracker de PV (dano/cura rápidos) */
.painel-pv { padding: 9px 11px; }
.pv-topo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.pv-topo .stat-label { margin: 0; }
.pv-texto-inline { font-family: var(--fonte-titulo); font-weight: 700; color: #fff; font-size: 15px; }
.pv-texto-inline.flash { animation: flash 0.3s ease-out; }
.painel-pv .pv-barra-externa { margin-bottom: 8px; height: 22px; }
.pv-controles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.btn-pv { padding: 8px 0; font-size: 14px; font-weight: 700; }
.btn-pv-dano { color: #f0b8b8; border-color: #6e2626; }
.btn-pv-dano:hover { box-shadow: 0 0 8px rgba(192,57,43,0.6); color: #fff; }
.btn-pv-cura { color: #b8e6c4; border-color: #2c5a3a; }
.btn-pv-cura:hover { box-shadow: 0 0 8px rgba(59,165,93,0.6); color: #fff; }

/* Recursos (ouro / fichas / elevação) */
.recursos-linha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.recurso-tile {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--painel-bg); border: 1px solid var(--pedra-borda);
  border-radius: 8px; padding: 8px 6px;
  box-shadow: inset 0 0 0 1px rgba(201,168,76,0.12), 0 3px 8px rgba(0,0,0,0.4);
}
.recurso-ic { font-size: 18px; line-height: 1; }
.recurso-val { font-family: var(--fonte-titulo); font-size: 20px; font-weight: 700; color: var(--dourado); min-width: 26px; text-align: center; }
.recurso-lbl { font-size: 10px; letter-spacing: 0.4px; color: var(--texto-suave); text-transform: uppercase; text-align: center; }
.recurso-ouro { cursor: pointer; font: inherit; text-align: center; }
.recurso-ouro:hover { box-shadow: 0 0 8px rgba(201,168,76,0.5); }
.recurso-ouro .recurso-val { color: var(--dourado-claro); }
.mini-stepper { display: flex; align-items: center; gap: 5px; }
.mini-stepper .btn-pedra { width: 26px; height: 26px; padding: 0; font-size: 15px; font-weight: 700; }

/* Botões que abrem modais */
.acoes-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acoes-linha-3 { grid-template-columns: repeat(3, 1fr); }
.acoes-linha-3 .btn-acao { font-size: 12.5px; padding: 11px 2px; }
.btn-acao { padding: 11px 0; font-family: var(--fonte-titulo); font-size: 14px; }

/* Modais da ficha (folha deslizante inferior, com rolagem interna) */
.modal-ficha { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; }
.modal-ficha[hidden] { display: none; }
.modal-ficha-fundo { position: absolute; inset: 0; background: rgba(0,0,0,0.75); }
.modal-ficha-painel {
  position: relative; z-index: 1; width: 100%; max-width: 460px;
  max-height: 86vh; display: flex; flex-direction: column;
  background: linear-gradient(#1a1826, #12111c);
  border: 1px solid var(--dourado); border-bottom: none;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -6px 30px rgba(0,0,0,0.7);
  animation: subir-modal 0.22s ease-out;
}
@keyframes subir-modal { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-ficha-topo { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 0; }
.modal-ficha-topo .painel-titulo { margin: 0; border: none; padding: 0; }
.modal-ficha-x {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--pedra-borda); background: #22202f; color: var(--dourado-claro);
  font-size: 15px; cursor: pointer; flex: 0 0 auto;
}
.modal-ficha-x:hover { box-shadow: 0 0 10px rgba(201,168,76,0.6); }
.modal-ficha-corpo { padding: 14px 16px 22px; overflow-y: auto; }
.body-ficha.modal-aberto { overflow: hidden; }

/* Ouro dentro do modal */
#gold-valor-modal { display: block; text-align: center; margin-bottom: 12px; }
.gold-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.cobranca-nota {
  margin-top: 14px; padding: 10px 12px; font-size: 12px; line-height: 1.45;
  color: var(--texto-suave); background: #14121f;
  border: 1px solid var(--pedra-borda); border-left: 3px solid var(--dourado);
  border-radius: 6px;
}
.cobranca-nota strong { color: var(--dourado); }

/* Em telas largas (desktop) a ficha fica como uma coluna central enquadrada */
@media (min-width: 640px) {
  .ficha-mobile { gap: 11px; }
}
#referencia-regras p { margin:0px; }