/* =====================================================================
   A IMERSÃO: contexto da partida, torcida, intervalo, comemoração.

   ⚠️ A regra que governa este arquivo: os eventos de AMBIENTE existem
   para dar clima, não para competir com o gol. Se a torcida tiver o
   mesmo peso visual do gol, a narração vira uma parede de texto igual e
   o momento alto — que é o motivo de a partida correr — deixa de se
   destacar. Ambiente é discreto de propósito.
   ===================================================================== */

/* ───────────── o que está em jogo, antes de apertar o botão ───────── */

.contexto {
  background: linear-gradient(150deg, var(--piso-alto), var(--piso));
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 12px 13px;
  margin: 0 0 12px;
  position: relative;
}
/* ⚠️ o selo do clássico é a única coisa desta tela que usa a cor do
   alerta sem ser um alerta: clássico não é aviso, é expectativa */
.ctx-selo {
  display: inline-block;
  font-family: var(--cond);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--ambar);
  color: var(--noite);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}
.ctx-linha {
  font-size: 13px;
  line-height: 1.45;
  color: var(--giz-medio);
  margin: 4px 0;
  padding-left: 12px;
  position: relative;
}
.ctx-linha::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--giz-fraco);
}
.ctx-linha.forte { color: var(--giz); font-weight: 500; }
.ctx-linha.forte::before { background: var(--ambar); }
.ctx-linha.ctx-rebaixamento::before,
.ctx-linha.ctx-jejum::before,
.ctx-linha.ctx-fase-ruim::before { background: var(--sangue); }
.ctx-linha.ctx-titulo::before,
.ctx-linha.ctx-embalado::before,
.ctx-linha.ctx-fase::before { background: var(--relva); }
.ctx-publico {
  display: block;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--linha);
  font-size: 11px;
  color: var(--giz-fraco);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ───────────── os eventos de ambiente na narração ─────────────────── */

/* ⚠️ Em itálico e apagados: o olho passa por eles e sente o clima sem
   parar para ler. É o oposto do gol, que para o olho. */
.av-ev.ev-estadio,
.av-ev.ev-torcida {
  font-style: italic;
  color: var(--giz-fraco);
}
.av-ev.ev-estadio { color: var(--giz-medio); }

/* o intervalo CORTA a narração em duas metades, como corta o jogo */
.av-ev.ev-intervalo {
  border-top: 1px solid var(--linha-forte);
  border-bottom: 1px solid var(--linha-forte);
  background: rgba(234, 241, 238, 0.04);
  color: var(--giz-medio);
  font-weight: 500;
}

/* a tensão dos minutos finais aquece a cor sem gritar */
.av-ev.ev-tensao {
  color: var(--ambar);
  font-weight: 500;
}

/* ⚠️ A comemoração herda o âmbar do gol, mas em corpo menor: ela é a
   continuação do momento, não um segundo momento. */
.av-ev.ev-comemora {
  color: var(--ambar);
  font-style: italic;
}

.av-ev.ev-banco-pronto {
  color: var(--giz);
  font-weight: 500;
}

/* ───────────── marcos de carreira ─────────────────────────────────── */

.marco-carreira {
  background: linear-gradient(140deg, var(--ambar-fundo), var(--piso));
  border: 1px solid var(--ambar);
  border-radius: var(--raio);
  padding: 13px 14px;
  margin: 10px 0;
  text-align: center;
}
.mc-selo {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ambar);
  font-weight: 700;
}
.mc-texto {
  display: block;
  font-family: var(--cond);
  font-size: 20px;
  line-height: 1.2;
  margin-top: 5px;
}
.mc-sub { display: block; font-size: 12px; color: var(--giz-medio); margin-top: 5px; }

/* ═══════════ O LIMITE DA VERSÃO GRATUITA ════════════════════════════
   ⚠️ O recado aparece NA TELA onde o jogador está, nunca numa janela
   que interrompe. Interromper o jogo para vender é o jeito mais rápido
   de fazer alguém fechar o aplicativo — e quem está no meio de uma
   partida não quer conversar sobre preço. */

.acesso {
  background: var(--piso-fundo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 11px 13px;
  margin: 0 0 11px;
}
.acesso b { display: block; font-family: var(--cond); font-size: 16px; }
.acesso p { font-size: 12.5px; color: var(--giz-medio); line-height: 1.45; margin: 5px 0 0; }
.acesso.reta-final { border-color: rgba(242, 177, 52, 0.45); background: var(--ambar-fundo); }
.acesso-botao {
  display: inline-block;
  margin-top: 9px;
  min-height: 40px;
  line-height: 40px;
  padding: 0 16px;
  background: var(--ambar);
  color: var(--noite);
  border-radius: 10px;
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.paywall {
  background: linear-gradient(165deg, var(--piso-alto), var(--piso));
  border: 1px solid var(--ambar);
  border-radius: 18px;
  padding: 20px;
  margin: 14px 0;
  text-align: center;
}
.pw-selo {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ambar);
  font-weight: 700;
  margin-bottom: 8px;
}
.paywall h3 { font-family: var(--cond); font-size: 26px; margin: 0 0 8px; font-weight: 600; }
.paywall p { font-size: 13px; color: var(--giz-medio); line-height: 1.5; margin: 0 0 12px; }
.pw-lista { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; text-align: left; }
.pw-lista li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  font-size: 13px;
  color: var(--giz-medio);
}
.pw-lista li::before { content: "✓"; color: var(--relva); font-weight: 700; }
.paywall .acao { margin: 0; display: block; text-decoration: none; line-height: 44px; }
.pw-pe { font-size: 11px !important; color: var(--giz-fraco) !important; margin: 10px 0 0 !important; }

/* ═══════════════════ A ENTREVISTA PÓS-JOGO ══════════════════════════
   ⚠️ As três respostas aparecem POR EXTENSO, em aspas: o jogador não
   escolhe "humilde", escolhe a frase que vai sair com o nome dele. É a
   única tela do jogo em que ele fala, e tratá-la como um menu de opções
   jogaria fora justamente o que ela tem de diferente. */

.entrevista {
  background: linear-gradient(160deg, var(--piso-alto), var(--piso));
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 16px;
  margin: 10px 0;
}
.ent-veiculo {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--giz-fraco);
}
.ent-pergunta {
  font-family: var(--cond);
  font-size: 24px;
  line-height: 1.15;
  font-weight: 600;
  margin: 8px 0 0;
}
.ent-contexto { font-size: 12px; color: var(--giz-fraco); margin: 9px 0 0; }

.respostas { display: grid; gap: 8px; margin: 10px 0; }
.resposta {
  text-align: left;
  background: var(--piso);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 13px;
  color: var(--giz);
  cursor: pointer;
  min-height: 44px;
  transition: border-color 0.15s, background 0.15s;
}
.resposta:active { transform: scale(0.995); }
.resposta.perigosa { border-color: rgba(224, 96, 85, 0.4); }
.rp-fala {
  display: block;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
}
.rp-nota { display: block; font-size: 11.5px; color: var(--giz-fraco); margin-top: 7px; }
.rp-efeitos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.rp-efeitos i {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(234, 241, 238, 0.06);
}
.rp-efeitos .mais { color: var(--relva); }
.rp-efeitos .menos { color: var(--sangue); }

/* ───────────────────────── o botão de som ─────────────────────────── */

/* ⚠️ Discreto no canto do cabeçalho, e nasce DESLIGADO: som que toca
   sozinho na primeira abertura é a razão número um de alguém fechar uma
   aba — ainda mais num jogo que a pessoa abre no ônibus. */
.som-botao {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(234, 241, 238, 0.07);
  border: 1px solid var(--linha);
  color: var(--giz-fraco);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.som-botao[aria-pressed="true"] {
  background: var(--ambar);
  border-color: var(--ambar);
  color: var(--noite);
}
.carta { position: relative; }

/* ───────────────────── a caixa de relato ──────────────────────────── */

/* ⚠️ O botão de relato é IRMÃO do de som e fica à esquerda dele. Dois
   botões empilhados no mesmo canto brigariam pelo mesmo pixel. */
.relato-botao {
  right: 46px;
  font-weight: 700;
}

.caixa-relato {
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--noite);
  color: var(--giz);
  /* ⚠️ min() e não uma largura fixa: num celular de 360px uma caixa de
     420px nasce com rolagem horizontal, que é como um diálogo some pela
     borda da tela. */
  width: min(440px, calc(100vw - 32px));
  padding: 20px;
  /* ⚠️ `box-sizing: border-box` NO DIÁLOGO E EM TUDO DENTRO. Sem isto o
     padding de 20px soma POR FORA da largura calculada, e numa tela de
     291px a caixa nasce com 299 — o botão "Cancelar" sai pela borda
     esquerda, onde ninguém o alcança. Medido na tela estreita, não
     deduzido: na largura do desktop o defeito não aparece. */
  box-sizing: border-box;
}
.caixa-relato * { box-sizing: border-box; }
.caixa-relato::backdrop { background: rgba(0, 0, 0, 0.6); }
.caixa-relato h2 { margin: 0 0 6px; font-size: 18px; }
.caixa-relato .nota { margin: 0 0 16px; font-size: 13.5px; color: var(--giz-fraco); line-height: 1.5; }
.caixa-relato label {
  display: block; font-size: 12px; color: var(--giz-fraco);
  margin: 12px 0 4px;
}
.caixa-relato textarea,
.caixa-relato input[type="text"] {
  width: 100%; box-sizing: border-box;
  background: rgba(234, 241, 238, 0.06);
  border: 1px solid var(--linha);
  border-radius: 8px;
  color: var(--giz);
  font: inherit;
  padding: 9px 11px;
  resize: vertical;
}
.caixa-relato .junto {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--giz-fraco);
  background: rgba(234, 241, 238, 0.05);
  border-radius: 8px;
  padding: 10px 12px;
}
.caixa-relato .junto b { color: var(--giz); }
.caixa-relato .botoes {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px;
}
.caixa-relato .acao {
  /* ⚠️ 44px: o mesmo piso que o botão principal do 38 Brasil precisou
     ganhar depois de medir 30px e perder toque. */
  min-height: 44px; padding: 0 18px;
  border-radius: 10px; border: 1px solid var(--linha);
  background: rgba(234, 241, 238, 0.07); color: var(--giz);
  font: inherit; font-weight: 600; cursor: pointer;
}
.caixa-relato .acao.primaria { background: var(--ambar); border-color: var(--ambar); color: var(--noite); }
.caixa-relato .acao:disabled { opacity: 0.5; cursor: default; }
.caixa-relato .rl-recado { margin: 12px 0 0; font-size: 13px; min-height: 1em; color: var(--giz-fraco); }
.caixa-relato .rl-recado.erro { color: var(--sangue); }
.caixa-relato .rl-recado.feito { color: var(--ambar); }

/* ───────────────────── a tela de compra ───────────────────────────── */

/* ⚠️ Herda a casca da caixa de relato (`.caixa-relato`) de propósito: são
   as duas únicas janelas do jogo, e duas aparências diferentes para a
   mesma coisa é como uma interface começa a parecer remendada. */
.caixa-pagar .pg-abas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 18px 0 4px;
  background: rgba(234, 241, 238, 0.06);
  border-radius: 10px;
  padding: 4px;
}
.caixa-pagar .pg-abas button {
  appearance: none; border: 0; background: none;
  color: var(--giz-fraco); font: inherit; font-size: 14px;
  padding: 9px 4px; border-radius: 7px; cursor: pointer;
}
.caixa-pagar .pg-abas button[aria-pressed="true"] {
  background: rgba(234, 241, 238, 0.12);
  color: var(--giz);
  font-weight: 600;
}

.caixa-pagar .pg-dica { margin: 6px 0 0; font-size: 12.5px; color: var(--giz-fraco); }
.caixa-pagar .pg-dica.feito { color: var(--ambar); }

/* ⚠️ O BOTÃO DE COPIAR É O PRINCIPAL, e ocupa a largura toda: quem joga
   está no celular e não escaneia a própria tela. O QR fica num
   <details> fechado, para quem está no computador. */
.caixa-pagar .pg-copiar {
  display: block;
  width: 100%;
  margin-top: 18px;
  min-height: 52px;
  font-size: 16px;
}

.caixa-pagar .pg-qr { margin-top: 16px; }
.caixa-pagar .pg-qr summary {
  cursor: pointer; font-size: 13.5px; color: var(--giz-fraco);
  /* ⚠️ 44px de área de toque mesmo sendo um resumo: no celular, um
     alvo de 18px é o que faz o jogador tocar três vezes e desistir. */
  min-height: 44px; display: flex; align-items: center;
}
.caixa-pagar .pg-qr img {
  display: block; margin: 8px auto 0;
  /* fundo branco: um QR escuro sobre tema escuro não é lido por leitor
     nenhum — o contraste do código É o código */
  background: #fff; padding: 10px; border-radius: 10px;
  max-width: 100%; height: auto;
}

/* a saída de emergência quando a área de transferência falha */
.caixa-pagar .pg-codigo {
  width: 100%; box-sizing: border-box;
  margin-top: 8px; padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; line-height: 1.4;
  background: rgba(234, 241, 238, 0.06);
  border: 1px solid var(--linha); border-radius: 8px;
  color: var(--giz); resize: vertical; min-height: 90px;
}

.caixa-pagar .pg-esperando {
  margin: 16px 0 0; font-size: 13.5px; color: var(--giz-fraco);
  display: flex; align-items: center; gap: 8px;
}
.caixa-pagar .pg-esperando::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ambar);
  animation: pg-pulso 1.4s ease-in-out infinite;
}
@keyframes pg-pulso { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* ⚠️ Quem pediu menos movimento não vê o pulso. Uma bolinha piscando
   sem parar na tela de pagamento é desconforto real para quem tem
   sensibilidade a movimento, e ela não carrega informação nenhuma que o
   texto ao lado já não dê. */
@media (prefers-reduced-motion: reduce) {
  .caixa-pagar .pg-esperando::before { animation: none; opacity: 0.8; }
}

/* o botão de comprar dentro do jogo não é mais um link */
button.acesso-botao { font: inherit; cursor: pointer; }