:root {
  --verde-fundo: #017546;
  --verde-botao-1: #5f8f55;
  --verde-botao-2: #2c5527;
  --verde-ok: #2e8b3e;
  --vermelho-erro: #c0392b;
  --azul: #0b3a6e;
  --cinza-texto: #333;
  --cinza-claro: #e9e9e9;
  --branco: #fff;
  --fonte: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

[hidden] { display: none !important; }

body {
  background: var(--verde-fundo);
  font-family: var(--fonte);
  color: var(--cinza-texto);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.jogo {
  width: 100%;
  max-width: 820px;
  background: var(--branco);
  padding: 18px 16px 12px;
}

/* ---------- topo ---------- */

.topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.titulo {
  margin: 0;
  color: var(--azul);
  font-size: 46px;
  line-height: .9;
  font-weight: 700;
  letter-spacing: -.5px;
}
.titulo span {
  display: block;
  font-size: 26px;
  font-weight: 400;
  text-transform: uppercase;
}

.placar {
  position: relative;
  background: linear-gradient(#e2e2e2, #c9c9c9);
  border-radius: 4px;
  padding: 6px 10px 4px;
  min-width: 140px;
  text-align: right;
  color: var(--azul);
}
.placar-rotulo {
  display: block;
  text-align: left;
  font-size: 13px;
  text-transform: uppercase;
  color: #555;
}
.placar strong {
  font-size: 34px;
  font-weight: 400;
  line-height: 1.1;
}
.placar-delta {
  position: absolute;
  right: 8px;
  top: 100%;
  font-weight: 700;
  font-size: 18px;
  opacity: 0;
  pointer-events: none;
}
.placar-delta.mais  { color: var(--verde-ok); animation: delta 1.2s ease-out; }
.placar-delta.menos { color: var(--vermelho-erro); animation: delta 1.2s ease-out; }
@keyframes delta {
  0%   { opacity: 0; transform: translateY(8px); }
  20%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-14px); }
}

/* ---------- barra de etapas ---------- */

.etapas {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.etapa {
  display: block;
  background: linear-gradient(var(--verde-botao-1), var(--verde-botao-2));
  color: var(--branco);
  border-radius: 3px;
  padding: 3px 5px 2px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.etapa small {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  opacity: .9;
}
.etapa b {
  display: block;
  font-size: 17px;
  font-weight: 700;
}
.etapa.atual { background: linear-gradient(#c4c4c4, #7e7e7e); }
.etapa.feita.certa  b::after { content: " ✓"; font-size: 12px; }
.etapa.feita.errada b::after { content: " ✗"; font-size: 12px; }
a.etapa:hover, a.etapa:focus-visible { filter: brightness(1.15); }

/* ---------- palco ---------- */

.palco {
  position: relative;
  aspect-ratio: 780 / 390;
  background: linear-gradient(#cfcfcf, #f4f4f4 45%, #e9e9e9);
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}

.cena, .cena svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.personagem {
  position: absolute;
  left: 1%;
  top: 3%;
  width: 12.5%;
  border-bottom: 2px solid #555;
}
.personagem svg { display: block; width: 100%; height: auto; }

.balao {
  position: absolute;
  left: 14.5%;
  top: 2.5%;
  width: 50%;
  max-height: 44%;
  background: var(--branco);
  border-radius: 12px;
  padding: 12px 16px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  animation: aparece .35s ease-out;
}
.balao::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 34px;
  border: 10px solid transparent;
  border-right: 16px solid var(--branco);
  border-left: 0;
}
@keyframes aparece {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.balao h2 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
  color: #1d3a2a;
}

.balao-corpo {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 0;
}

.alternativas {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.alternativas label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
  cursor: pointer;
}
.alternativas label:last-child { border-bottom: 0; }
.alternativas input {
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #666;
  margin: 0;
  flex: none;
  cursor: pointer;
}
.alternativas input:checked {
  background: var(--azul);
  box-shadow: 0 0 0 3px #b9cbe3;
}
.alternativas input:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

.botao {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--branco);
  background: linear-gradient(#1a1a1a, #3a3a3a);
  border: 0;
  border-radius: 3px;
  padding: 8px 18px;
  cursor: pointer;
  white-space: nowrap;
  flex: none;
}
.botao.verde { background: linear-gradient(#3f6b37, #23461f); }
.botao:hover:not(:disabled), .botao:focus-visible { filter: brightness(1.3); }
.botao:disabled { opacity: .45; cursor: default; }

.resultado {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 15px;
}
.resultado.certa  { color: var(--verde-ok); }
.resultado.errada { color: var(--vermelho-erro); }

.explicacao {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  font-size: 14px;
  line-height: 1.35;
  text-align: justify;
  padding-right: 8px;
  margin-bottom: 8px;
  scrollbar-color: #4c7a43 #eee;
}
.explicacao p { margin: 0 0 .6em; }
.explicacao strong { display: block; color: #1d3a2a; }

.acoes { display: flex; justify-content: flex-end; }

.balao:has(.intro) { max-height: 74%; }
.intro { overflow-y: auto; min-height: 0; flex: 1; margin-bottom: 6px; }
.intro p { margin: 0; font-size: 14px; line-height: 1.35; }

/* ---------- fim de jogo ---------- */

.fim {
  position: absolute;
  left: 22%;
  right: 22%;
  top: 8%;
  bottom: 8%;
  background: var(--branco);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  animation: aparece .4s ease-out;
}
.fim-placar {
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: 16px;
  align-content: center;
}
.fim-placar .fim-personagem svg { width: 100%; height: auto; }
.fim h2 {
  margin: 0 0 8px;
  color: var(--azul);
  font-size: 28px;
  font-weight: 400;
}
.fim .numero {
  font-size: 46px;
  color: #123;
  line-height: 1;
  margin: 4px 0 6px;
}
.fim .detalhe { margin: 0; font-size: 14px; color: #555; }
.fim-links {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}
.link-seta {
  background: none;
  border: 0;
  padding: 2px 0;
  font: inherit;
  font-size: 15px;
  text-transform: uppercase;
  color: #222;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dotted #999;
  width: fit-content;
}
.link-seta::after { content: " >"; }
.link-seta:hover, .link-seta:focus-visible { color: var(--azul); }


/* ---------- elementos animados das cenas (SVG) ---------- */

.rotulo-seta {
  font-family: var(--fonte);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  fill: #2a2a2a;
}
.titulo-cena { font-family: var(--fonte); }

.seta { animation: seta-entra .7s ease-out both; }
.seta-baixo { animation-name: seta-desce; }
@keyframes seta-entra {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes seta-desce {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: none; }
}

.chama {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: chama .45s ease-in-out infinite alternate;
}
@keyframes chama {
  from { transform: scaleY(.75) skewX(-4deg); }
  to   { transform: scaleY(1.1) skewX(4deg); }
}

.onda { animation: onda 3s linear infinite; }
.onda.lenta { animation-duration: 5s; animation-direction: reverse; }
@keyframes onda {
  to { transform: translateX(60px); }
}

.sinal { animation: sinal 1.8s ease-out infinite; }
.sinal.s2 { animation-delay: .3s; }
@keyframes sinal {
  0%, 100% { opacity: .2; }
  40%      { opacity: 1; }
}

.personagem .mao {
  transform-box: view-box;
  transform-origin: 258px 284px;
  animation: aponta 2.4s ease-in-out infinite;
}
@keyframes aponta {
  0%, 70%, 100% { transform: none; }
  80%           { transform: rotate(-8deg); }
  90%           { transform: rotate(3deg); }
}

/* ---------- rodapé ---------- */

.rodape {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 40px;
  padding-top: 14px;
}
.rodape img { max-width: 100%; height: auto; }

/* ---------- telas estreitas ---------- */

@media (max-width: 720px) {
  body { padding: 0; align-items: stretch; }
  .jogo { padding: 12px 12px 8px; }
  .titulo { font-size: 34px; }
  .titulo span { font-size: 19px; }
  .placar { min-width: 104px; }
  .placar strong { font-size: 26px; }

  .etapas {
    grid-template-columns: repeat(6, 1fr);
  }
  .etapa b { font-size: 14px; }
  .etapa small { font-size: 9px; }

  /* No celular o balão sai de cima da cena e vira um cartão abaixo dela */
  .palco {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
    background: none;
    overflow: visible;
  }
  .cena {
    position: relative;
    grid-column: 1 / -1;
    aspect-ratio: 780 / 390;
    background: linear-gradient(#cfcfcf, #f4f4f4 45%, #e9e9e9);
    border-radius: 6px;
    overflow: hidden;
  }
  .personagem {
    position: static;
    width: 64px;
    margin-top: 10px;
    align-self: start;
  }
  .balao {
    position: relative;
    left: auto; top: auto;
    width: auto;
    max-height: none;
    margin: 10px 0 0 14px;
    background: #f3f3f3;
  }
  .balao::before { border-right-color: #f3f3f3; top: 20px; }
  .balao-corpo { flex-direction: column; align-items: stretch; }
  .alternativas label { padding: 8px 0; font-size: 15px; }
  .botao { padding: 11px 18px; }
  .explicacao { max-height: 260px; }

  .fim {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    padding: 16px 4px;
  }
}

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