/* =============================================================================
   BIG SNIPER ÓRBITA · A FESTA E O PODRE DA SEQUÊNCIA (par do /big/cinema/cinema.js, por cima do cinema.css)

   O resultado cresce com a sequência do motor (stats.streak, só a liquidação conta):
   - selo do WIN: .nv1 (1 e 2), .nv2 (3 e 4: o cometa que dá a volta no selo, brilho maior), .nv3 (5+: halo
     duplo, letras com brilho corrido, o multiplicador em chartreuse, o pico raro da paleta);
   - selo do LOSS: .nvp1 a .nvp3 (sóbrio; o "x3" em vermelho fraco);
   - o PODRE que fica enquanto as perdas seguem (1 a 10, --podre 0..1): véu oliva nas bordas, linhas de
     varredura, faixas de falha cada vez mais frequentes e, no inferno, brasa vermelha nas bordas. Leve: o
     centro da tela e a interface continuam legíveis;
   - a CURA: o anel verde que sai do golpe (.cn-cura).
   Cores: docs/paleta.md (verde, menta, chartreuse só no pico; vermelho só na perda; o podre é oliva e
   marrom, cor do mundo 3D apodrecendo, nunca de botão).
   ========================================================================== */

/* ---------------------------------------------------------------- o multiplicador ---- */
.cn-selo .cn-mult { margin-top: 10px; display: grid; justify-items: center; gap: 1px; line-height: 1; }
.cn-selo .cn-mult b { display: block; padding: 6px 12px 5px; font: 400 18px/1 var(--cn-display); letter-spacing: .06em; color: #04130a;
  background: var(--o-menta, #b6ffd4); border-radius: 3px; box-shadow: 0 0 22px color-mix(in srgb, var(--o-menta, #b6ffd4) 55%, transparent); }
.cn-selo .cn-mult small { margin-top: 4px; font: 600 9px/1 var(--cn-titulo); letter-spacing: .32em; text-transform: uppercase; color: var(--cn-texto); opacity: .7; text-shadow: 0 1px 2px #000; }
.cn-selo.nv1 .cn-mult b { padding: 4px 9px 3px; font-size: 14px; color: var(--o-menta, #b6ffd4); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--o-menta, #b6ffd4) 60%, transparent); }
.cn-selo.nv3 .cn-mult b { padding: 8px 18px 7px; font-size: 30px; background: var(--o-chartreuse, #d4f570);
  box-shadow: 0 0 0 2px #04130a, 0 0 0 3px var(--o-chartreuse, #d4f570), 0 0 40px 6px color-mix(in srgb, var(--o-chartreuse, #d4f570) 55%, transparent); }
.cn-selo.perda .cn-mult b { padding: 4px 9px 3px; font-size: 14px; color: #ff9aa4; background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 77, 94, .55); }
.cn-selo.perda .cn-mult small { opacity: .55; }

/* ---------------------------------------------------------------- WIN 3 e 5: o selo cresce ---- */
.cn-selo.nv2 .cn-palavra { text-shadow: 0 0 2px #fff, 0 0 26px var(--cn-cor), 0 0 70px var(--cn-cor), 0 0 140px color-mix(in srgb, var(--cn-cor) 50%, transparent), 0 6px 0 color-mix(in srgb, var(--cn-cor) 40%, #000); }
/* as letras: branco que passa por chartreuse e menta uma a uma (o brilho corre a palavra), sempre opacas */
.cn-selo.nv3 .cn-palavra { font-size: clamp(58px, 11vw, 136px); color: #f6ffe8;
  text-shadow: 0 0 2px #fff, 0 0 22px var(--o-chartreuse, #d4f570), 0 0 60px var(--cn-cor), 0 0 140px color-mix(in srgb, var(--cn-cor) 55%, transparent), 0 6px 0 #06371d; }
.cn-selo.nv3 .cn-palavra > span { animation: cn-brilho-corre 1.5s ease-in-out infinite; }
.cn-selo.nv3 .cn-palavra > span:nth-child(2) { animation-delay: .18s; }
.cn-selo.nv3 .cn-palavra > span:nth-child(3) { animation-delay: .36s; }
@keyframes cn-brilho-corre { 0%, 60%, 100% { color: #f6ffe8; } 20% { color: #d4f570; } 40% { color: #b6ffd4; } }
.cn-selo.nv3 .cn-valor { font-size: clamp(24px, 3.4vw, 40px); color: #eaffd0; text-shadow: 0 0 18px var(--o-chartreuse, #d4f570), 0 0 40px var(--cn-cor), 0 2px 0 rgba(0, 0, 0, .7); }

/* WIN 3: o cometa que dá a volta no selo (o eco da volta da vitória do satélite) */
.cn-selo .cn-cometa { position: absolute; left: 50%; top: 40%; width: 290px; height: 290px; translate: -50% -50%; z-index: -1; border-radius: 50%; display: block;
  background: conic-gradient(from 0deg, transparent 0 62%, color-mix(in srgb, var(--o-menta, #b6ffd4) 30%, transparent) 85%, #fff 99.4%, transparent 99.6%);
  -webkit-mask: radial-gradient(circle, transparent 63%, #000 64%, #000 67%, transparent 68%);
  mask: radial-gradient(circle, transparent 63%, #000 64%, #000 67%, transparent 68%);
  filter: drop-shadow(0 0 10px var(--cn-cor)) drop-shadow(0 0 3px #fff);
  animation: cn-halo 1.6s cubic-bezier(.45, 0, .2, 1) 2 both, cn-halo-entra .5s ease-out both; }
@media (max-width: 640px) { .cn-selo .cn-cometa { width: 230px; height: 230px; } }

/* o mundo atrás acende mais no 3 e no 5: o fundo do selo escurece um pouco mais pra palavra ler */
.cn-selo.nv2::before, .cn-selo.nv3::before { inset: -70px -130px; background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--cn-fundo) 94%, transparent) 0%, color-mix(in srgb, var(--cn-fundo) 74%, transparent) 46%, transparent 74%); }

/* o halo atrás do selo: anel tracejado que gira (dois no WIN 5, em sentidos opostos) */
.cn-selo .cn-halo { position: absolute; left: 50%; top: 40%; width: 300px; height: 300px; translate: -50% -50%; z-index: -1; border-radius: 50%; display: block; opacity: .85;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--cn-cor) 85%, transparent) 0deg 3deg, transparent 3deg 10deg);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 62%, #000 64.5%, transparent 65.5%, transparent 69%, #000 69.5%, #000 70%, transparent 70.6%);
  mask: radial-gradient(circle, transparent 61%, #000 62%, #000 64.5%, transparent 65.5%, transparent 69%, #000 69.5%, #000 70%, transparent 70.6%);
  filter: drop-shadow(0 0 8px var(--cn-cor));
  animation: cn-halo 9s linear infinite, cn-halo-entra .7s cubic-bezier(.16, 1, .3, 1) both; }
.cn-selo .cn-halo.b { width: 420px; height: 420px; opacity: .7; animation-duration: 14s, .9s; animation-direction: reverse, normal;
  background: repeating-conic-gradient(from 0deg, var(--o-chartreuse, #d4f570) 0deg 1.5deg, transparent 1.5deg 6deg, color-mix(in srgb, var(--cn-cor) 70%, transparent) 6deg 7deg, transparent 7deg 15deg);
  filter: drop-shadow(0 0 10px var(--o-chartreuse, #d4f570)); }
@keyframes cn-halo { to { rotate: 360deg; } }
@keyframes cn-halo-entra { from { scale: .3; opacity: 0; } }
.cn-raios.forte > i { filter: brightness(1.5) saturate(1.2); animation-duration: 8s; }

/* ---------------------------------------------------------------- o podre (fica enquanto as perdas seguem) ---- */
/* --podre (0..1) vem do cinema.js (1 a 10 perdas seguidas): o véu oliva cresce, as linhas de varredura
   entram no meio do caminho e, no fim, o vermelho do inferno. O centro da tela fica sempre aberto. */
.cn { --podre: 0; }
.cn-podre { inset: -2%; z-index: 1; opacity: calc(var(--podre) * 1.1); transition: opacity 1.5s ease;
  background:
    radial-gradient(ellipse 80% 70% at 50% 46%, transparent 48%, rgba(42, 38, 10, .5) 80%, rgba(20, 14, 4, .82) 100%),
    radial-gradient(ellipse 60% 40% at 12% 100%, rgba(70, 58, 18, .35), transparent 70%),
    radial-gradient(ellipse 50% 36% at 92% 0%, rgba(58, 40, 14, .3), transparent 70%); }
.cn-podre::after { content: ''; position: absolute; inset: 0; opacity: clamp(0, calc((var(--podre) - .4) * 2), 1); transition: opacity 1.5s ease;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px); }
/* o inferno (9 e 10): brasa vermelha nas bordas, respirando */
.cn-podre::before { content: ''; position: absolute; inset: 0; opacity: clamp(0, calc((var(--podre) - .72) * 3.6), 1); transition: opacity 1.5s ease;
  background: radial-gradient(ellipse 85% 75% at 50% 48%, transparent 52%, rgba(120, 18, 6, .38) 82%, rgba(70, 6, 2, .7) 100%),
    radial-gradient(ellipse 70% 30% at 50% 104%, rgba(255, 70, 20, .22), transparent 70%);
  animation: cn-brasa 3.2s ease-in-out infinite; }
@keyframes cn-brasa { 50% { filter: brightness(1.35); } }

/* as faixas de falha de sinal: raras no 2, frequentes no meio, quase constantes no inferno (sempre rápidas) */
.cn-falha { inset: 0; z-index: 5; opacity: 0;
  background:
    linear-gradient(180deg, transparent 0 18%, rgba(255, 77, 94, .1) 18% 19.2%, transparent 19.2% 61%, rgba(120, 130, 40, .16) 61% 64%, transparent 64% 82%, rgba(255, 255, 255, .06) 82% 82.6%, transparent 82.6%); }
.cn.falha-1 .cn-falha { animation: cn-falha 11s steps(1) infinite; }
.cn.falha-2 .cn-falha { animation: cn-falha 6.2s steps(1) infinite; }
.cn.falha-3 .cn-falha { animation: cn-falha 3.1s steps(1) infinite; }
.cn.falha-agora .cn-falha { animation: cn-falha-forte .6s steps(1) 1; }
@keyframes cn-falha {
  0%, 100% { opacity: 0; transform: none; }
  41% { opacity: 1; transform: translate(-6px, 0); }
  42% { opacity: .7; transform: translate(4px, 12vh); }
  43% { opacity: 0; transform: none; }
  77% { opacity: .85; transform: translate(3px, -20vh) scaleY(1.4); }
  78% { opacity: 0; transform: none; }
}
@keyframes cn-falha-forte {
  0% { opacity: 1; transform: translate(-8px, 0); }
  20% { opacity: .6; transform: translate(6px, -9vh) scaleY(1.5); }
  40% { opacity: 1; transform: translate(-3px, 14vh); }
  60% { opacity: .5; transform: translate(5px, 4vh); }
  80% { opacity: .8; transform: translate(0, -16vh) scaleY(.7); }
  100% { opacity: 0; transform: none; }
}

/* ---------------------------------------------------------------- a cura ---- */
.cn-cura { left: var(--x, 50%); top: var(--y, 44%); width: 260vmax; height: 260vmax; border-radius: 50%; z-index: 3; opacity: 0; transform: translate(-50%, -50%) scale(.1); mix-blend-mode: screen;
  background: radial-gradient(circle, transparent 56%, rgba(25, 229, 122, .1) 62%, rgba(25, 229, 122, .45) 67.5%, rgba(182, 255, 212, .9) 69%, rgba(25, 229, 122, .3) 70%, transparent 71.5%); }

@media (max-width: 640px) {
  .cn-selo .cn-halo { width: 230px; height: 230px; }
  .cn-selo .cn-halo.b { width: 310px; height: 310px; }
  .cn-selo.nv3 .cn-mult b { font-size: 24px; padding: 7px 14px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .cn-selo .cn-halo, .cn-selo.nv3 .cn-palavra > span { animation: none; }
  .cn .cn-falha { animation: none !important; opacity: 0; }
  .cn-podre::before { animation: none; }
  .cn-podre, .cn-podre::after, .cn-podre::before { transition-duration: .4s; }
  .cn-selo .cn-cometa { animation: cn-halo-entra .3s both; }
}