/* Impressão do Baralho dos Passos. Fonte Lexend (OFL, ficheiro local) com alternativas de sistema. */
@font-face { font-family: "Lexend"; src: url("/fontes/Lexend.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
* { box-sizing: border-box; }
body {
  margin: 0; font-family: "Lexend", Verdana, Arial, sans-serif; background: #ddd; color: #1a1a1a;
  letter-spacing: .02em; word-spacing: .08em; line-height: 1.45;
}
em, i { font-style: normal; }
.barra { position: sticky; top: 0; display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; padding: .6rem 1rem; background: #222; color: #fff; z-index: 1; font-size: 14px; }
.barra a { color: #fff; }
.barra select, .barra button { font: inherit; padding: .3rem .6rem; border-radius: 8px; border: none; }
.barra .opcoes { display: flex; gap: 1rem; flex-wrap: wrap; }
.aviso-lingua { background: #ffe58a; color: #222; padding: .2rem .6rem; border-radius: 6px; }

@page { size: A4 portrait; margin: 8mm; }
.folha, .guia { width: 194mm; margin: 10mm auto; background: #fff; }
.folha { height: 281mm; padding: 3mm 0; break-after: page; page-break-after: always; overflow: hidden; }
.folha h2 { font-size: 12pt; margin: 0; text-align: left; padding: 0 6mm; font-weight: 600; }
.nota-folha { font-size: 9pt; margin: 0 0 2mm; padding: 0 6mm; color: #444; }
.grelha { display: grid; grid-template-columns: repeat(3, 63mm); grid-auto-rows: 88mm; justify-content: center; }

/* Cartão: 63 × 88 mm. As linhas tracejadas são as marcas de corte. Fundo creme, texto à esquerda. */
.carta {
  position: relative; border: 0.3mm dashed #888; padding: 11mm 7mm 9mm; background: #fff;
  display: flex; flex-direction: column; justify-content: flex-start; text-align: left;
}
.carta::before { content: ""; position: absolute; inset: 2.5mm; border: 1.4mm solid var(--cor, #333); border-radius: 4mm; background: #FFF8E7; z-index: 0; }
.carta > * { position: relative; z-index: 1; }
.carta .canto { position: absolute; top: 4.5mm; left: 5mm; font-size: 12pt; display: flex; gap: 1mm; align-items: center; }
.carta .canto .forma { color: var(--cor); font-size: 14pt; line-height: 1; }
.carta .canto.baixo { top: auto; left: auto; bottom: 4.5mm; right: 5mm; transform: rotate(180deg); }
.carta .emoji { font-size: 28pt; line-height: 1; margin-bottom: 3mm; }
.carta .texto { font-size: 13pt; line-height: 1.4; }
.carta .rodape { position: absolute; bottom: 5mm; left: 6mm; right: 14mm; font-size: 7pt; color: #444; }
.carta .selo { display: inline-block; align-self: flex-start; margin-top: 2mm; padding: 1mm 3mm; border: 0.8mm solid #1a1a1a; border-radius: 2mm; font-weight: 700; font-size: 16pt; background: #fff; }
.carta .traducao { margin-top: 2mm; font-size: 11pt; color: #333; border-top: 0.3mm solid #999; padding-top: 1.5mm; }
.carta .ajuda { display: flex; gap: 3mm; margin-top: 3mm; font-size: 8.5pt; color: #333; }
.carta .ajuda b { font-size: 12pt; color: #1a1a1a; }

/* Verso: cor + padrão (resiste a fotocópia a preto e branco) + forma + ícone. */
.carta.verso { background-color: var(--cor); align-items: center; text-align: center; color: #fff; }
.carta.verso::before { background: transparent; border-color: #fff; }
.padrao-riscas { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.45) 0 2.5mm, transparent 2.5mm 5mm); }
.padrao-pontos { background-image: radial-gradient(circle, rgba(255,255,255,.6) 1.1mm, transparent 1.3mm); background-size: 5mm 5mm; }
.padrao-xadrez { background-image: conic-gradient(rgba(255,255,255,.45) 25%, transparent 0 50%, rgba(255,255,255,.45) 0 75%, transparent 0); background-size: 8mm 8mm; }
.padrao-ondas { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0 10 Q10 0 20 10 T40 10' fill='none' stroke='white' stroke-opacity='.6' stroke-width='3'/%3E%3C/svg%3E"); background-size: 10mm 5mm; }
.verso-disco { width: 34mm; height: 34mm; border-radius: 50%; background: #fff; color: var(--cor); display: flex; flex-direction: column; align-items: center; justify-content: center; border: 0.8mm solid #1a1a1a; }
.verso-forma { font-size: 26pt; line-height: 1; }
.verso-simbolo { font-size: 20pt; }
.verso-nome { margin-top: 3mm; font-size: 15pt; font-weight: 700; background: #fff; color: #1a1a1a; padding: 0.5mm 3mm; border-radius: 2mm; }
.verso-marca { position: absolute; bottom: 7mm; left: 0; right: 0; text-align: center; font-size: 8pt; background: #fff; color: #1a1a1a; margin: 0 12mm; border-radius: 2mm; }
.carta.vazia::before { display: none; }

/* Tapete: casas com número e seta; ampulheta numa casa livre. */
.tapete .casa { position: relative; border: 0.8mm solid var(--cor); border-radius: 4mm; margin: 2mm; background: #fafafa; }
.tapete .casa .numero { position: absolute; top: 3mm; left: 4mm; font-size: 26pt; font-weight: 700; color: var(--cor); }
.tapete .casa .seta { position: absolute; bottom: 3mm; right: 4mm; font-size: 22pt; color: #1a1a1a; }
.tapete .ja-colocado { position: absolute; inset: 0; display: grid; }
.tapete .ja-colocado .carta { border: none; }
.tapete .ja-colocado .carta::after { content: "já colocado"; position: absolute; top: -1mm; right: 4mm; font-size: 7pt; background: #1a1a1a; color: #fff; padding: .3mm 1.5mm; border-radius: 1mm; z-index: 2; }
.casa-livre { display: grid; place-items: center; }
.ampulheta { text-align: center; font-weight: 700; font-size: 12pt; }
.aviso-jogo { margin: 0 6mm 2mm; padding: 1.5mm 3mm; border: 0.6mm solid #1a1a1a; border-radius: 2mm; font-weight: 600; font-size: 10.5pt; background: #fff4cc; }

/* Cartão-guia do verificador e guia do professor. */
.guia { padding: 8mm 12mm; font-size: 11pt; break-after: page; page-break-after: always; border-top: 3mm solid var(--cor, #333); }
.guia h2 { margin-top: 0; font-size: 14pt; }
.guia .papel { font-size: 14pt; }
.guia .passos-guia { font-size: 13pt; line-height: 1.7; }
.guia .marcas { display: flex; gap: 8mm; justify-content: center; margin-top: 8mm; }
.guia .marca { width: 40mm; height: 28mm; border: 0.3mm dashed #888; border-radius: 3mm; display: grid; place-items: center; text-align: center; font-size: 14pt; font-weight: 700; color: #B3261E; line-height: 1.3; }
.guia .nota { text-align: center; color: #444; }
.guia.professor h3 { margin: 5mm 0 1mm; font-size: 12pt; }
.guia.professor h4 { margin: 4mm 0 1mm; font-size: 11pt; }
.guia.professor ol { margin: 0; }
.leve { color: #444; font-weight: 400; }

/* Glossário visual. */
.palavras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4mm; padding: 4mm 10mm; }
.palavra { display: flex; align-items: center; gap: 5mm; border: 0.6mm solid var(--cor); border-radius: 3mm; padding: 3mm 5mm; font-size: 18pt; background: #FFF8E7; }
.palavra .emoji { font-size: 30pt; }

/* Papéis, desafios e regras. */
.papel-carta, .desafio { align-items: flex-start; }
.papel-nome { font-size: 16pt; font-weight: 700; margin-bottom: 2mm; }
.papel-carta.roda .texto { font-size: 11pt; line-height: 1.5; }
.lista-regras { list-style: none; padding: 4mm 12mm; margin: 0; counter-reset: regra; }
.lista-regras li { counter-increment: regra; display: flex; align-items: center; gap: 6mm; font-size: 18pt; padding: 4mm 0; border-bottom: 0.3mm solid #ccc; }
.lista-regras li::before { content: counter(regra); font-weight: 700; width: 10mm; }
.lista-regras .emoji { font-size: 30pt; }

@media print {
  body { background: #fff; }
  .barra { display: none; }
  .folha, .guia { margin: 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Cartões de debriefing (verso neutro, sem naipe). */
.conversa { --cor: #3d3d3d; padding-top: 12mm; }
.conversa .pergunta { font-size: 13.5pt; font-weight: 700; line-height: 1.3; }
.conversa .pista { font-size: 11pt; margin-top: 2mm; }
.conversa .como { font-size: 8.5pt; margin-top: 3mm; color: #333; line-height: 1.35; }
.conversa .rodape { right: 6mm; }
.conversa-verso { --cor: #3d3d3d; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.25) 0 1mm, transparent 1mm 4mm), repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 1mm, transparent 1mm 4mm); }

/* Folha de registo do professor: A4 ao alto, tabela com uma linha por grupo. */
.registo { padding: 3mm 6mm; }
.registo h2 { padding: 0; }
.registo .nota-folha { padding: 0; margin: 2mm 0; }
.registo-campos { display: flex; gap: 10mm; font-size: 11pt; margin: 3mm 0; }
.registo table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 8.5pt; }
.registo th, .registo td { border: 0.4mm solid #333; padding: 1.5mm; vertical-align: top; text-align: left; }
.registo th { background: #eee; font-weight: 600; }
.registo td { height: 25mm; }
.registo .c-cod { width: 14mm; } .registo .c-naipe { width: 22mm; } .registo .c-tent { width: 18mm; }
.registo .c-parou { width: 28mm; } .registo .c-ordem { width: 16mm; } .registo .c-fecho { width: 38mm; }
.registo .opcoes-reg { font-size: 10pt; color: #333; line-height: 1.8; }
/* Correções: no debriefing o rodapé segue o texto (sem sobrepor); campos do registo numa linha. */
.carta.conversa { justify-content: flex-start; padding: 12mm 6.5mm 6mm; }
.conversa .emoji { font-size: 22pt; margin-bottom: 2mm; }
.conversa .pergunta { font-size: 12.5pt; }
.conversa .pista { font-size: 10pt; }
.conversa .como { font-size: 8pt; }
.conversa .rodape { position: relative; bottom: auto; left: auto; right: auto; margin-top: auto; padding-top: 1.5mm; font-size: 7pt; line-height: 1.3; }
.registo-campos { flex-wrap: nowrap; gap: 8mm; white-space: nowrap; font-size: 10.5pt; }