/* O nome estilizado do VIP (docs/specs/player-identity.md §4.5.1): as regras que DESENHAM o que o pintor marca
   (`ui/widgets/styledName.js › paintName`: `data-ns-color` o id da cor, `data-ns-font` e `data-ns-fx` a key, `data-ns-text` o
   texto que o Cintilar repete, `--ns-phase` a fase). As cores e os números do Cintilar vêm do DADO, no
   `<style id="name-style-styles">` que o `js/main.js` gera (`game/state/nameStyle.js › nameStyleCss`): `--ns-c` a letra,
   `--ns-ring` o anel, `--ns-glow` o halo, `--ns-shimmer`/`--ns-period`/`--ns-stripe` a faixa e o `@keyframes ns-shimmer`.
   Nenhum hex aqui.

   `!important` SÓ em color, font-weight, font-style, text-transform e text-shadow dos marcados: o estilo de OUTRO jogador vence a
   cor da superfície (o ouro do 1.º lugar no ranking, o do líder no clã). O PRÓPRIO nome nunca chega marcado — quem pinta não passa
   o `ns` dele, e o verde do chat e o ouro de sempre ficam (decisão do dono `nome-proprio`, §4.5.4); só a prévia da aba Estilo pinta.
   Nunca `display: inline-block` (a reticência do `.rank-name` e afins continua). Fonte = os cortes da `--font-ui` (§4.5.1). */

[data-ns-color] {
  color: var(--ns-c) !important;
}

[data-ns-font="bold"] {
  font-weight: 700 !important;
}

[data-ns-font="italic"] {
  font-style: italic !important;
}

[data-ns-font="caps"] {
  text-transform: uppercase !important;
}

/* Brilho: o halo da própria cor, 2 e 1 px de arte a `fx.glowAlpha`. O Cintilar é o Brilho + a faixa. */
[data-ns-fx="glow"],
[data-ns-fx="shimmer"] {
  text-shadow: 0 0 2px var(--ns-glow), 0 0 1px var(--ns-glow) !important;
}

/* Contorno: o anel de 8 vizinhos no `ring` da cor. */
[data-ns-fx="outline"] {
  text-shadow:
    1px 0 0 var(--ns-ring), -1px 0 0 var(--ns-ring), 0 1px 0 var(--ns-ring), 0 -1px 0 var(--ns-ring),
    1px 1px 0 var(--ns-ring), -1px -1px 0 var(--ns-ring), 1px -1px 0 var(--ns-ring), -1px 1px 0 var(--ns-ring) !important;
}

/* Cintilar: o `::after` repete o nome por cima, transparente, e só a faixa (o fundo recortado na letra) aparece, cruzando o nome
   em `fx.shimmerPassMs` a cada `fx.shimmerPeriodMs`; todos os nomes em fase (o atraso negativo `--ns-phase`). O `:where()` não
   pesa: a superfície que já posiciona o nome (absolute, relative) continua mandando. */
:where([data-ns-fx="shimmer"]) {
  position: relative;
}

[data-ns-fx="shimmer"]::after {
  /* o texto alternativo vazio: o leitor de tela não lê "Kael Kael". Navegador sem a sintaxe descarta a declaração inteira, o
     `::after` não nasce e fica o Brilho (§4.5 ataques) — por isso NÃO há um `content` sem o `/ ""` antes deste. */
  content: attr(data-ns-text) / "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding: inherit;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: inherit;
  pointer-events: none;
  color: transparent;
  text-shadow: none;
  background-image: linear-gradient(90deg, transparent, var(--ns-shimmer), transparent);
  background-size: var(--ns-stripe) 100%;
  background-repeat: no-repeat;
  background-position: calc(0px - var(--ns-stripe)) 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: ns-shimmer var(--ns-period) linear infinite;
  animation-delay: var(--ns-phase, 0ms);
}

/* Movimento reduzido: o Cintilar parado = o Brilho (sem o `::after`), aqui e na placa da arena. */
@media (prefers-reduced-motion: reduce) {
  [data-ns-fx="shimmer"]::after {
    content: none;
    animation: none;
  }
}