/* =============================================================================
   BIG SNIPER · A CAMADA DE CINEMA (par do /big/cinema/cinema.js)

   A régua é a da Vision (diretor, impacto contado em quadros, antecipação, golpe e continuação) e a
   festa do win da Empire (borda que acende, selo que cai, raios girando, o valor real contando). As
   cores e as fontes vêm do tema (V23_DADOS.tema), em variáveis --cn-*. A voz de display (marca,
   nome, números grandes) é a Michroma (--cn-display), carregada pela página da Órbita.

   Prefixo cn- (o painel da conta usa bc-). Nada aqui segura toque, exceto a porta da abertura e
   o botão Pular.
   ========================================================================== */

.cn, .cn-ab, .cn-lp {
  --cn-fundo: #05060f;
  --cn-cor: #33ffa0;
  --cn-texto: #f2eeff;
  --cn-leve: #a59bc9;
  --cn-borda-cor: #2a2350;
  --cn-ouro: var(--o-chartreuse, #d4f570); /* o pico da paleta (docs/paleta.md): nada de âmbar */
  --cn-perda: #ff3b4e;
  --cn-titulo: "Chakra Petch", system-ui, sans-serif;
  --cn-corpo: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --cn-display: "Michroma", var(--cn-titulo);
  --cn-lb: 0px;
  --cn-ease: cubic-bezier(.16, 1, .3, 1);
  --cn-mola: cubic-bezier(.2, 1.45, .4, 1);
}

.cn { position: fixed; inset: 0; z-index: 9000; pointer-events: none; overflow: hidden; contain: layout paint style; -webkit-user-select: none; user-select: none; }
.cn * { pointer-events: none; }
.cn > i, .cn > canvas { position: absolute; display: block; }
.cn > div { position: absolute; }

/* ---------------------------------------------------------------- barras de cinema ---- */
.cn-bar {
  left: 0; right: 0; height: 13vh; background: #000; z-index: 6;
  transition: transform .75s cubic-bezier(.7, 0, .2, 1);
}
.cn-bar::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cn-cor) 55%, transparent), transparent); opacity: .7; }
.cn-bar-t { top: 0; transform: translateY(-101%); }
.cn-bar-t::after { bottom: 0; }
.cn-bar-b { bottom: 0; transform: translateY(101%); }
.cn-bar-b::after { top: 0; }
.cn.lb .cn-bar-t, .cn.lb .cn-bar-b { transform: none; }
.cn.lb-fino .cn-bar { height: 7vh; }

/* ---------------------------------------------------------------- luz da tela ---- */
.cn-borda { inset: 0; opacity: 0; z-index: 2; --c: var(--cn-cor);
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, var(--c) 85%, transparent),
    inset 0 0 44px 10px color-mix(in srgb, var(--c) 55%, transparent),
    inset 0 0 160px 40px color-mix(in srgb, var(--c) 28%, transparent);
}
.cn-borda.perda { --c: var(--cn-perda); }
.cn-borda.neutra { --c: var(--cn-leve); }
.cn-vinheta { inset: -2%; opacity: 0; z-index: 1; background: radial-gradient(ellipse 70% 62% at 50% 50%, transparent 52%, rgba(0, 0, 0, .72) 100%); }
.cn-vinheta.perda { background: radial-gradient(ellipse 70% 62% at 50% 50%, transparent 46%, color-mix(in srgb, var(--cn-perda) 34%, rgba(0, 0, 0, .7)) 100%); }
.cn-clarao { inset: 0; opacity: 0; z-index: 3; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 46%), rgba(255, 255, 255, .95) 0, color-mix(in srgb, var(--cn-cor) 60%, transparent) 90px, transparent 340px);
}
/* a perda tira a cor da tela por um instante (sóbria, sem festa) */
.cn-cinza { inset: 0; opacity: 0; z-index: 1; backdrop-filter: saturate(.25) brightness(.82); -webkit-backdrop-filter: saturate(.25) brightness(.82); }
/* anéis de choque do golpe */
.cn-anel { left: 50%; top: 44%; width: 180px; height: 180px; border-radius: 50%; opacity: 0; z-index: 3; --c: var(--cn-cor);
  border: 4px solid var(--c); box-shadow: 0 0 24px var(--c), inset 0 0 24px color-mix(in srgb, var(--c) 60%, transparent); transform: translate(-50%, -50%); }

/* a contagem dos últimos 5 s: o número grande e o anel que esvazia em 1 s */
.cn-conta { left: 50%; top: calc(13vh + 2vh); width: 72px; height: 72px; transform: translateX(-50%); z-index: 8; opacity: 0; display: grid; place-items: center; }
.cn-conta svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.cn-conta circle { fill: none; stroke-width: 3; }
.cn-conta .fundo { stroke: color-mix(in srgb, var(--cn-cor) 22%, transparent); fill: color-mix(in srgb, var(--cn-fundo) 55%, transparent); }
.cn-conta .arco { stroke: var(--cn-cor); stroke-linecap: round; filter: drop-shadow(0 0 6px var(--cn-cor)); }
.cn-conta b { position: relative; font: 400 30px/1 var(--cn-display); color: #fff; text-shadow: 0 0 18px var(--cn-cor), 0 2px 0 rgba(0, 0, 0, .6); font-variant-numeric: tabular-nums; }
.cn-conta.quente .arco { stroke: #fff; }
.cn-conta.quente b { text-shadow: 0 0 6px #fff, 0 0 26px var(--cn-cor), 0 0 50px var(--cn-cor); }

/* o quadro de impacto (Empire: duas cores, o do meio invertido), um quadro de cada */
.cn-quadro { inset: 0; opacity: 0; z-index: 4; }
.cn-quadro.q1 { opacity: .9; background: var(--cn-cor); mix-blend-mode: color-dodge; }
.cn-quadro.q2 { opacity: .92; background: #000; }
.cn-quadro.q3 { opacity: 1; background: transparent; backdrop-filter: invert(1) saturate(1.6); -webkit-backdrop-filter: invert(1) saturate(1.6); }
/* linhas de foco do impacto */
.cn-foco { inset: -10%; opacity: 0; z-index: 3;
  background: repeating-conic-gradient(from 3deg at var(--x, 50%) var(--y, 46%), rgba(255, 255, 255, .5) 0 .6deg, transparent .6deg 7deg);
  -webkit-mask-image: radial-gradient(circle at var(--x, 50%) var(--y, 46%), transparent 18%, #000 60%);
  mask-image: radial-gradient(circle at var(--x, 50%) var(--y, 46%), transparent 18%, #000 60%);
}

/* raios girando atrás do selo do resultado */
.cn-raios { left: 50%; top: 44%; width: min(150vmin, 980px); aspect-ratio: 1; translate: -50% -50%; opacity: 0; z-index: 2; }
.cn-raios > i { position: absolute; inset: 0; display: block;
  background: repeating-conic-gradient(from 0deg,
    color-mix(in srgb, var(--cn-cor) 46%, transparent) 0deg 7deg, transparent 7deg 15deg,
    color-mix(in srgb, var(--cn-ouro) 38%, transparent) 15deg 22deg, transparent 22deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .6) 20%, transparent 60%);
  mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .6) 20%, transparent 60%);
  animation: cn-gira 14s linear infinite;
}
@keyframes cn-gira { to { rotate: 360deg; } }

.cn-fx { inset: 0; width: 100%; height: 100%; z-index: 7; }

/* ---------------------------------------------------------------- o letreiro (terço de baixo) ---- */
.cn-card {
  left: 50%; bottom: calc(13vh + 4vh); translate: -50% 0; z-index: 8;
  display: grid; justify-items: center; gap: 5px; min-width: min(440px, 84vw); padding: 11px 22px 13px;
  font-family: var(--cn-corpo); color: var(--cn-texto); text-align: center; opacity: 0;
}
.cn-card .cn-c { position: absolute; width: 16px; height: 16px; border: 2px solid var(--cn-cor); filter: drop-shadow(0 0 6px var(--cn-cor)); }
.cn-card .cn-c.a { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.cn-card .cn-c.b { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.cn-card .cn-c.c { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.cn-card .cn-c.d { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.cn-card.curto { min-width: min(320px, 80vw); }
.cn-card .cn-k { font-size: 10.5px; font-weight: 600; letter-spacing: .42em; text-transform: uppercase; color: var(--cn-cor); text-shadow: 0 0 14px color-mix(in srgb, var(--cn-cor) 70%, transparent); }
.cn-card .cn-g { font-family: var(--cn-display); font-weight: 400; font-size: clamp(20px, 3vw, 38px); line-height: 1.05; letter-spacing: .06em; text-shadow: 0 0 28px color-mix(in srgb, var(--cn-cor) 45%, transparent), 0 2px 0 rgba(0, 0, 0, .6); }
.cn-card .cn-d { display: inline-flex; align-items: center; gap: 10px; font-family: var(--cn-titulo); font-weight: 700; font-size: clamp(12px, 1.2vw, 16px); letter-spacing: .22em; }
.cn-card .cn-d em { font: 600 9px/1 var(--cn-corpo); font-style: normal; letter-spacing: .2em; padding: 3px 6px; color: var(--o-noite, #03100a); background: var(--o-verde, var(--cn-cor)); }
.cn-card .cn-d.compra { color: #3dff9a; text-shadow: 0 0 16px rgba(61, 255, 154, .55); }
.cn-card .cn-d.venda { color: #ff5468; text-shadow: 0 0 16px rgba(255, 84, 104, .55); }
.cn-card .cn-m { font-size: 11px; letter-spacing: .14em; color: var(--cn-leve); text-transform: uppercase; }
.cn-card .cn-traco { position: absolute; left: -18vw; right: -18vw; top: 50%; height: 2px; translate: 0 -50%; opacity: 0; z-index: -1;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cn-cor) 40%, transparent) 30%, #fff 50%, color-mix(in srgb, var(--cn-cor) 40%, transparent) 70%, transparent);
  filter: blur(.4px); box-shadow: 0 0 22px 3px color-mix(in srgb, var(--cn-cor) 55%, transparent);
}
.cn-card .cn-fundo { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, color-mix(in srgb, var(--cn-fundo) 30%, transparent), color-mix(in srgb, var(--cn-fundo) 82%, transparent)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid color-mix(in srgb, var(--cn-cor) 22%, transparent); }

/* ---------------------------------------------------------------- o selo do resultado ---- */
.cn-selo { left: 50%; top: 44%; translate: -50% -50%; z-index: 9; display: grid; justify-items: center; gap: 4px; opacity: 0; text-align: center; transform-origin: 50% 50%; isolation: isolate; }
.cn-selo::before { content: ''; position: absolute; inset: -60px -110px; z-index: -2; background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--cn-fundo) 88%, transparent) 0%, color-mix(in srgb, var(--cn-fundo) 62%, transparent) 42%, transparent 72%); }
.cn-selo .cn-palavra { display: flex; gap: .02em; font-family: var(--cn-display); font-weight: 400; font-size: clamp(46px, 8.6vw, 112px); line-height: 1; letter-spacing: .04em; color: #fff;
  text-shadow: 0 0 2px #fff, 0 0 30px var(--cn-cor), 0 0 80px color-mix(in srgb, var(--cn-cor) 60%, transparent), 0 6px 0 color-mix(in srgb, var(--cn-cor) 40%, #000); }
.cn-selo .cn-palavra > span { display: inline-block; will-change: transform; }
.cn-selo .cn-valor { font-family: var(--cn-display); font-weight: 400; font-size: clamp(20px, 2.8vw, 34px); color: var(--cn-cor); font-variant-numeric: tabular-nums; letter-spacing: .02em;
  text-shadow: 0 0 22px color-mix(in srgb, var(--cn-cor) 60%, transparent), 0 2px 0 rgba(0, 0, 0, .7); }
.cn-selo .cn-sub { font-family: var(--cn-corpo); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--cn-texto); opacity: .78; text-shadow: 0 1px 2px #000; }
.cn-selo .cn-serie { margin-top: 8px; padding: 5px 12px; font-family: var(--cn-titulo); font-weight: 700; font-size: 13px; letter-spacing: .2em; color: #0a0a0a; background: var(--cn-ouro); box-shadow: 0 0 24px color-mix(in srgb, var(--cn-ouro) 60%, transparent); }
.cn-selo .cn-onda { position: absolute; left: 50%; top: 42%; width: 180px; height: 180px; translate: -50% -50%; border: 3px solid var(--cn-cor); border-radius: 50%; opacity: 0; z-index: -1; box-shadow: 0 0 30px var(--cn-cor), inset 0 0 30px var(--cn-cor); }
.cn-selo.perda .cn-palavra { font-size: clamp(36px, 6vw, 78px); color: #ffe9eb; text-shadow: 0 0 22px color-mix(in srgb, var(--cn-perda) 70%, transparent), 0 5px 0 color-mix(in srgb, var(--cn-perda) 35%, #000); }
.cn-selo.perda .cn-valor { color: #ff7d8a; text-shadow: 0 0 16px rgba(255, 59, 78, .45), 0 2px 0 rgba(0, 0, 0, .7); }
.cn-selo.neutro .cn-palavra { font-size: clamp(30px, 5.2vw, 68px); text-shadow: 0 0 22px color-mix(in srgb, var(--cn-leve) 70%, transparent), 0 5px 0 rgba(0, 0, 0, .5); }
.cn-selo.neutro .cn-valor { color: var(--cn-texto); text-shadow: none; font-family: var(--cn-titulo); font-weight: 600; font-size: clamp(16px, 2.2vw, 24px); letter-spacing: .14em; text-transform: uppercase; }
.cn-selo .cn-racha { position: absolute; left: -6%; top: 6%; width: 112%; height: 70%; z-index: 2; overflow: visible; }
.cn-selo .cn-racha path { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255, 59, 78, .9)); }

/* ---------------------------------------------------------------- a abertura ---- */
/* a abertura deixa ver os planos 3D da cena (public/big/orbita/planos.js) sem véu: o fx faz as faixas,
   a exposição e a gradação; aqui só a tipografia, a mira e o grão */
.cn-ab { position: fixed; inset: 0; z-index: 9500; overflow: hidden; color: var(--cn-texto); font-family: var(--cn-corpo); background-color: transparent; }
.cn-ab * { box-sizing: border-box; }
.cn-ab-portaveu { inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 46%, color-mix(in srgb, var(--cn-fundo) 55%, transparent), rgba(0, 0, 0, .9) 75%); backdrop-filter: blur(14px) brightness(.45) saturate(1.2); -webkit-backdrop-filter: blur(14px) brightness(.45) saturate(1.2); }
.cn-ab::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: cn-grao .5s steps(3) infinite; }
@keyframes cn-grao { 33% { background-position: 37px -21px; } 66% { background-position: -53px 41px; } }
.cn-ab > * { position: absolute; }

.cn-ab-porta { inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; cursor: pointer; border: 0; background: transparent; color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
.cn-ab-porta:focus-visible { outline: none; }
.cn-ab-porta:focus-visible .cn-ab-entrar { outline: 2px solid var(--cn-cor); outline-offset: 6px; }
.cn-ab-porta svg { width: 132px; height: 132px; overflow: visible; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--cn-cor) 55%, transparent)); }
.cn-ab-porta .giro { transform-origin: 60px 60px; animation: cn-gira 9s linear infinite; }
.cn-ab-porta .pulso { transform-origin: 60px 60px; animation: cn-pulso 1.6s var(--cn-ease) infinite; }
@keyframes cn-pulso { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.cn-ab-sobre { font-size: 11px; letter-spacing: .5em; text-transform: uppercase; color: var(--cn-leve); padding-left: .5em; }
.cn-ab-titulo { font-family: var(--cn-display); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 5.4vw, 60px); letter-spacing: .12em; line-height: 1; color: #fff; padding-left: .12em; text-shadow: 0 0 30px color-mix(in srgb, var(--cn-cor) 50%, transparent); }
.cn-ab-entrar { display: inline-flex; align-items: center; gap: 12px; padding: 12px 24px; font-family: var(--cn-titulo); font-weight: 700; font-size: 13px; letter-spacing: .3em; color: #050505; background: var(--cn-cor);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  box-shadow: 0 0 40px color-mix(in srgb, var(--cn-cor) 50%, transparent); transition: transform .25s var(--cn-mola), filter .2s; }
.cn-ab-porta:hover .cn-ab-entrar { transform: scale(1.05); filter: brightness(1.12); }
.cn-ab-fone { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .18em; color: var(--cn-leve); text-transform: uppercase; }
.cn-ab-fone svg { width: 16px; height: 16px; filter: none; }
.cn-ab-risco-txt { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 11px; letter-spacing: .08em; color: var(--cn-leve); opacity: .8; padding: 0 16px; }

/* a mira cai no farol (o plano 'alvo' publica a posição dele em --orbita-alvo-x/y no <html>) */
.cn-ab-mira { left: var(--orbita-alvo-x, 50%); top: var(--orbita-alvo-y, 50%); width: min(42vmin, 300px); aspect-ratio: 1; translate: -50% -50%; overflow: visible; opacity: 0; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--cn-cor) 70%, transparent)); }
.cn-ab-mira * { vector-effect: non-scaling-stroke; }
.cn-ab-mira .an { fill: none; stroke: var(--cn-cor); stroke-width: 1.5; }
.cn-ab-mira .fino { fill: none; stroke: color-mix(in srgb, var(--cn-cor) 55%, transparent); stroke-width: 1; }
.cn-ab-mira .cruz { stroke: var(--cn-cor); stroke-width: 1.5; }
.cn-ab-mira .marcas { transform-origin: 100px 100px; }
.cn-ab-mira .ponto { fill: var(--cn-cor); }
.cn-ab-mira.travada { filter: drop-shadow(0 0 12px var(--cn-cor)) drop-shadow(0 0 2px #fff); }
.cn-ab-mira.travada .an, .cn-ab-mira.travada .cruz { stroke: #f2fff8; }
.cn-ab-rotulo { left: var(--orbita-alvo-x, 50%); top: calc(var(--orbita-alvo-y, 50%) + min(25vmin, 172px)); translate: -50% 0; display: grid; justify-items: center; gap: 6px; padding: 8px 14px; opacity: 0; white-space: nowrap; text-align: center;
  background: rgba(0, 8, 5, .55); border-left: 2px solid var(--cn-cor); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.cn-ab-rotulo b { font: 400 11px/1 var(--cn-display); letter-spacing: .36em; padding-left: .36em; text-transform: uppercase; color: #fff; text-shadow: 0 0 12px color-mix(in srgb, var(--cn-cor) 80%, transparent), 0 1px 2px #000; }
.cn-ab-rotulo span { font: 600 10px/1 var(--cn-corpo); letter-spacing: .3em; padding-left: .3em; color: var(--cn-cor); text-shadow: 0 1px 2px #000; }

/* BIG SNIPER nasce do golpe (grande, no centro) */
.cn-ab-golpe { left: 0; right: 0; top: 44%; translate: 0 -50%; display: flex; justify-content: center; opacity: 0;
  font: 400 min(clamp(26px, 8.4vw, 92px), calc(92vw / 11.5)) / 1 var(--cn-display); letter-spacing: .14em; padding-left: .14em; color: #fff; white-space: nowrap;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .8)) drop-shadow(0 0 26px color-mix(in srgb, var(--cn-cor) 75%, transparent)); }
.cn-ab-golpe > span { display: inline-block; opacity: 0; will-change: transform, opacity; }

/* ÓRBITA: gradiente de metal (branco, menta, verde) num texto só, o brilho corre por cima (segunda camada);
   o halo é drop-shadow (sem text-shadow: nada de fantasma) */
.cn-ab-marca { left: 50%; top: 44%; translate: -50% -50%; display: grid; justify-items: center; gap: 14px; width: 100%; text-align: center; }
/* um véu escuro e macio atrás da marca: o título lê por cima de qualquer luz da cena */
.cn-ab-veu { left: 50%; top: 44%; width: min(160vw, 1200px); height: min(46vh, 380px); translate: -50% -50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 5, 3, .66), rgba(0, 5, 3, .36) 48%, transparent); }
.cn-ab-big { font: 400 clamp(10px, 2.6vw, 15px)/1 var(--cn-display); letter-spacing: .62em; padding-left: .62em; text-transform: uppercase; color: var(--cn-cor); opacity: 0; text-shadow: 0 0 14px color-mix(in srgb, var(--cn-cor) 60%, transparent); }
.cn-ab-nome { position: relative; font-family: var(--cn-display); font-weight: 400; text-transform: uppercase; font-size: clamp(40px, 13vw, 128px); line-height: 1.1; letter-spacing: .13em; padding-left: .13em; opacity: 0; white-space: nowrap;
  color: transparent; -webkit-text-fill-color: transparent;
  background-image: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%), linear-gradient(180deg, #ffffff 0%, #f0fff6 34%, #8dffc2 64%, #19e57a 100%);
  background-size: 300% 100%, 100% 100%; background-position: 0 0, 0 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 22px rgba(51, 255, 160, .45)); }
.cn-ab-tipo { display: flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; color: var(--cn-cor); opacity: 0; }
.cn-ab-tipo i { display: block; width: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cn-cor)); }
.cn-ab-tipo i:last-child { background: linear-gradient(270deg, transparent, var(--cn-cor)); }
/* o risco de luz (flare anamórfico de DOM) atravessa a tela no nome */
.cn-ab-traco { left: -30%; right: -30%; top: 44%; height: 2px; translate: 0 -50%; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cn-cor) 55%, transparent) 22%, #fff 50%, color-mix(in srgb, var(--cn-cor) 55%, transparent) 78%, transparent);
  box-shadow: 0 0 18px 4px color-mix(in srgb, var(--cn-cor) 65%, transparent), 0 0 70px 18px color-mix(in srgb, var(--cn-cor) 22%, transparent); }
.cn-ab-pular { right: 16px; bottom: calc(6vh + 12px + env(safe-area-inset-bottom)); z-index: 3; padding: 9px 14px; border: 1px solid color-mix(in srgb, var(--cn-texto) 28%, transparent); background: rgba(0, 0, 0, .4); color: var(--cn-texto); font: 600 11px/1 var(--cn-corpo); letter-spacing: .24em; text-transform: uppercase; cursor: pointer; opacity: 0; transition: opacity .4s, background .2s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cn-ab-pular.on { opacity: .8; }
.cn-ab-pular:hover { background: rgba(255, 255, 255, .12); opacity: 1; }

/* a tela da ferramenta entra depois da abertura */
body.cn-hud-oculto > *:not(.cn):not(.cn-ab):not(canvas):not(script) { opacity: 0 !important; }
body.cn-hud-entra > *:not(.cn):not(.cn-ab):not(canvas):not(script) { transition: opacity .9s var(--cn-ease, ease); }

/* ---------------------------------------------------------------- a vitrine (a landing) ---- */
/* sem sessão a ferramenta é a própria landing: só a cena 3D (os canvas) e a camada de cinema aparecem */
html.vitrine body * { visibility: hidden !important; }
html.vitrine body canvas, html.vitrine .cn, html.vitrine .cn *, html.vitrine .cn-ab, html.vitrine .cn-ab *,
html.vitrine .cn-lp, html.vitrine .cn-lp *, html.vitrine .cn-lp-veu { visibility: visible !important; }
/* a cena sobe e divide a tela com a capa: é a própria câmera 3D que desloca a lente (19-globo.html,
   aplicarOffset). Nunca um transform de CSS no canvas: recriar a camada do canvas gigante congela a imagem. */

.cn-lp { position: fixed; inset: 0; z-index: 9400; pointer-events: none; display: grid; align-content: end; justify-items: center;
  padding: 0 18px max(18px, env(safe-area-inset-bottom)); color: var(--cn-texto); font-family: var(--cn-corpo);
  background: linear-gradient(0deg, var(--cn-fundo) 0%, color-mix(in srgb, var(--cn-fundo) 90%, transparent) 20%, color-mix(in srgb, var(--cn-fundo) 55%, transparent) 36%, transparent 56%); }
.cn-lp a, .cn-lp button { pointer-events: auto; }
.cn-lp-centro { display: grid; justify-items: center; gap: 14px; text-align: center; margin-bottom: 4vh; min-width: 0; max-width: 100%; }
.cn-lp-sobre { font: 400 11px/1 var(--cn-display); letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; color: var(--cn-cor); text-shadow: 0 0 14px color-mix(in srgb, var(--cn-cor) 60%, transparent), 0 1px 3px #000; }
.cn-lp-nome { margin: 0; display: flex; justify-content: center; font: 400 clamp(40px, 7vw, 104px)/1 var(--cn-display); text-transform: uppercase; letter-spacing: .06em; padding-left: .06em; color: #fff; white-space: nowrap;
  text-shadow: 0 0 2px #fff, 0 0 36px var(--cn-cor), 0 0 110px color-mix(in srgb, var(--cn-cor) 55%, transparent), 0 6px 0 rgba(0, 0, 0, .5); }
.cn-lp-nome > span { display: inline-block; transform-origin: 50% 100%; }
.cn-lp-linha { margin: 0; max-width: 30ch; font: 500 clamp(14px, 1.3vw, 18px)/1.35 var(--cn-corpo); color: color-mix(in srgb, var(--cn-texto) 88%, transparent); text-shadow: 0 1px 6px #000; }
.cn-lp-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.cn-lp-btn, .cn-lp-btn2 { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: clamp(44px, 5.4vh, 50px); padding: 0 26px; text-decoration: none;
  font: 700 13px/1 var(--cn-titulo); letter-spacing: .16em; text-transform: uppercase; overflow: hidden; isolation: isolate;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); transition: transform .3s cubic-bezier(.2, 1.45, .4, 1), filter .2s; }
.cn-lp-btn { color: #050505; background: linear-gradient(180deg, color-mix(in srgb, var(--cn-cor) 72%, #fff), var(--cn-cor)); box-shadow: 0 0 44px -6px var(--cn-cor); }
.cn-lp-btn::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .6) 48%, transparent 66%); translate: -120% 0; animation: cn-brilho 4s cubic-bezier(.16, 1, .3, 1) infinite 2s; }
@keyframes cn-brilho { 0%, 70% { translate: -120% 0; } 100% { translate: 120% 0; } }
.cn-lp-btn2 { color: var(--cn-texto); background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cn-cor) 45%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cn-lp-btn:hover, .cn-lp-btn2:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.1); }
.cn-lp-btn:focus-visible, .cn-lp-btn2:focus-visible, .cn-lp-som:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.cn-lp-pe { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 10px; letter-spacing: .08em; color: color-mix(in srgb, var(--cn-leve) 70%, transparent); text-shadow: 0 1px 3px #000; }
.cn-lp-pe a { color: inherit; text-underline-offset: 3px; }
.cn-lp-som { position: fixed; right: max(16px, env(safe-area-inset-right)); top: max(16px, env(safe-area-inset-top)); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  color: var(--cn-texto); background: rgba(0, 0, 0, .45); border: 1px solid color-mix(in srgb, var(--cn-cor) 35%, transparent); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cn-lp-som svg { width: 16px; height: 16px; }
.cn-lp-veu { position: fixed; inset: 0; z-index: 9800; background: #000; pointer-events: none; opacity: 0; }

@media (max-width: 640px) {
  .cn-bar { height: 10vh; }
  .cn-lp-nome { font-size: clamp(32px, 10.5vw, 60px); }
  .cn-lp-acoes { flex-direction: column; gap: 8px; width: min(320px, 100%); }
  .cn-lp-btn, .cn-lp-btn2 { min-height: 44px; }
  .cn-lp-btn, .cn-lp-btn2 { width: 100%; }
  .cn-lp-centro { margin-bottom: 2vh; gap: 12px; width: 100%; }
  .cn-conta { width: 60px; height: 60px; top: calc(10vh + 10px); }
  .cn-conta b { font-size: 24px; }
  .cn-card { bottom: calc(10vh + 3vh); padding: 9px 16px 11px; }
  .cn-ab-pular { right: 12px; }
  .cn-ab-big { letter-spacing: .5em; padding-left: .5em; }
}
@media (prefers-reduced-motion: reduce) {
  .cn-raios > i, .cn-ab-porta .giro, .cn-ab-porta .pulso, .cn-ab::after, .cn-lp-btn::after { animation: none; }
  .cn-bar { transition-duration: .2s; }
}

/* MODO PRO (o painel do gráfico aberto, public/big/grafico.js): a camada de cinema da operação some por baixo
   do painel (letreiro, selo, confete, contagem); o som continua e o painel marca a entrada e o resultado */
html.modo-pro .cn { opacity: 0; transition: opacity .25s; }

/* ZONAS (a tela marca as variáveis, 19-globo.html): o cinema nunca cobre a faixa da operação, os avisos ou o
   console. O letreiro (só na entrada) e a contagem (só nos últimos 5 s) dividem a zona no tempo.
   Celular (html.cn-zonas): logo abaixo do topo, acima do alvo; embaixo moram avisos, faixa e console.
   Computador (html.cn-zonas-pe): o terço de baixo, centrado no espaço à direita do console. */
html.cn-zonas .cn-card { top: var(--cn-zona-topo, 96px); bottom: auto !important; }
html.cn-zonas .cn-conta { top: var(--cn-zona-topo, 96px); }
html.cn-zonas-pe .cn-card { left: var(--cn-zona-x, 50%); bottom: var(--cn-zona-pe, 24px) !important; min-width: min(420px, 46vw); }
html.cn-zonas-pe .cn-conta { left: var(--cn-zona-x, 50%); top: auto; bottom: calc(var(--cn-zona-pe, 24px) + 20px); }