/* jogo-previsivel.css · Você é previsível? (telão)
   Fontes locais (pasta fontes/), licença SIL OFL 1.1: Inter Tight e JetBrains Mono. Funciona sem internet.
   Palco de 1080 px de altura; a largura acompanha a tela (1500 a 2000). */
@font-face{font-family:'PV Titulo';font-weight:800;font-display:swap;src:url('fontes/inter-tight-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'PV Titulo';font-weight:700;font-display:swap;src:url('fontes/inter-tight-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'PV Texto';font-weight:300;font-display:swap;src:url('fontes/inter-tight-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'PV Texto';font-weight:400;font-display:swap;src:url('fontes/inter-tight-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'PV Texto';font-weight:500;font-display:swap;src:url('fontes/inter-tight-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'PV Texto';font-weight:700;font-display:swap;src:url('fontes/inter-tight-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'PV Mono';font-weight:500;font-display:swap;src:url('fontes/jetbrains-mono-latin-500-normal.woff2') format('woff2')}

:root{
  --bg:#0B0C10; --bg2:#13151B; --bg3:#1B1E26; --ink:#EEECE6; --mute:rgba(238,236,230,.64); --dim:rgba(238,236,230,.4);
  --line:rgba(238,236,230,.09); --line2:rgba(238,236,230,.18);
  --verde:#5CCB9F; --verde2:rgba(92,203,159,.1); --verm:#EC6A6F; --verm2:rgba(236,106,111,.1); --ouro:#D9B45B; --ouro2:rgba(217,180,91,.1);
  --tit:'PV Titulo','Helvetica Neue',Arial,sans-serif; --texto:'PV Texto','Helvetica Neue',Arial,sans-serif; --mono:'PV Mono',ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#050608;color:var(--ink);overflow:hidden}
body{font:400 30px/1.32 var(--texto);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;cursor:pointer}
b{font-weight:700}

/* ── palco ── */
#moldura{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#050608}
#palco{position:relative;width:1920px;height:1080px;flex:none;transform-origin:center center;overflow:hidden;background:radial-gradient(140% 100% at 18% 0%,#151823 0%,#0B0C10 58%)}
#palco::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:50;opacity:.03;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")}
#tela{position:absolute;inset:0;padding:78px 110px 70px;display:flex;flex-direction:column;animation:entra .5s var(--ease)}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.rot{font:500 20px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);display:flex;gap:18px;align-items:center}
.rot i{width:8px;height:8px;border-radius:50%;background:var(--verm);display:inline-block}
.rot i.vivo{animation:pulsa 1.6s ease-in-out infinite}
@keyframes pulsa{50%{opacity:.25}}
h1,h2{font-family:var(--tit);font-weight:800;letter-spacing:-.035em;margin:0}
h1{font-size:150px;line-height:.95}
h2{font-size:80px;line-height:1.02;margin-top:22px}
.lead{font:300 38px/1.35 var(--texto);color:var(--mute);margin:26px 0 0;max-width:1300px}
.lead b{color:var(--ink);font-weight:500}
.pe{margin-top:auto;display:flex;gap:18px;align-items:center}
.pe .dica{margin-left:auto;font:400 22px/1.3 var(--texto);color:var(--dim);text-align:right}
.verde{color:var(--verde)} .verm{color:var(--verm)} .ouro{color:var(--ouro)}

.bt{white-space:nowrap;border:0;border-radius:999px;padding:22px 38px;font:700 28px/1 var(--tit);background:var(--ink);color:var(--bg);box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .15s var(--ease)}
.bt:hover{transform:translateY(-2px)}
.bt:active{transform:scale(.97)}
.bt.sec{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line2)}
.bt kbd{font:500 22px/1 var(--mono);opacity:.5;margin-left:14px}

/* ── capa ── */
#tela.capa{justify-content:center}
.capa h1{font-size:176px;max-width:1500px}
.capa h1 span{color:var(--verm)}
.capa .lead{font-size:44px;max-width:1240px}
.capa .pe{margin-top:64px}
.capa .msg{font:400 26px/1.35 var(--texto);color:var(--ouro);margin-top:26px;min-height:36px}
.fita{position:absolute;left:110px;right:110px;top:84px;display:flex;gap:10px;align-items:center}
.fita span{font:500 22px/1 var(--mono);width:44px;height:44px;display:grid;place-items:center;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2);color:var(--dim);animation:fita 4.8s var(--ease) infinite both}
.fita span.x{color:var(--verm);box-shadow:inset 0 0 0 1px rgba(236,106,111,.5)}
@keyframes fita{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:0}}
.capa .tempo{position:absolute;right:110px;bottom:70px;font:500 20px/1 var(--mono);letter-spacing:.14em;color:var(--dim);text-transform:uppercase}

/* ── sala ── */
#tela.sala,#vivo .sala{flex-direction:row;align-items:center;gap:100px}
.qr{width:560px;height:560px;flex:none;background:#EEECE6;border-radius:28px;padding:30px}
.qr svg{width:100%;height:100%;display:block}
.sala .txt{flex:1;min-width:0}
.cod{font:800 190px/1 var(--tit);letter-spacing:.12em;margin:14px 0 8px}
.passos{list-style:none;padding:0;margin:26px 0 0;counter-reset:p}
.passos li{counter-increment:p;display:flex;gap:22px;align-items:baseline;font:400 32px/1.35 var(--texto);color:var(--mute);margin:12px 0}
.passos li::before{content:counter(p);font:500 22px/1 var(--mono);color:var(--dim);width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2);transform:translateY(-4px)}
.passos li b{color:var(--ink);font-weight:500}
.conta{display:flex;align-items:baseline;gap:16px;margin-top:34px;font:400 30px/1 var(--texto);color:var(--mute)}
.conta b{font:800 76px/1 var(--tit);color:var(--ink);letter-spacing:-.02em}
.sala .pe{margin-top:44px}

/* ── antes de abrir a rodada ── */
.antes h2{font-size:108px;margin-top:26px}
.regras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:56px}
.regras div{border-radius:20px;padding:30px 32px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--line)}
.regras small{display:block;font:500 18px/1 var(--mono);letter-spacing:.14em;color:var(--dim);margin-bottom:16px}
.regras p{margin:0;font:400 31px/1.32 var(--texto);color:var(--mute)}
.regras p b{color:var(--ink);font-weight:500}

/* ── placar ao vivo ── */
.corpo{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:56px;margin-top:40px;min-height:0}
.stats{display:flex;gap:44px;margin-top:auto;padding-top:40px}
.stats div{font:400 22px/1.2 var(--texto);color:var(--dim)}
.stats b{display:block;font:700 46px/1.1 var(--tit);color:var(--ink);letter-spacing:-.01em;margin-top:6px}

/* histograma */
.hist{display:flex;flex-direction:column;border-radius:22px;padding:30px 34px 26px;background:rgba(255,255,255,.022);box-shadow:inset 0 0 0 1px var(--line);min-height:0}
.hist .tt{font:500 26px/1.25 var(--texto);color:var(--ink)}
.hist .tt small{display:block;font:400 21px/1.3 var(--texto);color:var(--dim);margin-top:4px}
.barras{--g:12px;position:relative;flex:1;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:var(--g);align-items:end;margin-top:24px;min-height:260px}
.barras .b{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.barras .b i{display:block;width:100%;border-radius:8px 8px 3px 3px;background:rgba(236,106,111,.55);height:0;transition:height .6s var(--ease)}
.barras .b.v i{background:rgba(92,203,159,.6)}
.barras .b em{font:700 26px/1 var(--tit);font-style:normal;margin-bottom:10px;color:var(--ink)}
.barras .b em.z{color:transparent}
.barras .linha50{position:absolute;top:-8px;bottom:0;width:2px;background:var(--ouro);left:calc((100% - 9 * var(--g)) * .3 + 2.5 * var(--g) - 1px)}
.eixo{--g:12px;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:var(--g);margin-top:10px;padding-top:10px;box-shadow:inset 0 1px 0 var(--line2)}
.eixo span{font:500 16px/1.2 var(--mono);color:var(--dim);text-align:center;white-space:nowrap}
.lados{display:flex;justify-content:space-between;margin-top:16px;font:400 21px/1.25 var(--texto)}
.lados span:first-child{color:var(--verde)} .lados span:last-child{color:var(--verm);text-align:right}
.vazio-h[hidden]{display:none}
.vazio-h{position:absolute;inset:0;display:grid;place-items:center;font:400 26px/1.3 var(--texto);color:var(--dim);text-align:center}

/* voluntário no teclado (modo projetor) */
.vol{display:flex;flex-direction:column;border-radius:22px;padding:30px 34px;background:rgba(255,255,255,.022);box-shadow:inset 0 0 0 1px var(--line)}
.vol .quem{display:flex;justify-content:space-between;align-items:baseline;font:500 26px/1 var(--texto);color:var(--mute)}
.vol .quem b{font:700 34px/1 var(--tit);color:var(--ink)}
.vol .pct{font:800 150px/.95 var(--tit);letter-spacing:-.045em;color:var(--verm);margin:22px 0 4px}
.vol .pct.baixo{color:var(--verde)}
.vol .pct small{font-size:.42em}
.vol .lbl{font:400 24px/1.3 var(--texto);color:var(--mute)}
.teclas{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:auto;padding-top:26px}
.tecla{height:190px;border-radius:24px;border:0;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--line2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:background .12s,transform .08s}
.tecla kbd{font:500 30px/1 var(--mono);width:58px;height:58px;display:grid;place-items:center;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line2);color:var(--mute)}
.tecla span{font:700 38px/1 var(--tit)}
.tecla.toque{background:rgba(238,236,230,.12);transform:scale(.985)}
.fitinha{display:flex;gap:5px;flex-wrap:wrap;margin-top:18px;min-height:14px}
.fitinha i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line2)}
.fitinha i.a{background:var(--verm);box-shadow:none}
.prog{height:6px;border-radius:3px;background:var(--bg3);margin-top:18px;overflow:hidden}
.prog b{display:block;height:100%;background:var(--ink);transition:width .2s}
.fimvol{margin-top:auto;padding-top:20px;font:400 26px/1.35 var(--texto);color:var(--mute)}
.fimvol b{color:var(--ink);font-weight:500}

/* ── resultado ── */
.res h2{font-size:74px;max-width:1750px}
.res h2 .verm,.res h2 .verde{white-space:nowrap}
.res .corpo{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);margin-top:44px}
.cartoes{display:flex;flex-direction:column;gap:22px}
.cartao{border-radius:20px;padding:28px 32px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--line)}
.cartao .n{font:800 92px/1 var(--tit);letter-spacing:-.03em}
.res .cartao{padding:22px 28px}
.res .cartao .n{font-size:68px}
.res .cartao p{font-size:25px;margin-top:8px}
.res h2{font-size:64px!important}
.res .corpo{margin-top:34px!important}
.cartao .n small{font-size:.44em;color:var(--mute);font-weight:700;letter-spacing:-.01em;margin-left:10px}
.cartao p{margin:12px 0 0;font:400 27px/1.35 var(--texto);color:var(--mute)}
.cartao p b{color:var(--ink);font-weight:500}
.cartao.v{box-shadow:inset 0 0 0 1px rgba(92,203,159,.32);background:var(--verde2)}
.cartao.v .n{color:var(--verde)}

/* ── como a máquina pensa ── */
.expl h2{font-size:92px}
.passos3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:56px}
.passo{border-radius:22px;padding:32px 34px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column}
.passo small{font:500 18px/1 var(--mono);letter-spacing:.14em;color:var(--dim)}
.passo p{margin:16px 0 0;font:400 32px/1.3 var(--texto);color:var(--ink)}
.passo .ex{margin-top:auto;padding-top:30px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font:400 22px/1.3 var(--texto);color:var(--mute)}
.ch{font:500 26px/1 var(--mono);width:52px;height:52px;display:inline-grid;place-items:center;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line2);color:var(--ink);opacity:0;animation:aparece .4s var(--ease) both}
.ch.d{color:var(--ouro);box-shadow:inset 0 0 0 1.5px rgba(217,180,91,.55)}
.ch.ap{background:var(--verm);color:#0B0C10;box-shadow:none}
@keyframes aparece{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.passo .ex>span:not(.ch){flex-basis:100%}
.passo .ex .seta{color:var(--dim);font:400 26px/1 var(--texto)}
.expl .lead{font-size:32px;margin-top:40px}

/* ── comparação ── */
.comp .linhas{margin-top:60px;display:flex;flex-direction:column;gap:40px}
.lin{display:grid;grid-template-columns:280px minmax(0,1fr) 210px;gap:34px;align-items:center}
.lin .nm{font:700 36px/1.1 var(--tit)}
.lin .nm small{display:block;font:400 22px/1.3 var(--texto);color:var(--dim);margin-top:6px}
.lin .tr{position:relative;height:74px;border-radius:14px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--line)}
.lin .tr i{position:absolute;left:0;top:0;bottom:0;border-radius:14px;background:rgba(236,106,111,.5);width:0;transition:width 1s var(--ease)}
.lin .tr i.v{background:rgba(92,203,159,.55)}
.lin .tr .m50{position:absolute;left:50%;top:-12px;bottom:-12px;width:2px;background:var(--ouro)}
.lin .v{font:800 92px/1 var(--tit);letter-spacing:-.04em;text-align:right}
.comp .eixo50{position:relative;margin-left:314px;margin-right:244px;height:30px;font:500 18px/1 var(--mono);color:var(--ouro)}
.comp .eixo50 span{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
.conclusao{margin-top:80px;font:400 40px/1.3 var(--texto);color:var(--ink);max-width:1500px}
.conclusao small{display:block;font:400 26px/1.35 var(--texto);color:var(--mute);margin-top:12px}

/* ── conversa ── */
.deb h2{font-size:82px;max-width:1650px}
.deb .lead{max-width:1450px}
.fonte{border-radius:20px;padding:30px 34px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--line);margin-top:48px;max-width:1500px}
.fonte p{margin:0;font:400 31px/1.4 var(--texto);color:var(--mute)}
.fonte p b{color:var(--ink);font-weight:500}
.fonte q{color:var(--ink)}
.ref{font:400 19px/1.4 var(--texto);color:var(--dim);margin-top:16px}
.sinais{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:52px}
.sinal{border-radius:20px;padding:28px 28px 30px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--line);font:400 30px/1.3 var(--texto);color:var(--ink);opacity:0;animation:aparece .5s var(--ease) both}
.sinal small{display:block;font:500 17px/1 var(--mono);letter-spacing:.14em;color:var(--dim);margin-bottom:16px}
.frase{margin-top:auto;font:700 52px/1.2 var(--tit);letter-spacing:-.02em;max-width:1500px}
.pergunta{font:800 112px/1.04 var(--tit);letter-spacing:-.04em;margin-top:24px;max-width:1650px}
.horas{display:flex;flex-direction:column;gap:14px;margin-top:44px;max-width:1500px}
.hora{display:grid;grid-template-columns:330px minmax(0,1fr) 90px;gap:24px;align-items:center;font:400 28px/1.2 var(--texto);color:var(--mute)}
.hora .tr{height:34px;border-radius:8px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.hora .tr i{display:block;height:100%;background:rgba(217,180,91,.55);width:0;transition:width .6s var(--ease)}
.hora b{font:700 32px/1 var(--tit);color:var(--ink);text-align:right}

/* painel dos celulares (sobreposto) */
#vivo{position:absolute;inset:0;z-index:60;background:rgba(11,12,16,.96);backdrop-filter:blur(10px);padding:80px 110px}
#vivo .sala{height:100%;display:flex}

/* rodapé do professor */
#dock{position:fixed;right:16px;top:14px;z-index:100;display:flex;gap:6px;padding:8px;border-radius:999px;background:rgba(20,21,26,.88);backdrop-filter:blur(10px);box-shadow:0 10px 40px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.07);transition:opacity .4s,transform .4s}
#dock.dorme{opacity:0;transform:translateY(-10px);pointer-events:none}
#dock button{min-width:46px;height:46px;border-radius:999px;border:0;background:transparent;color:#EEECE6;display:flex;align-items:center;justify-content:center;position:relative;padding:0 10px}
#dock button:hover{background:rgba(255,255,255,.09)}
#dock button svg{width:22px;height:22px}
#dock button.on{background:#EEECE6;color:#0B0C10}
#dock button .nvivo{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:#5CCB9F;color:#0B0C10;font:700 12px/20px Arial,sans-serif;padding:0 5px}
#dock button[data-dica]:hover::after{content:attr(data-dica);position:absolute;top:56px;right:0;white-space:nowrap;font:600 13px/1 Arial,sans-serif;background:#EEECE6;color:#0B0C10;padding:8px 10px;border-radius:8px}
#aviso{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:120;background:#EEECE6;color:#0B0C10;font:600 18px/1.3 Arial,sans-serif;padding:12px 20px;border-radius:12px;opacity:0;transition:all .3s;pointer-events:none;max-width:90vw;text-align:center}
#aviso.on{opacity:1;transform:translate(-50%,0)}


/* ── cabeçalho das telas de jogo ── */
.cab{display:flex;align-items:flex-end;gap:30px}
.cab h2{font-size:64px;margin-top:14px}
.demo,.arena{padding-top:60px}

/* ── demonstração ── */
.placar-demo{margin-left:auto;text-align:right}
.placar-demo[hidden]{display:none}
.placar-demo small{display:block;font:500 18px/1 var(--mono);letter-spacing:.14em;color:var(--dim)}
.placar-demo b{display:block;font:800 120px/1 var(--tit);letter-spacing:-.04em;margin-top:8px}
.placar-demo b i{font-style:normal;font-size:.42em;color:var(--mute);letter-spacing:-.01em}
.placar-demo .qt{display:block;font:500 20px/1 var(--mono);letter-spacing:.1em;color:var(--dim);margin-top:10px;text-transform:uppercase}
.duelo{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.cartas{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.carta-d{border-radius:24px;padding:30px 36px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--line)}
.carta-d small{font:500 18px/1 var(--mono);letter-spacing:.14em;color:var(--dim)}
.carta-d b{display:block;font:800 104px/1.05 var(--tit);letter-spacing:-.04em;margin:16px 0 6px}
.carta-d b.sel{font-size:60px;line-height:1.75;color:var(--dim)}
.carta-d span{font:400 22px/1.2 var(--texto);color:var(--dim)}
.veredito{margin-top:26px;font:800 76px/1.1 var(--tit);letter-spacing:-.03em;color:var(--mute);min-height:84px}
.veredito:not(.sabia):not(.escapou){font:400 34px/1.3 var(--texto);letter-spacing:0;padding-top:20px}
.veredito.sabia,.veredito-p.sabia{color:var(--verm)}
.veredito.escapou,.veredito-p.escapou{color:var(--verde)}
.veredito.pulso{animation:pulso .5s var(--ease);transform-origin:left center}
@keyframes pulso{0%{transform:scale(.94);opacity:.2}60%{transform:scale(1.02);opacity:1}100%{transform:none}}
.fitinha.grande-f{gap:8px;margin-top:22px}
.fitinha.grande-f i{width:18px;height:18px}
.teclas-demo{width:880px;margin:0;padding:0}
.teclas-demo .tecla{height:120px;flex-direction:row;gap:18px}
.teclas-demo.espera .tecla{opacity:.35;pointer-events:none}
.demo-fim .lbl{font:400 34px/1.2 var(--texto);color:var(--mute);margin:0}
.grandao{font:800 230px/1 var(--tit);letter-spacing:-.05em;margin:10px 0}
.grandao small{font-size:.3em;color:var(--mute);letter-spacing:-.01em}

/* ── arena ao vivo ── */
.arena-g{flex:1;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:60px;margin-top:30px;min-height:0}
.placar-g{display:flex;flex-direction:column;min-width:0}
.placar-g .lbl{font:400 32px/1.2 var(--texto);color:var(--mute)}
.contador{font:800 250px/.92 var(--tit);letter-spacing:-.055em;color:var(--verm);margin:10px 0 4px}
.placar-g .sub{font:400 30px/1.3 var(--texto);color:var(--mute)}
.placar-g .sub b{color:var(--ink);font-weight:500}
.lbl-ag{margin-top:auto;font:500 18px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.agulha{position:relative;height:150px;margin-top:8px}
.agulha .trilho{position:absolute;left:0;right:0;top:76px;height:10px;border-radius:5px;background:rgba(236,106,111,.16);overflow:hidden}
.agulha .lado-v{height:100%;background:rgba(92,203,159,.22)}
.agulha .meio{position:absolute;top:56px;height:50px;width:2px;background:var(--ouro);transform:translateX(-1px)}
.agulha .meio span{position:absolute;top:58px;left:50%;transform:translateX(-50%);white-space:nowrap;font:500 18px/1 var(--mono);color:var(--ouro)}
#rastro i{position:absolute;top:73px;width:16px;height:16px;border-radius:50%;background:var(--ink);transform:translateX(-50%)}
.ponteiro{position:absolute;top:66px;width:30px;height:30px;border-radius:50%;background:var(--ink);transform:translateX(-50%);box-shadow:0 0 0 7px rgba(238,236,230,.12);transition:left .7s var(--ease)}
.ponteiro b{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);font:800 56px/1 var(--tit);letter-spacing:-.03em;color:var(--verm);white-space:nowrap}
.ponteiro.baixo b{color:var(--verde)}
.agulha .pontas{position:absolute;left:0;right:0;top:118px;display:flex;justify-content:space-between;font:500 17px/1 var(--mono);color:var(--dim)}
.agulha .pontas span:nth-child(2){opacity:0}
.aprend{font:400 22px/1.35 var(--texto);color:var(--dim);margin-top:8px;min-height:30px}
.aprend b{color:var(--ink);font-weight:500}
.lado-d{display:flex;flex-direction:column;gap:26px;min-height:0}
.lado-d .stats{margin:0;padding:0;gap:36px}
.hist.mini{flex:1;padding:22px 24px 18px}
.hist.mini .tt{font-size:21px}
.hist.mini .tt small{font-size:17px}
.hist.mini .barras{--g:6px;min-height:150px;margin-top:14px}
.hist.mini .eixo{--g:6px}
.hist.mini .barras .b em{font-size:18px;margin-bottom:6px}
.hist.mini .eixo span{font-size:11px}
.hist.mini .lados{font-size:16px;margin-top:10px}
.hist.mini .vazio-h{font-size:18px}
.cron{margin-left:auto;font:800 150px/1 var(--tit);letter-spacing:-.04em;color:var(--ink);min-width:340px;text-align:right}
.cron.conta{color:var(--ouro)}
.cron.fim{color:var(--verm)}
.festa{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:20;padding:44px 70px;border-radius:28px;text-align:center;background:rgba(11,12,16,.92);box-shadow:inset 0 0 0 1.5px var(--verde),0 30px 80px rgba(0,0,0,.6);animation:festa .7s var(--ease)}
.festa b{display:block;font:800 84px/1.05 var(--tit);letter-spacing:-.035em;color:var(--verde)}
.festa span{display:block;font:400 28px/1.3 var(--texto);color:var(--mute);margin-top:12px}
@keyframes festa{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%)}}
.arena .pe{margin-top:26px}
.veredito-p{font:800 44px/1.1 var(--tit);letter-spacing:-.02em;color:var(--mute);margin-top:4px;min-height:48px}

/* ── resultado, padrão e conta final ── */
.moeda{color:var(--ouro);font-weight:700}
.nota-ap{margin:4px 0 0;font:400 22px/1.4 var(--texto);color:var(--dim)}
.nota-comp{margin:30px 0 0;font:400 22px/1.35 var(--texto);color:var(--dim)}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:50px}
.grande-c .n{font-size:150px;color:var(--ouro)}
.grande-c p{font-size:30px}
.cel-aviso{margin-top:auto;padding:22px 30px;border-radius:18px;box-shadow:inset 0 0 0 1px var(--line2);font:400 30px/1.3 var(--texto);color:var(--mute);max-width:1200px}
.cel-aviso b{color:var(--ink);font-weight:500}
.padrao .pe,.final .pe{margin-top:30px}
.total{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:50px}
.total small{display:block;font:500 18px/1 var(--mono);letter-spacing:.14em;color:var(--dim)}
.total b{display:block;font:800 150px/1 var(--tit);letter-spacing:-.05em;margin-top:12px}
.deb h2.final-h{font-size:60px;margin-top:70px;max-width:1700px;line-height:1.08}
.final .lead{font-size:32px;margin-top:20px;max-width:1600px}
.final .frase{margin-top:30px;font-size:46px}

/* ── explicação ── */
.deb.acaso h2,.deb.rapido h2,.deb.automatico h2,.deb.usos h2{font-size:72px;max-width:1700px}
.deb.rapido h2{font-size:64px}
.rotc{display:block;font:500 17px/1.2 var(--mono);letter-spacing:.14em;color:var(--dim);margin-bottom:12px}
.grande-c .n.n-txt{font-size:64px;line-height:1.05;color:var(--ink);margin:6px 0 4px}
.grande-p{font-size:31px!important;line-height:1.4!important;color:var(--mute)}
.cartao.r{box-shadow:inset 0 0 0 1px rgba(236,106,111,.32);background:var(--verm2)}
.deb .ref{margin-top:18px}
.deb .dupla+.lead{margin-top:30px}
.virada-c{margin:auto 0}
.virada-c .pergunta{font-size:150px}
.virada-p{font:300 46px/1.35 var(--texto);color:var(--mute);max-width:1500px;margin:30px 0 0}
.virada-p b{color:var(--ink);font-weight:500}

/* ── o seu celular de verdade ── */
.celreal .dupla{margin-top:40px}
.celreal .conta{margin-top:30px}
.cel-barras{max-width:1700px;margin-top:40px;gap:18px}
.cel-barras .hora{grid-template-columns:420px minmax(0,1fr) 90px;font-size:32px;opacity:0;animation:aparece .5s var(--ease) both}
.cel-barras .hora .tr{height:44px}
.cel-barras .hora .tr i{background:rgba(236,106,111,.6);transition:width 1s var(--ease)}
.cel-barras .hora b{font-size:40px}
.cel-barras .hora.ns span,.cel-barras .hora.ns b{color:var(--dim)}
.cel-barras .hora.ns .tr i{background:rgba(238,236,230,.25)}
.manchete{margin-top:auto;font:800 64px/1.1 var(--tit);letter-spacing:-.03em;max-width:1700px;opacity:0;animation:aparece .6s var(--ease) 1.9s both}
.revela .pe{margin-top:30px}
.fecho-c{margin:auto 0;max-width:1650px}
.fecho-c p{margin:0}
.fecho-c .f1{font:400 46px/1.3 var(--texto);color:var(--mute)}
.fecho-c .f1 b{color:var(--ink);font-weight:700}
.fecho-c .f2{font:800 84px/1.08 var(--tit);letter-spacing:-.035em;margin-top:34px;opacity:0;animation:aparece .8s var(--ease) 1.2s both}
.fecho-c .f3{font:400 36px/1.35 var(--texto);color:var(--mute);margin-top:34px;opacity:0;animation:aparece .8s var(--ease) 2.6s both}

/* ── palpiteiros ── */
.regras-m{display:grid;grid-template-columns:1fr 1fr;gap:10px 50px;margin-top:26px;max-width:1700px}
.regras-m p{margin:0;font:400 28px/1.35 var(--texto);color:var(--mute)}
.regras-m b{color:var(--ink);font-weight:500}
.palp{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:14px}
.pp{position:relative;border-radius:16px;padding:18px 20px 22px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.pp .nm{display:block;font:400 21px/1.25 var(--texto);color:var(--mute);min-height:52px}
.pp b{display:block;font:800 46px/1 var(--tit);letter-spacing:-.03em;margin-top:8px}
.pp i{position:absolute;left:0;bottom:0;height:5px;background:rgba(238,236,230,.25)}
.pp.top{box-shadow:inset 0 0 0 1.5px var(--verm);background:var(--verm2)}
.pp.top b{color:var(--verm)}
.pp.top i{background:var(--verm)}
.lead-s{font-size:30px!important;margin-top:24px!important}
.expl .pe,.padrao .pe{margin-top:auto}
.tres-c{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:44px}
.tres-c .grande-c .n{font-size:110px}
.tres-c .grande-c .n small{font-size:.38em}
.tres-c .grande-c p{font-size:26px}

/* ── quatro rodadas ── */
.linhas4{gap:26px!important;margin-top:40px!important}
.linhas4 .tr{height:60px}
.linhas4 .v{font-size:76px}
.conclusao.c4{margin-top:40px;font-size:36px}
.conclusao.c4 b{font-weight:700}
.conclusao.c4 small{font-size:24px}

/* ── sem pensar: a batida ── */
.batida{width:120px;height:120px;border-radius:50%;margin-left:auto;margin-right:40px;align-self:center;box-shadow:inset 0 0 0 3px var(--ouro);opacity:.35}
.batida.pulsa{animation:bat .55s ease-out}
@keyframes bat{0%{opacity:1;transform:scale(1.12);background:rgba(217,180,91,.35)}100%{opacity:.35;transform:none;background:transparent}}

/* ── pesquisa ── */
.pesq h2{font-size:66px;max-width:1700px}
.pesq .dupla{align-items:start}
.pesq .rotc{margin-top:6px}
.cel-barras .hora.top span{color:var(--ink)}
.pesq .cel-barras{margin-top:16px;gap:12px}
.pesq .cel-barras .hora{grid-template-columns:300px minmax(0,1fr) 60px;font-size:24px}
.pesq .cel-barras .hora .tr{height:30px}
.pesq .cel-barras .hora b{font-size:28px}
.tres-l{align-items:start}
.tres-l .cel-barras .hora{grid-template-columns:200px minmax(0,1fr) 44px!important;font-size:20px!important;gap:12px}
.tres-l .cel-barras .hora b{font-size:24px!important}
.cp-vazio{margin-top:40px;font:400 34px/1.35 var(--texto);color:var(--mute);max-width:1400px}
.cp-vazio small{display:block;font-size:24px;color:var(--dim);margin-top:10px}
.pesq .pe,.celreal .pe{margin-top:auto}

/* tela estreita (1366 × 768 e parecidas: palco de ~1500 px) */
.estreito #tela{padding:70px 80px 60px}
.estreito .capa h1{font-size:150px}
.estreito .fita{left:80px;right:80px}
.estreito .capa .tempo{right:80px}
.estreito .qr{width:480px;height:480px}
.estreito #tela.sala,.estreito #vivo .sala{gap:70px}
.estreito .cod{font-size:160px}
.estreito .corpo{gap:40px}
.estreito .barras,.estreito .eixo{--g:8px}
.estreito .eixo span{font-size:14px}
.estreito .sinais{grid-template-columns:repeat(2,minmax(0,1fr))}
.estreito .sinal{padding:22px 26px;font-size:28px}
.estreito .pergunta{font-size:100px}
.estreito .lin{grid-template-columns:240px minmax(0,1fr) 190px}
.estreito .comp .eixo50{margin-left:274px;margin-right:224px}
.estreito .tecla{height:160px}
.estreito .vol .pct{font-size:130px}
.estreito .res h2{font-size:58px}
.estreito .contador{font-size:200px}
.estreito .cron{font-size:120px;min-width:260px}
.estreito .carta-d b{font-size:84px}
.estreito .teclas-demo{width:700px}
.estreito .total b{font-size:120px}
.estreito .grandao{font-size:190px}
.estreito .grande-c .n{font-size:120px}
.estreito .deb h2.final-h{font-size:52px}
.estreito .deb.acaso h2,.estreito .deb.automatico h2,.estreito .deb.usos h2{font-size:60px}
.estreito .deb.rapido h2{font-size:54px}
.estreito .grande-p{font-size:27px!important}
.estreito .virada-c .pergunta{font-size:120px}
.estreito .fecho-c .f2{font-size:70px}
.estreito .manchete{font-size:54px}
.estreito .palp{gap:10px}.estreito .pp b{font-size:38px}.estreito .pp .nm{font-size:18px}
.estreito .regras-m p{font-size:24px}
.estreito .pesq h2{font-size:56px}
.estreito .tres-c .grande-c .n{font-size:90px}
.estreito .cel-barras .hora{grid-template-columns:360px minmax(0,1fr) 80px;font-size:28px}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}