/* ============================================================
   Paginas da revistinha. Tudo em mm: o que aparece na tela e
   exatamente o que sai na impressora.
   A5 = 148.5 x 210 mm (metade de um A4 deitado)
   ============================================================ */

.pagina {
  --cor1: #5a4ec7;
  --cor2: #f0a500;
  --clara: #f1eefb;
  --fonte-titulo: 'Baloo 2', system-ui, sans-serif;
  --fonte-texto: 'Fredoka', system-ui, sans-serif;

  position: relative;
  width: 148.5mm;
  height: 210mm;
  padding: 11mm 10mm 9mm;
  box-sizing: border-box;
  background: #fff;
  color: #222;
  font-family: var(--fonte-texto);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.pagina--espalhada { width: 297mm; padding: 8mm; }

/* ---------------------------------------------------- comuns */
.p-cabeca { text-align: center; margin-bottom: 4mm; flex: none; }
.p-titulo {
  font-family: var(--fonte-titulo);
  font-size: 9mm; line-height: 1.05; margin: 0;
  color: var(--cor1); letter-spacing: .2px;
}
.p-sub { margin: 1.5mm 0 0; font-size: 3.4mm; color: #5b6470; line-height: 1.25; }

.p-rodape {
  flex: none; margin-top: auto; padding-top: 2mm;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 2.7mm; color: #9aa3ad; border-top: .4mm dotted #d7dce2;
}

/* Todo lugar de imagem e um .espaco: a classe do lugar define tamanho e
   posicao, o conteudo dentro sempre preenche. */
.espaco { position: relative; display: block; overflow: hidden; }
.espaco > .foto { display: block; width: 100%; height: 100%; object-fit: contain; }
.espaco > .vazio { width: 100%; height: 100%; }
.vazio {
  display: flex; align-items: center; justify-content: center;
  border: .6mm dashed #c8ced6; border-radius: 3mm;
  background: repeating-linear-gradient(45deg, #fafbfc 0 3mm, #f2f4f7 3mm 6mm);
  color: #97a0aa; font-size: 3mm; text-align: center; padding: 2mm;
  box-sizing: border-box;
}

/* Botao de troca: some na impressao e nao encolhe junto com o zoom da previa. */
.trocar {
  position: absolute; top: 1mm; right: 1mm; z-index: 9;
  width: 22px; height: 22px; padding: 0; line-height: 1;
  border: 0; border-radius: 7px; cursor: pointer;
  background: rgba(30, 36, 48, .82); color: #fff;
  font: 700 13px/1 'Nunito', system-ui, sans-serif;
  opacity: 0; transition: opacity .12s ease;
  transform-origin: top right;
  transform: scale(calc(1 / var(--escala, 1)));
}
.espaco:hover > .trocar, .trocar:focus-visible { opacity: 1; }
.espaco:hover { outline: 2px solid var(--cor1); outline-offset: -1px; }

/* Em tela de toque nao ha hover: o botao fica sempre visivel. Nas figuras
   pequenas ele taparia o desenho, entao sai de cena e sobra uma borda
   tracejada - o toque vale na figura inteira de qualquer jeito.
   O "and (pointer: coarse)" e para isso nao valer na impressao, onde o
   navegador tambem responde `hover: none`. */
@media (hover: none) and (pointer: coarse) {
  .trocar { opacity: .92; width: 26px; height: 26px; font-size: 15px; }
  .espaco:hover { outline: none; }
  .espaco--pequeno > .trocar { display: none; }
  .espaco--pequeno[data-slot] {
    outline: .5mm dashed var(--cor1); outline-offset: -.5mm; border-radius: 1.5mm;
  }
}

/* ---------------------------------------------------- capa */
/* Nas tres variacoes a arte sangra na pagina inteira e o texto vem por cima. */
.pagina--capa { padding: 0; justify-content: center; align-items: center; text-align: center; }

.capa-fundo { position: absolute; inset: 0; z-index: 0; }
.capa-fundo > .capa-arte { width: 100%; height: 100%; border-radius: 0; }
.capa-fundo .foto { object-fit: cover; }
.capa-fundo .vazio { border-radius: 0; }
/* Só a camada — sem mexer no position, senão o painel absoluto vira relativo. */
.pagina--capa > *:not(.capa-fundo) { z-index: 2; }

.capa-chamada {
  margin: 0 0 2.5mm; font-size: 3.4mm; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--cor1); font-weight: 700;
}
.capa-nome {
  font-family: var(--fonte-titulo);
  font-size: 17mm; line-height: .95; margin: 0;
  color: var(--cor1); word-break: break-word;
}
.capa-sub { margin: 2.5mm 0 0; font-size: 4.2mm; color: #46515e; }

.capa-idade {
  position: absolute; right: 9mm; bottom: 9mm; z-index: 3;
  width: 24mm; height: 24mm; border-radius: 50%;
  background: var(--cor2); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1.4mm #fff;
  transform: rotate(-8deg);
}
.capa-idade strong { font-family: var(--fonte-titulo); font-size: 11mm; line-height: .85; }
.capa-idade span { font-size: 3mm; text-transform: uppercase; letter-spacing: 1px; }

/* painel claro sobre a arte */
.capa-painel {
  position: absolute; left: 8mm; right: 8mm; top: 9mm;
  background: rgba(255, 255, 255, .93);
  border-radius: 5mm; padding: 7mm 6mm 6mm;
  box-shadow: 0 2mm 6mm rgba(20, 28, 40, .16);
}
.capa-painel--baixo { top: auto; bottom: 9mm; }

/* medalha central: fica no fluxo, centralizada pelo flex da página */
.capa-medalha {
  position: relative;
  background: rgba(255, 255, 255, .95);
  border: 1.4mm solid var(--cor1);
  border-radius: 50%;
  width: 104mm; height: 104mm;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8mm; box-sizing: border-box;
  box-shadow: 0 2mm 8mm rgba(20, 28, 40, .2);
}
.capa-medalha .capa-nome { font-size: 15mm; }
.capa-medalha .capa-sub { font-size: 3.8mm; }

/* ---------------------------------------------------- contracapa */
.pagina--contracapa {
  align-items: center; justify-content: center; text-align: center;
  background: var(--clara); padding: 16mm 12mm;
}
.fim-selo {
  width: 62mm; height: 62mm; border-radius: 50%; overflow: hidden;
  background: #fff; padding: 3mm; box-sizing: border-box;
  border: 1.2mm solid var(--cor1); margin-bottom: 8mm;
}
.fim-selo .espaco { width: 100%; height: 100%; border-radius: 50%; }
.fim-titulo { font-family: var(--fonte-titulo); font-size: 12mm; color: var(--cor1); margin: 0 0 4mm; }
.fim-texto { font-size: 4.6mm; line-height: 1.5; margin: 0; max-width: 105mm; }
.fim-data { margin: 4mm 0 0; font-size: 4mm; color: #6b7480; }
.fim-linha { width: 40mm; height: .8mm; background: var(--cor2); border-radius: 1mm; margin: 8mm 0; }
.fim-assina { font-family: var(--fonte-titulo); font-size: 5.4mm; color: #3c4652; margin: 0; }
.fim-credito { margin-top: auto; font-size: 3.2mm; color: #98a1ab; }

/* ---------------------------------------------------- colorir */
.colorir-caixa {
  flex: 1; display: flex; align-items: center; justify-content: center;
  border: 1mm solid var(--cor1); border-radius: 4mm; padding: 4mm; overflow: hidden;
}
.colorir-caixa .espaco { width: 100%; height: 100%; }

/* ---------------------------------------------------- caca-palavras */
.cp-grade {
  display: grid; gap: .6mm; margin: 0 auto;
  width: 118mm; flex: none;
}
.cp-letra {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-family: 'Courier New', monospace; font-weight: 700;
  font-size: 4.6mm; color: #1f2933;
  background: var(--clara); border-radius: 1mm;
}
.cp-lista {
  list-style: none; margin: 6mm 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.4mm 4mm;
  font-size: 4mm; font-weight: 600; color: #2c3540;
}
.cp-lista li { display: flex; align-items: center; gap: 2mm; }
.cp-marca {
  width: 4mm; height: 4mm; flex: none;
  border: .5mm solid var(--cor1); border-radius: 1mm;
}

/* ---------------------------------------------------- cruzadas */
.cz-area { display: flex; justify-content: center; margin-bottom: 5mm; flex: none; }
.cz-grade { display: grid; gap: .5mm; }
.cz-cel {
  position: relative; background: #fff;
  border: .45mm solid #2f3944; border-radius: .8mm;
}
.cz-cel i {
  position: absolute; top: .3mm; left: .6mm;
  font-size: 2.2mm; font-style: normal; font-weight: 700; color: var(--cor1);
}
.cz-nada { background: transparent; }
.cz-dicas {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm 2.5mm;
}
.cz-dica { text-align: center; }
.cz-num {
  display: inline-block; font-size: 3.2mm; font-weight: 700;
  color: #fff; background: var(--cor1); border-radius: 2mm;
  padding: .4mm 1.6mm; margin-bottom: 1mm;
}
.cz-figura { width: 100%; height: 18mm; border-radius: 2mm; }
.cz-dica .espaco { margin: 0 auto; }
.cz-tracos { display: block; font-size: 3mm; letter-spacing: .4mm; color: #55606c; margin-top: .6mm; }

/* ---------------------------------------------------- labirinto */
.lb-caixa { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.lb-svg { width: 118mm; height: auto; }
.lb-svg line { stroke: #2f3944; stroke-width: 1.1; stroke-linecap: round; }
.lb-ponta { position: absolute; width: 17mm; height: 17mm; }
.lb-ponta--entra { left: 0; top: 4mm; }
.lb-ponta--sai { right: 0; bottom: 4mm; }
.lb-arte { width: 100%; height: 100%; }

/* ---------------------------------------------------- ligue os pontos */
.pt-caixa { flex: 1; display: flex; align-items: center; justify-content: center; }
.pt-svg { width: 120mm; height: 120mm; }
.pt-bola { fill: #2f3944; }
.pt-num { font-size: 3.6px; fill: var(--cor1); font-weight: 700; font-family: var(--fonte-texto); }
.pt-resposta {
  text-align: center; font-size: 3.4mm; color: #98a1ab;
  border-top: .4mm dotted #d7dce2; padding-top: 2.5mm; margin: 2mm 0 0;
}

/* ---------------------------------------------------- ache os erros */
.df-quadro {
  position: relative; flex: 1; margin-bottom: 3mm;
  border: .9mm solid var(--cor1); border-radius: 3mm;
  background: var(--clara); overflow: hidden;
}
.df-rotulo {
  position: absolute; top: 1.5mm; left: 2mm; z-index: 3;
  font-family: var(--fonte-titulo); font-size: 5mm; color: var(--cor1);
}
.df-peca { position: absolute; object-fit: contain; }

/* ---------------------------------------------------- desenho livre */
.dl-moldura {
  flex: 1; position: relative;
  border: 1mm dashed var(--cor1); border-radius: 4mm; background: #fff;
}
.dl-dica { position: absolute; right: 4mm; bottom: 4mm; width: 26mm; height: 26mm; opacity: .5; }
.dl-legenda { text-align: center; font-size: 3.6mm; color: #6b7480; margin: 4mm 0 0; }

/* ---------------------------------------------------- dado e peoes */
.dd-caixa { display: flex; justify-content: center; flex: none; }
.dd-svg { width: 72mm; height: auto; display: block; flex: none; }
.dd-corte { fill: #fff; stroke: #2f3944; stroke-width: .8; stroke-linejoin: round; }
.dd-dobra { stroke: var(--cor1); stroke-width: .5; stroke-dasharray: 2.2 1.8; opacity: .8; }

.dd-legenda {
  display: flex; align-items: center; justify-content: center; gap: 1.5mm;
  font-size: 2.8mm; color: #7d8791; margin: 2mm 0 0;
}
.dd-chave { display: inline-block; width: 7mm; height: 0; }
.dd-chave--corte { border-top: .6mm solid #2f3944; }
.dd-chave--dobra { border-top: .6mm dashed var(--cor1); }

.pn-titulo {
  font-family: var(--fonte-titulo); font-size: 5.4mm; color: var(--cor1);
  text-align: center; margin: 5mm 0 3mm; flex: none;
}
.pn-fila { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; flex: none; }
.pn-peca {
  border: .6mm dashed #2f3944; border-radius: 2mm;
  padding: 1.5mm; display: flex; flex-direction: column; align-items: center;
}
.pn-metade { width: 100%; height: 15mm; }
/* A dobra e a ARESTA de cima do peao em pe: cada metade pende para um lado.
   Logo a metade de cima do papel e a que aparece de cabeca para baixo. */
.pn-metade--cima { transform: rotate(180deg); }
.pn-arte { width: 100%; height: 100%; }
.pn-dobra {
  width: 100%; border-top: .5mm dashed var(--cor1);
  text-align: center; font-size: 2.2mm; color: var(--cor1); margin: 1mm 0;
}
.dd-aviso { text-align: center; font-size: 3mm; color: #98a1ab; margin: auto 0 0; line-height: 1.35; }

/* ---------------------------------------------------- tabuleiro (A4 deitado) */
/* A pista tem tamanho fixo e o viewBox do SVG e igual: 1 unidade = 1 mm.
   Assim da para posicionar HTML por cima usando as mesmas coordenadas. */
.pagina--tabuleiro {
  display: grid;
  grid-template-columns: 205mm 1fr;
  grid-template-rows: 22mm 160mm;
  gap: 4mm;
  background: var(--clara);
}
.tb-topo { grid-column: 1 / -1; text-align: center; position: relative; }
.tb-titulo { font-family: var(--fonte-titulo); font-size: 11mm; color: var(--cor1); margin: 0; line-height: 1; }
.tb-sub { margin: 1mm 0 0; font-size: 4mm; color: #5b6470; }

.tb-pista { position: relative; width: 205mm; height: 160mm; }
.tb-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.tb-contorno { fill: none; stroke: var(--cor1); stroke-width: 28.5; stroke-linecap: round; stroke-linejoin: round; }
.tb-trilho { fill: none; stroke: #fff; stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }
.tb-divisa { stroke: var(--cor1); stroke-width: .7; opacity: .5; }

.tb-svg text { font-family: var(--fonte-texto); }
.tb-txt-num { font-family: var(--fonte-titulo); font-size: 9px; fill: var(--cor1); }
.tb-txt-mini { font-family: var(--fonte-titulo); font-size: 4px; fill: var(--cor1); opacity: .75; }
.tb-txt-acao { font-size: 3.1px; font-weight: 700; fill: #2c3540; }
.tb-txt-marco { font-family: var(--fonte-titulo); font-size: 4.4px; fill: #fff; }
.tb-txt-quiz { font-family: var(--fonte-titulo); font-size: 11px; fill: var(--cor2); }
.tb-txt-quiznum { font-size: 2.7px; font-weight: 700; fill: #6b7480; }

.tb-marco--inicio { fill: var(--cor1); }
.tb-marco--fim { fill: var(--cor2); }
.tb-bolha { fill: #fff8e6; stroke: var(--cor2); stroke-width: .7; }
.tb-bolha--quiz { fill: #fff; stroke: var(--cor2); stroke-width: .7; stroke-dasharray: 2 1.4; }

.tb-camada { position: absolute; inset: 0; }
.tb-fig { position: absolute; transform: translate(-50%, -46%); }
.tb-arte { width: 20mm; height: 20mm; }

.tb-regras {
  background: #fff; border-radius: 4mm; border: 1mm solid var(--cor2);
  padding: 5mm; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column;
}
.tb-regras h3 { font-family: var(--fonte-titulo); font-size: 6.2mm; color: var(--cor1); margin: 0 0 2.5mm; }
.tb-regras h4 { font-family: var(--fonte-titulo); font-size: 5mm; color: var(--cor2); margin: 0 0 2mm; }
.tb-passos { margin: 0; padding-left: 4.5mm; font-size: 3.2mm; line-height: 1.35; color: #2c3540; }
.tb-passos li { margin-bottom: 1.8mm; }

.tb-quiz { margin-top: 4mm; padding-top: 3.5mm; border-top: .5mm dashed var(--cor2); flex: 1; }
.tb-perguntas { margin: 0; padding-left: 4.5mm; font-size: 3.1mm; line-height: 1.3; color: #2c3540; }
.tb-perguntas li { margin-bottom: 2mm; }
.tb-nota { margin: 3mm 0 0; font-size: 2.9mm; color: #7d8791; line-height: 1.35; }
.tb-regras > .tb-nota:last-child { margin-top: auto; padding-top: 3mm; border-top: .4mm dotted #d7dce2; }

/* ---------------------------------------------------- respostas do quiz */
.fim-respostas {
  position: absolute; left: 10mm; right: 10mm; bottom: 7mm;
  transform: rotate(180deg);
  border-top: .4mm dotted #cfd5db; padding-top: 2mm;
  font-size: 2.9mm; color: #97a0aa;
}
.fim-respostas-tit { display: block; font-weight: 700; margin-bottom: 1mm; }
.fim-respostas ol {
  list-style: none; counter-reset: resp; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1.5mm 4mm; justify-content: center;
}
.fim-respostas li::before { counter-increment: resp; content: counter(resp) '. '; font-weight: 700; }

/* ---------------------------------------------------- botao "outro jogo" */
.p-cabeca { position: relative; }
.regerar {
  position: absolute; top: 0; right: 0; z-index: 9;
  border: 0; border-radius: 7px; cursor: pointer;
  background: var(--cor1); color: #fff;
  font: 700 11px/1 'Nunito', system-ui, sans-serif;
  padding: 6px 9px; white-space: nowrap;
  opacity: 0; transition: opacity .12s ease;
  transform-origin: top right;
  transform: scale(calc(1 / var(--escala, 1)));
}
.pagina:hover .regerar, .regerar:focus-visible { opacity: 1; }
@media (hover: none) { .regerar { opacity: .92; } }

/* ============================================================
   Impressao: folhas A4 deitadas com duas paginas A5 lado a lado.
   ============================================================ */
#impressao { display: none; }

.folha {
  width: 297mm; height: 210mm;
  display: flex; background: #fff;
  break-after: page; page-break-after: always;
}
.folha:last-child { break-after: auto; page-break-after: auto; }
.folha > .meia { width: 148.5mm; height: 210mm; overflow: hidden; flex: none; }
.folha--espalhada { display: block; }
.folha--espalhada > .pagina { width: 297mm; }

@media print {
  html, body { margin: 0; padding: 0; background: #fff; }
  @page { size: A4 landscape; margin: 0; }
  body > *:not(#impressao) { display: none !important; }
  #impressao { display: block !important; }
  .pagina { box-shadow: none !important; }
  .trocar, .regerar { display: none !important; }
  .espaco, .espaco:hover { outline: none !important; }
}

/* ---------------------------------------------------- folha deitada em papel em pe */
/* O conteudo continua 297x210; o papel e que vira 210x297 com o giro. */
.folha-retrato {
  width: 210mm; height: 297mm; position: relative; overflow: hidden; background: #fff;
  break-after: page; page-break-after: always;
}
.folha-retrato:last-child { break-after: auto; page-break-after: auto; }
.folha-giro {
  position: absolute; top: 0; left: 0;
  transform: translateX(210mm) rotate(90deg);
  transform-origin: top left;
}
.folha-retrato .folha,
.folha-retrato .folha-solta {
  break-after: auto; page-break-after: auto;
}

/* ---------------------------------------------------- paginas soltas (1 por A4) */
.pagina--branca { background: #fff; }

.folha-solta {
  width: 210mm; height: 297mm;
  display: grid; place-items: center; overflow: hidden; background: #fff;
  break-after: page; page-break-after: always;
}
.folha-solta-escala { transform: scale(1.4142); transform-origin: center; }
.folha-solta--paisagem { width: 297mm; height: 210mm; page: paisagem; }
.folha-solta--paisagem .folha-solta-escala { transform: none; }
.folha--espalhada { page: paisagem; }
.folha-solta:last-child { break-after: auto; page-break-after: auto; }