/* MNDN JORNADA · Cinemáticas v1
   Abertura animada, início e fim de missão, subida de nível e transição com a logo.
   Usa o mascote do MNDN montado em camadas (copa, braços, corpo). */
@font-face{font-family:"CinAnton";src:url(../fonts/anton-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"CinAnton";src:url(../fonts/anton-latin-ext-400-normal.woff2) format("woff2");font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}

.cin{--cin-azul:#0B3B75;--cin-amarelo:#FFC42E;--cin-verde:#2E9B4F;--cin-vermelho:#D63A2B;--cin-creme:#FFF8EA;--cin-tinta:#0F2138;
  position:fixed;inset:0;z-index:24000;overflow:hidden;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--cin-tinta);
  -webkit-tap-highlight-color:transparent;user-select:none}
.cin *{box-sizing:border-box}
.cin-titulo{font-family:"CinAnton",Impact,"Arial Narrow Bold",sans-serif;letter-spacing:.5px;text-transform:uppercase;line-height:1}

/* ---------- mascote em camadas ---------- */
.cin-masc{position:relative;aspect-ratio:676/1024;width:100%;pointer-events:none}
.cin-masc .cm-bob{position:absolute;inset:0;transform-origin:50% 100%;animation:cmRespira 2.4s ease-in-out infinite}
.cin-masc img{position:absolute;inset:0;width:100%;height:100%;display:block}
.cin-masc .cm-copa{transform-origin:50.3% 29.3%;animation:cmCopa 3.2s ease-in-out infinite}
.cin-masc .cm-be{transform-origin:30.3% 54.7%}
.cin-masc .cm-bd{transform-origin:69.5% 54.7%}
.cin-masc .cm-olho{position:absolute;border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#f6efe1,#e9dcc6);
  border-bottom:3px solid #4a2d18;transform:scaleY(0);transform-origin:50% 0;animation:cmPisca 4.2s infinite}
.cin-masc .cm-olho.e{left:35.6%;top:33.2%;width:9.2%;height:6.9%}
.cin-masc .cm-olho.d{left:53.8%;top:32.2%;width:9.2%;height:6.7%;animation-delay:.02s}
.cin-masc .cm-boca{position:absolute;left:41.8%;top:40.6%;width:16.2%;height:6.4%;border-radius:45% 45% 50% 50%;
  background:radial-gradient(ellipse at 50% 35%,#f4ecdd,#e7d9c2);opacity:0}
.cin-masc .cm-boca::after{content:"";position:absolute;left:18%;right:18%;top:22%;height:42%;border-bottom:4px solid #5a3420;border-radius:0 0 50% 50%}
.cin-masc.falando .cm-boca{animation:cmFala .32s steps(1) infinite}

/* poses */
.cin-masc.p-acena .cm-be{animation:cmAcena .7s ease-in-out infinite}
.cin-masc.p-acena .cm-bd{animation:cmGesto 2.6s ease-in-out infinite}
.cin-masc.p-fala .cm-be{animation:cmGesto 2.2s ease-in-out infinite reverse}
.cin-masc.p-fala .cm-bd{animation:cmGesto 1.9s ease-in-out infinite}
.cin-masc.p-pensa .cm-bob{animation:cmPensa 3s ease-in-out infinite}
.cin-masc.p-pensa .cm-bd{transform:rotate(-28deg);animation:none}
.cin-masc.p-aponta .cm-bd{animation:cmAponta 1.4s ease-in-out infinite}
.cin-masc.p-aponta .cm-be{animation:cmGesto 2.4s ease-in-out infinite}
.cin-masc.p-comemora .cm-bob{animation:cmPulo .55s cubic-bezier(.3,.7,.4,1) infinite}
.cin-masc.p-comemora .cm-be{animation:cmAcena .35s ease-in-out infinite}
.cin-masc.p-comemora .cm-bd{animation:cmComemoraD .35s ease-in-out infinite}
.cin-masc.p-comemora .cm-copa{animation:cmCopa .5s ease-in-out infinite}

@keyframes cmRespira{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-1.2%) scale(1.012,.988)}}
@keyframes cmCopa{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes cmPisca{0%,92%,100%{transform:scaleY(0)}95%{transform:scaleY(1)}}
@keyframes cmFala{0%{opacity:0}50%{opacity:1}}
@keyframes cmAcena{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-16deg)}}
@keyframes cmGesto{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
@keyframes cmAponta{0%,100%{transform:rotate(-38deg)}50%{transform:rotate(-46deg)}}
@keyframes cmComemoraD{0%,100%{transform:rotate(-58deg)}50%{transform:rotate(-74deg)}}
@keyframes cmPulo{0%,100%{transform:translateY(0) scale(1.03,.97)}45%{transform:translateY(-9%) scale(.98,1.03)}}
@keyframes cmPensa{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* ---------- abertura (boas-vindas) ---------- */
.cin-intro{background:linear-gradient(180deg,#6fc3f0 0%,#bfe6f7 55%,#8cc788 100%)}
.cin-intro .ci-fundo{position:absolute;inset:-6%;background-size:cover;background-position:center;opacity:0;transform:scale(1.12);
  transition:opacity .45s ease,transform 7s linear;filter:saturate(1.1)}
.cin-intro .ci-fundo.on{opacity:1;transform:scale(1)}
.cin-intro .ci-veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,19,31,.35) 0%,rgba(6,19,31,0) 30%,rgba(6,19,31,0) 62%,rgba(6,19,31,.45) 100%)}
.cin-intro .ci-topo{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:max(12px,env(safe-area-inset-top)) 14px 0;z-index:5}
.cin-intro .ci-logo{width:54px;height:54px;border-radius:50%;background:#fff;border:3px solid var(--cin-tinta);box-shadow:0 4px 0 rgba(0,0,0,.35);
  display:grid;place-items:center;animation:ciLogo 3s ease-in-out infinite}
.cin-intro .ci-logo img{width:86%;height:86%;object-fit:contain}
@keyframes ciLogo{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.06)}}
.cin-intro .ci-pontos{display:flex;gap:6px}
.cin-intro .ci-pontos i{width:9px;height:9px;border-radius:9px;background:rgba(255,255,255,.35);transition:all .3s}
.cin-intro .ci-pontos i.on{width:24px;background:var(--cin-amarelo)}
.cin-btn-pular{border:2px solid rgba(255,255,255,.75);background:rgba(0,0,0,.35);color:#fff;border-radius:30px;padding:9px 16px;font:700 14px system-ui;cursor:pointer}
.cin-btn-pular:focus-visible,.cin-btn:focus-visible{outline:3px solid var(--cin-amarelo);outline-offset:3px}

.cin-intro .ci-palco{position:absolute;left:0;right:0;bottom:0;height:100%;pointer-events:none}
.cin-intro .ci-masc{position:absolute;left:max(-6%,calc(50% - 340px));bottom:-3%;width:min(56vw,330px);transition:transform .5s cubic-bezier(.3,1.5,.5,1),opacity .3s}
.cin-intro .ci-masc.fora{transform:translateY(60%) rotate(-8deg);opacity:0}
.cin-intro .ci-pers{position:absolute;right:max(-2%,calc(50% - 320px));bottom:-1%;width:min(38vw,230px);transform:translateX(130%);transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.cin-intro .ci-pers.on{transform:translateX(0);animation:ciPers 1.1s ease-in-out .7s infinite}
@keyframes ciPers{0%,100%{translate:0 0}50%{translate:0 -3%}}
.cin-intro .ci-pers img{width:100%;display:block;filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}

.cin-intro .ci-balao{position:absolute;left:50%;bottom:calc(min(56vw,330px)*1.28 + 6px);transform:translateX(-50%) scale(.6);opacity:0;
  width:min(92vw,560px);background:var(--cin-creme);border:4px solid var(--cin-tinta);border-radius:22px;padding:16px 18px 14px;
  box-shadow:0 8px 0 rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .2s;z-index:4;pointer-events:auto}
.cin-intro .ci-balao.on{transform:translateX(-50%) scale(1);opacity:1}
.cin-intro .ci-balao::after{content:"";position:absolute;left:22%;bottom:-22px;border:12px solid transparent;border-top:14px solid var(--cin-tinta)}
.cin-intro .ci-balao::before{content:"";position:absolute;left:calc(22% + 4px);bottom:-13px;border:8px solid transparent;border-top:10px solid var(--cin-creme);z-index:1}
.cin-intro .ci-quem{font:800 12px system-ui;letter-spacing:1px;color:var(--cin-verde);text-transform:uppercase;margin-bottom:4px}
.cin-intro .ci-texto{font:700 clamp(17px,4.6vw,22px)/1.32 system-ui;min-height:2.6em}
.cin-intro .ci-texto b{color:var(--cin-vermelho)}
.cin-intro .ci-seguir{display:block;margin:8px 0 0 auto;border:0;background:var(--cin-azul);color:#fff;border-radius:20px;padding:8px 16px;font:800 14px system-ui;cursor:pointer;opacity:.25;transition:opacity .3s}
.cin-intro .ci-seguir.pronto{opacity:1;animation:ciPulsa 1s ease-in-out infinite}
@keyframes ciPulsa{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

.cin-intro .ci-extra{position:absolute;left:50%;top:14%;transform:translateX(-50%);width:min(94vw,600px);display:flex;flex-wrap:wrap;justify-content:center;gap:12px;z-index:3}
.cin-adesivo{display:inline-block;background:var(--cin-amarelo);color:var(--cin-tinta);border:4px solid var(--cin-tinta);box-shadow:6px 6px 0 var(--cin-tinta);
  padding:8px 14px 6px;font-family:"CinAnton",Impact,sans-serif;font-size:clamp(22px,6vw,34px);text-transform:uppercase;line-height:1;
  transform:scale(0) rotate(-10deg);animation:cinPop .45s cubic-bezier(.3,1.7,.5,1) forwards}
.cin-adesivo.v{background:var(--cin-vermelho);color:#fff}
.cin-adesivo.b{background:#fff}
.cin-adesivo.az{background:var(--cin-azul);color:#fff}
.cin-adesivo.vd{background:var(--cin-verde);color:#fff}
@keyframes cinPop{to{transform:scale(1) rotate(var(--r,-2deg))}}

.ci-icone{width:clamp(92px,22vw,126px);background:#fff;border:4px solid var(--cin-tinta);border-radius:18px;box-shadow:6px 6px 0 var(--cin-tinta);
  text-align:center;padding:10px 4px 8px;position:relative;transform:scale(0);animation:cinPop .45s cubic-bezier(.3,1.7,.5,1) forwards}
.ci-icone span{display:block;font-size:clamp(38px,10vw,52px);line-height:1.1}
.ci-icone b{display:block;font-family:"CinAnton",Impact,sans-serif;font-size:clamp(17px,4.4vw,22px);text-transform:uppercase}
.ci-icone::after{content:"";position:absolute;inset:14% 22% 34%;background:
  linear-gradient(45deg,transparent 45%,var(--cin-vermelho) 45%,var(--cin-vermelho) 55%,transparent 55%),
  linear-gradient(-45deg,transparent 45%,var(--cin-vermelho) 45%,var(--cin-vermelho) 55%,transparent 55%);
  transform:scale(0);animation:cinX .3s ease-out forwards;animation-delay:inherit}
.ci-icone.xis::after{animation-delay:calc(var(--d,0s) + .45s)}
@keyframes cinX{to{transform:scale(1)}}

.ci-passo{display:flex;align-items:center;gap:10px;background:#fff;border:4px solid var(--cin-tinta);border-radius:16px;box-shadow:6px 6px 0 var(--cin-tinta);
  padding:8px 14px;width:min(86vw,360px);transform:translateX(-120vw);animation:ciEntra .5s cubic-bezier(.3,1.4,.5,1) forwards}
.ci-passo span{font-size:34px}
.ci-passo b{font-family:"CinAnton",Impact,sans-serif;font-size:26px;text-transform:uppercase}
.ci-passo small{margin-left:auto;font:800 13px system-ui;background:var(--cin-amarelo);border:2px solid var(--cin-tinta);border-radius:20px;padding:3px 10px}
@keyframes ciEntra{to{transform:translateX(0)}}

.ci-xp{display:flex;flex-direction:column;align-items:center;gap:10px}
.ci-xp .ci-num{font-family:"CinAnton",Impact,sans-serif;font-size:clamp(64px,18vw,104px);color:var(--cin-amarelo);-webkit-text-stroke:3px var(--cin-tinta);
  text-shadow:6px 6px 0 var(--cin-tinta);transform:scale(0);animation:cinPop .5s cubic-bezier(.3,1.7,.5,1) forwards}
.ci-barra{width:min(80vw,380px);height:26px;border:4px solid var(--cin-tinta);border-radius:20px;background:#fff;overflow:hidden;box-shadow:5px 5px 0 var(--cin-tinta)}
.ci-barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cin-verde),#7bd389);transition:width 1.6s cubic-bezier(.2,.8,.2,1)}

.ci-final{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:4vh}
.cin-btn{border:4px solid var(--cin-tinta);background:var(--cin-vermelho);color:#fff;border-radius:40px;padding:14px 28px 12px;cursor:pointer;
  font-family:"CinAnton",Impact,sans-serif;font-size:clamp(24px,6.4vw,32px);text-transform:uppercase;box-shadow:0 7px 0 var(--cin-tinta);
  transform:scale(0);animation:cinPop .45s cubic-bezier(.3,1.7,.5,1) forwards,ciPulsa 1.1s ease-in-out .6s infinite;pointer-events:auto}
.cin-btn:active{translate:0 4px;box-shadow:0 3px 0 var(--cin-tinta)}

/* v80: 150vmax já cobre a tela girando (260vmax pesava demais na placa de vídeo do celular e a abertura engasgava) */
.cin-raios{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;pointer-events:none;will-change:transform;
  background:repeating-conic-gradient(rgba(255,196,46,.20) 0 9deg,transparent 9deg 18deg);animation:cinGira 22s linear infinite;opacity:0;transition:opacity .5s}
.cin-raios.on{opacity:1}
@keyframes cinGira{to{transform:rotate(360deg)}}

/* troca de cena */
.cin-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:6}
.cin-flash.go{animation:cinFlash .35s ease-out}
@keyframes cinFlash{0%{opacity:.75}100%{opacity:0}}

/* ---------- transição com a logo ---------- */
.cin-wipe{pointer-events:none;background:transparent}
.cin-wipe .cw-disco{position:absolute;inset:0;background:#FFC42E;clip-path:circle(0% at 50% 50%)}
.cin-wipe .cw-logo{position:absolute;left:50%;top:50%;width:min(46vw,240px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:#fff;
  border:6px solid #0F2138;box-shadow:0 8px 0 rgba(0,0,0,.3);display:grid;place-items:center;transform:scale(0);overflow:hidden}
.cin-wipe .cw-logo img{width:100%;height:100%;object-fit:cover}

/* ---------- início de missão ---------- */
.cin-missao{display:grid;place-items:center;background:rgba(6,19,31,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:cinFade .25s ease-out}
@keyframes cinFade{from{opacity:0}}
.cin-missao .cmi-cartao{position:relative;width:min(88vw,420px);background:var(--cin-creme);border:5px solid var(--cin-tinta);border-radius:24px;box-shadow:0 10px 0 var(--cin-tinta);
  padding:46px 20px 22px;text-align:center;transform:translateY(120vh) rotate(-8deg);animation:cmiEntra .55s cubic-bezier(.3,1.35,.5,1) .05s forwards}
@keyframes cmiEntra{to{transform:translateY(0) rotate(-1.5deg)}}
.cin-missao .cmi-fita{position:absolute;left:50%;top:-26px;transform:translateX(-50%) rotate(-3deg);background:var(--cin-vermelho);color:#fff;border:4px solid var(--cin-tinta);
  box-shadow:5px 5px 0 var(--cin-tinta);padding:8px 22px 5px;font-size:30px;white-space:nowrap}
.cin-missao .cmi-icone{font-size:68px;line-height:1;transform:scale(0);animation:cinPop .45s cubic-bezier(.3,1.8,.5,1) .35s forwards}
.cin-missao .cmi-nome{font-size:clamp(26px,7vw,36px);margin:10px 0 6px;color:var(--cin-azul)}
.cin-missao .cmi-sub{font:600 15px/1.35 system-ui;color:#36495e;margin:0 0 12px}
.cin-missao .cmi-premios{display:flex;gap:10px;justify-content:center}
.cin-missao .cmi-premios span{background:var(--cin-amarelo);border:3px solid var(--cin-tinta);border-radius:30px;padding:5px 14px;font:800 16px system-ui;
  transform:scale(0);animation:cinPop .4s cubic-bezier(.3,1.8,.5,1) forwards}
.cin-missao .cmi-masc{position:absolute;left:-18px;bottom:-165px;width:112px;transform:translateY(40%) rotate(-12deg);opacity:0;animation:cmiMasc .5s cubic-bezier(.3,1.5,.5,1) .45s forwards}
@keyframes cmiMasc{to{transform:translateY(0) rotate(-6deg);opacity:1}}
.cin-missao .cmi-vai{position:absolute;left:50%;top:50%;font-size:clamp(90px,26vw,150px);color:var(--cin-amarelo);-webkit-text-stroke:5px var(--cin-tinta);
  text-shadow:8px 8px 0 var(--cin-tinta);transform:translate(-50%,-50%) scale(0) rotate(-10deg);pointer-events:none;z-index:3}
.cin-missao .cmi-vai.go{animation:cmiVai .7s cubic-bezier(.3,1.7,.5,1) forwards}
@keyframes cmiVai{0%{transform:translate(-50%,-50%) scale(0) rotate(-10deg)}60%{transform:translate(-50%,-50%) scale(1.1) rotate(-6deg)}100%{transform:translate(-50%,-50%) scale(1) rotate(-6deg)}}
.cin-missao .cmi-toque{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;color:rgba(255,255,255,.7);font:600 13px system-ui}

/* ---------- fim de missão e nível ---------- */
.cin-fim{display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,rgba(11,59,117,.88),rgba(6,19,31,.94));animation:cinFade .25s ease-out}
.cin-fim canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.cin-fim .cf-caixa{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;width:min(92vw,460px);text-align:center}
.cin-fim .cf-faixa{background:var(--cin-verde);color:#fff;border:5px solid var(--cin-tinta);box-shadow:7px 7px 0 var(--cin-tinta);padding:10px 22px 7px;
  font-size:clamp(30px,8.6vw,46px);transform:scale(0) rotate(-8deg);animation:cinPop .5s cubic-bezier(.3,1.7,.5,1) .1s forwards;--r:-3deg}
.cin-fim .cf-estrelas{display:flex;gap:6px;margin-top:6px}
.cin-fim .cf-estrelas i{font-style:normal;font-size:clamp(46px,13vw,64px);filter:drop-shadow(3px 4px 0 var(--cin-tinta));transform:scale(0);animation:cinPop .4s cubic-bezier(.3,1.9,.5,1) forwards}
.cin-fim .cf-estrelas i:nth-child(2){font-size:clamp(58px,16vw,80px);margin-top:-14px}
.cin-fim .cf-premios{display:flex;gap:12px}
.cin-fim .cf-premios span{background:var(--cin-amarelo);border:4px solid var(--cin-tinta);border-radius:30px;padding:6px 16px;font:900 20px system-ui;box-shadow:4px 4px 0 var(--cin-tinta);
  transform:scale(0);animation:cinPop .4s cubic-bezier(.3,1.8,.5,1) forwards}
.cin-fim .cf-nome{color:#fff;font:700 16px/1.35 system-ui;opacity:.92;margin:0}
.cin-fim .cf-masc{width:min(40vw,190px);margin-top:-6px}
.cin-fim .cin-btn{background:var(--cin-azul);animation-delay:1.1s,1.6s}
.cin-fim .cf-nivel{font-size:clamp(70px,20vw,120px);color:var(--cin-amarelo);-webkit-text-stroke:4px var(--cin-tinta);text-shadow:8px 8px 0 var(--cin-tinta);
  transform:scale(0);animation:cinPop .55s cubic-bezier(.3,1.7,.5,1) .25s forwards;--r:-4deg}

/* ---------- destaque (aponta onde tocar) ---------- */
.cin-destaque{position:fixed;z-index:23950;pointer-events:none;border-radius:20px;box-shadow:0 0 0 4px var(--cin-amarelo,#FFC42E),0 0 0 9999px rgba(6,19,31,.45);
  animation:cdPulsa 1.1s ease-in-out infinite;transition:opacity .3s}
@keyframes cdPulsa{0%,100%{box-shadow:0 0 0 4px #FFC42E,0 0 0 9999px rgba(6,19,31,.45)}50%{box-shadow:0 0 0 10px #FFC42E,0 0 0 9999px rgba(6,19,31,.45)}}
.cin-destaque .cd-mao{position:absolute;right:-18px;bottom:-46px;font-size:46px;animation:cdMao .8s ease-in-out infinite}
@keyframes cdMao{0%,100%{transform:translate(0,0)}50%{transform:translate(-8px,-10px)}}
.cin-destaque .cd-txt{position:absolute;left:50%;top:-52px;transform:translateX(-50%) rotate(-2deg);white-space:nowrap;background:#D63A2B;color:#fff;border:3px solid #0F2138;
  box-shadow:4px 4px 0 #0F2138;padding:6px 14px 4px;font-family:"CinAnton",Impact,sans-serif;font-size:22px;text-transform:uppercase}


/* ---------- tutorial e avisos esperam a animação terminar ---------- */
body.cin-ativa .tg-overlay,body.cin-ativa .tg-unlock,body.cin-ativa .tg-card{visibility:hidden!important}

/* ---------- bem-vindo de volta ---------- */
.cin-volta{display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,rgba(46,155,79,.92),rgba(11,59,117,.96));animation:cinFade .3s ease-out}
.cin-volta .cv-caixa{position:relative;z-index:2;width:min(92vw,460px);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.cin-volta .cv-masc{width:min(42vw,200px);margin-top:-10px;transform:translateY(40%) scale(.6);opacity:0;animation:cvMasc .55s cubic-bezier(.3,1.5,.5,1) .1s forwards}
@keyframes cvMasc{to{transform:none;opacity:1}}
.cin-volta .cv-balao{position:relative;background:var(--cin-creme);border:4px solid var(--cin-tinta);border-radius:20px;box-shadow:0 7px 0 rgba(0,0,0,.35);padding:12px 16px;
  margin-top:-12px;transform:scale(0);animation:cinPop .4s cubic-bezier(.3,1.7,.5,1) .35s forwards}
.cin-volta .cv-txt{margin:0;font:800 clamp(17px,4.6vw,21px)/1.3 system-ui}
.cin-volta .cv-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.cin-volta .cv-chips span{background:#fff;border:3px solid var(--cin-tinta);border-radius:30px;padding:6px 12px;font:800 15px system-ui;box-shadow:3px 3px 0 var(--cin-tinta);
  transform:scale(0);animation:cinPop .4s cubic-bezier(.3,1.8,.5,1) forwards}
.cin-volta .cv-obj{background:var(--cin-amarelo);border:4px solid var(--cin-tinta);border-radius:16px;box-shadow:5px 5px 0 var(--cin-tinta);padding:10px 14px;width:100%;
  transform:translateX(-120vw);animation:ciEntra .5s cubic-bezier(.3,1.4,.5,1) .95s forwards}
.cin-volta .cv-obj small{display:block;font:800 11px system-ui;letter-spacing:1px;text-transform:uppercase;opacity:.75}
.cin-volta .cv-obj b{font:800 16px/1.3 system-ui}

/* ---------- troféu e toast ---------- */
.cin-fim .cf-trofeu{font-size:clamp(80px,22vw,120px);line-height:1;filter:drop-shadow(5px 6px 0 var(--cin-tinta));transform:scale(0);animation:cinPop .55s cubic-bezier(.3,1.8,.5,1) .3s forwards;--r:0deg}
.cin-toast{position:fixed;inset:auto 12px calc(14px + env(safe-area-inset-bottom)) 12px;z-index:24100;margin:0 auto;max-width:440px;height:auto;overflow:visible;
  display:flex;align-items:center;gap:10px;background:var(--cin-creme);border:4px solid var(--cin-tinta);border-radius:18px;box-shadow:0 7px 0 var(--cin-tinta);padding:8px 12px 8px 8px;
  pointer-events:none;animation:ctEntra .45s cubic-bezier(.3,1.5,.5,1)}
.cin-toast.sai{transition:transform .3s ease-in,opacity .3s;transform:translateY(140%);opacity:0}
@keyframes ctEntra{from{transform:translateY(140%)}}
.cin-toast .ct-masc{width:52px;flex:none;margin:-26px 0 -6px}
.cin-toast .ct-txt{flex:1;min-width:0}
.cin-toast .ct-txt small{display:block;font:800 11px system-ui;color:var(--cin-verde);text-transform:uppercase;letter-spacing:.5px}
.cin-toast .ct-txt b{display:block;font:800 14px/1.25 system-ui;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cin-toast .ct-premio{display:flex;flex-direction:column;gap:3px}
.cin-toast .ct-premio span{background:var(--cin-amarelo);border:2px solid var(--cin-tinta);border-radius:20px;padding:1px 8px;font:900 12px system-ui;text-align:center}

/* ---------- mascote no tutorial, nos desbloqueios e nas respostas ---------- */
.tg-card.cin-tg-anima{animation:cinTgSobe .45s cubic-bezier(.3,1.4,.5,1);padding-top:22px!important;overflow:visible}
@keyframes cinTgSobe{from{transform:translate(-50%,40px);opacity:0}}
.tg-card .cin-tg-masc{position:absolute;width:74px;left:6px;top:-96px}
.tg-card.cin-tg-anima small{padding-left:78px;display:block}
.tg-unlock-card.cin-tg-anima{animation:cinTgPop .5s cubic-bezier(.3,1.6,.5,1);overflow:visible!important;padding-top:84px!important}
@keyframes cinTgPop{from{transform:translate(-50%,-50%) scale(.6);opacity:0}}
.tg-unlock-card .cin-tg-masc-grande{position:absolute;width:110px;left:50%;margin-left:-55px;top:-86px}
.tg-unlock .cin-raios{z-index:0;opacity:.8}
.mr-cartao{position:relative;overflow:visible}
.mr-cartao .cin-mr-masc{width:92px;margin:-74px auto -4px}
.modal-resposta .mr-cartao:has(.cin-mr-masc) .mr-icone{display:none}
.cin-mr-conf{position:absolute;inset:-40px;pointer-events:none;z-index:3}
.cin-mr-conf canvas{position:absolute;inset:0;width:100%;height:100%}

/* ---------- alternativas entram uma a uma ---------- */
#ops .op{animation:cinOpcao .38s cubic-bezier(.3,1.3,.5,1) both}
#ops .op:nth-child(2){animation-delay:.07s}#ops .op:nth-child(3){animation-delay:.14s}#ops .op:nth-child(4){animation-delay:.21s}#ops .op:nth-child(5){animation-delay:.28s}
#ops .op.certa{animation:ok .5s ease}#ops .op.errada{animation:nao .4s ease}
@keyframes cinOpcao{from{opacity:0;transform:translateY(14px) scale(.97)}}


/* ---------- vinheta de entrada ---------- */
.cin-vinheta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle at 50% 40%,#16508f,#06131f 75%);color:#fff;text-align:center;transition:opacity .5s,transform .5s}
.cin-vinheta.sai{opacity:0;transform:scale(1.08)}
.cin-vinheta .cvn-logo{width:min(44vw,210px);aspect-ratio:1;border-radius:50%;background:#fff;border:6px solid #FFC42E;box-shadow:0 0 0 10px rgba(255,196,46,.25),0 18px 40px rgba(0,0,0,.5);
  overflow:hidden;transform:translateY(-60vh) rotate(-200deg) scale(.6);animation:cvnLogo 1.2s cubic-bezier(.3,1.35,.5,1) .2s forwards,cvnPulso 2.4s ease-in-out 1.6s infinite;z-index:2}
.cin-vinheta .cvn-logo img{width:100%;height:100%;object-fit:cover}
@keyframes cvnLogo{to{transform:none}}
@keyframes cvnPulso{0%,100%{scale:1}50%{scale:1.05}}
.cin-vinheta .cvn-apresenta{margin:0;font:600 clamp(13px,3.6vw,16px)/1.4 system-ui;opacity:0;animation:cinFadeIn .6s ease 1.3s forwards;z-index:2;padding:0 16px}
.cin-vinheta .cvn-apresenta b{color:#FFC42E;letter-spacing:3px;text-transform:uppercase}
@keyframes cinFadeIn{to{opacity:1}}
.cin-vinheta .cvn-titulo{display:flex;flex-direction:column;align-items:center;z-index:2;line-height:.95}
.cin-vinheta .cvn-titulo span{display:block;font-size:clamp(26px,7vw,40px);opacity:0;transform:scale(.3);animation:cvnPal .5s cubic-bezier(.3,1.7,.5,1) forwards}
.cin-vinheta .cvn-titulo span:nth-child(1){animation-delay:2.1s}
.cin-vinheta .cvn-titulo span:nth-child(2){font-size:clamp(46px,13vw,76px);color:#FFC42E;-webkit-text-stroke:2px #0F2138;text-shadow:5px 5px 0 #0F2138;animation-delay:2.45s}
.cin-vinheta .cvn-titulo span:nth-child(3){animation-delay:2.8s}
@keyframes cvnPal{to{opacity:1;transform:none}}
.cin-vinheta .cvn-toque{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));opacity:.6;font:600 12px system-ui;z-index:2}

/* ---------- tela de abertura viva ---------- */
#abertura .dupla .cin-ab-masc{height:76%;max-height:260px;width:auto;flex:none;margin:0 -3% 0 -6%;align-self:flex-end;position:relative;z-index:2;
  transform:translateY(120%);animation:cinAbMasc .7s cubic-bezier(.3,1.5,.5,1) 1.1s forwards;filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}
@keyframes cinAbMasc{to{transform:none}}
#abertura.cin-entra .marca-campo{animation:cinAbLogo .9s cubic-bezier(.3,1.4,.5,1) .05s both,cinAbFlutua 4s ease-in-out 1.2s infinite}
@keyframes cinAbLogo{0%{opacity:0;transform:translateY(-120px) rotate(-25deg) scale(.5)}100%{opacity:1;transform:none}}
@keyframes cinAbFlutua{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-6px) rotate(1.5deg)}}
#abertura.cin-entra .titulo span{animation:cinAbPal .55s cubic-bezier(.3,1.7,.5,1) both}
#abertura.cin-entra .titulo .t1{animation-delay:.35s}#abertura.cin-entra .titulo .t2{animation-delay:.55s}#abertura.cin-entra .titulo .t3{animation-delay:.75s}
@keyframes cinAbPal{0%{opacity:0;transform:scale(.3) rotate(-6deg)}100%{opacity:1;transform:none}}
#abertura.cin-entra .dupla img:first-child{animation:cinAbEsq .8s cubic-bezier(.3,1.3,.5,1) .7s both,cinAbBalanca 3.2s ease-in-out 1.6s infinite}
#abertura.cin-entra .dupla img:last-child{animation:cinAbDir .8s cubic-bezier(.3,1.3,.5,1) .85s both,cinAbBalanca 3.4s ease-in-out 1.8s infinite}
@keyframes cinAbEsq{0%{opacity:0;transform:translateX(-60vw)}100%{opacity:1;transform:none}}
@keyframes cinAbDir{0%{opacity:0;transform:translateX(60vw)}100%{opacity:1;transform:none}}
@keyframes cinAbBalanca{0%,100%{translate:0 0}50%{translate:0 -6px}}
#abertura.cin-entra #btnIniciar{animation:cinAbPal .5s cubic-bezier(.3,1.7,.5,1) 1.3s both,cinAbBrilho 1.6s ease-in-out 2s infinite}
@keyframes cinAbBrilho{0%,100%{box-shadow:0 6px 0 rgba(0,0,0,.25),0 0 0 0 rgba(255,196,46,.7)}50%{box-shadow:0 6px 0 rgba(0,0,0,.25),0 0 0 14px rgba(255,196,46,0)}}
#abertura.cin-entra .valores>div{animation:cinAbPal .45s cubic-bezier(.3,1.7,.5,1) both}
#abertura.cin-entra .valores>div:nth-child(1){animation-delay:1.5s}#abertura.cin-entra .valores>div:nth-child(2){animation-delay:1.62s}#abertura.cin-entra .valores>div:nth-child(3){animation-delay:1.74s}
#abertura .cin-brilhos{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#abertura .cin-brilhos i{position:absolute;bottom:-20px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#fff6c9,#FFC42E 55%,transparent 70%);opacity:0;animation:cinBrilho linear infinite}
@keyframes cinBrilho{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.9}100%{transform:translateY(-105vh) scale(1.2);opacity:0}}


.cin-vinheta .cvn-lema{margin:4px 0 0;z-index:2;background:#FFC42E;color:#0F2138;border:3px solid #0F2138;box-shadow:4px 4px 0 #0F2138;padding:6px 14px 4px;font-family:"CinAnton",Impact,sans-serif;
  font-size:clamp(18px,5vw,24px);text-transform:uppercase;transform:scale(0) rotate(-6deg);animation:cinPop .5s cubic-bezier(.3,1.7,.5,1) 3.4s forwards;--r:-2deg}
.cin-vinheta .cvn-barra{position:absolute;left:50%;bottom:calc(46px + env(safe-area-inset-bottom));width:min(60vw,260px);height:10px;margin-left:min(-30vw,-130px);border-radius:10px;background:rgba(255,255,255,.2);overflow:hidden;z-index:2}
/* v80: a barra cresce por transform (roda na placa de vídeo e não engasga enquanto o jogo carrega) */
.cin-vinheta .cvn-barra i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;will-change:transform;background:#FFC42E;border-radius:10px;animation:cvnBarra 5.4s linear forwards}
@keyframes cvnBarra{to{transform:scaleX(1)}}
/* "Próximo objetivo" abaixo do botão Menu, sem ficar atrás dele */
#praca .proximo-objetivo{top:calc(190px + env(safe-area-inset-top));left:8px;right:auto;max-width:min(62%,330px);z-index:40}


/* ---------- ajustes v3: textos e cartões menores na apresentação ---------- */
.cin-intro .ci-masc{width:min(42vw,250px)}
.cin-intro .ci-balao{bottom:calc(min(42vw,250px)*1.22 + 4px);width:min(90vw,500px);padding:11px 14px 10px;border-width:3px;border-radius:18px}
.cin-intro .ci-texto{font:700 clamp(14px,3.9vw,18px)/1.32 system-ui;min-height:2.4em}
.cin-intro .ci-quem{font-size:10px;margin-bottom:2px}
.cin-intro .ci-seguir{padding:6px 13px;font-size:13px;margin-top:6px}
.cin-intro .ci-extra{top:10%;gap:8px;width:min(92vw,520px)}
.cin-intro .cin-adesivo{font-size:clamp(16px,4.6vw,24px);padding:6px 10px 4px;border-width:3px;box-shadow:4px 4px 0 var(--cin-tinta)}
.cin-intro .ci-icone{width:clamp(70px,18vw,96px);padding:6px 3px 5px;border-width:3px;box-shadow:4px 4px 0 var(--cin-tinta)}
.cin-intro .ci-icone span{font-size:clamp(28px,8vw,40px)}
.cin-intro .ci-icone b{font-size:clamp(13px,3.6vw,17px)}
.cin-intro .ci-passo{width:min(76vw,300px);padding:5px 10px;gap:8px;border-width:3px;box-shadow:4px 4px 0 var(--cin-tinta)}
.cin-intro .ci-passo span{font-size:24px}
.cin-intro .ci-passo b{font-size:19px}
.cin-intro .ci-passo small{font-size:11px;padding:2px 8px}
.cin-intro .ci-xp .ci-num{font-size:clamp(46px,13vw,76px)}
.cin-intro .ci-barra{height:20px;border-width:3px}
.cin-intro .ci-pers{width:min(32vw,190px)}

@media (prefers-reduced-motion:reduce){
  .cin *,.cin-destaque,.cin-destaque *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .cin-vinheta .cvn-logo,.cin-vinheta .cvn-titulo span,.cin-vinheta .cvn-lema,#abertura .dupla .cin-ab-masc,.cin-volta .cv-chips span,.cin-volta .cv-balao,.cin-volta .cv-obj,.cin-volta .cv-masc,.cin-fim .cf-trofeu,.cin-adesivo,.ci-icone,.cin-btn,.cin-fim .cf-faixa,.cin-fim .cf-estrelas i,.cin-fim .cf-premios span,.cin-missao .cmi-premios span,.cin-missao .cmi-icone,.cin-fim .cf-nivel,.ci-xp .ci-num{transform:none}
}