/* Caravana Israel 2026 · o jogo */
@font-face{font-family:"Fredoka";src:url("../assets/fonts/fredoka-medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Fredoka";src:url("../assets/fonts/fredoka-semibold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Fredoka";src:url("../assets/fonts/fredoka-bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito";src:url("../assets/fonts/nunito-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url("../assets/fonts/nunito-bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito";src:url("../assets/fonts/nunito-extrabold.woff2") format("woff2");font-weight:800;font-display:swap}

:root{
  --tinta:#2a1b12;
  --creme:#fff3d9;
  --areia:#f6dfb0;
  --papel:#fffdf6;
  --sol:#ffc53d;
  --sol-2:#f59f1c;
  --laranja:#f26a3d;
  --ceu:#57aee6;
  --jeans:#2f6ba8;
  --jeans-2:#234f80;
  --oliva:#7da44b;
  --oliva-2:#56802c;
  --vinho:#a8372f;
  --cinza:#b9ad9c;
  --titulo:"Fredoka","Nunito",system-ui,sans-serif;
  --texto:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pulo:cubic-bezier(.34,1.56,.64,1);
  --suave:cubic-bezier(.2,.7,.2,1);
  --seguro-b:env(safe-area-inset-bottom,0px);
  --seguro-t:env(safe-area-inset-top,0px);
}
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:#1c3f66;color:var(--tinta);font-family:var(--texto);font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;touch-action:manipulation}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
input{font:inherit;color:inherit;user-select:text;-webkit-user-select:text}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--sol);outline-offset:2px}

.fora{position:fixed;inset:0;background:radial-gradient(120% 90% at 50% 0%,#3d82c4 0%,#234f80 46%,#14304f 100%)}
.fora::after{content:"";position:absolute;inset:0;opacity:.14;background-image:radial-gradient(#fff 1.5px,transparent 1.6px);background-size:26px 26px}
.palco{position:relative;width:100%;height:100dvh;max-width:480px;margin:0 auto;background:var(--creme);overflow:hidden;isolation:isolate}
@media (min-width:700px) and (min-height:600px){
  .palco{height:min(calc(100dvh - 36px),900px);margin-top:max(18px,calc((100dvh - 900px) / 2));border-radius:34px;border:4px solid var(--tinta);box-shadow:0 14px 0 rgba(0,0,0,.28),0 40px 80px rgba(0,0,0,.35)}
}
.tela,.camada{position:absolute;inset:0}
.camada{pointer-events:none;z-index:30}
.camada>*{pointer-events:auto}
.tela>section{position:absolute;inset:0;display:flex;flex-direction:column;animation:entra .38s var(--suave) both}
@keyframes entra{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

/* ── peças comuns ── */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 24px;font-family:var(--titulo);font-weight:600;font-size:20px;letter-spacing:.01em;color:var(--tinta);background:var(--sol);border:3px solid var(--tinta);border-radius:20px;box-shadow:0 5px 0 var(--tinta);transition:transform .08s ease,box-shadow .08s ease,filter .2s ease;text-decoration:none}
.bt:active{transform:translateY(4px);box-shadow:0 1px 0 var(--tinta)}
.bt[disabled]{filter:grayscale(.7) opacity(.6);pointer-events:none}
.bt.grande{min-height:66px;font-size:24px;border-radius:24px}
.bt.azul{background:var(--ceu)}
.bt.verde{background:var(--oliva);color:#fff}
.bt.vermelho{background:var(--vinho);color:#fff}
.bt.branco{background:var(--papel)}
.bt.laranja{background:var(--laranja);color:#fff}
.bt.pequeno{min-height:44px;padding:0 16px;font-size:16px;border-radius:15px;box-shadow:0 4px 0 var(--tinta)}
.bt.redondo{width:46px;min-height:46px;padding:0;border-radius:50%;box-shadow:0 4px 0 var(--tinta);background:var(--papel)}
.bt svg{width:22px;height:22px;flex:none}
.cartao{background:var(--papel);border:3px solid var(--tinta);border-radius:24px;box-shadow:0 6px 0 var(--tinta)}
.etiqueta{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;font-family:var(--titulo);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;border:2.5px solid var(--tinta);border-radius:999px;background:var(--papel)}
.estrelas{display:inline-flex;gap:2px}
.estrelas svg{width:20px;height:20px;fill:var(--cinza);stroke:var(--tinta);stroke-width:1.6;stroke-linejoin:round}
.estrelas svg.on{fill:var(--sol)}
.contorno{color:#fff;-webkit-text-stroke:7px var(--tinta);paint-order:stroke fill;text-shadow:0 5px 0 var(--tinta)}
.rolavel{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none}
.rolavel::-webkit-scrollbar{display:none}
.aviso{position:absolute;left:50%;top:calc(16px + var(--seguro-t));transform:translateX(-50%);z-index:60;max-width:88%;padding:10px 16px;font-weight:800;font-size:15px;text-align:center;color:#fff;background:var(--tinta);border-radius:16px;animation:aviso 2.6s var(--suave) both;pointer-events:none}
@keyframes aviso{0%{opacity:0;transform:translate(-50%,-14px)}10%,84%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-10px)}}

/* ── título ── */
.titulo{background:#f3c98a;justify-content:space-between;color:#fff}
.titulo .arte{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;animation:respira 16s ease-in-out infinite alternate}
@keyframes respira{from{transform:scale(1.02)}to{transform:scale(1.09) translateY(-1.2%)}}
.titulo::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(180deg,rgba(42,27,18,0),rgba(42,27,18,.78) 72%,rgba(42,27,18,.92))}
.titulo>*{position:relative;z-index:1}
.titulo-topo{display:flex;align-items:center;justify-content:space-between;padding:calc(14px + var(--seguro-t)) 16px 0}
.selo-get{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;font-family:var(--titulo);font-weight:600;font-size:14px;color:var(--tinta);background:var(--papel);border:3px solid var(--tinta);border-radius:999px;box-shadow:0 4px 0 var(--tinta)}
.selo-get img{width:26px;height:26px}
.logo{text-align:center;padding:2vh 12px 0;animation:logo .9s var(--pulo) .15s both}
@keyframes logo{from{opacity:0;transform:scale(.6) translateY(-20px)}to{opacity:1;transform:none}}
.logo small{display:block;font-family:var(--titulo);font-weight:700;font-size:clamp(46px,14.5vw,68px);line-height:.92;letter-spacing:.01em}
.logo b{display:inline-block;margin-top:10px;padding:6px 20px 7px;font-family:var(--titulo);font-weight:700;font-size:clamp(22px,6.6vw,30px);letter-spacing:.06em;color:var(--tinta);background:var(--sol);border:3.5px solid var(--tinta);border-radius:999px;box-shadow:0 5px 0 var(--tinta);transform:rotate(-2.5deg)}
.titulo-base{padding:0 20px calc(22px + var(--seguro-b));display:grid;gap:12px}
.titulo-base .linha{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.titulo-base p{text-align:center;font-weight:700;font-size:14px;opacity:.92;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.titulo-base p b{color:var(--sol)}

/* ── entrar ── */
.entrar{background:linear-gradient(180deg,var(--ceu),#8fcdf0 60%,var(--creme));padding:calc(18px + var(--seguro-t)) 20px calc(20px + var(--seguro-b))}
.entrar .voltar{align-self:flex-start}
.entrar .guia-mini{width:150px;margin:6px auto -26px;position:relative;z-index:0}
.entrar .cartao{position:relative;z-index:1}
.entrar .cartao{padding:26px 20px 22px;display:grid;gap:14px}
.entrar h2{font-family:var(--titulo);font-weight:700;font-size:26px;line-height:1.1;text-align:center}
.entrar .sub{text-align:center;font-size:15px;color:#6b5646;margin-top:-6px}
.campo{display:grid;gap:6px}
.campo label{font-family:var(--titulo);font-weight:600;font-size:14px;letter-spacing:.03em;text-transform:uppercase;color:#6b5646}
.campo input{width:100%;height:56px;padding:0 16px;font-weight:800;font-size:20px;background:#fff;border:3px solid var(--tinta);border-radius:16px;outline:none}
.campo input:focus{border-color:var(--jeans);box-shadow:0 0 0 4px rgba(87,174,230,.4)}
.campo input.pin{text-align:center;font-size:30px;letter-spacing:.6em;padding-left:.6em;-webkit-text-security:disc}
.erro-form{min-height:20px;text-align:center;font-weight:800;font-size:14.5px;color:var(--vinho)}

/* ── cabeçalho de tela ── */
.barra{display:flex;align-items:center;gap:10px;padding:calc(12px + var(--seguro-t)) 14px 10px;flex:none;position:relative;z-index:3}
.barra .quem{flex:none;width:42px;height:42px;border:3px solid var(--tinta);border-radius:50%;background:linear-gradient(160deg,#ffe2a6,#f0a558);overflow:hidden}
.barra .quem img{width:100%;height:100%;object-fit:cover;transform:scale(1.2) translateY(7%)}
.barra h2{flex:1;min-width:0;font-family:var(--titulo);font-weight:700;font-size:21px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jogo .barra h2{font-size:17px;line-height:1.08;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pontos{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-family:var(--titulo);font-weight:700;font-size:17px;background:var(--papel);border:3px solid var(--tinta);border-radius:999px;box-shadow:0 3px 0 var(--tinta)}
.pontos svg{width:18px;height:18px;fill:var(--sol);stroke:var(--tinta);stroke-width:1.6}

/* ── mapa ── */
.mapa{background:linear-gradient(180deg,#8fd0f2 0%,#bfe6f6 26%,#f7e3b2 62%,#f0cf8e 100%)}
.mapa .barra{background:linear-gradient(180deg,rgba(143,208,242,.98),rgba(143,208,242,0))}
.jogador{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.jogador .ini{flex:none;width:44px;height:44px;display:grid;place-items:center;font-family:var(--titulo);font-weight:700;font-size:20px;color:#fff;background:var(--laranja);border:3px solid var(--tinta);border-radius:50%;box-shadow:0 3px 0 var(--tinta)}
.jogador b{display:block;font-family:var(--titulo);font-weight:700;font-size:18px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jogador span{font-size:12.5px;font-weight:800;color:#5c4a3b}
.trilha{flex:1;min-height:0;position:relative;padding:8px 0 calc(110px + var(--seguro-b))}
.trilha svg.caminho{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.trilha svg.caminho path{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;stroke-dasharray:2 20;opacity:.9}
.trilha svg.caminho path.feito{stroke:var(--laranja);stroke-dasharray:none;stroke-width:7;opacity:1}
.no{position:relative;display:flex;align-items:center;gap:12px;height:132px;padding:0 18px}
.no{text-align:left}
.no.dir{flex-direction:row-reverse;text-align:right}
.no-bola{position:relative;flex:none;width:96px;height:96px;border-radius:50%;border:4px solid var(--tinta);background:#ddd center/cover;box-shadow:0 6px 0 var(--tinta);overflow:visible;transition:transform .15s var(--pulo)}
.no-bola::after{content:attr(data-n);position:absolute;left:-6px;top:-6px;width:34px;height:34px;display:grid;place-items:center;font-family:var(--titulo);font-weight:700;font-size:17px;color:var(--tinta);background:var(--sol);border:3px solid var(--tinta);border-radius:50%}
.no.dir .no-bola::after{left:auto;right:-6px}
.no:not(.trancado):active .no-bola{transform:scale(.94)}
.no.trancado .no-bola{filter:grayscale(1) brightness(.82)}
.no.trancado .no-bola::after{background:var(--cinza)}
.no.atual .no-bola{animation:pulsa 1.5s ease-in-out infinite}
@keyframes pulsa{0%,100%{box-shadow:0 6px 0 var(--tinta),0 0 0 0 rgba(242,106,61,.7)}50%{box-shadow:0 6px 0 var(--tinta),0 0 0 14px rgba(242,106,61,0)}}
.no-txt{flex:1;min-width:0}
.no-txt small{font-family:var(--titulo);font-weight:600;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:#6b5646}
.no-txt b{display:block;font-family:var(--titulo);font-weight:700;font-size:19px;line-height:1.08}
.no.trancado .no-txt{opacity:.55}
.no .cadeado{position:absolute;inset:0;display:grid;place-items:center}
.no .cadeado svg{width:34px;height:34px;fill:#fff;stroke:var(--tinta);stroke-width:2}
.ficha{position:absolute;left:50%;bottom:78%;width:62px;transform:translateX(-50%);pointer-events:none;animation:flutua 1.3s ease-in-out infinite alternate;filter:drop-shadow(0 4px 0 rgba(42,27,18,.25))}
@keyframes flutua{from{transform:translate(-50%,0)}to{transform:translate(-50%,-9px)}}
.mapa-pe{position:absolute;left:0;right:0;bottom:0;z-index:4;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px calc(14px + var(--seguro-b));background:linear-gradient(180deg,rgba(240,207,142,0),rgba(240,207,142,.96) 34%)}

/* ── dia ── */
.dia{background:var(--creme)}
.dia-topo{position:relative;flex:none;height:30%;min-height:190px;background:#333 center/cover;border-bottom:4px solid var(--tinta)}
.dia-topo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,27,18,.35),rgba(42,27,18,0) 36%,rgba(42,27,18,.78))}
.dia-topo .barra{position:absolute;inset:0 0 auto 0}
.dia-topo .tit{position:absolute;left:16px;right:16px;bottom:12px;z-index:2;color:#fff}
.dia-topo .tit small{font-family:var(--titulo);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--sol)}
.dia-topo .tit h2{font-family:var(--titulo);font-weight:700;font-size:28px;line-height:1.02;text-shadow:0 3px 0 rgba(42,27,18,.6)}
.dia-lista{flex:1;min-height:0;padding:16px 16px calc(150px + var(--seguro-b));display:grid;gap:12px;align-content:start}
.desafio{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:12px;padding:12px 14px;text-align:left;width:100%}
.desafio:active{transform:translateY(3px);box-shadow:0 3px 0 var(--tinta)}
.desafio .ic{width:54px;height:54px;display:grid;place-items:center;border:3px solid var(--tinta);border-radius:16px;background:var(--ceu)}
.desafio .ic svg{width:30px;height:30px;stroke:var(--tinta);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.desafio[data-tipo=vf] .ic{background:#b9e08a}
.desafio[data-tipo=memoria] .ic{background:#f7b0a0}
.desafio[data-tipo=palavra] .ic{background:var(--sol)}
.desafio[data-tipo=ordem] .ic{background:#d7b9f3}
.desafio[data-tipo=corrida] .ic{background:#ffab6b}
.desafio[data-tipo=pausa] .ic{background:#e6dcc8}
.desafio small{font-family:var(--titulo);font-weight:600;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#7a6453}
.desafio b{display:block;font-family:var(--titulo);font-weight:700;font-size:18px;line-height:1.1}
.desafio .res{text-align:right}
.desafio .res i{display:block;font-style:normal;font-family:var(--titulo);font-weight:700;font-size:16px}
.desafio .novo{padding:5px 11px;font-family:var(--titulo);font-weight:700;font-size:13px;color:#fff;background:var(--laranja);border:2.5px solid var(--tinta);border-radius:999px}
.dia-pe{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:12px 16px calc(14px + var(--seguro-b));background:linear-gradient(180deg,rgba(255,243,217,0),var(--creme) 30%);display:grid;gap:8px}
.medidor{position:relative;height:22px;border:3px solid var(--tinta);border-radius:999px;background:#fff;overflow:hidden}
.medidor i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--sol),var(--laranja));border-right:3px solid var(--tinta);transition:width .8s var(--suave)}
.medidor::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:3px;background:var(--tinta)}
.medidor-txt{display:flex;justify-content:space-between;gap:12px;font-weight:800;font-size:12.5px;line-height:1.25;color:#6b5646}
.medidor-txt span:last-child{text-align:right}

/* ── encontro com o guia ── */
.encontro{background:#333;justify-content:flex-end;color:var(--tinta)}
.cenario{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:respira 18s ease-in-out infinite alternate}
.encontro::before{content:"";position:absolute;inset:auto 0 0 0;height:44%;z-index:1;background:linear-gradient(180deg,rgba(42,27,18,0),rgba(42,27,18,.55))}
.encontro .local{position:absolute;left:14px;top:calc(14px + var(--seguro-t));z-index:3;max-width:70%;animation:desliza .5s var(--suave) both}
.encontro .pular{position:absolute;right:14px;top:calc(12px + var(--seguro-t));z-index:3}
@keyframes desliza{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}
.retrato{position:absolute;left:50%;bottom:150px;z-index:2;height:60%;max-height:520px;width:auto;max-width:none;transform:translateX(-50%);transform-origin:50% 100%;animation:chega .55s var(--pulo) both;filter:drop-shadow(0 10px 0 rgba(42,27,18,.22))}
@keyframes chega{from{opacity:0;transform:translate(-50%,16%) scale(.9)}to{opacity:1;transform:translate(-50%,0)}}
.retrato.fala{animation:chega .55s var(--pulo) both,fala .5s ease-in-out .6s infinite alternate}
@keyframes fala{from{transform:translate(-50%,0)}to{transform:translate(-50%,-1.1%)}}
.balao{position:relative;z-index:4;margin:0 12px calc(14px + var(--seguro-b));padding:26px 18px 18px;min-height:150px;cursor:pointer}
.balao .nome{position:absolute;left:16px;top:-18px;padding:5px 16px;font-family:var(--titulo);font-weight:700;font-size:16px;color:#fff;border:3px solid var(--tinta);border-radius:999px;box-shadow:0 3px 0 var(--tinta)}
.balao p{font-size:18px;font-weight:700;line-height:1.36;min-height:74px}
.balao .mais{position:absolute;right:16px;bottom:10px;width:22px;height:22px;animation:quica .6s ease-in-out infinite alternate}
@keyframes quica{from{transform:translateY(0)}to{transform:translateY(5px)}}

/* chamada do desafio */
.chamada{background:var(--jeans);align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden}
.chamada::before{content:"";position:absolute;inset:-40%;background:repeating-linear-gradient(115deg,rgba(255,255,255,.1) 0 34px,transparent 34px 68px);animation:listras 1.2s linear infinite}
@keyframes listras{to{transform:translateX(68px)}}
.chamada>*{position:relative}
.chamada img{height:46%;width:auto;max-width:none;margin-bottom:-8px;animation:chamada-guia .6s var(--pulo) both;filter:drop-shadow(0 10px 0 rgba(0,0,0,.2))}
@keyframes chamada-guia{from{opacity:0;transform:translateX(-60%) rotate(-6deg)}to{opacity:1;transform:none}}
.chamada h3{font-family:var(--titulo);font-weight:700;font-size:20px;letter-spacing:.08em;text-transform:uppercase;color:var(--sol);animation:logo .5s var(--pulo) .25s both}
.chamada h2{font-family:var(--titulo);font-weight:700;font-size:clamp(34px,10vw,46px);line-height:1;margin:6px 16px 0;animation:logo .6s var(--pulo) .35s both}
.chamada .etiqueta{color:var(--tinta)}
.chamada .tipo{margin-top:16px;animation:logo .5s var(--pulo) .55s both}
.chamada .dica{max-width:280px;margin:12px auto 0;font-weight:700;font-size:15.5px;opacity:.95;animation:logo .5s var(--pulo) .65s both}
.chamada .bt{margin-top:22px;animation:logo .5s var(--pulo) .8s both}

/* ── moldura dos desafios ── */
.jogo{background:var(--creme)}
.jogo.azul{background:linear-gradient(180deg,#bfe6f6,var(--creme) 46%)}
.jogo .barra{padding-bottom:6px}
.tempo{position:relative;height:14px;margin:0 16px 4px;border:3px solid var(--tinta);border-radius:999px;background:#fff;overflow:hidden;flex:none}
.tempo i{position:absolute;inset:0;transform-origin:0 50%;background:var(--oliva)}
.tempo.pouco i{background:var(--vinho)}
.passos{display:flex;justify-content:center;gap:6px;margin:6px 0 2px;flex:none}
.passos i{width:22px;height:8px;border-radius:99px;background:#e3d3b4;border:2px solid var(--tinta)}
.passos i.ok{background:var(--oliva)}
.passos i.no{background:var(--vinho)}
.passos i.agora{background:var(--sol)}
.corpo{flex:1;min-height:0;display:flex;flex-direction:column;padding:10px 16px calc(16px + var(--seguro-b));gap:12px}

/* quiz */
.pergunta{padding:20px 18px;font-family:var(--titulo);font-weight:600;font-size:clamp(19px,5.4vw,23px);line-height:1.22;text-align:center;animation:entra .35s var(--suave) both}
.opcoes{display:grid;gap:10px;margin-top:auto}
.opcao{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 16px;text-align:left;font-weight:800;font-size:17px;line-height:1.2;background:var(--papel);border:3px solid var(--tinta);border-radius:18px;box-shadow:0 4px 0 var(--tinta);transition:transform .08s ease,box-shadow .08s ease,background .2s ease;animation:entra .35s var(--suave) both;animation-delay:calc(var(--i) * 60ms)}
.opcao:active{transform:translateY(3px);box-shadow:0 1px 0 var(--tinta)}
.opcao .letra{flex:none;width:32px;height:32px;display:grid;place-items:center;font-family:var(--titulo);font-weight:700;font-size:16px;background:var(--sol);border:2.5px solid var(--tinta);border-radius:10px}
.opcao.certa{background:#c9ec9d}
.opcao.certa .letra{background:var(--oliva);color:#fff}
.opcao.errada{background:#f6b9ae;animation:treme .4s ease}
.opcao.errada .letra{background:var(--vinho);color:#fff}
.opcoes.fim .opcao{pointer-events:none}
.opcoes.fim .opcao:not(.certa):not(.errada){opacity:.5}
@keyframes treme{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.nota{min-height:44px;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;font-weight:800;font-size:15px;color:#5c4a3b}
.nota b{font-family:var(--titulo);font-weight:700;font-size:18px}
.nota .mais-pts{color:var(--oliva-2)}
.nota .erro{color:var(--vinho)}

/* verdade ou mito */
.vf-area{flex:1;min-height:0;position:relative;display:grid;place-items:center}
.vf-carta{position:relative;width:100%;max-width:340px;aspect-ratio:3/3.5;max-height:100%;display:grid;place-items:center;padding:24px 22px;font-family:var(--titulo);font-weight:600;font-size:clamp(20px,5.8vw,25px);line-height:1.2;text-align:center;touch-action:none;cursor:grab;animation:carta .4s var(--pulo) both}
@keyframes carta{from{opacity:0;transform:scale(.7) rotate(-8deg)}to{opacity:1;transform:none}}
.vf-carta .carimbo{position:absolute;top:16px;padding:4px 14px;font-family:var(--titulo);font-weight:700;font-size:20px;letter-spacing:.06em;border:4px solid;border-radius:12px;opacity:0}
.vf-carta .carimbo.v{right:14px;color:var(--oliva-2);transform:rotate(10deg)}
.vf-carta .carimbo.m{left:14px;color:var(--vinho);transform:rotate(-10deg)}
.vf-botoes{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* memória */
.mem-grade{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:9px}
.mem{position:relative;perspective:700px}
.mem-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .42s var(--suave)}
.mem.virada .mem-in,.mem.feita .mem-in{transform:rotateY(180deg)}
.mem-f,.mem-v{position:absolute;inset:0;display:grid;place-items:center;border:3px solid var(--tinta);border-radius:16px;box-shadow:0 4px 0 var(--tinta);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mem-v{background:var(--jeans) radial-gradient(rgba(255,255,255,.2) 2px,transparent 2.4px) 0 0/16px 16px}
.mem-v img{width:46%;opacity:.95}
.mem-f{transform:rotateY(180deg);padding:5px;background:var(--papel);font-family:var(--titulo);font-weight:600;font-size:clamp(12px,3.5vw,15px);line-height:1.12;text-align:center;overflow:hidden;overflow-wrap:anywhere;hyphens:auto}
.mem.b .mem-f{background:#fff0c9}
.mem.feita .mem-f{background:#c9ec9d;animation:acerto .5s var(--pulo)}
@keyframes acerto{50%{transform:rotateY(180deg) scale(1.08)}}

/* palavra secreta */
.pal-dica{padding:16px 18px;text-align:center;font-weight:800;font-size:17px;line-height:1.3}
.pal-dica small{display:block;margin-bottom:4px;font-family:var(--titulo);font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#7a6453}
.pal-vidas{display:flex;justify-content:center;gap:6px}
.pal-vidas img{width:34px;height:auto;transition:filter .3s ease,opacity .3s ease,transform .3s var(--pulo)}
.pal-vidas img.gasta{filter:grayscale(1) brightness(.7);opacity:.35;transform:scale(.82)}
.pal-letras{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:auto 0}
.pal-letras span{width:clamp(24px,7.6vw,34px);height:clamp(36px,10.5vw,46px);display:grid;place-items:center;font-family:var(--titulo);font-weight:700;font-size:clamp(20px,6.2vw,28px);background:#fff;border:3px solid var(--tinta);border-radius:10px;box-shadow:0 3px 0 var(--tinta)}
.pal-letras span.vazia{color:transparent}
.pal-letras span.nova{animation:acha .4s var(--pulo)}
.pal-letras span.revelada{background:#f6b9ae}
@keyframes acha{from{transform:scale(1.5)}to{transform:none}}
.teclado{display:grid;gap:6px}
.teclado div{display:flex;justify-content:center;gap:5px}
.tecla{flex:1;max-width:38px;height:46px;font-family:var(--titulo);font-weight:700;font-size:18px;background:var(--papel);border:2.5px solid var(--tinta);border-radius:11px;box-shadow:0 3px 0 var(--tinta)}
.tecla:active{transform:translateY(2px);box-shadow:0 1px 0 var(--tinta)}
.tecla.sim{background:var(--oliva);color:#fff;pointer-events:none}
.tecla.nao{background:#d8cbb5;color:#9a8a76;box-shadow:none;pointer-events:none}

/* ordem certa */
.ord-lista{flex:1;min-height:0;display:grid;gap:9px;align-content:center}
.ord{position:relative;display:flex;align-items:center;gap:12px;min-height:58px;padding:9px 14px;text-align:left;font-weight:800;font-size:16px;line-height:1.2;width:100%;border-radius:18px;transition:transform .25s var(--suave),background .2s ease}
.ord .num{flex:none;width:34px;height:34px;display:grid;place-items:center;font-family:var(--titulo);font-weight:700;font-size:17px;background:#eee1c6;border:2.5px dashed var(--tinta);border-radius:50%}
.ord.ok{background:#c9ec9d;pointer-events:none}
.ord.ok .num{background:var(--oliva);color:#fff;border-style:solid}
.ord.no{animation:treme .4s ease;background:#f6b9ae}

/* pausa */
.pausa{background:#22262b;color:#efe7d6;justify-content:flex-end}
.pausa .cenario{filter:saturate(.35) brightness(.5)}
.pausa-txt{position:relative;z-index:2;padding:0 26px calc(30px + var(--seguro-b));text-align:center;display:grid;gap:18px}
.pausa-txt blockquote{margin:0;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:22px;line-height:1.36}
.pausa-txt cite{font-style:normal;font-family:var(--titulo);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--sol)}
.pausa-txt .bt{justify-self:center}

/* corrida */
.corrida{background:#000}
.corrida canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.corrida .hud{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;gap:8px;padding:calc(12px + var(--seguro-t)) 12px 0;pointer-events:none}
.corrida .hud>*{pointer-events:auto}
.corrida .vidas{display:inline-flex;gap:3px;padding:5px 9px;background:var(--papel);border:3px solid var(--tinta);border-radius:999px;box-shadow:0 3px 0 var(--tinta)}
.corrida .vidas svg{width:20px;height:20px;fill:var(--vinho);stroke:var(--tinta);stroke-width:1.6}
.corrida .vidas svg.off{fill:#d8cbb5}
.corrida .tempo{flex:1;margin:0}
.corrida .instr{position:absolute;left:16px;right:16px;top:30%;z-index:4;padding:22px 18px;text-align:center;display:grid;gap:12px;animation:logo .5s var(--pulo) both}
.corrida .instr h3{font-family:var(--titulo);font-weight:700;font-size:24px;line-height:1.1}
.corrida .instr p{font-weight:800;font-size:16px}
.corrida .instr .setas{display:flex;justify-content:center;gap:26px;font-family:var(--titulo);font-weight:700;font-size:13px;color:#7a6453}
.corrida .instr .setas svg{display:block;width:40px;height:40px;margin:0 auto 2px;stroke:var(--tinta);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.corrida .conta{position:absolute;inset:0;z-index:4;display:grid;place-items:center;font-family:var(--titulo);font-weight:700;font-size:120px;pointer-events:none}
.corrida .conta span{animation:conta .8s var(--pulo) both}
@keyframes conta{from{opacity:0;transform:scale(2.2)}40%{opacity:1}to{opacity:0;transform:scale(.7)}}
.toques{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:1fr 1fr}

/* ── resultado ── */
.veu{position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:20px;background:rgba(42,27,18,.62);animation:some .3s ease both}
@keyframes some{from{opacity:0}to{opacity:1}}
.resultado{position:relative;width:100%;max-width:380px;padding:74px 20px 20px;text-align:center;display:grid;gap:10px;animation:logo .5s var(--pulo) .05s both}
.resultado .rosto{position:absolute;left:50%;top:-62px;width:124px;height:124px;transform:translateX(-50%);border:4px solid var(--tinta);border-radius:50%;background:linear-gradient(160deg,#ffe2a6,#f0a558);overflow:hidden;box-shadow:0 5px 0 var(--tinta)}
.resultado .rosto img{width:100%;height:100%;object-fit:cover;transform:scale(1.2) translateY(7%)}
.resultado h3{font-family:var(--titulo);font-weight:700;font-size:27px;line-height:1.05}
.resultado .fala-guia{font-weight:700;font-size:15.5px;color:#5c4a3b}
.resultado .num{font-family:var(--titulo);font-weight:700;font-size:58px;line-height:1;color:var(--laranja);-webkit-text-stroke:2.5px var(--tinta);paint-order:stroke fill}
.resultado .num small{font-size:20px;color:var(--tinta);-webkit-text-stroke:0}
.resultado .estrelas{justify-content:center;gap:6px}
.resultado .estrelas svg{width:50px;height:50px;stroke-width:1.3;transform:scale(0)}
.resultado .estrelas svg.on{animation:estrela .5s var(--pulo) both;animation-delay:calc(.5s + var(--i) * .22s)}
.resultado .estrelas svg:not(.on){transform:none;animation:none}
@keyframes estrela{from{transform:scale(0) rotate(-40deg)}to{transform:scale(1) rotate(0)}}
.resultado .recorde{justify-self:center;background:var(--sol)}
.resultado .depois{padding:10px 12px;font-weight:700;font-size:14px;background:#fff0c9;border:2.5px dashed var(--tinta);border-radius:14px}
.resultado .acoes{display:grid;gap:10px;margin-top:6px}
.confete{position:absolute;inset:0;z-index:41;pointer-events:none;overflow:hidden}
.confete i{position:absolute;top:-20px;width:11px;height:16px;border-radius:3px;animation:cai linear both}
@keyframes cai{to{transform:translateY(110vh) rotate(720deg)}}

/* ── ranking ── */
.ranking{background:linear-gradient(180deg,var(--jeans),var(--jeans-2))}
.ranking .barra h2{color:#fff}
.rank-lista{flex:1;min-height:0;padding:6px 14px calc(20px + var(--seguro-b));display:grid;gap:8px;align-content:start}
.rank{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:10px 14px;background:var(--papel);border:3px solid var(--tinta);border-radius:18px;box-shadow:0 4px 0 var(--tinta);animation:entra .35s var(--suave) both;animation-delay:calc(var(--i) * 30ms)}
.rank .pos{font-family:var(--titulo);font-weight:700;font-size:20px;text-align:center}
.rank b{display:block;font-family:var(--titulo);font-weight:700;font-size:17px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank small{font-weight:800;font-size:12px;color:#7a6453}
.rank .pts{font-family:var(--titulo);font-weight:700;font-size:18px}
.rank.p1{background:#ffe08a}.rank.p2{background:#e9edf0}.rank.p3{background:#f3c9a0}
.rank.eu{outline:4px solid var(--sol);outline-offset:-1px}
.rank-eu{margin:0 14px 10px;flex:none}
.rank-vazio{padding:30px 20px;text-align:center;color:#fff;font-weight:800}

/* ── fim ── */
.fim{background:linear-gradient(180deg,#8fd0f2,#f7e3b2 60%,#f0cf8e);padding:calc(16px + var(--seguro-t)) 18px calc(20px + var(--seguro-b));justify-content:space-between}
.diploma{padding:22px 18px;text-align:center;display:grid;gap:8px}
.diploma small{font-family:var(--titulo);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#7a6453}
.diploma h2{font-family:var(--titulo);font-weight:700;font-size:30px;line-height:1.04}
.diploma .nome{font-family:var(--titulo);font-weight:700;font-size:26px;color:var(--laranja)}
.diploma .linha{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.fim .trio{display:flex;justify-content:center;align-items:flex-end;margin:4px -10px -4px}
.fim .trio img{width:37%;margin:0 -5%;filter:drop-shadow(0 6px 0 rgba(42,27,18,.18))}
.fim .trio img:nth-child(2){width:42%;z-index:1}

@media (max-height:640px){
  .retrato{height:52%;bottom:140px}
  .balao{min-height:130px;padding-top:22px}
  .balao p{font-size:16.5px;min-height:62px}
  .no{height:116px}.no-bola{width:84px;height:84px}
  .tecla{height:40px}
  .resultado{padding-top:62px}
  .resultado .num{font-size:48px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}