/* Jogos do Interact
   Cores do Brand Center do Rotary: Azure #0067C8 (Interact), Royal Blue
   #17458F, Gold #F7A81B, Sky Blue #00A2E0. Tipografia da casa (a mesma da
   Velo): Bricolage Grotesque nos títulos, Instrument Sans no corpo, DM Mono
   nos números. Sem emoji em lugar nenhum. Celular primeiro. Pouco texto.

   Ordem da página inicial: jogos, trem, treino. O ranking nunca é modal:
   fica do lado (largo) ou embaixo (celular). */

:root {
  --azure: #0067c8;
  --royal: #17458f;
  --navy: #0b1d3f;
  --noite: #061431;
  --sky: #00a2e0;
  --gold: #f7a81b;
  --gold-escuro: #d98c00;
  --fundo: #f2f7fd;
  --papel: #ffffff;
  --tinta: #0e1b33;
  --tinta-fraca: #5a6a84;
  --linha: #dbe4f0;
  --cinza: #919395;
  --certa: var(--azure);
  --perto: var(--gold);
  --fora: #a6a8ab;
  --tecla: #e3eaf4;
  --erro: #c8102e;
  --sombra: 0 18px 44px rgba(11, 29, 63, 0.14);
  --sombra-forte: 0 26px 60px rgba(11, 29, 63, 0.22);
  --raio: 18px;
  --display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --corpo: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --mola: cubic-bezier(0.34, 1.56, 0.64, 1);
  --suave: cubic-bezier(0.22, 0.9, 0.3, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--corpo);
  background: var(--fundo);
  color: var(--tinta);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-tap-highlight-color: transparent;
  line-height: 1.5;
}

a { color: var(--azure); }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
button { font-family: inherit; }

/* Títulos da casa */
.placa, h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 96, "wdth" 100;
  letter-spacing: -0.03em;
  line-height: 0.98;
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* sublinhado ondulado, como na Velo */
.onda {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 30 0, 60 12, 90 6 S 150 0, 198 7' fill='none' stroke='%23f7a81b' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100% / 100% 0.28em;
  padding-bottom: 0.14em;
}

/* ---- movimento ---- */

@keyframes subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes surgir { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes brilho-passa { from { transform: translateX(-130%) skewX(-20deg); } to { transform: translateX(230%) skewX(-20deg); } }
@keyframes trilho-anda { from { background-position: 0 0; } to { background-position: 22px 0; } }
@keyframes pulsar { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.35); opacity: 0.5; } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes barra-cresce { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ouro-pisca { 0%, 100% { box-shadow: 0 0 0 0 rgba(247, 168, 27, 0.55); } 70% { box-shadow: 0 0 0 12px rgba(247, 168, 27, 0); } }

.revelar { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--suave), transform 0.7s var(--suave); }
.revelar.visivel { opacity: 1; transform: none; }
.revelar[data-atraso="1"] { transition-delay: 0.08s; }
.revelar[data-atraso="2"] { transition-delay: 0.16s; }
.revelar[data-atraso="3"] { transition-delay: 0.24s; }
.revelar[data-atraso="4"] { transition-delay: 0.32s; }

/* ---- pílulas ---- */

.pill, .botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 0.9rem var(--corpo);
  padding: 11px 20px; border-radius: 999px;
  border: 1.5px solid var(--linha); background: var(--papel); color: var(--tinta);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform 0.15s var(--mola), background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.pill:hover, .botao:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(11, 29, 63, 0.12); }
.pill:active, .botao:active { transform: translateY(0) scale(0.98); }
.pill.ouro, .botao.dourado { background: var(--gold); border-color: var(--gold); color: var(--tinta); }
.pill.ouro:hover, .botao.dourado:hover { background: #ffb63a; }
.pill.azul, .botao.primario { background: var(--azure); border-color: var(--azure); color: #fff; }
.pill.azul:hover, .botao.primario:hover { background: var(--royal); }
.pill.claro { background: transparent; border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.pill.claro:hover { background: rgba(255, 255, 255, 0.1); box-shadow: none; }
.pill.discreto, .botao.discreto { border: 0; background: none; color: var(--azure); padding-left: 6px; padding-right: 6px; box-shadow: none; }
.pill.largo, .botao.largo { width: 100%; }
.pill:disabled, .botao:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }
.link { border: 0; background: none; padding: 0; color: var(--azure); font: 600 0.82rem var(--corpo); cursor: pointer; }
.link:hover { text-decoration: underline; }

/* ---- topo ---- */
/* A pílula flutuante do Tom Jones, na paleta do Interact: vidro branco
   sobre o azul, a logo à esquerda, os links no meio e, à direita, a
   contagem para o jogo novo e o botão dourado com o ponto que pulsa. */

.topo { position: fixed; inset: 10px 0 auto 0; z-index: 5; padding: 0 12px; pointer-events: none; }
.topo__pilula {
  pointer-events: auto;
  max-width: 1100px; margin: 0 auto; height: 60px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 8px 0 18px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(11, 29, 63, 0.08);
  box-shadow: 0 24px 60px -36px rgba(11, 29, 63, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.topo.rolou .topo__pilula {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(11, 29, 63, 0.12);
  box-shadow: 0 30px 70px -34px rgba(11, 29, 63, 0.7), inset 0 1px 0 #fff;
}
.topo .marca { display: flex; align-items: center; flex-shrink: 0; }
.topo .marca img { height: 38px; width: auto; display: block; }
.topo .divisor { width: 1px; height: 24px; background: rgba(11, 29, 63, 0.14); flex-shrink: 0; }
.topo .secao { color: var(--tinta); text-decoration: none; font: 600 0.95rem/1 var(--corpo); letter-spacing: -0.01em; flex-shrink: 0; }
.topo .secao:hover { color: var(--azure); }
.topo .menu { display: none; align-items: center; gap: 22px; margin-left: auto; margin-right: 8px; }
.topo .menu a {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 0; color: #4f5a6b; text-decoration: none;
  font: 500 0.875rem/1 var(--corpo); transition: color 0.2s;
}
.topo .menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform 0.28s var(--suave);
}
.topo .menu a:hover, .topo .menu a.ativo { color: var(--tinta); }
.topo .menu a:hover::after, .topo .menu a.ativo::after { transform: scaleX(1); transform-origin: left; }
.topo .menu a svg { width: 13px; height: 13px; opacity: 0.55; transition: transform 0.2s var(--suave), opacity 0.15s; }
.topo .menu a:hover svg { transform: translate(1px, -1px); opacity: 1; }
.topo .menu + .acao { margin-left: 0; }

/* o botão dourado */
.topo .acao {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 20px; border: 0; border-radius: 999px;
  background: var(--gold); color: #1a1200;
  font: 600 0.9rem var(--corpo); cursor: pointer;
  box-shadow: 0 14px 34px -16px rgba(247, 168, 27, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.2s var(--mola), box-shadow 0.2s, filter 0.2s;
}
.topo .acao:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 20px 44px -16px rgba(247, 168, 27, 1), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.topo .acao:active { transform: translateY(0); }
.topo .acao b { font-weight: 600; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.topo .acao .pulso { width: 8px; height: 8px; border-radius: 50%; background: var(--royal); box-shadow: 0 0 0 0 rgba(23, 69, 143, 0.45); animation: bate 2.4s ease-out infinite; }
.topo .quem:has(i:not([hidden])) { padding-left: 6px; }
.topo .quem i {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--royal); color: #fff;
  font: 700 0.8rem var(--display); font-style: normal;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* linha de contexto no alto das páginas de jogo */
.contexto-pagina {
  width: 100%; padding: 4px 0 8px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.contexto-pagina h1 { font-size: 1.7rem; margin: 0; color: var(--royal); display: flex; align-items: center; gap: 10px; }
.contexto-pagina h1 .icone { width: 30px; height: 30px; }
.contexto-pagina .dia { font-family: var(--mono); font-size: 0.72rem; color: var(--tinta-fraca); letter-spacing: 0.08em; text-transform: uppercase; }

/* ---- ícones dos jogos ---- */

.icone { width: 28px; height: 28px; display: block; flex-shrink: 0; }
.icone svg { width: 100%; height: 100%; display: block; }

/* ---- abertura (os jogos) ---- */

.abertura {
  position: relative; overflow: hidden; flex-shrink: 0;
  background: #fff;
  color: #fff;
  padding: 108px 18px 42px;
  --mx: 50%; --my: 30%; --saida: 0;
}
.abertura .fundo {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(110% 90% at 85% -10%, #1c4a9c 0%, var(--navy) 42%, var(--noite) 100%);
  opacity: calc(1 - var(--saida));
}
.abertura canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: calc(1 - var(--saida)); }
.abertura::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 320px at var(--mx) var(--my), rgba(0, 162, 224, 0.22), transparent 70%);
  opacity: calc(1 - var(--saida));
}
.abertura .miolo {
  position: relative; max-width: 1040px; margin: 0 auto;
  opacity: calc(1 - var(--saida) * 1.15);
  transform: translateY(calc(var(--saida) * -24px));
}
.abertura h1 { font-size: clamp(3rem, 13vw, 5.6rem); margin: 0; color: #fff; animation: subir 0.8s var(--suave) both; }
.abertura .sub { margin: 14px 0 0; color: rgba(255, 255, 255, 0.72); font-size: 1.05rem; max-width: 44ch; animation: subir 0.8s 0.1s var(--suave) both; }

.jogos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; }
.jogo-cartao {
  --tilt-x: 0deg; --tilt-y: 0deg;
  position: relative; display: flex; flex-direction: column; gap: 18px;
  min-height: 150px; padding: 16px 16px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px; color: #fff; text-decoration: none;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 0.25s var(--suave), background 0.25s, border-color 0.25s, box-shadow 0.25s;
  animation: surgir 0.7s var(--suave) both;
  overflow: hidden;
}
.jogo-cartao:nth-child(1) { animation-delay: 0.15s; }
.jogo-cartao:nth-child(2) { animation-delay: 0.25s; }
.jogo-cartao:nth-child(3) { animation-delay: 0.35s; }
.jogo-cartao:nth-child(4) { animation-delay: 0.45s; }
.jogo-cartao::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transform: translateX(-130%) skewX(-20deg); pointer-events: none;
}
.jogo-cartao:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); }
.jogo-cartao:hover::after { animation: brilho-passa 0.9s var(--suave); }
.jogo-cartao .icone { width: 38px; height: 38px; color: var(--gold); transition: transform 0.4s var(--mola); }
.jogo-cartao:hover .icone { transform: translateY(-4px) rotate(-6deg) scale(1.08); }
.jogo-cartao h3 { margin: 0; font-size: 1.35rem; color: #fff; }
.jogo-cartao .estado {
  align-self: flex-start; margin-top: auto;
  font: 600 0.84rem var(--corpo); padding: 9px 18px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, 0.12); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.2s var(--mola), background 0.2s;
}
.jogo-cartao:hover .estado { transform: translateX(3px); }
.jogo-cartao .estado.jogar { background: var(--gold); border-color: var(--gold); color: var(--tinta); animation: ouro-pisca 2.6s ease-out infinite; }
.jogo-cartao .estado.feito { background: var(--azure); border-color: var(--azure); color: #fff; animation: none; }
.jogo-cartao.jogado { border-color: rgba(0, 162, 224, 0.5); }
.jogo-cartao.jogado .icone { color: var(--sky); }
.jogo-cartao .marca-feito { position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--azure); display: none; place-items: center; }
.jogo-cartao .marca-feito svg { width: 14px; height: 14px; }
.jogo-cartao.jogado .marca-feito { display: grid; animation: surgir 0.4s var(--mola) both; }

/* ---- painel (a corrida) ---- */

.painel {
  background: #fff;
  color: var(--tinta);
  padding: 44px 18px 34px;
  position: relative; overflow: hidden; flex-shrink: 0;
}
.painel::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
  background: repeating-linear-gradient(90deg, rgba(11, 29, 63, 0.14) 0 6px, transparent 6px 22px);
  animation: trilho-anda 1.6s linear infinite;
}
.painel .miolo { max-width: 1040px; margin: 0 auto; position: relative; display: grid; gap: 28px; }
.painel h2.titulo { font-size: clamp(2.4rem, 11vw, 4.2rem); margin: 0; color: var(--royal); }
.painel .sub { margin: 12px 0 0; color: var(--tinta-fraca); font-size: 1rem; max-width: 40ch; }
.painel .cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.estacoes { position: relative; height: 30px; margin: 18px 0 4px; margin-left: var(--largura-nome); margin-right: var(--largura-km); }
.estacoes span {
  position: absolute; top: 0; transform: translateX(-50%);
  font: 500 0.6rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinta-fraca); white-space: nowrap;
}
.estacoes span::after { content: ""; display: block; width: 2px; height: 8px; background: rgba(11, 29, 63, 0.2); margin: 3px auto 0; }
.estacoes span:first-child { transform: none; }
.estacoes span:last-child { transform: translateX(-100%); color: var(--gold-escuro); }
.estacoes span:last-child::after { background: var(--gold); }
.estacoes span b { font-weight: inherit; }
.estacoes span i { font-style: normal; display: none; }
@media (max-width: 639px) { .estacoes span b { display: none; } .estacoes span i { display: inline; } }

.corrida { --largura-nome: 92px; --largura-km: 104px; list-style: none; margin: 0; padding: 0; }
.corrida li {
  display: grid; grid-template-columns: var(--largura-nome) 1fr var(--largura-km);
  align-items: center; padding: 9px 0;
  border-top: 1px solid var(--linha);
  transition: background 0.2s;
}
.corrida li:first-child { border-top: 0; }
.corrida li:hover { background: rgba(11, 29, 63, 0.03); }
.corrida .nome { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.corrida .pos { font: 500 0.68rem var(--mono); color: var(--tinta-fraca); width: 1.4em; }
.corrida .num { font: 500 1.02rem var(--mono); letter-spacing: 0.02em; color: var(--royal); }
.corrida .onde { display: block; font-size: 0.62rem; color: var(--tinta-fraca); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: var(--largura-nome); }
/* o trilho: a parte já andada fica dourada, do km 0 até o trem */
.trilho {
  --p: 0; position: relative; height: 26px;
  background:
    linear-gradient(rgba(11, 29, 63, 0.18), rgba(11, 29, 63, 0.18)) 0 10px / 100% 1px no-repeat,
    linear-gradient(rgba(11, 29, 63, 0.18), rgba(11, 29, 63, 0.18)) 0 16px / 100% 1px no-repeat;
}
.trilho .feito {
  position: absolute; left: 0; top: 9px; height: 9px; border-radius: 0 5px 5px 0;
  width: calc(var(--p) * (100% - 30px) + 15px); min-width: 6px;
  background: linear-gradient(90deg, rgba(247, 168, 27, 0.25), var(--gold));
  box-shadow: 0 0 12px rgba(247, 168, 27, 0.35);
  transition: width 1.6s var(--suave);
}
.trilho i { position: absolute; top: 7px; width: 1px; height: 12px; background: rgba(11, 29, 63, 0.2); z-index: 1; }
.trilho i:nth-child(1) { left: 25%; } .trilho i:nth-child(2) { left: 50%; } .trilho i:nth-child(3) { left: 75%; }
.trilho i:nth-child(4) { left: calc(100% - 2px); width: 2px; height: 18px; top: 4px; background: var(--gold); }
.trem { position: absolute; top: 3px; left: calc(var(--p) * (100% - 30px)); width: 30px; height: 20px; z-index: 2; transition: left 1.6s var(--suave); }
.trem svg { width: 100%; height: 100%; display: block; }
.corrida li:hover .trem { animation: flutuar 1s ease-in-out infinite; }
.corrida .km { text-align: right; font: 500 1.05rem var(--mono); padding-left: 8px; white-space: nowrap; }
.corrida .km small { font-size: 0.68rem; color: var(--tinta-fraca); }
.corrida li.lider .trem { filter: drop-shadow(0 0 6px rgba(247, 168, 27, 0.9)); }
.corrida li.eu { background: linear-gradient(90deg, rgba(247, 168, 27, 0.16), transparent 70%); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 10px; }
.corrida li.eu .num { color: var(--gold-escuro); }
.corrida li.chegou .km { color: var(--gold-escuro); }
.painel .vazio { color: var(--tinta-fraca); font-size: 0.9rem; padding: 14px 0; }

/* o cartão do seu trem, dentro do painel */
.meu-trem {
  display: flex; align-items: center; gap: 14px;
  background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 14px 16px; margin-bottom: 14px;
}
.meu-trem .posicao { font: 500 1.7rem var(--mono); color: var(--azure); line-height: 1; }
.meu-trem .texto { flex: 1; font-size: 0.86rem; min-width: 0; color: var(--tinta-fraca); }
.meu-trem .texto strong { display: block; font-family: var(--display); font-size: 1.05rem; letter-spacing: -0.02em; color: var(--tinta); }
.meu-trem button { border: 0; background: none; color: var(--azure); font: 600 0.85rem var(--corpo); cursor: pointer; }

/* ---- ranking (nunca modal) ---- */

.ranking {
  background: var(--papel); border: 1px solid var(--linha); border-radius: 22px;
  padding: 18px 18px 14px; box-shadow: 0 10px 30px rgba(11, 29, 63, 0.06);
}
.ranking-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ranking-cabeca h3 { margin: 0; font-size: 1.35rem; color: var(--royal); display: flex; align-items: center; gap: 8px; }
.ranking-cabeca h3 i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: pulsar 2s ease-in-out infinite; }
.segmento { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--fundo); border: 1px solid var(--linha); gap: 2px; }
.segmento.largo { display: flex; width: 100%; margin-bottom: 10px; }
.segmento [role="tab"] {
  flex: 1; border: 0; background: transparent; color: var(--tinta-fraca); cursor: pointer;
  font: 600 0.78rem var(--corpo); padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  transition: background 0.2s, color 0.2s, transform 0.2s var(--mola);
}
.segmento [role="tab"]:hover { color: var(--tinta); }
.segmento [role="tab"][aria-selected="true"] { background: var(--royal); color: #fff; box-shadow: 0 4px 12px rgba(23, 69, 143, 0.28); }
.ranking-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ranking-lista li {
  --p: 0; position: relative; overflow: hidden;
  display: grid; grid-template-columns: 2em 1fr auto; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 12px; font-size: 0.92rem;
  animation: subir 0.45s var(--suave) both;
}
.ranking-lista li:nth-child(2) { animation-delay: 0.04s; } .ranking-lista li:nth-child(3) { animation-delay: 0.08s; }
.ranking-lista li:nth-child(4) { animation-delay: 0.12s; } .ranking-lista li:nth-child(5) { animation-delay: 0.16s; }
.ranking-lista li:nth-child(6) { animation-delay: 0.2s; } .ranking-lista li:nth-child(7) { animation-delay: 0.24s; }
.ranking-lista li:nth-child(8) { animation-delay: 0.28s; } .ranking-lista li:nth-child(9) { animation-delay: 0.32s; }
.ranking-lista li:nth-child(10) { animation-delay: 0.36s; } .ranking-lista li:nth-child(n + 11) { animation-delay: 0.4s; }
.ranking-lista li::before {
  content: ""; position: absolute; inset: 0; right: auto; width: calc(var(--p) * 100%);
  background: linear-gradient(90deg, rgba(0, 103, 200, 0.1), rgba(0, 162, 224, 0.04));
  transform-origin: left; animation: barra-cresce 0.9s var(--suave) both; z-index: 0;
}
.ranking-lista li > * { position: relative; z-index: 1; }
.ranking-lista .pos { font: 500 0.8rem var(--mono); color: var(--tinta-fraca); }
.ranking-lista li:nth-child(1) .pos, .ranking-lista li:nth-child(2) .pos, .ranking-lista li:nth-child(3) .pos {
  display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; color: var(--tinta); font-weight: 700;
}
.ranking-lista li:nth-child(1) .pos { background: var(--gold); }
.ranking-lista li:nth-child(2) .pos { background: #d9e2ef; }
.ranking-lista li:nth-child(3) .pos { background: #f3d2a6; }
.ranking-lista .quem { min-width: 0; }
.ranking-lista .quem b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking-lista .quem small { display: block; font-size: 0.72rem; color: var(--tinta-fraca); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking-lista .pts { font: 500 1rem var(--mono); white-space: nowrap; }
.ranking-lista .pts small { font-size: 0.62rem; color: var(--tinta-fraca); margin-left: 2px; }
.ranking-lista li.eu { background: rgba(247, 168, 27, 0.16); }
.ranking-lista li.eu::before { background: linear-gradient(90deg, rgba(247, 168, 27, 0.25), rgba(247, 168, 27, 0.05)); }
.ranking-lista li.salto { grid-template-columns: 1fr; text-align: center; padding: 2px; color: var(--tinta-fraca); font: 500 0.7rem var(--mono); letter-spacing: 0.2em; animation: none; }
.ranking-lista li.salto::before { display: none; }
.ranking-lista li.vazio { grid-template-columns: 1fr; text-align: center; color: var(--tinta-fraca); padding: 22px 10px; font-size: 0.88rem; }
.ranking-lista li.vazio::before { display: none; }
.ranking-pe { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linha); font-size: 0.76rem; color: var(--tinta-fraca); flex-wrap: wrap; }

/* ranking na noite (Vagalumes) e dentro do painel escuro */
.escuro .ranking, body.noite .ranking { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; color: #fff; }
.escuro .ranking-cabeca h3, body.noite .ranking-cabeca h3 { color: #fff; }
.escuro .segmento, body.noite .segmento { background: rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.12); }
.escuro .segmento [role="tab"], body.noite .segmento [role="tab"] { color: rgba(255, 255, 255, 0.6); }
.escuro .segmento [role="tab"]:hover, body.noite .segmento [role="tab"]:hover { color: #fff; }
.escuro .segmento [role="tab"][aria-selected="true"], body.noite .segmento [role="tab"][aria-selected="true"] { background: var(--gold); color: var(--tinta); box-shadow: none; }
.escuro .ranking-lista li::before, body.noite .ranking-lista li::before { background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)); }
.escuro .ranking-lista .pos, .escuro .ranking-lista .quem small, .escuro .ranking-lista .pts small, .escuro .ranking-pe,
body.noite .ranking-lista .pos, body.noite .ranking-lista .quem small, body.noite .ranking-lista .pts small, body.noite .ranking-pe { color: rgba(255, 255, 255, 0.55); }
.escuro .ranking-lista li:nth-child(2) .pos, body.noite .ranking-lista li:nth-child(2) .pos { background: rgba(255, 255, 255, 0.8); }
.escuro .ranking-lista li.eu, body.noite .ranking-lista li.eu { background: rgba(247, 168, 27, 0.18); }
.escuro .ranking-lista li.vazio, body.noite .ranking-lista li.vazio { color: rgba(255, 255, 255, 0.6); }
.escuro .ranking-pe, body.noite .ranking-pe { border-color: rgba(255, 255, 255, 0.12); }
.escuro .link, body.noite .link { color: var(--gold); }

/* ---- treino e fila ---- */

.hub { flex: 1; width: 100%; max-width: 700px; margin: 0 auto; padding: 20px 18px 40px; }
.hub h2.secao { font-size: 1.9rem; margin: 30px 0 14px; color: var(--royal); }
.hub h2.secao:first-child { margin-top: 0; }

.chao {
  flex: 1; width: 100%; padding: 40px 18px 40px; position: relative;
  background-color: var(--fundo);
  background-image: radial-gradient(rgba(23, 69, 143, 0.12) 1px, transparent 1px);
  background-size: 22px 22px;
}
.chao .miolo { max-width: 1040px; margin: 0 auto; }
.chao h2.secao { font-size: 1.9rem; margin: 0 0 14px; color: var(--royal); }
.chao h2.secao small { display: block; font: 500 0.66rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-fraca); margin-top: 8px; }
.treino-grade { display: grid; gap: 22px; }

.cartao-treino {
  display: flex; align-items: center; gap: 16px;
  background: var(--papel); border: 1.5px dashed var(--linha); border-radius: 22px;
  padding: 22px 20px; text-decoration: none; color: inherit;
  transition: transform 0.2s var(--suave), box-shadow 0.2s, border-color 0.2s;
}
.cartao-treino:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: var(--sky); border-style: solid; }
.cartao-treino .icone { width: 44px; height: 44px; color: var(--royal); transition: transform 0.4s var(--mola); }
.cartao-treino:hover .icone { transform: rotate(-8deg) scale(1.1); }
.cartao-treino h3 { margin: 0; font-size: 1.55rem; color: var(--royal); flex: 1; }
.cartao-treino .estado { font: 600 0.85rem var(--corpo); padding: 10px 18px; border-radius: 999px; white-space: nowrap; background: var(--fundo); color: var(--royal); border: 1.5px solid var(--linha); }
.cartao-treino:hover .estado { background: var(--royal); color: #fff; border-color: var(--royal); }

.fila { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fila li { font: 500 0.78rem var(--mono); color: var(--tinta-fraca); border: 1px dashed var(--linha); border-radius: 999px; padding: 7px 12px; background: var(--papel); transition: transform 0.2s var(--mola), color 0.2s, border-color 0.2s; }
.fila li:hover { transform: translateY(-2px) rotate(-1deg); color: var(--royal); border-color: var(--sky); }

.rodape {
  max-width: 1040px; margin: 40px auto 0; padding-top: 18px; border-top: 1px solid var(--linha);
  font-size: 0.85rem; color: var(--tinta-fraca);
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}
.rodape a { color: var(--azure); text-decoration: none; font-weight: 600; }
.rodape a:hover { text-decoration: underline; }

/* ---- página de jogo: jogo + lateral ---- */

.pagina { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 92px 16px 30px; display: grid; gap: 22px; }
.lateral { display: grid; gap: 16px; align-content: start; }
.jogo { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; min-width: 0; }
.aviso { min-height: 1.4em; margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--gold-escuro); text-align: center; transition: opacity 0.2s; }
.aviso:empty { opacity: 0; }

/* resultado: aparece no lugar do modal antigo */
.resultado {
  position: relative; overflow: hidden;
  background: var(--royal); color: #fff; border-radius: 22px; padding: 22px 20px;
  animation: surgir 0.5s var(--mola) both;
  background-image: radial-gradient(120% 100% at 100% 0%, rgba(0, 162, 224, 0.4), transparent 60%);
}
.resultado::before {
  content: ""; position: absolute; inset: -40% -20% auto auto; width: 180px; height: 180px; border-radius: 50%;
  border: 24px solid rgba(247, 168, 27, 0.18); pointer-events: none;
}
.resultado h2 { margin: 0; font-size: 2rem; color: #fff; }
.resultado .palavra-revelada { font-size: 2.6rem; color: var(--gold); margin: 10px 0 2px; font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.resultado .dica { margin: 4px 0 0; color: rgba(255, 255, 255, 0.78); font-size: 0.92rem; }
.resultado .pontos { margin: 12px 0 0; font: 500 0.92rem var(--mono); color: rgba(255, 255, 255, 0.9); }
.resultado .acoes { margin-top: 16px; }
.resultado .acoes .botao { border-color: transparent; }
.resultado .acoes .botao.primario { background: var(--gold); color: var(--tinta); }
.resultado .acoes .botao.primario:hover { background: #ffb63a; }
.resultado .acoes .botao:not(.primario) { background: rgba(255, 255, 255, 0.12); color: #fff; }
.resultado .mudo { color: rgba(255, 255, 255, 0.65); margin: 12px 0 0; }
.resultado .mudo a { color: #fff; }
.resultado .tabela-caixa { margin-top: 14px; border-color: rgba(255, 255, 255, 0.16); background: rgba(0, 0, 0, 0.16); }
.resultado .tabela th { background: transparent; color: rgba(255, 255, 255, 0.6); }
.resultado .tabela th, .resultado .tabela td { border-color: rgba(255, 255, 255, 0.1); }
.resultado .tabela tr.eu-linha td { background: rgba(247, 168, 27, 0.18); font-weight: 400; }
.resultado .tabela .sub { color: rgba(255, 255, 255, 0.6); }
.resultado .tempos { border-color: rgba(255, 255, 255, 0.16); background: rgba(0, 0, 0, 0.16); }
.resultado .tempos li { border-color: rgba(255, 255, 255, 0.1); }
.resultado .tempos .pos, .resultado .tempos .mudo { color: rgba(255, 255, 255, 0.6); }
.resultado .tempos .t { color: #fff; }
.resultado .tempos li.eu-linha { background: rgba(247, 168, 27, 0.2); }

/* ---- Termo ---- */

.grade { display: grid; grid-template-rows: repeat(6, 1fr); gap: 6px; width: min(100%, 340px); aspect-ratio: 5 / 6; max-height: 46dvh; }
.fileira { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.celula {
  display: grid; place-items: center; border: 2px solid var(--linha); border-radius: 10px;
  font: 800 clamp(1.1rem, 6vw, 1.7rem) var(--display); text-transform: uppercase;
  background: var(--papel); color: var(--tinta); aspect-ratio: 1; transition: transform 0.1s;
}
.celula.digitando { border-color: var(--sky); transform: scale(1.04); }
.celula.certa, .celula.perto, .celula.fora { color: #fff; border-color: transparent; }
.celula.certa { background: var(--certa); }
.celula.perto { background: var(--perto); color: var(--tinta); }
.celula.fora { background: var(--fora); }
.fileira.revelando .celula { animation: virar 0.5s ease both; }
.fileira.revelando .celula:nth-child(2) { animation-delay: 0.1s; }
.fileira.revelando .celula:nth-child(3) { animation-delay: 0.2s; }
.fileira.revelando .celula:nth-child(4) { animation-delay: 0.3s; }
.fileira.revelando .celula:nth-child(5) { animation-delay: 0.4s; }
@keyframes virar { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.fileira.tremendo { animation: tremer 0.4s; }
@keyframes tremer { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

.teclado { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 6px; user-select: none; margin-top: auto; }
.teclado .linha { display: flex; justify-content: center; gap: 5px; }
.tecla {
  flex: 1 1 0; max-width: 46px; height: 52px; border: 0; border-radius: 8px;
  background: var(--tecla); color: var(--tinta); font: 600 0.95rem var(--corpo);
  text-transform: uppercase; cursor: pointer; touch-action: manipulation;
  transition: transform 0.08s, background 0.2s;
}
.tecla.larga { flex: 1.6 1 0; max-width: 74px; font-size: 0.72rem; }
.tecla:hover { background: #d5dfec; }
.tecla:active { transform: scale(0.94); filter: brightness(0.9); }
.tecla.certa { background: var(--certa); color: #fff; }
.tecla.perto { background: var(--perto); color: var(--tinta); }
.tecla.fora { background: var(--fora); color: #fff; opacity: 0.8; }

/* ---- Memória ---- */

.memoria .placar-vivo { display: flex; justify-content: space-between; width: min(100%, 380px); font: 500 0.72rem var(--mono); color: var(--tinta-fraca); letter-spacing: 0.08em; text-transform: uppercase; }
.memoria .placar-vivo b { display: block; color: var(--tinta); font-size: 1.3rem; letter-spacing: 0; }
.tabuleiro { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(100%, 380px); perspective: 900px; }
.carta {
  aspect-ratio: 1; border: 0; background: none; padding: 0; cursor: pointer; position: relative;
  transform-style: preserve-3d; transition: transform 0.35s;
}
.carta:hover:not(.virada):not(.achada) { transform: translateY(-3px); }
.carta.virada, .carta.achada { transform: rotateY(180deg); }
.carta.achada { cursor: default; }
.carta .face, .carta .verso {
  position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden;
  display: grid; place-items: center; padding: 6px;
}
.carta .verso { background: var(--royal); background-image: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.14), transparent 55%); }
.carta .verso::after { content: ""; width: 34%; height: 34%; border-radius: 50%; border: 3px solid var(--gold); opacity: 0.9; }
.carta .face {
  transform: rotateY(180deg); background: var(--papel); border: 2px solid var(--linha);
  font: 800 clamp(0.72rem, 3.4vw, 0.98rem) var(--display); letter-spacing: -0.02em; text-align: center; color: var(--royal);
}
.carta.achada .face { background: var(--azure); border-color: var(--azure); color: #fff; }
.carta.errou .face { border-color: var(--gold); }
.memoria .nota { font-size: 0.82rem; color: var(--tinta-fraca); text-align: center; max-width: 36ch; margin: 6px auto 0; }
.tempos { list-style: none; margin: 10px 0 0; padding: 0; border: 1px solid var(--linha); border-radius: 12px; max-height: 32dvh; overflow: auto; }
.tempos li { display: grid; grid-template-columns: 2em 1fr auto; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--linha); font-size: 0.9rem; }
.tempos li:first-child { border-top: 0; }
.tempos li.eu-linha { background: rgba(247, 168, 27, 0.18); font-weight: 600; }
.tempos .pos, .tempos .t { font-family: var(--mono); color: var(--tinta-fraca); }
.tempos .t { color: var(--tinta); }

/* ---- Oratória (treino) ---- */

.oratoria { flex: 1; justify-content: flex-start; padding: 92px 16px 30px; text-align: center; max-width: 592px; margin: 0 auto; }
.oratoria .contexto-pagina { text-align: left; }
.oratoria .selo { display: inline-block; font: 500 0.66rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--linha); border-radius: 999px; padding: 5px 11px; color: var(--tinta-fraca); margin: 0 0 6px; }
.oratoria .tema { font-size: 1.7rem; color: var(--royal); margin: 6px 0 14px; max-width: 26ch; font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.relogio { font: 500 clamp(3.4rem, 24vw, 5.4rem) var(--mono); line-height: 1; margin: 6px 0 2px; }
.relogio.preparo { color: var(--gold-escuro); }
.relogio.falando { color: var(--azure); }
.fase { font-size: 0.95rem; font-weight: 600; color: var(--tinta-fraca); margin: 0 0 16px; min-height: 1.4em; }
.barra { width: min(100%, 340px); height: 8px; background: var(--linha); border-radius: 4px; overflow: hidden; margin-bottom: 18px; }
.barra div { height: 100%; width: 0; background: var(--azure); transition: width 0.25s linear; }
.barra.preparo div { background: var(--gold); }
.opcoes { display: flex; gap: 8px; width: min(100%, 340px); margin-bottom: 8px; }
.opcoes label { flex: 1; border: 1.5px solid var(--linha); border-radius: 14px; padding: 10px 6px; cursor: pointer; background: var(--papel); font-size: 0.76rem; color: var(--tinta-fraca); transition: border-color 0.15s, transform 0.15s var(--mola); }
.opcoes label:hover { transform: translateY(-2px); }
.opcoes label strong { display: block; font-family: var(--display); font-size: 1rem; color: var(--tinta); letter-spacing: -0.02em; }
.opcoes input { display: none; }
.opcoes label:has(input:checked) { border-color: var(--azure); }
.oratoria .acoes { display: flex; flex-direction: column; gap: 8px; width: min(100%, 340px); }
.oratoria .nota { font-size: 0.82rem; color: var(--tinta-fraca); max-width: 38ch; margin: 14px auto 0; }

/* ---- Censo ---- */

.progresso { display: flex; gap: 4px; width: min(100%, 360px); }
.progresso span { flex: 1; height: 5px; border-radius: 3px; background: var(--linha); transition: background 0.3s; }
.progresso span.certo { background: var(--azure); }
.progresso span.errado { background: var(--gold); }
.progresso span.atual { background: var(--cinza); }
.pergunta { width: min(100%, 360px); text-align: center; margin-top: 10px; }
.pergunta .contador { font: 500 0.7rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-fraca); margin: 0; }
.pergunta h2 { font-size: 2rem; margin: 6px 0 4px; color: var(--royal); }
.pergunta .contexto { margin: 0 0 14px; color: var(--tinta-fraca); font-size: 0.95rem; }
.opcao {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: var(--papel); border: 2px solid var(--linha); border-radius: var(--raio);
  padding: 18px 18px; margin: 8px 0; cursor: pointer;
  font: 700 1.1rem var(--display); letter-spacing: -0.02em; color: var(--tinta);
  transition: border-color 0.15s, transform 0.15s var(--mola), box-shadow 0.15s;
}
.opcao:hover:not(:disabled) { border-color: var(--sky); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 29, 63, 0.1); }
.opcao:active { transform: scale(0.99); }
.opcao .n { font: 500 1.4rem var(--mono); color: var(--tinta-fraca); min-width: 3.5ch; text-align: right; }
.opcao.maior { border-color: var(--azure); }
.opcao.maior .n { color: var(--azure); }
.opcao.menor { opacity: 0.7; }
.opcao.escolhida.menor { border-color: var(--gold); }
.opcao:disabled { cursor: default; }
.ou { font: 500 0.7rem var(--mono); letter-spacing: 0.16em; color: var(--cinza); margin: 2px 0; }
.veredito { min-height: 1.5em; font-weight: 700; margin: 8px 0 0; font-size: 1.05rem; }
.veredito.certo { color: var(--azure); }
.veredito.errado { color: var(--gold-escuro); }
.censo .fonte { font-size: 0.72rem; color: var(--tinta-fraca); text-align: center; max-width: 40ch; margin-top: auto; padding-top: 12px; }

/* ---- Vagalumes ---- */

body.noite { background: #050d21; color: #eef2f8; }
body.noite .hub h2.secao { color: #fff; }
body.noite .mudo, body.noite .rodape { color: rgba(255, 255, 255, 0.62); border-color: rgba(255, 255, 255, 0.14); }
.ceu { flex-shrink: 0; background: radial-gradient(ellipse at 50% 0%, #10306a 0%, #071633 45%, #050d21 100%); color: #fff; padding: 100px 18px 10px; }
.ceu .miolo { max-width: 700px; margin: 0 auto; }
.ceu h1 { font-size: clamp(2.4rem, 11vw, 4rem); margin: 0; }
.ceu h1 .ouro { color: var(--gold); }
.ceu .sub { margin: 12px 0 0; color: rgba(255, 255, 255, 0.72); font-size: 0.95rem; max-width: 42ch; }
.ceu .numeros { display: flex; gap: 22px; flex-wrap: wrap; margin: 16px 0 6px; font-size: 0.74rem; color: rgba(255, 255, 255, 0.6); }
.ceu .numeros b { display: block; color: #fff; font: 500 1.35rem var(--mono); line-height: 1.1; }
.mapa-caixa { margin: 6px auto 0; max-width: 460px; }
#mapa { width: 100%; height: auto; display: block; }
#brasil { fill: rgba(255, 255, 255, 0.04); stroke: rgba(255, 255, 255, 0.35); stroke-width: 0.8; stroke-linejoin: round; }
.luz { fill: var(--gold); filter: url(#brilho); animation: piscar 3s ease-in-out infinite; }
.luz.fraca { fill: #bfe3ff; opacity: 0.75; animation: piscar-fraco 4.5s ease-in-out infinite; }
@keyframes piscar { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes piscar-fraco { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.9; } }
.acender { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--raio); padding: 20px; margin-bottom: 6px; }
.acender h2 { margin: 0 0 6px; font-size: 1.9rem; color: #fff; }
.acender textarea { display: block; width: 100%; margin: 10px 0; padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.25); color: #fff; font: 400 1rem var(--corpo); resize: vertical; }
.acender .botao { margin-top: 8px; }
.acender .aviso { color: var(--gold); }
.dias { list-style: none; margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--raio); overflow: hidden; }
.dias li { display: grid; grid-template-columns: 58px 1fr; gap: 12px; padding: 10px 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); }
.dias li:first-child { border-top: 0; }
.dias .data { font: 500 0.66rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.55); }
.dias .data b { display: block; color: #fff; font-size: 1rem; }
.dias li.hoje { background: rgba(247, 168, 27, 0.14); }
.dias li.hoje .data b { color: var(--gold); }
.dias li.passou { opacity: 0.55; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.9rem; }
.feed li:first-child { border-top: 0; }
.feed .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-top: 6px; box-shadow: 0 0 10px var(--gold); }
.feed li b { color: #fff; }
.feed li p { margin: 2px 0 0; color: rgba(255, 255, 255, 0.85); }
.feed .vazio { color: rgba(255, 255, 255, 0.6); padding: 12px 0; display: block; }

/* ---- diálogos (só entrada e ajuda) ---- */

dialog {
  border: 0; border-radius: 22px; background: var(--papel); color: var(--tinta);
  padding: 24px 22px; width: min(92vw, 440px); max-height: 88dvh; box-shadow: var(--sombra-forte);
}
dialog[open] { animation: surgir 0.3s var(--mola) both; }
dialog::backdrop { background: rgba(6, 20, 49, 0.6); backdrop-filter: blur(3px); }
dialog h2 { margin: 0 0 8px; font-size: 1.8rem; color: var(--royal); }
dialog p { margin: 8px 0; font-size: 0.95rem; }
dialog label { display: block; margin: 12px 0 4px; font-size: 0.85rem; font-weight: 600; }
dialog input, dialog select { display: block; width: 100%; margin-top: 4px; padding: 11px 14px; font: 400 1rem var(--corpo); border: 1.5px solid var(--linha); border-radius: 12px; background: var(--fundo); color: var(--tinta); }
dialog form > .botao.primario { width: 100%; margin-top: 14px; }
.acoes { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.acoes .botao { flex: 1 1 auto; }
.mudo { color: var(--tinta-fraca); font-size: 0.85rem; }
.erro { color: var(--erro); font-weight: 600; min-height: 1.2em; margin: 6px 0 0; }
.erro:empty { display: none; }
.exemplo .fileira { width: 200px; margin: 10px 0 4px; }
.exemplo .celula { font-size: 1rem; }
.dica { text-align: center; }
.pontos { text-align: center; font: 500 1rem var(--mono); color: var(--royal); }

/* o convite do Instagram, depois de terminar uma partida */
.instagram { text-align: center; padding-top: 30px; }
.instagram .selo-ig {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--azure), var(--sky)); color: #fff; box-shadow: 0 12px 30px rgba(0, 103, 200, 0.35);
  animation: flutuar 3s ease-in-out infinite;
}
.instagram .selo-ig svg { width: 32px; height: 32px; }
.instagram h2 { font-size: 1.9rem; }
.instagram .arroba { font: 500 1.05rem var(--mono); color: var(--azure); margin: 4px 0 12px; }
.instagram .acoes { flex-direction: column; }
.instagram .acoes .botao.primario { background: var(--gold); border-color: var(--gold); color: var(--tinta); }
.instagram .acoes .botao.primario:hover { background: #ffb63a; }

/* tabela (resultado do censo) */
.tabela-caixa { max-height: 46dvh; overflow: auto; border: 1px solid var(--linha); border-radius: 12px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tabela th, .tabela td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--linha); }
.tabela th { font: 500 0.66rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-fraca); position: sticky; top: 0; background: var(--papel); }
.tabela td.num, .tabela th.num { text-align: right; font-family: var(--mono); }
.tabela tr.eu-linha td { background: rgba(247, 168, 27, 0.18); font-weight: 600; }
.tabela .pos { color: var(--tinta-fraca); width: 2.2em; font-family: var(--mono); }
.tabela .sub { display: block; font-size: 0.75rem; color: var(--tinta-fraca); font-weight: 400; }
.tabela .vazio { text-align: center; color: var(--tinta-fraca); padding: 24px 10px; }

/* ---- respiro ---- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .revelar { opacity: 1; transform: none; }
  .trem { transition: none; }
  .luz { opacity: 0.9; } .luz.fraca { opacity: 0.5; }
}

@media (max-height: 640px) { .tecla { height: 44px; } .grade { max-height: 40dvh; } }
@media (min-width: 540px) {
  .jogos { gap: 14px; margin-top: 34px; }
  .jogo-cartao { min-height: 178px; padding: 20px 20px 18px; }
  .jogo-cartao .icone { width: 44px; height: 44px; }
  .jogo-cartao h3 { font-size: 1.7rem; }
  .jogo-cartao .estado { font-size: 0.88rem; padding: 10px 20px; }
  .jogo-cartao .marca-feito { top: 18px; right: 18px; width: 26px; height: 26px; }
}
@media (min-width: 640px) {
  .corrida { --largura-nome: 150px; --largura-km: 118px; }
  .corrida .onde { max-width: 150px; }
  .topo { padding: 0 24px; }
  .topo__pilula { padding: 0 10px 0 22px; gap: 14px; }
  .topo .marca img { height: 42px; }
  .abertura, .painel, .chao { padding-left: 28px; padding-right: 28px; }
  .treino-grade { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (min-width: 760px) {
  .topo .menu { display: flex; }
}
@media (min-width: 900px) {
  .pagina { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; padding-top: 100px; }
  .lateral { position: sticky; top: 90px; }
  .jogos { grid-template-columns: repeat(4, 1fr); }
  .painel .miolo { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .painel .lateral { position: sticky; top: 90px; }
}