/* Modo Corrida: cena em paralaxe, estações, avatares e pódio. Só transformações e opacidade
   são animadas (baratas para o celular). prefers-reduced-motion desliga tudo no fim do arquivo. */
.ico-modo{display:inline-flex;width:40px;height:40px;border-radius:12px;color:#fff;padding:7px;margin-right:8px;vertical-align:middle}
.ico-modo svg{width:100%;height:100%}

/* preparação */
.pre-corrida{max-width:760px;margin:0 auto}
.jog-cfg{border:2px solid var(--borda);border-radius:14px;padding:10px 14px 12px;margin:0 0 12px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.jog-cfg legend{font-weight:900;padding:0 6px;color:var(--c)}
.jog-prev{width:56px;height:92px;flex:none}
.jog-prev .av-svg{width:100%;height:100%;overflow:visible}
.jog-ops{flex:1;min-width:220px;display:flex;flex-direction:column;gap:8px}
.grupo{display:flex;gap:8px;flex-wrap:wrap}
.sw{position:relative;width:44px;height:44px;display:inline-block}
.sw input{position:absolute;inset:0;top:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sw i{position:absolute;top:4px;left:4px;width:36px;height:36px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #7a8496;pointer-events:none}
.sw input:checked+i{box-shadow:0 0 0 4px var(--c);transform:scale(1.08)}
.sw input:focus-visible+i{outline:3px solid #1d2433;outline-offset:3px;box-shadow:0 0 0 7px var(--foco)}
.sw input:focus+i{outline:3px solid #1d2433;outline-offset:3px}
.sw.cab i{background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center}
.sw.cab i svg{width:30px;height:30px}

/* cena */
.cena{--h:480px;position:relative;height:480px;overflow:hidden;border-radius:20px;background:linear-gradient(#4aa3f5 0%,#8cc8fa 38%,#dcefff 70%,#eef6ff 72%);box-shadow:var(--sombra);touch-action:pan-y;contain:layout paint}
.sol{position:absolute;top:9%;right:11%;width:calc(var(--h)*.13);height:calc(var(--h)*.13);border-radius:50%;background:radial-gradient(circle,#fff7c2 0%,#ffe27a 60%,#ffd54a 100%);box-shadow:0 0 calc(var(--h)*.08) calc(var(--h)*.02) rgba(255,226,122,.55)}
.camada{position:absolute;left:0;bottom:0;height:100%;will-change:transform}
.camada>svg,.camada .deriva>svg{display:block;position:absolute;left:0}
.camada.nuvens{top:0}
.camada.nuvens .deriva{position:absolute;left:0;top:0;animation:deriva 90s linear infinite}
.camada.nuvens .deriva>svg{top:0}
.camada.chao svg.rua{bottom:0}
.estacao{position:absolute;bottom:calc(28% - 2px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;width:96px}
.estacao::after{content:"";width:5px;height:calc(var(--h)*.11);background:#5b6475;border-radius:3px;order:4}
.estacao.alta .est-nm{order:0;margin:0 0 4px}
.estacao .est-ok{display:none;position:absolute;right:-6px;top:-6px;width:20px;height:20px;border-radius:50%;background:#187a3f;color:#fff;font-size:.7rem;align-items:center;justify-content:center;border:2px solid #fff}
.estacao.visitada .est-ok{display:flex}
.estacao.visitada .est-nu{opacity:.85}
.estacao .est-nu{position:relative}
.estacao .est-nu{order:1;width:44px;height:44px;border-radius:50%;background:var(--ec);color:#fff;font-weight:900;font-size:1.15rem;display:flex;align-items:center;justify-content:center;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.estacao .est-ic{order:2;width:26px;height:26px;border-radius:8px;background:#fff;color:var(--ec);padding:4px;margin-top:-6px;border:2px solid var(--ec)}
.estacao .est-ic svg{display:block;width:100%;height:100%}
.estacao .est-nm{order:3;font-size:.64rem;font-weight:900;text-transform:uppercase;color:#1d2433;background:rgba(255,255,255,.94);border-radius:6px;padding:1px 6px;margin-top:3px;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.estacao.t-ini .est-nu,.estacao.t-fim .est-nu{font-size:1.3rem}
.estacao.t-ini::after,.estacao.t-fim::after{height:30px}

/* avatar */
.av{position:absolute;bottom:calc(28% - 2px);left:0;height:calc(var(--h)*.3);width:calc(var(--h)*.18);margin-left:calc(var(--h)*-.09);will-change:transform}
.av::after{content:"";position:absolute;left:50%;bottom:-5px;width:70%;height:10px;margin-left:-35%;border-radius:50%;background:rgba(20,30,50,.22);filter:blur(1px)}
.av .poeira{position:absolute;left:30%;bottom:0;width:10px;height:10px;pointer-events:none}
.av .poeira i{position:absolute;left:0;bottom:0;width:7px;height:7px;border-radius:50%;background:rgba(190,170,130,.7);opacity:0}
.av.corre .poeira i{animation:poeira .5s ease-out infinite}
.av.corre .poeira i:nth-child(2){animation-delay:.17s;width:5px;height:5px}
.av.corre .poeira i:nth-child(3){animation-delay:.34s;width:9px;height:9px}
.av.volta .poeira{left:60%}
.av.volta .poeira i{animation-direction:reverse}
.av .av-svg{width:100%;height:100%;overflow:visible}
.av .corpo,.av .braco,.av .perna,.av .cabeca{transform-box:fill-box}
.av .corpo{transform-origin:50% 100%;animation:respira 2.4s ease-in-out infinite}
.av .braco,.av .perna{transform-origin:50% 0}
.av .cabeca{transform-origin:50% 100%}
.av .boca.triste{display:none}
.av.vez::before{content:"";position:absolute;left:50%;bottom:-8px;width:84%;height:14px;margin-left:-42%;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--c)}
.av-seta{position:absolute;top:-30px;left:50%;margin-left:-14px;width:28px;height:28px;border-radius:50%;background:#fff;color:#1d2433;font-weight:900;font-size:.85rem;display:none;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.av-seta::after{content:"";position:absolute;bottom:-7px;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:#fff;border-bottom:0}
.av.vez .av-seta{display:flex;animation:flutua 1.2s ease-in-out infinite}
.av.corre .corpo{animation:bob .32s ease-in-out infinite}
.av.corre .b-tras{animation:bracoA .32s ease-in-out infinite alternate}
.av.corre .b-frente{animation:bracoB .32s ease-in-out infinite alternate}
.av.corre .p-tras{animation:pernaA .32s ease-in-out infinite alternate}
.av.corre .p-frente{animation:pernaB .32s ease-in-out infinite alternate}
.av.volta .av-svg{transform:scaleX(-1)}
.av.feliz .corpo{animation:pula .7s ease-out 2}
.av.feliz .braco{animation:comemora .35s ease-in-out 4 alternate}
.av.feliz .boca.sorri{stroke-width:3}
.av.ufa .cabeca{animation:ufa 1.4s ease-in-out 1}
.av.ufa .braco{animation:none;transform:rotate(8deg)}
.av.ufa .boca.sorri{display:none}
.av.ufa .boca.triste{display:inline}
.av-mini{display:inline-flex;width:26px;height:26px;border-radius:50%;align-items:center;justify-content:center;overflow:hidden;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.av-mini svg{width:22px;height:22px}

@keyframes deriva{from{transform:translate3d(0,0,0)}to{transform:translate3d(-400px,0,0)}}
@keyframes respira{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.025)}}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes bracoA{from{transform:rotate(-40deg)}to{transform:rotate(40deg)}}
@keyframes bracoB{from{transform:rotate(40deg)}to{transform:rotate(-40deg)}}
@keyframes pernaA{from{transform:rotate(35deg)}to{transform:rotate(-35deg)}}
@keyframes pernaB{from{transform:rotate(-35deg)}to{transform:rotate(35deg)}}
@keyframes pula{0%,100%{transform:translateY(0)}40%{transform:translateY(-16px)}}
@keyframes comemora{from{transform:rotate(-150deg)}to{transform:rotate(-170deg)}}
@keyframes poeira{0%{transform:translate(0,0) scale(.6);opacity:.8}100%{transform:translate(-26px,-10px) scale(1.4);opacity:0}}
.dado-cena{position:absolute;top:50%;left:50%;width:calc(var(--h)*.26);height:calc(var(--h)*.26);margin:calc(var(--h)*-.13) 0 0 calc(var(--h)*-.13);border-radius:22%;background:var(--c);color:#fff;font-weight:900;font-size:calc(var(--h)*.16);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.4);pointer-events:none;box-shadow:0 14px 40px rgba(0,0,0,.35);border:4px solid #fff;z-index:30}
.dado-cena svg{width:60%;height:60%}
.dado-cena.mostra{animation:dadoCena .7s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes dadoCena{0%{opacity:0;transform:scale(.4) rotate(-20deg)}25%{opacity:1;transform:scale(1.05) rotate(0)}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9)}}
@keyframes ufa{0%,100%{transform:rotate(0)}30%{transform:rotate(9deg) translateY(2px)}70%{transform:rotate(7deg) translateY(2px)}}
.dado.rolando-6{animation:rolar .6s ease-in-out}

/* pódio e confete */
.podio-cartao{position:relative;overflow:hidden}
.podio{display:flex;align-items:flex-end;justify-content:center;gap:14px;height:230px;margin:10px 0 4px}
.degrau{display:flex;flex-direction:column;align-items:center;animation:sobe .6s cubic-bezier(.2,.8,.3,1.2) both}
.degrau .av{position:static;margin:0 0 -2px;width:54px;height:90px}
.degrau .av::after{display:none}
.degrau .bloco{width:92px;border-radius:10px 10px 0 0;color:#fff;font-weight:900;font-size:1.3rem;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:6px}
.degrau .bloco small{font-size:.72rem;font-weight:800;opacity:.95}
.degrau.d-2 .bloco{height:120px}.degrau.d-1 .bloco{height:90px}.degrau.d-0 .bloco{height:62px}
.confete{position:absolute;top:0;left:0;right:0;height:100%;overflow:hidden;pointer-events:none}
.confete i{position:absolute;top:-16px;width:10px;height:14px;border-radius:2px;animation:cai linear infinite;opacity:.9}
@keyframes sobe{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes cai{to{transform:translateY(620px) rotate(720deg)}}

@media (max-width:900px){.cena{height:45vh;min-height:300px;border-radius:14px;margin:0 -16px;width:calc(100% + 32px)}.estacao{width:88px}.estacao .est-nm{font-size:.6rem}}
@media (max-width:560px){.jog-cfg{padding:8px 10px 10px}.pre-corrida .linha .campo{min-width:100%}}
@media (prefers-reduced-motion:reduce){
  .camada,.av{will-change:auto}
  .camada.nuvens .deriva,.av .corpo,.av.vez .av-seta,.av.corre .braco,.av.corre .perna,.av.feliz .corpo,.av.feliz .braco,.av.ufa .cabeca,.degrau,.dado.rolando-6,.av.corre .poeira i,.dado-cena.mostra{animation:none!important}
  .confete{display:none}
}