:root {
  --ink: #14301f;
  --papel: #eaf6dd;
  --amarelo: #ffd23f;
  --rosa: #ff7a59;
  --turquesa: #3fb8a0;
  --laranja: #ff9b3d;
  --verde: #5fd068;
  --vermelho: #ff5252;
  --branco: #ffffff;

  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;
  --r1: 12px; --r2: 20px; --r3: 9999px;
  --borda: 3px solid var(--ink);
  --sombra: 0 6px 0 var(--ink);

  --titulo: "Baloo 2", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --corpo: "Nunito", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--papel);
  color: var(--ink);
  font-family: var(--corpo);
  font-size: 1.0625rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
h1, h2, h3, .marca, .btn-grande, .chip b { font-family: var(--titulo); }
h1, h2, h3, .lead, .pergunta, .retorno-titulo, .rodape { text-wrap: balance; }
p, li, blockquote, .alt-txt { text-wrap: pretty; }
:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; }

/* Fundo com letras flutuando */
.fundo { position: fixed; inset: 0 0 clamp(130px, 24vh, 240px) 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fundo span {
  position: absolute; bottom: -80px;
  font-family: var(--titulo); font-weight: 800;
  color: var(--ink); opacity: .08;
  animation: sobe linear infinite;
}
@keyframes sobe {
  from { transform: translateY(0) rotate(var(--giro-a)); }
  to { transform: translateY(-120vh) rotate(var(--giro-b)); }
}
#confete { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

/* Cenário de Ibitirui */
.cenario {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none;
  height: clamp(130px, 24vh, 240px);
}
.cenario svg { width: 100%; height: 100%; display: block; }
.agua line { stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 14 22; animation: cai 2.4s linear infinite; }
.agua line:nth-child(2n) { animation-duration: 1.8s; }
.agua line:nth-child(3n) { animation-duration: 3s; }
@keyframes cai { to { stroke-dashoffset: -72; } }
.trem-cena { animation: passa 75s linear infinite; animation-delay: -30s; }
@keyframes passa { from { transform: translateX(-760px); } to { transform: translateX(1900px); } }

/* Topo e rodapé */
.topo, main, .rodape { position: relative; z-index: 1; }
.topo {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--e4) var(--e5);
}
.marca { font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; }
.som {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 44px; padding: 0 var(--e4);
  background: var(--branco); color: var(--ink);
  border: var(--borda); border-radius: var(--r3);
  font: 700 .9375rem var(--corpo); cursor: pointer;
}
.som .corte { display: none; }
.som[aria-pressed="true"] .corte { display: block; }
.som[aria-pressed="true"] .ondas { opacity: .35; }
main { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--e4) var(--e5) var(--e6); }
.rodape { text-align: center; padding: var(--e4) var(--e5) var(--e5); font-size: .875rem; }

/* Telas */
.tela { display: none; width: 100%; max-width: 1080px; }
.tela.ativa { display: block; animation: entra .5s cubic-bezier(.2, .9, .3, 1.2); }
#inicio.ativa, #fim.ativa { display: grid; grid-template-columns: minmax(200px, 340px) 1fr; gap: var(--e7); align-items: center; }
@keyframes entra { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }

.etiqueta {
  display: inline-block; margin: 0 0 var(--e3);
  padding: var(--e1) var(--e4); background: var(--amarelo);
  border: var(--borda); border-radius: var(--r3);
  font-weight: 800; font-size: .875rem; letter-spacing: .08em; text-transform: uppercase;
}
h1 { margin: 0 0 var(--e4); font-size: clamp(2.75rem, 7vw, 5rem); line-height: 1; letter-spacing: -.02em; font-weight: 800; }
h2#t-fim { margin: 0 0 var(--e4); font-size: clamp(2.25rem, 6vw, 4rem); line-height: 1; letter-spacing: -.02em; font-weight: 800; }
.lead { margin: 0 0 var(--e5); font-size: clamp(1.125rem, 2.2vw, 1.375rem); max-width: 34ch; }
.dica { margin: var(--e4) 0 0; font-size: .9375rem; }
.recorde { margin: var(--e3) 0 0; font-weight: 800; }
kbd {
  display: inline-block; min-width: 28px; padding: 0 var(--e2); text-align: center;
  background: var(--branco); border: 2px solid var(--ink); border-radius: 8px;
  font: 800 .875rem var(--corpo); box-shadow: 0 3px 0 var(--ink);
}

/* Botão grande */
.btn-grande {
  min-height: 56px; padding: 0 var(--e6);
  background: var(--rosa); color: var(--ink);
  border: var(--borda); border-radius: var(--r3);
  font-size: 1.375rem; font-weight: 800; cursor: pointer;
  box-shadow: var(--sombra);
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.btn-grande:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink); }
.btn-grande:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
#btn-comecar { animation: pulsa 1.8s ease-in-out infinite; }
@keyframes pulsa { 50% { transform: scale(1.05); } }

/* Mascote */
[data-mascote] svg { width: 100%; height: auto; display: block; overflow: visible; }
.mascote-grande { max-width: 340px; width: 100%; margin-inline: auto; }
.mascote-lateral { width: 150px; flex: none; align-self: flex-start; }
.mascote-corpo { transform-origin: 112px 228px; animation: balanca 3s ease-in-out infinite; }
@keyframes balanca { 50% { transform: rotate(4deg) translateY(-6px); } }
.olhos { transform-origin: 156px 48px; animation: pisca 4s infinite; }
@keyframes pisca { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.boca, .brilho, .suor, .cenho { display: none; }
svg[data-humor="neutro"] .boca-neutro,
svg[data-humor="feliz"] .boca-feliz,
svg[data-humor="triste"] .boca-triste { display: block; }
svg[data-humor="feliz"] .brilho { display: block; animation: brilha .5s ease-in-out infinite alternate; }
svg[data-humor="triste"] .cenho { display: block; }
svg[data-humor="triste"] .suor { display: block; animation: gota 1s ease-in infinite; }
svg[data-humor="feliz"] .mascote-corpo { animation: pula .6s ease-out 3; }
svg[data-humor="triste"] .mascote-corpo { animation: treme .5s ease-in-out 1; }
@keyframes brilha { to { transform: scale(1.25); opacity: .6; } }
@keyframes gota { from { transform: translateY(-6px); opacity: 1; } to { transform: translateY(16px); opacity: 0; } }
@keyframes pula { 40% { transform: translateY(-30px) rotate(-6deg); } 70% { transform: translateY(0) rotate(4deg); } }
@keyframes treme { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.brilho, .suor { transform-box: fill-box; transform-origin: center; }

/* Placar */
.placar { display: grid; grid-template-columns: 1fr auto auto; gap: var(--e4); align-items: center; margin-bottom: var(--e5); }
.caso { font-weight: 800; padding-right: var(--e6); }
.progresso {
  position: relative; margin-top: var(--e4); height: 22px;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 5px / 100% 3px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 14px / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, #8a5a3c 0 6px, transparent 6px 18px);
}
.progresso i { position: absolute; left: 0; top: 0; height: 100%; width: 0; transition: width .6s cubic-bezier(.3, .9, .3, 1.15); }
.progresso i::after {
  content: ""; position: absolute; right: -24px; top: -16px; width: 52px; height: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 30'%3E%3Crect x='7' y='2' width='6' height='9' fill='%2314301f'/%3E%3Crect x='2' y='10' width='28' height='12' rx='3' fill='%232f5d8a' stroke='%2314301f' stroke-width='2'/%3E%3Crect x='26' y='4' width='18' height='18' rx='3' fill='%23ff7a59' stroke='%2314301f' stroke-width='2'/%3E%3Crect x='30' y='8' width='9' height='6' rx='1' fill='%23bff1ff'/%3E%3Ccircle cx='10' cy='25' r='4' fill='%23ffd23f' stroke='%2314301f' stroke-width='2'/%3E%3Ccircle cx='24' cy='25' r='4' fill='%23ffd23f' stroke='%2314301f' stroke-width='2'/%3E%3Ccircle cx='38' cy='25' r='4' fill='%23ffd23f' stroke='%2314301f' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: trepida .5s ease-in-out infinite alternate;
}
@keyframes trepida { to { transform: translateY(-2px); } }
.chip {
  min-width: 96px; padding: var(--e1) var(--e4); text-align: center;
  background: var(--branco); border: var(--borda); border-radius: var(--r2);
}
.chip small { display: block; font-weight: 800; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.chip b { font-size: 1.75rem; line-height: 1.1; font-weight: 800; display: inline-block; }
.chip.combo.quente { background: var(--laranja); }
.chip b.pop { animation: pop .4s cubic-bezier(.2, .9, .3, 1.6); }
@keyframes pop { 40% { transform: scale(1.5); } }

/* Palco e cartão */
.palco { display: flex; gap: var(--e5); align-items: flex-start; }
.cartao {
  flex: 1; min-width: 0; position: relative;
  padding: var(--e5) var(--e6) var(--e6);
  background: var(--branco); border: var(--borda); border-radius: var(--r2); box-shadow: var(--sombra);
}
.cartao.troca { animation: entra .45s cubic-bezier(.2, .9, .3, 1.2); }
.tempo {
  position: relative; height: 28px; margin-bottom: var(--e5);
  background: var(--papel); border: var(--borda); border-radius: var(--r3); overflow: hidden;
}
.tempo i { position: absolute; inset: 0; background: var(--turquesa); transform-origin: left; transition: background .3s; }
.tempo.aperta i { background: var(--vermelho); }
.tempo span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: .9375rem; }
.fonte { margin: 0 0 var(--e3); font-weight: 800; font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; }
.trecho {
  margin: 0 0 var(--e5); padding: var(--e4) var(--e5);
  background: var(--papel); border-left: 8px solid var(--rosa); border-radius: 0 var(--r1) var(--r1) 0;
  font-size: clamp(1.0625rem, 2.2vw, 1.375rem); font-style: italic; max-width: 62ch;
}
.trecho mark { background: var(--amarelo); color: var(--ink); font-style: normal; font-weight: 800; padding: 0 var(--e1); border-radius: 6px; }
.pergunta { margin: 0 0 var(--e5); font-size: clamp(1.375rem, 3vw, 2rem); line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }

.alts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
.alt {
  display: flex; align-items: center; gap: var(--e3); text-align: left;
  min-height: 72px; padding: var(--e3) var(--e4);
  color: var(--ink); background: var(--cor); border: var(--borda); border-radius: var(--r2); box-shadow: var(--sombra);
  font: 700 clamp(1rem, 1.9vw, 1.1875rem) var(--corpo); cursor: pointer;
  transition: transform .12s ease-out, box-shadow .12s ease-out, opacity .2s;
  animation: sobeAlt .5s cubic-bezier(.2, .9, .3, 1.3) backwards;
}
.alt:nth-child(1) { --cor: #ffd23f; animation-delay: .05s; }
.alt:nth-child(2) { --cor: #a6e6f2; animation-delay: .12s; }
.alt:nth-child(3) { --cor: #c4ec9a; animation-delay: .19s; }
.alt:nth-child(4) { --cor: #f7cfa6; animation-delay: .26s; }
@keyframes sobeAlt { from { opacity: 0; transform: translateY(30px) rotate(-2deg); } }
.alt:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 9px 0 var(--ink); }
.alt:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.alt .letra {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--branco); border: 3px solid var(--ink); border-radius: 50%;
  font: 800 1.125rem var(--titulo);
}
.alt:disabled { cursor: default; }
.alt.apagada { opacity: .45; box-shadow: none; transform: translateY(6px); }
.alt.certa { --cor: var(--verde); animation: celebra .6s ease-out; }
.alt.errada { --cor: var(--vermelho); animation: sacode .45s ease-in-out; }
.alt.certa .letra::before { content: "\2713"; }
.alt.errada .letra::before { content: "\2717"; }
.alt.certa .letra, .alt.errada .letra { font-size: 0; }
.alt.certa .letra::before, .alt.errada .letra::before { font-size: 1.375rem; }
@keyframes celebra { 30% { transform: scale(1.06) rotate(-1.5deg); } 60% { transform: scale(1.03) rotate(1.5deg); } }
@keyframes sacode { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }

/* Retorno */
.retorno { margin-top: var(--e5); padding: var(--e4) var(--e5); background: var(--papel); border: var(--borda); border-radius: var(--r2); animation: entra .4s cubic-bezier(.2, .9, .3, 1.2); }
.retorno-titulo { margin: 0 0 var(--e2); font: 800 1.5rem/1.1 var(--titulo); }
.retorno-texto { margin: 0 0 var(--e4); max-width: 62ch; }
.retorno .btn-prox { background: var(--turquesa); font-size: 1.125rem; min-height: 48px; }

/* Fim */
.numeros { display: flex; flex-wrap: wrap; gap: var(--e4); margin: 0 0 var(--e5); }
.revise { margin: 0 0 var(--e5); padding: var(--e4) var(--e5); background: var(--branco); border: var(--borda); border-radius: var(--r2); max-width: 62ch; }
.revise h3 { margin: 0 0 var(--e2); font-size: 1.25rem; }
.revise ul { margin: 0; padding-left: var(--e5); }
.revise li { margin-bottom: var(--e2); }

/* Telas estreitas */
@media (max-width: 760px) {
  main { padding-inline: var(--e4); }
  #inicio.ativa, #fim.ativa { grid-template-columns: 1fr; gap: var(--e5); text-align: center; }
  #inicio .mascote-grande, #fim .mascote-grande { max-width: 200px; }
  .lead { margin-inline: auto; }
  .numeros { justify-content: center; }
  .revise { text-align: left; margin-inline: auto; }
  .palco { flex-direction: column; align-items: stretch; }
  .mascote-lateral { width: 96px; align-self: center; margin-bottom: calc(var(--e5) * -1); position: relative; z-index: 2; }
  .cartao { padding: var(--e4) var(--e4) var(--e5); padding-top: var(--e7); }
  .alts { grid-template-columns: 1fr; }
  .placar { grid-template-columns: 1fr auto; }
  .placar .chip.combo { grid-column: 2; }
  .chip { min-width: 80px; }
  .alt { min-height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fundo { display: none; }
}