/* =========================================================================
   Gerador de Aventuras: estilos proprios da pagina (page-gerador.php).
   Tudo o que e componente de mesa (capa, carimbo, campo de ficha, botao)
   ja vive em base.css e e reutilizado sem variante nova, exceto onde
   anotado. Tokens de CONTEXTO/DESIGN respeitados: nenhuma cor nova,
   movimento so de opacidade e transform, --ease ease-out-quart.

   Spec: Sites/mesaderpg/gerador de aventuras/CONTEXTO-FRONTEND-
   gerador-aventuras.md §6.
   ========================================================================= */

/* ---------- Hero ------------------------------------------------------ */

.gerador-hero h1 {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: var(--wd-comprimido);
  text-transform: uppercase;
  font-size: var(--t-xl);
  line-height: var(--entrelinha-titulo);
  margin: var(--e-3) 0;
}

.gerador-exemplo {
  margin: var(--e-6) 0 0;
}

/* ---------- Formulario ------------------------------------------------ */

.gerador-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--e-5);
  max-width: 60rem;
}

/* A ambientacao pede linha inteira porque carrega a dica dinamica. */
.gerador-form__ambientacao { grid-column: 1 / -1; }

.gerador-form__acoes {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--e-3);
  justify-items: start;
}

.gerador-form__acoes .botao--largo { min-width: min(100%, 20rem); }

/* Honeypot: presente no DOM para bots que mapeiam o formulario, fora da tela
   e fora da tabulacao (o input leva tabindex="-1" no template). */
.gerador-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Area de resultado ----------------------------------------- */

/* Altura minima reservada: troca de estado sem salto de layout (CLS). */
.gerador-resultado {
  min-height: 14rem;
}

@keyframes gerador-surge {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.gerador-estado:not([hidden]) {
  animation: gerador-surge var(--dur-media) var(--ease);
}

/* Cursor de datilografo: bloco Courier piscante por steps() de opacidade. */
.gerador-caret {
  font-family: var(--f-rotulo);
  font-size: var(--t-lg);
  line-height: 1;
  color: var(--texto-suave);
  animation: gerador-pisca 1s steps(2, start) infinite;
}

@keyframes gerador-pisca {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ---------- Ficha gerada ----------------------------------------------- */

.gerador-ficha .capa {
  max-width: 46rem;
}

/* Carimbo ONE-SHOT bate depois da capa entrar: opacidade mais 1 grau de
   rotação em torno do angulo natural do carimbo (-2,2deg). */
.gerador-cap .carimbo { transform: rotate(-2.2deg); }

@keyframes gerador-carimbo-bate {
  from { opacity: 0; transform: rotate(-3.4deg); }
  to   { opacity: 1; transform: rotate(-2.2deg); }
}

.gerador-cap .gerador-selo {
  opacity: 0;
  animation: gerador-carimbo-bate var(--dur-lenta) var(--ease) 160ms forwards;
}

/* Sequencia de revelacao das secoes: so opacidade, atraso escalonado
   aplicado inline pelo JS. Sem gerador-on, a secao fica invisivel. */
.gerador-anim {
  opacity: 0;
}

.gerador-anim.gerador-on {
  opacity: 1;
  transition: opacity var(--dur-lenta) var(--ease);
}

.gerador-secao {
  margin-top: var(--e-5);
  max-width: 46rem;
}

/* Prosa da ficha: corpo Literata, nao o display pesado do campo__valor. */
.gerador-prosa {
  font-family: var(--f-corpo);
  font-size: var(--t-base);
  line-height: var(--entrelinha-corpo);
  color: var(--texto);
  margin: var(--e-2) 0 0;
}

/* Listas com reguas, como linhas de ficha de manual. */
.gerador-lista {
  list-style: none;
  margin: var(--e-2) 0 0;
  padding: 0;
}

.gerador-lista li {
  font-family: var(--f-corpo);
  font-size: var(--t-base);
  line-height: 1.55;
  padding: var(--e-2) 0;
  border-top: 1px solid var(--regua);
}

ol.gerador-lista {
  counter-reset: cena;
}

ol.gerador-lista li {
  counter-increment: cena;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: var(--e-2);
}

ol.gerador-lista li::before {
  content: counter(cena, decimal-leading-zero);
  font-family: var(--f-rotulo);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--texto-suave);
  padding-top: 0.15em;
}

/* Aviso do modo degradado. */
.gerador-degradado {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
  font-family: var(--f-corpo);
  color: var(--texto-suave);
  margin: var(--e-3) 0;
}

/* ---------- Acoes sobre o resultado ------------------------------------ */

.gerador-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-5);
}

#gerador-status {
  font-family: var(--f-rotulo);
  font-size: var(--t-xs);
  color: var(--texto-suave);
}

.gerador-conselho {
  font-family: var(--f-rotulo);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--link);
}

/* ---------- Biblioteca local ------------------------------------------- */

.gerador-biblioteca {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--e-5);
  margin-top: var(--e-5);
}

.gerador-biblioteca__titulo {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: var(--wd-expandido);
  text-transform: uppercase;
  font-size: var(--t-md);
  border-bottom: 3px double var(--regua-forte);
  padding-bottom: var(--e-2);
}

.gerador-lista-biblioteca {
  list-style: none;
  margin: var(--e-3) 0 0;
  padding: 0;
}

.gerador-biblioteca__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e-2) var(--e-3);
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--regua);
}

/* Prateleira (fix 2 da passada de jogo): mini-capa do tema + metadado.
   O hover levanta a capa 2px (transform permitido); toque >= 44px mantido. */
.gerador-prateleira {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  background: none;
  border: 0;
  padding: var(--e-1) 0;
  min-height: 44px;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.gerador-prateleira .capa--miniatura {
  flex: 0 0 auto;
  width: 56px;
  transition: transform var(--dur-rapida) var(--ease);
}

.gerador-prateleira:hover .capa--miniatura,
.gerador-prateleira:focus-visible .capa--miniatura {
  transform: translateY(-2px);
}

.gerador-prateleira .capa--miniatura .capa__titulo {
  font-size: clamp(0.62rem, 0.5rem + 0.3vw, 0.78rem);
  overflow-wrap: anywhere;
}

.gerador-biblioteca__meta {
  font-family: var(--f-rotulo);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  text-transform: uppercase;
}

.gerador-remover {
  background: none;
  border: 0;
  padding: var(--e-2) var(--e-2) var(--e-2) var(--e-3);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: var(--f-rotulo);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-suave);
  cursor: pointer;
  align-self: center;
}

.gerador-remover:hover { color: var(--link); }

.gerador-remover:hover { color: var(--link); }

/* ---------- Movimento reduzido ------------------------------------------
   Tudo aparece direto: sem sequencia, sem carimbo batendo, sem cursor. */

@media (prefers-reduced-motion: reduce) {
  .gerador-estado:not([hidden]) { animation: none; }
  .gerador-caret { animation: none; }
  .gerador-anim { opacity: 1; }
  .gerador-anim.gerador-on { transition: none; }
  .gerador-cap .gerador-selo { animation: none; opacity: 1; }
}

/* ---------- Impressao (Exportar PDF) ------------------------------------
   A folha mostra apenas a ficha, no tema claro, com tinta preta sobre papel
   branco: navegadores descartam fundos por padrao, entao a capa solida vira
   moldura preta com texto preto, legivel em qualquer configuracao. */

@media print {
  .topo,
  .rodape,
  .trilha,
  .zap,
  .botao-tema,
  #gerador-form,
  .gerador-acoes,
  .gerador-biblioteca,
  #gerador-vazio,
  #gerador-carregando,
  #gerador-erro,
  .secao__cabeca {
    display: none !important;
  }

  body { background: #fff; }

  .envelope { max-width: none; padding: 0; margin: 0; }

  .secao { margin-top: 0; }

  .gerador-resultado { min-height: 0; }

  .gerador-ficha .capa {
    background: #fff !important;
    color: #000;
    border: 2px solid #000;
    aspect-ratio: auto;
    break-inside: avoid;
  }

  .gerador-ficha .capa::before { display: none; }

  .gerador-ficha .capa__titulo,
  .gerador-ficha .capa__rodape,
  .gerador-ficha .campo__rotulo,
  .gerador-ficha .gerador-prosa,
  .gerador-ficha .gerador-degradado {
    color: #000;
  }

  .gerador-ficha .capa__rodape { border-color: #000; }

  .gerador-ficha .carimbo {
    color: #000;
    border-color: #000;
    background: none;
    animation: none;
    opacity: 1;
  }

  /* Primeira pagina compoe capa + premissa inteiras: e o frame que vira screenshot. */
  .gerador-secao { break-inside: avoid; }

  .gerador-anim { opacity: 1; }
}

/* =========================================================================
   Revisão UI/UX aplicada (23/08/2026), fixes numerados conforme
   NOTAS-IMPLEMENTACAO-gerador.md seção 7.
   ========================================================================= */

/* Fix 2: mensagem de validação junto ao campo, no tom de erro do tema
   (o mesmo --link que o componente .erro usa; nunca vermelho inventado). */
.gerador-erro-campo {
  color: var(--link);
  font-weight: 700;
}

select[aria-invalid="true"] {
  border-color: var(--regua-marca);
}

/* Fix 3: o título da ficha recebe foco programático; sem anel, porque não é
   um controle interativo e o anel aqui só adicionaria ruído visual. */
.gerador-ficha .capa__titulo:focus {
  outline: none;
}

/* Fix 4: alvos de toque com pelo menos 44px na biblioteca.
   (A regra completa da prateleira está no bloco da biblioteca acima.) */
.gerador-remover {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Fix 5: anel de foco padronizado em todo controle custom da página
   (os selects herdam o foco novo do campo-entrada no base.css). */
.gerador-form .botao:focus-visible,
.gerador-acoes .botao:focus-visible,
.gerador-estado .botao:focus-visible,
.gerador-prateleira:focus-visible,
.gerador-remover:focus-visible,
.gerador-demo-botao:focus-visible,
.gerador-conselho:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

/* Fix 10: medida de leitura do DESIGN (68ch) na prosa e nas listas. */
.gerador-prosa,
.gerador-lista li {
  max-width: var(--medida);
}

/* Fix 11: no movimento reduzido o cursor piscante sai de cena; o texto
   "Pode levar até um minuto" já comunica a espera sozinho. */
@media (prefers-reduced-motion: reduce) {
  .gerador-caret { display: none; }
}

/* =========================================================================
   Passada de game design (23/08/2026): juice dentro da lei do DESIGN.
   Tudo aqui e opacidade e transform, 120 a 240ms, aria-hidden no JS.
   ========================================================================= */

/* Espera narrada: passo atual do sorteio (troca com crossfade via JS). */
.gerador-passos {
  font-family: var(--f-rotulo);
  font-size: var(--t-sm);
  color: var(--texto-suave);
  min-height: 1.6em;
  margin: var(--e-2) 0 0;
  transition: opacity var(--dur-media) var(--ease);
}

/* Dica dinamica: crossfade na troca (JS controla a opacidade). */
#gerador-dica { transition: opacity var(--dur-media) var(--ease); }

/* Estilhaco de glifos ao bater o carimbo ONE-SHOT. Cada glifo parte do
   centro do carimbo para o seu (--dx,--dy), escala e some em 240ms. */
.gerador-estilhaco {
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 20px;
  color: var(--c-papel);
  pointer-events: none;
  opacity: 0;
  transform: translate(0, 0) scale(0.4);
  animation: gerador-estilhaco-sai 240ms var(--ease) forwards;
}

.gerador-estilhaco svg { width: 100%; height: 100%; display: block; }

@keyframes gerador-estilhaco-sai {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  25%  { opacity: 0.95; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.05); }
}

/* Botao Gerar afunda 1px no aperto: confirmacao fisica de toque. */
.gerador-form .botao:not([disabled]):active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .gerador-estilhaco { display: none; }
  .gerador-passos { transition: none; }
  #gerador-dica { transition: none; }
  .gerador-form .botao:not([disabled]):active { transform: none; }
  .gerador-prateleira .capa--miniatura { transition: none; }
}

/* ---------- Fase A: atos da visão original ------------------------------
   Cabeçalho de ato entre grupos de seções; selo de resultado no ATO IV;
   seções opcionais levam asterisco no rótulo (vinda do JS). */

.gerador-ato {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
  margin-top: var(--e-6);
  padding-bottom: var(--e-2);
  border-bottom: 3px double var(--regua-forte);
}

.gerador-ato:first-of-type { margin-top: var(--e-5); }

.gerador-ato > span:first-child {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: var(--wd-expandido);
  text-transform: uppercase;
  font-size: var(--t-md);
}

.gerador-resultado-selo {
  transform: rotate(1.6deg);
}

.gerador-secao.gerador-opcional .campo__rotulo {
  color: var(--texto-tenue);
}

/* ---------- Regeneração por item (ajustes Tai, 23/08/2026) ------------- */

.gerador-cabeca-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}

.gerador-regen-item {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--regua);
  color: var(--texto-suave);
  cursor: pointer;
  transition: color var(--dur-rapida) var(--ease), border-color var(--dur-rapida) var(--ease);
}

.gerador-regen-item:hover { color: var(--link); border-color: var(--regua-marca); }

.gerador-regen-item:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

.gerador-regen-item[disabled] { opacity: 0.45; cursor: not-allowed; }