/* CENA 10 · O RADAR DO REINO ("A IA puxa o fio.") — o palco largo da rede; a luz é a do capítulo (--luz = imperador), as tinturas
   das Guildas nas nebulosas, nos halos e nas faíscas do estouro. Quatro camadas: o fundo estático (SVG), o feixe que só gira
   (transform), a luz (canvas: nós, halos, estouros, pulso) e a teia (SVG: fios e rostos). Nada de filtro no que anima. */
.radar-ia { display: grid; justify-items: center; row-gap: clamp(6px, 1.2vh, 14px); width: min(94vw, 1180px); }
.palco-ia { position: relative; width: 100%; height: clamp(300px, 47vh, 520px); }
.palco-ia > svg, .palco-ia > .luz-ia { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fundo-ia, .feixe-ia, .teia-ia, .luz-ia { will-change: transform; }
/* o golpe de luz de cada estouro: um véu da tocha que só muda de opacidade (o JS escreve a opacidade dele, e só dele) */
.palco-ia .veu-ia { position: absolute; inset: -6% -4%; pointer-events: none; opacity: 0; will-change: opacity;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--luz) 70%, transparent), transparent 70%); }

/* o radar: um disco cônico (rastro que esmaece atrás da borda acesa), achatado na elipse pelo JS e girado por transform */
.feixe-ia { position: absolute; border-radius: 50%; pointer-events: none; transform-origin: 50% 50%;
  background: conic-gradient(from 0deg, transparent 0deg 292deg, color-mix(in srgb, var(--traco-luz) 10%, transparent) 318deg,
    color-mix(in srgb, var(--traco-luz) 34%, transparent) 350deg, color-mix(in srgb, var(--traco-luz) 62%, transparent) 358.6deg,
    rgba(239, 228, 204, .95) 359.3deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, .85) 70%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, .85) 70%, transparent 100%); }

/* os gradientes: a aura do capítulo, o clarão do estouro, a nebulosa e o halo de cada tintura */
.palco-ia .gl.s0 { stop-color: var(--luz); stop-opacity: .75; }
.palco-ia .gl.s1 { stop-color: var(--luz); stop-opacity: .28; }
.palco-ia .gl.s2 { stop-color: var(--luz); stop-opacity: 0; }
.palco-ia .gf.s0 { stop-color: #fffaf0; stop-opacity: 1; }
.palco-ia .gf.s1 { stop-color: color-mix(in oklab, var(--traco-luz) 55%, var(--marfim)); stop-opacity: .62; }
.palco-ia .gf.s2 { stop-color: var(--luz); stop-opacity: 0; }
/* as tinturas (nebulosa de cada Guilda, halo, núcleo, elo, faísca) são resolvidas UMA vez no cena10.js como a tintura heráldica
   acesa — a mesma matiz, mais luz e croma — e escritas como atributo: nada de cor relativa recalculada no quadro */

/* o chão do radar */
.fundo-ia .anel-radar { fill: none; stroke: rgba(184, 146, 63, .3); stroke-width: 1; stroke-dasharray: 2 7; }
.fundo-ia .elo { stroke-width: 1; stroke-opacity: .45; }


/* o empresário: o rosto do REINO no centro, com o anel da IA girando em volta */
.teia-ia .rosto-o, .teia-ia .rosto-no { fill: none; stroke: var(--marfim); stroke-width: 2.4; }
.teia-ia .rosto-o .aro { stroke: var(--folha); stroke-width: 2.2; fill: rgba(5, 4, 8, .9); }
.teia-ia .rosto-no .aro { stroke: var(--folha); stroke-width: 2.8; }
/* o terceiro da cadeia é o clímax da cena: o anel na luz do capítulo, acesa */
.teia-ia .rosto-no.climax .aro { stroke-width: 3.4; }
.teia-ia .anel-ia { fill: none; stroke: color-mix(in oklab, var(--traco-luz) 50%, var(--marfim)); stroke-width: 1.6; stroke-dasharray: 3 9; stroke-linecap: round; }

/* o fio: a luz larga embaixo, o núcleo em cima; frouxo é lilás apagado, esticado é marfim (a cor da tensão vem do JS); o fluxo de traços
   corre do empresário para fora quando a cadeia fecha */
.teia-ia .fio-brilho, .teia-ia .fio-nucleo, .teia-ia .fio-fluxo { fill: none; stroke-linecap: round; }
.teia-ia .fio-brilho, .teia-ia .fio-nucleo { stroke-dasharray: 1; }
.teia-ia .fio-brilho { stroke-width: 14; }
.teia-ia .extra .fio-nucleo { stroke-opacity: .85; }
.teia-ia .fio-fluxo { stroke: #fffaf0; stroke-width: 2.6; stroke-dasharray: .018 .07; }


/* a legenda acende quando a cadeia fecha */
.radar-ia .legenda-fio { transition: text-shadow .6s var(--curva), color .6s var(--curva); }
.radar-ia .legenda-fio.aceso { color: #e3cf97; text-shadow: var(--halo), 0 0 18px var(--brilho); }

@media (max-width: 720px) {
  .radar-ia { width: 100vw; }
  .feixe-ia { opacity: .38; }
  .teia-ia .fio-brilho { stroke-width: 9; }
  .palco-ia { height: clamp(300px, 50vh, 500px); }
}