:root {
  --noite: #0b1f3a;
  --noite-2: #143a63;
  --papel: #fffdf7;
  --texto: #1b2433;
  --suave: #4a5568;
  --claro: #e8eef7;
  --claro-suave: #b9c6da;
  --ambar: #ffb627;
  --ambar-escuro: #8a5a00;
  --turquesa: #2ec4b6;
  --lilas: #8b5cf6;
  --petroleo: #0f4c5c;
  --borda: #e6dfcf;
  --raio: 18px;
  --sombra: 0 10px 30px rgba(0, 0, 0, .25);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: radial-gradient(1200px 600px at 50% -10%, var(--noite-2), var(--noite) 60%) fixed, var(--noite);
  color: var(--claro);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}
/* estrelas */
.ceu {
  position: fixed; inset: 0; pointer-events: none; opacity: .6;
  background-image:
    radial-gradient(2px 2px at 20% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, #fff, transparent),
    radial-gradient(1px 1px at 40% 70%, #fff, transparent),
    radial-gradient(2px 2px at 85% 60%, #fff, transparent),
    radial-gradient(1px 1px at 10% 85%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 45%, #fff, transparent);
  animation: piscar 4s ease-in-out infinite alternate;
}
@keyframes piscar { to { opacity: .25; } }

main { position: relative; max-width: 560px; margin: 0 auto; padding: 16px 16px 48px; outline: none; }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.15; }
h3 { margin: 0 0 8px; font-size: 19px; }
.miudo { font-size: 14px; color: var(--claro-suave); }
[hidden] { display: none !important; }
.tela:not([hidden]) { animation: entrar .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes entrar { from { opacity: 0; transform: translateY(18px); } }

/* Botões */
.btn {
  display: block; width: 100%; min-height: 54px; margin: 10px 0;
  padding: 12px 18px; border: 2px solid var(--claro); border-radius: 99px;
  background: transparent; color: var(--claro);
  font: inherit; font-weight: 700; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn:active { transform: scale(.97); }
.btn.principal {
  border: none; color: #1b1300;
  background: linear-gradient(135deg, #ffd166, var(--ambar));
  box-shadow: 0 6px 0 #c47f00, 0 10px 24px rgba(255, 182, 39, .35);
}
.btn.principal:active { transform: translateY(4px); box-shadow: 0 2px 0 #c47f00; }
.btn.claro { background: rgba(255, 255, 255, .08); }
.btn.texto { border-color: transparent; text-decoration: underline; min-height: 48px; font-weight: 600; }
.pulsar { animation: pulsar 1.8s ease-in-out infinite; }
@keyframes pulsar { 50% { transform: scale(1.04); } }
:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 3px; }

/* Capa */
.capa { text-align: center; padding-top: 3vh; }
.globo { position: relative; width: 150px; height: 150px; margin: 0 auto 8px; }
.globo-terra { font-size: 104px; line-height: 150px; animation: flutuar 4s ease-in-out infinite; }
@keyframes flutuar { 50% { transform: translateY(-8px); } }
.orbita { position: absolute; inset: -6px; border: 2px dashed rgba(255, 255, 255, .25); border-radius: 50%; animation: girar 6s linear infinite; }
.orbita span { position: absolute; top: -16px; left: 50%; font-size: 28px; transform: translateX(-50%) rotate(90deg); }
@keyframes girar { to { transform: rotate(360deg); } }
.pre-titulo { margin: 0; color: var(--turquesa); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; }
.capa h1 { margin: 6px 0; font-size: 44px; font-weight: 900; letter-spacing: -.01em; }
.capa h1 span {
  background: linear-gradient(90deg, #ffd166, var(--ambar), #ff8fab, var(--ambar));
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brilho 6s linear infinite;
}
@keyframes brilho { to { background-position: 300% 0; } }
.capa .sub { font-size: 19px; font-weight: 600; margin: 4px 0 16px; }
.esteira { overflow: hidden; margin: 0 -16px 14px; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.esteira-faixa { display: flex; gap: 12px; width: max-content; animation: esteira 40s linear infinite; }
.esteira-faixa img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; border: 3px solid var(--ambar); background: var(--noite-2); }
@keyframes esteira { to { transform: translateX(-50%); } }
.fatos { list-style: none; padding: 0; margin: 0 0 18px; display: flex; justify-content: center; gap: 10px; }
.fatos li { background: rgba(255, 255, 255, .08); border-radius: 14px; padding: 8px 12px; font-size: 14px; color: var(--claro-suave); }
.fatos strong { display: block; font-size: 22px; color: #fff; }

/* Pergunta */
.rota { margin-bottom: 14px; }
.rota-linha { position: relative; height: 26px; }
.rota-linha::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; border-top: 3px dashed rgba(255, 255, 255, .25); }
.rota-feito { position: absolute; left: 0; top: 11px; height: 5px; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--turquesa), var(--ambar)); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.aviao { position: absolute; top: -2px; left: 0; font-size: 24px; transform: translateX(-50%) rotate(45deg); transition: left .5s cubic-bezier(.2, .8, .2, 1); }
.contador { font-size: 14px; color: var(--claro-suave); margin: 4px 0 0; }
.cartao-pergunta { background: var(--papel); color: var(--texto); border-radius: var(--raio); padding: 18px 16px 8px; box-shadow: var(--sombra); }
.cartao-pergunta.entrando { animation: deslizar .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes deslizar { from { opacity: 0; transform: translateX(40px) rotate(1deg); } }
.tag-tipo { display: inline-block; margin: 0; padding: 3px 12px; border-radius: 99px; font-size: 13px; font-weight: 800; }
.tag-tipo.cotidiano { background: #fde9c0; color: var(--ambar-escuro); }
.tag-tipo.ri { background: #d7f4f1; color: #0d5c55; }
.enunciado { font-size: 21px; margin: 10px 0 16px; outline: none; }
.alt {
  display: block; width: 100%; text-align: left; min-height: 56px; margin: 0 0 10px;
  padding: 14px 16px; border: 2px solid var(--borda); border-radius: 14px;
  background: #fff; color: var(--texto); font: inherit; cursor: pointer;
  opacity: 0; animation: surgir .35s forwards; transition: border-color .15s, transform .15s, background .15s;
}
.alt:nth-child(2) { animation-delay: .06s; } .alt:nth-child(3) { animation-delay: .12s; } .alt:nth-child(4) { animation-delay: .18s; }
.alt:hover { border-color: var(--turquesa); }
.alt[aria-pressed="true"] { border-color: var(--turquesa); background: #e6faf7; font-weight: 700; }
.alt.escolhida { animation: escolher .35s forwards; border-color: var(--turquesa); background: #e6faf7; }
@keyframes escolher { 0% { opacity: 1; transform: scale(1); } 40% { transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
@keyframes surgir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.voltar { width: auto; margin-left: -8px; }

/* Revelação */
.revelando { text-align: center; padding-top: 18vh; }
.roleta { width: 150px; height: 150px; margin: 0 auto; border-radius: 50%; overflow: hidden; border: 5px solid var(--ambar); box-shadow: 0 0 0 8px rgba(255, 182, 39, .2), 0 0 40px rgba(255, 182, 39, .4); animation: girar-leve 1s ease-in-out infinite alternate; }
.roleta img { width: 100%; height: 100%; object-fit: cover; }
@keyframes girar-leve { from { transform: rotate(-6deg) scale(.96); } to { transform: rotate(6deg) scale(1.04); } }
.revelando-texto { font-size: 20px; font-weight: 800; margin-top: 22px; }
.revelando-nome { color: var(--claro-suave); min-height: 1.5em; }

/* Resultado: visto */
.visto {
  position: relative; background: var(--papel); color: var(--texto);
  border-radius: var(--raio); padding: 0 18px 18px; overflow: hidden; box-shadow: var(--sombra);
  animation: virar .7s cubic-bezier(.2, .8, .2, 1);
  background-image: repeating-linear-gradient(45deg, rgba(15, 76, 92, .03) 0 10px, transparent 10px 20px);
}
@keyframes virar { from { opacity: 0; transform: perspective(800px) rotateY(-70deg); } }
.visto-faixa { display: flex; justify-content: space-between; margin: 0 -18px 16px; padding: 8px 18px; background: var(--noite); color: var(--ambar); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.carimbo {
  position: absolute; bottom: -14px; right: -4px; margin: 0; z-index: 2;
  border: 4px double #b45309; color: #b45309; padding: 6px 10px; border-radius: 10px;
  font-weight: 900; font-size: 12px; line-height: 1.1; text-align: center; letter-spacing: .06em;
  background: rgba(255, 250, 240, .85); transform: rotate(14deg);
  animation: carimbar .5s .6s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes carimbar { from { opacity: 0; transform: rotate(-20deg) scale(3); } to { opacity: 1; transform: rotate(14deg) scale(1); } }
.visto-topo { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; }
.moldura { position: relative; padding: 4px; border-radius: 14px; background: linear-gradient(135deg, var(--ambar), var(--turquesa)); }
.moldura .foto { display: block; width: 104px; height: 130px; object-fit: cover; border-radius: 11px; background: #ddd; }
.kicker { margin: 0; font-size: 14px; color: var(--suave); }
.visto h2 { margin: 2px 0; font-size: 25px; }
.titulo { margin: 0; color: var(--petroleo); font-weight: 800; }
.origem { margin: 2px 0 0; font-size: 14px; color: var(--suave); }
.rotulo { margin: 14px 0 6px; font-size: 12px; font-weight: 800; color: var(--suave); text-transform: uppercase; letter-spacing: .08em; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { background: var(--noite); color: #fff; padding: 5px 12px; border-radius: 99px; font-size: 14px; font-weight: 700; animation: surgir .4s both; }
.chips li:nth-child(2) { animation-delay: .1s; } .chips li:nth-child(3) { animation-delay: .2s; }
.qualidades { padding-left: 20px; margin: 12px 0; }
.qualidades li::marker { content: "★ "; color: var(--ambar-escuro); }
.frase { margin: 12px 0; padding: 10px 12px; border-left: 4px solid var(--ambar); background: #fff6e0; border-radius: 0 12px 12px 0; }
.frase p { margin: 0; font-style: italic; }
.frase cite { display: block; font-size: 13px; color: var(--suave); font-style: normal; margin-top: 4px; }
.gancho { font-weight: 800; color: var(--petroleo); }
.credito { font-size: 12px; color: var(--suave); margin: 6px 0 0; }

.surgir { animation: surgir .5s both; }
.rara {
  margin: 16px 0; padding: 14px 16px; border-radius: var(--raio); color: #fff; font-weight: 700;
  background: linear-gradient(135deg, var(--lilas), #ec4899); box-shadow: var(--sombra);
  animation: surgir .5s 1s both;
}
.bloco { margin: 18px 0; padding: 16px; border-radius: var(--raio); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }

/* Barras */
.legenda { display: flex; gap: 14px; font-size: 13px; margin-bottom: 8px; }
.leg::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.leg.voce::before { background: var(--ambar); } .leg.fig::before { background: var(--turquesa); }
.traco { margin-bottom: 10px; }
.traco-nome { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.linha { display: grid; grid-template-columns: 1fr 34px; gap: 8px; align-items: center; font-size: 13px; color: var(--claro-suave); margin-bottom: 3px; }
.trilho { height: 10px; background: rgba(255, 255, 255, .1); border-radius: 99px; overflow: hidden; }
.trilho span { display: block; height: 100%; border-radius: 99px; width: 0; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.linha.voce .trilho span { background: var(--ambar); }
.linha.fig .trilho span { background: var(--turquesa); }

/* Listas de figuras */
.lista-fig { list-style: none; padding: 0; margin: 0; }
.lista-fig button {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center;
  width: 100%; min-height: 64px; margin-bottom: 8px; padding: 8px 12px; text-align: left;
  border: none; border-radius: 14px; background: var(--papel); color: var(--texto);
  font: inherit; cursor: pointer; transition: transform .15s;
}
.lista-fig button:active { transform: scale(.98); }
.lista-fig img { width: 52px; height: 52px; object-fit: cover; border-radius: 50%; }
.lista-fig small { display: block; color: var(--suave); }
.pct { font-weight: 900; font-size: 18px; color: var(--petroleo); }
.top3 li:first-child button { outline: 3px solid var(--ambar); }

/* Compartilhar */
.redes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0; }
.rede {
  display: grid; place-items: center; min-height: 50px; border-radius: 14px;
  color: #fff; font-weight: 800; text-decoration: none; transition: transform .15s;
}
.rede:active { transform: scale(.96); }
.rede.whatsapp { background: #128c7e; } .rede.telegram { background: #1c7fbf; }
.rede.x { background: #000; border: 1px solid #444; } .rede.facebook { background: #1659c7; }
.aviso-copia { text-align: center; color: var(--turquesa); font-weight: 700; min-height: 1.5em; margin: 0; }
.acoes { margin-top: 8px; }

/* Como funciona / páginas em papel */
.papel { background: var(--papel); color: var(--texto); border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra); }
.papel .miudo { color: var(--suave); }
.papel .btn.principal { margin-top: 16px; }

/* Ficha */
dialog {
  width: min(560px, 100%); max-height: 100%; margin: auto; padding: 0;
  border: none; border-radius: var(--raio); background: var(--papel); color: var(--texto);
}
dialog[open] { animation: subir .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes subir { from { opacity: 0; transform: translateY(40px); } }
dialog::backdrop { background: rgba(5, 12, 24, .75); }
.ficha-conteudo { position: relative; padding: 20px 16px; }
.ficha-topo { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding-right: 40px; }
.ficha-topo .foto { width: 96px; height: 120px; object-fit: cover; border-radius: 12px; }
.ficha-conteudo h2 { margin: 0 0 2px; }
.ficha-conteudo h3 { margin-top: 18px; color: var(--petroleo); }
.fechar { position: absolute; top: 8px; right: 8px; width: 48px; height: 48px; border: none; background: none; font-size: 30px; color: var(--suave); cursor: pointer; }

#confete { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
.carregando { text-align: center; padding-top: 30vh; color: var(--claro-suave); }

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

/* títulos recebem foco só para leitores de tela; sem moldura visível */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }