/* ══════════════════════════════════════════════════════════════════════════
 * PowerAdmin · SKIN 4 «BUBBLEGUM RAINBOW»  (id `bubble`, Kids)
 * ──────────────────────────────────────────────────────────────────────────
 * R206 · v264 · «TRANCE NOCTURNO» — minimalista-glam, girlypop: neón de
 * burbujas sobre un lienzo nocturno/ciber. Púrpuras de noche, rosa chicle,
 * magenta y violeta, con destellos de arcoíris pastel en bordes holográficos
 * finos y translúcidos. El fondo vivo (lava-lamp de burbujas en pixel art,
 * lluvia de pompas, micro-estrellas) es Canvas: assets/js/core/skin-bubblegum.js.
 *
 * REGLAS DE LA CASA (AGENTS §6):
 *   · Solo se anima transform / opacity: nada de width, height, top, left,
 *     margin ni background-position en movimiento. Ningún var() dentro de un
 *     bloque de keyframes (R201: Chrome no lo compone).
 *   · Curvas oficiales: resorte cubic-bezier(0.34, 1.56, 0.64, 1) y deriva
 *     cubic-bezier(0.16, 1, 0.3, 1). Ni ease ni linear.
 *   · Cero rejillas `repeating-*-gradient` (R184/R186): cristal liso, borde
 *     neón de 1 px y halo de 14 px.
 *   · El sonido de la skin vive en soundscape.js.
 *
 * ESPECIFICIDAD · las superficies del panel salen de las variables --sk-*
 * de power-alfa.css (familia Kids). Acá se redefinen con dos :not(#id) para
 * ganarle a html:not(#pa-nunca)[data-power-family="kids"][data-power-accent]
 * sin depender del orden de carga. Lo del Fashion Studio va con 3 ids (R198).
 * ════════════════════════════════════════════════════════════════════════ */

html[data-power-accent="bubble"] {
  --bg-rosa: #ff7ac8;
  --bg-rosa-claro: #ffb3e1;
  --bg-magenta: #f04bd8;
  --bg-lavanda: #c4b5fd;
  --bg-violeta: #a78bfa;
  --bg-cian: #9eeaff;
  --bg-menta: #a7f3d0;
  --bg-crema: #fff1fb;
  --bg-ciruela: #0e0518;
  --bg-ciruela-2: #1b0a30;
  --bg-texto: #fdf2fa;
  --bg-resorte: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bg-deriva: cubic-bezier(0.16, 1, 0.3, 1);
  /* Arcoíris holográfico pastel neón (bordes que destellan). */
  --bg-holo: conic-gradient(from 210deg, #ff8fd0, #ffb3a7, #fff0a8, #a7f3d0, #9eeaff, #c4b5fd, #f0abfc, #ff8fd0);
  /* Batería Power (power-ui.css «RONDA 168»): los 4 colores de rango y el metal. */
  --bat-c1: #ff7ac8; --bat-c2: #c084fc; --bat-c3: #86efac; --bat-c4: #fff1fb;
  --bat-metal-hi: #fff0fa; --bat-metal-mid: #f5a9d6; --bat-metal-lo: #6b2a5a;
  --bat-glass: rgba(255, 214, 240, 0.2);
}

/* ── Lienzo: noche ciber ──────────────────────────────────────────────────
   Va en <html> (el lienzo raíz) y el <body> queda transparente: el lienzo
   del fondo (z −1) se pinta ENCIMA del fondo raíz y DEBAJO del contenido
   (R188). Este degradé es solo el respaldo mientras carga el JS. */
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] {
  background-color: var(--bg-ciruela) !important;
  background-image:
    radial-gradient(75% 45% at 10% 4%, rgba(255, 70, 180, 0.24), transparent 70%),
    radial-gradient(60% 50% at 95% 38%, rgba(150, 90, 255, 0.2), transparent 70%),
    radial-gradient(55% 40% at 25% 96%, rgba(90, 210, 255, 0.08), transparent 70%),
    linear-gradient(180deg, #160626 0%, var(--bg-ciruela-2) 45%, var(--bg-ciruela) 100%) !important;
  background-attachment: fixed !important;
}
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud {
  background: transparent !important;
  color: var(--bg-texto);
}
/* R191 · Fuera el patrón viejo: la aurora de body::before, la viñeta de
   body::after y las ondas/partículas al beat de soundscape.js (#pa-ondas,
   #pa-particulas, power-alfa.css §L). El fondo de la skin es el lienzo. */
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud::before,
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud::after {
  background: none !important;
  background-image: none !important;
  animation: none !important;
  opacity: 0 !important;
}
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud #pa-ondas,
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud #pa-particulas {
  display: none !important;
}

/* ── Superficies del panel: cristal de noche con bisel holográfico ────────
   Vidrio ciruela-noche translúcido, borde rosa neón de 1 px, halo de 14 px,
   un brillo especular arriba y una banda holográfica pastel quieta (sheen).
   Minimalista: dos manchas de color, nada de gotitas sueltas. */
html:not(#pa-nunca):not(#pa-bubble)[data-power-family][data-power-accent="bubble"] body.power-hud {
  --sk-vidrio: rgba(20, 8, 36, 0.8);
  --sk-tex:
    linear-gradient(180deg, rgba(255, 230, 250, 0.12) 0%, rgba(255, 230, 250, 0.02) 8%, transparent 18%),
    radial-gradient(110% 70% at 0% 0%, rgba(255, 90, 200, 0.16), transparent 62%),
    radial-gradient(90% 70% at 100% 100%, rgba(150, 100, 255, 0.18), transparent 66%);
  --sk-tex-size: auto, auto, auto;
  --sk-sheen: linear-gradient(115deg, transparent 30%, rgba(255, 150, 220, 0.1) 40%, rgba(196, 170, 255, 0.1) 47%, rgba(150, 230, 255, 0.08) 54%, transparent 64%);
  --sk-borde: rgba(255, 140, 220, 0.46);
  --sk-bisel-hi: rgba(255, 230, 250, 0.3);
  --sk-bisel-lo: rgba(20, 0, 30, 0.6);
  --sk-anillo: rgba(190, 120, 255, 0.12);
  /* R206 · bisel holográfico: filo rosa arriba-izquierda y cian-lavanda abajo-derecha (dos sombras
     interiores de 1 px, quietas; no cambia ninguna caja ni necesita pseudo-elementos). */
  --sk-halo:
    inset 1px 1px 0 rgba(255, 150, 220, 0.42),
    inset -1px -1px 0 rgba(150, 225, 255, 0.34),
    inset 0 0 18px -8px rgba(196, 170, 255, 0.35),
    0 0 14px rgba(255, 90, 200, 0.3),
    0 20px 42px -28px rgba(0, 0, 0, 0.95);
  --sk-radio: 1.25rem;
  --sk-esquina: 10px;
  --sk-esquina-color: #ff9ad8;
}

/* ── Controles: pastilla de cristal nocturno con filo de neón ── */
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud .pf-section button,
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud .hud-slot {
  background:
    radial-gradient(70% 45% at 30% 12%, rgba(255, 220, 245, 0.26), transparent 70%),
    linear-gradient(180deg, rgba(255, 90, 200, 0.24), rgba(140, 90, 255, 0.16) 55%, rgba(24, 10, 40, 0.94)) !important;
  border: 1px solid rgba(255, 150, 220, 0.55) !important;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 250, 0.42),
    inset 0 -3px 8px rgba(30, 0, 40, 0.6),
    0 0 14px rgba(255, 90, 200, 0.3);
  transition: transform 120ms var(--bg-resorte), filter 120ms var(--bg-deriva);
}
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud .hud-slot { border-radius: 1.1rem; }
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud .pf-section button:hover,
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud .hud-slot:hover {
  filter: brightness(1.14) saturate(1.1);
}
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud .pf-section button:active,
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud .hud-slot:active {
  transform: scale(0.95);
  transition: transform 100ms var(--bg-resorte);
}
/* Controles jelly: el aplastado vive en transform, nunca en width/height. */
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud .pf-section button:hover:not(:active),
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud .hud-slot:hover:not(:active) {
  animation: pwBgJelly 520ms var(--bg-resorte) 1;
}

/* ── Pop al tocar un control: nace en el dedo, se infla y revienta ── */
.pw-bg-pop {
  position: fixed;
  left: var(--px, 50%);
  top: var(--py, 50%);
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2147483000;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.9) 0 10%, rgba(255, 255, 255, 0) 17%),
    radial-gradient(circle, rgba(255, 241, 251, 0) 0 56%, rgba(255, 122, 200, 0.7) 64%, rgba(196, 181, 253, 0.6) 74%, rgba(158, 234, 255, 0) 84%);
  opacity: 0;
  transform: scale(0.3);
  animation: pwBgPop 240ms var(--bg-resorte) 1 forwards;
}

@keyframes pwBgPop {
  0% {
    opacity: 0.95;
    transform: scale(0.3);
  }
  60% {
    opacity: 0.9;
    transform: scale(1.12);
  }
  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pw-bg-pop { display: none; }
}

/* ── Lienzos del FX en Canvas 2D: decorativos, sin toques ────────────────
   R191 · DETRÁS de toda la UI: z-index −1 en el contexto raíz (el <body> es
   transparente y el lienzo de la skin va en <html>). #pw-bg-arena es UN solo
   lienzo para el fondo y las burbujas de la página. R206 · se renderiza a
   resolución reducida (½ en el teléfono, ⅓ en escritorio) y se escala con
   píxel nítido: el lava-lamp es pixel art (el mismo idioma que el hábitat). */
#pw-bg-arena {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
#pw-bg-arena { image-rendering: crisp-edges; image-rendering: pixelated; }
/* Hábitat: primer hijo de #power-companion-box con z 0 → sobre el fondo del
   cuarto, debajo de los muebles de pared (z 0, después en el DOM), la luz
   ambiente, el parlante, los botones y la mascota. */
.pw-bg-fx-hab {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ── Slot Icon · burbuja de chicle glossy (chip de la tira de skins) ──
   Esta hoja se carga SIEMPRE en perfil.html, así que el chip se ve con
   cualquier skin equipada (la regla no depende de data-power-accent). */
html:not(#pa-nunca) .hud-skin-chip[data-accent="bubble"] .sk-squircle .sk-squircle-cuerpo {
  inset: 4%;
  border-radius: 50%;
  border: 2px solid rgba(255, 214, 240, 0.9);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 179, 225, 0.3) 0 46%, rgba(255, 122, 200, 0.75) 62%, rgba(196, 181, 253, 0.85) 76%, rgba(158, 234, 255, 0.8) 88%, rgba(255, 241, 251, 0.95) 100%);
  box-shadow:
    inset 0 -4px 6px rgba(167, 139, 250, 0.55),
    inset 0 3px 4px rgba(255, 255, 255, 0.45),
    0 3px 0 -1px rgba(107, 42, 90, 0.75),
    0 0 10px rgba(255, 122, 200, 0.55);
}
/* Gota que cuelga y brillo secundario: decoran la burbuja. */
html:not(#pa-nunca) .hud-skin-chip[data-accent="bubble"] .sk-squircle .sk-squircle-cuerpo::before {
  content: "";
  position: absolute;
  right: 16%;
  bottom: 14%;
  width: 16%;
  height: 16%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
}
html:not(#pa-nunca) .hud-skin-chip[data-accent="bubble"] .sk-squircle .sk-squircle-cuerpo::after {
  content: "";
  position: absolute;
  left: 46%;
  bottom: -18%;
  width: 18%;
  height: 24%;
  border-radius: 40% 40% 50% 50% / 30% 30% 70% 70%;
  background: radial-gradient(circle at 40% 35%, #ffd6f0 0 25%, #ff7ac8 70%);
  box-shadow: 0 0 6px rgba(255, 122, 200, 0.6);
}
html:not(#pa-nunca) .hud-skin-chip[data-accent="bubble"] .sk-squircle .sk-squircle-brillo {
  left: 20%;
  top: 14%;
  width: 34%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 45% 40%, #ffffff 0 40%, rgba(255, 255, 255, 0) 75%);
  opacity: 0.95;
  transform: rotate(-24deg);
}
html:not(#pa-nunca) .hud-skin-chip[data-accent="bubble"].hud-skin-chip-on:not(:hover) .sk-squircle .sk-squircle-cuerpo {
  animation: pwBgFlota 2.6s var(--bg-deriva, cubic-bezier(0.16, 1, 0.3, 1)) infinite alternate;
}

@keyframes pwBgJelly {
  0% {
    transform: scale(1, 1);
  }
  30% {
    transform: scale(1.08, 0.9);
  }
  55% {
    transform: scale(0.95, 1.06);
  }
  80% {
    transform: scale(1.02, 0.98);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes pwBgFlota {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(0, -6%, 0) scale(1.05, 0.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud .pf-section button:hover:not(:active),
  html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud .hud-slot:hover:not(:active),
  html:not(#pa-nunca) .hud-skin-chip[data-accent="bubble"] .sk-squircle .sk-squircle-cuerpo { animation: none !important; }
  .pw-bg-fx-hab { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 191 · v247 · ÍCONO DE LA SKIN EN LA HOTBAR (slot 2)
 * ──────────────────────────────────────────────────────────────────────────
 * hotbar-viva.js pinta el slot 2 con una esfera en Canvas (.hv-cv-skin) que,
 * para skins sin patrón propio, cae al de Cyber Pulse. Con `bubble` esa
 * esfera se apaga (solo opacidad) y vuelve la cápsula de companion.js
 * (#hud-slot-swatch), vestida como pompa glossy rosa con película pastel.
 * Todo bajo [data-power-accent="bubble"]. Solo transform / opacity.
 * ════════════════════════════════════════════════════════════════════════ */
html:not(#pa-nunca)[data-power-accent="bubble"] .hud-hotbar .hud-slot[data-slot="skin"] .hv-cv-skin {
  opacity: 0;
}
html:not(#pa-nunca)[data-power-accent="bubble"] .hud-hotbar .hud-slot[data-slot="skin"] .hud-slot-content {
  opacity: 1;
  padding: 0 0.2rem 0.85rem;
}
html:not(#pa-nunca)[data-power-accent="bubble"] #hud-slot-2 #hud-slot-swatch {
  position: relative;
  overflow: visible;
  width: 58%;
  height: auto;
  aspect-ratio: 1 / 1;
  min-width: 0;
  min-height: 0;
  max-width: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 214, 240, 0.95);
  background:
    radial-gradient(34% 24% at 34% 27%, rgba(255, 255, 255, 0.95) 0 32%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle at 70% 74%, rgba(255, 255, 255, 0.75) 0 5%, rgba(255, 255, 255, 0) 9%),
    radial-gradient(circle at 50% 56%, rgba(255, 176, 224, 0.94) 0 36%, rgba(255, 140, 210, 0.96) 58%, rgba(255, 122, 200, 0.96) 74%, rgba(216, 180, 254, 0.92) 88%, rgba(158, 234, 255, 0.88) 95%, rgba(255, 241, 251, 1) 100%);
  box-shadow:
    inset 0 -5px 8px rgba(200, 70, 150, 0.55),
    inset 0 4px 6px rgba(255, 255, 255, 0.5),
    0 0 12px rgba(255, 122, 200, 0.6),
    0 0 22px rgba(196, 181, 253, 0.35);
  filter: none;
  /* R191 (rendimiento) · quieta: la vida la dan las perlas. */
  animation: none;
}
/* Película arcoíris pastel en el borde (el brillo de una pompa de jabón). */
html:not(#pa-nunca)[data-power-accent="bubble"] #hud-slot-2 #hud-slot-swatch::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: conic-gradient(from 200deg, rgba(255, 179, 225, 0), rgba(196, 181, 253, 0.55), rgba(158, 234, 255, 0.5), rgba(253, 230, 138, 0.35), rgba(255, 179, 225, 0));
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 70%);
          mask: radial-gradient(circle, transparent 60%, #000 70%);
  pointer-events: none;
}
/* Gota que cuelga de la burbuja. */
html:not(#pa-nunca)[data-power-accent="bubble"] #hud-slot-2 #hud-slot-swatch::after {
  content: "";
  position: absolute;
  left: 54%;
  bottom: -17%;
  width: 17%;
  height: 26%;
  border-radius: 40% 40% 50% 50% / 30% 30% 70% 70%;
  background: radial-gradient(circle at 38% 30%, #ffe4f4 0 22%, #ff9ad6 52%, #ff6fc0 100%);
  box-shadow: 0 0 6px rgba(255, 122, 200, 0.65);
  pointer-events: none;
}
/* Las 5 burbujitas de la cápsula: perlas blancas que suben DENTRO de la burbuja. */
html:not(#pa-nunca)[data-power-accent="bubble"] #hud-slot-2 #hud-slot-swatch .hud-bubble {
  bottom: 16%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0 30%, rgba(255, 228, 244, 0.7) 58%, rgba(255, 228, 244, 0) 74%);
  opacity: 0;
  animation-name: pwBgMiniSube;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
html:not(#pa-nunca)[data-power-accent="bubble"] #hud-slot-2 #hud-slot-swatch .hud-bubble:nth-child(1) { left: 30%; }
html:not(#pa-nunca)[data-power-accent="bubble"] #hud-slot-2 #hud-slot-swatch .hud-bubble:nth-child(2) { left: 44%; }
html:not(#pa-nunca)[data-power-accent="bubble"] #hud-slot-2 #hud-slot-swatch .hud-bubble:nth-child(3) { left: 56%; }
html:not(#pa-nunca)[data-power-accent="bubble"] #hud-slot-2 #hud-slot-swatch .hud-bubble:nth-child(4) { left: 64%; }
html:not(#pa-nunca)[data-power-accent="bubble"] #hud-slot-2 #hud-slot-swatch .hud-bubble:nth-child(5) { left: 38%; }

@keyframes pwBgMiniSube {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.6);
  }
  25% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -20px, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(#pa-nunca)[data-power-accent="bubble"] #hud-slot-2 #hud-slot-swatch .hud-bubble { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 195 · v251 → R206 · ENTRADA DEL LIENZO Y LEGIBILIDAD DEL ENCABEZADO
 * ──────────────────────────────────────────────────────────────────────────
 *   · El lienzo entra con un fundido (solo opacity, curva de deriva), así el
 *     degradé de respaldo de <html> no «salta» al fondo vivo.
 *   · Rótulos del encabezado del perfil con halo oscuro (solo pintura) y el
 *     chip «TU UNIDAD · CHARGING SPOT» en cristal nocturno casi opaco: las
 *     gotas de lava pasan detrás y nunca cortan las letras.
 * Ninguna regla toca cajas, márgenes ni el hábitat: la maqueta queda 1:1.
 * ════════════════════════════════════════════════════════════════════════ */
#pw-bg-arena {
  animation: pwBgArenaEntra 480ms cubic-bezier(0.16, 1, 0.3, 1) 1 both;
}

@keyframes pwBgArenaEntra {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  #pw-bg-arena { animation: none; }
}
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud main.perfil-page > div:first-child p,
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud main.perfil-page > div:first-child h1,
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud #perfil-sub {
  text-shadow: 0 0 2px rgba(14, 2, 22, 0.95), 0 1px 3px rgba(14, 2, 22, 0.9), 0 0 10px rgba(14, 2, 22, 0.75);
}
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud #perfil-sub {
  background-color: rgba(18, 6, 30, 0.94) !important;
  background-image: linear-gradient(180deg, rgba(255, 214, 240, 0.12), rgba(255, 214, 240, 0) 55%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 241, 251, 0.22), 0 0 14px rgba(255, 90, 200, 0.3), 0 2px 8px rgba(8, 0, 14, 0.7) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 206 · v264 · UI HOLOGRÁFICA (marcos, slots, paneles, hotbar)
 * ──────────────────────────────────────────────────────────────────────────
 *   · Bisel holográfico en TODAS las superficies (--sk-halo): filo rosa
 *     arriba-izquierda y cian-lavanda abajo-derecha, quieto (la poda de
 *     rendimiento móvil de power-alfa.css, R193, se respeta). Un pseudo
 *     ::after en .pf-section se descartó: la sección es position: static y
 *     el aro se anclaba a un ancestro. Destella —solo opacity/transform— el
 *     aura de la tarjeta de identidad (::after que ya existe).
 *   · Hotbar: cristal nocturno con filo rosa y slot elegido con anillo neón.
 *   · Sin will-change (R202) y sin estado en clases nuevas: todo cuelga de
 *     [data-power-accent="bubble"].
 * ════════════════════════════════════════════════════════════════════════ */
/* Tarjeta de identidad: su aura (::after de power-alfa) se vuelve holográfica y respira. */
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud .pf-hero::after {
  background:
    radial-gradient(60% 45% at 16% 10%, rgba(255, 90, 200, 0.3), transparent 70%),
    radial-gradient(55% 40% at 86% 94%, rgba(150, 100, 255, 0.3), transparent 70%),
    linear-gradient(105deg, transparent 0 34%, rgba(255, 150, 220, 0.14) 42%, rgba(255, 240, 200, 0.16) 48%, rgba(160, 235, 255, 0.14) 54%, rgba(196, 170, 255, 0.12) 60%, transparent 68% 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: pwBgHoloLate 4.2s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate;
}
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud .pf-hero {
  border-color: rgba(255, 140, 220, 0.6) !important;
}
/* Hotbar: barra de cristal nocturno con filo de neón; el slot elegido brilla. */
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud .hud-hotbar {
  border-color: rgba(255, 140, 220, 0.42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 230, 250, 0.22), 0 0 14px rgba(255, 90, 200, 0.26), 0 -10px 28px -18px rgba(150, 100, 255, 0.6) !important;
}
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud .hud-hotbar .hud-slot[aria-selected="true"] {
  border-color: rgba(255, 200, 240, 0.95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 250, 0.5),
    0 0 0 1px rgba(196, 170, 255, 0.55),
    0 0 14px rgba(255, 90, 200, 0.55),
    0 0 22px rgba(150, 100, 255, 0.35);
}

@keyframes pwBgHoloLate {
  0% {
    opacity: 0.42;
    transform: scale(1);
  }
  100% {
    opacity: 0.9;
    transform: scale(1.012);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 206 · v264 · FASHION STUDIO CON PULSO ARCOÍRIS (solo con `bubble`)
 * ──────────────────────────────────────────────────────────────────────────
 * Los botones de interacción (pestañas, girar, pausa, reset, desbloquear) y
 * la prenda probada (try-on: la carta .is-equipped) llevan un aro arcoíris
 * (pseudo enmascarado al borde) que PULSA con opacity + scale. La pestaña
 * activa y la prenda puesta pulsan sin parar; los demás botones, una vez al
 * pasar el dedo o al tocarlos. La carta tier 5 conserva su ::after propio
 * (latido Power de perfil-fashion.css). Guardas de 3 ids (R198) para que
 * ninguna skin de botones genérica las pise.
 * ════════════════════════════════════════════════════════════════════════ */
html:not(#bg-a):not(#bg-b):not(#bg-c)[data-power-accent="bubble"] #modal-wardrobe :is(.pw-wardrobe-tab, .pw-wardrobe-rotate-btn, .pw-wardrobe-giro, .pw-wardrobe-reset-btn, .pfs-desbloquear) {
  position: relative;
  border-color: rgba(255, 150, 220, 0.6);
  box-shadow: 0 0 10px rgba(255, 90, 200, 0.28), inset 0 1px 0 rgba(255, 236, 250, 0.22);
}
html:not(#bg-a):not(#bg-b):not(#bg-c)[data-power-accent="bubble"] #modal-wardrobe :is(.pw-wardrobe-tab, .pw-wardrobe-rotate-btn, .pw-wardrobe-giro, .pw-wardrobe-reset-btn, .pfs-desbloquear)::after,
html:not(#bg-a):not(#bg-b):not(#bg-c)[data-power-accent="bubble"] #modal-wardrobe #wardrobe-grid .pw-wardrobe-card.is-equipped:not([data-tier="5"])::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 2;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  background: var(--bg-holo);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transform: scale(1);
}
/* Pulso continuo: la pestaña activa y la prenda probada. */
html:not(#bg-a):not(#bg-b):not(#bg-c)[data-power-accent="bubble"] #modal-wardrobe .pw-wardrobe-tab.is-active::after,
html:not(#bg-a):not(#bg-b):not(#bg-c)[data-power-accent="bubble"] #modal-wardrobe #wardrobe-grid .pw-wardrobe-card.is-equipped:not([data-tier="5"])::after {
  animation: pwBgArcoiris 1.6s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate;
}
/* Pulso de una vez al pasar el dedo / tocar / enfocar (resorte oficial). */
html:not(#bg-a):not(#bg-b):not(#bg-c)[data-power-accent="bubble"] #modal-wardrobe :is(.pw-wardrobe-tab:not(.is-active), .pw-wardrobe-rotate-btn, .pw-wardrobe-giro, .pw-wardrobe-reset-btn, .pfs-desbloquear):is(:hover, :focus-visible, :active)::after {
  animation: pwBgArcoirisToque 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 1 both;
}
/* La prenda probada: brillo arcoíris fijo alrededor (quieto: el pulso es el aro). */
html:not(#bg-a):not(#bg-b):not(#bg-c)[data-power-accent="bubble"] #modal-wardrobe #wardrobe-grid .pw-wardrobe-card.is-equipped {
  box-shadow:
    0 0 12px rgba(255, 110, 200, 0.55),
    -5px 0 14px -4px rgba(158, 234, 255, 0.45),
    5px 0 14px -4px rgba(196, 170, 255, 0.5),
    inset 0 0 14px rgba(255, 110, 200, 0.2),
    inset 0 1px 0 rgba(255, 240, 250, 0.3);
}
/* El botón que abre el Studio: halo arcoíris quieto (sus pseudos son de perfil-fashion.css). */
html:not(#bg-a):not(#bg-b):not(#bg-c)[data-power-accent="bubble"] body .power-console-fashion-btn:not(.hidden) {
  box-shadow: 0 0 12px rgba(255, 110, 200, 0.5), -4px 0 12px -4px rgba(158, 234, 255, 0.5), 4px 0 12px -4px rgba(196, 170, 255, 0.55);
}

@keyframes pwBgArcoiris {
  0% {
    opacity: 0.35;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.035);
  }
}
@keyframes pwBgArcoirisToque {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  45% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] body.power-hud .pf-hero::after { animation: none !important; }
  html:not(#bg-a):not(#bg-b):not(#bg-c)[data-power-accent="bubble"] #modal-wardrobe .pw-wardrobe-tab.is-active::after,
  html:not(#bg-a):not(#bg-b):not(#bg-c)[data-power-accent="bubble"] #modal-wardrobe #wardrobe-grid .pw-wardrobe-card.is-equipped:not([data-tier="5"])::after,
  html:not(#bg-a):not(#bg-b):not(#bg-c)[data-power-accent="bubble"] #modal-wardrobe :is(.pw-wardrobe-tab, .pw-wardrobe-rotate-btn, .pw-wardrobe-giro, .pw-wardrobe-reset-btn, .pfs-desbloquear):is(:hover, :focus-visible, :active)::after {
    animation: none !important;
    opacity: 0.8;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 208 · v265 · «TABLETAS DE CHICLE ROSA» (modales, cards y paneles)
 * ──────────────────────────────────────────────────────────────────────────
 * Dirección: con Bubblegum, toda superficie se lee como una tableta de
 * chicle/gomita 3D en rosa fucsia y crema, sin una sola esquina dura ni un
 * filo rojo de la marca colándose.
 *   · Radio suave de 22 px (modales 24, cartas chicas del rack 18).
 *   · Luz crema ARRIBA (inset claro de 2 px + brillo de gomita), labio y
 *     sombra interior fucsia oscura ABAJO, halo neón de 14 px y una sombra
 *     exterior de color (nunca negra). Se conservan los dos filos
 *     holográficos de 1 px de la R206.
 *   · Fuera los corchetes de esquina: los de power-alfa (--sk-esquina, rosa
 *     de la R206) y las escuadras rojas de perfil-fashion.css (panel del
 *     Fashion Studio, botón del dock y cartas del rack, R201/R202).
 *   · La rareza POWER (tier 5) pasa a fucsia neón con la skin: sigue siendo
 *     la más intensa del rack y deja de ser rojo.
 * SOLO PINTURA: radio, sombras, fondos y color de borde. Ninguna caja cambia
 * (r208 compara getBoundingClientRect con bubble y con power) y las áreas
 * táctiles de 44 px quedan donde están. Guardas de 3 ids (R198): ganan a
 * power-alfa.css, perfil-fashion.css y a las skins de botones sin depender
 * del orden de carga (esta hoja carga ANTES que esas dos).
 * ════════════════════════════════════════════════════════════════════════ */
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud {
  --bg-chicle-sombra:
    inset 0 2px 0 rgba(255, 240, 250, 0.55),
    inset 0 12px 18px -12px rgba(255, 200, 238, 0.42),
    inset 0 -3px 0 rgba(150, 16, 104, 0.6),
    inset 0 -16px 22px -14px rgba(170, 20, 120, 0.55),
    inset 1px 1px 0 rgba(255, 150, 220, 0.42),
    inset -1px -1px 0 rgba(150, 225, 255, 0.34),
    0 0 14px rgba(255, 90, 200, 0.3),
    0 10px 24px -12px rgba(190, 30, 140, 0.6);
  --sk-vidrio: rgba(46, 8, 40, 0.86);
  --sk-tex:
    linear-gradient(180deg, rgba(255, 214, 240, 0.16) 0%, rgba(255, 214, 240, 0.04) 10%, transparent 24%),
    radial-gradient(120% 60% at 50% 0%, rgba(255, 110, 200, 0.22), transparent 64%),
    radial-gradient(110% 70% at 50% 108%, rgba(150, 12, 100, 0.34), transparent 70%);
  --sk-tex-size: auto, auto, auto;
  --sk-borde: rgba(255, 150, 220, 0.55);
  --sk-radio: 22px;
  --sk-esquina: 0px;
  --sk-esquina-color: transparent;
  --pw-tier-5: #ff3dbd;
}

/* ── La tableta: toda superficie del panel y todo modal (misma lista que power-alfa) ── */
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud :is(
  .power-card, .power-panel, .power-stat-card, .power-monitor, .pf-section, .pf-hero, .pw-game-card, .rpg-card, .alumno-card, .curso-card, .curso-stat-box, .curso-tech, .ag-battlepass, .pw-tcg-card, .as-glass, .as-radar-card, .feed-venta-row,
  :is(div, section, article, aside, form)[class*="rounded-2xl"]:is([class*="bg-zinc-9"], [class*="bg-[#0"], [class*="bg-black/"]),
  :is(div, section, article, aside, form)[class*="rounded-3xl"]:is([class*="bg-zinc-9"], [class*="bg-[#0"], [class*="bg-black/"]),
  .pw-overlay:not(.hidden) > :not(.pw-backdrop), [id$="-modal"]:not(.hidden) > :not(.absolute):not(.min-h-full):not(.pw-backdrop),
  .pw-panel, .pw-modal, .pw-modal-box, .pw-modal-content, .modal-card, .modal-container, dialog[open], .modal-vinculacion-box, .exito-sheet, .exito-card, .boveda-panel, .hud-mision-sheet, .mc-panel, .pp-modal-caja
) {
  border-radius: 22px !important;
  box-shadow: var(--bg-chicle-sombra) !important;
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud :is(.pw-overlay:not(.hidden) .pw-panel, .pw-overlay:not(.hidden) .pw-modal-box, dialog[open]) {
  border-radius: 24px !important;
}

/* ── Fashion Studio: panel, escenario, pestañas y botones ───────────────── */
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud #modal-wardrobe .pw-panel.pw-wardrobe-panel {
  border-color: rgba(255, 150, 220, 0.6) !important;
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] #modal-wardrobe .pw-wardrobe-panel::before {
  background: none;
  filter: none;
  opacity: 0;
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] #modal-wardrobe .pw-wardrobe-label {
  color: #ffb3e1 !important;
  text-shadow: 0 0 10px rgba(255, 90, 200, 0.6);
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] #modal-wardrobe .pw-wardrobe-title {
  background: linear-gradient(90deg, #fff 0%, #ffd6ef 55%, #ff9ad8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(255, 90, 200, 0.4));
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] #modal-wardrobe .pw-wardrobe-tabs {
  border-radius: 18px;
  border-color: rgba(255, 150, 220, 0.4);
  background: linear-gradient(180deg, rgba(90, 12, 70, 0.55), rgba(40, 6, 34, 0.5));
  box-shadow:
    inset 0 2px 0 rgba(255, 240, 250, 0.22),
    inset 0 -3px 0 rgba(150, 16, 104, 0.5),
    inset 0 -10px 16px -10px rgba(170, 20, 120, 0.5);
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] #modal-wardrobe .pw-wardrobe-tab {
  border-radius: 14px;
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] #modal-wardrobe .pw-wardrobe-tab.is-active {
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(255, 220, 245, 0.3), transparent 70%),
    linear-gradient(180deg, rgba(255, 110, 200, 0.42), rgba(150, 16, 104, 0.5));
  box-shadow:
    inset 0 2px 0 rgba(255, 240, 250, 0.5),
    inset 0 -3px 0 rgba(120, 10, 84, 0.7),
    0 0 14px rgba(255, 90, 200, 0.45);
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] #modal-wardrobe .pw-wardrobe-runway-stage {
  border-radius: 20px;
  border-color: rgba(255, 150, 220, 0.55);
  box-shadow:
    inset 0 2px 0 rgba(255, 240, 250, 0.45),
    inset 0 12px 18px -12px rgba(255, 200, 238, 0.35),
    inset 0 -3px 0 rgba(150, 16, 104, 0.6),
    inset 0 -18px 24px -14px rgba(170, 20, 120, 0.55),
    inset 0 0 30px rgba(20, 0, 20, 0.55),
    0 0 14px rgba(255, 90, 200, 0.3),
    0 10px 22px -12px rgba(190, 30, 140, 0.55);
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] #modal-wardrobe :is(.pw-wardrobe-rotate-btn, .pw-wardrobe-giro, .pw-wardrobe-reset-btn) {
  border-radius: 16px;
  box-shadow:
    inset 0 2px 0 rgba(255, 240, 250, 0.4),
    inset 0 -3px 0 rgba(150, 16, 104, 0.6),
    0 0 12px rgba(255, 90, 200, 0.3);
}

/* ── Rack: cartas de prenda como gomitas (radio 18), sin escuadras ──────── */
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] #wardrobe-grid .pfs-set-cab {
  border-bottom-color: rgba(255, 150, 220, 0.3);
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] #wardrobe-grid .pw-wardrobe-card {
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 214, 240, 0.14) 0%, transparent 22%),
    radial-gradient(80% 60% at 50% 40%, color-mix(in srgb, var(--tz) 16%, transparent), transparent 74%),
    linear-gradient(180deg, rgba(70, 10, 56, 0.92), rgba(34, 5, 30, 0.95));
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] #wardrobe-grid .pw-wardrobe-card:not(.is-equipped) {
  box-shadow:
    inset 0 2px 0 rgba(255, 240, 250, 0.42),
    inset 0 10px 14px -10px rgba(255, 200, 238, 0.32),
    inset 0 -3px 0 rgba(150, 16, 104, 0.6),
    inset 0 -12px 16px -10px rgba(170, 20, 120, 0.5),
    0 0 12px color-mix(in srgb, var(--tz) 30%, transparent),
    0 8px 16px -10px rgba(190, 30, 140, 0.6);
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] #modal-wardrobe #wardrobe-grid .pw-wardrobe-card.is-equipped {
  box-shadow:
    0 0 12px rgba(255, 110, 200, 0.55),
    -5px 0 14px -4px rgba(158, 234, 255, 0.45),
    5px 0 14px -4px rgba(196, 170, 255, 0.5),
    inset 0 2px 0 rgba(255, 240, 250, 0.5),
    inset 0 -3px 0 rgba(150, 16, 104, 0.65),
    inset 0 -12px 16px -10px rgba(170, 20, 120, 0.5),
    0 8px 16px -10px rgba(190, 30, 140, 0.6);
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] #wardrobe-grid .pw-wardrobe-card::before {
  background: none;
  filter: none;
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] #wardrobe-grid .pw-wardrobe-card-thumb-wrap {
  border-radius: 12px;
}
/* Rareza POWER (tier 5) en fucsia neón: borde, latido (sigue siendo solo opacity), insignia y ranura del set. */
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] #wardrobe-grid .pw-wardrobe-card[data-tier="5"] {
  --tz: #ff3dbd;
  border-color: rgb(255, 61, 189);
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] #wardrobe-grid .pw-wardrobe-card[data-tier="5"]::after {
  box-shadow: inset 0 0 0 2px rgb(255, 61, 189), inset 0 0 14px rgba(255, 61, 189, 0.55);
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] #wardrobe-grid .pw-wardrobe-card[data-tier="5"] .pw-wardrobe-rarity {
  background: linear-gradient(180deg, #ff6fd0, #c4128a);
  border-color: #ffb3e1 !important;
  box-shadow: 0 0 10px rgba(255, 61, 189, 0.7);
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] #wardrobe-grid .pfs-set-slots i[data-tier="5"] {
  background: rgba(255, 61, 189, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 61, 189, 0.7);
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] #wardrobe-grid .pfs-set-slots i[data-tier="5"].is-tiene {
  background: #ff3dbd;
  box-shadow: 0 0 6px #ff3dbd;
}

/* ── Botón «POWER FASHION STUDIO» del dock: sin escuadras ni LED rojo ───── */
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body .power-console-fashion-btn:not(.hidden)::before {
  background: none;
  filter: none;
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body .power-console-fashion-btn::after {
  box-shadow: 0 0 22px rgba(255, 90, 200, 0.6);
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body .power-console-fashion-btn .pfc-led {
  background: #ff7ac8;
  box-shadow: 0 0 0 2px #2a0622, 0 0 0 3px rgba(255, 214, 240, 0.55), 0 0 12px #ff5ac8;
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body .power-console-fashion-btn .pfc-txt {
  text-shadow: 0 0 10px rgba(255, 90, 200, 0.7);
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body .power-console-fashion-btn .pfc-flecha {
  color: #ff9ad8;
  filter: drop-shadow(0 0 6px #ff5ac8);
}

/* ── Otros rojos de base que se colaban: silueta de la hotbar y motas del hábitat ── */
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud .hud-slot-pet-silhouette::before {
  background: radial-gradient(circle at 32% 26%, rgba(255, 110, 200, 0.3) 0%, transparent 68%);
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud .lofi-mote {
  background: #ff9ad8;
  box-shadow: 0 0 8px #ff5ac8;
}

/* ── CTA biselados (power-alfa: octógono por clip-path y trama de 7 px en ::before) → gomita redonda ── */
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud :is(.power-cta, .pw-hextech-btn, .btn-primary, .btn-accent, .pay-btn, .ops-dock-btn.pw-tac-crimson, .tcg-btn-sync, .pw-overlay button[class*="bg-amber-5"], [id$="-modal"] button[class*="bg-amber-5"], button[class*="bg-[#FF3B30]"], a[class*="bg-[#FF3B30]"], button[class*="bg-red-6"]) {
  border-radius: 16px;
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud :is(.power-cta, .pw-hextech-btn, .btn-primary, .btn-accent, .pay-btn, .ops-dock-btn.pw-tac-crimson, .tcg-btn-sync, .pw-overlay button[class*="bg-amber-5"], [id$="-modal"] button[class*="bg-amber-5"], button[class*="bg-[#FF3B30]"], a[class*="bg-[#FF3B30]"], button[class*="bg-red-6"])::after {
  clip-path: inset(0 round 16px);
  border-radius: 16px;
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud :is(.power-cta, .pw-hextech-btn, .btn-primary, .btn-accent, .pay-btn, .ops-dock-btn.pw-tac-crimson, .tcg-btn-sync, .pw-overlay button[class*="bg-amber-5"], [id$="-modal"] button[class*="bg-amber-5"], button[class*="bg-[#FF3B30]"], a[class*="bg-[#FF3B30]"], button[class*="bg-red-6"])::before {
  clip-path: inset(0 round 14px);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 245, 252, 0.6) 0, rgba(255, 240, 250, 0.16) 4px, transparent 36%),
    radial-gradient(90% 120% at 50% 118%, rgba(150, 16, 104, 0.55) 0, transparent 60%),
    linear-gradient(170deg, #ffb3e1 0%, #ff6fc8 46%, #c4128a 100%);
}

/* ════════════════════════════════════════════════════════════════════════
 * RONDA 209 · v266 · TIENDA DECO COMO TABLETA DE CHICLE (skin bubble)
 * Pendiente de la R208: la Tienda Deco (slot 5 de la hotbar, #deco-tienda,
 * reglas en deco-tienda.css) seguía con esquinas de 8 px, escuadras de neón,
 * el filtro activo en rojo (239, 68, 68), el «caro» en rojo y el tier 5
 * POWER en rojo de marca (cartas, insignia, halo de las bolitas y el halo del
 * mueble en el cuarto). Con bubble: panel 22 px, cartas 18 px y botones
 * 14 px con el bisel de chicle (luz crema arriba, labio fucsia abajo, halo
 * rosa), sin escuadras, y todo lo rojo pasa a fucsia (--pw-tier-5 = #ff3dbd,
 * R208). Las BOLITAS de variante conservan su relleno: es el color real del
 * mueble (producto), no adorno. SOLO PINTURA: ninguna caja cambia (r209 lo
 * compara con power) y con power todo queda igual a HEAD. Las reglas de
 * deco-tienda.css usan !important con 3 ids: acá también, más el acento.
 * ════════════════════════════════════════════════════════════════════════ */
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud #hud-panel-decoracion {
  border-radius: 22px !important;
  border-color: var(--sk-borde) !important;
  box-shadow: var(--bg-chicle-sombra) !important;
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud #hud-panel-decoracion .hud-panel-inner {
  border-radius: 22px !important;
}
/* Cartas: gomita de 18 px con el color de su tier en el halo; sin escuadras. */
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud .deco-tienda .deco-carta {
  border-radius: 18px !important;
  border-color: color-mix(in srgb, var(--rz) 45%, rgba(255, 150, 220, 0.6)) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 240, 250, 0.5),
    inset 0 10px 14px -10px rgba(255, 200, 238, 0.35),
    inset 0 -3px 0 rgba(150, 16, 104, 0.6),
    inset 0 -12px 16px -12px rgba(170, 20, 120, 0.5),
    0 0 12px color-mix(in srgb, var(--rz) 32%, transparent),
    0 8px 18px -10px rgba(190, 30, 140, 0.55) !important;
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud .deco-tienda .deco-carta::before {
  background: none !important;
  filter: none !important;
  border-radius: 16px !important;
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud .deco-tienda .deco-escenario {
  border-radius: 14px !important;
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud .deco-tienda .deco-carta.is-power::after {
  box-shadow: inset 0 0 22px rgba(255, 61, 189, 0.35), 0 0 18px rgba(255, 61, 189, 0.45) !important;
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud .deco-tienda .deco-carta.is-power .deco-rareza {
  background: linear-gradient(180deg, #ff7ad0, #c4128a) !important;
  border-color: #ffb3e1 !important;
  box-shadow: 0 0 10px rgba(255, 61, 189, 0.7) !important;
}
/* Pestañas de filtro: chicle; la activa en fucsia (antes rojo 239, 68, 68). */
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud .deco-tienda .deco-filtro {
  border-radius: 14px !important;
  border-color: rgba(255, 150, 220, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 240, 250, 0.18), inset 0 -2px 0 rgba(150, 16, 104, 0.35) !important;
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud .deco-tienda .deco-filtro[aria-selected="true"] {
  color: #ffe0f4 !important;
  background: rgba(255, 61, 189, 0.16) !important;
  border-color: rgba(255, 120, 210, 0.8) !important;
  box-shadow: inset 0 2px 0 rgba(255, 240, 250, 0.4), inset 0 -3px 0 rgba(150, 16, 104, 0.6), 0 0 14px rgba(255, 90, 200, 0.35) !important;
}
/* Botón de acción y estados: 14 px; «caro» en fucsia suave (antes rojo). */
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud .deco-tienda .deco-accion {
  border-radius: 14px !important;
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud .deco-tienda .deco-carta.is-caro .deco-accion {
  color: #ffc2e6 !important;
  background: rgba(255, 61, 189, 0.08) !important;
  outline-color: rgba(255, 120, 210, 0.5) !important;
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud .deco-tienda .deco-carta.is-caro .deco-estado {
  color: #ffc2e6 !important;
  border-color: rgba(255, 120, 210, 0.5) !important;
}
/* Bolitas del tier 5: el anillo y el halo en fucsia (el relleno es el color del mueble). */
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud .deco-tienda .deco-muestra[data-tier="5"] .deco-muestra-bola {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9), 0 0 0 2px var(--pw-tier-5), 0 0 8px rgba(255, 61, 189, 0.75) !important;
}
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud .deco-tienda .deco-muestra[data-tier="5"][aria-pressed="true"] .deco-muestra-bola {
  box-shadow: 0 0 0 2px #0b0b10, 0 0 0 3.5px var(--pw-tier-5), 0 0 14px rgba(255, 61, 189, 0.9) !important;
}
/* El halo del mueble POWER en el cuarto también deja de ser rojo. */
html:not(#ch-a):not(#ch-b):not(#ch-c)[data-power-accent="bubble"] body.power-hud .pet-deco-prop[data-tier="5"]::before {
  background: radial-gradient(50% 50% at 50% 55%, rgba(255, 61, 189, 0.5), transparent 72%) !important;
}