/* Show do Bem — identidade visual Amigos do Bem */
:root {
  --azul: #003896;
  --azul-escuro: #001a4d;
  --azul-claro: #0047BA;
  --laranja: #FF6B00;
  --amarelo: #FFD900;
  --creme: #FAF5EE;
  --verde: #1FAA59;
  --vermelho: #E0312B;
  --texto: #FFFFFF;
  --texto-suave: rgba(255, 255, 255, 0.78);
  --vidro: rgba(255, 255, 255, 0.08);
  --borda-vidro: rgba(255, 255, 255, 0.16);
  --raio: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: 'Baloo 2', system-ui, sans-serif;
  color: var(--texto);
  background: radial-gradient(circle at 50% 0%, var(--azul) 0%, var(--azul-escuro) 70%) fixed;
  background-color: var(--azul-escuro);
  min-height: 100vh;
}

.palco { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.tela { width: 100%; max-width: 1200px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.tela[hidden] { display: none; }

.logo-grande { width: min(220px, 50vw); filter: drop-shadow(0 8px 28px rgba(255, 107, 0, 0.45)); }
.logo-media { width: 130px; }
.logo-pequena { width: 64px; }

.titulo { margin: 0; font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; line-height: 1; }
.titulo span { color: var(--amarelo); }
.subtitulo { margin: 0; color: var(--texto-suave); font-size: 1.2rem; text-align: center; }

.cartao {
  background: var(--vidro); border: 2px solid var(--borda-vidro); border-radius: var(--raio);
  padding: 24px; width: min(440px, 100%); display: flex; flex-direction: column; gap: 10px;
}
.cartao.centro { align-items: center; text-align: center; }
.cartao h2 { margin: 0; }
.rotulo { margin: 0; color: var(--texto-suave); }

label { font-weight: 700; }
input {
  font: inherit; font-size: 1.2rem; padding: 10px 14px; border-radius: 10px;
  border: 2px solid transparent; background: var(--creme); color: var(--azul-escuro); width: 100%;
}
input:focus { outline: none; border-color: var(--laranja); }
.campo-codigo { text-transform: uppercase; letter-spacing: 4px; font-weight: 800; }
.linha { display: flex; gap: 8px; }

.botao {
  font: inherit; font-size: 1.2rem; font-weight: 800; padding: 10px 22px; border-radius: 999px;
  border: none; cursor: pointer; transition: transform 0.1s, filter 0.1s;
}
.botao:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
.botao:focus-visible, .alternativa:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; }
.botao:disabled { opacity: 0.45; cursor: not-allowed; }
.botao-principal { background: var(--laranja); color: #fff; }
.botao-secundario { background: var(--amarelo); color: var(--azul-escuro); white-space: nowrap; }

.divisor { display: flex; align-items: center; gap: 10px; color: var(--texto-suave); }
.divisor::before, .divisor::after { content: ''; flex: 1; height: 1px; background: var(--borda-vidro); }

.mensagem { margin: 0; min-height: 1.5em; color: var(--texto-suave); }
.mensagem[data-tipo="erro"] { color: #FFB4A8; font-weight: 700; }
.mensagem[data-tipo="sucesso"] { color: #8CF0B4; font-weight: 700; }

.codigo-grande { margin: 0; font-size: 4rem; font-weight: 800; letter-spacing: 12px; color: var(--amarelo); line-height: 1.1; }
.lista-jogadores { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 1.3rem; }
.lista-jogadores li::before { content: '👤 '; }

/* ───── Jogo ───── */
.tela-jogo { align-items: stretch; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.placar { display: flex; gap: 12px; }
.placar-jogador {
  background: var(--vidro); border: 2px solid var(--borda-vidro); border-radius: var(--raio);
  padding: 6px 18px; display: flex; flex-direction: column; align-items: flex-end; min-width: 160px;
}
.placar-jogador.eu { border-color: var(--laranja); }
.placar-nome { font-size: 1rem; color: var(--texto-suave); }
.placar-pontos { font-size: 1.6rem; font-weight: 800; color: var(--amarelo); line-height: 1.1; }

.area-jogo { display: grid; grid-template-columns: 1fr 230px; gap: 24px; }
.area-pergunta { display: flex; flex-direction: column; gap: 14px; }
.info-pergunta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 1.2rem; font-weight: 700; }
#jogo-valor { color: var(--amarelo); }

.cronometro { position: relative; height: 28px; background: rgba(255, 255, 255, 0.12); border-radius: 999px; overflow: hidden; }
.cronometro-barra { height: 100%; width: 100%; background: linear-gradient(90deg, var(--amarelo), var(--laranja)); transition: width 0.1s linear; }
.cronometro.acabando .cronometro-barra { background: var(--vermelho); }
#cronometro-texto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; }

.enunciado {
  margin: 4px 0; font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.25;
  background: var(--azul-escuro); border: 3px solid var(--laranja); border-radius: var(--raio); padding: 20px 24px;
}
.alternativas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.alternativa {
  font: inherit; font-size: 1.25rem; color: #fff; text-align: left; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-radius: 999px; border: 3px solid var(--laranja); background: rgba(0, 71, 186, 0.55);
  cursor: pointer; transition: transform 0.1s, background 0.15s;
}
.alternativa:hover:not(:disabled) { transform: scale(1.02); background: var(--azul-claro); }
.alternativa:disabled { cursor: default; }
.alternativa:disabled:not(.escolhida):not(.correta):not(.errada) { opacity: 0.6; }
.letra {
  flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--laranja);
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.alternativa.escolhida { background: var(--laranja); }
.alternativa.escolhida .letra { background: var(--amarelo); color: var(--azul-escuro); }
.alternativa.correta { background: var(--verde); border-color: var(--verde); animation: piscar 0.5s ease 2; }
.alternativa.errada { background: var(--vermelho); border-color: var(--vermelho); }
@keyframes piscar { 50% { filter: brightness(1.5); } }
.status-jogo { font-size: 1.3rem; }

.escada {
  list-style: none; margin: 0; padding: 12px; background: rgba(0, 0, 0, 0.2); border-radius: var(--raio);
  display: flex; flex-direction: column; gap: 2px; font-weight: 700; align-self: start;
}
.escada li { display: flex; justify-content: space-between; padding: 2px 10px; border-radius: 8px; color: var(--texto-suave); }
.escada li.marco { color: var(--texto); }
.escada li.passado { opacity: 0.4; }
.escada li.atual { background: var(--amarelo); color: var(--azul-escuro); }

/* ───── Final ───── */
.titulo-final { font-size: clamp(2rem, 5vw, 3.2rem); margin: 0; color: var(--amarelo); text-align: center; }
.tela-final-cartao { width: min(560px, 100%); }
.placar-final { display: flex; flex-direction: column; gap: 10px; }
.linha-final { padding: 12px 18px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; gap: 2px; }
.linha-final.vencedor { background: var(--laranja); }
.linha-final-topo { display: flex; align-items: center; gap: 10px; }
.medalha { font-size: 1.8rem; }
.nome-final { flex: 1; font-size: 1.4rem; font-weight: 700; overflow-wrap: anywhere; }
.pontos-final { font-size: 1.7rem; font-weight: 800; color: var(--amarelo); white-space: nowrap; }
.linha-final.vencedor .pontos-final { color: #fff; }
.linha-final-detalhe { padding-left: calc(1.8rem + 10px); color: var(--texto-suave); font-size: 1.1rem; }
.linha-final.vencedor .linha-final-detalhe { color: rgba(255, 255, 255, 0.92); }

@media (max-width: 800px) {
  .area-jogo { grid-template-columns: 1fr; }
  .escada { display: none; }
  .alternativas { grid-template-columns: 1fr; }
  .topo { flex-wrap: wrap; }
  .placar-jogador { min-width: 0; }
}

/* Relogio da partida (2 minutos) */
.relogio-partida { padding: 2px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-weight: 700; white-space: nowrap; }
.relogio-partida b { font-variant-numeric: tabular-nums; font-size: 1.15em; }
.relogio-partida.acabando { background: var(--vermelho); color: #fff; }
.final-motivo { margin: -4px 0 8px; font-weight: 700; color: var(--amarelo); text-align: center; }