/* Projeção — o painel que desliza da direita na página da apuração (projecao/painel.js). Mesma linguagem do mapa: cartões
   flutuando sobre o mar cinza, Source Sans 3. Leitor mais velho: nada abaixo de 13 px, alvos de 44 px. Tema (22/10): as cores
   que mudam com ele são variáveis, em :root e em qualquer [data-tema] (a cópia da página no véu da troca, st.css).
   Desenho de 23/10: dois cartões sob um visor — O MEDIDOR (flip card: A NOITE no verso) e OS 6.000 FINAIS. No DOM só
   transform e opacity se movem (o giro, o véu dos números na troca de disputa, o brilho "mudando"); SVG e canvas interpolam. */
:root { --pj-a: #c8102e; --pj-b: #1d4e9e; --pj-ease: cubic-bezier(.65, 0, .35, 1); --pj-flip-ease: cubic-bezier(.4, 0, .2, 1); }
:root, [data-tema="claro"] { --pj-ia: #5b3fd0; --pj-ia2: #8a73ff; --pj-mute: #6b6b76; --pj-ink2: #44444f; --pj-tinta: #17171c; --pj-borda: #cfc5fb;
  --pj-dif-bg: #f4f1ff; --pj-dif-tx: #2e2378; --pj-alt: #efedf7; --pj-carga: rgba(243, 243, 240, .82); --pj-card-s: #ffffff;
  --pj-face-a: #fdfcfa; --pj-face-b: #ebe8e0; --pj-bezel-a: #f1eee7; --pj-bezel-b: #cfcbc1; --pj-bezel-hi: rgba(255, 255, 255, .9); --pj-bezel-lo: rgba(0, 0, 0, .14);
  --pj-tick: #3a3a44; --pj-tick-2: #b3afa6; --pj-needle: #17171c; --pj-cap-a: #ffffff; --pj-cap-b: #c9c5bb; --pj-cap-ring: rgba(0, 0, 0, .25); --pj-cap-dot: #17171c; --pj-bug: #7b7786;
  --pj-lcd: #15171b; --pj-lcd-b: #2b2e36; --pj-lcd-ink: #efeeff; --pj-lcd-mute: #a09ec0; --pj-brilho: rgba(255, 255, 255, .55); }
:root[data-tema="escuro"], [data-tema="escuro"] { --pj-ia: #a993ff; --pj-ia2: #c0b0ff; --pj-mute: #a5a3ad; --pj-ink2: #cfcdd5; --pj-tinta: #ecebe6; --pj-borda: #4f4686;
  --pj-dif-bg: #262140; --pj-dif-tx: #d4caff; --pj-alt: #2a2838; --pj-carga: rgba(16, 18, 21, .8); --pj-card-s: #1f2125;
  --pj-face-a: #2a2d33; --pj-face-b: #191b1f; --pj-bezel-a: #42464e; --pj-bezel-b: #24272c; --pj-bezel-hi: rgba(255, 255, 255, .14); --pj-bezel-lo: rgba(0, 0, 0, .6);
  --pj-tick: #d9d7df; --pj-tick-2: #5f636c; --pj-needle: #f2f0ea; --pj-cap-a: #5a5e66; --pj-cap-b: #1b1d21; --pj-cap-ring: rgba(255, 255, 255, .18); --pj-cap-dot: #ecebe6; --pj-bug: #9a97a6;
  --pj-lcd: #0f1114; --pj-lcd-b: #30333c; --pj-lcd-ink: #f1efff; --pj-lcd-mute: #a3a1c4; --pj-brilho: rgba(255, 255, 255, .22); }

/* o carrossel: o mapa sai pela esquerda, a projeção entra pela direita; cabeçalho e barra da simulação ficam */
#mapa, #realce, #lado, #zoom, #vm { transition: transform .55s var(--pj-ease), opacity .55s var(--pj-ease); }   /* o mesmo .55s do painel lateral do mapa; #vm = o visor do mapa (st.css) sai com ele */
body.em-proj #mapa, body.em-proj #realce { transform: translateX(-38vw); opacity: 0; pointer-events: none; }
body.em-proj #lado, body.em-proj #zoom, body.em-proj #vm { transform: translateX(-110vw) !important; opacity: 0; pointer-events: none; }
body.em-proj #dica, body.em-proj #pop, body.em-proj #dica-sec { display: none !important; }
body.em-proj #ctl { display: none; }
body.em-proj #ens { right: 10px; z-index: 5; }   /* a barra fica por cima da borda em perspectiva do cartão durante o giro */
#proj { position: fixed; left: 66px; right: 10px; top: 120px; bottom: 70px; z-index: 3; display: flex; flex-direction: column; gap: 10px;   /* left: 66 — a aba "Veja o mapa" (56 px) fica na borda esquerda, não sob o painel */
  transform: translateX(calc(100% + 40px)); visibility: hidden; transition: transform .55s var(--pj-ease), visibility 0s linear .55s; }
body.em-proj #proj { transform: none; visibility: visible; transition: transform .55s var(--pj-ease), visibility 0s; }
#proj .tw, #proj .pj-np, #proj .pj-chn, #proj .pj-v-msg, #proj .pj-tele, #proj .pj-v-h, #proj .pj-v-fila { font-variant-numeric: tabular-nums; }

/* cabeçalho do painel */
.pj-cab { display: flex; align-items: center; gap: 14px; background: var(--card, #fff); border: 1px solid var(--line, #dcd8cf); border-radius: 12px; box-shadow: 0 2px 14px var(--sombra1); padding: 6px 12px; flex: none; }
.pj-como-b { border: 1px solid var(--line, #dcd8cf); background: var(--btn); color: var(--ink); border-radius: 10px; padding: 5px 14px; font: 700 15px "Source Sans 3", sans-serif; cursor: pointer; min-height: 44px; white-space: nowrap; }
.pj-como-b:hover { border-color: var(--borda-h); }
.pj-como-b { color: var(--pj-ia); border-color: var(--pj-borda); }
.pj-tit { min-width: 0; flex: 1; }
.pj-tit h2 { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.15; display: flex; align-items: center; gap: 8px; }
.pj-tit h2 svg { width: 26px; height: 26px; flex: none; color: var(--pj-ia); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }   /* o leque do botão */
.pj-tit h2 svg circle { fill: currentColor; stroke: none; }
.pj-tit p { margin: 1px 0 0; font-size: 14.5px; color: var(--mute, #5d5d63); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-tit p b { color: var(--ink); }
#proj.pj-baixo .pj-tit p { display: none; }   /* tela baixa: o sub cede altura ao mostrador (o cartão e o visor já dizem a hora e as seções) */
.pj-est { font-size: 14px; color: var(--mute, #5d5d63); white-space: nowrap; }
.pj-calc { color: var(--pj-ia); font-weight: 700; }
.pj-calc::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pj-ia); margin-right: 6px; vertical-align: 1px; animation: pj-pulsa 1s infinite; }
@keyframes pj-pulsa { 50% { opacity: .2; } }

/* o visor: um só, entre o cabeçalho e os cartões — o display escuro do instrumento nos dois temas */
.pj-visor { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 18px; border-radius: 12px; background: var(--pj-lcd); border: 1px solid var(--pj-lcd-b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 14px var(--sombra1); position: relative; flex: none; overflow: hidden; }
.pj-led { width: 10px; height: 10px; border-radius: 50%; background: var(--pj-ia2); box-shadow: 0 0 10px var(--pj-ia2); flex: none; opacity: .55; }
.pj-visor.vivo .pj-led { animation: pj-led 1s infinite; opacity: 1; }   /* pulsa só com conta em curso: pulso perpétuo é ruído */
@keyframes pj-led { 50% { opacity: .25; } }
.pj-v-h { font-size: 13.5px; font-weight: 700; letter-spacing: .08em; color: var(--pj-lcd-mute); flex: none; min-width: 42px; }
.pj-v-msg { margin: 0; flex: 1; min-width: 0; font-size: 19px; line-height: 1.3; font-weight: 600; color: var(--pj-lcd-ink); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.pj-caret { display: inline-block; width: 10px; height: 22px; background: var(--pj-ia2); vertical-align: -4px; margin-left: 3px; border-radius: 1px; }
.pj-caret.pisca { animation: pj-caret 1s steps(2, start) infinite; }
.pj-caret.some { opacity: 0; }
@keyframes pj-caret { to { opacity: 0; } }
.pj-v-fila { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--pj-lcd-mute); white-space: nowrap; flex: none; }
.pj-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* a grade: dois cartões, lado a lado, com o mesmo peso */
.pj-grade { flex: 1; min-height: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.pj-c { background: var(--card, #fff); border: 1px solid var(--line, #dcd8cf); border-radius: 14px; box-shadow: 0 2px 14px var(--sombra1); padding: 12px 18px 12px; min-height: 0; min-width: 0; display: flex; flex-direction: column; position: relative; }
.pj-c.pj-s { overflow: hidden; }
.pj-ch { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; flex: none; }
.pj-rot { font-size: 13.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pj-mute); flex: 1 1 auto; min-width: 0; }   /* o rótulo cede e quebra; o botão de 44 px nunca sai da tela */
.pj-ch > .pj-vira, .pj-ch > .pj-tele { flex: none; }
.pj-vira { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--pj-borda); background: var(--btn); color: var(--pj-ia); font: 700 15px "Source Sans 3", sans-serif; cursor: pointer; white-space: nowrap; }
.pj-vira svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pj-vira:hover { border-color: var(--pj-ia); }
.pj-vira:focus-visible { outline: 3px solid var(--pj-ia2); outline-offset: 2px; }
.pj-tele { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--pj-mute); min-height: 44px; white-space: nowrap; }
.pj-led2 { width: 8px; height: 8px; border-radius: 50%; background: var(--pj-ia); box-shadow: 0 0 8px var(--pj-ia); opacity: .5; }
.pj-tele.vivo .pj-led2 { animation: pj-led 1s infinite; opacity: 1; }
.pj-h { margin: 2px 0 0; font-size: 23px; font-weight: 800; line-height: 1.2; letter-spacing: -.005em; text-wrap: balance; flex: none; }
.pj-sub { margin: 3px 0 0; font-size: 16.5px; color: var(--pj-ink2); flex: none; }
.pj-sub b { color: var(--ink); font-weight: 700; }
.pj-vz { color: var(--pj-mute); font-size: 15px; margin: 10px 0; }

/* cartão 1 — o medidor */
.pj-dial-c { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; margin: 2px 0 0; }
#pj-agulha { width: 100%; height: 100%; max-height: 100%; display: block; overflow: hidden; }
#pj-agulha text { font-family: "Source Sans 3", system-ui, sans-serif; }
.pj-dial-n { font-weight: 800; fill: var(--pj-tick); }
.pj-dial-nm { font-weight: 800; transition: fill .45s ease; }
.pj-dial-bug { font-weight: 600; fill: var(--pj-mute); }
.pj-dial-bugv { font-weight: 800; fill: var(--pj-ink2); transition: fill .3s ease; }
.pj-jan-v { font-weight: 800; fill: var(--pj-lcd-ink); letter-spacing: -.01em; }
.pj-jan-l { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; fill: var(--pj-lcd-mute); }
#pj-agulha .pj-lado { transition: stroke .45s ease; }
#pj-ponta { transform-box: fill-box; transform-origin: center; }
#pj-jan-r { transition: stroke .3s ease, stroke-width .3s ease; }
.pj-nums { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; margin-top: 4px; align-items: start; flex: none; }
.pj-n { display: flex; gap: 12px; align-items: center; border-top: 4px solid var(--c); padding-top: 8px; transition: border-color .45s ease; }
.pj-n.dir { justify-content: flex-end; text-align: right; }
.pj-n img { width: 52px; height: 52px; border-radius: 50%; border: 2.5px solid var(--c); object-fit: cover; flex: none; background: var(--terra); transition: border-color .45s ease; }
.pj-nn { font-weight: 800; font-size: 17px; line-height: 1.1; }
.pj-np { font-weight: 800; font-size: 40px; line-height: 1.02; color: color-mix(in oklab, var(--c) var(--ctk), #fff); letter-spacing: -.025em; transition: color .45s ease, text-shadow .6s ease; }
.pj-nr { font-size: 15px; color: var(--mute); }
.pj-leg { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14.5px; color: var(--pj-ink2); margin-top: 8px; align-items: center; flex: none; }
.pj-leg span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pj-leg b { color: var(--ink); }
.pj-leg i { display: inline-block; flex: none; }
.pj-leg-meio { flex-direction: column; align-items: center; justify-content: center; gap: 3px; margin-top: 14px; font-size: 14px; }
.lg-ag { width: 22px; height: 0; border-top: 3px solid var(--pj-tinta); border-radius: 2px; }
.lg-mg { width: 18px; height: 11px; border-radius: 3px; background: color-mix(in oklab, var(--pj-ia) 28%, var(--pj-card-s)); border: 1px solid var(--pj-ia); }
.lg-bug { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid var(--pj-bug); }
.lg-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pj-ink2); }
.lg-tri { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid var(--pj-tinta); }
.lg-ln { width: 22px; height: 4px; border-radius: 2px; }
.lg-pt { width: 22px; height: 0; border-top: 3px dotted var(--pj-ink2); }
.lg-fx { width: 18px; height: 11px; border-radius: 3px; background: linear-gradient(135deg, color-mix(in oklab, var(--pj-a) 30%, var(--pj-card-s)) 50%, color-mix(in oklab, var(--pj-b) 30%, var(--pj-card-s)) 50%); }

/* cartão 2 — a chance de vencer e os 6.000 finais */
.pj-chance { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 4px; flex: none; }
.pj-cha { display: flex; flex-direction: column; align-items: flex-start; }
.pj-cha.dir { align-items: flex-end; }
.pj-chn { font-weight: 800; font-size: 64px; line-height: .95; letter-spacing: -.035em; color: color-mix(in oklab, var(--c) var(--ctk), #fff); transition: color .45s ease, text-shadow .6s ease; }
.pj-chl { font-weight: 800; font-size: 17px; color: var(--ink); margin-top: 3px; }
.pj-chm { min-width: 0; position: relative; }
.pj-chb { display: flex; height: 22px; border-radius: 6px; overflow: visible; background: var(--trilho); position: relative; }
.pj-chb > div { height: 100%; transition: background-color .45s ease; }
.pj-chb .a { background: var(--pj-a); border-radius: 6px 0 0 6px; } .pj-chb .b { background: var(--pj-b); border-radius: 0 6px 6px 0; }
.pj-chb::after { content: ""; position: absolute; inset: 0; border-radius: 6px; background: repeating-linear-gradient(90deg, transparent 0 calc(5% - 3px), var(--pj-card-s) calc(5% - 3px) 5%); pointer-events: none; }   /* 20 segmentos de 5 finais no contêiner inteiro (100 segmentos de 2 px viravam moiré no stream a 720p) */
.pj-chb .f { position: absolute; top: -3px; bottom: -3px; background: rgba(255, 255, 255, .2); box-shadow: 0 0 8px 1px var(--pj-ia2); border-radius: 3px; opacity: 0; transition: opacity .6s ease; pointer-events: none; }   /* o trecho que está mudando, aceso enquanto o balé anda */
.pj-anel { position: absolute; inset: -7px -8px; border-radius: 10px; border: 2.5px solid var(--pj-ia); box-shadow: 0 0 0 6px color-mix(in oklab, var(--pj-ia) 18%, transparent), 0 0 24px color-mix(in oklab, var(--pj-ia) 40%, transparent); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.pj-cht { font-size: 15px; color: var(--pj-ink2); text-align: center; margin: 7px 0 0; }
.pj-cht b { color: var(--ink); }
.pj-sims-c { flex: 1; min-height: 90px; margin-top: 8px; position: relative; }
#pj-sims { width: 100%; height: 100%; display: block; }
.pj-sims-c::after { content: ""; position: absolute; inset: 0; border-radius: 10px; border: 2.5px solid var(--pj-ia); box-shadow: 0 0 0 6px color-mix(in oklab, var(--pj-ia) 18%, transparent); opacity: 0; transition: opacity .3s ease; pointer-events: none; }

/* a mira: quando o visor fala de um número, o elemento citado acende em 300 ms e apaga com a mensagem */
#proj[data-mira="chance"] .pj-anel { opacity: 1; }
#proj[data-mira="sims"] .pj-sims-c::after { opacity: 1; }
#proj[data-mira="margem"] #pj-jan-r { stroke: var(--pj-ia); stroke-width: 2.5; }
#proj[data-mira="margem"] #pj-setor-b { opacity: 1; }
.pj-np { position: relative; }
/* (24/10, Admin: "duas linhas roxas que aparecem e somem... sobrescrevem os nomes e não têm utilidade") saiu o traço roxo que acendia sob
   os números grandes quando a frase do visor falava da projeção: cortava o "entre … e …" de baixo */
#proj[data-mira="placar"] #pj-pl { stroke-width: 4.4; opacity: 1; }   /* a frase do visor fala do placar: a agulha pontilhada engrossa (o rótulo fica na cor do líder) */

/* o verso: a noite */
.pj-noite-c { flex: 1; min-height: 0; margin-top: 8px; }
#pj-noite { height: 100%; }
#pj-noite svg { width: 100%; height: 100%; display: block; overflow: visible; }
#pj-noite text { font-family: "Source Sans 3", system-ui, sans-serif; }

/* o giro: o cartão do medidor vira de lado como uma carta (0,8 s), com perspectiva, luz e sombra — só transform e opacity */
.pj-c.pj-flip { perspective: 2800px; padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; }
.pj-flip-i { position: relative; height: 100%; min-height: 0; transform-style: preserve-3d; transition: transform .8s var(--pj-flip-ease); }
.pj-face { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 12px 18px 12px; background: var(--card, #fff); border: 1px solid var(--line, #dcd8cf); border-radius: 14px; box-shadow: 0 2px 14px var(--sombra1);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.pj-face[aria-hidden="true"] { visibility: hidden; }
.pj-flip.girando .pj-face { visibility: visible; }   /* durante o giro as duas faces existem (a de trás, escondida pelo backface) */
.pj-verso { transform: rotateY(180deg); }
.pj-flip.virado .pj-flip-i { transform: rotateY(180deg); }
/* luz e sombra acompanham o giro: um brilho atravessa a face e a sombra longa acende no meio da volta */
.pj-face::after { content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; opacity: 0; transform: translateX(-45%); background: linear-gradient(100deg, rgba(255, 255, 255, 0) 32%, var(--pj-brilho) 50%, rgba(255, 255, 255, 0) 68%); }
.pj-flip.girando .pj-face::after { animation: pj-brilho .8s var(--pj-flip-ease) both; }
@keyframes pj-brilho { 0% { opacity: 0; transform: translateX(-45%); } 45% { opacity: 1; } 100% { opacity: 0; transform: translateX(45%); } }
.pj-flip::before { content: ""; position: absolute; inset: 6% 4% -2% 4%; border-radius: 20px; background: var(--sombra2); filter: blur(22px); opacity: 0; pointer-events: none; z-index: -1; }
.pj-flip.girando::before { animation: pj-sombra .8s ease-in-out both; }
@keyframes pj-sombra { 50% { opacity: .9; transform: translateY(14px) scale(1.04); } }
.pj-flip.girando .pj-flip-i { animation: pj-levanta .8s var(--pj-flip-ease) both; }
@keyframes pj-levanta { 50% { scale: .985; } }   /* a carta afunda um pouco no meio da volta (a sombra dá a altura): a borda em perspectiva não invade o visor nem a barra */
.pj-cab, .pj-visor { position: relative; z-index: 4; }

/* a troca de disputa (painel.js novoAlvo/trocaEntra): do clique ao resultado, o que está na tela fica, esmaecido (pj-trocando);
   quando o resultado chega, o texto e a identidade antigos saem em 0,26 s (pj-id-sai), trocam de uma vez pelos da disputa nova
   (valores finais) e entram em 0,45 s, enquanto a geometria anda. Só opacity. */
.pj-val { transition: opacity .45s ease; }
#proj.pj-trocando .pj-val, #proj.pj-trocando .pj-np, #proj.pj-trocando .pj-nr, #proj.pj-trocando .pj-chn, #proj.pj-trocando #pj-frase, #proj.pj-trocando #pj-sub2, #proj.pj-trocando #pj-s-h, #proj.pj-trocando #pj-bug-t, #proj.pj-trocando #pj-jan-v, #proj.pj-trocando #pj-s-tx { opacity: .42; }
#proj .pj-np, #proj .pj-nr, #proj .pj-chn, #proj #pj-frase, #proj #pj-sub2, #proj #pj-s-h, #proj #pj-bug-t, #proj #pj-jan-v, #proj #pj-s-tx { transition: opacity .45s ease, color .45s ease; }
.pj-nn, .pj-chl, .pj-n img, .pj-dial-nm { transition: opacity .45s ease, color .45s ease, fill .45s ease, border-color .45s ease; }
#proj.pj-id-sai .pj-nn, #proj.pj-id-sai .pj-chl, #proj.pj-id-sai .pj-n img, #proj.pj-id-sai .pj-dial-nm,
#proj.pj-id-sai .pj-np, #proj.pj-id-sai .pj-nr, #proj.pj-id-sai .pj-chn, #proj.pj-id-sai #pj-frase, #proj.pj-id-sai #pj-sub2, #proj.pj-id-sai #pj-s-h, #proj.pj-id-sai #pj-bug-t, #proj.pj-id-sai #pj-jan-v, #proj.pj-id-sai #pj-s-tx { opacity: 0; transition-duration: .26s; }
/* o verso na troca: a noite da disputa anterior esmaece e a curva nova entra num cross-fade (painel.js desenhaNoite) */
#pj-noite, #pj-nt-h, #pj-nt-sub, #pj-leg-t { transition: opacity .45s ease; }
#proj.pj-nt-troca #pj-noite, #proj.pj-nt-troca #pj-nt-h, #proj.pj-nt-troca #pj-nt-sub, #proj.pj-nt-troca #pj-leg-t { opacity: .2; }
/* os números da escala do mostrador trocam por cross-fade (55/60 → 60/70), nunca contam */
.pj-esc-n { transition: opacity .45s ease; }

/* o carregamento da primeira conta */
.pj-carga { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: var(--pj-carga); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 12px; transition: opacity .6s ease; }
.pj-carga.sai { opacity: 0; }
.pj-carga-c { width: min(560px, calc(100% - 32px)); background: var(--sup); border-radius: 18px; box-shadow: 0 24px 60px -24px var(--sombra2); padding: 26px 28px 22px; text-align: center; }
.pj-carga-c h3 { margin: 14px 0 12px; font-size: 21px; font-weight: 800; text-transform: none; letter-spacing: 0; color: var(--ink); }
.pj-giro { position: relative; width: 64px; height: 64px; margin: 0 auto; }
.pj-giro i { position: absolute; inset: 0; border-radius: 50%; border: 4px solid transparent; border-top-color: var(--pj-ia); animation: pj-gira 1.1s linear infinite; }
.pj-giro i:nth-child(2) { inset: 9px; border-top-color: var(--pj-ia2); animation-duration: .8s; animation-direction: reverse; }
.pj-giro i:nth-child(3) { inset: 18px; border-top-color: #c56bff; animation-duration: .6s; }
@keyframes pj-gira { to { transform: rotate(360deg); } }
#pj-passos { list-style: none; margin: 0; padding: 0; text-align: left; }
#pj-passos li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--linha2); font-size: 15.5px; animation: pj-entra .5s ease both; transition: opacity .6s ease; }
#pj-passos li.ok { opacity: .55; }   /* o já lido esmaece: o olho fica na linha de agora */
#pj-passos li.espera { visibility: hidden; animation: none; }   /* lugar guardado: a linha entra sem empurrar nada */
#pj-passos li.aviso { grid-template-columns: 1fr; color: var(--pj-dif-tx); font-weight: 700; }
#pj-passos .pj-pt { font-weight: 600; color: var(--ink); }
#pj-passos .pj-pd { color: var(--pj-ia); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
#pj-passos .pj-ic { width: 20px; height: 20px; border-radius: 50%; display: inline-block; position: relative; }
#pj-passos li.vai .pj-ic { border: 3px solid var(--pj-alt); border-top-color: var(--pj-ia); animation: pj-gira .8s linear infinite; }
#pj-passos li.ok .pj-ic { background: var(--pj-ia); }
#pj-passos li.ok .pj-ic::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
@keyframes pj-entra { from { opacity: 0; transform: translateY(6px); } }
.pj-carga.pronto .pj-giro i { animation-play-state: paused; }
.pj-pula { margin-top: 8px; border: 0; background: none; color: var(--pj-mute); font: 600 15px "Source Sans 3", sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 8px 14px; min-height: 44px; }
.pj-carga.pronto .pj-pula { visibility: hidden; }
/* depois do carregamento, o painel entra cartão a cartão na ordem de leitura (Admin 21/10 16h55) */
.pj-grade.revela > .pj-c { animation: pj-sobe .6s cubic-bezier(.2, .8, .2, 1) both; }
.pj-grade.revela > .pj-c:nth-child(2) { animation-delay: .25s; }

/* o brilho "mudando" do mapa (st.css), sem trocar a cor do número */
.pj-grade .tw, #pj-sec { transition: color .6s ease, text-shadow .6s ease; }
.pj-grade .mudando, #pj-sec.mudando { text-shadow: 0 0 10px rgba(44, 138, 196, .45); }
.pj-chn.mudando, .pj-np.mudando { text-shadow: 0 0 12px color-mix(in oklab, var(--c) 55%, transparent); }

/* como funciona: cinco etapas lado a lado, cada uma com o número de agora, e a prova */
.pj-como { position: fixed; inset: 0; z-index: 30; background: rgba(20, 18, 30, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; animation: pj-surge .35s ease both; }
.pj-como[hidden] { display: none; }
@keyframes pj-surge { from { opacity: 0; } }
.pj-como-c { position: relative; width: min(1080px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--sup3); border-radius: 20px; padding: 28px 30px 24px; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .55); animation: pj-sobe .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pj-sobe { from { transform: translateY(18px) scale(.985); opacity: 0; } }
.pj-fecha { position: absolute; top: 14px; right: 16px; border: 0; background: var(--sup2); width: 44px; height: 44px; border-radius: 50%; font-size: 24px; cursor: pointer; line-height: 1; color: var(--pj-ink2); }
.pj-fecha:hover { background: var(--trilho); }
.pj-como-h { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; margin: 0 40px 22px 0; }
.pj-como-ic { width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(135deg, #5b3fd0, #8f5bff); display: grid; place-items: center; box-shadow: 0 10px 24px -10px rgba(91, 63, 208, .8); }
.pj-como-ic svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.pj-como-ic svg circle { fill: #fff; stroke: none; }
.pj-como-h h3 { margin: 2px 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.pj-como-h p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--pj-ink2); max-width: 70ch; }
.pj-etapas { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: et; }
.pj-etapas li { position: relative; background: var(--btn); border: 1px solid var(--line); border-radius: 16px; padding: 14px 14px 12px; display: flex; flex-direction: column; }
.pj-etapas li:not(:last-child)::after { content: ""; position: absolute; right: -11px; top: 38px; width: 10px; height: 10px; border-top: 2.5px solid #b9a7ff; border-right: 2.5px solid #b9a7ff; transform: rotate(45deg); z-index: 1; }
.pj-et-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pj-et-n { width: 30px; height: 30px; border-radius: 9px; background: var(--pj-alt); color: var(--pj-ia); font-weight: 800; font-size: 16px; display: grid; place-items: center; }
.pj-et-ic svg { width: 44px; height: 44px; fill: none; stroke: var(--pj-ia); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; display: block; }
.pj-et-ic svg circle { fill: var(--pj-ia2); stroke: none; }
.pj-etapas h4 { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--ink); }
.pj-etapas p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--pj-ink2); }
.pj-etapas .pj-et-v { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--pj-borda); margin-top: 12px; font-size: 14.5px; font-weight: 700; color: var(--pj-ia); }
.pj-prova { background: linear-gradient(150deg, #1d1840, #2c2163 55%, #3b2a8f); color: #fff; border-radius: 16px; padding: 18px 20px; }
.pj-prova h4 { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.pj-prova p { margin: 0 0 12px; font-size: 15.5px; color: rgba(255, 255, 255, .86); }
.pj-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pj-kpis div { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); border-radius: 12px; padding: 10px 12px; }
.pj-kpis b { display: block; font-size: 28px; font-weight: 800; line-height: 1.05; }
.pj-kpis span { display: block; font-size: 14.5px; color: rgba(255, 255, 255, .9); margin-top: 3px; line-height: 1.3; }
.pj-como-n { font-size: 14.5px; color: var(--pj-mute); margin: 12px 2px 0; }
@media (max-width: 980px) { .pj-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pj-etapas li::after { display: none; } }
@media (max-width: 560px) { .pj-como-c { padding: 20px 16px; } .pj-como-h { grid-template-columns: 1fr; margin-right: 34px; } .pj-como-ic { width: 52px; height: 52px; } .pj-etapas, .pj-kpis { grid-template-columns: minmax(0, 1fr); } }

/* movimento reduzido: tudo entra pronto, o giro é seco, nada pisca */
@media (prefers-reduced-motion: reduce) {
  #proj, #mapa, #realce, #lado, #zoom, #vm { transition: none !important; }
  .aba::after, .aba::before { animation: none !important; opacity: 0; }   /* o "*{animation:none}" do st.css não alcança pseudo-elementos (medido 23/10): a aba fica na cor cheia, sem pulso */
  #vm.lendo .pj-led { animation: none; }
  .pj-flip-i, .pj-val, .pj-np, .pj-nr, .pj-nn, .pj-chl, .pj-chn, .pj-n img, .pj-dial-nm, .pj-chb .f, .pj-anel, .pj-sims-c::after, .pj-esc-n, .pj-np::after, #pj-frase, #pj-sub2, #pj-s-h, #pj-bug-t, #pj-jan-v, #pj-s-tx, #pj-noite, #pj-nt-h, #pj-nt-sub, #pj-leg-t { transition: none !important; }
  .pj-flip.girando .pj-face::after, .pj-flip.girando::before, .pj-flip.girando .pj-flip-i, .pj-grade.revela > .pj-c, .pj-visor.vivo .pj-led, .pj-tele.vivo .pj-led2, .pj-calc::before { animation: none !important; }
  .pj-caret { display: none; }
}

/* 1920 (a fonte Navegador do OBS, legível de longe): tudo um pouco maior */
@media (min-width: 1700px) {
  .pj-h { font-size: 28px; } .pj-sub { font-size: 19px; } .pj-np { font-size: 50px; } .pj-nn { font-size: 19px; } .pj-nr { font-size: 17px; } .pj-n img { width: 60px; height: 60px; }
  .pj-chn { font-size: 84px; } .pj-chl { font-size: 20px; } .pj-cht { font-size: 17px; } .pj-chb { height: 28px; }
  .pj-leg { font-size: 16.5px; } .pj-leg-meio { font-size: 16px; } .pj-rot { font-size: 15px; } .pj-tele { font-size: 15px; } .pj-vira { font-size: 17px; min-height: 48px; }
  .pj-visor { min-height: 66px; } .pj-v-msg { font-size: 23px; } .pj-caret { height: 26px; } .pj-v-h, .pj-v-fila { font-size: 15px; }
  .pj-est, .pj-tit p { font-size: 16px; }
  .pj-c, .pj-face { padding: 14px 22px 14px; }
  #proj { left: 74px; }   /* a aba tem 64 px no telão */
}
/* duas colunas: os cartões nunca ficam abaixo de 560 px de altura; se faltar altura (notebook de 768 ou 800 px, com as abas e a
   barra do navegador), o painel rola em vez de espremer o mostrador e as bolinhas (Admin 23/10: em 1366×768 as pilhas viravam
   uma linha, "cada bolinha = 1.236 finais") */
@media (min-width: 901px) and (max-height: 960px) {
  .pj-grade { overflow-y: auto; grid-template-rows: minmax(520px, 1fr);   /* 520 (24/10; eram 560): em 1440×900 sobram 528 px e o pé do cartão (legenda, nomes) ficava escondido atrás da rolagem */
    scrollbar-width: thin; scrollbar-color: var(--line, #dcd8cf) transparent; }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .pj-chn { font-size: 52px; }
}
/* celular: uma coluna, o painel rola; o visor fica no alto com 3 linhas reservadas */
@media (max-width: 900px) {
  #proj { left: 6px; right: 6px; gap: 6px; }
  .pj-cab { flex-wrap: wrap; gap: 4px 10px; padding: 6px 8px; }
  .pj-como-b { padding: 3px 10px; font-size: 14px; }
  .pj-como-b { margin-left: auto; order: 1; }
  .pj-tit { order: 0; flex: 1 1 0; flex-basis: 0; min-width: 0; }   /* sem o "← Mapa", o cabeçalho do painel cabe numa faixa: título à esquerda, "Como funciona" à direita (poupa ~44 px) */
  .pj-tit h2 { font-size: 16px; gap: 6px; }
  .pj-tit h2 svg { width: 22px; height: 22px; }
  .pj-tit p { white-space: normal; font-size: 14px; }
  .pj-est { display: none; }
  .pj-visor { position: sticky; top: 0; z-index: 5; min-height: 0; padding: 8px 12px; flex-wrap: wrap; gap: 6px 10px; }
  .pj-v-msg { flex-basis: 100%; font-size: 16.5px; white-space: normal; height: calc(3 * 1.3 * 16.5px); overflow: hidden; }
  .pj-caret { height: 18px; vertical-align: -3px; }
  .pj-v-h, .pj-v-fila, .pj-led { display: none; }
  .pj-grade { display: flex; flex-direction: column; overflow-y: auto; padding-bottom: 8px; }
  .pj-c { flex: none; padding: 12px 12px 10px; }
  .pj-face { padding: 12px 12px 10px; }
  .pj-flip { height: 600px; } .pj-s { height: 560px; }
  .pj-h { font-size: 21px; } .pj-sub { font-size: 16px; }
  .pj-rot { font-size: 13px; }
  .pj-dial-c { margin: 0 -4px; }
  .pj-nums { gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pj-n { gap: 8px; } .pj-n img { width: 44px; height: 44px; } .pj-np { font-size: 33px; } .pj-nn { font-size: 16px; } .pj-nr { font-size: 14px; }
  .pj-leg-meio { grid-column: 1 / 3; grid-row: 2; flex-direction: row; justify-content: flex-start; gap: 2px 14px; margin-top: 6px; }
  .pj-leg { gap: 2px 14px; font-size: 14px; }
  .pj-chance { gap: 12px; } .pj-chn { font-size: 50px; } .pj-chb { height: 18px; } .pj-cht { font-size: 14px; }
}

/* ------------------------------------------------------------ as ABAS do carrossel (Admin 23/10/2026, 14h: "a troca entre as telas precisa
   ser bem mais chamativa, nas laterais com algo piscante"; "retirar o botão de projeção que fica lá em cima"). Uma aba em cada
   tela, na borda de onde a OUTRA tela vem: na Projeção, "Veja o mapa" na borda ESQUERDA da tela (o mapa sai e volta pela esquerda);
   no mapa, "Veja a projeção" na borda esquerda do painel de resultados — a fronteira do mapa — e, com o painel recolhido ou em
   foco, na borda da tela (a Projeção entra pela direita). São links de verdade (href = o endereço da outra tela; st.js troca na
   mesma página). O chamariz é um PULSO de luz a cada 4 s: um anel que cresce e some em 1,2 s (só transform e opacity) — não é
   pisca-pisca, e nada mais se mexe na aba. O pulso NÃO para (é o "algo piscante" do pedido; parar depois do 1º uso é decisão do
   Admin). A posição vertical é por JS (st.js posAbas: abaixo do puxador do painel, acima do zoom). Movimento reduzido: sem pulso,
   aba fixa na cor cheia. Leitor mais velho: texto de 17 px (19 no telão), alvo de 56 px de largura, cor cheia — a dos botões
   apertados (o mapa) e o roxo da Projeção (o mesmo do botão que saiu do cabeçalho). */
.aba{position:fixed;z-index:4;top:30%;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  width:56px;min-height:232px;padding:18px 0 14px;text-decoration:none;font-weight:800;font-size:17px;letter-spacing:.01em;line-height:1;
  color:var(--aba-tx);background:var(--aba-bg);border:1.5px solid var(--aba-b);border-left:0;border-radius:0 16px 16px 0;
  box-shadow:0 4px 18px var(--sombra2)}
.aba-dir{left:auto;right:410px;border-left:1.5px solid var(--aba-b);border-right:0;border-radius:16px 0 0 16px}   /* 400 px de painel + 10 de margem */
body.recolhido .aba-dir{right:0}   /* painel recolhido (e o modo foco): a aba vai com ele até a borda da tela, no mesmo passo (0,55 s) */
#aba-mapa{--aba-bg:var(--inv);--aba-tx:var(--inv-tx);--aba-b:var(--inv);--aba-halo:var(--acc)}
#aba-proj{--aba-bg:var(--bp-on);--aba-tx:#fff;--aba-b:var(--bp-on);--aba-halo:var(--bp-b-h)}
.aba>svg{width:30px;height:30px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.aba>svg circle{fill:currentColor;stroke:none}
.aba .aba-seta{width:26px;height:26px;stroke-width:2.6}
.aba .aba-tx{writing-mode:vertical-rl;white-space:nowrap}
.aba-esq .aba-tx{transform:rotate(180deg)}   /* na borda esquerda o texto sobe, como a lombada de um livro */
.aba.curta{min-height:0}   /* tela baixa (st.js posAbas): sem o ícone a aba cabe entre o puxador e o zoom */
.aba.curta>svg:first-child{display:none}
/* o pulso (Admin 24/10: "de 10 em 10 segundos", "um efeito mais profissional e elegante" — o anel de borda grossa que crescia, a
   cada 4 s, saiu): a cada 10 s a aba ACENDE de leve (::before, um véu claro de 0 a 14% e de volta, 1,4 s) e uma FAIXA DE LUZ atravessa
   o comprimento dela (::after, um degradê que corre de ponta a ponta em 1,1 s), por dentro — a aba recorta (overflow), nada passa da
   borda nem muda de tamanho. O 1º acende 2,5 s depois de a aba entrar. Só opacity e transform animam (a camada vem pronta) */
.aba{overflow:hidden}
.aba::before{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;animation:aba-acende 10s ease-in-out 2.5s infinite}
.aba::after{content:"";position:absolute;left:0;right:0;top:-45%;height:45%;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.42) 50%,rgba(255,255,255,0));animation:aba-luz 10s cubic-bezier(.45,0,.25,1) 2.5s infinite}
@keyframes aba-acende{0%{opacity:0}6%{opacity:.14}14%{opacity:0}100%{opacity:0}}
@keyframes aba-luz{0%{opacity:0;transform:translateY(0)}1.5%{opacity:1}11%{opacity:1;transform:translateY(330%)}12%{opacity:0;transform:translateY(330%)}100%{opacity:0;transform:translateY(330%)}}
@keyframes aba-luz-h{0%{opacity:0;transform:translateX(0)}1.5%{opacity:1}11%{opacity:1;transform:translateX(360%)}12%{opacity:0;transform:translateX(360%)}100%{opacity:0;transform:translateX(360%)}}
/* a aba de cada tela: a outra some por opacidade (0,3 s) e não recebe foco; a que entra espera o carrossel pousar (0,45 s) */
.aba{transition:opacity .35s ease .45s,visibility 0s linear .45s,transform .3s cubic-bezier(.3,.7,.3,1),right .55s cubic-bezier(.65,0,.35,1)}
body.em-proj .aba-dir,body:not(.em-proj) .aba-esq{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s linear .3s}
body.em-proj .aba-dir::after,body:not(.em-proj) .aba-esq::after,body.em-proj .aba-dir::before,body:not(.em-proj) .aba-esq::before{animation:none}
@media (hover:hover) and (min-width:901px){.aba-esq:hover{transform:translateX(5px)}.aba-dir:hover{transform:translateX(-5px)}}   /* a aba sai um pouco da borda */
.aba:focus-visible{outline:3px solid #ffbf47;outline-offset:3px}
/* 1920 (o telão do OBS, lido de longe) */
@media (min-width:1700px){.aba{width:64px;min-height:262px;font-size:19px;gap:14px}.aba>svg{width:34px;height:34px}.aba .aba-seta{width:28px;height:28px}}
/* celular: as laterais não cabem — a aba vira uma BARRA no pé da tela (52 px, zona do polegar), com o mesmo pulso e as mesmas cores;
   a gaveta de resultados e o painel da Projeção (painel.js geometria) sobem para dar lugar a ela */
@media (max-width:900px){
  .aba,.aba-dir{top:auto;bottom:6px;left:6px;right:6px;width:auto;min-height:0;height:52px;padding:0 16px;flex-direction:row;gap:10px;transform:none;
    border:1.5px solid var(--aba-b);border-radius:12px;font-size:17px}
  body.recolhido .aba-dir{right:6px}
  .aba .aba-tx{writing-mode:horizontal-tb}
  .aba-esq .aba-tx{transform:none}
  .aba-esq .aba-seta{order:-1}
  .aba>svg{width:28px;height:28px}
  .aba::after{top:0;bottom:0;height:auto;left:-40%;right:auto;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.42) 50%,rgba(255,255,255,0));animation-name:aba-luz-h}
  .aba.curta>svg:first-child{display:block}
  body:not(.em-proj) #lado{bottom:64px}
  #dica-sec{top:calc(42vh - 88px)}
}