/* === PERGUNTAS (rodada 15) ===
   Depois da viagem, texto pra ler no próprio ritmo: a página rola normal daqui pra baixo (js/site.js). Uma pergunta
   aberta por vez não é regra: cada uma abre e fecha sozinha (details). O "+" carmim vira "x" quando abre. */
.perguntas { position: relative; z-index: 1; background: var(--navy); border-top: 1px solid var(--line); padding: clamp(80px, 14vh, 140px) var(--pad-x); }
.perguntas-dentro { max-width: 860px; margin: 0 auto; }
.perguntas h2 {
  margin: 0 0 clamp(32px, 6vh, 56px); font-weight: 900; font-size: clamp(34px, 5vw, 64px); line-height: 1; letter-spacing: -.045em;
  color: var(--branco); text-wrap: balance;
}
.perguntas-lista { border-bottom: 1px solid var(--line-forte); }
.perguntas details { border-top: 1px solid var(--line-forte); }
.perguntas summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0; cursor: pointer; list-style: none; color: var(--branco);
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary h3 { margin: 0; font-weight: 700; font-size: clamp(18px, 2vw, 22px); line-height: 1.3; letter-spacing: -.01em; }
.perguntas summary::after {
  content: ''; flex: none; width: 18px; height: 18px; color: var(--ideiaria);
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform .35s var(--ease);
}
.perguntas summary:hover h3 { color: var(--ink-soft); }
.perguntas summary:focus-visible { outline: 2px solid var(--branco); outline-offset: 4px; }
.perguntas details[open] summary::after { transform: rotate(45deg); }
.perguntas details p { margin: -6px 0 0; padding: 0 48px 28px 0; max-width: 68ch; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.perguntas details[open] p { animation: abre-resposta .5s var(--ease); }
@keyframes abre-resposta { from { opacity: 0; transform: translate3d(0, -6px, 0); } }
.perguntas-pe { margin: 36px 0 0; font-size: 17px; color: var(--ink-muted); }
.perguntas-pe a { color: var(--branco); font-weight: 700; text-decoration: underline; text-decoration-color: var(--ideiaria); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.perguntas-pe a:hover { color: var(--ideiaria-hover); }
@media (max-width: 760px) {
  .perguntas details p { padding-right: 0; font-size: 16px; }
}

/* === RODAPE === */
.rodape { background: var(--bg); border-top: 1px solid var(--line); padding: 56px var(--pad-x) 120px; }
.rodape-dentro {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px;
  font-size: 14px; color: var(--ink-muted);
}
.rodape-marca { height: 22px; width: auto; }
.rodape-copia { margin-left: auto; }
/* privacidade e preferências de cookies: discretos, mas sempre à mão (a LGPD pede o caminho fácil de volta) */
.rodape-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.rodape-links a, .rodape-links button {
  font-size: 14px; font-weight: 600; color: var(--ink-muted);
  text-decoration: underline; text-decoration-color: var(--line-forte); text-underline-offset: 4px;
  transition: color .25s, text-decoration-color .25s;
}
.rodape-links a:hover, .rodape-links button:hover { color: var(--branco); text-decoration-color: currentColor; }

/* === O AVIÃOZINHO DO RODAPÉ (easter egg) ===
   No lugar do "aposte em você, amiguinho." (saiu na rodada 13). Aparece pra quem chega até o fim: o avião
   vem voando de cima (do lado da janela acesa) e pousa; o recado se escreve logo depois. Abre o js/janela.js */
.rodape-aviao {
  order: -1; flex-basis: 100%;
  display: inline-flex; align-items: center; gap: 14px; justify-content: flex-start;
  margin-bottom: 8px; text-align: left;
  font-family: var(--mao); font-weight: 700; font-size: clamp(22px, 2vw, 27px); line-height: 1.15; color: var(--giz);
}
.rodape-aviao[hidden] { display: none; }
.rodape-aviao svg { flex: none; width: 60px; height: 38px; overflow: visible; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); }
.rodape-aviao .asa { fill: var(--ideiaria); }
.rodape-aviao .quilha { fill: #A30634; }
.rodape-aviao .vinco { fill: none; stroke: rgba(255, 255, 255, .4); stroke-width: 1; stroke-linecap: round; }
.rodape-aviao span { text-decoration: underline; text-decoration-color: rgba(244, 238, 227, .3); text-underline-offset: 6px; transition: text-decoration-color .3s; }
.rodape-aviao:hover span { text-decoration-color: currentColor; }
.rodape-aviao:hover svg { animation: plana 1.2s ease-in-out infinite alternate; }
.rodape-aviao.pousou svg { animation: pouso 1.7s var(--ease) both; }
.rodape-aviao.pousou span { animation: chega-recado .9s 1.1s var(--ease) both; }
.rodape-aviao.pula svg { animation: pulinho .7s var(--ease); }
@keyframes pouso {
  0% { opacity: 0; transform: translate(min(46vw, 520px), -260px) rotate(-22deg) scale(.55); }
  15% { opacity: 1; }
  65% { transform: translate(-10px, 6px) rotate(5deg) scale(1.04); }
  100% { transform: none; }
}
@keyframes chega-recado { from { opacity: 0; transform: translate3d(-10px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes pulinho { 0%, 100% { transform: none; } 40% { transform: translate(6px, -14px) rotate(-10deg); } 70% { transform: translate(0, 2px) rotate(2deg); } }
@keyframes plana { from { transform: translate(0, 0) rotate(0); } to { transform: translate(4px, -4px) rotate(-4deg); } }

@media (max-width: 760px) {
  .rodape-copia { margin-left: 0; }
  .rodape-aviao { font-size: 22px; }
  .rodape-aviao svg { width: 52px; height: 33px; }
}

/* === JANELA: o jogo do fim (js/janela.js) ===
   Tela cheia por cima de tudo: a foto de São Paulo no canvas, o placar de moedas, o fechar e o botão de trocar
   as moedas. A tela final é da tokn.id (cores dela: é o momento dela, não o da Ideiaria). */
.jogo {
  position: fixed; inset: 0; z-index: 80; overflow: hidden;
  background: var(--bg); color: var(--ink); touch-action: none; user-select: none; -webkit-user-select: none;
  opacity: 0; transition: opacity .5s var(--ease);
}
.jogo.on { opacity: 1; }
.jogo-tela { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
.jogo-placar {
  position: absolute; z-index: 2; left: max(var(--pad-x), env(safe-area-inset-left)); top: max(22px, calc(env(safe-area-inset-top) + 12px));
  display: flex; align-items: center; gap: 10px; pointer-events: none;
  font-weight: 700; font-size: 15px; color: var(--ink-soft); text-shadow: 0 1px 12px rgba(0, 0, 0, .7);
  transition: opacity .5s;
}
/* enquanto a folha não vira avião, o placar espera */
.jogo.na-folha .jogo-placar { opacity: 0; }
/* na tela final o placar sai (ela é transparente, e o 0 aparecia no canto) */
.jogo.no-final .jogo-placar { opacity: 0; }
.jogo-placar b { font-weight: 900; font-size: 26px; letter-spacing: -.02em; color: var(--branco); font-variant-numeric: tabular-nums; }
.jogo-placar.ganhou b { animation: ganhou .5s var(--ease); }
@keyframes ganhou { 40% { transform: scale(1.3); } }
.jogo-placar small { margin-left: 6px; font-family: var(--mao); font-size: 20px; font-weight: 700; color: var(--giz); }
/* moeda do jogo: o mesmo ouro das moedinhas do canvas (borda escura, brilho na diagonal, um fio em relevo) */
.jogo-moeda {
  flex: none; display: block; width: 22px; height: 22px; border-radius: 50%;
  background:
    radial-gradient(circle closest-side, transparent 52%, rgba(120, 78, 12, .55) 54% 62%, transparent 64%),
    linear-gradient(135deg, var(--ouro-luz), var(--ouro) 38%, var(--ouro-sombra) 68%, var(--ouro-reflexo));
  box-shadow: inset 0 0 0 2px var(--ouro-borda), 0 1px 4px rgba(0, 0, 0, .45);
}
.jogo-fechar {
  position: absolute; z-index: 5; right: max(var(--pad-x), env(safe-area-inset-right)); top: max(16px, calc(env(safe-area-inset-top) + 8px));
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-forte); background: rgba(8, 9, 11, .45); color: var(--branco); transition: border-color .25s;
}
.jogo-fechar:hover { border-color: var(--branco); }
.jogo-fechar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.jogo-trocar {
  position: absolute; z-index: 2; left: 50%; bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px));
  display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 22px 0 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .45); background: rgba(8, 9, 11, .6); color: var(--branco);
  font-weight: 700; font-size: 15px; white-space: nowrap;
  transform: translate3d(-50%, 0, 0); transition: border-color .25s, opacity .4s;
}
.jogo-trocar[hidden] { display: none; }
.jogo-trocar:hover { border-color: var(--branco); }
.jogo-trocar.chegou { animation: chega-botao .8s var(--ease) both; }
@keyframes chega-botao { from { opacity: 0; transform: translate3d(-50%, 20px, 0); } to { opacity: 1; transform: translate3d(-50%, 0, 0); } }

/* a tela final: da tokn.id. Ela é transparente: o fundo e a moeda, que pousa na vaga do alto, são do canvas */
.jogo-final {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center;
  padding: 40px var(--pad-x); text-align: center; overflow-y: auto; touch-action: pan-y;
  opacity: 0; transition: opacity .8s var(--ease);
}
/* no meio quando cabe; no celular baixinho rola desde o topo (com justify-content: center o topo sumiria) */
.jogo-final > :first-child { margin-top: auto; }
.jogo-final > :last-child { margin-bottom: auto; }
.jogo-final[hidden] { display: none; }
.jogo-final.on { opacity: 1; }
.jogo-final > * { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.jogo-final.on > * { opacity: 1; transform: none; }
.jogo-final.on > :nth-child(3) { transition-delay: .12s; }
.jogo-final.on > :nth-child(4) { transition-delay: .24s; }
.jogo-final.on > :nth-child(5) { transition-delay: .36s; }
.jogo-final.on > :nth-child(6) { transition-delay: .44s; }
/* a vaga da moeda: vazia e parada (a moeda do canvas pousa nela e acompanha a rolagem) */
.jogo-final > .jogo-final-moeda { flex: none; width: clamp(104px, 17vh, 168px); aspect-ratio: 1; margin-bottom: clamp(12px, 2.6vh, 26px); transform: none; }
.jogo-final-num { font-weight: 900; font-size: clamp(48px, 8.5vw, 104px); line-height: .92; letter-spacing: -.05em; color: var(--toknid-rosa); }
.jogo-final-chamada { max-width: 17em; margin-top: 18px; font-weight: 800; font-size: clamp(22px, 2.5vw, 34px); line-height: 1.18; letter-spacing: -.02em; color: var(--branco); text-wrap: balance; }
.jogo-final-txt { max-width: 34em; margin-top: 16px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; font-weight: 500; color: var(--ink-soft); text-wrap: pretty; }
.jogo-final-txt strong { font-weight: 800; color: var(--branco); }
.jogo-final-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.jogo-toknid { background: var(--toknid-rosa); color: var(--branco); }
.jogo-toknid:hover { background: #FF2E73; }
.jogo-final-zap { margin-top: 22px; font-size: 14px; font-weight: 600; color: var(--ink-muted); text-underline-offset: 4px; }
.jogo-final-zap:hover { color: var(--branco); }