/* jogo-colisao.css · Colisão: três vidas, uma sexta-feira
   Fontes locais (pasta fontes/), todas de licença livre SIL OFL 1.1:
   Archivo Black e Archivo (Omnibus-Type), Inter Tight (Rasmus Andersson),
   JetBrains Mono (The JetBrains Mono Project Authors). */
@font-face{font-family:'CX Black';font-weight:400;font-display:swap;src:url('fontes/archivo-black-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'CX Sans';font-weight:400;font-display:swap;src:url('fontes/archivo-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'CX Sans';font-weight:500;font-display:swap;src:url('fontes/archivo-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'CX Sans';font-weight:700;font-display:swap;src:url('fontes/archivo-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'CX Texto';font-weight:400;font-display:swap;src:url('fontes/inter-tight-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'CX Texto';font-weight:500;font-display:swap;src:url('fontes/inter-tight-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'CX Texto';font-weight:700;font-display:swap;src:url('fontes/inter-tight-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'CX Texto';font-style:italic;font-weight:400;font-display:swap;src:url('fontes/inter-tight-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'CX Mono';font-weight:500;font-display:swap;src:url('fontes/jetbrains-mono-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'CX Mono';font-weight:700;font-display:swap;src:url('fontes/jetbrains-mono-latin-700-normal.woff2') format('woff2')}

:root{
  --bg:#08080A; --bg2:#111115; --bg3:#18181E; --ink:#F4F1EA; --mute:rgba(244,241,234,.6); --dim:rgba(244,241,234,.36);
  --line:rgba(244,241,234,.12); --line2:rgba(244,241,234,.22);
  --D:#FF6B57; --B:#F2C230; --C:#4F8CFF;
  --black:'CX Black','Arial Black',Impact,sans-serif; --sans:'CX Sans','Helvetica Neue',Arial,sans-serif;
  --texto:'CX Texto','Helvetica Neue',Arial,sans-serif; --mono:'CX Mono',ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);overflow:hidden}
body{font:500 20px/1.35 var(--texto);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer}

/* ── palco 1600×900: escala para caber em qualquer tela, sem nada cortar ── */
#moldura{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#040405}
#palco{position:relative;width:1600px;height:900px;flex:none;transform-origin:center center;overflow:hidden;background:var(--bg)}
#palco::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:50;opacity:.07;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
#palco::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:49;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55))}
.tela{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.tela.on{opacity:1;pointer-events:auto}
.mono{font-family:var(--mono);letter-spacing:.04em}
.preto{font-family:var(--black);text-transform:uppercase;letter-spacing:-.01em;line-height:.9}
.cD{color:var(--D)}.cB{color:var(--B)}.cC{color:var(--C)}

/* ── capa ── */
.capa{display:flex;flex-direction:column;justify-content:center;padding:0 120px}
.capa .sil{position:absolute;right:60px;top:70px;display:flex;gap:18px;filter:blur(1.5px)}
.capa .sil .rt{width:210px;height:262px;border-radius:26px;overflow:hidden;opacity:.9;filter:blur(9px) saturate(1.2)}
.capa h1{font-family:var(--black);font-size:210px;line-height:.82;margin:0;letter-spacing:-.035em;text-transform:uppercase;position:relative}
.capa h1 span{display:inline-block}
.capa h1 .glitch{position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none}
.capa h1 .glitch i{position:absolute;inset:0;font-style:normal;opacity:.55}
.capa .sub{font:500 34px/1.1 var(--sans);margin-top:22px;color:var(--mute)}
.capa .frase{font:italic 400 26px/1.35 var(--texto);margin-top:36px;max-width:820px;color:var(--ink)}
.capa .acoes{display:flex;gap:16px;margin-top:54px;flex-wrap:wrap}
.bt{border:0;border-radius:999px;padding:20px 34px;font:700 22px/1 var(--sans);background:var(--ink);color:var(--bg);transition:transform .15s var(--ease),background .2s}
.bt:hover{transform:translateY(-2px)}
.bt:active{transform:scale(.97)}
.bt.sec{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line2)}
.bt.mini{padding:12px 20px;font-size:17px}
.bt small{display:block;font:500 14px/1.2 var(--sans);opacity:.65;margin-top:6px}
.capa .rodape{position:absolute;left:120px;bottom:44px;right:330px;display:flex;justify-content:space-between;color:var(--dim);font:500 16px var(--mono)}
.capa .ajustes{margin-top:30px;display:flex;gap:26px;color:var(--mute);font:500 18px var(--sans);align-items:center;flex-wrap:wrap}
.capa .ajustes .tg{display:flex;gap:8px;align-items:center}
.pilula{border:0;border-radius:999px;padding:9px 16px;font:700 15px/1 var(--sans);background:var(--bg3);color:var(--mute);box-shadow:inset 0 0 0 1.5px var(--line)}
.pilula.on{background:var(--ink);color:var(--bg)}
.pilula.rob{background:transparent;color:var(--dim)}

/* ── regras ── */
.regras{padding:70px 110px}
.regras h2{font-family:var(--black);font-size:64px;text-transform:uppercase;margin:0 0 34px;letter-spacing:-.02em}
.regras .grade{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.regra{background:var(--bg2);border-radius:26px;padding:28px 26px 30px;box-shadow:inset 0 0 0 1px var(--line);min-height:340px;position:relative;opacity:0;transform:translateY(24px);transition:all .6s var(--ease)}
.regras.on .regra{opacity:1;transform:none}
.regras.on .regra:nth-child(2){transition-delay:.12s}.regras.on .regra:nth-child(3){transition-delay:.24s}.regras.on .regra:nth-child(4){transition-delay:.36s}
.regra b{display:block;font:500 18px var(--mono);color:var(--dim);margin-bottom:16px}
.regra h3{font:700 30px/1.08 var(--sans);margin:0 0 14px}
.regra p{margin:0;color:var(--mute);font-size:21px;line-height:1.38}
.regra .ic{position:absolute;right:22px;top:22px;width:56px;height:56px}
.regras .grupos{display:flex;gap:18px;margin-top:30px}
.regras.cel .grupos{flex-direction:column;max-width:760px;gap:10px;margin-top:24px}
.regras.cel .grupos div{padding:12px 20px;font-size:22px}
.regras.cel .regra{min-height:300px}
.regras.cel .qrbox{bottom:56px}
.regras .grupos div{flex:1;border-radius:20px;padding:20px 24px;font:700 26px var(--sans);display:flex;align-items:center;gap:14px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line)}
.regras .grupos i{width:22px;height:22px;border-radius:50%}
.regras .grupos span{font:500 17px var(--texto);color:var(--mute);margin-left:auto}

/* ── cartela de capítulo ── */
.cartela{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 140px}
.cartela .num{font:500 22px var(--mono);color:var(--dim);letter-spacing:.2em}
.cartela .quando{font:700 64px var(--mono);letter-spacing:.02em;margin:14px 0 6px;color:var(--ink)}
.cartela .tit{font-family:var(--black);font-size:150px;line-height:.86;text-transform:uppercase;letter-spacing:-.03em;margin:0}
.cartela .nota{margin-top:34px;font:500 24px/1.4 var(--texto);color:var(--mute);max-width:980px}
.cartela.on .quando{animation:digita .9s steps(14) both}
.cartela.on .tit{animation:sobe 1s var(--ease) .15s both}
@keyframes digita{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes sobe{from{opacity:0;transform:translateY(40px);filter:blur(10px)}}

/* linha do tempo no rodapé */
.linha{position:absolute;left:140px;right:140px;bottom:46px;height:44px}
.linha .trilho{position:absolute;left:0;right:0;top:12px;height:2px;background:var(--line)}
.linha .feito{position:absolute;left:0;top:12px;height:2px;background:var(--ink);transition:width 1s var(--ease)}
.linha .pt{position:absolute;top:6px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--line2)}
.linha .pt.ja{background:var(--ink);box-shadow:none}
.linha .pt.ag{background:var(--ink);box-shadow:0 0 0 6px rgba(244,241,234,.15)}
.linha .pt.col{width:20px;height:20px;margin-left:-10px;top:3px;border-radius:4px;transform:rotate(45deg)}
.linha .rt{position:absolute;top:28px;transform:translateX(-50%);font:500 12px var(--mono);color:var(--dim);white-space:nowrap;letter-spacing:.06em}

/* ── cortina (rodízio): quem olha, quem vira de costas ── */
.cortina{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.cortina .faixa{position:absolute;inset:0;opacity:.95}
.cortina .q{position:relative;font-family:var(--black);font-size:140px;line-height:.86;text-transform:uppercase;letter-spacing:-.03em;color:#0A0A0C}
.cortina .q small{display:block;font:700 30px var(--sans);letter-spacing:.04em;margin-bottom:22px;text-transform:none}
.cortina .costas{position:relative;margin-top:34px;font:700 30px var(--sans);color:#0A0A0C;opacity:.86;display:flex;gap:16px;align-items:center}
.cortina .costas svg{width:44px;height:44px}
.cortina .cont{position:relative;margin-top:40px;font:700 26px var(--mono);color:#0A0A0C;opacity:.7}

/* ── leitura privada: uma vida em tela cheia ── */
.vez{display:grid;grid-template-columns:560px 1fr;gap:0}
.vez .lado{position:relative;padding:56px 0 40px 64px;display:flex;flex-direction:column}
.vez .lado .rt{width:470px;height:588px;border-radius:34px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.5)}
.vez .lado .nome{font-family:var(--black);font-size:76px;text-transform:uppercase;line-height:.9;margin-top:26px;letter-spacing:-.02em}
.vez .lado .grp{font:500 18px var(--mono);color:var(--mute);margin-top:8px;letter-spacing:.08em}
.vez .tela-cel{position:relative;margin:44px 64px 40px 30px;border-radius:44px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line),0 30px 70px rgba(0,0,0,.45);padding:26px 40px 30px;display:flex;flex-direction:column;overflow:hidden}
.barra-cel{display:flex;justify-content:space-between;align-items:center;font:700 18px var(--mono);color:var(--mute);padding:0 4px 14px;border-bottom:1px solid var(--line)}
.barra-cel .sinal{display:flex;gap:4px;align-items:flex-end}
.barra-cel .sinal i{display:block;width:5px;background:var(--mute);border-radius:2px}
.cel-corpo{flex:1;display:flex;flex-direction:column;min-height:0}
.notifs{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.notif{display:flex;gap:14px;align-items:flex-start;background:var(--bg3);border-radius:20px;padding:13px 18px 14px;box-shadow:inset 0 0 0 1px var(--line);font:500 21px/1.32 var(--texto);opacity:0;transform:translateY(-14px) scale(.98)}
.notif.ve{animation:notif .55s var(--ease) both}
@keyframes notif{from{opacity:0;transform:translateY(-18px) scale(.97)}60%{opacity:1}to{opacity:1;transform:none}}
.notif .ico{flex:none;width:30px;height:30px;border-radius:9px;margin-top:2px;background:var(--line2);position:relative}
.notif .ico::after{content:"";position:absolute;left:9px;top:9px;width:12px;height:12px;border-radius:50%;background:var(--ink);opacity:.8}
.notif .rotulo{display:block;font:700 13px var(--mono);letter-spacing:.12em;color:var(--dim);margin-bottom:3px;text-transform:uppercase}
.notif.proprio .ico{background:var(--ink)}
.notif.proprio .ico::after{background:var(--bg)}
.cena{font:500 30px/1.36 var(--texto);margin:22px 0 10px;letter-spacing:-.005em}
.cena .hora{font:700 18px var(--mono);color:var(--dim);display:block;margin-bottom:8px;letter-spacing:.08em}
.ops{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:12px}
.op{display:flex;gap:18px;align-items:center;border-radius:20px;padding:15px 20px;background:rgba(244,241,234,.05);box-shadow:inset 0 0 0 1.5px var(--line);font:600 25px/1.22 var(--sans);text-align:left;position:relative;transition:background .25s,box-shadow .25s,transform .25s var(--ease)}
.op .n{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 22px var(--mono);background:var(--ink);color:var(--bg)}
.op .tx small{display:block;font:italic 400 17px/1.3 var(--texto);color:var(--mute);margin-top:4px}
.op.trava{color:var(--dim);background:transparent;box-shadow:inset 0 0 0 1.5px var(--line);border-style:dashed}
.op.trava .n{background:transparent;box-shadow:inset 0 0 0 2px var(--line2);color:var(--dim)}
.op.trava .n svg{width:20px;height:20px}
.op.trava .tx small{color:var(--mute);font-style:italic}
.op.treme{animation:treme .45s}
@keyframes treme{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.op.escolhida{box-shadow:inset 0 0 0 3px var(--gc);background:color-mix(in srgb,var(--gc) 16%,transparent)}
.op.escolhida .n{background:var(--gc);color:#0A0A0C}
.relogio-leitura{position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--line)}
.relogio-leitura i{display:block;height:100%;background:var(--gc,var(--ink));transform-origin:left;transition:transform .25s linear}

/* ── decisão (todos ao mesmo tempo) ── */
.decide{padding:70px 90px;display:flex;flex-direction:column}
.decide .topo{display:flex;justify-content:space-between;align-items:flex-end}
.decide h2{font-family:var(--black);font-size:88px;text-transform:uppercase;margin:0;letter-spacing:-.025em;line-height:.9}
.decide .tempo{font:700 120px/1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.decide .tempo.fim{color:var(--D);animation:pisca 1s steps(2) infinite}
@keyframes pisca{50%{opacity:.35}}
.decide .dica{color:var(--mute);font-size:24px;margin:14px 0 0;max-width:1100px}
.envelopes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:auto;margin-bottom:auto}
.env{border-radius:30px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line);padding:26px 28px;min-height:480px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.env .cab{display:flex;align-items:center;gap:14px;font:700 26px var(--sans)}
.env .cab i{width:18px;height:18px;border-radius:50%;background:var(--gc)}
.env .cab span{margin-left:auto;font:500 15px var(--mono);color:var(--dim);letter-spacing:.06em}
.env .mudo{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;filter:blur(0)}
.env .borrao{width:100%;display:flex;flex-direction:column;gap:12px;filter:blur(7px);opacity:.5;margin:18px 0}
.env .borrao i{display:block;height:20px;border-radius:10px;background:var(--line2)}
.env .selo{font-family:var(--black);font-size:42px;text-transform:uppercase;border:5px solid var(--gc);color:var(--gc);border-radius:16px;padding:6px 18px 4px;transform:rotate(-6deg) scale(.6);opacity:0;transition:all .45s cubic-bezier(.2,1.6,.4,1)}
.env.lacrado .selo{opacity:1;transform:rotate(-6deg) scale(1)}
.env .estado{font:500 18px var(--mono);color:var(--mute)}
.env .teclas{display:flex;gap:10px;margin-top:auto}
.env .teclas button{flex:1;border:0;border-radius:16px;padding:14px 0;font:700 24px var(--mono);background:var(--bg3);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.env .teclas button.on{background:var(--gc);color:#0A0A0C;box-shadow:none}
.env .teclas button[disabled]{opacity:.3;cursor:not-allowed}
.env .rever{position:absolute;right:20px;top:68px;border:0;background:none;color:var(--dim);font:500 15px var(--mono);text-decoration:underline}
.env .votos{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:10px}
.env .votos .vb{display:flex;align-items:center;gap:10px;font:700 18px var(--mono)}
.env .votos .vb .b{flex:1;height:14px;border-radius:7px;background:var(--line);overflow:hidden}
.env .votos .vb .b i{display:block;height:100%;background:var(--gc);transition:width .4s var(--ease)}

/* ── colunas públicas (depois da colisão) ── */
.pub{padding:26px 34px 30px;display:flex;flex-direction:column}
.pub .topo{display:flex;align-items:baseline;gap:22px;padding:0 6px 14px}
.pub .topo .q{font:700 24px var(--mono);letter-spacing:.04em}
.pub .topo .t{font-family:var(--black);font-size:44px;text-transform:uppercase;letter-spacing:-.02em}
.pub .topo .fase{margin-left:auto;font:700 22px var(--mono);color:var(--mute)}
.pub .topo .fase b{color:var(--ink);font-size:30px;font-variant-numeric:tabular-nums}
.pub .cab-geral{margin:0 6px 14px;padding:14px 20px;border-radius:18px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line);font:500 21px/1.35 var(--texto)}
.pub .cab-geral b{font:700 14px var(--mono);letter-spacing:.14em;color:var(--dim);display:block;margin-bottom:4px}
.cols{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;min-height:0}
.col{position:relative;border-radius:32px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line);padding:18px 20px 18px;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.col::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--gc)}
.col .cab{display:flex;gap:14px;align-items:center}
.col .cab .rt{width:86px;height:108px;border-radius:18px;overflow:hidden;flex:none}
.col .cab .nm{font-family:var(--black);font-size:40px;text-transform:uppercase;line-height:.9;letter-spacing:-.01em}
.col .cab .gp{font:500 14px var(--mono);color:var(--mute);margin-top:6px;letter-spacing:.06em}
.col .cab .sobre{font:700 15px var(--mono);margin-top:6px;color:var(--gc)}
.col .corpo{flex:1;display:flex;flex-direction:column;min-height:0;font-size:20px}
.col .notifs{margin-top:12px;gap:7px}
.col .notif{font-size:16px;padding:9px 12px 10px;border-radius:14px;gap:10px}
.col .notif .ico{width:22px;height:22px;border-radius:7px}
.col .notif .ico::after{left:6px;top:6px;width:10px;height:10px}
.col .notif .de{font:700 12px var(--mono);letter-spacing:.08em;display:block;margin-bottom:2px}
.col .cena{font-size:21px;margin:12px 0 8px;line-height:1.36}
.col .ops{gap:7px}
.col .op{font-size:18px;padding:10px 12px;border-radius:15px;gap:12px}
.col .op .n{width:34px;height:34px;font-size:17px}
.col .op .tx small{font-size:14px}
.tracos{display:flex;flex-wrap:wrap;column-gap:12px;row-gap:4px;margin-top:9px}
.vez .tracos{margin-top:14px;column-gap:18px}
.vez .tracos .tc{font-size:15px}
.vez .tracos .tc b i{width:7px;height:13px}
.tracos .tc{display:flex;align-items:center;gap:5px;font:500 12px var(--mono);color:var(--dim);letter-spacing:.04em}
.tracos .tc b{display:flex;gap:2px}
.tracos .tc b i{width:5px;height:10px;border-radius:2px;background:var(--line2)}
.tracos .tc b i.on{background:var(--ink)}
.delta{position:absolute;z-index:5;right:18px;top:18px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none}
.delta span{font:700 15px var(--mono);padding:5px 10px;border-radius:999px;background:var(--ink);color:var(--bg);animation:delta 3.4s var(--ease) both}
.delta span.neg{background:#2a2a32;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line2)}
@keyframes delta{0%{opacity:0;transform:translateY(10px)}12%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}

/* embaixada */
.embaixada{position:absolute;inset:0;z-index:20;background:rgba(8,8,10,.86);backdrop-filter:blur(6px);display:flex;flex-direction:column;justify-content:center;padding:0 120px;opacity:0;pointer-events:none;transition:opacity .4s}
.embaixada.on{opacity:1;pointer-events:auto}
.embaixada h2{font-family:var(--black);font-size:96px;text-transform:uppercase;margin:0;letter-spacing:-.03em;line-height:.9}
.embaixada .tempo{font:700 96px var(--mono);position:absolute;right:120px;top:90px;font-variant-numeric:tabular-nums}
.embaixada p{font-size:27px;color:var(--mute);max-width:1100px;margin:22px 0 30px}
.embaixada .pistas{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.embaixada .pista{border-radius:24px;padding:22px 24px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line);font-size:21px;line-height:1.38;border-top:5px solid var(--gc)}
.embaixada .pista b{display:block;font:700 15px var(--mono);letter-spacing:.1em;color:var(--gc);margin-bottom:8px}

/* ── colisão ── */
.colisao{background:#050506}
.colisao .titulo-col{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:10;transition:opacity .8s}
.colisao .titulo-col .h{font:700 46px var(--mono);color:var(--mute);letter-spacing:.04em}
.colisao .titulo-col .f{font-family:var(--black);font-size:110px;line-height:.9;text-transform:uppercase;margin-top:20px;letter-spacing:-.03em;max-width:1300px}
.colisao .titulo-col .f.fade{animation:sobe 1.2s var(--ease) both}
.colisao .titulo-col.some{background:radial-gradient(60% 50% at 50% 50%,rgba(5,5,6,.85),transparent);animation:some 1s ease 2.8s both;pointer-events:none}
@keyframes some{to{opacity:0}}
.mapa{position:absolute;left:170px;right:40px;top:110px;bottom:130px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:46px;z-index:5}
.mapa .mc{min-width:0;display:flex;flex-direction:column;gap:0;filter:blur(18px) saturate(.6);opacity:.55;transition:filter 3.2s var(--ease),opacity 2.4s}
.mapa.nitido .mc{filter:none;opacity:1}
.mapa .mc .mh{display:flex;align-items:center;gap:14px;height:92px}
.mapa .mc .mh .rt{width:64px;height:80px;border-radius:14px;overflow:hidden}
.mapa .mc .mh .nm{font-family:var(--black);font-size:44px;text-transform:uppercase;line-height:.9}
.mapa .mc .mh .gp{font:500 14px var(--mono);color:var(--mute);margin-top:4px}
.mapa .mc .nmesc{opacity:0;transition:opacity .8s}
.mapa .mc.nomeado .nmesc{opacity:1}
.mapa .linha-cap{height:var(--hl);padding:6px 0;display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--line)}
.mapa .chip{align-self:flex-start;max-width:100%;font:700 15px/1.2 var(--sans);padding:6px 12px 6px 10px;border-radius:999px;background:var(--gc);color:#0A0A0C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:box-shadow .3s,transform .3s}
.mapa .chip.acesa{box-shadow:0 0 0 4px rgba(255,255,255,.18),0 0 30px var(--gc);transform:scale(1.04)}
.mapa .rec{font:500 14px/1.25 var(--texto);color:var(--mute);padding:4px 10px;border-radius:10px;background:#1b1b21;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .35s;max-width:100%;align-self:flex-start}
.mapa .rec.acesa{color:var(--ink);box-shadow:inset 0 0 0 2px var(--rc)}
.mapa-rotulos{position:absolute;left:30px;top:110px;width:130px;bottom:130px;display:flex;flex-direction:column}
.mapa-rotulos .sp{height:92px}
.mapa-rotulos div{height:var(--hl);font:700 13px/1.3 var(--mono);color:var(--dim);padding-top:10px;letter-spacing:.04em;border-top:1px solid var(--line)}
.fios{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:visible}
.fios path{fill:none;stroke-width:3.2;stroke-linecap:round}
.fios path.oc{stroke-width:2;stroke-dasharray:3 8;opacity:.55}
.fios circle{r:6}
.legenda{position:absolute;left:170px;right:40px;bottom:30px;height:84px;display:flex;align-items:center;gap:20px;font:500 27px/1.3 var(--texto);z-index:6}
.legenda .de{flex:none;font:700 15px var(--mono);letter-spacing:.1em;padding:8px 14px;border-radius:999px;color:#0A0A0C}
.legenda .tx{opacity:0;transition:opacity .3s}
.legenda.on .tx{opacity:1}
.legenda .tx q{quotes:"“" "”";color:var(--mute)}
.contador{position:absolute;right:40px;top:44px;font:700 18px var(--mono);color:var(--dim)}

/* noite */
.noite{padding:70px 80px}
.noite .cols{grid-template-columns:repeat(3,1fr);gap:28px;height:640px;flex:none;margin-top:30px}
.noite .col .rt{width:100%;height:330px;border-radius:22px;overflow:hidden}
.noite .col .nm{font-family:var(--black);font-size:42px;text-transform:uppercase;margin-top:16px}
.noite .col p{font-size:23px;line-height:1.38;margin:10px 0 0}
.noite h2{font-family:var(--black);font-size:72px;text-transform:uppercase;margin:0;letter-spacing:-.02em}
.noite .q{font:700 24px var(--mono);color:var(--mute)}

/* saltos */
.saltos{display:flex;flex-direction:column;justify-content:center;padding:0 140px}
.saltos .s{display:grid;grid-template-columns:330px 1fr;gap:40px;align-items:center;padding:26px 0;border-top:1px solid var(--line);opacity:0;transform:translateY(20px);transition:all .8s var(--ease)}
.saltos .s.ve{opacity:1;transform:none}
.saltos .s .q{font-family:var(--black);font-size:52px;text-transform:uppercase;line-height:.9}
.saltos .s .q small{display:block;font:700 16px var(--mono);margin-top:10px;letter-spacing:.06em}
.saltos .s p{font-size:32px;line-height:1.3;margin:0}

/* epílogo */
.epi{padding:50px 70px}
.epi .topo{display:flex;align-items:baseline;justify-content:space-between}
.epi h2{font-family:var(--black);font-size:62px;text-transform:uppercase;margin:0;letter-spacing:-.02em}
.epi .q{font:700 22px var(--mono);color:var(--mute)}
.epi .tres{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:26px}
.epi .p{opacity:0;transform:translateY(30px);transition:all 1s var(--ease)}
.epi .p.ve{opacity:1;transform:none}
.epi .p .rt{height:360px;border-radius:26px;overflow:hidden;position:relative}
.epi .p .idade{position:absolute;left:18px;top:16px;font:700 16px var(--mono);background:rgba(0,0,0,.45);padding:6px 10px;border-radius:999px}
.epi .p .nm{font-family:var(--black);font-size:40px;text-transform:uppercase;margin-top:16px;display:flex;align-items:center;gap:12px}
.epi .p .nm i{width:14px;height:14px;border-radius:50%;background:var(--gc)}
.epi .p ul{list-style:none;padding:0;margin:10px 0 0;font-size:19px;line-height:1.36;color:var(--ink)}
.epi .p li{padding:6px 0;border-top:1px solid var(--line)}
.final{display:flex;flex-direction:column;justify-content:center;padding:0 140px}
.final .k{font:700 22px var(--mono);color:var(--mute);letter-spacing:.14em}
.final h2{font-family:var(--black);font-size:150px;text-transform:uppercase;line-height:.86;margin:16px 0 0;letter-spacing:-.035em}
.final .tx{font-size:36px;line-height:1.3;margin-top:28px;max-width:1150px}
.final .custou{margin-top:40px;font-size:24px;color:var(--mute);max-width:1200px}
.final .custou b{display:block;font:700 16px var(--mono);letter-spacing:.14em;color:var(--dim);margin-bottom:10px}
.final .lacos{display:flex;gap:16px;margin-top:40px}
.final .lacos div{display:flex;align-items:center;gap:10px;font:700 18px var(--mono);padding:10px 16px;border-radius:999px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line)}
.final .lacos i{width:12px;height:12px;border-radius:50%}
.pergunta{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 160px}
.pergunta .k{font:700 22px var(--mono);color:var(--dim);letter-spacing:.14em}
.pergunta h2{font-family:var(--black);font-size:104px;line-height:.92;text-transform:uppercase;margin:24px 0 0;letter-spacing:-.03em}
.pergunta p{font-size:26px;color:var(--mute);margin-top:34px;max-width:1000px}

/* ── painel do professor ── */
#dock{position:fixed;right:16px;bottom:16px;z-index:100;display:flex;gap:8px;padding:8px;border-radius:999px;background:rgba(20,20,24,.86);backdrop-filter:blur(10px);box-shadow:0 10px 40px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.08);transition:opacity .4s,transform .4s}
#dock.dorme{opacity:.0;transform:translateY(10px)}
#dock button{width:46px;height:46px;border-radius:50%;border:0;background:transparent;color:#F4F1EA;display:flex;align-items:center;justify-content:center;position:relative}
#dock button:hover{background:rgba(255,255,255,.1)}
#dock button svg{width:22px;height:22px}
#dock button.on{background:#F4F1EA;color:#0A0A0C}
#dock button[data-dica]:hover::after{content:attr(data-dica);position:absolute;bottom:56px;right:0;white-space:nowrap;font:600 13px/1 Arial,sans-serif;background:#F4F1EA;color:#0A0A0C;padding:8px 10px;border-radius:8px}
#pausa{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;background:rgba(5,5,6,.82);font:400 90px var(--black);text-transform:uppercase;letter-spacing:-.02em;color:#F4F1EA}
#pausa.on{display:flex}
#painel{position:fixed;inset:0;z-index:110;display:none;align-items:center;justify-content:center;background:rgba(5,5,6,.72);backdrop-filter:blur(4px)}
#painel.on{display:flex}
#painel .caixa{width:min(920px,94vw);max-height:90vh;overflow:auto;background:#141418;border-radius:24px;padding:30px 34px;box-shadow:0 30px 90px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08);font:400 17px/1.5 var(--texto);color:#F4F1EA;user-select:text;-webkit-user-select:text}
#painel h2{font-family:var(--black);font-size:34px;text-transform:uppercase;margin:0 0 12px}
#painel h3{font:700 15px var(--mono);letter-spacing:.12em;color:rgba(244,241,234,.55);margin:22px 0 8px;text-transform:uppercase}
#painel p{margin:6px 0}
#painel kbd{font:700 13px var(--mono);background:#26262e;border-radius:6px;padding:2px 7px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.4)}
#painel table{border-collapse:collapse;width:100%;font-size:15px}
#painel td{padding:6px 8px;border-top:1px solid rgba(255,255,255,.08);vertical-align:top}
#painel .fechar{float:right}
#painel .linha-aj{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0}
#painel .linha-aj > span{min-width:170px;color:rgba(244,241,234,.7)}
#aviso{position:fixed;left:50%;top:18px;transform:translate(-50%,-30px);z-index:120;opacity:0;transition:all .35s;font:600 16px var(--sans);background:#F4F1EA;color:#0A0A0C;border-radius:999px;padding:10px 18px;pointer-events:none}
#aviso.on{opacity:1;transform:translate(-50%,0)}
/* QR do modo celular */
.qrbox{position:absolute;right:90px;bottom:80px;display:flex;gap:22px;align-items:center;background:var(--bg2);border-radius:28px;padding:20px;box-shadow:inset 0 0 0 1px var(--line)}
.qrbox .qr{width:210px;height:210px;border-radius:14px;overflow:hidden;background:#fff}
.qrbox .qr svg{width:100%;height:100%;display:block}
.qrbox .cod{font:700 64px var(--mono);letter-spacing:.12em}
.qrbox .info{font:500 18px var(--mono);color:var(--mute);max-width:330px}
.qrbox .conta{display:flex;gap:12px;margin-top:12px}
.qrbox .conta span{display:flex;align-items:center;gap:6px;font:700 20px var(--mono)}
.qrbox .conta i{width:12px;height:12px;border-radius:50%}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .mapa .mc{transition:none}
}