/* =========================================================
   Memórias da História — paleta clássica (laranja e petróleo)
   ========================================================= */
:root {
  --coral: #F2606B;
  --laranja: #F2A35E;
  --ouro: #E8C468;
  --creme: #FDFBE4;
  --papel: #F7F1D6;
  --petroleo: #28495A;
  --petroleo-2: #1d3542;
  --petroleo-3: #13252f;
  --verde: #2A9D8F;
  --tinta: #1f2d33;
  --tinta-2: #4c5d63;
  --linha: #e4dcb8;

  --c0: var(--coral); --c1: var(--laranja); --c2: var(--verde); --c3: var(--ouro); --c4: var(--petroleo); --c5: #b5577a;
  --j0: #F2606B; --j1: #2A9D8F; --j2: #E8A23D; --j3: #6C63C9;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --superficie: #fffdf2;
  --titulo: var(--petroleo-2);
  --jogo-fundo: var(--petroleo-2);
  --jogo-texto: var(--creme);
  --btn-fundo: var(--petroleo); --btn-texto: var(--creme); --btn-sombra: var(--petroleo-3);
  --destaque: var(--coral); --destaque-texto: #fff; --destaque-sombra: #c2434e;
  --topo-fundo: #28495A; --topo-texto: var(--creme);
  --ativo-fundo: var(--petroleo); --ativo-texto: var(--creme);
  --verso-a: #31586b; --verso-b: var(--petroleo); --verso-c: var(--petroleo-2);
  --raio: 14px;
  --sombra: 0 1px 0 rgba(29, 53, 66, .06), 0 8px 24px -10px rgba(29, 53, 66, .35);
  --sombra-alta: 0 2px 0 rgba(29, 53, 66, .05), 0 22px 40px -16px rgba(29, 53, 66, .5);
  --mola: cubic-bezier(.34, 1.4, .5, 1);
  --suave: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
/* trava: nada pode alargar a página no celular (a rolagem lateral fica só nas faixas que têm a própria) */
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--tinta);
  background-color: var(--creme);
  background-image:
    radial-gradient(1200px 600px at 110% -10%, rgba(242, 163, 94, .16), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(42, 157, 143, .12), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment: fixed;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  line-height: 1.45;
  overflow-x: clip;
}
body.sem-rolagem { overflow: hidden; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--petroleo); }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }
[hidden] { display: none !important; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px clamp(14px, 4vw, 40px);
  background: var(--topo-fundo);
  backdrop-filter: blur(8px);
  color: var(--topo-texto);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}
.marca { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.marca-selo { width: 40px; height: 40px; display: grid; place-items: center; flex: none; }
.marca-svg { width: 100%; height: 100%; overflow: visible; }
@media (hover: hover) { .marca:hover .m-seta { animation: revira .7s var(--mola); transform-origin: 46px 26px; } }
@keyframes revira { 40% { transform: rotate(40deg); } }
.hero { position: relative; }
.hero-marca { position: absolute; right: clamp(-260px, -22vw, 0px); top: clamp(10px, 4vw, 40px); width: clamp(120px, 20vw, 220px); aspect-ratio: 1; transform: rotate(6deg); filter: drop-shadow(0 18px 24px rgba(29, 53, 66, .22)); animation: flutua 6s ease-in-out infinite; }
@keyframes flutua { 50% { transform: rotate(3deg) translateY(-8px); } }
@media (max-width: 1100px) { .hero-marca { position: static; display: block; width: 92px; margin-bottom: 10px; transform: rotate(-4deg); animation: none; } }
@media (prefers-reduced-motion: reduce) { .hero-marca, .marca:hover .m-seta { animation: none; } }
.marca-txt { font: 500 17px/1 var(--serif); letter-spacing: .01em; }
.marca-txt b { font-weight: 800; }
.topo-nav a { color: var(--topo-texto); text-decoration: none; opacity: .85; font-weight: 700; font-size: 15px; padding: 8px 10px; border-radius: 8px; }
@media (hover: hover) { .topo-nav a:hover { opacity: 1; background: rgba(255, 255, 255, .08); } }
body[data-tela="jogo"] .topo, body[data-tela="crono"] .topo { display: none; }

main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(14px, 4vw, 40px) 40px; }
.rodape { text-align: center; font-size: 14px; color: var(--tinta-2); padding: 18px 16px 26px; }
.rodape b { color: var(--petroleo); }
body[data-tela="jogo"] .rodape { display: none; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px;
  padding: 12px 22px;
  background: var(--btn-fundo); color: var(--btn-texto);
  font-weight: 700; font-size: 16px;
  box-shadow: 0 3px 0 var(--btn-sombra), 0 10px 18px -10px rgba(19, 37, 47, .7);
  transition: transform .15s var(--suave), box-shadow .15s, background .2s;
}
@media (hover: hover) { .btn:hover { filter: brightness(1.1); transform: translateY(-1px); } }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--btn-sombra); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-grande { padding: 16px 38px; font-size: 19px; background: var(--destaque); color: var(--destaque-texto); box-shadow: 0 4px 0 var(--destaque-sombra), 0 14px 24px -12px rgba(194, 67, 78, .8); }

.btn-grande:active { box-shadow: 0 1px 0 var(--destaque-sombra); }
.btn-leve { background: transparent; color: var(--titulo); box-shadow: inset 0 0 0 2px currentColor; }
@media (hover: hover) { .btn-leve:hover { background: rgba(40, 73, 90, .07); } }
.btn-leve:active { box-shadow: inset 0 0 0 2px currentColor; }
.btn-voltar {
  width: 42px; height: 42px; flex: none; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .12); color: inherit; font-size: 20px; font-weight: 700;
}
@media (hover: hover) { .btn-voltar:hover { background: rgba(255, 255, 255, .22); } }

/* ---------- início ---------- */
.hero { padding: clamp(28px, 6vw, 64px) 0 12px; max-width: 760px; }
.hero-kicker { margin: 0 0 8px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; color: var(--coral); }
.hero h1 { margin: 0; font: 800 clamp(38px, 7vw, 72px)/.98 var(--serif); letter-spacing: -.02em; color: var(--titulo); }
.hero h1 em { font-style: italic; font-weight: 700; color: var(--coral); }
.hero-sub { font-size: clamp(16px, 2vw, 19px); color: var(--tinta-2); max-width: 600px; margin: 18px 0 0; }

.passo { margin-top: clamp(28px, 5vw, 46px); }
/* um passo por vez: o hero só aparece no primeiro */
#tela-inicio .passo { display: none; }
#tela-inicio[data-passo="jogo"] .passo[data-passo="jogo"],
#tela-inicio[data-passo="tema"] .passo[data-passo="tema"],
#tela-inicio[data-passo="modo"] .passo[data-passo="modo"],
#tela-inicio[data-passo="ajustes"] .passo[data-passo="ajustes"] { display: block; animation: entra-passo .35s var(--mola); }
#tela-inicio:not([data-passo="jogo"]) .hero { display: none; }
#tela-inicio:not([data-passo="jogo"]) .passo { margin-top: 22px; }
@keyframes entra-passo { from { opacity: 0; transform: translateX(18px); } }
@media (prefers-reduced-motion: reduce) { #tela-inicio .passo { animation: none !important; } }

.trilha { display: flex; align-items: center; gap: 12px; margin-top: clamp(14px, 3vw, 26px); flex-wrap: wrap; }
.trilha[hidden] { display: none; }
.trilha-voltar { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; font: 700 20px/1 var(--sans); background: var(--superficie); color: var(--titulo); box-shadow: var(--sombra), inset 0 0 0 1px var(--linha); cursor: pointer; transition: transform .2s var(--mola); }
@media (hover: hover) { .trilha-voltar:hover { transform: translateX(-3px); } }
.trilha ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.trilha li { display: flex; align-items: center; }
.trilha li + li::before { content: ''; width: 18px; height: 2px; background: var(--linha); margin-right: 6px; border-radius: 2px; }
.trilha li button { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 5px 10px 5px 5px; border-radius: 99px; color: var(--tinta-2); cursor: pointer; text-align: left; font: inherit; }
@media (hover: hover) { .trilha li.feito button:hover { background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linha); } }
.trilha li button:disabled { cursor: default; opacity: .55; }
.trilha-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--sans); background: var(--linha); color: var(--titulo); }
.trilha li.feito .trilha-n { background: var(--btn-fundo); color: var(--btn-texto); }
.trilha li.atual .trilha-n { background: var(--destaque); color: var(--destaque-texto); }
.trilha-txt { display: flex; flex-direction: column; line-height: 1.15; }
.trilha-txt small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.trilha-txt b { font: 700 14px/1.2 var(--serif); color: var(--titulo); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trilha li.atual .trilha-txt small { color: var(--titulo); }
@media (max-width: 640px) { .trilha li:not(.atual) .trilha-txt { display: none; } .trilha li + li::before { width: 10px; } }
.rodape-equipe { margin-top: 6px; font-size: 13px; opacity: .75; }
.rodape-equipe a { color: inherit; }
.passo h2 { display: flex; align-items: center; gap: 12px; font: 700 clamp(21px, 3vw, 26px)/1.1 var(--serif); margin: 0 0 16px; color: var(--titulo); }
.num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--btn-fundo); color: var(--btn-texto); font: 700 16px/1 var(--sans); }

/* filtros da tela de temas */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.filtros-tema { display: grid; gap: 10px; margin: 0 0 18px; }
.ft-busca input {
  width: 100%; max-width: 440px; font: 16px/1.2 var(--sans); color: var(--tinta); padding: 11px 14px 11px 38px;
  border: 0; border-radius: 99px; background: var(--superficie) no-repeat 14px 50% / 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c5d63' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.8-4.8'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px var(--linha);
}
.ft-busca input:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.ft-grupo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ft-rot { flex: none; width: 54px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.ft-chips { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.ft-chip {
  font: 600 14px/1 var(--sans); color: var(--tinta); padding: 8px 13px; border: 0; border-radius: 99px; cursor: pointer;
  background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linha); transition: background .15s, color .15s;
}
@media (hover: hover) { .ft-chip:hover { box-shadow: inset 0 0 0 1.5px var(--tinta-2); } }
.ft-chip[aria-pressed="true"] { background: var(--btn-fundo); color: var(--btn-texto); box-shadow: none; }
.ft-res { margin: 0; font-size: 14px; color: var(--tinta-2); display: flex; gap: 12px; align-items: center; min-height: 22px; }
.ft-limpa { border: 0; background: none; padding: 0; font: 700 14px var(--sans); color: var(--tinta); text-decoration: underline; cursor: pointer; }
@media (max-width: 600px) {
  /* no celular cada grupo vira uma faixa que desliza de lado, para os filtros não empurrarem os temas para baixo */
  .ft-grupo { align-items: center; }
  .ft-rot { width: 46px; font-size: 11px; }
  .ft-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 16px 2px 2px; margin-right: -16px;
              -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .ft-chips::-webkit-scrollbar { display: none; }
  .ft-chip { flex: none; font-size: 13.5px; padding: 8px 12px; }
}
.pacotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.pacote {
  --cor: var(--coral);
  position: relative; text-align: left; border: 0; padding: 0;
  background: var(--superficie); border-radius: var(--raio); overflow: hidden;
  box-shadow: var(--sombra), inset 0 0 0 1px var(--linha);
  transition: transform .25s var(--mola), box-shadow .25s;
  display: flex; flex-direction: column;
}
@media (hover: hover) { .pacote:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--sombra-alta), inset 0 0 0 1px var(--linha); } }
.pacote[aria-checked="true"] { box-shadow: var(--sombra-alta), 0 0 0 3px var(--cor); transform: translateY(-4px); }
.pacote[aria-checked="true"]::after {
  content: '✓'; position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cor); color: #fff; font-weight: 700; box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
  animation: pop .35s var(--mola);
}
/* linha única de altura fixa: sem isso a foto alta estica a linha e invade o título */
.pacote-capa { position: relative; display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: minmax(0, 1fr); height: 118px; flex: none; overflow: hidden; background: var(--cor); gap: 2px; border-bottom: 5px solid var(--cor); }
.pacote-capa img { width: 100%; height: 100%; min-height: 0; object-fit: cover; filter: sepia(.25) saturate(.9); transition: filter .3s, transform .5s; }
@media (hover: hover) { .pacote:hover .pacote-capa img { filter: none; } }
.pacote-txt { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pacote-periodo { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cor); filter: brightness(.8); }
.pacote-txt b { font: 700 20px/1.15 var(--serif); color: var(--titulo); }
.pacote-desc { font-size: 14.5px; color: var(--tinta-2); flex: 1; }
.pacote-n { font-size: 13px; font-weight: 700; color: var(--tinta-2); margin-top: 6px; }

.modos { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 12px; }
.modo {
  position: relative; display: flex; flex-direction: column;
  background: var(--superficie); border-radius: var(--raio);
  box-shadow: var(--sombra), inset 0 0 0 1px var(--linha);
  transition: transform .25s var(--mola), box-shadow .25s, background .25s;
}
@media (hover: hover) { .modo:hover { transform: translateY(-3px); } }
.modo.ativo { background: var(--ativo-fundo); color: var(--ativo-texto); box-shadow: var(--sombra-alta); }
.modo-escolhe { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; border: 0; background: none; padding: 16px 16px 10px; text-align: left; flex: 1; }
.modo-ico .ico, .ico { display: inline-grid; }
.modo-ico svg { width: 42px; height: 42px; }
.ico svg { fill: rgba(242, 163, 94, .28); stroke: var(--laranja); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.ico svg .tr { fill: none; }
.modo:not(.ativo) .ico svg { stroke: var(--coral); fill: rgba(242, 96, 107, .12); }
.modo-txt { display: flex; flex-direction: column; gap: 3px; }
.modo-txt b { font: 700 19px/1.1 var(--serif); }
.modo-txt span { font-size: 14.5px; opacity: .85; }
.modo-nivel { position: absolute; top: 16px; right: 16px; font-size: 10px; letter-spacing: 2px; opacity: .6; }
.modo-como {
  border: 0; background: none; font-size: 14px; font-weight: 700; text-align: left;
  padding: 8px 16px 14px; color: var(--coral); display: flex; align-items: center; gap: 6px;
}
.modo-como::before { content: '▶'; font-size: 10px; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: currentColor; color: #fff; text-indent: 2px; }
.modo.ativo .modo-como { color: var(--ouro); }
.modo.ativo .modo-como::before { color: var(--petroleo); }
@media (hover: hover) { .modo-como:hover { text-decoration: underline; } }

.ajustes { display: flex; flex-wrap: wrap; gap: 14px 30px; background: var(--superficie); border-radius: var(--raio); padding: 18px 20px; box-shadow: inset 0 0 0 1px var(--linha); }
.ajuste { border: 0; margin: 0; padding: 0; min-width: 0; }
.ajuste legend { font-weight: 700; font-size: 14px; color: var(--tinta-2); margin-bottom: 8px; padding: 0; }
.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; background: var(--papel); border-radius: 999px; padding: 4px; gap: 2px; box-shadow: inset 0 0 0 1px var(--linha); }
@media (max-width: 560px) {
  .ajustes { padding: 16px 14px; }
  .ajuste { max-width: 100%; }
  .seg { border-radius: 18px; }
  .seg button { padding: 9px 11px; font-size: 14.5px; }
  #seg-pares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.seg button { border: 0; background: none; padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 15px; color: var(--tinta-2); transition: background .2s, color .2s; }
.seg button[aria-pressed="true"] { background: var(--btn-fundo); color: var(--btn-texto); box-shadow: 0 2px 6px rgba(29, 53, 66, .3); }
.nomes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nomes input {
  --cor: var(--j0);
  width: 130px; padding: 9px 12px; border-radius: 10px; border: 2px solid var(--cor);
  font: inherit; font-size: 15px; background: #fff; color: var(--tinta);
  box-shadow: inset 5px 0 0 var(--cor);
}
.troca { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; padding-top: 6px; }
.troca input { appearance: none; width: 46px; height: 26px; border-radius: 999px; background: var(--linha); position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.troca input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .25s var(--mola); }
.troca input:checked { background: var(--verde); }
.troca input:checked::after { transform: translateX(20px); }
.acoes-inicio { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 24px; }
.recorde-linha { font-size: 14px; color: var(--tinta-2); }
.recorde-linha b { color: var(--petroleo); }

/* ---------- placar do jogo ---------- */
body[data-tela="jogo"], body[data-tela="crono"] { background-color: var(--titulo); }
body[data-tela="jogo"] main, body[data-tela="crono"] main { max-width: 1280px; }
#tela-jogo { color: var(--jogo-texto); min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
/* na partida o conteúdo vai em fluxo, de cima para baixo: nada de esticar o tabuleiro para a altura da tela
   (no Safari o 100vh é maior que a área visível, e o esticão abria um vão em cima e empurrava a última fileira) */
body[data-tela="jogo"] main { padding-bottom: 0; }
/* tela grande: o tabuleiro fica centrado entre o placar e os pergaminhos (como antes) */
@media (min-width: 1000px) and (min-height: 700px) { #tela-jogo .tabuleiro { margin-block: auto; } }
.placar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0; position: sticky; top: 0; z-index: 5;
}
.placar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.placar-tema { font: 700 clamp(17px, 2.4vw, 22px)/1.1 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.placar-modo { display: flex; align-items: center; gap: 6px; font-size: 13px; opacity: .8; font-weight: 700; min-width: 0; }
.placar-modo svg { width: 18px; height: 18px; }
.placar-modo .ico { flex: none; }
.pm-nome { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.placar-num { display: flex; gap: 6px; }
.placar-num span { display: flex; flex-direction: column; align-items: center; background: rgba(255, 255, 255, .08); border-radius: 12px; padding: 6px 12px; min-width: 64px; }
.placar-num small { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.placar-num b { font: 700 20px/1.1 var(--serif); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .placar { gap: 8px; padding: 8px 0; }
  .btn-voltar { width: 38px; height: 38px; }
  .placar-num { gap: 4px; flex: none; }
  .placar-num span { min-width: 0; padding: 5px 8px; }
  .placar-num small { font-size: 10px; letter-spacing: .04em; }
  .placar-num b { font-size: 17px; }
}
.placar-num b.urgente { color: var(--coral); animation: pulsa 1s infinite; }
.placar-num b.sobe { animation: sobe .5s var(--mola); }

.combo {
  position: fixed; left: 50%; top: 22%; z-index: 40; pointer-events: none;
  transform: translate(-50%, 0); text-align: center;
  font: 800 clamp(26px, 5vw, 44px)/1 var(--serif); color: var(--ouro);
  text-shadow: 0 3px 0 var(--petroleo-3), 0 0 30px rgba(232, 196, 104, .5);
  animation: combo 1.2s var(--suave) forwards;
}
.combo small { display: block; font: 700 15px/1.3 var(--sans); color: var(--creme); letter-spacing: .06em; text-transform: uppercase; }

.vez { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 2px 0 10px; }
.vez-j {
  --cor: var(--j0);
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 2px solid transparent;
  transition: all .3s var(--suave); opacity: .6;
}
.vez-j::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--cor); }
.vez-j b { font-size: 15px; }
.vez-j i { font-style: normal; font: 700 16px/1 var(--serif); background: rgba(255, 255, 255, .12); border-radius: 999px; padding: 5px 10px; min-width: 38px; text-align: center; font-variant-numeric: tabular-nums; }
.vez-j.ativo { opacity: 1; border-color: var(--cor); background: color-mix(in srgb, var(--cor) 22%, transparent); transform: scale(1.06); }
.vez-j.ativo i { background: var(--cor); color: #fff; }
.vez-j.pulso { animation: pop .45s var(--mola); }
.vez-banner {
  position: fixed; inset: 0; z-index: 35; pointer-events: none; display: grid; place-items: center;
}
.vez-banner span {
  --cor: var(--j0);
  padding: 14px 30px; border-radius: 999px; background: var(--cor); color: #fff;
  font: 800 clamp(22px, 4vw, 34px)/1 var(--serif); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .5);
  animation: banner 1.1s var(--suave) forwards;
}

/* ---------- tabuleiro ---------- */
.tabuleiro {
  --cols: 4;
  flex: none; display: grid; gap: clamp(6px, 1.2vw, 14px);
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  align-content: start;
  /* reserva: o app.js recalcula a largura com a altura visível de verdade (ajustaTabuleiro) */
  width: 100%; max-width: calc((100vh - 222px) * var(--cols) / var(--rows, 4) * .75);
  max-width: calc((100svh - 222px) * var(--cols) / var(--rows, 4) * .75);
  margin: 0 auto; padding: 6px 0 12px;
}
.tabuleiro[data-n="12"] { --cols: 4; --rows: 3; }
.tabuleiro[data-n="16"] { --cols: 4; --rows: 4; }
.tabuleiro[data-n="24"] { --cols: 6; --rows: 4; }
.tabuleiro[data-n="30"] { --cols: 6; --rows: 5; }
.tabuleiro[data-n="36"] { --cols: 9; --rows: 4; }
@media (max-width: 640px) {
  .tabuleiro[data-n="12"] { --cols: 3; --rows: 4; }
  .tabuleiro[data-n="24"] { --cols: 4; --rows: 6; }
  .tabuleiro[data-n="30"] { --cols: 5; --rows: 6; }
  .tabuleiro[data-n="36"] { --cols: 6; --rows: 6; }
  .tabuleiro { max-width: calc((100vh - 242px) * var(--cols) / var(--rows) * .75); max-width: calc((100svh - 242px) * var(--cols) / var(--rows) * .75); }
}
@media (min-width: 1000px) {
  .tabuleiro[data-n="16"] { --cols: 8; --rows: 2; }
  .tabuleiro[data-n="12"] { --cols: 6; --rows: 2; }
  .tabuleiro[data-n="30"] { --cols: 10; --rows: 3; }
}
.dica { text-align: center; font-size: 14px; opacity: .6; margin: 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
@media (max-width: 480px) { .dica { font-size: 13px; line-height: 1.3; } }

/* ---------- carta ---------- */
.carta {
  position: relative; aspect-ratio: 3 / 4; border: 0; padding: 0; background: none;
  perspective: 900px; container-type: inline-size;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.distribuindo .carta { animation: distribui .55s var(--mola) both; animation-delay: calc(var(--i) * 35ms); }
.carta-in {
  position: absolute; inset: 0; display: block;
  transform-style: preserve-3d;
  transition: transform .55s var(--mola);
}
.carta.aberta .carta-in { transform: rotateY(180deg); }
@media (hover: hover) { .carta:not(.aberta):hover .carta-in { transform: translateY(-4px) rotate(-1deg); } }
.carta:not(.aberta):active .carta-in { transform: scale(.96); }
.carta-verso, .carta-frente {
  position: absolute; inset: 0; border-radius: clamp(8px, 7cqw, 14px);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
}
.carta-verso {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 26%, rgba(232, 196, 104, .18) 26.5% 27.5%, transparent 28%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .045) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, var(--verso-a), var(--verso-b) 45%, var(--verso-c));
  box-shadow: inset 0 0 0 clamp(3px, 3cqw, 6px) #fdfbe4, inset 0 0 0 clamp(4px, 4cqw, 8px) var(--ouro), 0 6px 14px -6px rgba(0, 0, 0, .6);
  display: grid; place-items: center;
}
.verso-selo {
  width: 38cqw; height: 38cqw; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--laranja); color: var(--titulo);
  font: 800 22cqw/1 var(--serif);
  box-shadow: 0 0 0 2.5cqw rgba(253, 251, 228, .9), 0 4px 10px rgba(0, 0, 0, .3);
}
.carta-frente {
  transform: rotateY(180deg);
  background: var(--creme);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 6px 14px -6px rgba(0, 0, 0, .55);
  color: var(--tinta);
}
.carta.achada .carta-frente { box-shadow: 0 0 0 clamp(2px, 2.5cqw, 4px) var(--dono, var(--verde)), 0 10px 24px -8px rgba(0, 0, 0, .6); }
.carta.achada .carta-in { animation: achou .6s var(--mola); }
.carta.achada::after {
  content: '✓'; position: absolute; top: -6px; right: -6px; z-index: 2;
  width: clamp(18px, 16cqw, 28px); height: clamp(18px, 16cqw, 28px); border-radius: 50%;
  display: grid; place-items: center; font-size: clamp(11px, 9cqw, 16px); font-weight: 700;
  background: var(--dono, var(--verde)); color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  animation: pop .4s var(--mola) .15s both;
}
.carta.errou .carta-in { animation: treme .4s; }
.carta.sem-anim .carta-in { transition: none !important; animation: none !important; }

/* frente com imagem */
.f-img { position: absolute; inset: 0; display: flex; flex-direction: column; }
.f-img img { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: center 25%; }
.f-rotulo {
  background: var(--creme); padding: 5cqw 6cqw 6cqw; text-align: center;
  border-top: 2.5cqw solid var(--laranja);
  display: flex; flex-direction: column; gap: 1cqw;
}
.f-rotulo b { font: 700 max(10px, 10.5cqw)/1.05 var(--serif); color: var(--titulo); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.f-rotulo small { font-size: max(8px, 7cqw); color: var(--tinta-2); line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.tipo-povo .f-rotulo { border-top-color: var(--verde); }
.tipo-evento .f-rotulo { border-top-color: var(--coral); }
.tipo-lugar .f-rotulo, .tipo-objeto .f-rotulo { border-top-color: var(--ouro); }

/* frente tipográfica */
.f-tipo {
  position: absolute; inset: 0; padding: 9cqw 8cqw; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw;
  background:
    radial-gradient(circle at 50% 38%, rgba(242, 163, 94, .22), transparent 55%),
    var(--creme);
  box-shadow: inset 0 0 0 3cqw var(--creme), inset 0 0 0 3.6cqw var(--laranja);
}
.f-tipo-kicker { font-size: max(8px, 7cqw); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); }
.f-tipo-ini { font: 800 32cqw/1 var(--serif); color: var(--petroleo); letter-spacing: -.04em; opacity: .9; }
.f-tipo b { font: 700 max(10px, 11cqw)/1.05 var(--serif); color: var(--titulo); }
.f-tipo small { font-size: max(8px, 7cqw); color: var(--tinta-2); }

/* frente de pista */
.f-pista {
  position: absolute; inset: 0; padding: 8cqw 6cqw 6cqw 8cqw; display: flex; flex-direction: column; gap: 3cqw;
  background:
    repeating-linear-gradient(transparent 0 calc(12cqw - 1px), rgba(40, 73, 90, .09) calc(12cqw - 1px) 12cqw),
    #fff8e3;
  box-shadow: inset 4cqw 0 0 var(--coral);
}
.f-pista-kicker {
  align-self: flex-start; font-size: max(8px, 7cqw); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--coral); padding: 1.5cqw 4cqw; border-radius: 99px;
}
.f-pista p { margin: 0; flex: 1; min-height: 0; font: italic 500 max(9px, 9.4cqw)/1.18 var(--serif); color: var(--titulo); overflow: hidden; overflow-wrap: anywhere; hyphens: auto; }
.carta.aberta .f-pista p.cortada { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--linhas, 6); line-clamp: var(--linhas, 6); }
.f-pista-tipo { font-size: max(8px, 6.5cqw); color: var(--tinta-2); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

/* efeitos */
.faisca {
  position: fixed; width: 9px; height: 9px; border-radius: 2px; z-index: 60; pointer-events: none;
  animation: faisca .75s var(--suave) forwards;
}
.confete { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.confete i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; animation: cai var(--t) var(--d) linear forwards; }

.toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 50; transform: translateX(-50%);
  width: min(92vw, 460px); padding: 14px 18px; border-radius: 16px;
  background: var(--creme); color: var(--tinta);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .55); border-left: 6px solid var(--verde);
  display: flex; flex-direction: column; gap: 2px;
  animation: toast .45s var(--mola);
}
.toast b { font: 700 18px/1.1 var(--serif); color: var(--titulo); }
.toast span { font-size: 14.5px; color: var(--tinta-2); }
.toast em { font-style: normal; font-weight: 700; color: var(--verde); font-size: 13px; }
.toast.sai { opacity: 0; transform: translate(-50%, 20px); transition: all .4s; }
@media (max-width: 640px), (pointer: coarse) {
  .toast { bottom: auto; top: max(8px, env(safe-area-inset-top)); padding: 10px 14px; animation-name: toast-cima; cursor: pointer; }
  .toast b { font-size: 16px; }
  .toast span { font-size: 13.5px; line-height: 1.3; }
  .toast.sai { transform: translate(-50%, -20px); }
}
@keyframes toast-cima { from { transform: translate(-50%, -40px); opacity: 0; } }

/* leitor de pista (app.js): texto inteiro da pista aberta que ficou pequena/cortada na carta.
   Fica embaixo, sobre os pergaminhos e a dica — nunca sobre o tabuleiro. */
.leitor-pista {
  position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 45; transform: translateX(-50%);
  width: min(94vw, 520px); padding: 9px 14px 10px; border-radius: 14px;
  background: var(--creme); color: var(--tinta);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, .6); border-left: 6px solid var(--coral);
  display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  animation: leitor .3s var(--mola);
}
.leitor-pista[hidden] { display: none; }
.leitor-pista-rot { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--coral); }
.leitor-pista-txt { font: italic 500 15px/1.32 var(--serif); color: var(--titulo); overflow-wrap: anywhere; }
.leitor-pista.compacta { padding: 6px 12px 7px; }
.leitor-pista.compacta .leitor-pista-txt { font-size: 14px; line-height: 1.25; }
.leitor-pista.no-topo { bottom: auto; top: max(8px, env(safe-area-inset-top)); animation-name: leitor-cima; }
body:has(dialog[open]) .leitor-pista { display: none; }
@keyframes leitor { from { transform: translate(-50%, 16px); opacity: 0; } }
@keyframes leitor-cima { from { transform: translate(-50%, -16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .leitor-pista { animation: none; } }

/* ---------- modal ---------- */
.modal {
  border: 0; padding: 0; border-radius: 22px; width: min(94vw, 560px); max-height: 92vh;
  background: var(--creme); color: var(--tinta); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .6);
  overflow: auto;
}
.modal[open] { animation: modal .4s var(--mola); }
.modal::backdrop { background: rgba(13, 26, 33, .72); backdrop-filter: blur(3px); }
.modal-corpo { padding: clamp(18px, 4vw, 28px); }

.perg-carta { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.perg-carta img, .perg-ini { width: 58px; height: 58px; border-radius: 12px; object-fit: cover; object-position: center 25%; flex: none; box-shadow: 0 0 0 3px var(--verde); }
.perg-ini { display: grid; place-items: center; background: var(--petroleo); color: var(--creme); font: 800 22px/1 var(--serif); }
.perg-carta small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--verde); }
.perg-carta b { font: 700 20px/1.15 var(--serif); color: var(--titulo); }
.perg-enun { font: 600 clamp(18px, 2.6vw, 21px)/1.3 var(--serif); margin: 0 0 16px; color: var(--titulo); }
.perg-alts { display: grid; gap: 9px; }
.alt {
  display: flex; align-items: center; gap: 12px; text-align: left;
  border: 0; border-radius: 14px; padding: 12px 14px; background: #fff;
  box-shadow: inset 0 0 0 2px var(--linha); font-size: 16px; line-height: 1.3;
  transition: transform .15s var(--suave), box-shadow .15s, background .2s;
}
@media (hover: hover) { .alt:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--petroleo); transform: translateX(3px); } }
.alt-l { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--papel); font-weight: 700; color: var(--petroleo); }
.alt:disabled { cursor: default; opacity: .6; }
.alt.certa { opacity: 1; background: #e3f4ef; box-shadow: inset 0 0 0 2px var(--verde); }
.alt.certa .alt-l { background: var(--verde); color: #fff; }
.alt.errada { opacity: 1; background: #fde7e8; box-shadow: inset 0 0 0 2px var(--coral); animation: treme .4s; }
.alt.errada .alt-l { background: var(--coral); color: #fff; }
.perg-exp { margin-top: 16px; padding: 14px 16px; border-radius: 14px; animation: sobeFade .35s var(--suave); }
.perg-exp.ok { background: #e3f4ef; }
.perg-exp.nao { background: #fdecec; }
.perg-exp b { font-size: 16px; }
.perg-exp.ok b { color: #1e7a6f; }
.perg-exp.nao b { color: #b83c47; }
.perg-exp p { margin: 6px 0 12px; font-size: 15.5px; }

.m-ficha { width: min(94vw, 720px); }
.m-ficha .modal-corpo { padding: 0; }
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.ficha figure { margin: 0; background: var(--petroleo-2); position: relative; }
.ficha figure img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; object-position: center 25%; }
.ficha figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 10px 6px; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.ficha-txt { padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.ficha-txt small { font-weight: 700; color: var(--coral); letter-spacing: .06em; }
.ficha-txt h3 { margin: 0; font: 800 28px/1.05 var(--serif); color: var(--titulo); }
.ficha-sub { margin: 0; color: var(--tinta-2); font-size: 15px; }
.ficha-txt > p:not(.ficha-sub) { font-size: 16px; margin: 8px 0 16px; }
.ficha-txt .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 600px) { .ficha { grid-template-columns: 1fr; } .ficha figure img { max-height: 260px; } }

/* ---------- cronologia ---------- */
#tela-crono { color: var(--jogo-texto); padding-top: 22px; }
body[data-tela="crono"] main { padding-bottom: 0; }
.crono-cab { text-align: center; margin-bottom: 18px; }
.crono-cab h2 { font: 800 clamp(26px, 4vw, 38px)/1.05 var(--serif); margin: 0 0 6px; }
.crono-cab p { margin: 0; opacity: .75; }
/* cada casa carrega o próprio número (selo no canto): nada fica solto entre as fileiras */
.crono-linha {
  list-style: none; margin: 0 0 18px; padding: 0 4px; position: relative;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 16px 10px;
}
/* legenda do sentido do tempo: no jogo fica fora da grade (senão ela impede o auto-fit de juntar as colunas) */
.crono-cab::after, .tuto-crono .crono-linha::before {
  content: 'mais antiga  \2192  mais recente'; display: block; grid-column: 1 / -1; white-space: pre; text-align: center;
  font: 700 11.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; opacity: .8;
  padding-bottom: 7px; border-bottom: 3px solid; border-image: linear-gradient(90deg, var(--ouro), var(--coral)) 1;
}
.crono-cab::after { margin-top: 14px; }
.slot { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 5px; width: 100%; max-width: 120px; justify-self: center; }
.slot-n {
  position: absolute; top: -8px; left: -6px; z-index: 2; min-width: 25px; height: 25px; padding: 0 6px; border-radius: 99px;
  display: grid; place-items: center; font: 700 12px/1 var(--sans); background: var(--ouro); color: #1d3542;
  box-shadow: 0 0 0 2px var(--jogo-fundo), 0 3px 6px rgba(0, 0, 0, .35);
}
.slot-vazio { width: 100%; aspect-ratio: 3 / 4.4; border-radius: 12px; border: 2px dashed rgba(253, 251, 228, .35); }
.slot-ano { font: 700 13px/1.2 var(--serif); text-align: center; overflow-wrap: anywhere; }
.slot-ano em { display: block; font-style: normal; font-size: 12px; opacity: .85; }
.slot-ano i { font-style: normal; font-family: var(--sans); font-weight: 400; font-size: 11.5px; opacity: .9; }
.conferida .mini-marco { display: none; }
.slot.ok .mini { box-shadow: 0 0 0 3px var(--verde); }
.slot.nao .mini { box-shadow: 0 0 0 3px var(--coral); }
.slot.ok .slot-ano { color: #7fe0d3; }
.slot.nao .slot-ano { color: #ffb0b6; }
.slot.ok, .slot.nao { animation: pop .4s var(--mola); }
.crono-banco { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 80px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .05); }
.crono-banco:empty { display: none; }
.mini {
  width: 100%; max-width: 120px; border: 0; padding: 0; border-radius: 12px; overflow: hidden;
  background: var(--creme); color: var(--tinta); display: flex; flex-direction: column;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6); transition: transform .2s var(--mola);
  animation: pop .35s var(--mola);
}
.crono-banco .mini { width: 104px; }
@media (hover: hover) { .mini:hover { transform: translateY(-3px); } }
.mini img { flex: none; aspect-ratio: 1; height: auto; width: 100%; object-fit: cover; object-position: center 25%; }
.mini-ini { flex: none; aspect-ratio: 1; display: grid; place-items: center; font: 800 32px/1 var(--serif); color: var(--petroleo); background: var(--papel); }
.mini b { flex: 1; font: 700 12.5px/1.1 var(--serif); padding: 6px 5px; text-align: center; color: var(--titulo); border-top: 3px solid var(--laranja); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini-marco { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: -3px; padding: 0 5px 6px; font: 400 11px/1.15 var(--sans); color: var(--tinta-2); text-align: center; }
@media (max-width: 640px) {
  #tela-crono { padding-top: 12px; }
  .crono-cab { margin-bottom: 12px; }
  .crono-cab h2 { font-size: 24px; }
  .crono-cab p { font-size: 14px; line-height: 1.35; }
  .crono-linha { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 14px 8px; padding: 0 2px; margin-bottom: 12px; }
  .mini { border-radius: 10px; }
  .mini b { font-size: 11px; padding: 5px 3px; }
  .mini-marco { font-size: 9.5px; padding: 0 3px 5px; }
  .mini-ini { font-size: 24px; }
  /* a mão de cartas fica numa faixa fixa embaixo, rolando para o lado: casas e cartas cabem juntas na tela */
  #tela-crono .crono-banco {
    position: sticky; bottom: 0; z-index: 3; flex-wrap: nowrap; justify-content: flex-start; gap: 8px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 14px; -webkit-overflow-scrolling: touch;
    min-height: 0; margin: 0 calc(-1 * clamp(14px, 4vw, 40px)); padding: 10px 14px max(10px, env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0; background: var(--jogo-fundo); box-shadow: 0 -12px 24px -10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  }
  #tela-crono .crono-banco .mini { flex: none; width: 78px; scroll-snap-align: start; }
  .crono-acoes { margin: 14px 0 16px; }
}
.crono-acoes { text-align: center; margin-top: 20px; }

/* ---------- fim ---------- */
.fim-cab { text-align: center; padding: clamp(30px, 6vw, 60px) 0 10px; }
.estrelas { display: flex; justify-content: center; gap: 8px; font-size: clamp(46px, 9vw, 70px); line-height: 1; }
.estrelas span { color: var(--linha); animation: estrela .6s var(--mola) both; animation-delay: calc(var(--d) * .18s); }
.estrelas span.on { color: var(--ouro); text-shadow: 0 4px 0 #c49a33; }
.fim-cab h2 { font: 800 clamp(32px, 6vw, 52px)/1 var(--serif); margin: 14px 0 6px; color: var(--titulo); }
.fim-cab > p { margin: 0; color: var(--tinta-2); font-size: 17px; }
.recorde-selo { display: inline-block; margin-top: 12px; padding: 6px 16px; border-radius: 999px; background: var(--coral); color: #fff; font-weight: 700; animation: pop .5s var(--mola) .6s both; }
.fim-pontos { font: 800 clamp(44px, 8vw, 64px)/1 var(--serif); color: var(--coral); margin-top: 14px; font-variant-numeric: tabular-nums; }
.fim-pontos small { display: block; font: 700 13px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.fim-placar { display: inline-grid; gap: 6px; margin: 20px auto 0; min-width: min(100%, 380px); text-align: left; }
.fim-placar div { display: flex; justify-content: space-between; gap: 20px; padding: 10px 16px; border-radius: 12px; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linha); }
.fim-placar div.bonus { background: transparent; box-shadow: none; padding: 2px 16px; font-size: 14px; color: var(--tinta-2); }
.fim-placar div.venc { box-shadow: inset 0 0 0 2px var(--ouro); background: #fff7d8; }
.fim-placar i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--cor); margin-right: 8px; }
.fim-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.fim-rev-tit { font: 700 22px/1.2 var(--serif); margin: 44px 0 14px; color: var(--titulo); }
.revisao { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.rev { display: flex; gap: 14px; padding: 12px; border-radius: var(--raio); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linha); }
.rev img, .rev-ini { width: 76px; height: 96px; border-radius: 10px; object-fit: cover; object-position: center 25%; flex: none; }
.rev-ini { display: grid; place-items: center; background: var(--petroleo); color: var(--creme); font: 800 28px/1 var(--serif); }
.rev small { color: var(--coral); font-weight: 700; font-size: 13px; }
.rev b { display: block; font: 700 17px/1.15 var(--serif); color: var(--titulo); }
.rev p { margin: 4px 0 0; font-size: 14px; color: var(--tinta-2); }
.rev-erro { box-shadow: inset 0 0 0 2px var(--coral); }
.rev-q { background: #fdecec; border-radius: 8px; padding: 6px 8px; color: var(--tinta) !important; }
.rev-q b { display: inline; font: 700 13px var(--sans); }

/* ---------- sobre ---------- */
.sobre { max-width: 760px; padding: 40px 0; }
.sobre h1 { font: 800 clamp(34px, 6vw, 52px)/1 var(--serif); color: var(--titulo); margin: 0 0 16px; }
.sobre h2 { font: 700 24px/1.2 var(--serif); color: var(--titulo); margin: 34px 0 10px; }
.sobre p { font-size: 17px; }
.sobre-modos { list-style: none; padding: 0; display: grid; gap: 12px; }
.sobre-modos li { display: flex; gap: 14px; align-items: flex-start; background: var(--superficie); padding: 14px; border-radius: var(--raio); box-shadow: inset 0 0 0 1px var(--linha); }
.sobre-modos svg { width: 38px; height: 38px; stroke: var(--coral); fill: rgba(242, 96, 107, .12); }
.sobre-modos b { font-family: var(--serif); font-size: 18px; }
.creditos details { background: var(--superficie); border-radius: 12px; margin-bottom: 8px; box-shadow: inset 0 0 0 1px var(--linha); }
.creditos summary { padding: 12px 16px; font-weight: 700; cursor: pointer; }
.creditos summary small { font-weight: 400; color: var(--tinta-2); margin-left: 6px; }
.creditos ul { margin: 0; padding: 0 16px 14px 34px; font-size: 14px; }
.creditos li { margin: 4px 0; }
.sobre-contato { margin-top: 40px; color: var(--tinta-2); font-size: 15px !important; }

/* ---------- impressão ---------- */
.imp-cab { display: flex; align-items: center; gap: 16px; padding: 26px 0; }
.imp-cab .btn-voltar { background: var(--petroleo); color: var(--creme); }
.imp-cab div { flex: 1; }
.imp-cab h2 { margin: 0; font: 800 28px/1.1 var(--serif); color: var(--titulo); }
.imp-cab p { margin: 4px 0 0; color: var(--tinta-2); }
.imp-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.imp-grade .carta { cursor: default; }
@media print {
  @page { size: A4; margin: 10mm; }
  body { background: #fff !important; }
  .topo, .rodape, .nao-imprime { display: none !important; }
  main { padding: 0; max-width: none; }
  /* tamanho de carta de baralho (63 × 88 mm): 9 por folha A4, a folha quebra sempre entre fileiras
     (antes a grade de 3 colunas deixava carta cortada no pé da página e um pedaço dela no topo da seguinte) */
  .imp-grade { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
  .imp-grade .carta { width: 63mm; height: 88mm; aspect-ratio: auto; flex: none; break-inside: avoid; outline: 1px dashed #999; outline-offset: -.5px; }
  .imp-grade .carta:nth-child(9n) { break-after: page; }
  /* a faixa vermelha da pista era sombra interna: o Chrome a imprime vazando fora do canto arredondado */
  .imp-grade .f-pista { box-shadow: none; border-left: 4cqw solid var(--coral); padding-left: 4cqw; }
  .imp-grade .carta-in, .imp-grade .carta-frente { transform: none !important; transition: none; }
  .imp-grade .carta-verso { display: none; }
  .carta-frente { box-shadow: inset 0 0 0 1px #ccc !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- tutorial ---------- */
.tuto {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 14px;
  background: rgba(13, 26, 33, .78); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .3s;
}
.tuto.aberto { opacity: 1; }
.tuto-caixa {
  width: min(100%, 720px); max-height: 100%; overflow: auto;
  background: var(--jogo-fundo); color: var(--jogo-texto); border-radius: 26px;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .06);
  display: flex; flex-direction: column;
  transform: translateY(20px) scale(.97); transition: transform .45s var(--mola);
}
.tuto.aberto .tuto-caixa { transform: none; }
/* os blocos da caixa não encolhem: quando falta altura, a CAIXA rola (antes o palco encolhia
   e as cartas vazavam por cima do texto) */
.tuto-caixa > * { flex: none; }
.tuto-caixa.tem-mais::after {
  content: '▼ role para ver mais'; position: sticky; bottom: 0; z-index: 5; flex: none;
  display: block; margin-top: -34px; padding: 18px 0 8px; text-align: center; pointer-events: none;
  font: 700 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ouro);
  background: linear-gradient(transparent, var(--jogo-fundo) 55%);
}
[data-tema="pixel"] .tuto-caixa.tem-mais::after { color: #b3407f; background: linear-gradient(transparent, #e3f1dc 55%); }
.tuto-cab { display: flex; align-items: center; gap: 12px; padding: 16px 18px 6px; }
.tuto-cab svg { width: 38px; height: 38px; }
.tuto-cab div { flex: 1; }
.tuto-cab small { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; font-weight: 700; }
.tuto-cab b { font: 800 24px/1.05 var(--serif); }
.tuto-pular { border: 0; background: rgba(255, 255, 255, .1); color: var(--creme); padding: 9px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; }
@media (hover: hover) { .tuto-pular:hover { background: rgba(255, 255, 255, .2); } }
.tuto-palco { position: relative; padding: 14px 18px; min-height: 260px; display: grid; place-items: center; }
.tuto-mesa { display: grid; grid-template-columns: repeat(3, minmax(0, 118px)); gap: 12px; justify-content: center; width: 100%; }
.tuto-mesa[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 110px)); }
.tuto-mesa .carta { animation: distribui .55s var(--mola) both; animation-delay: calc(var(--i) * 70ms); }
.tuto-mesa.tuto-crono { display: block; }
.tuto-crono .crono-linha { grid-template-columns: repeat(3, minmax(0, 120px)); justify-content: center; }
.tuto-crono .mini { max-width: 110px; margin: 0 auto; }
.tuto-crono .crono-banco .mini { width: 96px; }
.tuto-palco.com-perg { display: block; }
.tuto-palco.com-perg .tuto-mesa, .tuto-palco.com-perg .mao { display: none; }
.tuto-perg {
  position: relative; z-index: 3;
  background: var(--creme); color: var(--tinta); border-radius: 18px; padding: 18px;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .6);
  animation: modal .4s var(--mola);
}
.mao {
  position: absolute; left: 0; top: 0; width: 54px; height: 54px; z-index: 4; pointer-events: none;
  opacity: 0; transition: transform .6s var(--suave), opacity .3s;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45));
}
.mao.visivel { opacity: 1; }
.mao svg { width: 100%; height: 100%; transition: transform .2s; transform-origin: 40% 20%; }
.mao.toca svg { transform: scale(.82) rotate(-6deg); }
.mao::before {
  content: ''; position: absolute; left: 14px; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  border: 3px solid var(--ouro); opacity: 0;
}
.mao.toca::before { animation: onda .5s var(--suave); }
.tuto-fala { padding: 6px 22px 4px; min-height: 92px; }
.tuto-etapa { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro); margin-bottom: 6px; }
.tuto-fala p { margin: 0; font-size: clamp(16px, 2.3vw, 18.5px); line-height: 1.4; }
.tuto-log { max-height: 8.6em; overflow-y: auto; display: grid; gap: 6px; overscroll-behavior: contain; scrollbar-width: none; }
/* só quando há falas escondidas em cima: a primeira linha visível some suave, no lugar da barra de rolagem */
.tuto-log.cheio { -webkit-mask-image: linear-gradient(transparent, #000 1.8em); mask-image: linear-gradient(transparent, #000 1.8em); }
.tuto-log::-webkit-scrollbar { display: none; }
.tuto-log p:not(.agora) { opacity: .5; font-size: clamp(14px, 2vw, 16px); }
.tuto-x { border: 0; background: rgba(255, 255, 255, .1); color: var(--creme); width: 38px; height: 38px; border-radius: 50%; font-size: 24px; line-height: 1; display: grid; place-items: center; flex: none; }
@media (hover: hover) { .tuto-x:hover { background: rgba(255, 255, 255, .2); } }
.tuto-fala p b { color: var(--ouro); }
.tuto-fala p.entra { animation: sobeFade .45s var(--suave); }
.tuto-regras { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.tuto-rodape { display: flex; justify-content: flex-end; gap: 10px; padding: 8px 18px 18px; min-height: 22px; }
.tuto-rodape .btn { background: var(--coral); box-shadow: 0 3px 0 #c2434e; }
.tuto-rodape .btn-leve { background: transparent; color: var(--creme); box-shadow: inset 0 0 0 2px rgba(253, 251, 228, .5); }
.tuto-fala { cursor: default; }
@media (max-width: 560px), (max-height: 700px) {
  .tuto { padding: 8px; }
  .tuto-caixa { border-radius: 20px; }
  .tuto-cab { padding: 12px 14px 4px; }
  .tuto-cab b { font-size: 20px; }
  .tuto-cab svg { width: 30px; height: 30px; }
  .tuto-palco { min-height: 0; padding: 10px 12px; }
  .tuto-mesa { gap: 8px; }
  .tuto-fala { min-height: 0; padding: 4px 16px 2px; }
  .tuto-fala p { font-size: 15.5px; line-height: 1.35; }
  .tuto-rodape { padding: 6px 14px 14px; }
  .tuto-crono .crono-linha { grid-template-columns: repeat(3, minmax(0, 92px)); gap: 14px 12px; }
  .tuto-crono .slot { max-width: 92px; }
  .tuto-crono .crono-banco { padding: 10px; min-height: 0; }
  .tuto-crono .crono-banco .mini { width: 80px; }
  .tuto-perg { padding: 14px; }
  .tuto-perg .perg-carta { margin-bottom: 8px; }
  .tuto-perg .perg-carta img, .tuto-perg .perg-ini { width: 44px; height: 44px; }
  .tuto-perg .perg-carta b { font-size: 17px; }
  .tuto-perg .perg-enun { font-size: 16.5px; margin-bottom: 10px; }
  .tuto-perg .perg-alts { gap: 7px; }
  .tuto-perg .alt { padding: 8px 12px; font-size: 15px; }
  .tuto-perg .alt-l { width: 26px; height: 26px; }
}

/* ---------- animações ---------- */
@keyframes distribui { from { opacity: 0; transform: translateY(-40px) rotate(-8deg) scale(.8); } }
@keyframes achou { 0% { transform: rotateY(180deg) scale(1); } 40% { transform: rotateY(180deg) scale(1.1); } 100% { transform: rotateY(180deg) scale(1); } }
@keyframes treme { 0%, 100% { translate: 0; } 20% { translate: -6px; } 40% { translate: 6px; } 60% { translate: -4px; } 80% { translate: 4px; } }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
@keyframes pulsa { 50% { opacity: .5; } }
@keyframes sobe { 0% { transform: translateY(6px) scale(1.3); color: var(--ouro); } }
@keyframes faisca { to { transform: translate(var(--dx), var(--dy)) rotate(200deg) scale(.2); opacity: 0; } }
@keyframes cai { to { transform: translate(var(--x), 110vh) rotate(var(--r)); } }
@keyframes toast { from { transform: translate(-50%, 40px); opacity: 0; } }
@keyframes modal { from { transform: translateY(24px) scale(.96); opacity: 0; } }
@keyframes sobeFade { from { transform: translateY(8px); opacity: 0; } }
@keyframes estrela { from { transform: scale(0) rotate(-90deg); opacity: 0; } }
@keyframes combo { 0% { transform: translate(-50%, 20px) scale(.6); opacity: 0; } 20% { transform: translate(-50%, 0) scale(1.08); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -30px) scale(1); opacity: 0; } }
@keyframes banner { 0% { transform: scale(.6); opacity: 0; } 20% { transform: scale(1.05); opacity: 1; } 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(.95); opacity: 0; } }
@keyframes onda { from { transform: scale(.3); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}

/* ---------- extras: lema, jogos, capa sem imagem, filme/livro ---------- */
.hero-lema { margin: 10px 0 0; font: italic 600 clamp(19px, 2.6vw, 26px)/1.25 var(--serif); color: var(--tinta-2); }
.jogos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.jogo {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  border: 0; padding: 16px; border-radius: var(--raio); background: var(--superficie);
  box-shadow: var(--sombra), inset 0 0 0 1px var(--linha);
  transition: transform .25s var(--mola), box-shadow .25s, background .25s;
}
@media (hover: hover) { .jogo:hover { transform: translateY(-3px); } }
.jogo b { font: 700 19px/1.1 var(--serif); color: var(--titulo); }
.jogo > span:last-child { font-size: 14.5px; color: var(--tinta-2); }
.jogo-ico svg { width: 42px; height: 42px; stroke: var(--coral); fill: rgba(242, 96, 107, .12); }
.jogo[aria-checked="true"] { background: var(--ativo-fundo); box-shadow: var(--sombra-alta); }
.jogo[aria-checked="true"] b, .jogo[aria-checked="true"] > span:last-child { color: var(--ativo-texto); }
.jogo[aria-checked="true"] .jogo-ico svg { stroke: var(--ouro); fill: rgba(232, 196, 104, .2); }
.jogo-principal { grid-column: span 2; }
@media (max-width: 480px) { .jogo-principal { grid-column: auto; } }
.jogo-selo { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--destaque); color: var(--destaque-texto); padding: 4px 9px; border-radius: 99px; }
[data-tema="museu"] .jogo[aria-checked="true"] .jogo-ico svg { stroke: #17130e; }

.pacote-capa.capa-vazia {
  display: grid; place-items: center; padding: 0 16px; text-align: center;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .12) 0 14px, transparent 14px 28px),
    var(--cor);
}
.pacote-capa.capa-vazia span { font: 800 22px/1.05 var(--serif); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.pacote-capa[data-icone="filme"]::before, .pacote-capa[data-icone="livro"]::before { font-size: 30px; margin-bottom: -26px; }
/* com fotos não há ícone: o cartaz ou a capa já dizem o que é o tema (e o filtro "Obras" separa esses temas) */
.pacote-capa.capa-vazia[data-icone="filme"]::before { content: "\1F3AC"; }
.pacote-capa.capa-vazia[data-icone="livro"]::before { content: "\1F4DA"; }

/* carta de filme: claquete */
.f-filme {
  position: absolute; inset: 0; display: flex; flex-direction: column; text-align: center;
  background: #1f1d1c; color: #f6f0e0;
}
.f-filme-claq {
  height: 17cqw; flex: none;
  background: repeating-linear-gradient(-55deg, #f6f0e0 0 8cqw, #1f1d1c 8cqw 16cqw);
  border-bottom: 2cqw solid #f6f0e0;
}
.f-filme-corpo { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 3cqw; padding: 6cqw 7cqw; }
.f-filme-corpo span { font-size: max(8px, 6.5cqw); letter-spacing: .12em; text-transform: uppercase; color: var(--laranja); font-weight: 700; }
.f-filme-corpo b { font: 700 max(10px, 11cqw)/1.05 var(--serif); }
.f-filme-corpo small { font-size: max(8px, 7cqw); opacity: .75; }
/* carta de livro: capa com lombada */
.f-livro {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 3cqw;
  padding: 8cqw 8cqw 8cqw 16cqw; text-align: left;
  background: linear-gradient(90deg, rgba(0, 0, 0, .28) 0 8cqw, rgba(255, 255, 255, .15) 8cqw 9cqw, transparent 9cqw), var(--livro, #7a3b2e);
  color: #fbf3df;
}
.f-livro::after { content: ""; position: absolute; left: 16cqw; right: 8cqw; top: 8cqw; height: 1.2cqw; background: var(--ouro); opacity: .8; }
.f-livro span { font-size: max(8px, 6.5cqw); letter-spacing: .12em; text-transform: uppercase; opacity: .8; font-weight: 700; }
.f-livro b { font: 700 max(10px, 11.5cqw)/1.05 var(--serif); }
.f-livro small { font-size: max(8px, 7cqw); opacity: .85; font-style: italic; }

/* ---------- pergaminhos (poderes) — também usados pelos minijogos ---------- */
.poderes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.poderes-jogo { padding: 0 0 10px; }
.poderes-rot { font-size: 13px; font-weight: 700; letter-spacing: .04em; opacity: .8; margin-right: 4px; }
.poderes-rot b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--cor, var(--ouro)); color: #fff; font-size: 13px; margin-right: 2px; }
.poder {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 7px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 28%, transparent);
  font-size: 14px; line-height: 1;
  transition: transform .2s var(--mola), box-shadow .2s, opacity .2s, background .2s;
}
@media (hover: hover) { .poder:hover:not(:disabled) { transform: translateY(-2px); background: color-mix(in srgb, var(--ouro) 22%, transparent); box-shadow: inset 0 0 0 1.5px var(--ouro); } }
.poder:active:not(:disabled) { transform: translateY(1px); }
.poder:disabled { opacity: .38; cursor: not-allowed; }
.poder-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--ouro) 30%, transparent); }
.poder-ico svg { width: 20px; height: 20px; fill: color-mix(in srgb, var(--ouro) 55%, transparent); stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.poder-ico svg .tr { fill: none; }
.poder b { font-weight: 700; }
.poder i { display: none; }
.poder.usando { opacity: 1; background: color-mix(in srgb, var(--verde) 20%, transparent); box-shadow: inset 0 0 0 2px var(--verde), 0 0 16px -2px var(--verde); }
.poder.usou { animation: gastou .5s var(--mola); }
@keyframes gastou { 40% { transform: scale(1.12) rotate(-3deg); } }

/* na pergunta (fundo de papel) */
.poderes-perg { justify-content: flex-start; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--linha); color: var(--tinta); }
.poderes-perg .poderes-rot { opacity: .7; }
.alt.cortada { opacity: .35; text-decoration: line-through; box-shadow: none; filter: grayscale(1); }
.alt.riscada { opacity: .55; animation: treme .4s; }
.perg-aviso { margin: -6px 0 12px; font-weight: 700; color: var(--verde); animation: sobeFade .3s var(--suave); }

/* efeitos no tabuleiro */
.carta.sumida { opacity: .08; pointer-events: none; transform: scale(.9); transition: opacity .35s, transform .35s var(--suave); }
.carta.espiada .carta-in { transition-duration: .3s; }
.carta.farol .carta-verso { box-shadow: 0 0 0 3px var(--ouro), 0 0 26px 6px color-mix(in srgb, var(--ouro) 70%, transparent); animation: farol 1s ease-in-out infinite alternate; }
@keyframes farol { to { box-shadow: 0 0 0 3px var(--ouro), 0 0 10px 2px color-mix(in srgb, var(--ouro) 40%, transparent); } }
@media (max-width: 560px) {
  .poder { padding: 5px 9px 5px 5px; font-size: 12.5px; gap: 5px; }
  .poder-ico { width: 24px; height: 24px; }
  .poder-ico svg { width: 17px; height: 17px; }
  .poderes-jogo .poderes-rot span { display: none; }
  .poderes-jogo .poderes-rot { margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .carta.farol .carta-verso { animation: none; } }

/* ---------- ranking e "achei um erro" ---------- */
.fim-ranking { margin: 22px auto 0; max-width: 420px; text-align: left; padding: 16px 18px; border-radius: var(--raio); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linha); }
.fim-ranking h3 { margin: 0 0 10px; font: 700 15px/1.3 var(--sans); letter-spacing: .02em; color: var(--titulo); }
.fim-ranking ol { margin: 0; padding: 0; list-style: none; counter-reset: rk; display: grid; gap: 4px; }
.fim-ranking li { counter-increment: rk; display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; font-size: 15px; }
.fim-ranking li::before { content: counter(rk) 'º'; width: 28px; font-weight: 700; color: var(--tinta-2); font-size: 13px; }
.fim-ranking li:nth-child(1)::before { color: var(--ouro); }
.fim-ranking li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fim-ranking li b { font-variant-numeric: tabular-nums; }
.fim-ranking li.eu { background: #fff7d8; box-shadow: inset 0 0 0 2px var(--ouro); animation: pop .4s var(--mola); }
.rk-vazio { margin: 0; color: var(--tinta-2); font-size: 14px; }
.rk-form { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--linha); }
.rk-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--tinta-2); }
.rk-form input { font: inherit; font-size: 16px; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--linha); background: #fff; color: var(--tinta); }
.reporte { margin-top: 10px; font-size: 13.5px; }
.reporte-abre, .reporte-cancela { border: 0; background: none; padding: 0; color: var(--tinta-2); text-decoration: underline; text-underline-offset: 3px; font-size: 13.5px; }
.reporte textarea { width: 100%; font: inherit; font-size: 15px; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--linha); background: #fff; color: var(--tinta); resize: vertical; margin-bottom: 6px; }
.reporte .btn { padding: 8px 16px; font-size: 14px; }
.reporte-ok { margin: 0; font-weight: 700; color: var(--verde); }

/* ---------- vídeo de apresentação (botão pequeno + modal) ---------- */
.hero-video {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 10px;
  border: 0; background: transparent; cursor: pointer; padding: 6px 16px 6px 6px; border-radius: 999px;
  font: 700 15px/1 var(--sans); color: var(--titulo);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--titulo) 22%, transparent);
  transition: box-shadow .2s, transform .15s var(--suave);
}
@media (hover: hover) { .hero-video:hover { box-shadow: inset 0 0 0 2px var(--coral); transform: translateY(-1px); } }
.hero-video:active { transform: translateY(1px); }
.hero-video small { font-weight: 400; font-size: 13px; color: var(--tinta-2); }
.hv-play { width: 32px; height: 32px; border-radius: 50%; background: var(--coral); display: grid; place-items: center; flex: none; }
.hv-play::before { content: ''; margin-left: 3px; border-style: solid; border-width: 6.5px 0 6.5px 10px; border-color: transparent transparent transparent #fff; }
.video-modal { width: min(96vw, 1120px); max-height: none; overflow: hidden; border-radius: 16px; background: #0f1f27; }
.video-modal video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0f1f27; }
.video-fechar {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(15, 31, 39, .72); color: #fff; font: 400 26px/1 var(--sans); display: grid; place-items: center;
}
@media (hover: hover) { .video-fechar:hover { background: var(--coral); } }