/* ============================================================
   A JORNADA DA BENÉ — quiz-trilha Beneverso
   Pop-art tabloide da casa. Paleta de app/globals.css do site.
   ============================================================ */

:root {
  --papel-claro: #FCF6E8;
  --papel: #F7ECD4;
  --papel-2: #EFE0C2;
  --papel-3: #E3CFA6;
  --tinta: #1C1611;
  --tinta-forte: #140E0B;
  --tinta-mutada: #5A4D41;
  --vermelho: #E03A2E;
  --vermelho-txt: #C62B25;
  --ouro: #F4BE45;
  --ouro-txt: #8A5D14;
  --verde-soft: #D5EFDF;
  --verde: #0E7544;
  --ceu-soft: #DCE9F3;
  --ceu: #2C5C8A;
  --sombra: 5px 5px 0 var(--tinta);
  --sombra-p: 3px 3px 0 var(--tinta);
  --f-titulo: "Bungee", "Arial Black", sans-serif;
  --f-corpo: "Archivo", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: var(--f-corpo);
  color: var(--tinta);
  background-color: var(--papel);
  /* halftone de jornal */
  background-image: radial-gradient(rgba(28, 22, 17, 0.07) 1px, transparent 1.5px);
  background-size: 14px 14px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}

#app {
  height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
@supports not (height: 100dvh) {
  #app { height: 100vh; }
}

/* ---------- HEADER (sempre visível) ---------- */

header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 8px;
  z-index: 30;
}

.logo-mini {
  font-family: var(--f-titulo);
  font-size: 13px;
  line-height: 1;
  background: var(--vermelho);
  color: var(--papel-claro);
  border: 2px solid var(--tinta);
  border-radius: 8px;
  box-shadow: var(--sombra-p);
  padding: 7px 9px 5px;
  transform: rotate(-2deg);
  white-space: nowrap;
}

.vidas {
  display: flex;
  gap: 3px;
  font-size: 21px;
  line-height: 1;
  margin-left: 2px;
}
.vidas .cor { color: var(--vermelho); transition: transform .25s; }
.vidas .cor.perdido { color: transparent; -webkit-text-stroke: 1.5px var(--tinta-mutada); opacity: .45; }
.vidas .cor.tremendo { animation: coracaoPerde .55s ease-out; }
@keyframes coracaoPerde {
  0% { transform: scale(1); }
  30% { transform: scale(1.7) rotate(-14deg); }
  60% { transform: scale(.8) rotate(10deg); }
  100% { transform: scale(1); }
}

.progresso-mini {
  display: flex;
  gap: 3px;
  margin-left: auto;
  align-items: center;
  flex-wrap: nowrap;
  max-width: 120px;
  justify-content: flex-end;
}
/* 12 pips de 6px + 11 gaps de 3px = 105px — cabe em UMA linha nos 120px */
.progresso-mini .pip {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border: 1.5px solid var(--tinta);
  border-radius: 50%;
  background: var(--papel-claro);
}
.progresso-mini .pip.certo { background: var(--verde); }
.progresso-mini .pip.errado { background: var(--vermelho); }
.progresso-mini .pip.atual { background: var(--ouro); animation: pulsa 1.1s infinite; }

#btn-mudo {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  font-size: 20px;
  background: var(--papel-claro);
  border: 2px solid var(--tinta);
  border-radius: 8px;
  box-shadow: var(--sombra-p);
  cursor: pointer;
}
#btn-mudo:active { transform: translate(3px, 3px); box-shadow: none; }

/* ---------- TELAS ---------- */

.tela {
  position: absolute;
  inset: 0;
  top: 66px; /* abaixo do header */
  display: none;
  flex-direction: column;
  padding: 6px 14px 14px;
  overflow: hidden;
}
.tela.ativa { display: flex; animation: telaEntra .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes telaEntra {
  from { opacity: 0; transform: translateY(26px) rotate(1.2deg); }
  to { opacity: 1; transform: none; }
}

/* ---------- BOTÕES BASE ---------- */

.btn {
  font-family: var(--f-titulo);
  font-size: 17px;
  color: var(--papel-claro);
  background: var(--vermelho);
  border: 2px solid var(--tinta);
  border-radius: 8px;
  box-shadow: var(--sombra-p);
  padding: 15px 18px 12px;
  min-height: 52px;
  cursor: pointer;
  text-transform: uppercase;
  transition: transform .06s;
}
.btn:active { transform: translate(3px, 3px); box-shadow: none; }
.btn.secundario { background: var(--papel-claro); color: var(--tinta); font-size: 14px; }
.btn.ouro { background: var(--ouro); color: var(--tinta); }

/* ---------- TELA INICIAL ---------- */

#tela-inicio { align-items: center; gap: 14px; text-align: center; overflow-y: auto; touch-action: pan-y; }
#tela-inicio > * { flex-shrink: 0; }
/* centraliza sem cortar o topo quando não cabe (safe centering) */
#tela-inicio > :first-child { margin-top: auto; }
#tela-inicio > :last-child { margin-bottom: auto; }

.manchete {
  font-family: var(--f-titulo);
  font-size: clamp(30px, 9.2vw, 44px);
  line-height: .95;
  color: var(--tinta-forte);
  text-transform: uppercase;
  transform: rotate(-2deg);
}
.manchete .destaque {
  display: inline-block;
  background: var(--vermelho);
  color: var(--papel-claro);
  padding: 2px 10px 0;
  border: 2px solid var(--tinta);
  box-shadow: var(--sombra-p);
  border-radius: 8px;
  transform: rotate(1.5deg);
}

.polaroid {
  width: min(46vw, 190px);
  background: #fff;
  border: 2px solid var(--tinta);
  border-radius: 6px;
  box-shadow: var(--sombra);
  padding: 7px 7px 10px;
  transform: rotate(2.5deg);
}
.polaroid img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: center 30%;
}
.polaroid .legenda {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--tinta-mutada);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* a GRANDE QUESTÃO da abertura */
.grande-questao {
  font-family: var(--f-titulo);
  font-size: clamp(14px, 4.4vw, 18px);
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--tinta-forte);
  max-width: 340px;
  transform: rotate(-1.2deg);
}
.grande-questao strong { color: var(--vermelho-txt); }
.grande-questao .pergunta-hook {
  display: inline-block;
  background: var(--ouro);
  color: var(--tinta-forte);
  border: 2px solid var(--tinta);
  border-radius: 8px;
  box-shadow: var(--sombra-p);
  padding: 4px 10px 1px;
  margin-top: 5px;
  transform: rotate(1.4deg);
}

.sub-inicio {
  font-size: 13.5px;
  font-weight: 600;
  max-width: 330px;
  line-height: 1.35;
}
.sub-inicio strong { color: var(--vermelho-txt); }

.aviso-vidas {
  font-size: 12.5px;
  font-weight: 700;
  background: var(--ceu-soft);
  border: 2px solid var(--tinta);
  border-radius: 8px;
  box-shadow: var(--sombra-p);
  padding: 8px 12px;
  max-width: 330px;
  transform: rotate(-1deg);
}

.recorde-chip {
  font-size: 12px;
  font-weight: 800;
  background: var(--ouro);
  border: 2px solid var(--tinta);
  border-radius: 999px;
  padding: 5px 12px;
  box-shadow: 2px 2px 0 var(--tinta);
  text-transform: uppercase;
}

/* ---------- TRILHA ---------- */

#tela-trilha { padding: 0; }

.trilha-topo {
  flex: 0 0 auto;
  text-align: center;
  padding: 4px 14px 8px;
  font-family: var(--f-titulo);
  font-size: 15px;
  text-transform: uppercase;
  color: var(--tinta-forte);
}
.trilha-topo .dica {
  display: inline-block;
  font-family: var(--f-corpo);
  font-weight: 800;
  font-size: 11.5px;
  color: var(--ouro-txt);
  background: var(--papel-claro);
  border: 2px dashed var(--ouro-txt);
  border-radius: 999px;
  padding: 3px 10px;
  margin-top: 4px;
}

#trilha-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

#trilha-mapa {
  position: relative;
  width: 330px;
  margin: 0 auto;
  /* altura definida via JS conforme nº de fases */
}

.conector {
  position: absolute;
  width: 237px;
  border-top: 4px dashed var(--tinta-mutada);
  opacity: .55;
  transform-origin: left center;
}
.conector.feito { border-top-color: var(--verde); opacity: .9; }

.no {
  position: absolute;
  width: 62px; height: 62px;
  margin-left: -31px; margin-top: -31px;
  border-radius: 50%;
  border: 2px solid var(--tinta);
  background: var(--papel-claro);
  box-shadow: var(--sombra-p);
  font-family: var(--f-titulo);
  font-size: 22px;
  color: var(--tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  padding: 0;
}
.no:disabled { cursor: default; }
.no.futuro { background: var(--papel-2); color: var(--tinta-mutada); opacity: .55; box-shadow: 2px 2px 0 var(--tinta-mutada); }
.no.atual {
  background: var(--ouro);
  animation: pulsa 1.1s infinite;
}
.no.atual::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 3px dashed var(--vermelho);
  border-radius: 50%;
  animation: giraAnel 7s linear infinite;
}
@keyframes pulsa {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
@keyframes giraAnel { to { transform: rotate(360deg); } }

.no .selo {
  position: absolute;
  top: -12px; right: -14px;
  font-family: var(--f-titulo);
  font-size: 15px;
  line-height: 1;
  padding: 5px 6px 3px;
  border: 2px solid;
  border-radius: 8px;
  background: var(--papel-claro);
  transform: rotate(12deg);
  z-index: 3;
}
.no.certo .selo { color: var(--verde); border-color: var(--verde); }
.no.errado .selo { color: var(--vermelho-txt); border-color: var(--vermelho-txt); }
.no .selo.batendo { animation: seloBate .45s cubic-bezier(.2, 2.2, .4, 1); }
@keyframes seloBate {
  0% { transform: scale(3.4) rotate(-50deg); opacity: 0; }
  60% { transform: scale(.92) rotate(16deg); opacity: 1; }
  100% { transform: scale(1) rotate(12deg); }
}

.no-ano {
  position: absolute;
  margin-top: -8px;
  font-family: var(--f-titulo);
  font-size: 13px;
  color: var(--tinta-mutada);
  transform: rotate(-3deg);
  z-index: 1;
  white-space: nowrap;
}
.no-ano.lado-esq { margin-left: 44px; }
.no-ano.lado-dir { margin-left: -44px; transform: translateX(-100%) rotate(3deg); }
.no-ano.destacado { color: var(--vermelho-txt); }

.trilha-chegada {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  font-family: var(--f-titulo);
  font-size: 13px;
  color: var(--papel-claro);
  background: var(--verde);
  border: 2px solid var(--tinta);
  border-radius: 8px;
  box-shadow: var(--sombra-p);
  padding: 7px 12px 5px;
  white-space: nowrap;
}
.trilha-partida {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(2deg);
  font-family: var(--f-titulo);
  font-size: 11px;
  color: var(--tinta);
  background: var(--ouro);
  border: 2px solid var(--tinta);
  border-radius: 8px;
  box-shadow: var(--sombra-p);
  padding: 6px 10px 4px;
  white-space: nowrap;
}

/* ---------- CARTÃO DA FASE ---------- */

#tela-fase { padding: 2px 14px 12px; }

.cartao {
  flex: 1 1 auto;
  min-height: 0; /* sem isso o flex nunca encolhe e o cartão vaza da tela */
  display: flex;
  flex-direction: column;
  background: var(--papel-claro);
  border: 2px solid var(--tinta);
  border-radius: 14px;
  box-shadow: var(--sombra);
  padding: 12px 14px 14px;
  overflow-y: auto;
  touch-action: pan-y;
  position: relative;
}
.cartao.entrando { animation: cartaJogada .42s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes cartaJogada {
  from { opacity: 0; transform: translateY(70px) rotate(-6deg) scale(.94); }
  to { opacity: 1; transform: none; }
}
.cartao.tremendo { animation: treme .45s; }
@keyframes treme {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-9px) rotate(-1deg); }
  35% { transform: translateX(8px) rotate(1deg); }
  55% { transform: translateX(-6px); }
  75% { transform: translateX(5px); }
}

/* ---------- TIMER (~18s, barra que aperta) ---------- */

.timer {
  position: sticky;
  top: -12px;               /* cola no topo visível do cartão (compensa o padding) */
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--papel-claro);
  padding: 10px 0 4px;
  margin-top: -12px;        /* ocupa o padding-top do cartão */
}
.timer-barra {
  flex: 1 1 auto;
  height: 10px;
  border: 2px solid var(--tinta);
  border-radius: 8px;
  background: var(--papel-2);
  overflow: hidden;
}
.timer-resto {
  height: 100%;
  background: var(--verde);
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform .1s linear, background-color .3s;
}
.timer-seg {
  font-family: var(--f-titulo);
  font-size: 16px;
  line-height: 1;
  min-width: 30px;
  text-align: center;
  color: var(--tinta-forte);
  padding-top: 2px;
}
.timer.quente .timer-resto { background: var(--ouro); }
.timer.critico .timer-resto { background: var(--vermelho); }
.timer.critico .timer-seg { color: var(--vermelho-txt); animation: pulsa .5s infinite; }

.fase-cabeca {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.fase-lado {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding-top: 8px;
}
.ano-gigante {
  font-family: var(--f-titulo);
  font-size: clamp(38px, 12vw, 54px);
  line-height: .9;
  color: var(--vermelho);
  text-shadow: 3px 3px 0 var(--tinta);
  transform: rotate(-2deg);
  flex: 0 0 auto;
}
.fase-titulo {
  font-family: var(--f-titulo);
  font-size: 13.5px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--tinta-forte);
}

.fase-foto {
  margin: 8px auto 0;
  background: #fff;
  border: 2px solid var(--tinta);
  border-radius: 6px;
  box-shadow: var(--sombra-p);
  padding: 5px 5px 6px;
  max-width: 96%;
}
.fase-foto img {
  display: block;
  width: 100%;
  height: clamp(84px, 12.5vh, 130px);
  object-fit: cover;
}
.fase-foto .legenda {
  font-size: 10px;
  font-weight: 700;
  color: var(--tinta-mutada);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-top: 5px;
  text-align: center;
}
.fase-foto.rot-esq { transform: rotate(-1.6deg); }
.fase-foto.rot-dir { transform: rotate(1.6deg); }

.pergunta {
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.28;
  margin: 9px 2px 9px;
}

/* marca d'água que preenche o miolo das fases sem foto (some sozinha
   quando a explicação chega, porque encolhe via flex) */
.miolo-fantasma {
  flex: 1 1 auto;
  min-height: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}
.fantasma-ano {
  font-family: var(--f-titulo);
  font-size: clamp(58px, 26vw, 118px);
  line-height: .92;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 2.5px var(--papel-3);
  text-stroke: 2.5px var(--papel-3);
  transform: rotate(-8deg);
  max-width: 100%;
  user-select: none;
  -webkit-user-select: none;
}
/* fallback pra motor sem text-stroke: fica um bege bem clarinho */
@supports not (-webkit-text-stroke: 1px black) {
  .fantasma-ano { color: var(--papel-3); opacity: .55; }
}

.alternativas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
.alt {
  font-family: var(--f-corpo);
  font-size: 14.5px;
  font-weight: 800;
  text-align: left;
  line-height: 1.22;
  color: var(--tinta);
  background: var(--papel);
  border: 2px solid var(--tinta);
  border-radius: 8px;
  box-shadow: var(--sombra-p);
  padding: 10px 13px;
  min-height: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform .06s;
}
.alt .letra {
  font-family: var(--f-titulo);
  font-size: 14px;
  flex: 0 0 26px;
  height: 26px;
  border: 2px solid var(--tinta);
  border-radius: 50%;
  background: var(--ouro);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
}
.alt:active { transform: translate(3px, 3px); box-shadow: none; }
.alt:disabled { cursor: default; opacity: .5; }
.alt.correta-marcada {
  background: var(--verde-soft);
  border-color: var(--verde);
  color: var(--tinta-forte);
  opacity: 1;
  box-shadow: 3px 3px 0 var(--verde);
}
.alt.correta-marcada .letra { background: var(--verde); color: var(--papel-claro); border-color: var(--verde); }
.alt.errada-marcada {
  background: #F3D2CE;
  border-color: var(--vermelho-txt);
  color: var(--vermelho-txt);
  opacity: 1;
  box-shadow: none;
  text-decoration: line-through;
}

/* carimbo FATO!/ERROU! */
.carimbo {
  position: absolute;
  top: 50%; left: 50%;
  font-family: var(--f-titulo);
  font-size: 44px;
  padding: 10px 22px 6px;
  border: 5px solid;
  border-radius: 14px;
  background: rgba(252, 246, 232, .92);
  z-index: 10;
  pointer-events: none;
  opacity: 0;
}
.carimbo.fato { color: var(--verde); border-color: var(--verde); }
.carimbo.errou { color: var(--vermelho-txt); border-color: var(--vermelho-txt); }
.carimbo.batendo { animation: carimboBate .6s cubic-bezier(.2, 1.8, .4, 1) forwards; }
@keyframes carimboBate {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(3.2) rotate(-32deg); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(.95) rotate(-11deg); }
  75% { transform: translate(-50%, -50%) scale(1.06) rotate(-13deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-12deg); }
}
.carimbo.sumindo { animation: carimboSome .3s forwards; }
@keyframes carimboSome { to { opacity: 0; transform: translate(-50%, -50%) scale(.85) rotate(-12deg); } }

.mais-um {
  position: absolute;
  font-family: var(--f-titulo);
  font-size: 26px;
  color: var(--verde);
  text-shadow: 2px 2px 0 var(--papel-claro);
  pointer-events: none;
  z-index: 11;
  animation: sobeSome 1s ease-out forwards;
}
.mais-um.ruim { color: var(--vermelho-txt); }
@keyframes sobeSome {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  20% { opacity: 1; transform: translateY(-14px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-70px) scale(1); }
}

/* no FLUXO da cabeça (embaixo do título) — nunca por cima de texto.
   margin-top extra: o emoji infla o line-box e a rotação expande o rect;
   sem a folga, o retângulo do chip encosta no do título. */
.streak-chip {
  font-family: var(--f-titulo);
  font-size: 12px;
  line-height: 1;
  background: var(--ouro);
  border: 2px solid var(--tinta);
  border-radius: 999px;
  padding: 5px 10px 3px;
  box-shadow: 2px 2px 0 var(--tinta);
  transform: rotate(-2deg);
  white-space: nowrap;
  margin-top: 6px;
}

/* explicação pós-resposta */
.explica {
  margin-top: 12px;
  border: 2px solid var(--tinta);
  border-radius: 8px;
  box-shadow: var(--sombra-p);
  padding: 11px 13px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  animation: telaEntra .3s ease-out;
}
.explica.boa { background: var(--verde-soft); }
.explica.ruim { background: var(--ceu-soft); }
.explica .rotulo {
  font-family: var(--f-titulo);
  font-size: 12px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}
.explica.boa .rotulo { color: var(--verde); }
.explica.ruim .rotulo { color: var(--ceu); }

#btn-seguir { margin-top: 12px; width: 100%; }

/* ---------- GAME OVER ---------- */

#tela-gameover { align-items: center; gap: 14px; text-align: center; overflow-y: auto; touch-action: pan-y; }
#tela-gameover > * { flex-shrink: 0; }
#tela-gameover > :first-child { margin-top: auto; }
#tela-gameover > :last-child { margin-bottom: auto; }

.gameover-titulo {
  font-family: var(--f-titulo);
  font-size: clamp(34px, 11vw, 50px);
  line-height: .95;
  color: var(--papel-claro);
  background: var(--vermelho-txt);
  border: 2px solid var(--tinta);
  border-radius: 14px;
  box-shadow: var(--sombra);
  padding: 14px 20px 10px;
  transform: rotate(-2.5deg);
}
.gameover-sub {
  font-family: var(--f-titulo);
  font-size: 15px;
  text-transform: uppercase;
  color: var(--tinta-forte);
  max-width: 320px;
  line-height: 1.3;
}
.gameover-detalhe { font-size: 13.5px; font-weight: 700; color: var(--tinta-mutada); max-width: 300px; }
.titulo-gameover {
  font-family: var(--f-titulo);
  font-size: 12.5px;
  text-transform: uppercase;
  color: var(--tinta-forte);
  background: var(--ouro);
  border: 2px solid var(--tinta);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--tinta);
  padding: 7px 14px 4px;
  transform: rotate(-1.4deg);
  max-width: 92%;
}
.polaroid-gameover { transform: rotate(-2deg); width: min(42vw, 170px); }
.polaroid-gameover img { height: 110px; }

/* ---------- FINAL ---------- */

#tela-final { padding: 2px 14px 12px; }

.final-cartao {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--papel-claro);
  border: 2px solid var(--tinta);
  border-radius: 14px;
  box-shadow: var(--sombra);
  padding: 14px;
  overflow-y: auto;
  touch-action: pan-y;
}
.final-titulo {
  font-family: var(--f-titulo);
  font-size: clamp(20px, 6.4vw, 27px);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: var(--tinta-forte);
  transform: rotate(-1.5deg);
}
.final-titulo .em-verde {
  display: inline-block;
  background: var(--verde);
  color: var(--papel-claro);
  border: 2px solid var(--tinta);
  border-radius: 8px;
  box-shadow: var(--sombra-p);
  padding: 3px 10px 0;
  transform: rotate(1.6deg);
  margin-top: 3px;
}

/* título por desempenho (5 faixas, do sofá ao ministério) */
.titulo-wrap {
  text-align: center;
  margin: 12px 0 2px;
}
.titulo-rotulo {
  display: block;
  font-family: var(--f-corpo);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-mutada);
  margin-bottom: 5px;
}
.titulo-final {
  display: inline-block;
  font-family: var(--f-titulo);
  font-size: clamp(15px, 4.8vw, 20px);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--tinta-forte);
  background: var(--ouro);
  border: 2px solid var(--tinta);
  border-radius: 8px;
  box-shadow: var(--sombra-p);
  padding: 9px 14px 5px;
  transform: rotate(-1.6deg);
  max-width: 96%;
}
.titulo-sub {
  font-size: 12px;
  font-weight: 700;
  color: var(--tinta-mutada);
  line-height: 1.35;
  max-width: 330px;
  margin: 8px auto 0;
}

.placar {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 10px;
}
.placar .caixa {
  font-family: var(--f-titulo);
  text-align: center;
  border: 2px solid var(--tinta);
  border-radius: 8px;
  box-shadow: var(--sombra-p);
  padding: 9px 8px 6px;
  background: var(--papel);
  min-width: 0;
  flex: 1 1 0;
  max-width: 118px;
}
.placar .caixa .num { font-size: 23px; line-height: 1; color: var(--vermelho-txt); display: block; white-space: nowrap; }
.placar .caixa .rot { font-size: 9.5px; color: var(--tinta-mutada); text-transform: uppercase; letter-spacing: .04em; font-family: var(--f-corpo); font-weight: 800; }

.final-foto {
  margin: 4px auto 10px;
  background: #fff;
  border: 2px solid var(--tinta);
  border-radius: 6px;
  box-shadow: var(--sombra-p);
  padding: 5px 5px 7px;
  max-width: 88%;
  transform: rotate(1.4deg);
}
.final-foto img { display: block; width: 100%; height: clamp(90px, 15vh, 140px); object-fit: cover; object-position: center 30%; }
.final-foto .legenda { font-size: 10px; font-weight: 700; color: var(--tinta-mutada); text-transform: uppercase; margin-top: 5px; text-align: center; }

.recap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.recap .linha {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  border-bottom: 2px dotted var(--papel-3);
  padding: 3px 2px;
}
.recap .linha .ano {
  font-family: var(--f-titulo);
  font-size: 12px;
  flex: 0 0 58px;
  color: var(--vermelho-txt);
}
.recap .linha .resultado { margin-left: auto; font-size: 13px; }
.recap .linha.acertou .resultado { color: var(--verde); }
.recap .linha.errou .resultado { color: var(--vermelho-txt); }

.grito {
  font-family: var(--f-titulo);
  font-size: clamp(17px, 5.4vw, 22px);
  text-align: center;
  color: var(--papel-claro);
  background: var(--vermelho);
  border: 2px solid var(--tinta);
  border-radius: 8px;
  box-shadow: var(--sombra-p);
  padding: 12px 10px 8px;
  transform: rotate(-1.2deg);
  margin-bottom: 12px;
  text-transform: uppercase;
  line-height: 1.05;
}

.final-botoes { display: flex; flex-direction: column; gap: 10px; }
#btn-copiar.copiado { background: var(--verde); color: var(--papel-claro); }

.recorde-nota {
  text-align: center;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ouro-txt);
  text-transform: uppercase;
  margin-top: 9px;
  letter-spacing: .03em;
}

/* ---------- CONFETE ---------- */

.confete {
  position: fixed;
  top: -20px;
  width: 10px; height: 14px;
  border: 1.5px solid var(--tinta);
  z-index: 99;
  pointer-events: none;
  animation: cai linear forwards;
}
@keyframes cai {
  to { transform: translateY(110vh) rotate(720deg); }
}

/* telas muito estreitas: header compacto pra não quebrar linha */
@media (max-width: 359px) {
  .logo-mini { font-size: 10px; padding: 6px 6px 4px; }
  .vidas { font-size: 17px; }
  .progresso-mini { max-width: 105px; }
}

/* ---------- DESKTOP ---------- */

@media (min-width: 700px) {
  #app { border-left: 2px solid var(--tinta); border-right: 2px solid var(--tinta); }
}

/* respeito a quem enjoa com movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  #trilha-scroll { scroll-behavior: auto; }
}