/* =========================================================================
   Desafio Caleidoscópio · app de computador (painel + estação)
   Usa os tokens de shared/viali.css. Nenhuma paleta nova.
   ========================================================================= */
:root{
  --prisma:linear-gradient(90deg,var(--magenta),var(--laranja),var(--amarelo),var(--turquesa),var(--azul),var(--violeta));
  --prisma-c:conic-gradient(from 0deg,var(--magenta),var(--laranja),var(--amarelo),var(--turquesa),var(--azul),var(--violeta),var(--magenta));
  --prisma-loop:linear-gradient(90deg,var(--magenta),var(--laranja),var(--amarelo),var(--turquesa),var(--azul),var(--violeta),var(--magenta),var(--laranja),var(--amarelo),var(--turquesa),var(--azul),var(--violeta),var(--magenta));
  --noite:#141838; --noite-2:#232a62;
  --topo-h:72px;
}
html{scroll-behavior:smooth}
body.tela{font-size:19px;overflow-x:hidden}
body.tela.escuro{background:var(--noite);color:#fff}
#app{position:relative;z-index:1;min-height:100vh}
#fundo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#fundo .mandala-fundo{position:absolute;width:980px;height:980px;right:-300px;bottom:-360px;opacity:.07;animation:girar 240s linear infinite}
#fundo .mandala-fundo.b{left:-380px;top:-420px;right:auto;bottom:auto;width:760px;height:760px;opacity:.05;animation-direction:reverse}
#fundo svg{width:100%;height:100%}
body.escuro #fundo .mandala-fundo{opacity:.12}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes girarRev{to{transform:rotate(-360deg)}}
@keyframes surgir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes surgirZoom{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes pulsar{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes brilho{0%,100%{filter:drop-shadow(0 0 0 rgba(255,193,46,0))}50%{filter:drop-shadow(0 0 18px rgba(255,193,46,.8))}}
@keyframes tremer{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.surgir{animation:surgir .5s cubic-bezier(.2,.8,.2,1) both}
.surgir-zoom{animation:surgirZoom .45s cubic-bezier(.2,.8,.2,1) both}
.tremer{animation:tremer .45s ease}
.oculto{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mudo{color:var(--tinta-2)} .fraco{color:var(--tinta-3)}
.centro{text-align:center}
.linha-flex{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.entre{justify-content:space-between}
.col{display:flex;flex-direction:column;gap:12px}
.cresce{flex:1}
.gap-s{gap:8px}.gap-l{gap:22px}
.mt{margin-top:18px}.mt-l{margin-top:30px}.mb{margin-bottom:14px}
hr.sep{border:0;border-top:2px dashed var(--linha);margin:18px 0}

/* ---------- botões extras ---------- */
.btn{font-size:1.02rem;min-height:48px;text-decoration:none}
a{color:var(--viali)}
.btn .v-icone{font-size:1.15em}
.btn.peq{font-size:.88rem;padding:.5em 1em;min-height:38px}
.btn.gg{font-size:1.5rem;padding:1em 2em;min-height:80px}
.btn.eq{background:var(--eq);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.15)}
.btn.eq.claro{background:var(--eq-c);color:var(--tinta);box-shadow:inset 0 0 0 2px var(--eq),0 3px 0 rgba(28,33,71,.12)}
.btn.prisma{background:var(--prisma-loop);background-size:200% 100%;animation:prismaMove 8s linear infinite;text-shadow:0 1px 2px rgba(0,0,0,.25)}
@keyframes prismaMove{from{background-position:0 0}to{background-position:-100% 0}}
.btn.alerta{background:var(--alerta);color:var(--tinta)}
.btn.fantasma{background:transparent;color:inherit;box-shadow:none}
.btn.fantasma:hover{background:rgba(28,33,71,.06);box-shadow:none}
.btn.redondo{width:52px;height:52px;padding:0;border-radius:50%}
.btn.redondo.peq{width:40px;height:40px;min-height:40px}
.btn.ativo{outline:3px solid var(--amarelo);outline-offset:2px}
.escuro .btn.sec{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.2)}
.escuro .btn.fantasma:hover{background:rgba(255,255,255,.1)}
.grupo-btn{display:inline-flex;gap:6px;flex-wrap:wrap}
.chave{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-family:var(--f-display);font-weight:600;user-select:none}
.chave input{appearance:none;width:52px;height:30px;border-radius:99px;background:var(--linha);position:relative;cursor:pointer;transition:background .2s;margin:0}
.chave input::after{content:"";position:absolute;left:4px;top:4px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.chave input:checked{background:var(--ok)}
.chave input:checked::after{transform:translateX(22px)}

/* ---------- campos ---------- */
.campo{display:flex;flex-direction:column;gap:6px}
.campo label,.rotulo{font-family:var(--f-display);font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2)}
.ent,textarea.ent,select.ent{font:inherit;font-size:1.02rem;padding:.7em .9em;border-radius:14px;border:2px solid var(--linha);background:#fff;color:var(--tinta);width:100%;transition:border-color .2s, box-shadow .2s}
.ent:focus{outline:none;border-color:var(--viali-2);box-shadow:0 0 0 4px rgba(110,114,240,.18)}
textarea.ent{resize:vertical;min-height:110px;line-height:1.45}
.ent.codigo{font-family:var(--f-display);font-weight:600;font-size:2rem;letter-spacing:.18em;text-align:center;text-transform:uppercase}
.contador{display:inline-flex;align-items:center;gap:8px}
.contador .num{min-width:2.2em;text-align:center;font-family:var(--f-display);font-weight:700;font-size:1.6rem;font-variant-numeric:tabular-nums}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:20;height:var(--topo-h);display:flex;align-items:center;gap:18px;padding:0 26px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--linha)}
.topo::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:4px;background:var(--prisma);opacity:.9}
.topo .marca{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tinta)}
.topo .marca .mini-mandala{width:40px;height:40px;animation:girar 40s linear infinite}
.topo .marca b{font-family:var(--f-display);font-weight:600;font-size:1.2rem;line-height:1}
.topo .marca small{display:block;font-size:.72rem;color:var(--tinta-3);font-family:var(--f-display);letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
.topo nav{display:flex;gap:4px;margin-left:12px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.topo nav a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;text-decoration:none;color:var(--tinta-2);font-family:var(--f-display);font-weight:600;font-size:.95rem;white-space:nowrap;transition:background .2s,color .2s}
.topo nav a:hover{background:var(--nevoa);color:var(--tinta)}
.topo nav a.atual{background:var(--tinta);color:#fff}
.topo .dir{margin-left:auto;display:flex;align-items:center;gap:8px}
.selo-demo{font-family:var(--f-display);font-weight:600;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--amarelo-c);color:#8a5a00;border:2px dashed var(--amarelo)}
.pagina{max-width:1560px;margin:0 auto;padding:28px 30px 60px}
.pagina.larga{max-width:none}
.cab-pagina{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.cab-pagina h1{font-size:2.5rem}
.cab-pagina .sup{font-family:var(--f-display);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.85rem;color:var(--tinta-3);margin-bottom:6px}

/* ---------- painéis e cartões ---------- */
.painel{border-radius:var(--r-l)}
.painel.borda-prisma{position:relative;overflow:hidden}
.painel.borda-prisma::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--prisma)}
.painel h2{font-size:1.5rem;margin-bottom:12px}
.painel h3{font-size:1.15rem;margin-bottom:8px}
.titulo-sec{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:600;font-size:.88rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-2);margin:0 0 12px}
.titulo-sec .v-icone{font-size:1.3em;color:var(--viali)}
.grade{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-painel{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
@media (max-width:1100px){.g-painel,.g3,.g4{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.g-painel,.g2,.g3,.g4{grid-template-columns:1fr}.pagina{padding:18px 16px 40px}.topo nav{display:none}}
.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;background:var(--nevoa);font-family:var(--f-display);font-weight:600;font-size:.86rem;white-space:nowrap}
.chip.eq{background:var(--eq-c);color:var(--tinta)}
.chip.eq::before{content:"";width:12px;height:12px;border-radius:4px;background:var(--eq);transform:rotate(45deg)}
.chip.ok{background:#dcf4e9;color:#0e6b47}
.chip.erro{background:#fde4e5;color:#a1262a}
.chip.alerta{background:var(--amarelo-c);color:#8a5a00}
.chip.tinta{background:var(--tinta);color:#fff}
.lista-chips{display:flex;flex-wrap:wrap;gap:8px}
.aprend{background:linear-gradient(135deg,var(--violeta-c),var(--azul-c));color:var(--tinta)}
.pastilha-eq{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--eq);color:#fff;font-family:var(--f-display);font-weight:700;font-size:1.3rem;box-shadow:0 3px 0 rgba(0,0,0,.12);flex:none}
.pastilha-eq.peq{width:34px;height:34px;border-radius:10px;font-size:1rem}
.pastilha-eq.gg{width:84px;height:84px;border-radius:24px;font-size:2.4rem}
.vazio{padding:40px;text-align:center;color:var(--tinta-3);border:2px dashed var(--linha);border-radius:var(--r-l)}

/* ---------- toasts ---------- */
#toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{pointer-events:auto;background:var(--tinta);color:#fff;padding:14px 22px;border-radius:16px;font-family:var(--f-display);font-weight:600;box-shadow:var(--sombra-forte);display:flex;align-items:center;gap:12px;animation:surgir .35s ease both;max-width:min(680px,92vw)}
.toast.ok{background:#0e7a52}.toast.erro{background:#b4262c}
.toast .v-icone{font-size:1.3em}

/* ---------- camada (modais e telas cheias) ---------- */
#camada{position:relative;z-index:100}
.modal-fundo{position:fixed;inset:0;background:rgba(20,24,56,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:24px;animation:surgir .25s ease both;z-index:100}
.modal{background:#fff;border-radius:28px;box-shadow:var(--sombra-forte);width:min(760px,100%);max-height:92vh;overflow:auto;padding:30px;position:relative;animation:surgirZoom .3s cubic-bezier(.2,.8,.2,1) both}
.modal.largo{width:min(1180px,100%)}
.modal h2{font-size:1.7rem;margin-bottom:10px}
.modal .fechar{position:absolute;right:16px;top:16px}
.cheia{position:fixed;inset:0;z-index:110;display:flex;flex-direction:column;animation:surgir .3s ease both;overflow:auto}
.cheia.escura{background:radial-gradient(1200px 800px at 50% 40%,var(--noite-2),var(--noite));color:#fff}
.cheia.clara{background:var(--nevoa)}
.cheia .barra{display:flex;align-items:center;gap:12px;padding:18px 26px}
.cheia .barra .dir{margin-left:auto;display:flex;gap:10px}
.cheia .miolo{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 40px 40px;text-align:center;position:relative}
.cheia .mandala-giro{position:absolute;width:min(92vh,92vw);height:min(92vh,92vw);opacity:.16;animation:girar 120s linear infinite;pointer-events:none}
.cheia .mandala-giro svg{width:100%;height:100%}

/* ---------- INÍCIO ---------- */
.inicio{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:40px;padding:40px 6vw;color:#fff;position:relative;overflow:hidden}
.inicio .logo-topo{position:absolute;left:40px;top:30px}
.inicio .roda{position:relative;justify-self:center;width:min(42vw,620px);aspect-ratio:1}
.inicio .roda .halo{position:absolute;inset:-9%;border-radius:50%;background:var(--prisma-c);filter:blur(60px);opacity:.42;animation:girar 30s linear infinite}
.inicio .roda .anel{position:absolute;inset:-3.5%;border-radius:50%;background:var(--prisma-c);animation:girarRev 50s linear infinite;-webkit-mask:radial-gradient(circle,transparent 66%,#000 66.6%,#000 69%,transparent 69.6%);mask:radial-gradient(circle,transparent 66%,#000 66.6%,#000 69%,transparent 69.6%);opacity:.9}
.inicio .roda .m1{position:absolute;inset:0;animation:girar 70s linear infinite;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}
.inicio .roda .m2{position:absolute;inset:22%;animation:girarRev 40s linear infinite;mix-blend-mode:multiply;opacity:.55}
.inicio .roda svg{width:100%;height:100%;display:block}
.inicio h1{font-size:clamp(3rem,6.2vw,6.4rem);line-height:.95;letter-spacing:-.025em}
.inicio h1 span{display:block;background:var(--prisma-loop);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:prismaMove 8s linear infinite}
.inicio .sub{font-size:1.3rem;color:rgba(255,255,255,.78);margin:22px 0 34px;max-width:34ch}
.inicio .entradas{display:grid;gap:16px;max-width:600px}
.entrada{display:flex;align-items:center;gap:20px;padding:22px 26px;border-radius:26px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none;cursor:pointer;transition:transform .2s,background .2s,border-color .2s;font:inherit;text-align:left;width:100%}
.entrada:hover{transform:translateY(-3px);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35)}
.entrada:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px}
.entrada .ic{width:66px;height:66px;border-radius:20px;display:grid;place-items:center;flex:none;font-size:34px;color:#fff}
.entrada b{font-family:var(--f-display);font-weight:600;font-size:1.55rem;display:block;line-height:1.1}
.entrada small{color:rgba(255,255,255,.7);font-size:1rem}
.entrada .seta{margin-left:auto;font-size:28px;opacity:.6}
.inicio .rodape-ini{position:absolute;bottom:22px;left:40px;right:40px;display:flex;justify-content:space-between;color:rgba(255,255,255,.45);font-size:.85rem;font-family:var(--f-display);letter-spacing:.06em}
.forma-flutua{position:absolute;opacity:.5;animation:flutua 18s ease-in-out infinite;pointer-events:none}
@keyframes flutua{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(30px,-40px) rotate(160deg)}}
@media (max-width:900px){.inicio{grid-template-columns:1fr;padding-top:100px}.inicio .roda{width:70vw}}

/* ---------- PAINEL: início ---------- */
.prox-aula{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;padding:28px 30px;border-radius:28px;background:linear-gradient(120deg,var(--noite),var(--noite-2));color:#fff;position:relative;overflow:hidden;box-shadow:var(--sombra-forte)}
.prox-aula .num{font-family:var(--f-display);font-weight:700;font-size:5.2rem;line-height:.9;background:var(--prisma);-webkit-background-clip:text;background-clip:text;color:transparent}
.prox-aula h2{font-size:2rem}
.prox-aula p{color:rgba(255,255,255,.75);margin:6px 0 0}
.prox-aula .deco{position:absolute;right:-90px;top:-90px;width:300px;height:300px;opacity:.18;animation:girar 80s linear infinite}
.aulas-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tile-aula{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px 20px 18px;border-radius:22px;background:#fff;box-shadow:var(--sombra);text-decoration:none;color:var(--tinta);overflow:hidden;transition:transform .2s, box-shadow .2s;min-height:150px}
.tile-aula:hover{transform:translateY(-3px);box-shadow:var(--sombra-forte)}
.tile-aula .topo-tile{display:flex;align-items:center;gap:10px}
.tile-aula .n{font-family:var(--f-display);font-weight:700;font-size:2.3rem;line-height:1;color:var(--ac)}
.tile-aula .cod{font-family:var(--f-display);font-weight:600;font-size:.8rem;letter-spacing:.08em;padding:3px 9px;border-radius:99px;background:var(--ac-c);color:var(--tinta)}
.tile-aula h3{font-size:1.2rem}
.tile-aula p{margin:0;font-size:.88rem;color:var(--tinta-2);line-height:1.35}
.tile-aula .fita{position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--ac)}
.tile-aula .feito{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:20px}
.tile-aula .jog{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap}

/* ---------- placar ---------- */
.placar{width:100%;border-collapse:separate;border-spacing:0 10px}
.placar th{font-family:var(--f-display);font-weight:600;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2);padding:0 10px;text-align:center}
.placar th.esq{text-align:left}
.placar td{background:#fff;padding:12px 10px;text-align:center;font-family:var(--f-display);font-weight:600;font-size:1.6rem;font-variant-numeric:tabular-nums}
.placar tr td:first-child{border-radius:20px 0 0 20px;padding-left:18px}
.placar tr td:last-child{border-radius:0 20px 20px 0;padding-right:18px}
.placar tr.linha{animation:surgir .6s cubic-bezier(.2,.8,.2,1) both;box-shadow:var(--sombra)}
.placar td.eq-nome{text-align:left;font-size:1.45rem;min-width:260px}
.placar td.eq-nome .linha-flex{flex-wrap:nowrap}
.placar td.cel{cursor:pointer;transition:background .15s;color:var(--tinta)}
.placar td.cel:hover{background:var(--nevoa)}
.placar td.cel.vazia{color:var(--linha)}
.placar td.total{font-size:2.3rem;color:var(--tinta);min-width:240px}
.placar .pos{font-size:1.25rem;color:var(--tinta-3);width:60px}
.placar .pos.p1{color:#c98a00}
.barra-total{height:12px;border-radius:99px;background:var(--nevoa);overflow:hidden;margin-top:6px}
.barra-total i{display:block;height:100%;border-radius:99px;background:var(--eq);width:0;transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.trofeu{color:#c98a00;font-size:1.3rem}
.legenda{font-size:.92rem;color:var(--tinta-2)}

/* ---------- meta e caleidoscópio coletivo ---------- */
.meta-barra{height:26px;border-radius:99px;background:var(--nevoa);position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px var(--linha)}
.meta-barra i{position:absolute;left:0;top:0;bottom:0;background:var(--prisma);border-radius:99px;width:0;transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.meta-barra b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-size:.95rem;color:var(--tinta);mix-blend-mode:normal}
.coletivo-svg{width:100%;height:auto;display:block}
.coletivo-svg .setor{transition:opacity .8s ease, filter .8s ease}
.coletivo-svg .setor.apagado{opacity:.12;filter:grayscale(1)}
.coletivo-svg .setor.aceso{animation:acender 1.2s ease both}
@keyframes acender{from{opacity:.1;filter:grayscale(1) brightness(1.6)}to{opacity:1;filter:none}}
.coletivo-svg .rot{font-family:Fredoka,sans-serif;font-weight:700}

/* ---------- condução da aula ---------- */
.aula-cab{display:flex;align-items:center;gap:22px;padding:22px 28px;border-radius:28px;background:#fff;box-shadow:var(--sombra);margin-bottom:22px;position:relative;overflow:hidden}
.aula-cab::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--prisma)}
.aula-cab .n{font-family:var(--f-display);font-weight:700;font-size:4.2rem;line-height:.85;color:var(--viali)}
.aula-cab h1{font-size:2.2rem}
.aula-cab .sub{color:var(--tinta-2);font-size:1rem;margin-top:4px}
.aula-cab .acoes{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.btn.giro{background:var(--prisma-loop);background-size:200% 100%;animation:prismaMove 6s linear infinite;text-shadow:0 1px 2px rgba(0,0,0,.25);font-size:1.25rem;padding:.8em 1.6em;letter-spacing:.06em}
.objetivo{font-size:1.18rem;line-height:1.5}
.roteiro-linha{display:flex;height:16px;border-radius:99px;overflow:hidden;gap:3px;margin:8px 0 18px}
.roteiro-linha span{flex:var(--m);background:var(--linha);position:relative;cursor:pointer;border-radius:3px;overflow:hidden}
.roteiro-linha span i{position:absolute;inset:0;width:0;background:var(--c)}
.roteiro-linha span.feita i{width:100%}
.etapa-atual{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.anel-tempo{position:relative;width:220px;height:220px}
.anel-tempo svg{width:100%;height:100%;transform:rotate(-90deg)}
.anel-tempo .t{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.anel-tempo .t b{font-family:var(--f-display);font-weight:600;font-size:3.6rem;line-height:1;font-variant-numeric:tabular-nums;display:block}
.anel-tempo .t small{font-family:var(--f-display);font-weight:600;color:var(--tinta-3);letter-spacing:.08em;text-transform:uppercase;font-size:.78rem}
.anel-tempo.acabando b{color:var(--erro);animation:pulsar 1s ease infinite}
.etapa-atual h2{font-size:1.9rem;margin-bottom:10px}
.fala{position:relative;background:var(--azul-c);border-radius:20px;padding:18px 22px 18px 58px;font-size:1.25rem;line-height:1.45;color:var(--tinta)}
.fala::before{content:"“";position:absolute;left:16px;top:2px;font-family:var(--f-display);font-size:4rem;color:var(--azul);line-height:1}
.passos{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.passos li{position:relative;padding-left:30px;font-size:1.05rem;line-height:1.45}
.passos li::before{content:"";position:absolute;left:6px;top:.55em;width:11px;height:11px;border-radius:3px;background:var(--viali-2);transform:rotate(45deg)}
.etapas-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.etapas-lista li{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:9px 12px;border-radius:14px;cursor:pointer;transition:background .15s}
.etapas-lista li:hover{background:var(--nevoa)}
.etapas-lista li .bol{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--nevoa);font-family:var(--f-display);font-weight:600;font-size:.9rem;color:var(--tinta-2)}
.etapas-lista li.feita .bol{background:var(--ok);color:#fff}
.etapas-lista li.atual{background:var(--tinta);color:#fff}
.etapas-lista li.atual .bol{background:var(--amarelo);color:var(--tinta)}
.etapas-lista li .min{font-family:var(--f-display);font-weight:600;font-size:.9rem;opacity:.7}
.abas{display:flex;gap:6px;flex-wrap:wrap;border-bottom:2px solid var(--linha);margin:-4px -4px 18px;padding:0 4px}
.abas button{appearance:none;border:0;background:none;font-family:var(--f-display);font-weight:600;font-size:.92rem;color:var(--tinta-2);padding:10px 9px;border-bottom:4px solid transparent;margin-bottom:-2px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;border-radius:10px 10px 0 0}
.abas button:hover{color:var(--tinta);background:var(--nevoa)}
.abas button.atual{color:var(--viali);border-bottom-color:var(--viali)}
.crit-tabela{width:100%;border-collapse:collapse}
.crit-tabela th{font-family:var(--f-display);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-2);padding:6px;text-align:center}
.crit-tabela th.esq,.crit-tabela td.esq{text-align:left}
.crit-tabela td{padding:7px 6px;border-top:1px solid var(--linha);text-align:center;vertical-align:middle}
.crit-tabela td.esq{font-size:.95rem;line-height:1.3;padding-right:12px}
.crit-tabela td.esq b{font-family:var(--f-display);color:var(--viali);white-space:nowrap}
.crit-tabela tr.total td{border-top:3px solid var(--tinta);font-family:var(--f-display);font-weight:700;font-size:1.5rem}
.marca-crit{appearance:none;border:0;width:44px;height:44px;border-radius:14px;background:var(--nevoa);cursor:pointer;display:inline-grid;place-items:center;color:transparent;transition:transform .12s, background .2s;box-shadow:inset 0 0 0 2px var(--linha)}
.marca-crit:hover{transform:scale(1.07)}
.marca-crit.on{background:var(--eq);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.15)}
.marca-crit .v-icone{font-size:24px}
.cred-linha{display:grid;grid-template-columns:200px 92px 1fr;gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--linha)}
.saldo-gg{font-family:var(--f-display);font-weight:700;font-size:1.8rem;display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.saldo-gg svg{width:30px;height:30px}
.gabarito-capa{position:relative;border-radius:20px;overflow:hidden}
.gabarito-capa .conteudo{filter:blur(14px);pointer-events:none;user-select:none;opacity:.6}
.gabarito-capa .veu{position:absolute;inset:0;display:grid;place-items:center;background:rgba(243,244,250,.4)}
.imprev{border-radius:18px;background:var(--nevoa);padding:14px 18px;margin-bottom:10px}
.imprev b{display:block;font-family:var(--f-display);font-weight:600;margin-bottom:4px}
.imprev .faca{color:var(--tinta-2)}

/* ---------- Giro ---------- */
.giro-palco{position:relative;width:min(70vh,640px);aspect-ratio:1;display:grid;place-items:center}
.giro-palco .roda{position:absolute;inset:0}
.giro-palco .roda svg{width:100%;height:100%}
.giro-palco .roda.girando{animation:rodaGiro 2.6s cubic-bezier(.15,.6,.15,1) both}
@keyframes rodaGiro{0%{transform:rotate(0) scale(.6);opacity:.2}30%{opacity:1}100%{transform:rotate(1440deg) scale(1);opacity:.35}}
.giro-palco .roda2{position:absolute;inset:18%;animation:girarRev 18s linear infinite;opacity:.5}
.giro-carta{position:relative;width:min(92vw,880px);background:#fff;color:var(--tinta);border-radius:32px;padding:44px 52px;box-shadow:0 30px 80px rgba(0,0,0,.45);text-align:left;animation:cartaVira .8s cubic-bezier(.2,.8,.2,1) both;overflow:hidden}
.giro-carta::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:var(--prisma)}
@keyframes cartaVira{from{transform:perspective(1200px) rotateY(80deg) scale(.8);opacity:0}to{transform:none;opacity:1}}
.giro-carta .tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:1.1rem;letter-spacing:.2em;color:var(--viali)}
.giro-carta h2{font-size:3rem;margin:10px 0 14px}
.giro-carta p{font-size:1.6rem;line-height:1.45;margin:0}
.giro-carta .efeito{margin-top:20px;font-size:1rem;color:var(--tinta-2);border-top:2px dashed var(--linha);padding-top:14px}
.giro-opcoes{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.giro-titulo{font-family:var(--f-display);font-weight:700;font-size:clamp(4rem,12vw,9rem);letter-spacing:.06em;background:var(--prisma-loop);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:prismaMove 3s linear infinite;line-height:1}

/* ---------- pergunta ---------- */
.pergunta-rot{font-family:var(--f-display);font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--amarelo);font-size:1.2rem;display:flex;align-items:center;gap:12px;justify-content:center}
.pergunta-txt{font-family:var(--f-display);font-weight:600;font-size:clamp(2.4rem,5vw,4.6rem);line-height:1.12;max-width:20ch;margin:24px auto;position:relative}

/* ---------- cronômetro ---------- */
.crono-dig{font-family:var(--f-display);font-weight:600;font-size:clamp(7rem,24vw,22rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.crono-dig.acabando{color:var(--erro)}
.crono-dig.fim{animation:pulsar .8s ease infinite;color:var(--amarelo)}
.crono-barra{width:min(1200px,90vw);height:18px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;margin:20px auto}
.crono-barra i{display:block;height:100%;background:var(--prisma);border-radius:99px;transition:width .3s linear}

/* ---------- cartas e formas ---------- */
.carta-b{display:inline-block;line-height:0;border-radius:12px;transition:transform .2s, box-shadow .2s;position:relative}
.carta-b svg{display:block}
.carta-b.sel{transform:translateY(-8px);box-shadow:0 0 0 4px var(--amarelo),0 12px 24px rgba(0,0,0,.18)}
.carta-b.clic{cursor:pointer}
.carta-b.clic:hover{transform:translateY(-4px)}
.carta-b .marca{position:absolute;right:-10px;top:-10px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:22px;box-shadow:0 2px 6px rgba(0,0,0,.25);animation:surgirZoom .3s ease both}
.carta-b .marca.sim{background:var(--ok)}.carta-b .marca.nao{background:var(--erro)}
.carta-b.apagada{opacity:.35}
.carta-verso{width:100%;height:100%;border-radius:12px;background:var(--noite);display:grid;place-items:center;overflow:hidden}
.mao{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.lado-exemplos{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.caixa-ex{border-radius:22px;padding:18px;background:#fff;box-shadow:var(--sombra)}
.caixa-ex h3{display:flex;align-items:center;gap:10px;font-size:1.3rem;margin-bottom:12px}
.caixa-ex.entra{box-shadow:inset 0 0 0 3px var(--ok),var(--sombra)}
.caixa-ex.entra h3{color:var(--ok)}
.caixa-ex.nao{box-shadow:inset 0 0 0 3px var(--erro),var(--sombra)}
.caixa-ex.nao h3{color:var(--erro)}

/* ---------- ESTAÇÃO ---------- */
.estacao-topo{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:12px 24px;background:var(--eq);color:#fff;box-shadow:0 4px 20px rgba(0,0,0,.12)}
.estacao-topo .nome{font-family:var(--f-display);font-weight:600;font-size:1.4rem;line-height:1}
.estacao-topo .nome small{display:block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;opacity:.85;margin-bottom:3px}
.estacao-topo .dir{margin-left:auto;display:flex;align-items:center;gap:10px}
.estacao-topo .btn.sec{background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
.estacao-topo .forma-eq{width:46px;height:46px;background:#fff;border-radius:14px;display:grid;place-items:center}
.eq-F .estacao-topo,.estacao-topo.eq-F{color:var(--tinta)}
.eq-F .estacao-topo .btn.sec{color:var(--tinta);box-shadow:inset 0 0 0 2px rgba(28,33,71,.3)}
.escolher-eq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cartao-eq{display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px 20px;border-radius:28px;background:#fff;box-shadow:var(--sombra);cursor:pointer;border:0;font:inherit;color:var(--tinta);transition:transform .2s, box-shadow .2s;position:relative;overflow:hidden}
.cartao-eq::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--eq)}
.cartao-eq:hover{transform:translateY(-4px);box-shadow:var(--sombra-forte)}
.cartao-eq b{font-family:var(--f-display);font-weight:600;font-size:1.8rem}
.cartao-eq small{color:var(--tinta-3);font-family:var(--f-display);letter-spacing:.08em;text-transform:uppercase;font-size:.8rem}
.cartao-eq.desligado{opacity:.4}
.provas-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:1100px){.provas-grade{grid-template-columns:repeat(2,minmax(0,1fr))}.escolher-eq{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cartao-prova{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:24px;background:#fff;box-shadow:var(--sombra);text-decoration:none;color:var(--tinta);transition:transform .2s, box-shadow .2s;position:relative;min-height:170px;overflow:hidden}
.cartao-prova:hover{transform:translateY(-3px);box-shadow:var(--sombra-forte)}
.cartao-prova .n{font-family:var(--f-display);font-weight:700;font-size:2.4rem;line-height:1;color:var(--eq)}
.cartao-prova h3{font-size:1.25rem}
.cartao-prova p{margin:0;font-size:.9rem;color:var(--tinta-2);line-height:1.35}
.cartao-prova .deco{position:absolute;right:-30px;bottom:-30px;width:120px;height:120px;opacity:.14}
.etapas-jogo{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.etapas-jogo span{font-family:var(--f-display);font-weight:600;font-size:.88rem;padding:7px 14px;border-radius:99px;background:#fff;color:var(--tinta-3);box-shadow:inset 0 0 0 2px var(--linha)}
.etapas-jogo span.atual{background:var(--eq);color:#fff;box-shadow:none}
.etapas-jogo span.feita{background:var(--eq-c);color:var(--tinta);box-shadow:none}
.privacidade{min-height:calc(100vh - 200px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:20px;padding:30px}
.privacidade .quem{font-family:var(--f-display);font-weight:700;font-size:clamp(3rem,7vw,5.5rem);line-height:1;color:var(--eq)}
.privacidade .aviso{font-family:var(--f-display);font-weight:600;font-size:1.3rem;color:var(--tinta-2);letter-spacing:.04em}
.privacidade .olho{width:110px;height:110px;border-radius:50%;background:var(--eq-c);display:grid;place-items:center;color:var(--eq);font-size:58px}
.cartao-pista{background:#fff;border-radius:28px;box-shadow:var(--sombra-forte);padding:34px 40px;max-width:900px;width:100%;position:relative;overflow:hidden;animation:cartaVira .55s cubic-bezier(.2,.8,.2,1) both}
.cartao-pista::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:var(--eq)}
.cartao-pista .num{font-family:var(--f-display);font-weight:600;color:var(--tinta-3);letter-spacing:.1em;text-transform:uppercase;font-size:.9rem}
.cartao-pista p{font-family:var(--f-display);font-weight:500;font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.25;margin:8px 0 0;text-align:left}
.cartao-pista + .cartao-pista{margin-top:16px}
.resultado{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding:20px}
.resultado .grande{font-family:var(--f-display);font-weight:700;font-size:5rem;line-height:1;color:var(--eq)}
.codigo-caixa{background:var(--noite);color:#fff;border-radius:26px;padding:24px 34px;display:inline-flex;flex-direction:column;align-items:center;gap:6px;box-shadow:var(--sombra-forte)}
.codigo-caixa small{font-family:var(--f-display);font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.7;font-size:.82rem}
.codigo-caixa b{font-family:var(--f-display);font-weight:700;font-size:3.6rem;letter-spacing:.14em;line-height:1}
.feedback{font-family:var(--f-display);font-weight:600;font-size:1.6rem;padding:16px 26px;border-radius:20px;display:inline-flex;align-items:center;gap:12px;animation:surgirZoom .35s ease both}
.feedback.ok{background:#dcf4e9;color:#0e6b47}.feedback.erro{background:#fde4e5;color:#a1262a}.feedback.info{background:var(--azul-c);color:var(--tinta)}

/* tabuleiro 3x3 (Aula 1 e Aula 7F) */
.tab3{display:grid;grid-template-columns:auto repeat(3,1fr);grid-template-rows:auto repeat(3,1fr);gap:10px;width:min(560px,100%);aspect-ratio:1.08}
.tab3 .rot-c,.tab3 .rot-l{font-family:var(--f-display);font-weight:600;font-size:.78rem;color:var(--tinta-3);letter-spacing:.06em;text-transform:uppercase;display:grid;place-items:center;text-align:center;line-height:1.1}
.tab3 .rot-l{writing-mode:vertical-rl;transform:rotate(180deg)}
.casa{border-radius:20px;background:#fff;box-shadow:inset 0 0 0 3px var(--linha);display:grid;place-items:center;position:relative;transition:box-shadow .15s, background .15s;cursor:pointer;min-height:90px}
.casa.alvo{box-shadow:inset 0 0 0 4px var(--eq);background:var(--eq-c)}
.casa .peca{width:76%;height:76%}
.bandeja-pecas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;min-height:110px;padding:16px;border-radius:22px;background:#fff;box-shadow:inset 0 0 0 3px dashed var(--linha)}
.peca{touch-action:none;cursor:grab;display:grid;place-items:center;width:96px;height:96px;border-radius:18px;transition:transform .15s, box-shadow .15s;user-select:none;-webkit-user-select:none}
.peca svg{width:100%;height:100%;pointer-events:none}
.peca:hover{transform:scale(1.06)}
.peca.sel{box-shadow:0 0 0 4px var(--amarelo);background:var(--amarelo-c)}
.peca.arrastando{position:fixed;z-index:300;pointer-events:none;transform:scale(1.15);filter:drop-shadow(0 12px 18px rgba(0,0,0,.3))}

/* Aula 2: botões dos jogadores e mesa */
.jogadores{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.btn-jog{appearance:none;border:0;cursor:pointer;border-radius:22px;padding:18px;background:#fff;box-shadow:var(--sombra),inset 0 0 0 3px var(--eq-c);font:inherit;color:var(--tinta);display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .12s, box-shadow .2s}
.btn-jog:hover{transform:translateY(-3px);box-shadow:var(--sombra-forte),inset 0 0 0 3px var(--eq)}
.btn-jog:active{transform:translateY(1px)}
.btn-jog b{font-family:var(--f-display);font-weight:600;font-size:1.35rem}
.btn-jog small{font-family:var(--f-display);color:var(--tinta-2);font-weight:500}
.btn-jog .versos{display:flex;gap:-10px}
.btn-jog .versos i{width:26px;height:36px;border-radius:6px;background:var(--noite);margin-left:-8px;box-shadow:0 0 0 2px #fff}
.btn-jog[disabled]{opacity:.4;cursor:default;transform:none}
.mesa-seq{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;min-height:140px;padding:18px;border-radius:24px;background:linear-gradient(135deg,#1f6f4a,#16573a);box-shadow:inset 0 4px 20px rgba(0,0,0,.25)}
.mesa-seq .carta-b{animation:cairCarta .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes cairCarta{from{transform:translateY(-60px) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
.mesa-seq .vazia{color:rgba(255,255,255,.6);font-family:var(--f-display);font-weight:600;margin:auto}
.relogio-peq{font-family:var(--f-display);font-weight:700;font-size:2.4rem;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:8px}
.relogio-peq.acabando{color:var(--erro)}

/* Aula 3 */
.fichas-linha{display:flex;gap:10px;flex-wrap:wrap}
.ficha{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 10px;border-radius:18px;background:#fff;box-shadow:var(--sombra);min-width:96px}
.ficha svg{width:46px;height:46px}
.ficha b{font-family:var(--f-display);font-weight:700;font-size:1.7rem;line-height:1}
.ficha small{font-size:.78rem;color:var(--tinta-3)}
.objetivo-card{border-radius:20px;padding:14px 16px;background:#fff;box-shadow:inset 0 0 0 3px var(--linha);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.objetivo-card.feito{box-shadow:inset 0 0 0 3px var(--ok);background:#effaf5}
.objetivo-card.pode{box-shadow:inset 0 0 0 3px var(--amarelo);background:var(--amarelo-c)}
.objetivo-card svg{width:38px;height:38px}
.bolsa-tabela{width:100%;border-collapse:collapse}
.bolsa-tabela th{font-family:var(--f-display);font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2);padding:8px;text-align:center}
.bolsa-tabela td{padding:10px 8px;border-top:1px solid var(--linha);text-align:center;font-family:var(--f-display);font-weight:600;font-size:1.25rem}
.bolsa-tabela td.esq{text-align:left}
.bolsa-tabela th svg{width:30px;height:30px}

/* Aula 5 */
.linha-producao{display:grid;grid-template-columns:200px 1fr;gap:18px}
.monte{position:relative;width:170px;height:238px;border-radius:16px;cursor:pointer;border:0;padding:0;background:none}
.monte .verso{position:absolute;inset:0;border-radius:16px;background:var(--noite);box-shadow:0 2px 0 #0b0e26,0 4px 0 #2a3170,0 6px 0 #0b0e26,0 10px 20px rgba(0,0,0,.25);display:grid;place-items:center;overflow:hidden}
.monte .verso svg{width:80%;height:auto;opacity:.6}
.monte b{position:absolute;bottom:-34px;left:0;right:0;text-align:center;font-family:var(--f-display);color:var(--tinta-2)}
.area-mesa{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start;min-height:180px;padding:14px;border-radius:22px;background:#fff;box-shadow:inset 0 0 0 3px var(--linha)}
.vagas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.vaga{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 2px var(--linha);position:relative}
.vaga.dupla-faixa{box-shadow:inset 0 0 0 3px var(--c-vermelho);background:#fff3f4}
.vaga.entregue{box-shadow:inset 0 0 0 3px var(--ok);background:#effaf5}
.vaga .meia{aspect-ratio:120/168;border-radius:10px;background:var(--nevoa);display:grid;place-items:center;cursor:pointer;font-family:var(--f-display);font-size:.75rem;color:var(--tinta-3);overflow:hidden}
.vaga .meia.alvo{box-shadow:inset 0 0 0 3px var(--amarelo);background:var(--amarelo-c)}
.vaga .meia svg{width:100%;height:100%}
.vaga .num-v{position:absolute;left:-8px;top:-8px;width:26px;height:26px;border-radius:50%;background:var(--tinta);color:#fff;font-family:var(--f-display);font-size:.8rem;display:grid;place-items:center}

/* mapa (Aula 6 e 7E) */
.mapa-svg{width:100%;height:auto;display:block;border-radius:24px;background:#dff1f6}
.mapa-svg .no{cursor:default}
.mapa-svg.clicavel .no.pode{cursor:pointer}
.mapa-svg.clicavel .no.pode:hover circle.base{stroke-width:7}
.central-capa{position:relative;border-radius:28px;overflow:hidden;background:var(--noite);aspect-ratio:1000/620;display:grid;place-items:center;color:#fff}
.central-capa .m{position:absolute;inset:-20%;opacity:.35;animation:girar 90s linear infinite}
.central-capa .m svg{width:100%;height:100%}
.contagem-gg{position:absolute;right:26px;top:22px;width:150px;height:150px;border-radius:50%;background:rgba(20,24,56,.88);color:#fff;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:4.6rem;box-shadow:0 10px 30px rgba(0,0,0,.35);font-variant-numeric:tabular-nums}
.contagem-gg.acabando{background:var(--erro);animation:pulsar .9s ease infinite}
.cons-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 10px}
.cons-btn small{font-size:.8rem;opacity:.9}

/* Aula 7 mandala coletiva */
.hex-palco{position:relative;width:min(74vh,700px);aspect-ratio:1;margin:0 auto}
.hex-palco svg{width:100%;height:100%;overflow:visible}
.hex-palco .frag{transition:transform 1s cubic-bezier(.2,.8,.2,1), opacity .6s}
.hex-palco .frag.fora{opacity:0;transform:scale(.4)}
.senha-letras{display:flex;gap:14px;justify-content:center;margin-top:20px}
.senha-letras span{width:84px;height:100px;border-radius:18px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:3.6rem;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.2)}
.senha-letras span.on{background:#fff;color:var(--tinta);animation:surgirZoom .5s ease both}

/* Aula 8 */
.cadeados{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}
.cadeado{border-radius:22px;padding:16px;background:#fff;box-shadow:var(--sombra);display:flex;align-items:center;gap:12px;cursor:default;border:0;font:inherit;color:var(--tinta);text-align:left}
.cadeado .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--nevoa);color:var(--tinta-3);font-size:26px;flex:none}
.cadeado b{font-family:var(--f-display);font-weight:600;display:block;font-size:1.05rem}
.cadeado small{color:var(--tinta-3);font-size:.82rem}
.cadeado.aberto .ic{background:var(--eq);color:#fff}
.cadeado.atual{box-shadow:0 0 0 4px var(--eq),var(--sombra-forte)}
.cadeado.ok .ic{background:var(--ok);color:#fff}
.cadeado.destravado .ic{background:var(--alerta);color:#fff}
.loja{display:grid;gap:10px}
.loja .item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--nevoa)}
.loja .item b{font-family:var(--f-display);font-weight:600}
.loja .preco{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--f-display);font-weight:700;font-size:1.2rem}
.loja .preco svg{width:26px;height:26px}
.cores-slot{display:flex;gap:16px;flex-wrap:wrap}
.slot-cor{width:120px;height:120px;border-radius:24px;box-shadow:inset 0 0 0 3px var(--linha);display:grid;place-items:center;font-family:var(--f-display);font-weight:600;color:var(--tinta-3);background:#fff;cursor:pointer;position:relative}
.slot-cor.cheio{color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.15);text-shadow:0 1px 1px rgba(0,0,0,.2)}
.slot-cor small{position:absolute;top:8px;left:12px;font-size:.8rem;opacity:.8}
.cor-btn{width:70px;height:70px;border-radius:50%;border:0;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.15);transition:transform .12s}
.cor-btn:hover{transform:scale(1.08)}

/* confete */
.confete{position:fixed;inset:0;pointer-events:none;z-index:150;overflow:hidden}
.confete i{position:absolute;top:-40px;display:block;animation:cai linear forwards}
.confete i svg{width:100%;height:100%}
@keyframes cai{to{transform:translate3d(var(--dx),110vh,0) rotate(var(--r))}}

/* premiação */
.podio-cartao{width:min(900px,92vw);border-radius:32px;padding:30px 40px;background:#fff;color:var(--tinta);display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;box-shadow:0 20px 60px rgba(0,0,0,.4);animation:cartaVira .8s cubic-bezier(.2,.8,.2,1) both;position:relative;overflow:hidden}
.podio-cartao::before{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;background:var(--eq)}
.podio-cartao .lugar{font-family:var(--f-display);font-weight:700;font-size:4.6rem;line-height:1;color:var(--eq)}
.podio-cartao h2{font-size:3rem}
.podio-cartao .pts{font-family:var(--f-display);font-weight:700;font-size:4.2rem;line-height:1}
.podio-cartao .pts small{display:block;font-size:1rem;color:var(--tinta-3);letter-spacing:.1em;text-transform:uppercase}
.podio-lista{display:flex;flex-direction:column-reverse;gap:12px;width:min(900px,92vw)}
.podio-mini{display:flex;align-items:center;gap:16px;padding:12px 22px;border-radius:20px;background:rgba(255,255,255,.1);font-family:var(--f-display);font-weight:600;font-size:1.4rem}
.campea{font-family:var(--f-display);font-weight:700;font-size:clamp(2.4rem,5vw,4.4rem);line-height:1.05}
.suspense{font-family:var(--f-display);font-weight:700;font-size:10rem;line-height:1;animation:pulsar .9s ease infinite}

/* ---------- impressão (certificados) ---------- */
.cert-pagina{width:297mm;height:210mm;margin:10mm auto;background:#fff;position:relative;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.12);padding:16mm 20mm;display:flex;flex-direction:column;color:var(--tinta);page-break-after:always;break-after:page}
.cert-pagina .moldura{position:absolute;inset:8mm;border:1.2mm solid transparent;border-radius:8mm;background:linear-gradient(#fff,#fff) padding-box,var(--prisma) border-box}
.cert-pagina .conteudo{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;height:100%;justify-content:center;gap:5mm}
.cert-pagina .mand{position:absolute;width:120mm;height:120mm;right:-30mm;bottom:-40mm;opacity:.16}
.cert-pagina .mand.b{left:-36mm;top:-44mm;right:auto;bottom:auto;width:100mm;height:100mm}
.cert-pagina h1{font-family:var(--f-display);font-weight:600;font-size:30pt;margin:0}
.cert-pagina .nome{font-family:var(--f-display);font-weight:600;font-size:34pt;border-bottom:.5mm solid var(--tinta-3);padding:0 12mm 2mm;min-width:150mm}
.cert-pagina p{font-size:13pt;line-height:1.5;max-width:200mm;margin:0}
.cert-pagina .frase{font-family:var(--f-display);font-size:15pt;color:var(--viali)}
.cert-pagina .assin{display:flex;gap:24mm;margin-top:8mm;font-size:10pt;color:var(--tinta-2)}
.cert-pagina .assin span{border-top:.4mm solid var(--tinta-3);padding-top:2mm;min-width:60mm}
@media print{
  @page{size:A4 landscape;margin:0}
  body.tela{background:#fff}
  #fundo,.topo,.nao-imprime,#toasts{display:none!important}
  .cert-pagina{margin:0;box-shadow:none}
  .pagina{padding:0;max-width:none}
}

/* ---------- reduzir movimento ---------- */
@media (prefers-reduced-motion:reduce){
  #fundo .mandala-fundo,.inicio .roda .m1,.inicio .roda .m2,.inicio .roda .halo,.inicio .roda .anel,.topo .marca .mini-mandala,.cheia .mandala-giro,.forma-flutua{animation:none!important}
}
.movimento-reduzido *{animation-duration:.001ms!important;transition-duration:.001ms!important;animation-iteration-count:1!important}

.func-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--nevoa);cursor:pointer;font-family:var(--f-display);font-weight:600;box-shadow:inset 0 0 0 2px var(--linha);user-select:none}
.func-chip:has(input:checked){background:var(--viali);color:#fff;box-shadow:none}
.func-chip input{width:18px;height:18px;margin:0;accent-color:var(--amarelo)}
.objetivo-card .v-icone svg,.chip .v-icone svg{width:100%;height:100%}
.escuro .topo .btn.sec{background:#fff;color:var(--tinta);box-shadow:inset 0 0 0 2px var(--linha),0 3px 0 rgba(28,33,71,.08)}
.escuro .topo{color:var(--tinta)}
.hex-palco{width:min(60vh,600px)}
.senha-letras span{width:70px;height:84px;font-size:3rem}
.vagas{padding-top:10px}
/* equipe amarela: texto escuro sobre o amarelo */
.eq-F .btn.eq:not(.claro),.btn.eq.eq-F:not(.claro),.eq-F .pastilha-eq,.pastilha-eq.eq-F,.eq-F .marca-crit.on,.marca-crit.eq-F.on{color:var(--tinta);text-shadow:none}
.eq-F .etapas-jogo span.atual{color:var(--tinta)}
.eq-F .btn-jog{box-shadow:var(--sombra),inset 0 0 0 3px #f5d27a}
.ficha{min-width:80px}
.cert-pagina:last-child{page-break-after:auto;break-after:auto}
@media print{.cert-pagina{height:209mm}}
.cert-pagina .conteudo{overflow:hidden;gap:4mm}.cert-pagina h1{font-size:26pt}
.cert-lista{padding:10px 0}
@media print{.cert-lista{padding:0!important;margin:0!important}#app{min-height:0!important}body.tela{min-height:0!important}}
@media (max-width:900px){.topo .dir .btn.sec.peq{padding:.5em .7em;font-size:0}.topo .dir .btn.sec.peq .v-icone{font-size:1.1rem}.topo .marca small{display:none}.estacao-topo .nome+.nome{display:none}.cadeados{grid-template-columns:1fr 1fr}.provas-grade{grid-template-columns:1fr!important}}