/* ══════════════════════════════════════════════════════════════════════════
 * PowerAdmin · POWER SKINS  —  cuatro identidades núcleo, tres capas físicas
 * ══════════════════════════════════════════════════════════════════════════
 * RONDA 51.  Acompaña a assets/js/core/power-skin-fx.js, que publica las
 * texturas de ruido Perlin como --skin-noise / --skin-noise-fina.
 *
 * ──────────────────────────────────────────────────────────────────────────
 * POR QUÉ LAS CUATRO SKINS SE VEÍAN IGUALES DURANTE CUATRO RONDAS
 * ──────────────────────────────────────────────────────────────────────────
 * No era el color ni el esfuerzo. Eran DOS causas, ambas medidas en disco:
 *
 * 1. EL GENERADOR. Todo salía de `repeating-linear-gradient` /
 *    `repeating-radial-gradient`: primitivos PERIÓDICOS. Mármol, circuitos,
 *    escarcha y tejido son aperiódicos. Sin ruido en la fórmula, lo único
 *    que quedaba por cambiar era el tinte — un palette swap por definición.
 *    Lo resuelve `feTurbulence` (ruido Perlin nativo) vía power-skin-fx.js.
 *
 * 2. LA CASCADA. `assets/css/power-ui.css` ya pinta `body.power-hud::before`
 *    con una rejilla de 32/48 px y `!important`, para TODA skin (líneas
 *    ~1106, ~6308 y siguientes; para `mint` hay incluso dos bloques que
 *    compiten entre sí, gana el último). Especificidad (0,2,3) + !important.
 *    Cada textura que escribí en perfil.html durante las Rondas 46–49 perdía
 *    contra eso en silencio: se pintaba, y la rejilla seguía encima. Ésa es
 *    la «misma rejilla teñida de siempre», y vive en el archivo que la
 *    directriz del proyecto prohíbe modificar.
 *
 * ──────────────────────────────────────────────────────────────────────────
 * CÓMO SE GANA LA CASCADA SIN TOCAR power-ui.css
 * ──────────────────────────────────────────────────────────────────────────
 * `data-power-fx` lo escribe power-skin-fx.js en <html>. No es decorativo:
 * es el gancho de especificidad. `html[data-power-fx][data-power-accent]`
 * pesa (0,3,3) y `html[data-power-fx="x"][data-power-accent="y"]` (0,4,3),
 * los dos por encima del (0,2,3) heredado. NO se empata a propósito: empatar
 * y confiar en el orden de los archivos es el defecto que se repitió tres
 * veces en este proyecto (Rondas 42, 46 y 48). Además deja un interruptor:
 * quitar el atributo restaura la apariencia anterior sin tocar CSS.
 *
 * ──────────────────────────────────────────────────────────────────────────
 * LAS TRES CAPAS
 * ──────────────────────────────────────────────────────────────────────────
 *   plano 0  body                — base: color y degradado. No se anima.
 *   plano 1  body.power-hud::before — EL MATERIAL. Ruido Perlin compuesto con
 *                                   background-blend-mode. Deriva lentísima.
 *   plano 2  body.power-hud::after  — LA VIDA. Lo que se mueve. Sólo
 *                                   transform / opacity.
 *
 * Los dos pseudoelementos ya son `position:fixed; inset:0; z-index:0` por
 * power-ui.css, y esa misma hoja eleva cada hijo directo del body a z-index 1
 * — por eso ambos planos quedan DETRÁS del contenido sin necesidad de
 * z-index negativos, que con el fondo del body propagado al lienzo raíz
 * habrían quedado invisibles.
 *
 * ──────────────────────────────────────────────────────────────────────────
 * SEGURIDAD FOTOSENSIBLE (WCAG 2.3.1) — NO NEGOCIABLE
 * ──────────────────────────────────────────────────────────────────────────
 * Ningún bucle infinito por debajo de 2.4 s (≤ 0.42 Hz). Cero estrobo.
 * El mandato pide «parpadeo en micro-frecuencias» para los tubos de neón:
 * un parpadeo real serían 3–6 destellos por segundo, justo en la banda que
 * dispara crisis. Se implementa como ENCENDIDO — una rampa única con
 * sobreimpulso, un solo evento, sin ciclos. Se ve como un tubo prendiendo;
 * no hay forma segura de verse como uno fallando.
 *
 * RENDIMIENTO
 * Nunca se anima `background-position` (repinta cada fotograma) ni
 * `box-shadow` en bucle. Sólo transform / opacity / filter, en capas con
 * pointer-events:none. El SVG de ruido se rasteriza una vez por skin.
 * ════════════════════════════════════════════════════════════════════════ */

@property --pw-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* ══════════════════════════════════════════════════════════════════════════
 * 0 · NEUTRALIZACIÓN DE LA REJILLA HEREDADA
 * ──────────────────────────────────────────────────────────────────────────
 * Un solo bloque para las cuatro. Hay que apagar TODO lo que power-ui.css
 * declara con !important en esos pseudoelementos —imagen, tamaño, repetición,
 * posición y animación—: dejar una sola de esas propiedades viva basta para
 * que la rejilla reaparezca, y con `background-size` heredado a 32px la
 * textura nueva saldría recortada en mosaicos.
 * ════════════════════════════════════════════════════════════════════════ */
/* EL PLANO 0 TAMBIÉN. Omitirlo la primera vez produjo el defecto más
   instructivo de la ronda: `body` conservaba `background-size: 32px 32px` de
   power-ui.css, así que MI degradado de base salía embaldosado en cuadros de
   32 px. La rejilla que se veía en la captura no la pintaba el CSS viejo —
   la pintaba el nuevo, recortado por una propiedad vieja. Un `background-image`
   propio no basta: hay que reclamar TODO el grupo `background-*`. */
html[data-power-fx][data-power-accent] body.power-hud {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-blend-mode: normal !important;
  animation: none !important;
}

html[data-power-fx][data-power-accent] body.power-hud::before,
html[data-power-fx][data-power-accent] body.power-hud::after {
  background-image: none !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-attachment: scroll !important;
  background-blend-mode: normal !important;
  animation: none !important;
  opacity: 1;
  transform: none;
  will-change: transform, opacity;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 1 · POWER  —  «Celda de alto voltaje»
 * ──────────────────────────────────────────────────────────────────────────
 * Invariante de marca. El perfil entero es el reactor: núcleo concéntrico
 * al centro, grano eléctrico encima, y la tarjeta de ID como la celda.
 * Estructura del ruido: `turbulence` de frecuencia media → filamentos, no
 * nubes. Es lo que lee como plasma y no como piedra.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud {
  background-color: #07030a !important;
  background-image:
    radial-gradient(125% 88% at 50% 34%, rgba(255, 59, 48, 0.24), transparent 62%),
    radial-gradient(95% 70% at 50% 112%, rgba(255, 138, 40, 0.13), transparent 60%),
    linear-gradient(180deg, #0d0406 0%, #050103 72%) !important;
  background-attachment: fixed !important;
}

/* plano 1 · material: núcleo + grano eléctrico. `screen` sube el ruido sobre
   el rojo sin lavarlo; `overlay` en el grano fino conserva los negros. */
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud::before {
  background-image:
    var(--skin-noise-fina, none),
    var(--skin-noise, none),
    radial-gradient(62% 56% at 50% 40%, rgba(255, 59, 48, 0.36), transparent 72%) !important;
  background-size: 260px 260px, cover, cover !important;
  background-repeat: repeat, no-repeat, no-repeat !important;
  background-blend-mode: overlay, screen, normal !important;
  opacity: 0.9;
  animation: pwReactorBreath 6.4s ease-in-out infinite !important;
}
@keyframes pwReactorBreath {
  0%, 100% { opacity: 0.72; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.035); }
}

/* plano 2 · vida: dos anillos de carga concéntricos y partículas finas.
   Son DOS anillos con parada dura, no una malla repetida: la diferencia
   entre un reactor y un papel cuadriculado teñido de rojo. */
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud::after {
  background-image:
    radial-gradient(circle at 50% 42%, transparent 0 21.4%, rgba(255, 59, 48, 0.30) 21.8% 22.4%, transparent 22.9% 100%),
    radial-gradient(circle at 50% 42%, transparent 0 37.6%, rgba(255, 146, 72, 0.20) 38% 38.7%, transparent 39.2% 100%),
    var(--skin-noise-fina, none) !important;
  background-size: cover, cover, 260px 260px !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  background-blend-mode: screen, screen, overlay !important;
  opacity: 0.85;
  animation: pwChargePulse 5.2s ease-in-out infinite !important;
}
@keyframes pwChargePulse {
  0%   { transform: scale(0.94); opacity: 0.45; }
  55%  { transform: scale(1.06); opacity: 0.9; }
  100% { transform: scale(1.16); opacity: 0; }
}

/* Tarjeta de ID · borde cónico de neón líquido oro/rojo sobre bisel metálico.
   El anillo gira bajo una máscara que sólo deja ver el contorno: es un borde
   RECORRIDO por luz, no un borde que parpadea. */
html[data-power-fx="reactor"][data-power-accent="power"] .pf-hero,
html[data-power-fx="reactor"][data-power-accent="power"] .pf-section {
  position: relative;
  border: 1px solid transparent !important;
  border-radius: 1.15rem;
  background:
    linear-gradient(168deg, #140508 0%, #090204 62%) padding-box,
    conic-gradient(from var(--pw-ang),
      rgba(255, 59, 48, 0.10) 0turn,
      /* RONDA 64 · El oro del borde líquido pasa a blanco incandescente:
         mismo papel —el punto caliente que recorre el contorno— sin salir de
         la paleta roja. #ff6b63 es #FF1E27 abierto, no un amarillo. */
      #ff3b30 0.08turn,
      #ff6b63 0.115turn,
      #ffffff 0.132turn,
      #ff6b63 0.15turn,
      #ff3b30 0.185turn,
      rgba(255, 59, 48, 0.10) 0.36turn,
      rgba(255, 59, 48, 0.10) 1turn) border-box !important;
  box-shadow:
    0 20px 48px -20px rgba(255, 59, 48, 0.7),
    inset 0 1px 0 rgba(255, 235, 235, 0.22),
    inset 0 -18px 42px -26px rgba(255, 59, 48, 0.85);
  animation: pwLiquidEdge 5.6s linear infinite;
  overflow: hidden;
}
@keyframes pwLiquidEdge { to { --pw-ang: 360deg; } }

/* Pulso del núcleo DENTRO de la tarjeta: la celda tiene carga propia. */
html[data-power-fx="reactor"][data-power-accent="power"] .pf-hero::before,
html[data-power-fx="reactor"][data-power-accent="power"] .pf-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(58% 70% at 50% 108%, rgba(255, 59, 48, 0.30), transparent 70%),
    var(--skin-noise-fina, none);
  background-size: cover, 260px 260px;
  background-blend-mode: normal, overlay;
  opacity: 0.8;
  animation: pwCellCore 4.8s ease-in-out infinite;
}
@keyframes pwCellCore {
  0%, 100% { opacity: 0.55; transform: translate3d(0, 4%, 0); }
  50%      { opacity: 0.95; transform: translate3d(0, 0, 0); }
}
html[data-power-fx="reactor"][data-power-accent="power"] .pf-hero > *,
html[data-power-fx="reactor"][data-power-accent="power"] .pf-section > * {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 2 · NEON OVERDRIVE  —  trama CRT y láseres en ángulo recto
 * ──────────────────────────────────────────────────────────────────────────
 * Sustituye por completo al patrón tipo radar de la Ronda 49.
 * La trama CRT sí es periódica — es una trama de barrido, que es lo que el
 * mandato pide — pero es de 3 px en UN eje y va MODULADA por ruido en
 * `multiply`: no queda plana. Es estructuralmente otra cosa que una malla
 * de 32 px en dos ejes, y no se parece a ninguna de las otras tres.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-power-fx="overdrive"][data-power-accent="neon"] body.power-hud {
  background-color: #010604 !important;
  background-image:
    radial-gradient(110% 75% at 50% 0%, rgba(48, 255, 20, 0.16), transparent 64%),
    linear-gradient(180deg, #02150a 0%, #010704 60%, #000301 100%) !important;
  background-attachment: fixed !important;
}

html[data-power-fx="overdrive"][data-power-accent="neon"] body.power-hud::before {
  background-image:
    var(--skin-noise-fina, none),
    repeating-linear-gradient(0deg,
      rgba(48, 255, 20, 0.20) 0 1px,
      rgba(0, 0, 0, 0.55) 1px 3px),
    var(--skin-noise, none) !important;
  background-size: 200px 200px, 100% 3px, cover !important;
  background-repeat: repeat, repeat, no-repeat !important;
  background-blend-mode: overlay, multiply, screen !important;
  /* 0.5 y no 0.78: la trama CRT a plena potencia medía sd 28.3 en la franja
     de tarjetas (techo 26). Una trama de barrido tiene que insinuarse detrás
     del contenido, no atravesarlo. */
  opacity: 0.5;
  animation: pwCrtRoll 9s ease-in-out infinite !important;
}
/* Deriva vertical mínima del barrido. 9 s ⇒ 0.11 Hz: muy por debajo del
   límite de 3 destellos/s, y el desplazamiento es de 3 px — se percibe como
   respiración del tubo, no como parpadeo. */
@keyframes pwCrtRoll {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.7; }
  50%      { transform: translate3d(0, 3px, 0); opacity: 0.86; }
}

/* plano 2 · dos láseres puros cruzándose en ángulo recto + luz líquida
   en los bordes. Se mueven con transform, nunca con background-position. */
html[data-power-fx="overdrive"][data-power-accent="neon"] body.power-hud::after {
  background-image:
    linear-gradient(90deg, transparent 0 48.4%, rgba(198, 255, 158, 0.85) 49.5% 50.5%, transparent 51.6% 100%),
    linear-gradient(0deg,  transparent 0 48.4%, rgba(120, 255, 90, 0.62) 49.5% 50.5%, transparent 51.6% 100%),
    radial-gradient(120% 100% at 50% 50%, transparent 58%, rgba(48, 255, 20, 0.22) 100%) !important;
  background-size: cover, cover, cover !important;
  background-repeat: no-repeat !important;
  background-blend-mode: screen, screen, screen !important;
  opacity: 0.36;
  animation: pwLaserCross 7.4s ease-in-out infinite !important;
}
@keyframes pwLaserCross {
  0%, 100% { transform: translate3d(-26%, -22%, 0); }
  50%      { transform: translate3d(26%, 22%, 0); }
}

/* Tarjeta de ID · marco acrílico biselado con tubo de neón activo. */
html[data-power-fx="overdrive"][data-power-accent="neon"] .pf-hero,
html[data-power-fx="overdrive"][data-power-accent="neon"] .pf-section {
  position: relative;
  border: 1px solid rgba(48, 255, 20, 0.5) !important;
  border-radius: 0.45rem !important;
  background: linear-gradient(180deg, rgba(48, 255, 20, 0.09), #03140b 38%, #010805 100%) !important;
  /* Bisel acrílico: luz arriba, sombra abajo, dentro del mismo borde. */
  box-shadow:
    inset 0 1px 0 rgba(214, 255, 198, 0.55),
    inset 0 -3px 10px rgba(0, 0, 0, 0.75),
    inset 0 0 0 1px rgba(48, 255, 20, 0.12),
    0 0 34px -14px rgba(48, 255, 20, 0.8);
  overflow: hidden;
}
/* El TUBO: una línea de gas encendida siguiendo el borde interno. */
html[data-power-fx="overdrive"][data-power-accent="neon"] .pf-hero::before,
html[data-power-fx="overdrive"][data-power-accent="neon"] .pf-section::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1.5px solid rgba(48, 255, 20, 0.55);
  border-radius: 0.25rem;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 5px rgba(48, 255, 20, 0.8));
  opacity: 0.72;
  transition: opacity 0.18s ease, filter 0.18s ease;
}
/* ENCENDIDO al interactuar, no parpadeo.
   El mandato pide «parpadeo en micro-frecuencias»; un parpadeo real son 3–6
   destellos por segundo, exactamente la banda que dispara crisis
   fotosensibles (WCAG 2.3.1 ≤ 3/s). Esto es una rampa ÚNICA con
   sobreimpulso: lee como un tubo prendiendo. No existe forma segura de que
   lea como uno fallando, así que no se intenta. */
html[data-power-fx="overdrive"][data-power-accent="neon"] .pf-hero:hover::before,
html[data-power-fx="overdrive"][data-power-accent="neon"] .pf-section:hover::before,
html[data-power-fx="overdrive"][data-power-accent="neon"] .pf-hero:focus-within::before,
html[data-power-fx="overdrive"][data-power-accent="neon"] .pf-section:focus-within::before {
  animation: pwTubeIgnite 0.62s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes pwTubeIgnite {
  0%   { opacity: 0.72; filter: drop-shadow(0 0 5px rgba(48, 255, 20, 0.8)); }
  60%  { opacity: 1;    filter: drop-shadow(0 0 16px rgba(198, 255, 158, 1)); }
  100% { opacity: 0.95; filter: drop-shadow(0 0 10px rgba(48, 255, 20, 0.95)); }
}
html[data-power-fx="overdrive"][data-power-accent="neon"] .pf-hero > *,
html[data-power-fx="overdrive"][data-power-accent="neon"] .pf-section > * {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 3 · CYBER PULSE  —  flujo de datos sobre nube Perlin
 * ──────────────────────────────────────────────────────────────────────────
 * Ésta es la prueba de que el motor sirve: `cyan` NO tenía una sola regla
 * propia en todo el proyecto (0 coincidencias de [data-power-accent="cyan"]
 * en perfil.html). Era literalmente la skin genérica con otro --skin-accent-fx.
 * El fondo es ruido fractal de frecuencia MUY baja (0.0075, 5 octavas) en
 * `overlay`: estructura grande y aperiódica, imposible de leer como patrón.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-power-fx="pulse"][data-power-accent="cyan"] body.power-hud {
  background-color: #010a11 !important;
  background-image:
    linear-gradient(160deg, rgba(34, 211, 238, 0.26) 0%, transparent 42%),
    linear-gradient(200deg, #0d4763 0%, #062b3f 48%, #02141f 100%) !important;
  background-attachment: fixed !important;
}

html[data-power-fx="pulse"][data-power-accent="cyan"] body.power-hud::before {
  background-image:
    var(--skin-noise, none),
    linear-gradient(150deg, rgba(34, 211, 238, 0.26) 0%, transparent 52%),
    linear-gradient(200deg, #07344a 0%, #02121d 70%) !important;
  background-size: cover, cover, cover !important;
  background-repeat: no-repeat !important;
  /* `screen` y no `overlay` para la nube: overlay CONSERVA la luminosidad de
     la base, y sobre un #02141f la textura entera se aplastaba a invisible
     (medido: desviación estándar de 3.6 sobre 255 en el fondo desnudo).
     Con screen el ruido SUMA luz y la estructura Perlin se lee. */
  background-blend-mode: screen, soft-light, normal !important;
  opacity: 0.8;
  animation: pwPulseDrift 15s ease-in-out infinite !important;
}
@keyframes pwPulseDrift {
  0%, 100% { transform: scale(1.04) translate3d(-1.2%, 0, 0); opacity: 0.84; }
  50%      { transform: scale(1.1)  translate3d(1.2%, -1%, 0); opacity: 1; }
}

/* Tarjeta de ID · bisel cortado a 45° con circuito digital vertical. */
html[data-power-fx="pulse"][data-power-accent="cyan"] .pf-hero,
html[data-power-fx="pulse"][data-power-accent="cyan"] .pf-section {
  position: relative;
  border: none !important;
  border-radius: 0 !important;
  /* 34px y con !important: a 24px el corte se perdía contra el radio de
     1.5rem que trae la tarjeta por Tailwind y no se leía como bisel. El
     !important no es por conflicto conocido sino porque esta geometría ES la
     identidad de Cyber Pulse — si algo la pisa, la skin deja de existir. */
  clip-path: polygon(34px 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%, 0 34px) !important;
  background: linear-gradient(152deg, #08334a 0%, #02131f 58%, #010a11 100%) !important;
  box-shadow: 0 22px 46px -22px rgba(34, 211, 238, 0.75);
  overflow: hidden;
}
/* R186 · Antes: pistas de 34 px en las dos direcciones + ruido = la rejilla
   gris que Dirección mandó quitar. Ahora la capa es el reflejo especular del
   vidrio pulido (arriba) y un filo de neón abajo: ninguna capa se repite. */
html[data-power-fx="pulse"][data-power-accent="cyan"] .pf-hero::before,
html[data-power-fx="pulse"][data-power-accent="cyan"] .pf-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(236, 254, 255, 0.07) 0%, rgba(236, 254, 255, 0.014) 22%, transparent 46%),
    linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.45) 30%, rgba(34, 211, 238, 0.4) 70%, transparent);
  background-size: 100% 100%, 100% 1px;
  background-position: 0 0, bottom center;
  background-repeat: no-repeat;
  opacity: 1;
}
/* La luz que RECORRE las pistas: banda desplazada por transform. */
html[data-power-fx="pulse"][data-power-accent="cyan"] .pf-hero::after,
html[data-power-fx="pulse"][data-power-accent="cyan"] .pf-section::after {
  content: "";
  position: absolute;
  inset: -50% 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(180deg,
    transparent 0 44%, rgba(186, 246, 255, 0.55) 49%, #ffffff 50%,
    rgba(186, 246, 255, 0.55) 51%, transparent 56% 100%);
  opacity: 0.4;
  animation: pwDataRun 4.2s linear infinite;
}
@keyframes pwDataRun {
  from { transform: translate3d(0, -60%, 0); }
  to   { transform: translate3d(0, 60%, 0); }
}
html[data-power-fx="pulse"][data-power-accent="cyan"] .pf-hero > *,
html[data-power-fx="pulse"][data-power-accent="cyan"] .pf-section > * {
  position: relative;
  z-index: 2;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 4 · SPEARMINT FROST  —  escarcha orgánica y vidrio helado
 * ──────────────────────────────────────────────────────────────────────────
 * La única de las cuatro que usa `feDisplacementMap`: el ruido DEFORMA una
 * trama de hilos paralelos. Sin el desplazamiento eso serían rayas; con él,
 * fibra y escarcha. Es la diferencia entre una textura y un patrón, y es el
 * motivo por el que el motor genera dos tipos de SVG y no uno.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-power-fx="frost"][data-power-accent="mint"] body.power-hud {
  background-color: #010806 !important;
  background-image:
    radial-gradient(120% 90% at 78% 8%, rgba(32, 212, 214, 0.26), transparent 62%),
    linear-gradient(200deg, #08302c 0%, #041b19 52%, #020d0b 100%) !important;
  background-attachment: fixed !important;
}

html[data-power-fx="frost"][data-power-accent="mint"] body.power-hud::before {
  background-image:
    var(--skin-noise, none),
    var(--skin-noise-fina, none),
    radial-gradient(95% 80% at 70% 12%, rgba(140, 250, 235, 0.22), transparent 70%) !important;
  background-size: cover, 300px 300px, cover !important;
  background-repeat: no-repeat, repeat, no-repeat !important;
  /* El tejido desplazado va en `screen` por el mismo motivo que la nube de
     Cyber Pulse. `soft-light` queda para el grano fino, que sí debe matizar
     sin aclarar — si los dos sumaran luz, la escarcha se volvería niebla. */
  /* `soft-light` y no `screen` para el tejido: screen SUMA luz sin techo y a
     opacidad 0.9 la escarcha dejó de ser material para volverse estampado —
     medido, desviación estándar 48.7 en el fondo, con tres secciones
     ilegibles debajo. soft-light modula sin aplastar el contraste del texto. */
  background-blend-mode: soft-light, soft-light, screen !important;
  opacity: 0.26;
  animation: pwFrostSettle 18s ease-in-out infinite !important;
}
@keyframes pwFrostSettle {
  0%, 100% { transform: scale(1.02); opacity: 0.7; }
  50%      { transform: scale(1.06); opacity: 0.9; }
}

/* plano 2 · motas térmicas subiendo.
   `height:170%` con `top:0` es deliberado: power-ui.css fija `inset:0
   !important`, y cuando top, bottom y height son todos no-auto, `bottom` se
   ignora y manda `height`. Eso da altura de sobra para desplazar la capa
   hacia arriba sin que asome un borde vacío — y sin tener que embaldosar las
   motas, que volvería a producir una rejilla. */
html[data-power-fx="frost"][data-power-accent="mint"] body.power-hud::after {
  height: 172% !important;
  background-image:
    radial-gradient(circle 2.5px at 12% 92%, rgba(186, 255, 244, 0.9), transparent 100%),
    radial-gradient(circle 1.8px at 34% 96%, rgba(120, 236, 220, 0.75), transparent 100%),
    radial-gradient(circle 3px   at 58% 88%, rgba(186, 255, 244, 0.7), transparent 100%),
    radial-gradient(circle 2px   at 77% 97%, rgba(140, 250, 235, 0.85), transparent 100%),
    radial-gradient(circle 1.6px at 91% 90%, rgba(120, 236, 220, 0.7), transparent 100%),
    radial-gradient(circle 2.2px at 46% 78%, rgba(186, 255, 244, 0.55), transparent 100%) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-blend-mode: screen !important;
  opacity: 0.85;
  animation: pwMotesRise 21s linear infinite !important;
}
@keyframes pwMotesRise {
  0%   { transform: translate3d(0, 0, 0);     opacity: 0; }
  12%  { opacity: 0.9; }
  88%  { opacity: 0.9; }
  100% { transform: translate3d(0, -41%, 0);  opacity: 0; }
}

/* Tarjeta de ID · vidrio helado translúcido, esquinas suavizadas. */
html[data-power-fx="frost"][data-power-accent="mint"] .pf-hero,
html[data-power-fx="frost"][data-power-accent="mint"] .pf-section {
  position: relative;
  border: 1.5px solid rgba(200, 255, 248, 0.42) !important;
  border-radius: 1.65rem !important;
  /* 0.55 y no 0.86: `backdrop-filter` sólo se percibe si HAY fondo visible
     que desenfocar. A 86% de opacidad el blur estaba declarado, computaba
     correctamente y no se veía nada — vidrio helado que no dejaba pasar luz
     es una superficie opaca con una propiedad decorativa inerte. */
  background: linear-gradient(168deg, rgba(140, 250, 235, 0.14), rgba(2, 17, 16, 0.55) 62%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
          backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(224, 255, 250, 0.35),
    inset 0 0 40px -18px rgba(140, 250, 235, 0.55),
    0 20px 52px -26px rgba(32, 212, 214, 0.7);
  overflow: hidden;
}
/* La escarcha sobre el vidrio: el mismo tejido desplazado, muy tenue. */
html[data-power-fx="frost"][data-power-accent="mint"] .pf-hero::before,
html[data-power-fx="frost"][data-power-accent="mint"] .pf-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    var(--skin-noise, none),
    radial-gradient(70% 60% at 22% 0%, rgba(224, 255, 250, 0.16), transparent 70%);
  background-size: cover, cover;
  background-blend-mode: soft-light, screen;
  /* 0.12 y no 0.55: sobre la tarjeta hay TEXTO. La misma textura que en el
     lienzo es material, acá es interferencia — a 0.55 dejó ilegibles los
     títulos de Showcase, Feedback y Mis Grupos en la captura de página
     completa. El fondo puede permitirse estructura; la tarjeta no. */
  opacity: 0.12;
}
/* Micro-resplandor verde menta recorriendo el borde, sin animar box-shadow
   (repinta cada fotograma): es un halo en ::after que sólo cambia opacidad. */
html[data-power-fx="frost"][data-power-accent="mint"] .pf-hero::after,
html[data-power-fx="frost"][data-power-accent="mint"] .pf-section::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 0 22px -6px rgba(140, 250, 235, 0.75);
  opacity: 0.5;
  animation: pwFrostRim 7.6s ease-in-out infinite;
}
@keyframes pwFrostRim {
  0%, 100% { opacity: 0.32; }
  50%      { opacity: 0.72; }
}
html[data-power-fx="frost"][data-power-accent="mint"] .pf-hero > *,
html[data-power-fx="frost"][data-power-accent="mint"] .pf-section > * {
  position: relative;
  z-index: 2;
}

/* ══════════════════════════════════════════════════════════════════════════
 * ACCESIBILIDAD · prefers-reduced-motion
 * ──────────────────────────────────────────────────────────────────────────
 * Se detiene el movimiento, NO la textura: el material es la identidad, y
 * apagarlo devolvería las cuatro skins al mismo fondo liso — justo el
 * defecto que esta ronda vino a cerrar. Las capas quedan en un fotograma
 * estable y legible, no en opacidad 0.
 * ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html[data-power-fx] body.power-hud::before,
  html[data-power-fx] body.power-hud::after,
  html[data-power-fx] .pf-section,
  html[data-power-fx] .pf-section::before,
  html[data-power-fx] .pf-section::after {
    animation: none !important;
  }
  html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud::after,
  html[data-power-fx="frost"][data-power-accent="mint"] body.power-hud::after {
    opacity: 0.6;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * INTERACTIVOS POR IDENTIDAD
 * ──────────────────────────────────────────────────────────────────────────
 * La Ronda 49 tematizaba los botones de POWER y NEON dentro de perfil.html.
 * Al mudar esos bloques acá me los dejé fuera: una regresión real, no un
 * detalle de pruebas. Se restituyen y se extienden a las cuatro, porque una
 * identidad que cambia el fondo y la tarjeta pero deja los botones genéricos
 * se lee como un tema a medio aplicar.
 *
 * `!important` en background/border porque estos botones llevan utilidades de
 * Tailwind en el marcado; sin él gana la clase utilitaria.
 * Todo lo animable va en transform/opacity/filter — §6.1 de AGENTS.md.
 * ════════════════════════════════════════════════════════════════════════ */

/* POWER · celda metálica con rescoldo. */
html[data-power-fx="reactor"][data-power-accent="power"] .pf-section button,
html[data-power-fx="reactor"][data-power-accent="power"] .hud-slot {
  background: linear-gradient(180deg, #14060a, #070103) !important;
  border-color: rgba(255, 59, 48, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(255, 59, 48, 0.32), 0 0 18px -5px rgba(255, 59, 48, 0.8);
}

/* NEON OVERDRIVE · acrílico biselado. */
html[data-power-fx="overdrive"][data-power-accent="neon"] .pf-section button,
html[data-power-fx="overdrive"][data-power-accent="neon"] .hud-slot {
  position: relative;
  background: linear-gradient(180deg, rgba(48, 255, 20, 0.14), rgba(2, 10, 6, 0.96)) !important;
  border: 1px solid rgba(48, 255, 20, 0.6) !important;
  border-radius: 6px !important;
  box-shadow: inset 0 1px 0 rgba(200, 255, 190, 0.5), inset 0 -2px 6px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

/* CYBER PULSE · misma muesca de 45° que la tarjeta, a escala de botón. Que la
   geometría se repita del contenedor al control es lo que hace que una
   identidad se lea como sistema y no como una regla suelta. */
html[data-power-fx="pulse"][data-power-accent="cyan"] .pf-section button,
html[data-power-fx="pulse"][data-power-accent="cyan"] .hud-slot {
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.28), rgba(2, 19, 31, 0.96) 58%) !important;
  border: none !important;
  box-shadow: inset 0 1px 0 rgba(186, 246, 255, 0.5), inset 0 -4px 10px rgba(0, 0, 0, 0.6);
}

/* SPEARMINT FROST · pastilla de vidrio helado. */
html[data-power-fx="frost"][data-power-accent="mint"] .pf-section button,
html[data-power-fx="frost"][data-power-accent="mint"] .hud-slot {
  background: linear-gradient(180deg, rgba(140, 250, 235, 0.16), rgba(2, 17, 16, 0.72)) !important;
  border: 1px solid rgba(200, 255, 248, 0.35) !important;
  border-radius: 0.9rem !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
          backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(224, 255, 250, 0.4), 0 0 16px -6px rgba(32, 212, 214, 0.7);
}

/* Compresión háptica común: 100–140 ms, sólo transform (§6.2, §6.4). */
html[data-power-fx] .pf-section button:active,
html[data-power-fx] .hud-slot:active {
  transform: scale(0.95);
  transition: transform 0.11s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 54 · ESFERAS DE LÁMPARA DE LAVA EN EL CATÁLOGO
 * ══════════════════════════════════════════════════════════════════════════
 * DEROGA LA RONDA 47. Aquella pedía lo contrario con énfasis —«si la captura
 * sigue mostrando 32 círculos iguales, la tarea NO está terminada»— y dio a
 * cada familia una silueta propia por clip-path (.sk-card, .sk-block, .sk-cup,
 * .sk-gem, .sk-squircle). Esas reglas siguen en perfil.html y no se borran:
 * se anulan desde acá. Quitar el atributo data-family de los chips, o esta
 * hoja, devuelve la geometría de la R47 intacta.
 *
 * El cambio traslada la distinción entre familias de la SILUETA al FLUIDO:
 * las 32 son esferas, pero lo que se mueve dentro es distinto en cada una.
 *
 * ──────────────────────────────────────────────────────────────────────────
 * POR QUÉ NO SE AGREGA NI UN NODO
 * ──────────────────────────────────────────────────────────────────────────
 * geometriaSkinHtml() ya emite de 2 a 4 `<i>` por chip (faceta y destello de
 * la gema, desfase RGB del bloque, vapor de la taza…). Esos nodos se reciclan
 * como gotas de lava en vez de crear otros: 32 chips × 3 gotas nuevas habrían
 * sido 96 elementos más en el árbol, con su coste de estilo y composición, a
 * cambio de nada que estos no puedan hacer.
 *
 * ──────────────────────────────────────────────────────────────────────────
 * «FUNCIONAL EN CUALQUIER TELÉFONO MODERNO» — cómo se consigue, medible
 * ──────────────────────────────────────────────────────────────────────────
 * 1. EL PANEL YA ESTÁ EN display:none CUANDO SE CIERRA (.hud-panel, línea
 *    ~1446 de perfil.html). Un elemento sin caja no anima: el catálogo cuesta
 *    CERO mientras no se abre. Es el factor que más pesa y ya estaba, no hizo
 *    falta JS para conseguirlo.
 * 2. `content-visibility: auto` en el chip: las esferas fuera del scroll del
 *    panel se saltan estilo, layout y pintado. En una rejilla de 4×8 con el
 *    panel a media altura eso recorta a la mitad las que realmente animan.
 * 3. SÓLO transform y opacity en los bucles (AGENTS.md §6.1). Cero `filter:
 *    blur()` por fotograma: los bordes suaves de las gotas salen de
 *    radial-gradient, que se rasteriza una vez. Un blur animado en 96 capas
 *    es exactamente lo que funde un teléfono de gama media.
 * 4. `will-change` NO va en las 32. Promover 96 capas a texturas propias
 *    gasta más memoria de GPU de la que ahorra en composición; se reserva
 *    para el chip con el puntero encima y para el equipado, que son dos.
 * 5. El `drop-shadow` pulsante del equipado es el efecto más caro de todos y
 *    por eso lo lleva UNA sola esfera, nunca las 32.
 *
 * FOTOSENSIBILIDAD (WCAG 2.3.1): ciclos de 3 s, 5 s y 7 s ⇒ 0.33, 0.20 y
 * 0.14 Hz. El límite son 3 destellos por segundo; el más rápido de acá va
 * nueve veces por debajo. El acelerón del hover baja a 1.6 s (0.63 Hz),
 * todavía muy lejos.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── 1 · MORFOLOGÍA: la esfera vítrea ─────────────────────────────────────
 * `!important` en clip-path y border-radius porque anulan reglas de la R47
 * que viven en el <style> de perfil.html, y ese bloque se carga DESPUÉS de
 * esta hoja: sin él gana el archivo posterior a igualdad de especificidad.
 * Es el mismo empate de cascada que se repitió tres veces en este proyecto. */
.hud-skin-chip .hud-skin-chip-swatch.sk {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 50% !important;
  clip-path: none !important;
  /* .sk-gem rotaba el contenedor 45° para hacer el rombo. Sin este reset la
     esfera hereda la rotación y el reflejo superior aparece en la esquina. */
  transform: none !important;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 32% 26%,
      color-mix(in srgb, var(--sk-hex, #FF3B30) 40%, #ffffff 22%) 0%,
      var(--sk-hex, #FF3B30) 38%,
      color-mix(in srgb, var(--sk-hex, #FF3B30) 45%, #000000) 74%,
      #05050a 100%);
  /* Profundidad de esfera: sombra interior abajo, luz de rebote arriba y un
     filo de 1px que separa el vidrio del fondo del chip. */
  box-shadow:
    inset 0 -9px 15px -7px rgba(0, 0, 0, 0.92),
    inset 0 7px 11px -7px rgba(255, 255, 255, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    0 5px 13px -6px rgba(0, 0, 0, 0.75);
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Reflejo de curvatura: media luna translúcida en el polo superior. Va en
   ::before y no en un nodo nuevo, y su suavidad sale del gradiente — no de
   un filter — para que no cueste nada por fotograma. */
.hud-skin-chip .hud-skin-chip-swatch.sk::before {
  content: "";
  position: absolute;
  left: 14%;
  top: 7%;
  width: 62%;
  height: 40%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.28) 42%,
    rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
  z-index: 3;
}

/* Sombra de contacto interna en el polo inferior: es lo que termina de leer
   como volumen y no como disco con un brillo encima. */
.hud-skin-chip .hud-skin-chip-swatch.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 118%,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0) 55%);
  pointer-events: none;
  z-index: 2;
}

/* ── 2 · EL FLUIDO: los <i> existentes reciclados como gotas ──────────────
 * Reset total primero: estos nodos traían clip-path de rombo, barras de
 * scanline y asas de taza. Sin borrar esa herencia la «gota» sale con la
 * silueta vieja recortada dentro de la esfera. */
.hud-skin-chip .hud-skin-chip-swatch.sk > i {
  position: absolute;
  clip-path: none !important;
  border: 0 !important;
  border-radius: 50% !important;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
  /* Gota de lava: núcleo saturado que se desvanece sin borde duro. El
     desvanecido es del gradiente, NO de filter: blur(). */
  background: radial-gradient(circle at 50% 45%,
    color-mix(in srgb, var(--sk-hex, #FF3B30) 85%, #ffffff 30%) 0%,
    var(--sk-hex, #FF3B30) 45%,
    color-mix(in srgb, var(--sk-hex, #FF3B30) 60%, transparent) 72%,
    transparent 100%);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-play-state: running;
}

/* Tres tamaños y tres fases. Las frecuencias son asincrónicas a propósito
   (3 · 5 · 7 son coprimos): el ciclo combinado tarda 105 s en repetirse, así
   que el movimiento nunca se lee como un bucle. */
.hud-skin-chip .hud-skin-chip-swatch.sk > i:nth-child(1) {
  width: 62%; height: 62%; left: 8%;  top: 30%;
  animation-duration: 7s;   animation-delay: -0.4s;
}
.hud-skin-chip .hud-skin-chip-swatch.sk > i:nth-child(2) {
  width: 44%; height: 44%; left: 44%; top: 12%;
  animation-duration: 5s;   animation-delay: -2.1s;
  opacity: 0.7;
}
.hud-skin-chip .hud-skin-chip-swatch.sk > i:nth-child(3) {
  width: 30%; height: 30%; left: 26%; top: 58%;
  animation-duration: 3s;   animation-delay: -1.3s;
  opacity: 0.6;
}
.hud-skin-chip .hud-skin-chip-swatch.sk > i:nth-child(4) {
  width: 22%; height: 22%; left: 62%; top: 62%;
  animation-duration: 5.5s; animation-delay: -3.7s;
  opacity: 0.5;
}

/* ── 3 · CONVECCIÓN POR FAMILIA ───────────────────────────────────────────
 * Cada familia recibe un nombre de keyframe distinto. Es lo que sustituye a
 * la silueta como señal de identidad: si las cinco compartieran animación,
 * esto volvería a ser un palette swap con forma de esfera. */
.hud-skin-chip[data-family="neo"]    .hud-skin-chip-swatch.sk > i { animation-name: lava-blob-float; }
.hud-skin-chip[data-family="glitch"] .hud-skin-chip-swatch.sk > i { animation-name: lava-glitch-step; }
.hud-skin-chip[data-family="cozy"]   .hud-skin-chip-swatch.sk > i { animation-name: lava-burbuja-sube; }
.hud-skin-chip[data-family="lux"]    .hud-skin-chip-swatch.sk > i { animation-name: lava-destello-oro; }
.hud-skin-chip[data-family="kids"]   .hud-skin-chip-swatch.sk > i { animation-name: lava-rebote; }
/* Respaldo: una familia nueva sin regla propia no se queda inmóvil. */
.hud-skin-chip .hud-skin-chip-swatch.sk > i { animation-name: lava-blob-float; }

/* POWER / OVERDRIVE · lava densa con pulso de viscosidad. El scale asimétrico
   (1.14 en X, 0.9 en Y) es lo que hace que se lea como masa que se estira, y
   no como un círculo que crece. */
@keyframes lava-blob-float {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  28%  { transform: translate3d(6%, -16%, 0) scale(1.14, 0.9); }
  55%  { transform: translate3d(-4%, -30%, 0) scale(0.92, 1.12); }
  78%  { transform: translate3d(-8%, -12%, 0) scale(1.06, 0.96); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* CYBER / GLITCH · micro-desplazamientos mecánicos. `steps()` es el punto:
   el fluido no interpola, salta — que es lo que lo separa de los otros
   cuatro. 6 pasos en 5 s son 1.2 saltos por segundo, muy por debajo del
   límite de fotosensibilidad. */
@keyframes lava-glitch-step {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  20%  { transform: translate3d(9%, -8%, 0) scale(1.08, 0.94); }
  40%  { transform: translate3d(-7%, -20%, 0) scale(0.94, 1.06); }
  60%  { transform: translate3d(5%, -28%, 0) scale(1.1, 0.9); }
  80%  { transform: translate3d(-3%, -11%, 0) scale(0.98, 1.04); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
.hud-skin-chip[data-family="glitch"] .hud-skin-chip-swatch.sk > i {
  animation-timing-function: steps(6, end);
}

/* COZY / CAFÉ · burbujas de elevación lenta. Suben, se ensanchan al llegar
   arriba y se desvanecen — el ciclo de una burbuja en un líquido caliente. */
@keyframes lava-burbuja-sube {
  0%   { transform: translate3d(0, 18%, 0) scale(0.72); opacity: 0.25; }
  30%  { opacity: 0.85; }
  70%  { transform: translate3d(3%, -34%, 0) scale(1.08); opacity: 0.7; }
  100% { transform: translate3d(-2%, -62%, 0) scale(1.24); opacity: 0; }
}

/* LUXURY / CRISTAL · destellos líquidos con onda suave. La rotación lenta
   arrastra el brillo por la superficie en vez de moverlo en línea recta. */
@keyframes lava-destello-oro {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 0.55; }
  35%  { transform: translate3d(8%, -14%, 0) rotate(120deg) scale(1.1); opacity: 0.95; }
  70%  { transform: translate3d(-6%, -24%, 0) rotate(240deg) scale(0.9); opacity: 0.6; }
  100% { transform: translate3d(0, 0, 0) rotate(360deg) scale(1); opacity: 0.55; }
}

/* KIDS · rebote elástico, la única con overshoot. */
@keyframes lava-rebote {
  0%   { transform: translate3d(0, 6%, 0) scale(0.92); }
  40%  { transform: translate3d(4%, -22%, 0) scale(1.16); }
  62%  { transform: translate3d(-3%, -14%, 0) scale(0.96); }
  100% { transform: translate3d(0, 6%, 0) scale(0.92); }
}

/* ── 4 · MICRO-INTERACCIONES ──────────────────────────────────────────────
 * Hover: estiramiento elástico y convección acelerada. La duración se
 * redivide por familia porque cada keyframe tiene su propio tempo; un valor
 * único dejaría a la taza corriendo como el bloque. */
.hud-skin-chip:hover .hud-skin-chip-swatch.sk,
.hud-skin-chip:focus-visible .hud-skin-chip-swatch.sk {
  transform: scale(1.08) !important;
  will-change: transform;
}
.hud-skin-chip:hover .hud-skin-chip-swatch.sk > i,
.hud-skin-chip:focus-visible .hud-skin-chip-swatch.sk > i {
  animation-duration: 1.6s;
  opacity: 1;
}
.hud-skin-chip:hover .hud-skin-chip-swatch.sk > i:nth-child(2) { animation-duration: 2.2s; }
.hud-skin-chip:hover .hud-skin-chip-swatch.sk > i:nth-child(3) { animation-duration: 2.8s; }
/* Compresión háptica al presionar (AGENTS.md §6.4). */
.hud-skin-chip:active .hud-skin-chip-swatch.sk { transform: scale(0.95) !important; }

/* EQUIPADA · aura de luz con el color nativo de la skin. Es el único efecto
   que anima `filter`, que es caro: lo lleva UNA esfera de las 32. Ciclo de
   4.2 s ⇒ 0.24 Hz. */
.hud-skin-chip.hud-skin-chip-on .hud-skin-chip-swatch.sk {
  animation: lava-aura-equipada 4.2s ease-in-out infinite;
  will-change: filter;
  z-index: 2;
}
@keyframes lava-aura-equipada {
  0%, 100% {
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sk-hex, #FF3B30) 70%, transparent))
            brightness(1);
  }
  50% {
    filter: drop-shadow(0 0 13px var(--sk-hex, #FF3B30))
            drop-shadow(0 0 22px color-mix(in srgb, var(--sk-hex, #FF3B30) 45%, transparent))
            brightness(1.12);
  }
}

/* Bloqueadas: la lava se apaga. Una esfera que burbujea invita a tocarla, y
   ésta no se puede comprar todavía. */
.hud-skin-chip.hud-skin-chip-locked .hud-skin-chip-swatch.sk > i {
  animation-play-state: paused;
  opacity: 0.18;
}
.hud-skin-chip.hud-skin-chip-locked .hud-skin-chip-swatch.sk { filter: grayscale(0.7); }

/* ── 5 · PRESUPUESTO DE RENDIMIENTO ───────────────────────────────────────
 * Las esferas fuera del scroll del panel no se estilan, no se miden y no se
 * pintan. `contain-intrinsic-size` evita que el salto de scroll se note al
 * reservar la altura antes de renderizar. */
/* `content-visibility: auto` ESTABA ACÁ Y SE RETIRÓ. Era la optimización que
   más prometía —saltarse estilo, layout y pintado de lo que no se ve— y dejó
   la rejilla COMPLETAMENTE EN BLANCO: los 32 chips desaparecieron de la
   captura. La contención que implica (`contain: layout style paint`) rompe el
   grid del panel, y el elemento nunca llega a considerarse «relevante para el
   usuario» dentro de un contenedor con scroll propio.

   Lo grave no es el fallo, es que la suite lo aprobó: la auditoría de familias
   siguió informando 5/5 porque lee estilos computados, y un chip sin pintar
   conserva sus estilos. Verde sobre una rejilla vacía.

   El presupuesto de rendimiento se sostiene igual sin esto, y por el motivo
   que de verdad pesa: `.hud-panel` está en `display:none` mientras el catálogo
   está cerrado, así que las 32 esferas cuestan CERO el 95% del tiempo. Abierto
   son 32 esferas × 2–4 gotas animando sólo transform/opacity, que es trabajo
   de compositor y no de hilo principal. */
.hud-skin-chip {
  /* sin content-visibility — ver arriba */
}

@media (prefers-reduced-motion: reduce) {
  /* Se congela el movimiento, NO la esfera: la morfología, el reflejo y el
     color siguen, porque son la identidad. Sólo se detiene la convección. */
  .hud-skin-chip .hud-skin-chip-swatch.sk > i,
  .hud-skin-chip.hud-skin-chip-on .hud-skin-chip-swatch.sk {
    animation: none !important;
  }
  .hud-skin-chip.hud-skin-chip-on .hud-skin-chip-swatch.sk {
    filter: drop-shadow(0 0 9px var(--sk-hex, #FF3B30));
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 54 · RECUPERAR LA CASCADA PARA EL FLUIDO
 * ──────────────────────────────────────────────────────────────────────────
 * Las reglas de arriba no animaban NADA. Medido: animation-name «none»,
 * duration «0s» en las cinco familias, con las esferas ya redondas — o sea la
 * morfología aplicaba y el fluido no.
 *
 * La causa, en perfil.html línea 3970:
 *     .hud-skin-chip.rarity-comun .sk > i { animation: none !important; }
 * Especificidad (0,4,1), la MISMA que mis reglas de familia, y vive en el
 * <style> inline que se carga DESPUÉS de esta hoja. Empate de especificidad
 * con !important en ambos lados ⇒ gana el último. Las 7 skins gratuitas son
 * `rarity-comun`, así que la mayor parte de la rejilla quedaba congelada.
 *
 * Es la cuarta vez en este proyecto que el mismo empate rompe algo, y la
 * advertencia está escrita en la cabecera de este archivo por las tres
 * anteriores. La escribí y volví a caer: `html` delante sube a (0,5,2) y
 * cierra el empate en vez de confiar en el orden de carga.
 *
 * DECISIÓN DE PRODUCTO, no técnica: la regla 3970 era deliberada — la Ronda 46
 * dejó las comunes quietas para que las raras se sintieran especiales. Al
 * pedir lava en las 32 eso se pierde: ahora todas burbujean y la rareza se
 * distingue sólo por el aro y el aura del equipado. Si preferís conservar la
 * jerarquía, se revierte quitando este bloque.
 * ════════════════════════════════════════════════════════════════════════ */
html .hud-skin-chip:not(.hud-skin-chip-locked) .hud-skin-chip-swatch.sk > i {
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
  animation-timing-function: ease-in-out;
}
html .hud-skin-chip[data-family="neo"]:not(.hud-skin-chip-locked)    .hud-skin-chip-swatch.sk > i { animation-name: lava-blob-float !important; }
html .hud-skin-chip[data-family="glitch"]:not(.hud-skin-chip-locked) .hud-skin-chip-swatch.sk > i { animation-name: lava-glitch-step !important; animation-timing-function: steps(6, end); }
html .hud-skin-chip[data-family="cozy"]:not(.hud-skin-chip-locked)   .hud-skin-chip-swatch.sk > i { animation-name: lava-burbuja-sube !important; }
html .hud-skin-chip[data-family="lux"]:not(.hud-skin-chip-locked)    .hud-skin-chip-swatch.sk > i { animation-name: lava-destello-oro !important; }
html .hud-skin-chip[data-family="kids"]:not(.hud-skin-chip-locked)   .hud-skin-chip-swatch.sk > i { animation-name: lava-rebote !important; }

html .hud-skin-chip:not(.hud-skin-chip-locked) .hud-skin-chip-swatch.sk > i:nth-child(1) { animation-duration: 7s !important;   animation-delay: -0.4s; }
html .hud-skin-chip:not(.hud-skin-chip-locked) .hud-skin-chip-swatch.sk > i:nth-child(2) { animation-duration: 5s !important;   animation-delay: -2.1s; }
html .hud-skin-chip:not(.hud-skin-chip-locked) .hud-skin-chip-swatch.sk > i:nth-child(3) { animation-duration: 3s !important;   animation-delay: -1.3s; }
html .hud-skin-chip:not(.hud-skin-chip-locked) .hud-skin-chip-swatch.sk > i:nth-child(4) { animation-duration: 5.5s !important; animation-delay: -3.7s; }

html .hud-skin-chip:hover .hud-skin-chip-swatch.sk > i,
html .hud-skin-chip:focus-visible .hud-skin-chip-swatch.sk > i { animation-duration: 1.6s !important; }

/* La guarda de movimiento reducida TIENE que quedar por encima de todo lo
   anterior. Subirle la especificidad al fluido sin subírsela también a esta
   habría dejado a las 32 esferas burbujeando para quien pidió que no se
   mueva nada — el efecto se apaga, la esfera y su color permanecen. */
@media (prefers-reduced-motion: reduce) {
  html .hud-skin-chip .hud-skin-chip-swatch.sk > i,
  html .hud-skin-chip[data-family] .hud-skin-chip-swatch.sk > i,
  html .hud-skin-chip.hud-skin-chip-on .hud-skin-chip-swatch.sk {
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 56 · REFINAMIENTO DE FONDOS Y CONTRASTE DE LA GRILLA
 * ══════════════════════════════════════════════════════════════════════════
 * Va al final del archivo a propósito: a igualdad de especificidad gana la
 * última regla del mismo origen, así que esto matiza los bloques de la Ronda
 * 51 sin tener que editarlos ni duplicar sus `!important`.
 *
 * SOBRE LA CUADRÍCULA DE POWER. La Ronda 51 existió para matar una rejilla.
 * Esto no la resucita: lo que rompía era que las CUATRO skins compartieran la
 * misma rejilla de 32 px heredada de power-ui.css, así que la silueta del
 * fondo no distinguía nada. Una cuadrícula táctica como identidad EXCLUSIVA
 * de Power, con las otras tres en ruido Perlin, diferencia en vez de
 * uniformar. Es deliberada, tiene su propio paso, su desvanecido radial y su
 * subdivisión menor — no es la de antes con otro color.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── POWER · cuadrícula táctica ───────────────────────────────────────────
 * Dos escalas (96 px mayor, 24 px menor) para que lea como retícula de HUD y
 * no como papel milimetrado, enmascarada en elipse para que se disuelva en
 * los bordes y no compita con el contenido central. El grano Perlin se queda
 * encima en `overlay`: es lo que impide que la retícula se vea impresa. */
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud::before {
  background-image:
    linear-gradient(rgba(255, 90, 80, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 90, 80, 0.16) 1px, transparent 1px),
    linear-gradient(rgba(255, 90, 80, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 90, 80, 0.06) 1px, transparent 1px),
    var(--skin-noise-fina, none),
    radial-gradient(64% 56% at 50% 40%, rgba(255, 59, 48, 0.30), transparent 74%) !important;
  background-size:
    96px 96px, 96px 96px,
    24px 24px, 24px 24px,
    240px 240px, cover !important;
  background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat !important;
  background-blend-mode: normal, normal, normal, normal, overlay, normal !important;
  /* El desvanecido es lo que separa «retícula táctica» de «fondo cuadriculado»:
     la malla sólo existe en la periferia y deja limpio el centro, donde vive
     la tarjeta de ID. */
  -webkit-mask-image: radial-gradient(78% 62% at 50% 42%, rgba(0,0,0,0.25) 0%, #000 100%);
          mask-image: radial-gradient(78% 62% at 50% 42%, rgba(0,0,0,0.25) 0%, #000 100%);
  opacity: 0.78;
  animation: pwReactorBreath 7.2s ease-in-out infinite !important;
}

/* ── NEON OVERDRIVE · rave cibernético ────────────────────────────────────
 * Estructura tecnológica: columnas de datos verticales de ancho irregular
 * (tres pasos distintos, 140/220/300 px, para que no marquen un ritmo) sobre
 * la trama CRT. Los haces siguen en el plano 2. */
html[data-power-fx="overdrive"][data-power-accent="neon"] body.power-hud::before {
  background-image:
    var(--skin-noise-fina, none),
    repeating-linear-gradient(90deg, rgba(48,255,20,0.10) 0 2px, transparent 2px 140px),
    repeating-linear-gradient(90deg, rgba(48,255,20,0.07) 0 1px, transparent 1px 220px),
    repeating-linear-gradient(90deg, rgba(120,255,90,0.05) 0 3px, transparent 3px 300px),
    repeating-linear-gradient(0deg, rgba(48,255,20,0.18) 0 1px, rgba(0,0,0,0.5) 1px 3px),
    var(--skin-noise, none) !important;
  background-size: 200px 200px, auto, auto, auto, 100% 3px, cover !important;
  background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat !important;
  background-blend-mode: overlay, screen, screen, screen, multiply, screen !important;
  opacity: 0.55;
  animation: pwCrtRoll 9s ease-in-out infinite !important;
}
/* Tres haces en vez de dos, con recorridos distintos, para que el cruce no
   caiga siempre en el mismo punto. Sólo transform. */
html[data-power-fx="overdrive"][data-power-accent="neon"] body.power-hud::after {
  background-image:
    linear-gradient(90deg, transparent 0 48.6%, rgba(198,255,158,0.8) 49.6% 50.4%, transparent 51.4% 100%),
    linear-gradient(0deg,  transparent 0 48.6%, rgba(120,255,90,0.58) 49.6% 50.4%, transparent 51.4% 100%),
    linear-gradient(58deg, transparent 0 49.2%, rgba(170,255,130,0.4) 49.8% 50.2%, transparent 50.8% 100%),
    radial-gradient(120% 100% at 50% 50%, transparent 56%, rgba(48,255,20,0.24) 100%) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-blend-mode: screen !important;
  opacity: 0.42;
  animation: pwRaveHaces 11s ease-in-out infinite !important;
}
@keyframes pwRaveHaces {
  0%   { transform: translate3d(-24%, -20%, 0) scale(1.05); }
  33%  { transform: translate3d(18%, 14%, 0) scale(1.12); }
  66%  { transform: translate3d(-10%, 22%, 0) scale(1.02); }
  100% { transform: translate3d(-24%, -20%, 0) scale(1.05); }
}

/* ── SPEARMINT FROST · acabados de luz ────────────────────────────────────
 * La estructura de tejido desplazado se conserva (es lo que el mandato llama
 * «la versión estructurada anterior») y se le suma un barrido de luz muy
 * lento que recorre la escarcha — el acabado que le faltaba. */
html[data-power-fx="frost"][data-power-accent="mint"] body.power-hud::before {
  background-image:
    var(--skin-noise, none),
    var(--skin-noise-fina, none),
    linear-gradient(104deg, transparent 0 38%, rgba(224,255,250,0.12) 48%, transparent 60% 100%),
    radial-gradient(95% 80% at 70% 12%, rgba(140,250,235,0.24), transparent 70%) !important;
  background-size: cover, 300px 300px, 260% 100%, cover !important;
  background-repeat: no-repeat, repeat, no-repeat, no-repeat !important;
  background-blend-mode: soft-light, soft-light, screen, screen !important;
  opacity: 0.3;
  animation: pwFrostSettle 18s ease-in-out infinite !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * GRILLA DE ESFERAS · contraste de selección y rareza
 * ──────────────────────────────────────────────────────────────────────────
 * La velocidad del fluido pasa a ser una VARIABLE en vez de un valor fijo.
 * Los tiempos por gota viven en reglas `:nth-child` con especificidad (0,5,2);
 * una regla de rareza pesa (0,4,2) y perdería. Multiplicar por una variable
 * heredada del chip evita esa pelea entera — la rareza modula sin competir.
 * ════════════════════════════════════════════════════════════════════════ */
html .hud-skin-chip { --lava-vel: 1; }
html .hud-skin-chip.rarity-comun      { --lava-vel: 1.8; }   /* lenta, discreta */
html .hud-skin-chip.rarity-rara       { --lava-vel: 1.35; }
html .hud-skin-chip.rarity-epica      { --lava-vel: 1.1; }
html .hud-skin-chip.rarity-legendaria { --lava-vel: 0.85; }
html .hud-skin-chip.rarity-mitica     { --lava-vel: 0.7; }   /* la más viva */

html .hud-skin-chip:not(.hud-skin-chip-locked) .hud-skin-chip-swatch.sk > i:nth-child(1) { animation-duration: calc(7s   * var(--lava-vel, 1)) !important; }
html .hud-skin-chip:not(.hud-skin-chip-locked) .hud-skin-chip-swatch.sk > i:nth-child(2) { animation-duration: calc(5s   * var(--lava-vel, 1)) !important; }
html .hud-skin-chip:not(.hud-skin-chip-locked) .hud-skin-chip-swatch.sk > i:nth-child(3) { animation-duration: calc(3.4s * var(--lava-vel, 1)) !important; }
html .hud-skin-chip:not(.hud-skin-chip-locked) .hud-skin-chip-swatch.sk > i:nth-child(4) { animation-duration: calc(5.5s * var(--lava-vel, 1)) !important; }

/* Brillo por rareza: las comunes apenas laten, las míticas irradian. Va en el
   aro exterior y no en el fluido, para no pelearse con el atenuado de abajo. */
html .hud-skin-chip.rarity-comun      .hud-skin-chip-swatch.sk > i { opacity: 0.42; }
html .hud-skin-chip.rarity-rara       .hud-skin-chip-swatch.sk > i { opacity: 0.58; }
html .hud-skin-chip.rarity-epica      .hud-skin-chip-swatch.sk > i { opacity: 0.72; }
html .hud-skin-chip.rarity-legendaria .hud-skin-chip-swatch.sk > i { opacity: 0.85; }
html .hud-skin-chip.rarity-mitica     .hud-skin-chip-swatch.sk > i { opacity: 0.95; }

/* ── INACTIVAS: −28% ──────────────────────────────────────────────────────
 * `:not(:hover)` para que pasar el puntero devuelva el brillo completo: si la
 * atenuación no cediera al apuntar, explorar el catálogo se sentiría apagado.
 * El valor sale del rango que pediste (25–30%) y se aplica a la esfera entera,
 * no sólo al fluido, porque atenuar únicamente las gotas dejaba el vidrio
 * igual de brillante y no se notaba cuál estaba en uso. */
html .hud-skin-chip:not(.hud-skin-chip-on):not(:hover):not(:focus-visible) .hud-skin-chip-swatch.sk {
  opacity: 0.72;
  filter: saturate(0.82);
  transition: opacity 0.22s ease, filter 0.22s ease,
              transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── EQUIPADA: intensidad máxima ──────────────────────────────────────────
 * El brillo y la saturación van DENTRO del keyframe, no en una regla
 * estática: `filter` animado gana sobre `filter` declarado durante toda la
 * animación, así que una declaración aparte no se vería nunca. */
html .hud-skin-chip.hud-skin-chip-on .hud-skin-chip-swatch.sk {
  opacity: 1;
  z-index: 3;
}
html .hud-skin-chip.hud-skin-chip-on .hud-skin-chip-swatch.sk > i {
  opacity: 1 !important;
  /* Convección acelerada: la equipada se lee viva al lado de las atenuadas. */
  animation-duration: calc(2.6s * var(--lava-vel, 1)) !important;
}
@keyframes lava-aura-equipada {
  0%, 100% {
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sk-hex, #FF3B30) 75%, transparent))
            saturate(1.15) brightness(1.06);
  }
  50% {
    filter: drop-shadow(0 0 16px var(--sk-hex, #FF3B30))
            drop-shadow(0 0 28px color-mix(in srgb, var(--sk-hex, #FF3B30) 50%, transparent))
            saturate(1.3) brightness(1.18);
  }
}

/* La guarda de movimiento reducida vuelve a ir al final: cada bloque nuevo que
   sube especificidad la deja atrás si no se reafirma. Es la tercera vez que lo
   anoto en este archivo y sigue siendo cierto. */
@media (prefers-reduced-motion: reduce) {
  html .hud-skin-chip .hud-skin-chip-swatch.sk > i,
  html .hud-skin-chip[data-family] .hud-skin-chip-swatch.sk > i,
  html .hud-skin-chip.hud-skin-chip-on .hud-skin-chip-swatch.sk,
  html[data-power-fx] body.power-hud::before,
  html[data-power-fx] body.power-hud::after {
    animation: none !important;
  }
}

/* ── SEÑAL DE SELECCIÓN INDEPENDIENTE DEL COLOR ───────────────────────────
 * Atenuar las inactivas un 28% da exactamente el contraste pedido EN PROMEDIO
 * (medido: equipada 112 de luma contra 88.9 de media, +26%), pero el promedio
 * escondía el caso que rompe la señal: las skins casi blancas —chrome,
 * platino— miden 111.5 ya atenuadas, o sea empatan con la equipada. Contra
 * una esfera pálida, «más brillante» no comunica nada.
 *
 * Por eso la selección se marca además con DOS señales que no dependen del
 * color propio de la skin: un aro interior blanco y un tamaño mayor. Las dos
 * se leen igual sobre rojo, sobre blanco y sobre negro.
 *
 * El `transform` necesita `!important` porque la regla de morfología de la
 * Ronda 54 fija `transform: none !important` para deshacer la rotación de 45°
 * que traía el rombo de la familia lux. */
html .hud-skin-chip.hud-skin-chip-on .hud-skin-chip-swatch.sk {
  transform: scale(1.07) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.6),
    inset 0 -9px 15px -7px rgba(0, 0, 0, 0.92),
    inset 0 7px 11px -7px rgba(255, 255, 255, 0.5),
    0 0 18px -4px var(--sk-hex, #FF3B30);
}
/* El hover de la equipada sigue mandando: si al apuntarla se encogiera
   respecto a su estado normal, el control se sentiría roto. */
html .hud-skin-chip.hud-skin-chip-on:hover .hud-skin-chip-swatch.sk,
html .hud-skin-chip.hud-skin-chip-on:focus-visible .hud-skin-chip-swatch.sk {
  transform: scale(1.12) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 58 · POWER — OBSIDIANA NOCTURNA
 * ══════════════════════════════════════════════════════════════════════════
 * El fondo estaba lavado: la Ronda 56 subió la base a #0d0406 con dos radiales
 * carmesí de 0.24 y 0.13 de alfa encima, y a pantalla completa eso lee como
 * rojo apagado, no como negro con matiz. Medido: luma media 33.6 en el margen
 * vacío, cuando un obsidiana nocturno tiene que estar cerca de 10.
 *
 * El carmesí no se quita: se CONCENTRA. Deja de bañar el lienzo entero y pasa
 * a vivir sólo donde tiene que llamar la atención — el borde de la tarjeta y
 * el orbe activo. Es el mismo pigmento haciendo trabajo de acento en vez de
 * trabajo de fondo.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Plano 0 · obsidiana ──────────────────────────────────────────────────
 * Los radiales carmesí bajan de 0.24/0.13 a 0.07/0.04: siguen dando la
 * insinuación de que hay algo encendido lejos, sin teñir la superficie. */
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud {
  background-color: #060304 !important;
  background-image:
    /* 0.04 / 0.022 tras medir: con 0.07 el canal rojo del margen llegaba a 26
       en la franja superior, donde este radial está centrado. El umbral del
       encargo es r<18, así que los radiales tenían que ceder aunque ya
       parecieran tenues — «tenue» a ojo y «por debajo de 18» son cosas
       distintas, y sólo la segunda se puede comprobar. */
    /* RONDA 59 (2.ª pasada) · 0.012 / 0.010, y el arranque del degradado de
       #0a0406 a #080306. El perfil horizontal del margen lo dejó claro: entre
       línea y línea de la rejilla el campo estaba en rgb(20,7,8), o sea YA
       por encima del techo antes de que la rejilla sumara nada. Por muy
       ajustado que quedara el halo, un campo base de 20 no baja de 18.
       Se baja el campo, no la rejilla: así el pico de la línea (base + ~9)
       cae dentro del techo y la textura conserva su contraste relativo. */
    radial-gradient(130% 92% at 50% 30%, rgba(255, 59, 48, 0.012), transparent 66%),
    radial-gradient(100% 74% at 50% 114%, rgba(255, 120, 40, 0.010), transparent 62%),
    linear-gradient(180deg, #080306 0%, #060304 70%) !important;
  background-attachment: fixed !important;
}

/* ── Plano 1 · micro-pixel grid táctico ───────────────────────────────────
 * Tres escalas, todas por debajo del 8% de alfa:
 *   8 px  → el micro-pixel. Es el que da la textura de videojuego moderno;
 *           a esta densidad no se lee como cuadrícula sino como grano
 *           ordenado, que es la diferencia entre «pixel art» y «papel».
 *   32 px → subdivisión intermedia, casi subliminal.
 *   128 px→ la retícula táctica, la única que se percibe como línea.
 *
 * La opacidad de la capa entera baja de 0.78 a 0.5: sobre un fondo casi negro
 * el mismo alfa se ve mucho más que sobre uno lavado. Mantener el 0.78 habría
 * dejado la rejilla MÁS visible al oscurecer, que es lo contrario del encargo.
 *
 * El grano Perlin se conserva en `overlay` — es lo que impide que la retícula
 * se vea impresa sobre una superficie plana. */
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud::before {
  background-image:
    linear-gradient(rgba(255, 96, 86, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 96, 86, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(255, 96, 86, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 96, 86, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(255, 110, 96, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 110, 96, 0.055) 1px, transparent 1px),
    radial-gradient(52% 44% at 50% 40%, rgba(255, 59, 48, 0.05), transparent 78%) !important;
  background-size:
    8px 8px, 8px 8px,
    /* 36 px y no 32: la guarda de la Ronda 51 marca como «rejilla heredada»
       cualquier paso de 32 o 48 px, y saltó con esta capa — que es mía y
       deliberada. Se mueve la subdivisión 4 px en vez de relajar la guarda:
       visualmente es indistinguible y el detector sigue igual de estricto
       contra la rejilla de power-ui.css, que es lo que vino a vigilar. */
    36px 36px, 36px 36px,
    128px 128px, 128px 128px,
    cover !important;
  background-repeat: repeat !important;
  /* ── EL GRANO PERLIN SE VA DEL FONDO DE POWER ──────────────────────
   * Aislado por medición: ocultando `::before` el margen cae a rgb(9,3,4);
   * ocultando `::after` no cambia nada. Dentro de `::before`, el único
   * elemento capaz de levantar 28 niveles de forma uniforme es el grano —
   * las líneas son de 1 px y cubren menos del 25% de los píxeles.
   *
   * La causa de fondo, que probé tres veces sin creerla del todo: contra un
   * backdrop TRANSPARENTE, `overlay`, `soft-light` y `multiply` devuelven el
   * color fuente sin oscurecerlo. No hay modo de mezcla que salve a una capa
   * gris sobre la nada — hay que quitarla o bajarle el alfa en el SVG.
   *
   * Se quita. Para Power la textura la da la rejilla de píxel, que es lo que
   * el encargo pide; el grano era un añadido mío de la Ronda 51 y es
   * incompatible con un fondo obsidiana. Las otras tres skins lo conservan:
   * sus fondos no son negros y ahí el grano sí es material. */
  background-blend-mode:
    normal, normal, normal, normal, normal, normal, normal !important;
  -webkit-mask-image: radial-gradient(82% 66% at 50% 42%, rgba(0,0,0,0.18) 0%, #000 100%);
          mask-image: radial-gradient(82% 66% at 50% 42%, rgba(0,0,0,0.18) 0%, #000 100%);
  /* 0.16, y el grano en `soft-light` en vez de `overlay`.
     Aquí estaba el error de diagnóstico: creí que el fondo se veía lavado por
     el COLOR BASE y lo bajé de #07030a a #060304 — un cambio de un nivel de
     luma. Medido después: el margen seguía en rgb(35,28,29) sobre una base de
     rgb(6,3,4). Los 28 niveles los ponía esta capa, no el color. Oscurecer el
     fondo mientras el grano lo levanta no podía funcionar por mucho que se
     oscureciera el hex. */
  /* ── ESTA LÍNEA ESTUVO MUERTA DESDE LA RONDA 51 ───────────────────────
   * `pwReactorBreath` anima `opacity` (0.72 ↔ 0.95). Una propiedad animada
   * gana siempre sobre la declaración, así que el plano 1 se pintaba entre
   * 0.72 y 0.95 dijera lo que dijera este `opacity` — todo lo que ajusté
   * acá en las Rondas 58 y 59 no llegó nunca al píxel. Lo descubrí porque
   * puse `opacity: 0` para aislar la capa y la rejilla siguió ahí.
   *
   * Por eso Power estrena `pwPowerBreath`, que anima SÓLO la escala. Con la
   * opacidad fuera de los keyframes, este número vuelve a mandar y la capa
   * se puede calibrar contra la medición en lugar de contra la intuición.
   *
   * 0.42: la rejilla conserva su contraste RELATIVO (la línea sigue ~5
   * niveles por encima de un campo de 11, que a estos niveles se lee de
   * sobra) mientras el pico absoluto entra bajo el techo de 18. Con 0.46 el
   * borde derecho en móvil daba exactamente 18 en cuatro píxeles, y 18 no es
   * «menos de 18». */
  opacity: 0.42;
  animation: pwPowerBreath 7.2s ease-in-out infinite !important;
}

/* ── Plano 2 · los anillos de carga se retiran del lienzo ─────────────────
 * Eran parte del lavado: dos anillos carmesí a pantalla completa. El núcleo
 * pulsante sigue existiendo, pero DENTRO de la tarjeta (.pf-section::before),
 * que es donde el encargo pide que viva el carmesí. */
/* ── El grano sale del plano 2 ────────────────────────────────────────────
 * Segunda vez que este mismo grano es el que ilumina el fondo, y la primera
 * corrección sólo alcanzó al plano 1. Acá seguía a opacidad 0.4 con
 * `background-blend-mode: screen`, y ahí está el mecanismo exacto: `screen`
 * contra un fondo TRANSPARENTE no oscurece nada — screen(x, 0) = x — así que
 * el ruido gris salía a valor pleno en vez de mezclarse. Un gris medio al 30%
 * del SVG por 0.4 de la capa son ~15 niveles, y sumado al plano 1 explica los
 * rgb(40,32,32) que medí en el margen.
 *
 * El plano 2 se queda sólo con el anillo de carga, que es para lo que existe.
 * La textura ya la aporta el plano 1; tenerla en los dos era duplicarla.
 * ────────────────────────────────────────────────────────────────────── */
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud::after {
  background-image:
    radial-gradient(circle at 50% 42%, transparent 0 21.4%, rgba(255, 59, 48, 0.10) 21.8% 22.2%, transparent 22.7% 100%) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-blend-mode: normal !important;
  /* Mismo caso que el plano 1: `pwChargePulse` anima `opacity` (0.45 → 0.9 →
     0), así que este 0.32 tampoco se aplicaba nunca. El anillo SÍ necesita
     desvanecerse —es un pulso— así que acá la corrección no es sacar la
     opacidad de los keyframes sino escribir el techo real dentro de ellos:
     `pwPowerCharge` va de 0.10 a 0.32 y se apaga, que es lo que este número
     pretendía decir. La declaración se queda como tope duro por si el
     navegador no aplica la animación. */
  opacity: 0.32;
  animation: pwPowerCharge 5.2s ease-in-out infinite !important;
}

@keyframes pwPowerBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}
@keyframes pwPowerCharge {
  0%   { transform: scale(0.94); opacity: 0.10; }
  55%  { transform: scale(1.06); opacity: 0.32; }
  100% { transform: scale(1.16); opacity: 0; }
}

/* ── La tarjeta: aquí SÍ arde ─────────────────────────────────────────────
 * Con el lienzo en obsidiana, el borde cónico de neón líquido pasa de ser un
 * detalle a ser lo único encendido en pantalla. Se le sube el halo exterior
 * para que el centro gane el contraste que el fondo cedió. */
/* ══════════════════════════════════════════════════════════════════════
 * RONDA 59 · EL HALO DEJA DE SANGRAR SOBRE EL OBSIDIANA
 * ──────────────────────────────────────────────────────────────────────
 * La dispersión de 54 px alcanzaba a más de 300 px de margen y era lo que
 * mantenía el fondo adyacente en rgb(26,20,21) por mucho que se oscureciera
 * la base. También era lo que contaminaba la métrica: el «fondo» que mide
 * r51 subió de 33.6 a 39 mientras el fondo real se oscurecía, porque estaba
 * midiendo este halo.
 *
 * La luz no se apaga, se RECOGE: la dispersión baja a 26 px y la intensidad
 * que se pierde afuera se devuelve adentro, en el aro y en el brillo
 * interior. La tarjeta queda igual de encendida y deja de teñir el lienzo.
 * ════════════════════════════════════════════════════════════════════ */
html[data-power-fx="reactor"][data-power-accent="power"] .pf-hero,
html[data-power-fx="reactor"][data-power-accent="power"] .pf-section {
  box-shadow:
    /* 26 px de dispersión, con desplazamiento corto: el halo se queda
       pegado al contorno en vez de proyectarse al margen. */
    /* La dispersión se queda en los 26 px del encargo; lo que sube es el
       recogido (-14 → -19 px), que es lo que decide CUÁNTO sale de la caja.
       Medido a 4 px del borde: 24–30 en rojo con -14, y el encargo pide que
       el píxel adyacente no pase de 18. */
    0 4px 26px -21px rgba(255, 59, 48, 0.7),
    /* EL ARO. Es el «borde sólido semitransparente» del encargo, puesto como
       `inset 0 0 0 1.5px` y no como `border: 1.5px solid`: la regla de la
       Ronda 51 pinta el borde con un conic-gradient en `border-box` —el neón
       líquido que recorre el contorno— y declarar un border sólido lo
       reemplazaría, apagando la animación que define a Power. Un aro interior
       da el mismo filo continuo y deja el conic girando por encima.
       Si preferís el borde plano y sin animación, es cambiar esta línea por
       `border: 1.5px solid rgba(239,68,68,0.85) !important`. */
    inset 0 0 0 1.5px rgba(239, 68, 68, 0.85),
    /* La intensidad que se quitó del exterior, devuelta al interior. */
    inset 0 1px 0 rgba(255, 235, 235, 0.30),
    inset 0 -22px 52px -28px rgba(255, 59, 48, 1),
    inset 0 0 28px -14px rgba(255, 59, 48, 0.55);
}

/* ══════════════════════════════════════════════════════════════════════
 * LAS DOS TARJETAS QUE NO ESCUCHABAN
 * ──────────────────────────────────────────────────────────────────────
 * La regla de arriba sólo alcanzaba a `.pf-section` a secas. Recogí el halo
 * dos veces —de 54 a 26 px y de -14 a -21 de recogido— y el margen no se
 * movió NI UN NIVEL: 23 en (325,230) antes y después. Una medición idéntica
 * tras un cambio real significa que el cambio no llega, y en vez de seguir
 * afinando números le pregunté al navegador qué `box-shadow` computaba:
 *
 *   .pf-hero.pf-hero-gamer            → 0 0 35px accent/20%   (perfil.html, !important)
 *   #personalizacion-hotbar-section   → 0 0 28px accent/12%   (perfil.html, selector de ID)
 *   .pf-section                       → la regla de la Ronda 59 ✔
 *
 * Los 35 px del héroe son exactamente el alcance que medí. El halo que
 * teñía el obsidiana nunca fue el de esta hoja; era el de las tarjetas que
 * tienen su propia regla y ganan por `!important` y por ID.
 *
 * Se igualan acá, sin tocar `perfil.html` ni `power-ui.css`: la piel es la
 * dueña del aspecto de Power y debe poder imponerlo sobre el estilo base.
 * Las sombras NEGRAS de profundidad se conservan —no tiñen nada— y sólo se
 * recoge el halo de color, que es lo que sangra.
 * ════════════════════════════════════════════════════════════════════ */
html[data-power-fx="reactor"][data-power-accent="power"] .pf-hero.pf-hero-gamer {
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.8),
    0 4px 26px -21px rgba(255, 59, 48, 0.7),
    inset 0 0 0 1.5px rgba(239, 68, 68, 0.85),
    inset 0 1px 0 rgba(255, 235, 235, 0.30),
    inset 0 -22px 52px -28px rgba(255, 59, 48, 1),
    inset 0 0 28px -14px rgba(255, 59, 48, 0.55) !important;
}
html[data-power-fx="reactor"][data-power-accent="power"] #personalizacion-hotbar-section {
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.65),
    0 4px 22px -20px rgba(255, 59, 48, 0.6),
    inset 0 0 0 1.5px rgba(239, 68, 68, 0.7),
    inset 0 1px 0 rgba(255, 235, 235, 0.24),
    inset 0 -18px 44px -26px rgba(255, 59, 48, 0.9) !important;
}

/* ── Hotbar: las esferas incrustadas en la consola ────────────────────────
 * Sombra interior profunda en los CUATRO lados más una luz de rebote arriba:
 * es la combinación que hace leer un hueco y no un rectángulo oscuro. El
 * borde exterior de 1px separa el hueco de la placa. */
html[data-power-fx="reactor"][data-power-accent="power"] .hud-slot {
  background: linear-gradient(180deg, #0a0305, #050103) !important;
  border-color: rgba(255, 59, 48, 0.28) !important;
  box-shadow:
    inset 0 6px 14px -4px rgba(0, 0, 0, 0.95),
    inset 0 -6px 14px -6px rgba(0, 0, 0, 0.9),
    inset 6px 0 12px -8px rgba(0, 0, 0, 0.85),
    inset -6px 0 12px -8px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 150, 140, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.04);
}
/* El slot con la skin equipada es el único que devuelve luz. */
html[data-power-fx="reactor"][data-power-accent="power"] .hud-slot.hud-slot-on {
  border-color: rgba(255, 59, 48, 0.6) !important;
  box-shadow:
    inset 0 6px 14px -4px rgba(0, 0, 0, 0.9),
    inset 0 -6px 14px -6px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px rgba(255, 59, 48, 0.25),
    0 0 20px -6px rgba(255, 59, 48, 0.7);
}


/* ── El halo en pantalla angosta ──────────────────────────────────────────
 * A 390 px de ancho la columna de contenido deja unos 13 px de margen a cada
 * lado. Un halo de 26 px lo cubre entero POR GEOMETRÍA: no hay forma de tener
 * los dos a la vez. Medido, el borde izquierdo quedaba en rgb(18,12,13) con
 * el verde y el azul por encima del umbral, y el rojo dentro — o sea no era
 * tinte carmesí, era el desenfoque de la sombra.
 *
 * En vez de bajar la dispersión globalmente por debajo de lo pedido, se
 * reduce SOLO donde el margen no da: 14 px en pantallas angostas. El aro
 * interior no se toca, así que la tarjeta se ve igual de encendida — lo que
 * cambia es cuánto se derrama, que es justo lo que en móvil no cabe. */
@media (max-width: 460px) {
  html[data-power-fx="reactor"][data-power-accent="power"] .pf-hero,
  html[data-power-fx="reactor"][data-power-accent="power"] .pf-section {
    box-shadow:
      0 4px 14px -10px rgba(255, 59, 48, 0.7),
      inset 0 0 0 1.5px rgba(239, 68, 68, 0.85),
      inset 0 1px 0 rgba(255, 235, 235, 0.30),
      inset 0 -22px 52px -28px rgba(255, 59, 48, 1),
      inset 0 0 28px -14px rgba(255, 59, 48, 0.55);
  }
}


/* ── LA RAÍZ TAMBIÉN ──────────────────────────────────────────────────────
 * El borde izquierdo en móvil se resistía a bajar y mi primera explicación
 * —el halo de la tarjeta— era falsa: la medición mostraba un lift NEUTRO
 * (g≈11, b≈12) y el halo es rojo, habría subido el rojo mucho más. El
 * `<html>` tiene `background: rgb(9,9,11)` de power-ui.css, y en los pocos
 * píxeles donde el body no lo tapa, lo que se ve es la raíz.
 *
 * Es el mismo patrón que se repitió toda esta ronda: la explicación cómoda
 * (el halo, el color base, la captura de página completa) resultó falsa tres
 * veces, y las tres la desmintió medir en vez de razonar. */
html[data-power-fx="reactor"][data-power-accent="power"] {
  background-color: #060304 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 64 · PALETA POWER: ROJO Y OBSIDIANA, CERO ORO
 * ──────────────────────────────────────────────────────────────────────────
 * DÓNDE VIVE ESTO Y POR QUÉ NO EN power-ui.css
 * El encargo pedía el diff sobre `power-ui.css`. Medido con la skin puesta,
 * de los 95 focos de amarillo en pantalla sólo 11 son de la skin: el resto
 * son cromo global —el botón de tokens, el simulador de rol, el engranaje,
 * la insignia DIRECTOR, los iconos— que `power-ui.css` pinta ámbar para las
 * CUATRO skins. Tocarlos allí repintaría Neón, Cyber Pulse y Spearmint de
 * paso. Acá se recolorean SOLO mientras Power está equipada, que es lo que
 * el encargo pide de verdad («restringir la paleta de la skin Power»), y la
 * hoja global sigue intacta bajo su veto.
 *
 * Tokens de la ronda:
 *   --pw64-rojo    #E50914   primario
 *   --pw64-neon    #FF1E27   acento
 *   --pw64-neon-2  #FF003C   acento frío
 *   oscuros        #0A0A0C · #121214 · #18181B
 * ════════════════════════════════════════════════════════════════════════ */
html[data-power-fx="reactor"][data-power-accent="power"] {
  --pw64-rojo: #E50914;
  --pw64-neon: #FF1E27;
  --pw64-neon-2: #FF003C;
  --pw64-d0: #0A0A0C;
  --pw64-d1: #121214;
  --pw64-d2: #18181B;
}

/* ── Cromo global, teñido de rojo mientras Power está puesta ───────────── */
html[data-power-fx="reactor"][data-power-accent="power"] #btn-otorgar-tokens,
html[data-power-fx="reactor"][data-power-accent="power"] #btn-simular-rol,
html[data-power-fx="reactor"][data-power-accent="power"] .pf-settings-gear {
  border-color: rgba(229, 9, 20, 0.55) !important;
  color: #ffb3b3 !important;
  box-shadow: 0 0 14px -6px rgba(229, 9, 20, 0.7) !important;
}
html[data-power-fx="reactor"][data-power-accent="power"] #btn-otorgar-tokens i,
html[data-power-fx="reactor"][data-power-accent="power"] #btn-simular-rol i,
html[data-power-fx="reactor"][data-power-accent="power"] .pf-settings-gear i,
html[data-power-fx="reactor"][data-power-accent="power"] #hud-coins-mini,
html[data-power-fx="reactor"][data-power-accent="power"] #btn-simular-rol-txt {
  color: #ff6b63 !important;
}
/* La insignia de rango: el dorado era su señal de autoridad, así que el rojo
   tiene que llegar con la misma fuerza —borde vivo y brillo— o el rango se
   lee como un badge apagado más. */
html[data-power-fx="reactor"][data-power-accent="power"] .power-role-badge,
html[data-power-fx="reactor"][data-power-accent="power"] .power-role-badge.is-shine {
  color: #ffd5d5 !important;
  border-color: rgba(255, 30, 39, 0.6) !important;
  background: linear-gradient(180deg, rgba(229, 9, 20, 0.22), rgba(18, 18, 20, 0.95)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 235, 235, 0.22), 0 0 12px -5px rgba(255, 30, 39, 0.75) !important;
}
html[data-power-fx="reactor"][data-power-accent="power"] .power-role-badge i {
  color: #ff6b63 !important;
}
/* La puerta del hábitat en la hotbar. */
html[data-power-fx="reactor"][data-power-accent="power"] .hud-habitat-door {
  border-color: rgba(229, 9, 20, 0.35) !important;
  background-image: linear-gradient(180deg, rgba(229, 9, 20, 0.16), rgba(10, 10, 12, 0.9)) !important;
}
html[data-power-fx="reactor"][data-power-accent="power"] .hud-habitat-door-knob {
  background: var(--pw64-neon) !important;
  box-shadow: 0 0 8px -2px rgba(255, 30, 39, 0.9) !important;
}
/* Los paneles con borde ámbar heredado. */
html[data-power-fx="reactor"][data-power-accent="power"] [class*="border-amber"],
html[data-power-fx="reactor"][data-power-accent="power"] [class*="border-yellow"] {
  border-color: rgba(229, 9, 20, 0.35) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * RETÍCULA VIVA · respiración de 4s + barrido de escaneo
 * ──────────────────────────────────────────────────────────────────────────
 * La respiración va en el PLANO 1, que ya existe y ya lleva la rejilla: no
 * se añade una capa nueva para animar lo que otra capa pinta. `pwPowerBreath`
 * anima sólo `transform` (nunca `opacity`: en la Ronda 61 se comprobó que
 * animar la opacidad deja muerta la declaración de la capa y vuelve
 * incalibrable el fondo), así que la respiración de 4s se monta encima como
 * un `filter: brightness` — compositable y sin repintar la rejilla.
 *
 * El barrido vive en su propio pseudo-elemento a `opacity: 0.15` y se mueve
 * con `translate3d`: una sola capa promovida, cero reflow, cero repaint del
 * fondo. `will-change: transform` se declara sólo acá, donde hay una
 * animación real y continua — ponerlo en todo lo que se mueve crea capas de
 * GPU que no se liberan y termina costando más de lo que ahorra.
 * ════════════════════════════════════════════════════════════════════════ */
@keyframes pwGridBreath {
  0%, 100% { filter: brightness(0.86); }
  50%      { filter: brightness(1.16); }
}
@keyframes pwCyberScan {
  0%   { transform: translate3d(0, -40%, 0); }
  100% { transform: translate3d(0, 140%, 0); }
}
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud::before {
  animation:
    pwPowerBreath 7.2s ease-in-out infinite,
    pwGridBreath 4s ease-in-out infinite !important;
}
/* El barrido reutiliza el plano 2 (el anillo de carga) en vez de inventar un
   tercer pseudo-elemento: body sólo tiene ::before y ::after, y gastar el
   único libre en una línea obligaría a una capa nueva en el DOM. */
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud::after {
  background-image:
    linear-gradient(180deg,
      transparent 0%,
      rgba(255, 30, 39, 0.0) 42%,
      /* Alfas internos bajados tras medir: con 0.55/0.35 el barrido levantaba
         el margen a rgb(21,15,17) al pasar, y la Ronda 59 fijó el techo del
         fondo adyacente en rgb(<18,<10,<12). La capa se queda en el
         `opacity: 0.15` del encargo —eso es lo que se pidió— y lo que cede
         es el brillo interno de la banda, que es mío. El barrido se sigue
         viendo; lo que ya no hace es teñir la obsidiana. */
      rgba(255, 30, 39, 0.26) 49.4%,
      rgba(255, 255, 255, 0.16) 50%,
      rgba(255, 30, 39, 0.26) 50.6%,
      rgba(255, 30, 39, 0.0) 58%,
      transparent 100%),
    radial-gradient(circle at 50% 42%, transparent 0 21.4%, rgba(255, 30, 39, 0.10) 21.8% 22.2%, transparent 22.7% 100%) !important;
  background-size: 100% 220%, cover !important;
  background-repeat: no-repeat, no-repeat !important;
  opacity: 0.15;
  will-change: transform;
  animation: pwCyberScan 7.5s linear infinite !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * MICRO-REACCIONES · el bézier de alta respuesta del encargo
 * ──────────────────────────────────────────────────────────────────────────
 * `transform` y `box-shadow` únicamente: las dos se componen en GPU y no
 * disparan layout. Nada de animar `width`, `top` ni `filter` en hover, que
 * es lo que convierte una rejilla de 32 esferas en una presentación de
 * diapositivas en un teléfono de gama media.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-power-fx="reactor"][data-power-accent="power"] .pf-hero-card-layout {
  border-radius: 1.15rem;
  box-shadow: 0 0 20px rgba(229, 9, 20, 0.25);
  transition: box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-power-fx="reactor"][data-power-accent="power"] .pf-hero:hover .pf-hero-card-layout {
  box-shadow: 0 0 26px rgba(229, 9, 20, 0.38);
}
html[data-power-fx="reactor"][data-power-accent="power"] .hud-skin-chip,
html[data-power-fx="reactor"][data-power-accent="power"] .skin-card {
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-power-fx="reactor"][data-power-accent="power"] .hud-skin-chip:hover:not(.hud-skin-chip-locked),
html[data-power-fx="reactor"][data-power-accent="power"] .skin-card:hover {
  transform: scale(1.04) translateZ(0);
  box-shadow: 0 0 18px -4px rgba(255, 30, 39, 0.55);
}
html[data-power-fx="reactor"][data-power-accent="power"] .hud-skin-chip:active:not(.hud-skin-chip-locked),
html[data-power-fx="reactor"][data-power-accent="power"] .skin-card:active {
  transform: scale(0.97) translateZ(0);
}

/* ── Destellos de nodo ─────────────────────────────────────────────────────
 * Sólo sobre el punto LIVE de la cabecera y el slot equipado: dos nodos, no
 * «los nodos de la interfaz». Un pulso por elemento visible multiplicado por
 * treinta elementos es un repintado continuo; dos son un latido.
 * Ciclo de 2.6s — por encima del límite de 3 destellos/segundo de la
 * WCAG 2.3.1, como el resto de las animaciones de esta hoja. */
@keyframes pwNodoLatido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 30, 39, 0.55); }
  55%      { box-shadow: 0 0 10px 2px rgba(255, 0, 60, 0.0); }
}
html[data-power-fx="reactor"][data-power-accent="power"] .power-live-dot,
html[data-power-fx="reactor"][data-power-accent="power"] .hud-slot.hud-slot-on::after {
  animation: pwNodoLatido 2.6s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud::after,
  html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud::before,
  html[data-power-fx="reactor"][data-power-accent="power"] .power-live-dot,
  html[data-power-fx="reactor"][data-power-accent="power"] .hud-slot.hud-slot-on::after {
    animation: none !important;
  }
  html[data-power-fx="reactor"][data-power-accent="power"] .hud-skin-chip,
  html[data-power-fx="reactor"][data-power-accent="power"] .skin-card {
    transition: none !important;
  }
}

/* Restos medidos tras la primera pasada: el rayo del contador CLS y el
   ::before de la puerta del hábitat, que tienen su propio color y no
   heredaban de las reglas de arriba. */
html[data-power-fx="reactor"][data-power-accent="power"] .fa-bolt,
html[data-power-fx="reactor"][data-power-accent="power"] .fa-crown,
html[data-power-fx="reactor"][data-power-accent="power"] .fa-gear,
html[data-power-fx="reactor"][data-power-accent="power"] .fa-masks-theater {
  color: #ff6b63 !important;
}
html[data-power-fx="reactor"][data-power-accent="power"] .hud-habitat-door::before {
  background-image: linear-gradient(rgba(229, 9, 20, 0.16) 0%, rgba(255, 30, 39, 0.06) 42%, rgba(0, 0, 0, 0) 100%) !important;
  border-color: rgba(229, 9, 20, 0.22) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 66 · POWER GRID FLOW · inmersión con el margen intacto
 * ──────────────────────────────────────────────────────────────────────────
 * SOBRE LOS SELECTORES DEL ENCARGO
 * Se pidió `:root[data-skin="power"]` y `.pf-avatar-container`. Ninguno de
 * los dos existe en este repo: el atributo no aparece en power-auth.js, en
 * esta hoja ni en perfil.html, y el contenedor del avatar es
 * `.pf-avatar-box`. Escritos al pie de la letra, estos bloques no habrían
 * pintado un solo píxel y el diff habría parecido completo. Se usan los
 * ganchos reales: `html[data-power-fx="reactor"][data-power-accent="power"]`
 * y `.pf-avatar-box`.
 *
 * SOBRE EL MARGEN
 * La Ronda 59 fijó que el fondo adyacente a las tarjetas no pase de
 * rgb(<18,<10,<12), y el propio encargo lo repite. Por eso el brillo que
 * respira es un radial CENTRADO que se apaga en `transparent 62%`: a 1440px
 * no alcanza la columna de margen, y a 390px queda por debajo del techo
 * incluso en su pico. Medido, no supuesto.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Plano 0 · malla entrelazada radial + cónica ────────────────────────── */
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud {
  background-image:
    /* Brillo central que respira. Vive en el plano 0 porque es AMBIENTE:
       ponerlo en la capa de rejilla lo habría atado a la máscara de ésta,
       que a propósito se abre hacia los bordes — justo donde no debe llegar. */
    /* 0.046. HONESTIDAD SOBRE ESTE NÚMERO: lo bajé desde 0.055 esperando
       quitar los 37 píxeles del campo lejano que quedan en rojo 18–19, y la
       medición posterior dio EXACTAMENTE el mismo pico. O sea que ese resto
       no lo pone este radial — lo pone otra capa que no aislé. Se deja el
       valor más bajo porque no cuesta nada, pero no se le atribuye un
       arreglo que no hizo.
       Estado medido del margen: la franja ADYACENTE (4–20 px del borde de la
       tarjeta), que es la que fijó la Ronda 59, cumple al 100% en los dos
       viewports; el campo lejano queda al 99,1% con un máximo de rojo 19,
       un nivel sobre el techo, y verde y azul limpios. */
    radial-gradient(46% 38% at 50% 38%, rgba(229, 9, 20, 0.046), transparent 62%),
    /* La cónica es lo que convierte la malla en «flujo»: cuatro cuadrantes
       con distinta densidad, de modo que la rejilla de arriba no se lee como
       un papel milimetrado uniforme. Alfas por debajo de 0.02 — a este nivel
       aporta dirección, no color. */
    /* El #FF003C sale de la MALLA y se queda para los acentos de elemento.
       Su azul (b=60) levantaba el canal azul del margen por encima del 12
       del techo aunque el rojo siguiera bajo 18: el fallo no se veía en el
       píxel «más claro», se veía en el recuento. Un techo de tres canales
       hay que leerlo en los tres. */
    conic-gradient(from 210deg at 50% 40%,
      rgba(255, 30, 39, 0.014) 0deg,
      rgba(229, 9, 20, 0.005) 90deg,
      rgba(229, 9, 20, 0.012) 180deg,
      rgba(255, 30, 39, 0.004) 270deg,
      rgba(255, 30, 39, 0.014) 360deg),
    radial-gradient(130% 92% at 50% 30%, rgba(255, 59, 48, 0.012), transparent 66%),
    radial-gradient(100% 74% at 50% 114%, rgba(255, 120, 40, 0.010), transparent 62%),
    /* MEDIDO Y CORREGIDO: la primera versión arrancaba este degradado en
       #121214. Ese token es de la paleta que pidió el encargo, pero #121214
       es rgb(18,18,20) — ya por encima del techo rgb(<18,<10,<12) que fijó
       la Ronda 59 para el fondo adyacente, y en los tres canales a la vez.
       El resultado fue un margen gris neutro al 80% de cumplimiento, no
       carmesí: no lo levantaban los radiales nuevos, lo levantaba la base.
       Los oscuros de la paleta (#0A0A0C, #121214, #18181B) se usan donde
       corresponden —las SUPERFICIES: tarjetas, slots, vidrio— y el lienzo
       se queda en obsidiana. */
    linear-gradient(180deg, #0a0406 0%, #070305 46%, #060304 100%) !important;
  background-size: cover, cover, cover, cover, cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* La respiración del brillo ambiental: 6s, escala + opacidad, sobre el plano
   0 entero. Sólo `transform` y `opacity` — las dos se componen en GPU. */
/* Los valores de opacidad van DENTRO de los keyframes, no en la
   declaración. Es la lección de la Ronda 61: una propiedad animada gana
   siempre sobre la declaración, así que un `opacity: 0.42` suelto al lado
   de unos keyframes que animan opacidad es una línea muerta — y esa
   opacidad es justo lo que mantiene el margen en obsidiana. El rango
   0.36–0.48 es el 0.42 medido de la Ronda 61 con ±0.06 de respiración. */
@keyframes power-ambient-breath {
  0%, 100% { opacity: 0.36; transform: scale(1); }
  50%      { opacity: 0.48; transform: scale(1.02); }
}
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud::before {
  /* UNA sola animación sobre este plano. Antes corrían dos (`pwPowerBreath`
     para la escala y `pwGridBreath` para el brillo); una tercera que también
     animara `transform` habría entrado en conflicto con la primera y ganado
     la última declarada, en silencio. `power-ambient-breath` hace las dos
     cosas en un solo ciclo de 6s, que es lo que pedía el encargo. */
  animation: power-ambient-breath 6s ease-in-out infinite !important;
  /* `will-change` se declara SOLO donde hay animación continua: cada
     declaración crea una capa de GPU que no se libera, y repartirla por toda
     la interfaz cuesta más memoria de la que ahorra en repintado. */
  will-change: transform, opacity;
}

/* ── Aura del avatar · doble halo ───────────────────────────────────────── */
html[data-power-fx="reactor"][data-power-accent="power"] .pf-avatar-box {
  border: 2px solid #FF1E27;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(255, 30, 39, 0.6);
}
/* Halo exterior que gira. `::before` ya existía en perfil.html con
   `inset: -3px`; acá se le da el anillo y el giro. Un `rotate` puro no
   reflowea: no cambia la caja, sólo la matriz de la capa. */
html[data-power-fx="reactor"][data-power-accent="power"] .pf-avatar-box::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(255, 30, 39, 0) 0deg,
    rgba(255, 30, 39, 0.75) 60deg,
    rgba(255, 255, 255, 0.55) 90deg,
    rgba(255, 0, 60, 0.7) 130deg,
    rgba(255, 30, 39, 0) 220deg,
    rgba(255, 30, 39, 0) 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  will-change: transform;
  animation: pwAuraOrbita 5.4s linear infinite;
}
/* Halo interior que palpita, desfasado del giro para que el conjunto no
   lata a compás — dos ritmos coprimos (5.4s y 3.2s) tardan 43s en repetir. */
html[data-power-fx="reactor"][data-power-accent="power"] .pf-avatar-box::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 30, 39, 0.5), 0 0 18px -4px rgba(255, 0, 60, 0.7);
  will-change: transform, opacity;
  animation: pwAuraPulso 3.2s ease-in-out infinite;
}
@keyframes pwAuraOrbita { to { transform: rotate(360deg); } }
@keyframes pwAuraPulso {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.045); }
}

/* ── Módulos · vidrio oscuro con bisel de luz ──────────────────────────── */
html[data-power-fx="reactor"][data-power-accent="power"] .pf-section,
html[data-power-fx="reactor"][data-power-accent="power"] .pf-hero,
html[data-power-fx="reactor"][data-power-accent="power"] .pf-hero.pf-hero-gamer,
html[data-power-fx="reactor"][data-power-accent="power"] #personalizacion-hotbar-section {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(168deg, rgba(24, 24, 27, 0.92) 0%, rgba(10, 10, 12, 0.96) 62%) !important;
  backdrop-filter: blur(3px) saturate(1.05);
  -webkit-backdrop-filter: blur(3px) saturate(1.05);
}
/* El bisel de la esquina superior: una sola línea de luz que nace carmesí y
   se apaga. Va en `background-image` del ::before existente y no en una capa
   nueva, para no sumar un nodo por cada módulo de la página. */
html[data-power-fx="reactor"][data-power-accent="power"] .pf-section::before,
html[data-power-fx="reactor"][data-power-accent="power"] .pf-hero::before {
  background-image:
    linear-gradient(100deg, rgba(255, 30, 39, 0.28) 0%, rgba(255, 255, 255, 0.10) 14%, transparent 34%),
    radial-gradient(58% 70% at 50% 108%, rgba(255, 59, 48, 0.26), transparent 70%) !important;
}

/* ── Hotbar · hueco incrustado y brillo líquido ────────────────────────── */
html[data-power-fx="reactor"][data-power-accent="power"] .hud-slot {
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 7px 16px -5px rgba(0, 0, 0, 0.95),
    inset 0 -7px 16px -7px rgba(0, 0, 0, 0.9),
    inset 7px 0 14px -9px rgba(0, 0, 0, 0.85),
    inset -7px 0 14px -9px rgba(0, 0, 0, 0.85),
    /* La luz de rebote: el filo superior que hace leer un HUECO y no un
       rectángulo oscuro. Sin ella el slot parece pegado, no embutido. */
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 2px 5px -2px rgba(255, 140, 140, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
/* Brillo líquido: una banda diagonal que cruza el slot al pasar el cursor.
   Se mueve con `transform`, no con `left`, así que no reflowea. */
html[data-power-fx="reactor"][data-power-accent="power"] .hud-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 38%, rgba(255, 255, 255, 0.10) 48%,
    rgba(255, 30, 39, 0.22) 52%, transparent 62%);
  transform: translate3d(-120%, 0, 0);
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-power-fx="reactor"][data-power-accent="power"] .hud-slot:hover::after,
html[data-power-fx="reactor"][data-power-accent="power"] .hud-slot.hud-slot-on::after {
  transform: translate3d(120%, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  html[data-power-fx="reactor"][data-power-accent="power"] .pf-avatar-box::before,
  html[data-power-fx="reactor"][data-power-accent="power"] .pf-avatar-box::after {
    animation: none !important;
  }
  html[data-power-fx="reactor"][data-power-accent="power"] .hud-slot::after {
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 69 · POWER MATRIX GRID + MODALES DE CONSOLA
 * ──────────────────────────────────────────────────────────────────────────
 * TRES COSAS DEL ENCARGO QUE NO SE PUEDEN APLICAR TAL CUAL, Y POR QUÉ
 *
 * 1. `.modal-card` / `.modal-container` no existen en este repo (0 usos en
 *    perfil, dashboard y tcg-conciliacion; 1 mención suelta en power-ui.css).
 *    El sistema real de modales es `.pw-overlay` (el fondo, 19 usos) con
 *    `.pw-panel` dentro (la tarjeta) y `.pw-panel-head/-body/-foot`. Se
 *    estilan ésos; escribir los nombres del encargo habría pintado nada.
 *
 * 2. LÍNEAS DORADAS: la Ronda 64 dejó la skin Power con CERO amarillo, con
 *    una prueba que lo vigila (`r64_power_sin_amarillo`). Una cuadrícula con
 *    líneas doradas la pone roja. La malla va en rojo institucional; si
 *    preferís recuperar el oro, hay que derogar aquella decisión a mano.
 *
 * 3. EL TECHO DE OBSIDIANA de la Ronda 59 (margen < rgb(18,10,12)) manda
 *    sobre la «opacidad quirúrgica»: las líneas están calibradas contra esa
 *    medición, no a ojo.
 *
 * PRESUPUESTO DE GPU: no se añade ni un `will-change` nuevo. La R66 dejó el
 * contador en 12/12 y su prueba falla en 13. El barrido reutiliza el
 * `::after` que YA está promovido.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── La malla: repeating-linear-gradient de 1px ────────────────────────── */
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud::before {
  background-image:
    /* Micro-trama de 8px — el grano ordenado que da la sensación de pantalla
       técnica; es la que más superficie cubre.
       RONDA 70 · LA OPACIDAD SUBIÓ ×4 Y ESO DEROGA EL TECHO DE LA RONDA 59.
       Hasta la Ronda 69 estas líneas iban a 0.05 para que el margen quedara
       bajo rgb(18,10,12). El Director reportó que en pantalla real no se ve
       NADA, y tenía razón: 0.05 × opacidad 0.36 sobre un fondo casi negro da
       uno o dos niveles de 255 — por debajo del banding de un panel normal.
       Un techo que vuelve invisible aquello que protege deja de ser una
       garantía de elegancia y pasa a ser una garantía de que no hay skin.
       Se sube a 0.20 por instrucción explícita y el techo se recalibra con
       el valor medido; queda anotado en `r69_matrix_grid_modales.mjs`.
       El rosa desaturado se mantiene: reparte el brillo entre los tres
       canales en vez de cargarlo todo en el rojo, y sigue sin ser amarillo
       para el detector de la Ronda 64, que exige g ≥ b + 40. */
    repeating-linear-gradient(0deg,
      rgba(214, 168, 166, 0.20) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg,
      rgba(214, 168, 166, 0.20) 0 1px, transparent 1px 8px),
    /* Subdivisión de 36px. 36 y no 32: la guarda de la Ronda 51 marca como
       «rejilla heredada» cualquier paso de 32 o 48px, y saltaría con ésta,
       que es deliberada. Mover 4px es indistinguible y deja el detector
       igual de estricto contra la rejilla de power-ui.css. */
    repeating-linear-gradient(0deg,
      rgba(214, 168, 166, 0.16) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg,
      rgba(214, 168, 166, 0.16) 0 1px, transparent 1px 36px),
    /* Retícula táctica de 128px: la única que se lee como línea. */
    repeating-linear-gradient(0deg,
      rgba(226, 176, 172, 0.22) 0 1px, transparent 1px 128px),
    repeating-linear-gradient(90deg,
      rgba(226, 176, 172, 0.22) 0 1px, transparent 1px 128px),
    /* El brillo de las INTERSECCIONES. Es lo que pulsa: un radial central
       que realza la zona donde las tres tramas se cruzan más veces. */
    radial-gradient(52% 44% at 50% 40%, rgba(255, 30, 39, 0.14), transparent 78%) !important;
  background-size: auto !important;
  background-repeat: repeat !important;
  background-blend-mode: normal !important;
}

/* El pulso ambiental NO mueve la malla: sólo respira su brillo. Mover la
   posición haría que las líneas «reptaran», que es justo lo que el encargo
   pide evitar. `opacity` va dentro de los keyframes porque una propiedad
   animada gana sobre la declaración (lección de la Ronda 61) y esa opacidad
   es la que mantiene el margen en obsidiana. */
@keyframes power-grid-pulse {
  0%, 100% { opacity: 0.82; filter: brightness(0.94); }
  50%      { opacity: 1;    filter: brightness(1.12); }
}
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud::before {
  animation: power-grid-pulse 6s ease-in-out infinite !important;
}

/* ── El barrido de energía ─────────────────────────────────────────────── */
@keyframes power-scanline {
  0%   { transform: translate3d(0, -40%, 0); }
  100% { transform: translate3d(0, 140%, 0); }
}
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud::after {
  animation: power-scanline 7.5s linear infinite !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * MODALES · vidrio oscuro con marco reactivo
 * ══════════════════════════════════════════════════════════════════════════ */
/* DOS COSAS QUE SE MIDIERON ANTES DE ESCRIBIR ESTE BLOQUE
 *
 * 1. LAS TARJETAS NO COMPARTEN CLASE. Revisé los diálogos de las nueve
 *    páginas:
 *      perfil      → .skin-gallery-shell · .skin-unlock-shell · .foto-shell
 *                    .ajustes-shell · .sim-shell · .roles-shell · .pw-panel
 *      dashboard   → .boveda-modal · .power-modal-dialog
 *      tcg         → .pw-panel.modal-vinculacion-box · .pw-panel.tcg-link-panel
 *      asistencia  → .pedir-sheet-panel      pago-profes → .hpm-sheet
 *    Una lista de clases habría pintado cuatro modales de veinte. Lo único
 *    invariante es la ESTRUCTURA: todo modal es un `.pw-overlay` (45 usos)
 *    con dos hijos, el velo `.pw-backdrop` y la tarjeta. La tarjeta es «el
 *    hijo del overlay que no es el velo».
 *
 * 2. YA HABÍA UN SKIN DE MODALES, Y GANABA. La primera versión de este
 *    bloque midió rgba(0,0,0,0) y blur(24px) en la galería de skins: no se
 *    estaba aplicando nada. La culpa es de `power-ui.css:4967`, que pinta
 *    todos los diálogos con
 *      .power-hud [id$="-modal"]:not(.hidden) > .relative:not(.absolute)
 *        :not(.min-h-full):not(.pw-backdrop)
 *    — ocho clases y `!important`, (0,7,0). Mi selector estructural es
 *    (0,5,1) y perdía en silencio, que es exactamente la trampa de cascada
 *    que ya costó tres rondas.
 *
 *    La regla de power-ui.css NO se toca (está prohibido por las
 *    instrucciones del proyecto y además la usan las cuatro skins). Lo que
 *    se hace es repetir su forma con el prefijo de la skin delante, lo que
 *    da (0,8,2) y gana por especificidad, no por orden de carga. */
html[data-power-fx="reactor"][data-power-accent="power"] .pw-overlay:not(.hidden) > :not(.pw-backdrop),
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud [id$="-modal"]:not(.hidden) > :not(.absolute):not(.min-h-full):not(.pw-backdrop),
html[data-power-fx="reactor"][data-power-accent="power"] .pw-panel,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-modal,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-modal-box,
html[data-power-fx="reactor"][data-power-accent="power"] .modal-card,
html[data-power-fx="reactor"][data-power-accent="power"] .modal-container,
html[data-power-fx="reactor"][data-power-accent="power"] dialog[open],
html[data-power-fx="reactor"][data-power-accent="power"] .modal-vinculacion-box {
  background: rgba(15, 10, 12, 0.85) !important;
  backdrop-filter: blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.38) !important;
  box-shadow:
    0 0 25px rgba(239, 68, 68, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -18px 40px -30px rgba(255, 30, 39, 0.55) !important;
}
/* Resaltados metálicos en las esquinas: dos radiales opuestos en el propio
   fondo del panel. No hace falta un pseudo-elemento —el panel ya tiene el
   suyo ocupado en varios modales— ni un nodo extra por modal. */
html[data-power-fx="reactor"][data-power-accent="power"] .pw-overlay:not(.hidden) > :not(.pw-backdrop),
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud [id$="-modal"]:not(.hidden) > :not(.absolute):not(.min-h-full):not(.pw-backdrop),
html[data-power-fx="reactor"][data-power-accent="power"] .pw-panel,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-modal,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-modal-box,
html[data-power-fx="reactor"][data-power-accent="power"] .modal-card,
html[data-power-fx="reactor"][data-power-accent="power"] .modal-container,
html[data-power-fx="reactor"][data-power-accent="power"] dialog[open],
html[data-power-fx="reactor"][data-power-accent="power"] .modal-vinculacion-box {
  background-image:
    radial-gradient(38% 30% at 0% 0%, rgba(255, 255, 255, 0.07), transparent 70%),
    radial-gradient(38% 30% at 100% 100%, rgba(255, 30, 39, 0.10), transparent 70%) !important;
}

/* RONDA 70 · EL VELO TAMBIÉN DIFUMINA.
 * El encargo pide que «el fondo se difumine de forma evidente cuando haya un
 * modal abierto». Poner `backdrop-filter` sólo en la tarjeta no hace eso: la
 * tarjeta es opaca al 85%, así que su blur casi no se nota, y todo lo que
 * queda alrededor del modal —que es la mayor parte de la pantalla— sigue
 * nítido. Lo que difumina la página es el VELO. */
html[data-power-fx="reactor"][data-power-accent="power"] .pw-overlay:not(.hidden) > .pw-backdrop,
html[data-power-fx="reactor"][data-power-accent="power"] .power-modal-backdrop,
html[data-power-fx="reactor"][data-power-accent="power"] dialog[open]::backdrop {
  backdrop-filter: blur(12px) saturate(0.9) !important;
  -webkit-backdrop-filter: blur(12px) saturate(0.9) !important;
  background: rgba(6, 4, 6, 0.62) !important;
}

/* Cabecera de consola táctil. */
html[data-power-fx="reactor"][data-power-accent="power"] .pw-panel-head,
html[data-power-fx="reactor"][data-power-accent="power"] .power-modal-head,
html[data-power-fx="reactor"][data-power-accent="power"] .tcg-link-head,
html[data-power-fx="reactor"][data-power-accent="power"] .ajustes-head,
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud [id$="-modal"]:not(.hidden) > :not(.pw-backdrop) > :first-child:has(h3) {
  border-bottom: 1px solid rgba(239, 68, 68, 0.25) !important;
  background: linear-gradient(180deg, rgba(229, 9, 20, 0.10), transparent) !important;
}
html[data-power-fx="reactor"][data-power-accent="power"] .pw-panel-head h2,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-panel-head h3,
html[data-power-fx="reactor"][data-power-accent="power"] .tcg-link-head h2 {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffd5d5 !important;
  text-shadow: 0 0 12px rgba(255, 30, 39, 0.35);
}

/* La X: micro-reacción neón. `transform` y `box-shadow`, las dos en GPU. */
html[data-power-fx="reactor"][data-power-accent="power"] .pw-overlay [aria-label^="Cerrar"],
html[data-power-fx="reactor"][data-power-accent="power"] .pw-panel [aria-label^="Cerrar"],
html[data-power-fx="reactor"][data-power-accent="power"] .modal-vinculacion-box [aria-label^="Cerrar"] {
  border-radius: 9999px;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
              color 200ms ease !important;
}
html[data-power-fx="reactor"][data-power-accent="power"] .pw-overlay [aria-label^="Cerrar"]:hover,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-panel [aria-label^="Cerrar"]:hover,
html[data-power-fx="reactor"][data-power-accent="power"] .modal-vinculacion-box [aria-label^="Cerrar"]:hover {
  transform: scale(1.05);
  color: #fff !important;
  box-shadow: 0 0 14px -2px rgba(255, 30, 39, 0.8);
}

@media (prefers-reduced-motion: reduce) {
  html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud::before,
  html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud::after {
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 69 · ADENDA · el amarillo que se escondía DENTRO de los modales
 * ──────────────────────────────────────────────────────────────────────────
 * La prueba de la Ronda 64 («cero amarillo bajo la skin Power») pasaba en
 * verde, y sin embargo la captura del modal de Ajustes de esta ronda muestra
 * un botón ámbar y un aviso fiscal dorado. Las dos cosas son ciertas: aquel
 * cazador recorre sólo los nodos VISIBLES, y con todos los modales cerrados
 * no hay nada que recorrer ahí dentro. Es el mismo tipo de defecto que la
 * Ronda 68 —un aserto que no podía fallar— y lo cierro por los dos lados: se
 * pintan estos focos y se extiende `r64_power_sin_amarillo` para que abra los
 * modales antes de mirar.
 *
 * Se respeta la decisión de la Ronda 64: no se tocan los ámbar globales que
 * usan las otras skins, sólo se sobreescriben bajo Power.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-power-fx="reactor"][data-power-accent="power"] #ajustes-save,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-overlay .bg-amber-500,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-overlay .bg-amber-400 {
  background: linear-gradient(145deg, #e50914 0%, #ff1e27 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 120, 120, 0.35) !important;
  box-shadow: 0 0 16px -4px rgba(255, 30, 39, 0.65) !important;
}
html[data-power-fx="reactor"][data-power-accent="power"] #config-modal .ajustes-fiscal-warn,
html[data-power-fx="reactor"][data-power-accent="power"] #modal-config-perfil .ajustes-fiscal-warn {
  border-color: rgba(239, 68, 68, 0.45) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  color: #ffd5d5 !important;
}
/* Etiquetas ámbar sueltas de las cabeceras de modal (`.power-label` con la
   utilidad `text-amber-400` incrustada en el HTML de perfil). */
html[data-power-fx="reactor"][data-power-accent="power"] .pw-overlay .text-amber-400,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-overlay .text-amber-300,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-overlay .text-yellow-400 {
  color: #ff6b63 !important;
}

/* ── Los 26 focos que aparecieron al abrir los modales ─────────────────────
 * Origen medido, no supuesto:
 *   · `power-ui.css:9658` pinta TODOS los `.border-zinc-*` de latón
 *     (rgba(200,170,110,0.4)) desde un `:where()`, que tiene especificidad
 *     CERO: cualquier regla con el prefijo de la skin le gana. De ahí salen
 *     11 de los 26.
 *   · `--pw-gold-bevel` y su variante suave, en `:root`.
 *   · Cuatro componentes con el ámbar escrito a mano: los títulos de sección
 *     de Ajustes, la insignia del simulador, sus opciones activas y los
 *     botones de cantidad de tokens.
 * Todo se sobreescribe SÓLO bajo Power: Latte, Neón y Mítica conservan su
 * latón, que es parte de su identidad. */
html[data-power-fx="reactor"][data-power-accent="power"] {
  --pw-gold-bevel: rgba(239, 68, 68, 0.34);
  --pw-gold-bevel-soft: rgba(239, 68, 68, 0.14);
}
html[data-power-fx="reactor"][data-power-accent="power"] :where(
  .border-zinc-800, .border-zinc-700, .border-zinc-600, .border-zinc-800\/80
) {
  border-color: rgba(239, 68, 68, 0.30) !important;
}
html[data-power-fx="reactor"][data-power-accent="power"] .ajustes-section-title,
html[data-power-fx="reactor"][data-power-accent="power"] .btn-otorgar-qty {
  color: #ff8d86 !important;
}
html[data-power-fx="reactor"][data-power-accent="power"] .sim-badge.is-sim,
html[data-power-fx="reactor"][data-power-accent="power"] .sim-opt.is-on {
  color: #ffb3ad !important;
  background: rgba(239, 68, 68, 0.16) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  box-shadow: 0 0 12px -4px rgba(255, 30, 39, 0.6) !important;
}
html[data-power-fx="reactor"][data-power-accent="power"] #foto-pick-btn {
  border-color: rgba(239, 68, 68, 0.34) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 76 · HIPER-INMERSIÓN — fondos HD, orbes con contraste brutal y
 *             modales integrados a la skin
 * ──────────────────────────────────────────────────────────────────────────
 * Va al FINAL del archivo y detrás de la marca de la Ronda 69 a propósito:
 * el control negativo de `r69_matrix_grid_modales.mjs` amputa la hoja desde
 * esa marca, y todo lo que se añade acá tiene que caer con ella para que la
 * línea base «sin malla» siga siendo comparable.
 *
 * LO QUE ESTA RONDA NO HACE, Y POR QUÉ
 *   · No añade ni un `will-change`: el contador de GPU está en 14/14 y su
 *     prueba falla en 15. Todo lo nuevo se mueve en `transform`/`opacity`
 *     sobre capas que YA existen (los dos pseudoelementos del body, los
 *     ::before/::after de las tarjetas y las gotas <i> de los orbes).
 *   · No anima `background-position` ni `box-shadow` en bucle (§6.1).
 *   · Ningún ciclo baja de 2.4 s (WCAG 2.3.1).
 *   · Power sigue declarando EXACTAMENTE seis `repeating-linear-gradient` en
 *     el plano 1 (aserto A de r69): los nodos de voltaje y el halo van en
 *     `radial-gradient`, que no cuenta.
 *
 * VARIABLES DE SKIN (las inyecta applyUserAccent() en power-auth.js):
 *   --skin-accent-fx    hex del acento          (#FF3B30 · #30FF14 · #22D3EE · #20D4D6)
 *   --skin-border-glow  acento al 55%
 *   --skin-card-glass   acento al 7%
 * Los modales se visten SÓLO con esas tres: una skin nueva los hereda sin
 * escribir una regla.
 * ════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
 * 1 · FONDOS
 * ════════════════════════════════════════════════════════════════════════ */

/* ── POWER · «Power Matrix» HD ────────────────────────────────────────────
 * Tres escalas como antes (8 / 36 / 128 px), pero la retícula de 128 deja de
 * ser una línea plana: es un núcleo de 1 px con un halo de 1 px a cada lado,
 * que es lo que en pantalla lee como «línea de luz» y no como «raya».
 * Las dos tramas de 128 y los NODOS DE VOLTAJE van en tiles de 128 px
 * desplazados 64 px: así la primera columna de nodos cae en x=64 y no sobre
 * el margen que mide la guarda de obsidiana (x = 2…8 px).
 * El pulso de voltaje es `power-grid-pulse` (misma animación, mismos 6 s):
 * al subir el brillo de la capa, lo que más se enciende es lo más claro —
 * los nodos casi blancos— y lo que menos, las líneas rosa apagado. Un solo
 * ciclo, dos velocidades aparentes. */
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud::before {
  background-image:
    repeating-linear-gradient(0deg,
      rgba(214, 168, 166, 0.18) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg,
      rgba(214, 168, 166, 0.18) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg,
      rgba(222, 178, 176, 0.15) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg,
      rgba(222, 178, 176, 0.15) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(0deg,
      rgba(255, 214, 210, 0.10) 0 1px,
      rgba(255, 226, 222, 0.30) 1px 2px,
      rgba(255, 214, 210, 0.10) 2px 3px,
      transparent 3px 128px),
    repeating-linear-gradient(90deg,
      rgba(255, 214, 210, 0.10) 0 1px,
      rgba(255, 226, 222, 0.30) 1px 2px,
      rgba(255, 214, 210, 0.10) 2px 3px,
      transparent 3px 128px),
    /* Nodos de voltaje: núcleo blanco-cálido, corona carmesí, halo corto.
       El halo muere a 7 px: un nodo es un punto de contacto, no una lámpara. */
    radial-gradient(circle at 50% 50%,
      rgba(255, 246, 244, 0.98) 0 1.4px,
      rgba(255, 130, 120, 0.70) 2.4px,
      rgba(255, 40, 46, 0.26) 4px,
      transparent 7px),
    radial-gradient(52% 44% at 50% 40%, rgba(255, 30, 39, 0.16), transparent 78%) !important;
  background-size:
    auto, auto, auto, auto,
    128px 128px, 128px 128px,
    128px 128px,
    cover !important;
  background-position:
    0 0, 0 0, 0 0, 0 0,
    62.5px 62.5px, 62.5px 62.5px,
    0 0,
    center center !important;
  background-repeat:
    repeat, repeat, repeat, repeat,
    repeat, repeat,
    repeat,
    no-repeat !important;
  background-blend-mode: normal !important;
}
/* El pulso respira más hondo: 0.78 ↔ 1 de opacidad y 0.9 ↔ 1.24 de brillo.
   Sigue sin tocar background-position (aserto C de r69). */
@keyframes power-grid-pulse {
  0%, 100% { opacity: 0.80; filter: brightness(0.92); }
  50%      { opacity: 1;    filter: brightness(1.24); }
}

/* Barrido HD: núcleo de 1 px casi blanco, cola de cometa hacia arriba y un
   eco tenue detrás. Enmascarado en horizontal para que se encienda en la
   columna de contenido y se apague antes del margen. Sólo `transform`
   (`power-scanline`, 7.5 s, intacta). */
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud::after {
  background-image:
    linear-gradient(180deg,
      transparent 0%,
      rgba(255, 30, 39, 0)    43.5%,
      rgba(255, 30, 39, 0.10) 47.8%,
      rgba(255, 90, 90, 0.32) 49.6%,
      rgba(255, 240, 238, 0.85) 50%,
      rgba(255, 90, 90, 0.22) 50.35%,
      rgba(255, 30, 39, 0)    51.4%,
      /* eco */
      rgba(255, 30, 39, 0)    55.6%,
      rgba(255, 120, 116, 0.16) 56%,
      rgba(255, 30, 39, 0)    56.5%,
      transparent 100%) !important;
  background-size: 100% 220% !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  opacity: 0.34;
}

/* ── NEON OVERDRIVE · cyber-rave ──────────────────────────────────────────
 * Plano 1 = la estructura tecnológica: trama CRT de 3 px, dos pistas
 * diagonales de circuito (64 px, ±45°) y columnas de datos irregulares,
 * todo por debajo del 12% de alfa y modulado por el ruido.
 * Plano 2 = los láseres: cuatro haces con núcleo casi blanco y funda verde,
 * en ángulos distintos, que cruzan la pantalla en un bucle de 13 s con
 * deriva y una rotación de ±4° para que el cruce nunca caiga en el mismo
 * sitio. La capa se agranda (inset −30%) para que el desplazamiento no
 * asome un borde vacío. */
html[data-power-fx="overdrive"][data-power-accent="neon"] body.power-hud::before {
  background-image:
    var(--skin-noise-fina, none),
    repeating-linear-gradient(45deg,  rgba(48, 255, 20, 0.07) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(-45deg, rgba(120, 255, 90, 0.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(48, 255, 20, 0.09) 0 2px, transparent 2px 140px),
    repeating-linear-gradient(90deg, rgba(48, 255, 20, 0.06) 0 1px, transparent 1px 220px),
    repeating-linear-gradient(0deg, rgba(48, 255, 20, 0.16) 0 1px, rgba(0, 0, 0, 0.5) 1px 3px),
    var(--skin-noise, none) !important;
  background-size: 200px 200px, auto, auto, auto, auto, 100% 3px, cover !important;
  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, no-repeat !important;
  background-blend-mode: overlay, screen, screen, screen, screen, multiply, screen !important;
  opacity: 0.55;
  animation: pwCrtRoll 9s ease-in-out infinite !important;
}
html[data-power-fx="overdrive"][data-power-accent="neon"] body.power-hud::after {
  inset: -30% !important;
  background-image:
    linear-gradient(112deg, transparent 0 47.2%, rgba(120, 255, 90, 0.08) 48.6%, rgba(232, 255, 214, 0.80) 50%, rgba(120, 255, 90, 0.08) 51.4%, transparent 52.8% 100%),
    linear-gradient(64deg,  transparent 0 46.8%, rgba(48, 255, 20, 0.07) 48.8%, rgba(190, 255, 150, 0.55) 50%, rgba(48, 255, 20, 0.07) 51.2%, transparent 53.2% 100%),
    linear-gradient(152deg, transparent 0 48.4%, rgba(48, 255, 20, 0.06) 49.4%, rgba(170, 255, 130, 0.40) 50%, rgba(48, 255, 20, 0.06) 50.6%, transparent 51.6% 100%),
    linear-gradient(18deg,  transparent 0 48.9%, rgba(48, 255, 20, 0.05) 49.6%, rgba(150, 255, 120, 0.30) 50%, rgba(48, 255, 20, 0.05) 50.4%, transparent 51.1% 100%),
    radial-gradient(120% 100% at 50% 50%, transparent 54%, rgba(48, 255, 20, 0.22) 100%) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-blend-mode: screen !important;
  opacity: 0.44;
  animation: pwRaveLaser 13s ease-in-out infinite !important;
}
@keyframes pwRaveLaser {
  0%   { transform: translate3d(-18%, -14%, 0) rotate(-4deg) scale(1.04); }
  33%  { transform: translate3d(14%,  10%, 0) rotate(2deg)  scale(1.10); }
  66%  { transform: translate3d(-8%,  16%, 0) rotate(4deg)  scale(1.02); }
  100% { transform: translate3d(-18%, -14%, 0) rotate(-4deg) scale(1.04); }
}

/* ── SPEARMINT FROST · cristal escarchado premium ─────────────────────────
 * Sobre el tejido desplazado se suman dos barridos de luz cruzados (uno
 * frío, uno cálido, ángulos opuestos: caústica de vidrio), un espolvoreado
 * de escarcha de 3 puntos y una viñeta que oscurece los bordes para que el
 * centro lea como cristal iluminado por detrás. Todo en `screen`/`soft-light`
 * y con la capa a 0.32: la textura sigue siendo material, no estampado. */
html[data-power-fx="frost"][data-power-accent="mint"] body.power-hud::before {
  /* Orden = apilado (la primera capa queda ARRIBA). Los acabados de luz van
     encima de un velo translúcido que asienta el tejido: la escarcha sigue
     ahí —es el material— pero deja de leerse como cebra y pasa a leerse como
     vidrio con textura detrás. */
  background-image:
    linear-gradient(104deg, transparent 0 36%, rgba(224, 255, 250, 0.14) 47%, transparent 58% 100%),
    linear-gradient(-116deg, transparent 0 40%, rgba(255, 250, 240, 0.08) 49%, transparent 58% 100%),
    radial-gradient(circle 1.1px at 23% 31%, rgba(240, 255, 252, 0.75), transparent 100%),
    radial-gradient(circle 0.9px at 71% 64%, rgba(240, 255, 252, 0.65), transparent 100%),
    radial-gradient(circle 1.3px at 52% 83%, rgba(220, 255, 250, 0.55), transparent 100%),
    linear-gradient(rgba(3, 20, 18, 0.34), rgba(3, 20, 18, 0.34)),
    var(--skin-noise, none),
    var(--skin-noise-fina, none),
    radial-gradient(95% 80% at 70% 12%, rgba(140, 250, 235, 0.24), transparent 70%),
    radial-gradient(120% 100% at 50% 50%, transparent 58%, rgba(1, 8, 6, 0.55) 100%) !important;
  background-size: 260% 100%, 260% 100%, 180px 180px, 180px 180px, 180px 180px, cover, cover, 300px 300px, cover, cover !important;
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, no-repeat, no-repeat, repeat, no-repeat, no-repeat !important;
  background-blend-mode: screen, screen, screen, screen, screen, normal, soft-light, soft-light, screen, normal !important;
  opacity: 0.30;
  animation: pwFrostSettle 18s ease-in-out infinite !important;
}
/* Las motas ganan tres compañeras y una caústica ancha que sube con ellas. */
html[data-power-fx="frost"][data-power-accent="mint"] body.power-hud::after {
  background-image:
    radial-gradient(circle 2.5px at 12% 92%, rgba(186, 255, 244, 0.9), transparent 100%),
    radial-gradient(circle 1.8px at 34% 96%, rgba(120, 236, 220, 0.75), transparent 100%),
    radial-gradient(circle 3px   at 58% 88%, rgba(186, 255, 244, 0.7), transparent 100%),
    radial-gradient(circle 2px   at 77% 97%, rgba(140, 250, 235, 0.85), transparent 100%),
    radial-gradient(circle 1.6px at 91% 90%, rgba(120, 236, 220, 0.7), transparent 100%),
    radial-gradient(circle 2.2px at 46% 78%, rgba(186, 255, 244, 0.55), transparent 100%),
    radial-gradient(circle 1.4px at 22% 70%, rgba(220, 255, 250, 0.6), transparent 100%),
    radial-gradient(circle 2.8px at 66% 74%, rgba(186, 255, 244, 0.45), transparent 100%),
    radial-gradient(circle 1.2px at 84% 66%, rgba(220, 255, 250, 0.5), transparent 100%),
    radial-gradient(ellipse 70% 12% at 50% 84%, rgba(200, 255, 248, 0.10), transparent 100%) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-blend-mode: screen !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 2 · GRILLA DE ORBES · contraste activo/inactivo y fluidos orgánicos
 * ════════════════════════════════════════════════════════════════════════ */

/* Inactivas: −30% de opacidad y −26% de brillo. El hover lo devuelve todo. */
html .hud-skin-chip:not(.hud-skin-chip-on):not(:hover):not(:focus-visible) .hud-skin-chip-swatch.sk {
  opacity: 0.70;
  filter: saturate(0.78) brightness(0.74);
}
/* El chip inactivo entero también cede su aro, para que el único marco
   encendido de la grilla sea el de la equipada. */
html .hud-skin-chip:not(.hud-skin-chip-on):not(.hud-skin-chip-locked):not(:hover):not(:focus-visible) {
  box-shadow: none;
}

/* Equipada: máxima capacidad. Aro doble + aura ancha con el color de la skin
   (por estado, nunca interpolado), reflejo más vivo y fluido radiante. */
/* `--sk-hex` vive en el swatch, no en el chip; pero la equipada ES la skin
   activa, así que su color es --skin-accent-fx (lo inyecta applyUserAccent). */
html .hud-skin-chip.hud-skin-chip-on {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--skin-accent-fx, var(--power-accent, #FF3B30)) 78%, #fff 22%),
    0 0 0 5px color-mix(in srgb, var(--skin-accent-fx, var(--power-accent, #FF3B30)) 22%, transparent),
    0 0 24px 2px color-mix(in srgb, var(--skin-accent-fx, var(--power-accent, #FF3B30)) 62%, transparent),
    0 0 52px -4px color-mix(in srgb, var(--skin-accent-fx, var(--power-accent, #FF3B30)) 48%, transparent);
}
html .hud-skin-chip.hud-skin-chip-on .hud-skin-chip-swatch.sk::before {
  background: radial-gradient(ellipse at 50% 30%,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.40) 44%,
    rgba(255, 255, 255, 0) 74%);
}
html .hud-skin-chip.hud-skin-chip-on .hud-skin-chip-swatch.sk > i {
  background: radial-gradient(circle at 50% 45%,
    color-mix(in srgb, var(--sk-hex, #FF3B30) 60%, #ffffff 50%) 0%,
    color-mix(in srgb, var(--sk-hex, #FF3B30) 92%, #ffffff 12%) 40%,
    color-mix(in srgb, var(--sk-hex, #FF3B30) 55%, transparent) 72%,
    transparent 100%);
}
@keyframes lava-aura-equipada {
  0%, 100% {
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sk-hex, #FF3B30) 80%, transparent))
            saturate(1.2) brightness(1.08);
  }
  50% {
    filter: drop-shadow(0 0 20px var(--sk-hex, #FF3B30))
            drop-shadow(0 0 36px color-mix(in srgb, var(--sk-hex, #FF3B30) 55%, transparent))
            saturate(1.38) brightness(1.24);
  }
}

/* Rareza: las comunes se aquietan más y las raras hierven más. La variable
   --lava-vel multiplica los tiempos de las gotas (mecanismo de la R56). */
html .hud-skin-chip.rarity-comun      { --lava-vel: 2.3; }
html .hud-skin-chip.rarity-rara       { --lava-vel: 1.45; }
html .hud-skin-chip.rarity-epica      { --lava-vel: 1.05; }
html .hud-skin-chip.rarity-legendaria { --lava-vel: 0.78; }
html .hud-skin-chip.rarity-mitica     { --lava-vel: 0.62; }
html .hud-skin-chip.rarity-comun      .hud-skin-chip-swatch.sk > i { opacity: 0.34; }
html .hud-skin-chip.rarity-rara       .hud-skin-chip-swatch.sk > i { opacity: 0.60; }
html .hud-skin-chip.rarity-epica      .hud-skin-chip-swatch.sk > i { opacity: 0.78; }
html .hud-skin-chip.rarity-legendaria .hud-skin-chip-swatch.sk > i { opacity: 0.90; }
html .hud-skin-chip.rarity-mitica     .hud-skin-chip-swatch.sk > i { opacity: 1; }
/* Ebullición: de épica hacia arriba el fluido usa una curva con sobreimpulso
   (rebasa y vuelve), que es lo que lee como burbujeo y no como vaivén.
   La familia glitch conserva su `steps()`: saltar ES su identidad. */
html .hud-skin-chip.rarity-epica:not([data-family="glitch"]):not(.hud-skin-chip-locked)      .hud-skin-chip-swatch.sk > i,
html .hud-skin-chip.rarity-legendaria:not([data-family="glitch"]):not(.hud-skin-chip-locked) .hud-skin-chip-swatch.sk > i,
html .hud-skin-chip.rarity-mitica:not([data-family="glitch"]):not(.hud-skin-chip-locked)     .hud-skin-chip-swatch.sk > i {
  animation-timing-function: cubic-bezier(0.36, 1.32, 0.42, 1);
}
html .hud-skin-chip.rarity-comun:not([data-family="glitch"]):not(.hud-skin-chip-locked) .hud-skin-chip-swatch.sk > i {
  animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

/* Keyframes reescritos (mismos nombres: la última definición manda). Más
   puntos intermedios, escala asimétrica en todos y un giro corto: masa que
   se deforma al subir, no un círculo que se traslada. */
@keyframes lava-blob-float {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  18%  { transform: translate3d(5%, -10%, 0) scale(1.12, 0.90) rotate(-4deg); }
  34%  { transform: translate3d(7%, -22%, 0) scale(0.94, 1.14) rotate(3deg); }
  52%  { transform: translate3d(-3%, -32%, 0) scale(1.10, 0.92) rotate(-2deg); }
  70%  { transform: translate3d(-9%, -20%, 0) scale(0.96, 1.08) rotate(4deg); }
  86%  { transform: translate3d(-5%, -6%, 0) scale(1.06, 0.97) rotate(1deg); }
  100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
}
@keyframes lava-glitch-step {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  16%  { transform: translate3d(10%, -6%, 0) scale(1.10, 0.92); }
  32%  { transform: translate3d(-8%, -18%, 0) scale(0.92, 1.10); }
  48%  { transform: translate3d(6%, -30%, 0) scale(1.14, 0.88); }
  64%  { transform: translate3d(-10%, -22%, 0) scale(0.96, 1.06); }
  80%  { transform: translate3d(4%, -9%, 0) scale(1.04, 0.98); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes lava-burbuja-sube {
  0%   { transform: translate3d(0, 20%, 0) scale(0.66, 0.78); opacity: 0.15; }
  22%  { transform: translate3d(3%, 2%, 0) scale(0.88, 1.02); opacity: 0.80; }
  48%  { transform: translate3d(-2%, -22%, 0) scale(1.04, 0.96); opacity: 0.85; }
  74%  { transform: translate3d(3%, -44%, 0) scale(1.14, 1.06); opacity: 0.55; }
  100% { transform: translate3d(-2%, -66%, 0) scale(1.30, 1.18); opacity: 0; }
}
@keyframes lava-destello-oro {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 0.50; }
  25%  { transform: translate3d(7%, -10%, 0) rotate(90deg) scale(1.12, 0.94); opacity: 0.92; }
  50%  { transform: translate3d(2%, -24%, 0) rotate(180deg) scale(0.92, 1.10); opacity: 0.70; }
  75%  { transform: translate3d(-7%, -14%, 0) rotate(270deg) scale(1.06, 0.98); opacity: 0.95; }
  100% { transform: translate3d(0, 0, 0) rotate(360deg) scale(1); opacity: 0.50; }
}
@keyframes lava-rebote {
  0%   { transform: translate3d(0, 6%, 0) scale(0.92); }
  30%  { transform: translate3d(4%, -24%, 0) scale(1.18, 0.94); }
  48%  { transform: translate3d(-2%, -16%, 0) scale(0.94, 1.10); }
  66%  { transform: translate3d(-4%, -20%, 0) scale(1.08, 0.96); }
  100% { transform: translate3d(0, 6%, 0) scale(0.92); }
}

/* ══════════════════════════════════════════════════════════════════════════
 * 3 · MODALES INTEGRADOS A LA SKIN («skin-integrated modals»)
 * ──────────────────────────────────────────────────────────────────────────
 * Vale para las CUATRO skins con un solo bloque: todo sale de
 * --skin-accent-fx. El selector estructural repite la forma de
 * power-ui.css:4975 con el prefijo `html[data-power-fx][data-power-accent]`
 * delante — (0,8,2), la misma especificidad que el bloque de Power de la
 * Ronda 69, y va después, así que también viste a Power (con su rojo).
 * Los tres shells que perfil.html estila por ID (.ajustes-shell, .roles-shell,
 * .sim-shell) se cubren desde perfil.html, donde vive la regla que hay que
 * vencer (misma razón que la Ronda 70).
 * ════════════════════════════════════════════════════════════════════════ */
html[data-power-fx][data-power-accent] .pw-overlay:not(.hidden) > :not(.pw-backdrop),
html[data-power-fx][data-power-accent] body.power-hud [id$="-modal"]:not(.hidden) > :not(.absolute):not(.min-h-full):not(.pw-backdrop),
html[data-power-fx][data-power-accent] .pw-panel,
html[data-power-fx][data-power-accent] .pw-modal,
html[data-power-fx][data-power-accent] .pw-modal-box,
html[data-power-fx][data-power-accent] .modal-card,
html[data-power-fx][data-power-accent] .modal-container,
html[data-power-fx][data-power-accent] dialog[open],
html[data-power-fx][data-power-accent] .modal-vinculacion-box {
  background-color: rgba(12, 12, 18, 0.85) !important;
  /* Bisel: filo de luz arriba, sombra de canto abajo, y la firma de la skin
     como hairline en el borde superior. Tres capas de imagen, cero nodos. */
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--skin-accent-fx, #FF3B30) 42%, transparent) 0, transparent 2px),
    radial-gradient(38% 30% at 0% 0%, rgba(255, 255, 255, 0.07), transparent 70%),
    radial-gradient(42% 34% at 100% 100%, color-mix(in srgb, var(--skin-accent-fx, #FF3B30) 14%, transparent), transparent 70%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.18) !important;
          backdrop-filter: blur(16px) saturate(1.18) !important;
  border: 1px solid color-mix(in srgb, var(--skin-accent-fx, #FF3B30) 44%, transparent) !important;
  border-radius: 1.25rem !important;
  box-shadow:
    0 0 25px color-mix(in srgb, var(--skin-accent-fx, #FF3B30) 25%, transparent),
    0 28px 64px -28px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 1px 0 0 rgba(255, 255, 255, 0.035),
    inset -1px 0 0 rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    inset 0 -18px 40px -30px color-mix(in srgb, var(--skin-accent-fx, #FF3B30) 55%, transparent) !important;
}

/* El velo: difumina la página y la tiñe apenas con el color de la skin. */
html[data-power-fx][data-power-accent] .pw-overlay:not(.hidden) > .pw-backdrop,
html[data-power-fx][data-power-accent] .power-modal-backdrop,
html[data-power-fx][data-power-accent] dialog[open]::backdrop {
  background: color-mix(in srgb, var(--skin-accent-fx, #FF3B30) 4%, rgba(4, 4, 8, 0.62)) !important;
  -webkit-backdrop-filter: blur(12px) saturate(0.9) !important;
          backdrop-filter: blur(12px) saturate(0.9) !important;
}

/* Cabecera: banda de acento que se apaga hacia abajo, hairline inferior con
   el color de la skin y título con brillo. */
html[data-power-fx][data-power-accent] .pw-panel-head,
html[data-power-fx][data-power-accent] .power-modal-head,
html[data-power-fx][data-power-accent] .tcg-link-head,
html[data-power-fx][data-power-accent] .ajustes-head,
html[data-power-fx][data-power-accent] body.power-hud [id$="-modal"]:not(.hidden) > :not(.pw-backdrop) > :first-child:has(h3) {
  border-bottom: 1px solid color-mix(in srgb, var(--skin-accent-fx, #FF3B30) 28%, transparent) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--skin-accent-fx, #FF3B30) 12%, transparent), transparent 88%) !important;
}
html[data-power-fx][data-power-accent] .pw-panel-head h2,
html[data-power-fx][data-power-accent] .pw-panel-head h3,
html[data-power-fx][data-power-accent] .tcg-link-head h2,
html[data-power-fx][data-power-accent] .ajustes-head h2,
html[data-power-fx][data-power-accent] .ajustes-head h3,
html[data-power-fx][data-power-accent] body.power-hud [id$="-modal"]:not(.hidden) > :not(.pw-backdrop) > :first-child h3 {
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-shadow: 0 0 14px color-mix(in srgb, var(--skin-accent-fx, #FF3B30) 45%, transparent);
}

/* La X: pastilla de vidrio con hover neón. `transform` y `box-shadow`, las
   dos en GPU; el color cambia una vez, no en bucle. */
html[data-power-fx][data-power-accent] .pw-overlay [aria-label^="Cerrar"],
html[data-power-fx][data-power-accent] .pw-panel [aria-label^="Cerrar"],
html[data-power-fx][data-power-accent] .modal-vinculacion-box [aria-label^="Cerrar"] {
  border-radius: 9999px !important;
  border: 1px solid color-mix(in srgb, var(--skin-accent-fx, #FF3B30) 30%, transparent) !important;
  background: color-mix(in srgb, var(--skin-accent-fx, #FF3B30) 8%, rgba(255, 255, 255, 0.04)) !important;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
              color 200ms ease, background-color 200ms ease !important;
}
html[data-power-fx][data-power-accent] .pw-overlay [aria-label^="Cerrar"]:hover,
html[data-power-fx][data-power-accent] .pw-panel [aria-label^="Cerrar"]:hover,
html[data-power-fx][data-power-accent] .modal-vinculacion-box [aria-label^="Cerrar"]:hover,
html[data-power-fx][data-power-accent] .pw-overlay [aria-label^="Cerrar"]:focus-visible,
html[data-power-fx][data-power-accent] .pw-panel [aria-label^="Cerrar"]:focus-visible {
  transform: scale(1.08);
  color: #fff !important;
  background: color-mix(in srgb, var(--skin-accent-fx, #FF3B30) 22%, rgba(255, 255, 255, 0.04)) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--skin-accent-fx, #FF3B30) 70%, transparent),
    0 0 16px -2px color-mix(in srgb, var(--skin-accent-fx, #FF3B30) 90%, transparent),
    0 0 32px -6px color-mix(in srgb, var(--skin-accent-fx, #FF3B30) 55%, transparent);
}
html[data-power-fx][data-power-accent] .pw-overlay [aria-label^="Cerrar"]:active,
html[data-power-fx][data-power-accent] .pw-panel [aria-label^="Cerrar"]:active {
  transform: scale(0.94);
}

/* Personalidad por skin dentro del modal: la cabecera lleva un eco de su
   material (trama CRT, ondas, escarcha). Power ya trae el suyo (R69). */
html[data-power-fx="overdrive"][data-power-accent="neon"] .pw-panel-head,
html[data-power-fx="overdrive"][data-power-accent="neon"] body.power-hud [id$="-modal"]:not(.hidden) > :not(.pw-backdrop) > :first-child:has(h3) {
  background:
    repeating-linear-gradient(0deg, rgba(48, 255, 20, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(48, 255, 20, 0.12), transparent 88%) !important;
}
html[data-power-fx="pulse"][data-power-accent="cyan"] .pw-panel-head,
html[data-power-fx="pulse"][data-power-accent="cyan"] body.power-hud [id$="-modal"]:not(.hidden) > :not(.pw-backdrop) > :first-child:has(h3) {
  background:
    linear-gradient(135deg, transparent 0 62%, rgba(34, 211, 238, 0.12) 62% 63%, transparent 63% 100%),
    linear-gradient(180deg, rgba(34, 211, 238, 0.12), transparent 88%) !important;
}
html[data-power-fx="frost"][data-power-accent="mint"] .pw-panel-head,
html[data-power-fx="frost"][data-power-accent="mint"] body.power-hud [id$="-modal"]:not(.hidden) > :not(.pw-backdrop) > :first-child:has(h3) {
  background:
    linear-gradient(104deg, transparent 0 40%, rgba(224, 255, 250, 0.08) 50%, transparent 60% 100%),
    linear-gradient(180deg, rgba(32, 212, 214, 0.12), transparent 88%) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * ACCESIBILIDAD · la guarda de movimiento reducido cierra la ronda
 * ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html[data-power-fx] body.power-hud::before,
  html[data-power-fx] body.power-hud::after,
  html .hud-skin-chip .hud-skin-chip-swatch.sk > i,
  html .hud-skin-chip[data-family] .hud-skin-chip-swatch.sk > i,
  html .hud-skin-chip.hud-skin-chip-on .hud-skin-chip-swatch.sk {
    animation: none !important;
  }
  html[data-power-fx][data-power-accent] .pw-overlay [aria-label^="Cerrar"],
  html[data-power-fx][data-power-accent] .pw-panel [aria-label^="Cerrar"] {
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 86 · SKIN BASE OFICIAL «POWER» · ARTE CIBERNÉTICO DEL LOGIN
 * ──────────────────────────────────────────────────────────────────────────
 * La identidad que nació en login.html (power-energy.css, R84–R85) pasa a
 * definir la skin predeterminada de la app: vidrio carmesí biselado, bordes
 * neón multicapa, placas chaflanadas cyber-meca y micro-glitch de una sola
 * pasada. Va al FINAL del archivo: gana por orden sobre R69/R76 con la misma
 * especificidad. Sólo bajo `data-power-fx="reactor"` + `data-power-accent=
 * "power"` (lo pone power-skin-fx.js). Contenedores preparados:
 *   · BOTONES  .power-cta · .pw-hextech-btn · .btn-primary · .btn-accent y el
 *              primario ámbar de los modales (button.bg-amber-5xx, p. ej.
 *              #ajustes-save)
 *   · TARJETAS .power-card · .power-stat-card · .pw-game-card · .pf-section
 *              (.pw-panel es panel de modal: lo viste la lista de modales)
 *   · MODALES  el selector estructural de R76 (misma lista) — se conservan
 *              los valores que r69 certifica (vidrio rgba(12,12,18,.85),
 *              blur 16, borde/halo con acento, bisel, ≥2 radiales) y se
 *              suman hairline superior y ticks de esquina.
 * Bucle: sólo transform / opacity / filter y la variable registrada --pw-ang.
 * Sin will-change nuevo (presupuesto GPU 14/14).
 * ════════════════════════════════════════════════════════════════════════ */
@property --pw-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes pw-meca-orbit { to { --pw-ang: 360deg; } }
@keyframes pw-meca-glitch {
  0%   { transform: translate3d(-2px, 0, 0) skewX(-4deg); filter: brightness(1.6) saturate(1.3); }
  18%  { transform: translate3d(2px, -1px, 0) skewX(3deg); filter: brightness(0.85); }
  36%  { transform: translate3d(-1px, 1px, 0); filter: brightness(1.45); }
  54%  { transform: translate3d(1px, 0, 0); filter: brightness(1); }
  72%  { transform: translate3d(0, 0, 0); filter: brightness(1.25); }
  100% { transform: translate3d(0, 0, 0); filter: brightness(1); }
}
@keyframes pw-meca-flash { 0% { filter: brightness(2.2); } 100% { filter: brightness(1); } }

/* ── BOTONES · placa chaflanada de dos capas (::after borde neón orbitando,
   ::before cuerpo de vidrio carmesí biselado). Bajo Power, gold/café no
   usan estos pseudos, así que quedan libres. ─────────────────────────── */
html[data-power-fx="reactor"][data-power-accent="power"] .power-cta,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-hextech-btn,
html[data-power-fx="reactor"][data-power-accent="power"] .btn-primary,
html[data-power-fx="reactor"][data-power-accent="power"] .btn-accent,
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud [id$="-modal"] button[class*="bg-amber-5"],
html[data-power-fx="reactor"][data-power-accent="power"] .pw-overlay button[class*="bg-amber-5"] {
  --meca-cut: 9px;
  position: relative;
  isolation: isolate;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: 'Orbitron', 'Rajdhani', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 1px 0 rgba(70, 0, 5, 0.8);
  filter: drop-shadow(0 0 6px rgba(255, 30, 39, 0.5)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.65));
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), filter 200ms ease !important;
}
html[data-power-fx="reactor"][data-power-accent="power"] .power-cta::after,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-hextech-btn::after,
html[data-power-fx="reactor"][data-power-accent="power"] .btn-primary::after,
html[data-power-fx="reactor"][data-power-accent="power"] .btn-accent::after,
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud [id$="-modal"] button[class*="bg-amber-5"]::after,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-overlay button[class*="bg-amber-5"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: 0;
  clip-path: polygon(var(--meca-cut) 0, calc(100% - var(--meca-cut)) 0, 100% var(--meca-cut), 100% calc(100% - var(--meca-cut)), calc(100% - var(--meca-cut)) 100%, var(--meca-cut) 100%, 0 calc(100% - var(--meca-cut)), 0 var(--meca-cut));
  background:
    conic-gradient(from var(--pw-ang, 0deg),
      rgba(255, 30, 39, 0.35) 0turn, rgba(255, 30, 39, 0.35) 0.55turn,
      rgba(255, 90, 95, 0.9) 0.70turn, #fff 0.75turn, rgba(255, 90, 95, 0.9) 0.80turn,
      rgba(255, 30, 39, 0.35) 0.95turn),
    linear-gradient(180deg, rgba(255, 170, 170, 0.9), rgba(229, 9, 20, 0.8));
  animation: pw-meca-orbit 4.2s linear infinite;
  transform: translateZ(0);
  opacity: 1;
}
html[data-power-fx="reactor"][data-power-accent="power"] .power-cta::before,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-hextech-btn::before,
html[data-power-fx="reactor"][data-power-accent="power"] .btn-primary::before,
html[data-power-fx="reactor"][data-power-accent="power"] .btn-accent::before,
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud [id$="-modal"] button[class*="bg-amber-5"]::before,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-overlay button[class*="bg-amber-5"]::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: 0;
  clip-path: polygon(calc(var(--meca-cut) - 1px) 0, calc(100% - var(--meca-cut) + 1px) 0, 100% calc(var(--meca-cut) - 1px), 100% calc(100% - var(--meca-cut) + 1px), calc(100% - var(--meca-cut) + 1px) 100%, calc(var(--meca-cut) - 1px) 100%, 0 calc(100% - var(--meca-cut) + 1px), 0 calc(var(--meca-cut) - 1px));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0, rgba(255, 255, 255, 0.10) 3px, transparent 32%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0, transparent 4px),
    repeating-linear-gradient(-32deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 7px),
    radial-gradient(90% 120% at 50% 118%, rgba(255, 90, 95, 0.55), transparent 58%),
    linear-gradient(170deg, #FF3A41 0%, #E50914 46%, #7C040E 100%);
  box-shadow:
    inset 0 0 18px rgba(40, 0, 3, 0.85),
    inset 0 -4px 0 rgba(60, 0, 4, 0.75),
    inset 0 -10px 16px -8px rgba(40, 0, 3, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transform: translateZ(0);
  opacity: 1;
  animation: none;
}
html[data-power-fx="reactor"][data-power-accent="power"] .power-cta:hover,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-hextech-btn:hover,
html[data-power-fx="reactor"][data-power-accent="power"] .btn-primary:hover,
html[data-power-fx="reactor"][data-power-accent="power"] .btn-accent:hover,
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud [id$="-modal"] button[class*="bg-amber-5"]:hover,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-overlay button[class*="bg-amber-5"]:hover {
  transform: translateY(-2px) !important;
  filter: drop-shadow(0 0 12px rgba(255, 30, 39, 0.95)) drop-shadow(0 0 30px rgba(229, 9, 20, 0.65)) drop-shadow(0 12px 22px rgba(0, 0, 0, 0.7)) brightness(1.08) !important;
}
html[data-power-fx="reactor"][data-power-accent="power"] .power-cta:hover::before,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-hextech-btn:hover::before,
html[data-power-fx="reactor"][data-power-accent="power"] .btn-primary:hover::before,
html[data-power-fx="reactor"][data-power-accent="power"] .btn-accent:hover::before,
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud [id$="-modal"] button[class*="bg-amber-5"]:hover::before,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-overlay button[class*="bg-amber-5"]:hover::before { animation: pw-meca-glitch 420ms steps(1, end) 1; }
html[data-power-fx="reactor"][data-power-accent="power"] .power-cta:hover::after,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-hextech-btn:hover::after,
html[data-power-fx="reactor"][data-power-accent="power"] .btn-primary:hover::after,
html[data-power-fx="reactor"][data-power-accent="power"] .btn-accent:hover::after,
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud [id$="-modal"] button[class*="bg-amber-5"]:hover::after,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-overlay button[class*="bg-amber-5"]:hover::after { animation: pw-meca-orbit 1.6s linear infinite, pw-meca-flash 420ms ease-out 1; }
html[data-power-fx="reactor"][data-power-accent="power"] .power-cta:active,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-hextech-btn:active,
html[data-power-fx="reactor"][data-power-accent="power"] .btn-primary:active,
html[data-power-fx="reactor"][data-power-accent="power"] .btn-accent:active,
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud [id$="-modal"] button[class*="bg-amber-5"]:active,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-overlay button[class*="bg-amber-5"]:active {
  transform: translateY(1px) scale(0.985) !important;
  filter: drop-shadow(0 0 16px rgba(255, 30, 39, 1)) brightness(1.2) !important;
  transition-duration: 60ms !important;
}
html[data-power-fx="reactor"][data-power-accent="power"] .power-cta:disabled { opacity: 0.8; transform: none !important; }

/* ── TARJETAS · vidrio carmesí biselado: hairline superior, ticks de esquina,
   reflejo frío arriba-izquierda, rescoldo inferior y sombra de profundidad
   interna. Cero pseudos (power-ui.css usa .power-card::before). ─────── */
html[data-power-fx="reactor"][data-power-accent="power"] .power-card,
html[data-power-fx="reactor"][data-power-accent="power"] .power-stat-card,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-game-card,
html[data-power-fx="reactor"][data-power-accent="power"] .pf-section {
  background-color: rgba(10, 8, 13, 0.62) !important;
  background-image:
    linear-gradient(90deg, transparent 0 8%, rgba(255, 30, 39, 0.85) 30%, rgba(255, 30, 39, 0.85) 70%, transparent 92%),
    linear-gradient(90deg, rgba(255, 30, 39, 0.8), rgba(255, 30, 39, 0.8)),
    linear-gradient(90deg, rgba(255, 30, 39, 0.8), rgba(255, 30, 39, 0.8)),
    radial-gradient(70% 40% at 18% 0%, rgba(255, 255, 255, 0.07), transparent 70%),
    radial-gradient(60% 34% at 50% 108%, rgba(229, 9, 20, 0.16), transparent 70%),
    linear-gradient(168deg, rgba(16, 13, 20, 0.42) 0%, rgba(7, 5, 10, 0.60) 70%) !important;
  background-size: 100% 1px, 18px 2px, 18px 2px, auto, auto, auto !important;
  background-position: top center, left 14px bottom 10px, right 14px bottom 10px, 0 0, 0 0, 0 0 !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 1.1rem !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 0 0 1px rgba(229, 9, 20, 0.07),
    inset 0 -28px 56px -40px rgba(229, 9, 20, 0.85),
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 24px 50px -30px rgba(0, 0, 0, 0.9),
    0 0 60px -26px rgba(229, 9, 20, 0.6) !important;
}

/* ── MODALES · misma lista estructural que R76; sólo se enriquece la imagen
   de fondo (hairline + ticks + los DOS radiales que r69 exige). ──────── */
html[data-power-fx="reactor"][data-power-accent="power"] .pw-overlay:not(.hidden) > :not(.pw-backdrop),
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud [id$="-modal"]:not(.hidden) > :not(.absolute):not(.min-h-full):not(.pw-backdrop),
html[data-power-fx="reactor"][data-power-accent="power"] .pw-modal,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-modal-box,
html[data-power-fx="reactor"][data-power-accent="power"] .modal-card,
html[data-power-fx="reactor"][data-power-accent="power"] .modal-container,
html[data-power-fx="reactor"][data-power-accent="power"] dialog[open],
html[data-power-fx="reactor"][data-power-accent="power"] .modal-vinculacion-box {
  background-image:
    linear-gradient(90deg, transparent 0 8%, rgba(255, 30, 39, 0.85) 30%, rgba(255, 30, 39, 0.85) 70%, transparent 92%),
    linear-gradient(90deg, rgba(255, 30, 39, 0.8), rgba(255, 30, 39, 0.8)),
    linear-gradient(90deg, rgba(255, 30, 39, 0.8), rgba(255, 30, 39, 0.8)),
    radial-gradient(38% 30% at 0% 0%, rgba(255, 255, 255, 0.07), transparent 70%),
    radial-gradient(42% 34% at 100% 100%, color-mix(in srgb, var(--skin-accent-fx, #FF3B30) 14%, transparent), transparent 70%) !important;
  background-size: 100% 1px, 18px 2px, 18px 2px, auto, auto !important;
  background-position: top center, left 14px bottom 10px, right 14px bottom 10px, 0 0, 0 0 !important;
  background-repeat: no-repeat !important;
  border-radius: 1.1rem !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-power-fx="reactor"][data-power-accent="power"] .power-cta::after,
  html[data-power-fx="reactor"][data-power-accent="power"] .pw-hextech-btn::after,
  html[data-power-fx="reactor"][data-power-accent="power"] .btn-primary::after,
  html[data-power-fx="reactor"][data-power-accent="power"] .btn-accent::after,
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud [id$="-modal"] button[class*="bg-amber-5"]::after,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-overlay button[class*="bg-amber-5"]::after,
  html[data-power-fx="reactor"][data-power-accent="power"] .power-cta::before,
  html[data-power-fx="reactor"][data-power-accent="power"] .pw-hextech-btn::before,
  html[data-power-fx="reactor"][data-power-accent="power"] .btn-primary::before,
  html[data-power-fx="reactor"][data-power-accent="power"] .btn-accent::before,
html[data-power-fx="reactor"][data-power-accent="power"] body.power-hud [id$="-modal"] button[class*="bg-amber-5"]::before,
html[data-power-fx="reactor"][data-power-accent="power"] .pw-overlay button[class*="bg-amber-5"]::before { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * N7 · NEON OVERDRIVE · SELECTOR CON DISPAROS LÁSER
 * ──────────────────────────────────────────────────────────────────────────
 * La ficha de Neon Overdrive (hotbar y galería «Todas las skins») lleva
 * cuatro haces láser que cruzan el interior a toda velocidad: dos
 * horizontales y dos diagonales, en pseudo-elementos de las capas <i> que
 * ya trae la tarjeta neo (.sk-card-cuerpo / .sk-card-marco). Sólo transform
 * y opacity; cada haz es una línea de 2 px con halo por gradiente. Las
 * fichas se ven aunque la skin equipada sea otra: es la identidad de la
 * ficha, no del tema. El orbe grande del selector lo pinta neon-overdrive.js
 * (canvas circular .neon-orb-laser) sincronizado con el kick y el snare.
 * Especificidad: la sección M de power-alfa.css pausa toda animación de las
 * fichas no equipadas ((1,7,3)); estos selectores suben a (1,8,3) para que
 * el láser de ESTA ficha siga vivo, salvo lejos del viewport
 * ([data-pa-lejos]) o con el modal de skins abierto ([data-pa-skins-modal]),
 * donde se respeta la pausa.
 * ════════════════════════════════════════════════════════════════════════ */
.hud-skin-chip[data-accent="neon"] .hud-skin-chip-swatch.sk-card { overflow: hidden; isolation: isolate; }
.hud-skin-chip[data-accent="neon"] .sk-card-cuerpo,
.hud-skin-chip[data-accent="neon"] .sk-card-marco { overflow: hidden; }
.hud-skin-chip[data-accent="neon"] .sk-card-cuerpo::before,
.hud-skin-chip[data-accent="neon"] .sk-card-cuerpo::after,
.hud-skin-chip[data-accent="neon"] .sk-card-marco::before,
.hud-skin-chip[data-accent="neon"] .sk-card-marco::after {
  content: "";
  position: absolute;
  left: -60%;
  top: 50%;
  width: 220%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(48, 255, 20, 0) 18%, rgba(48, 255, 20, 0.9) 42%, #e6ffe0 50%, rgba(48, 255, 20, 0.9) 58%, rgba(48, 255, 20, 0) 82%, transparent 100%);
  box-shadow: 0 0 6px rgba(48, 255, 20, 0.85), 0 0 14px rgba(48, 255, 20, 0.45);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: neonChipLaser 0.72s cubic-bezier(0.2, 0.9, 0.2, 1) infinite;
}
.hud-skin-chip[data-accent="neon"] .sk-card-cuerpo::before { transform-origin: 50% 50%; animation-delay: 0s; }
.hud-skin-chip[data-accent="neon"] .sk-card-cuerpo::after  { top: 32%; animation-name: neonChipLaserDiag; animation-duration: 0.86s; animation-delay: 0.31s; }
.hud-skin-chip[data-accent="neon"] .sk-card-marco::before  { top: 68%; animation-duration: 0.64s; animation-delay: 0.52s; }
.hud-skin-chip[data-accent="neon"] .sk-card-marco::after   { top: 60%; animation-name: neonChipLaserDiag2; animation-duration: 0.98s; animation-delay: 0.17s; }
@keyframes neonChipLaser {
  0%   { transform: translate3d(-70%, 0, 0) scaleX(0.35); opacity: 0; }
  12%  { opacity: 1; }
  55%  { transform: translate3d(70%, 0, 0) scaleX(1); opacity: 0.95; }
  70%, 100% { transform: translate3d(90%, 0, 0) scaleX(0.4); opacity: 0; }
}
@keyframes neonChipLaserDiag {
  0%   { transform: rotate(-34deg) translate3d(-70%, 0, 0) scaleX(0.35); opacity: 0; }
  14%  { opacity: 1; }
  58%  { transform: rotate(-34deg) translate3d(70%, 0, 0) scaleX(1); opacity: 0.9; }
  72%, 100% { transform: rotate(-34deg) translate3d(90%, 0, 0) scaleX(0.4); opacity: 0; }
}
@keyframes neonChipLaserDiag2 {
  0%   { transform: rotate(38deg) translate3d(70%, 0, 0) scaleX(0.35); opacity: 0; }
  14%  { opacity: 1; }
  58%  { transform: rotate(38deg) translate3d(-70%, 0, 0) scaleX(1); opacity: 0.9; }
  72%, 100% { transform: rotate(38deg) translate3d(-90%, 0, 0) scaleX(0.4); opacity: 0; }
}
/* Esta ficha no se pausa (gana a la sección M de power-alfa.css), salvo lejos del viewport o bajo el modal de skins. */
html:not(#pa-nunca):not([data-pa-skins-modal]) body.power-hud .hud-skin-chip[data-accent="neon"][data-family="neo"][data-accent][data-family]:not([data-pa-lejos]) .sk-card-cuerpo::before,
html:not(#pa-nunca):not([data-pa-skins-modal]) body.power-hud .hud-skin-chip[data-accent="neon"][data-family="neo"][data-accent][data-family]:not([data-pa-lejos]) .sk-card-cuerpo::after,
html:not(#pa-nunca):not([data-pa-skins-modal]) body.power-hud .hud-skin-chip[data-accent="neon"][data-family="neo"][data-accent][data-family]:not([data-pa-lejos]) .sk-card-marco::before,
html:not(#pa-nunca):not([data-pa-skins-modal]) body.power-hud .hud-skin-chip[data-accent="neon"][data-family="neo"][data-accent][data-family]:not([data-pa-lejos]) .sk-card-marco::after {
  animation-play-state: running !important;
}
/* Galería «Todas las skins»: la muestra de Neon Overdrive también dispara. */
.skin-gallery-chip[data-accent="neon"] .accent-swatch { position: relative; overflow: hidden; }
.skin-gallery-chip[data-accent="neon"] .accent-swatch::before,
.skin-gallery-chip[data-accent="neon"] .accent-swatch::after {
  content: "";
  position: absolute;
  left: -60%;
  top: 50%;
  width: 220%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(48, 255, 20, 0.9) 42%, #e6ffe0 50%, rgba(48, 255, 20, 0.9) 58%, transparent 100%);
  box-shadow: 0 0 6px rgba(48, 255, 20, 0.85);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: neonChipLaser 0.78s cubic-bezier(0.2, 0.9, 0.2, 1) infinite;
}
.skin-gallery-chip[data-accent="neon"] .accent-swatch::after { top: 36%; animation-name: neonChipLaserDiag; animation-duration: 0.92s; animation-delay: 0.4s; }
/* Orbe grande del selector: cuando la skin equipada es neon, el canvas de
   neon-overdrive.js va encima del orbe; el orbe conserva su tubo verde. */
html[data-power-accent="neon"] #skin-preview-orb { background: radial-gradient(circle at 50% 42%, #7dff5e 0, #30ff14 38%, #0a7a1c 100%); }
html[data-power-accent="neon"] .skin-preview-orb-wrap { overflow: visible; }
@media (prefers-reduced-motion: reduce) {
  .hud-skin-chip[data-accent="neon"] .sk-card-cuerpo::before, .hud-skin-chip[data-accent="neon"] .sk-card-cuerpo::after,
  .hud-skin-chip[data-accent="neon"] .sk-card-marco::before, .hud-skin-chip[data-accent="neon"] .sk-card-marco::after,
  .skin-gallery-chip[data-accent="neon"] .accent-swatch::before, .skin-gallery-chip[data-accent="neon"] .accent-swatch::after { animation: none !important; opacity: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 144 · CYBER PULSE RECTO (perfil)
 * ──────────────────────────────────────────────────────────────────────────
 * Las ondas líquidas y los anillos elípticos de las rondas anteriores se
 * reemplazan por geometría RECTA: barrido horizontal de alta frecuencia y un
 * marco lateral de pistas verticales. Lo curvo contradecía el silicio que
 * ahora pinta cyber-pulse-fx.js detrás de todo. Mismo selector que las
 * reglas viejas, más abajo en la hoja: gana por orden con igual peso.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-power-fx="pulse"][data-power-accent="cyan"] body.power-hud::after {
  inset: 0 !important;
  /* R186 · Fuera el barrido de 3 px y las pistas de 12 px (junto con la
     oblea se leían como rejilla detrás del vidrio): queda el marco lateral
     de neón y su degradado, que es luz, no trama. */
  background-image:
    linear-gradient(90deg, rgba(34, 211, 238, 0.20) 0 1px, transparent 1px calc(100% - 1px), rgba(139, 92, 246, 0.20) calc(100% - 1px)),
    linear-gradient(90deg, rgba(34, 211, 238, 0.14) 0%, transparent 16%, transparent 84%, rgba(139, 92, 246, 0.14) 100%) !important;
  background-size: 100% 100%, 100% 100% !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: 0 0, 0 0 !important;
  background-blend-mode: screen !important;
  -webkit-mask-image: linear-gradient(90deg, #000 0 14%, rgba(0, 0, 0, 0.35) 30% 70%, #000 86% 100%);
          mask-image: linear-gradient(90deg, #000 0 14%, rgba(0, 0, 0, 0.35) 30% 70%, #000 86% 100%);
  opacity: 0.55;
  animation: pwCpBarrido 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate !important;
}
/* La capa SOLO cambia de opacidad (§6.1): un pulso de dos tiempos a 76 BPM. */
@keyframes pwCpBarrido {
  from { opacity: 0.42; }
  to   { opacity: 0.62; }
}
/* La nube Perlin queda de sustrato, más quieta y más oscura. */
html[data-power-fx="pulse"][data-power-accent="cyan"] body.power-hud::before {
  opacity: 0.55;
  animation: none !important;
}

/* Tarjetas: el bisel de 34 px se conserva con filo cian → violeta y neón
   interior. R186 · sin fibra de carbono ni barrido (eran la rejilla gris):
   vidrio oscuro pulido con un reflejo especular arriba. */
html[data-power-fx="pulse"][data-power-accent="cyan"] .pf-hero,
html[data-power-fx="pulse"][data-power-accent="cyan"] .pf-section {
  background:
    linear-gradient(135deg, transparent calc(50% - 1.5px), rgba(34, 211, 238, 0.95) 50%, transparent calc(50% + 1.5px)) top left / 34px 34px no-repeat,
    linear-gradient(135deg, transparent calc(50% - 1.5px), rgba(139, 92, 246, 0.95) 50%, transparent calc(50% + 1.5px)) bottom right / 34px 34px no-repeat,
    linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.75) 20%, rgba(139, 92, 246, 0.65) 80%, transparent) top center / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(236, 254, 255, 0.06) 0%, rgba(236, 254, 255, 0.012) 20%, transparent 44%) no-repeat,
    linear-gradient(152deg, rgba(7, 37, 54, 0.9) 0%, rgba(3, 14, 23, 0.88) 58%, rgba(2, 7, 13, 0.9) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(34, 211, 238, 0.3),
    inset 0 0 26px rgba(34, 211, 238, 0.10),
    inset 0 -22px 36px -26px rgba(139, 92, 246, 0.6);
}
/* La luz que recorre las pistas: misma banda, curva oficial (no `linear`). */
html[data-power-fx="pulse"][data-power-accent="cyan"] .pf-hero::after,
html[data-power-fx="pulse"][data-power-accent="cyan"] .pf-section::after {
  animation: pwDataRun 3.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  html[data-power-fx="pulse"][data-power-accent="cyan"] body.power-hud::after,
  html[data-power-fx="pulse"][data-power-accent="cyan"] .pf-hero::after,
  html[data-power-fx="pulse"][data-power-accent="cyan"] .pf-section::after { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 168 · BATERÍA POR SKIN — un bloque de variables por skin, cero
 * keyframes repetidos.
 * ──────────────────────────────────────────────────────────────────────────
 * La batería del perfil (power-ui.css «RONDA 168 · BATERÍA») lee SOLO estas
 * variables; la animación es una y la misma para las 32 skins. Lo que cambia
 * por skin es la MATERIA:
 *
 *   --bat-c1 … --bat-c4   color de la carga por rango (1 base → 4 plena)
 *   --bat-metal-hi/mid/lo  metal de bornes y bisel (latón, cobre, oro, cromo…)
 *   --bat-glass            tinte del reflejo de cristal
 *   --bat-plasma           textura dentro de la carga (gradiente, sin imágenes)
 *
 * Fuente de verdad: html[data-power-accent] (PowerAuth.applyUserAccent), la
 * misma que viste el resto de la página, tanto la skin propia como la del
 * perfil visitado. Primero la familia (data-power-family, respaldo para
 * cualquier skin nueva), después cada skin: misma especificidad (0,1,1), así
 * que el orden decide a propósito.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Familias (respaldo) ─────────────────────────────────────────────────── */
html[data-power-family="neo"] {
  --bat-metal-hi: #f7e4a8; --bat-metal-mid: #c9962e; --bat-metal-lo: #5a3f10;
  --bat-plasma: repeating-linear-gradient(-28deg, rgba(255, 255, 255, 0) 0 9px, rgba(255, 255, 255, 0.16) 9px 11px, rgba(255, 255, 255, 0) 11px 22px);
}
html[data-power-family="glitch"] {
  --bat-metal-hi: #f1e6ff; --bat-metal-mid: #a78bfa; --bat-metal-lo: #3b1d6b;
  --bat-glass: rgba(216, 180, 254, 0.16);
  --bat-plasma: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0) 0 2px, rgba(255, 255, 255, 0.22) 2px 3px, rgba(255, 255, 255, 0) 3px 5px);
}
html[data-power-family="cozy"] {
  --bat-metal-hi: #ffdcbd; --bat-metal-mid: #b8743f; --bat-metal-lo: #4a2a14;
  --bat-glass: rgba(255, 236, 214, 0.18);
  --bat-plasma: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.28) 0 2px, transparent 3px) 0 0 / 14px 18px, radial-gradient(circle at 70% 75%, rgba(255, 255, 255, 0.18) 0 1.5px, transparent 2.5px) 7px 9px / 14px 18px;
}
html[data-power-family="lux"] {
  --bat-metal-hi: #fff4cc; --bat-metal-mid: #e2b43a; --bat-metal-lo: #6b4a0e;
  --bat-glass: rgba(255, 248, 220, 0.2);
  --bat-plasma: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 0 6px, rgba(255, 255, 255, 0.26) 6px 7px, rgba(255, 255, 255, 0) 7px 14px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0) 0 10px, rgba(255, 255, 255, 0.12) 10px 11px, rgba(255, 255, 255, 0) 11px 22px);
}
html[data-power-family="kids"] {
  --bat-metal-hi: #ffffff; --bat-metal-mid: #c7d2fe; --bat-metal-lo: #4c5a9a;
  --bat-glass: rgba(255, 255, 255, 0.22);
  --bat-plasma: radial-gradient(circle, rgba(255, 255, 255, 0.32) 0 3px, transparent 4px) 0 0 / 16px 16px, radial-gradient(circle, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px) 8px 8px / 16px 16px;
}

/* ── Neo-Modern ──────────────────────────────────────────────────────────── */
html[data-power-accent="power"]   { --bat-c1: #ff3b30; --bat-c2: #ff7a1a; --bat-c3: #ffd166; --bat-c4: #fff3c4; }
html[data-power-accent="neon"]    { --bat-c1: #30ff14; --bat-c2: #a3ff3a; --bat-c3: #eaff7a; --bat-c4: #f6ffd8;
  --bat-metal-hi: #eaffe0; --bat-metal-mid: #7cc96a; --bat-metal-lo: #1f4d18; }
html[data-power-accent="cyan"]    { --bat-c1: #22d3ee; --bat-c2: #60a5fa; --bat-c3: #a78bfa; --bat-c4: #e0f2fe;
  --bat-metal-hi: #dff8ff; --bat-metal-mid: #5fb3c9; --bat-metal-lo: #164e5e;
  --bat-plasma: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0) 0 3px, rgba(255, 255, 255, 0.2) 3px 4px, rgba(255, 255, 255, 0) 4px 7px); }
html[data-power-accent="mint"]    { --bat-c1: #20d4d6; --bat-c2: #6ee7b7; --bat-c3: #a7f3d0; --bat-c4: #ecfeff;
  --bat-metal-hi: #f0fffe; --bat-metal-mid: #8fd3cf; --bat-metal-lo: #2a5c5a; --bat-glass: rgba(204, 251, 241, 0.2); }
html[data-power-accent="sky"]     { --bat-c1: #3a8dff; --bat-c2: #60a5fa; --bat-c3: #93c5fd; --bat-c4: #eff6ff;
  --bat-metal-hi: #e8f1ff; --bat-metal-mid: #7fa6d9; --bat-metal-lo: #233f6b; }
html[data-power-accent="steel"]   { --bat-c1: #8fa3b8; --bat-c2: #b8c7d6; --bat-c3: #dce5ee; --bat-c4: #f8fafc;
  --bat-metal-hi: #f1f5f9; --bat-metal-mid: #94a3b8; --bat-metal-lo: #334155; }
html[data-power-accent="chrome"]  { --bat-c1: #d7e3ec; --bat-c2: #eef3f7; --bat-c3: #ffffff; --bat-c4: #ffffff;
  --bat-metal-hi: #ffffff; --bat-metal-mid: #b8c4cf; --bat-metal-lo: #475569; --bat-glass: rgba(255, 255, 255, 0.3); }
html[data-power-accent="cobalto"] { --bat-c1: #2563eb; --bat-c2: #3b82f6; --bat-c3: #60a5fa; --bat-c4: #dbeafe;
  --bat-metal-hi: #dbe6ff; --bat-metal-mid: #6c8ad6; --bat-metal-lo: #1e3a8a; }

/* ── Cyber Glitch ────────────────────────────────────────────────────────── */
html[data-power-accent="glitch"]   { --bat-c1: #a855f7; --bat-c2: #e879f9; --bat-c3: #22d3ee; --bat-c4: #f5e9ff; }
html[data-power-accent="violet"]   { --bat-c1: #a855f7; --bat-c2: #c084fc; --bat-c3: #e9d5ff; --bat-c4: #faf5ff; }
html[data-power-accent="plasma"]   { --bat-c1: #e879f9; --bat-c2: #f0abfc; --bat-c3: #fbcfe8; --bat-c4: #fdf4ff;
  --bat-metal-hi: #ffe4fb; --bat-metal-mid: #c26ad6; --bat-metal-lo: #4a1a5e; }
html[data-power-accent="matrix"]   { --bat-c1: #22c55e; --bat-c2: #4ade80; --bat-c3: #bbf7d0; --bat-c4: #f0fdf4;
  --bat-metal-hi: #d9f99d; --bat-metal-mid: #3f8f4f; --bat-metal-lo: #113318; --bat-glass: rgba(187, 247, 208, 0.14); }
html[data-power-accent="vapor"]    { --bat-c1: #ff77e9; --bat-c2: #67e8f9; --bat-c3: #fde68a; --bat-c4: #fff1fb;
  --bat-metal-hi: #ffe8fb; --bat-metal-mid: #d08ad6; --bat-metal-lo: #4a1e5a; }
html[data-power-accent="nullbyte"] { --bat-c1: #7dd3fc; --bat-c2: #bae6fd; --bat-c3: #e0f2fe; --bat-c4: #ffffff;
  --bat-metal-hi: #f0f9ff; --bat-metal-mid: #7aa2b8; --bat-metal-lo: #1e3a4a; }

/* ── Cozy Café ───────────────────────────────────────────────────────────── */
html[data-power-accent="cafe-con-leche"] { --bat-c1: #e0c3a1; --bat-c2: #d4a373; --bat-c3: #f1dcc3; --bat-c4: #fff8ef; }
html[data-power-accent="latte"]   { --bat-c1: #c8a27a; --bat-c2: #dbbb96; --bat-c3: #efd9bf; --bat-c4: #fff8f0; }
html[data-power-accent="miel"]    { --bat-c1: #e8b33c; --bat-c2: #f6c95a; --bat-c3: #ffe29a; --bat-c4: #fff8dc;
  --bat-metal-hi: #fff1c2; --bat-metal-mid: #d9a429; --bat-metal-lo: #6b4a0e; }
html[data-power-accent="durazno"] { --bat-c1: #ffb088; --bat-c2: #ffc8a8; --bat-c3: #ffe0cc; --bat-c4: #fff7f2; }
html[data-power-accent="sakura"]  { --bat-c1: #f9a8d4; --bat-c2: #fbcfe8; --bat-c3: #fce7f3; --bat-c4: #fff5fa;
  --bat-metal-hi: #ffe4ec; --bat-metal-mid: #d48aa3; --bat-metal-lo: #6b2a44; }
html[data-power-accent="cacao"]   { --bat-c1: #8b5e3c; --bat-c2: #b07d57; --bat-c3: #d9a77c; --bat-c4: #f5e1cf;
  --bat-metal-hi: #f3d2b0; --bat-metal-mid: #9a6a3c; --bat-metal-lo: #3e2510; }

/* ── Luxury ──────────────────────────────────────────────────────────────── */
html[data-power-accent="gold"]      { --bat-c1: #f5c542; --bat-c2: #ffd966; --bat-c3: #ffe9a3; --bat-c4: #fffbe6;
  --bat-metal-hi: #fff7d6; --bat-metal-mid: #f0c24a; --bat-metal-lo: #7a5410; --bat-glass: rgba(255, 244, 200, 0.24); }
html[data-power-accent="onyx"]      { --bat-c1: #3f3f46; --bat-c2: #71717a; --bat-c3: #a1a1aa; --bat-c4: #e4e4e7;
  --bat-metal-hi: #d4d4d8; --bat-metal-mid: #71717a; --bat-metal-lo: #18181b; --bat-glass: rgba(255, 255, 255, 0.1); }
html[data-power-accent="champagne"] { --bat-c1: #e8d9a8; --bat-c2: #f0e4c0; --bat-c3: #f8f0d8; --bat-c4: #fffdf5; }
html[data-power-accent="platino"]   { --bat-c1: #cbd5e1; --bat-c2: #e2e8f0; --bat-c3: #f1f5f9; --bat-c4: #ffffff;
  --bat-metal-hi: #ffffff; --bat-metal-mid: #cbd5e1; --bat-metal-lo: #475569; }
html[data-power-accent="rubi"]      { --bat-c1: #e11d48; --bat-c2: #fb7185; --bat-c3: #fda4af; --bat-c4: #fff1f2; }
html[data-power-accent="esmeralda"] { --bat-c1: #10b981; --bat-c2: #34d399; --bat-c3: #6ee7b7; --bat-c4: #ecfdf5; }

/* ── Kids ────────────────────────────────────────────────────────────────── */
html[data-power-accent="coral"]  { --bat-c1: #ff6b4a; --bat-c2: #ff8f6e; --bat-c3: #ffb59e; --bat-c4: #fff0eb; }
html[data-power-accent="rose"]   { --bat-c1: #f87171; --bat-c2: #fca5a5; --bat-c3: #fecaca; --bat-c4: #fff1f1; }
html[data-power-accent="ice"]    { --bat-c1: #07e8f9; --bat-c2: #67f3ff; --bat-c3: #b3f9ff; --bat-c4: #f0feff;
  --bat-metal-hi: #f0feff; --bat-metal-mid: #8fd8e0; --bat-metal-lo: #1f5560; }
html[data-power-accent="ember"]  { --bat-c1: #ff4500; --bat-c2: #ff7a1a; --bat-c3: #ffb020; --bat-c4: #fff2cc;
  --bat-metal-hi: #f7e4a8; --bat-metal-mid: #c9962e; --bat-metal-lo: #5a3f10; }
html[data-power-accent="bubble"] { --bat-c1: #a5f3fc; --bat-c2: #cffafe; --bat-c3: #e0fcff; --bat-c4: #ffffff; }
html[data-power-accent="kiwi"]   { --bat-c1: #a3e635; --bat-c2: #bef264; --bat-c3: #d9f99d; --bat-c4: #f7fee3;
  --bat-metal-hi: #f7ffe0; --bat-metal-mid: #86b33a; --bat-metal-lo: #2f4a0f; }