/* Movimento: herói, vilão, efeitos de gibi, episódios e laboratórios */
svg.heroi{width:120px;height:138px;overflow:visible;flex:none}
svg.heroi.mini{width:74px;height:86px}
svg.heroi .capa{transform-origin:100px 92px;animation:capa 1.4s ease-in-out infinite}
@keyframes capa{50%{transform:skewX(5deg) scaleX(1.05)}}
svg.heroi .olhos{transform-origin:100px 56px;animation:pisca 4s infinite}
svg.heroi .ant{animation:luz 1s ease-in-out infinite alternate}
svg.heroi .emblema{transform-origin:100px 126px;animation:emblema 2s ease-in-out infinite}
@keyframes emblema{50%{transform:scale(1.12)}}
svg.heroi .jato{opacity:0;transition:opacity .3s}
svg.heroi .fogo{transform-box:fill-box;transform-origin:50% 0;animation:fogo .12s infinite alternate}
@keyframes fogo{to{transform:scaleY(.55)}}
svg.heroi .braco{transition:transform .35s}
svg.heroi .be{transform-origin:49px 108px}svg.heroi .bd{transform-origin:151px 108px}
svg.heroi .boca{transform-box:fill-box;transform-origin:center}
svg.heroi.fala .boca{animation:boca .16s infinite alternate}
@keyframes boca{to{transform:scaleY(3.2)}}
svg.heroi.idle{animation:flutua 3s ease-in-out infinite}
svg.heroi.idle .bd{animation:acena 3.2s ease-in-out infinite}
@keyframes acena{0%,55%,100%{transform:none}65%,85%{transform:rotate(-150deg)}75%{transform:rotate(-120deg)}}
svg.heroi.voa{animation:voa 1.8s ease-in-out infinite}
svg.heroi.voa .jato{opacity:1}
svg.heroi.voa .be{transform:rotate(160deg)}
@keyframes voa{50%{transform:translateY(-12px) rotate(-5deg)}}
svg.heroi.feliz{animation:feliz .6s ease-in-out infinite}
svg.heroi.feliz .be{transform:rotate(150deg)}svg.heroi.feliz .bd{transform:rotate(-150deg)}
svg.heroi.feliz .jato{opacity:1}
@keyframes feliz{50%{transform:translateY(-16px) scale(1.04)}}
svg.heroi.triste{animation:treme .4s ease 2}
svg.heroi.triste .cabeca{transform:translateY(5px) rotate(6deg);transform-origin:100px 90px}
svg.vilao{width:160px;height:160px;overflow:visible}
svg.vilao.grande{width:min(42vh,260px);height:min(42vh,260px)}
svg.vilao .vg{animation:glitch 2.6s infinite steps(1)}
@keyframes glitch{0%,86%,100%{transform:none;filter:none}88%{transform:translate(6px,-3px) skewX(12deg);filter:hue-rotate(90deg)}91%{transform:translate(-6px,3px);filter:invert(1)}94%{transform:translate(3px,0) skewX(-8deg)}}
svg.vilao .olho{animation:olho 1s ease-in-out infinite alternate}
@keyframes olho{to{opacity:.45}}
svg.vilao .pix rect{animation:pix 1.4s infinite alternate}
@keyframes pix{to{transform:translate(4px,-6px);opacity:.3}}
.chefe-wrap{position:relative;display:inline-block;animation:flutua 2.4s ease-in-out infinite}
.chefe-wrap svg.vilao{width:110px;height:110px}
.chefe-wrap .chefe-emo{position:absolute;right:-8px;bottom:-4px;font-size:38px}
.chefe-wrap.leva{animation:apanha .45s}
.vs{font:900 28px Impact,"Arial Black",sans-serif;color:#dc2626;-webkit-text-stroke:1px #fff;animation:pop 1s infinite}
/* gibi */
.hq{position:fixed;z-index:30;width:200px;pointer-events:none;transform:translate(-50%,-50%);animation:hq .95s ease forwards}
.hq text{font:900 46px Impact,"Arial Black",sans-serif;stroke:#fff;stroke-width:2;paint-order:stroke}
@keyframes hq{0%{transform:translate(-50%,-50%) scale(0) rotate(-25deg)}25%{transform:translate(-50%,-50%) scale(1.2) rotate(6deg)}40%{transform:translate(-50%,-50%) scale(1) rotate(0)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-75%) scale(1)}}
body.treme-tela #app{animation:tela .45s}
@keyframes tela{20%{transform:translate(-8px,4px)}40%{transform:translate(7px,-5px)}60%{transform:translate(-5px,-3px)}80%{transform:translate(4px,3px)}}
.heroi-quiz{position:absolute;right:10px;top:-58px}
.card{position:relative}
.cristais{display:flex;gap:10px;align-items:center;color:#fff;font-weight:800;margin:0 0 12px}
.cristais svg.cristal{width:30px;height:40px}
.cristais .apagado{filter:grayscale(1) brightness(.6);opacity:.5}
svg.cristal{width:60px;height:80px;filter:drop-shadow(0 0 10px #fff8)}
/* episódios */
.tv{background:#0b1026;border-radius:24px;padding:10px;box-shadow:0 14px 40px #0006}
.palco{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0b1026}
.palco .ep-n{position:absolute;right:12px;top:10px;color:#fff9;font-size:13px;font-weight:800}
.legenda{color:#fff;font-size:20px;line-height:1.45;min-height:64px;padding:12px 8px}
.tv-bot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;color:#c4b5fd;padding:0 6px 6px}
.ator{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.ator.esq{justify-content:flex-start;padding-left:9%}.ator.dir{justify-content:flex-end;padding-right:10%}
.ator svg.heroi{width:min(30vh,210px);height:min(34vh,240px)}
.ator.chega{animation:chega 1.4s cubic-bezier(.2,.9,.3,1.2)}
@keyframes chega{from{transform:translate(-120%,-40%) rotate(-25deg)}}
.ator.zoom{animation:zoom 1s cubic-bezier(.2,.9,.3,1.3)}
@keyframes zoom{from{transform:scale(.1) rotate(30deg);opacity:0}}
.ator.desliga{animation:desliga 2.6s forwards}
@keyframes desliga{50%{filter:invert(1);transform:skewX(20deg)}100%{transform:scale(1,.02);opacity:0}}
.ator.trio{gap:8%}.ator.trio.alto{align-items:flex-start;padding-top:6%;justify-content:flex-end;padding-right:10%;gap:3%}
.quebra{animation:quebra 2s forwards}
@keyframes quebra{0%,30%{transform:none}40%{transform:rotate(-12deg)}50%{transform:rotate(10deg);filter:brightness(2)}100%{transform:translateY(60vh) rotate(160deg);opacity:0}}
.brilha{animation:brilhaC 1.6s ease-in-out infinite}
.brilha.grande svg.cristal{width:110px;height:146px}
@keyframes brilhaC{50%{transform:translateY(-14px) scale(1.08);filter:drop-shadow(0 0 22px #fff)}}
.mapa3 span{font-size:min(10vh,70px);animation:entraPop .6s backwards;margin:0 8px}
@keyframes entraPop{from{transform:scale(0) rotate(-90deg)}}
.flutuantes span{position:absolute;bottom:-10%;font:900 34px Impact,"Arial Black",sans-serif;color:#fde047;text-shadow:0 0 12px #f59e0b;animation:sobe 5s linear infinite}
@keyframes sobe{to{transform:translateY(-130%) rotate(30deg);opacity:0}}
.titulo-ep{flex-direction:column;animation:zoom 1.2s cubic-bezier(.2,.9,.3,1.3)}
.titulo-ep .t1,.titulo-ep .t2{font:900 min(9vw,74px) Impact,"Arial Black",sans-serif;color:#facc15;-webkit-text-stroke:3px #7c2d12;letter-spacing:3px;line-height:1;transform:rotate(-4deg)}
.titulo-ep .t2{color:#fff;-webkit-text-stroke:3px #1e3a8a;animation:pop 1.2s infinite}
.titulo-ep .mini-h svg.heroi{width:110px;height:126px}
.f-cidade{background:linear-gradient(#0b1026,#312e81 70%,#4c1d95)}
.f-cidade .lua{position:absolute;right:12%;top:10%;width:70px;height:70px;border-radius:50%;background:#fef9c3;box-shadow:0 0 40px #fef08a}
.skyline,.cenario{position:absolute;left:0;bottom:0;width:100%;height:60%}
.skyline .janela{animation:janela 4s infinite}
@keyframes janela{50%{opacity:.2}}
.f-glitch{background:radial-gradient(circle,#450a0a,#0b0b0b);animation:pisca-f .15s infinite}
.f-glitch .scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 3px,#ff000022 3px 4px);animation:scan 1s linear infinite}
@keyframes scan{to{background-position:0 40px}}
@keyframes pisca-f{50%{filter:brightness(1.15)}}
.f-rede,.f-titulo{background:linear-gradient(#0b1026,#1e1b4b)}
.grade{position:absolute;left:-50%;right:-50%;bottom:-20%;height:80%;background-image:linear-gradient(#22d3ee55 2px,transparent 2px),linear-gradient(90deg,#22d3ee55 2px,transparent 2px);background-size:50px 50px;transform:perspective(300px) rotateX(60deg);animation:grade 2s linear infinite}
@keyframes grade{to{background-position:0 50px}}
.f-castelo{background:linear-gradient(#581c87,#c026d3 80%,#f0abfc)}
.f-planeta{background:radial-gradient(circle at 30% 30%,#1e3a8a,#020617)}
.planeta{position:absolute;right:8%;top:14%;width:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#67e8f9,#0284c7 60%,#0c4a6e);animation:gira 20s linear infinite}
.planeta .anel{position:absolute;inset:38% -30%;border:10px solid #fde68a99;border-radius:50%;transform:rotate(-15deg)}
@keyframes gira{to{transform:rotate(360deg)}}
.f-ilha{background:linear-gradient(#f97316,#fb923c 50%,#fde68a)}
.f-ilha .sol{position:absolute;left:18%;top:18%;width:90px;height:90px;border-radius:50%;background:#fef08a;box-shadow:0 0 60px #fde047}
.ondas{animation:ondas 3s linear infinite}
@keyframes ondas{to{transform:translateX(100px)}}
.f-vitoria{background:#f59e0b}
.raios{position:absolute;inset:-50%;background:repeating-conic-gradient(#fde047 0 10deg,#f59e0b 10deg 20deg);animation:gira 14s linear infinite}
/* laboratórios */
.abas{display:flex;gap:6px;margin:10px 0}.abas button{border:0;border-radius:12px;padding:8px 12px;font-weight:800;background:#ede9fe;color:#4c1d95}.abas button.on{background:#7c3aed;color:#fff}
.ico-ouvir{border:0;background:#ede9fe;border-radius:50%;width:44px;height:44px;font-size:20px;flex:none}
.lab{min-height:260px}
.lab-num{font-size:34px;font-weight:900;text-align:center;margin:12px 0;color:#4c1d95}
.lab-in{font-size:18px;padding:8px;border-radius:12px;border:3px solid #c4b5fd;width:150px;text-align:center}
.lab-range{width:min(520px,90%);accent-color:#7c3aed}
.ordens{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.col{width:70px;border-radius:14px;overflow:hidden;background:#fff;border:3px solid var(--c);animation:cai .5s backwards}
@keyframes cai{from{transform:translateY(-60px);opacity:0}}
.col .cab{background:var(--c);color:#fff;font-weight:800;text-align:center;padding:4px}
.col .dig{font-size:40px;font-weight:900;text-align:center}.col .val{font-size:12px;text-align:center;padding-bottom:4px;color:#475569}
.graf{max-width:560px;margin:14px auto}.gl{display:flex;align-items:center;gap:8px;margin:5px 0}
.gl span{width:90px;font-size:13px;font-weight:800;text-align:right}.gl b{font-size:13px;min-width:60px}
.gl i{display:block;height:16px;border-radius:8px;background:var(--c);width:0;animation:cresce 1s forwards}
@keyframes cresce{to{width:var(--w)}}
.decomp{text-align:center;font-size:20px;margin:10px 0}
.blocos{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px}
.bloco{background:#fff;border:3px solid #a78bfa;border-radius:14px;padding:8px 12px;text-align:center;animation:cai .5s backwards}
.bloco .bn{font-weight:900;font-size:20px}.bloco .br{font:900 24px Georgia,serif;color:#b45309}.seta{color:#94a3b8}.mais{font-size:24px;font-weight:900;color:#7c3aed}
.rom-final{text-align:center;font:900 52px Georgia,serif;color:#b45309;letter-spacing:4px;margin:12px 0}
.rom-final span{display:inline-block;animation:voaDentro .5s backwards}
@keyframes voaDentro{from{transform:translateY(-50px) scale(2);opacity:0}}
.letras-rom{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.letras-rom span{background:#f1f5f9;border-radius:10px;padding:4px 10px;font-size:13px;text-align:center;transition:all .3s}
.letras-rom span b{display:block;font:900 22px Georgia,serif}
.letras-rom span.acesa{background:#fde68a;transform:scale(1.12);box-shadow:0 0 12px #f59e0b}
.expr{text-align:center;font-size:34px;font-weight:900;margin:16px 0;line-height:1.6}
.tok{display:inline-block;padding:2px 6px;border-radius:10px;transition:all .3s}
.tok.br{color:#7c3aed}.tok.op{color:#0369a1}
.tok.alvo{background:#fde047;box-shadow:0 0 0 4px #f59e0b;animation:pop .5s}
.tok.novo{background:#bbf7d0;animation:pop .6s}
.regra{text-align:center;font-size:18px;background:#fef3c7;border-radius:12px;padding:8px;margin:8px auto;max-width:640px}
.hist{text-align:center;font-size:20px;color:#475569;margin-top:8px}.hist div{animation:entra .4s}
.cena3d{height:420px;perspective:900px;display:grid;place-items:center;touch-action:none;cursor:grab;user-select:none}
.obj{position:relative;width:0;height:0;transform-style:preserve-3d}
.fc{position:absolute;width:110px;height:110px;transform-style:preserve-3d;display:grid;place-items:center;color:#fff;font-weight:800;border:2px solid #fff;box-sizing:border-box}
.fc.tri{border:0}
.c0{background:#7c3aedd9}.c1{background:#ec4899d9}.c2{background:#0ea5e9d9}.c3{background:#22c55ed9}.c4{background:#f59e0bd9}.c5{background:#ef4444d9}
.contagem{text-align:center;font-size:20px}
.escada{position:relative;height:330px;margin:10px 0;border-bottom:4px solid #4c1d95}
.degrau{position:absolute;bottom:0;width:calc(100%/7 - 4px);background:linear-gradient(#c4b5fd,#7c3aed);border-radius:10px 10px 0 0;text-align:center;color:#fff}
.degrau b{display:block;padding-top:4px;font-size:18px}.degrau.metro{background:linear-gradient(#fde68a,#f59e0b)}
.robo-esc{position:absolute;transition:left .5s cubic-bezier(.3,1.6,.5,1),bottom .5s cubic-bezier(.3,1.6,.5,1)}
.pulo{position:absolute;font:900 28px Impact,"Arial Black",sans-serif;color:#dc2626;opacity:0;pointer-events:none}
.pulo.vai{animation:pulo 1s forwards}
@keyframes pulo{0%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1.3)}100%{opacity:0;transform:translateY(-40px)}}
.formiga-svg{width:100%;max-height:300px}.soma{text-align:center;font-size:24px;margin:8px 0}
.sliders{display:grid;gap:6px;max-width:560px;margin:0 auto}.sliders label{font-weight:700}
.pizzas{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:10px}.pz{animation:entraPop .5s backwards}
.pz svg .fat,.pz svg .vaz{transition:fill .3s}
.tipo-fr{font-size:16px;background:#ede9fe;border-radius:10px;padding:4px 10px;vertical-align:middle}
.reta{max-width:560px;margin:18px auto 26px}.trilho{position:relative;height:6px;background:#4c1d95;border-radius:3px}
.trilho span{position:absolute;top:12px;transform:translateX(-50%);font-weight:800}.trilho span:before{content:"";position:absolute;left:50%;top:-16px;width:2px;height:14px;background:#4c1d95}
.marca{position:absolute;top:-9px;width:24px;height:24px;border-radius:50%;background:#f59e0b;border:3px solid #fff;transform:translateX(-50%);transition:left .6s cubic-bezier(.3,1.5,.5,1);box-shadow:0 0 12px #f59e0b}
.fluxo{display:flex;flex-direction:column;align-items:center;gap:10px}
.nodo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;background:#fff;border:3px solid #e2e8f0;border-radius:16px;padding:10px 14px;font-size:18px;animation:entra .4s;opacity:.65}
.nodo.ativo{opacity:1;border-color:#7c3aed;box-shadow:0 0 0 4px #ddd6fe}.nodo .mini-r{display:none}.nodo.ativo .mini-r{display:block}
.nodo .mini-r svg.heroi{width:50px;height:58px}
.nodo .escolhido{outline:4px solid #fde047}
.nodo.fim{opacity:1;font-size:24px}.nodo.fim.ok{background:#dcfce7;border-color:#22c55e;animation:pop .6s}.nodo.fim.nok{background:#fee2e2;border-color:#ef4444}
.preenche{display:inline-block;background:#bbf7d0;border-radius:10px;padding:0 8px;animation:pop .6s}.preenche.errou{background:#fde68a}
.frase-esteira{text-align:center;margin:10px 0;min-height:60px}
.lab{position:relative}.chip.voando{position:absolute;margin:0;transition:transform .7s cubic-bezier(.5,-0.3,.4,1.3);z-index:5;pointer-events:none}
.baldes{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:10px}
.balde{border:3px solid var(--c);border-radius:0 0 18px 18px;min-height:90px;background:#fff}
.balde .bt-b{background:var(--c);color:#fff;font-weight:800;text-align:center;padding:4px}
.balde .cont-b{padding:6px;display:flex;flex-wrap:wrap;gap:4px;min-height:40px}
.mini-chip{background:#f1f5f9;border-radius:8px;padding:2px 8px;font-weight:700;animation:pop .4s}
.montanha{position:relative;max-width:640px;margin:0 auto}.montanha svg{width:100%;display:block}
.robo-mt{position:absolute;transform:translate(-50%,-92%);pointer-events:none}.robo-mt svg.heroi{width:54px;height:62px}
.flag{animation:entraPop .5s}
.balao-hist{background:#fff7ed;border:3px solid #fdba74;border-radius:16px;padding:12px;font-size:18px;max-width:640px;margin:10px auto;min-height:56px;animation:entra .4s}
.pct{animation:barra 1s ease}
@keyframes barra{from{width:0}}
@media (max-width:600px){.legenda{font-size:16px}.expr{font-size:24px}.lab-num{font-size:26px}.heroi-quiz{display:none}.cena3d{height:300px}}