/* ══════════════════════════════════════════════════════════════════════════
 * PowerAdmin · RONDA 188 · SKIN 4 «BUBBLEGUM RAINBOW»  (id `bubble`, Kids)
 * ──────────────────────────────────────────────────────────────────────────
 * CONCEPTO · Una tienda de chicles de neón a medianoche: cristal ciruela
 * casi negro (el texto claro se lee siempre), rosa chicle #FF7AC8 como
 * acento, lavanda #C4B5FD y menta #A7F3D0 como el «arcoíris» pastel, y
 * burbujas que suben, se inflan y revientan detrás del contenido.
 *
 * REGLAS DE LA CASA (AGENTS §6):
 *   · Solo se anima transform / opacity (y filter): nada de width, height,
 *     top, left, margin ni background-position en movimiento.
 *   · Curvas oficiales: resorte cubic-bezier(0.34, 1.56, 0.64, 1) para el
 *     inflado/pop y cubic-bezier(0.16, 1, 0.3, 1) para la deriva. Ni ease
 *     ni linear.
 *   · Cero rejillas `repeating-*-gradient`: el material es cristal liso con
 *     brillo especular y manchas de color grandes (lección R184/R186).
 *   · El sonido de la skin (pista «bubble» y el pop de la UI) vive en
 *     soundscape.js; la capa de burbujas en assets/js/core/skin-bubblegum.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.
 * ════════════════════════════════════════════════════════════════════════ */

html[data-power-accent="bubble"] {
  --bg-rosa: #ff7ac8;
  --bg-rosa-claro: #ffb3e1;
  --bg-lavanda: #c4b5fd;
  --bg-violeta: #a78bfa;
  --bg-menta: #a7f3d0;
  --bg-crema: #fff1fb;
  --bg-ciruela: #150a1a;
  --bg-ciruela-2: #24102c;
  --bg-texto: #fdf2fa;
  --bg-resorte: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bg-deriva: cubic-bezier(0.16, 1, 0.3, 1);
  /* 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: ciruela profunda con tres manchas pastel (rosa · lavanda · menta) ──
   Va en <html> (el lienzo raíz) y el <body> queda transparente: la capa de
   burbujas (z −1) se pinta ENCIMA del fondo raíz y DEBAJO del contenido. Con
   el fondo en el body, el body la tapaba entera (medido en la R188). */
html:not(#pa-nunca):not(#pa-bubble)[data-power-accent="bubble"] {
  background-color: var(--bg-ciruela) !important;
  background-image:
    radial-gradient(70% 55% at 12% 4%, rgba(255, 122, 200, 0.22), transparent 70%),
    radial-gradient(60% 50% at 92% 30%, rgba(196, 181, 253, 0.18), transparent 70%),
    radial-gradient(55% 45% at 30% 100%, rgba(167, 243, 208, 0.12), transparent 70%),
    linear-gradient(180deg, var(--bg-ciruela-2) 0%, var(--bg-ciruela) 70%) !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 ahora el
   lienzo «Moon Sand» de skin-bubblegum.js (#pw-bg-arena); el degradé de
   <html> de arriba queda solo como respaldo mientras carga el JS. */
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: caramelo de cristal (variables de power-alfa.css) ── */
html:not(#pa-nunca):not(#pa-bubble)[data-power-family][data-power-accent="bubble"] body.power-hud {
  --sk-vidrio: rgba(30, 12, 36, 0.86);
  --sk-tex: linear-gradient(165deg, rgba(255, 179, 225, 0.12), transparent 40%), radial-gradient(80% 55% at 100% 110%, rgba(196, 181, 253, 0.16), transparent 70%);
  --sk-tex-size: auto, auto;
  --sk-sheen: linear-gradient(120deg, transparent 34%, rgba(255, 241, 251, 0.1) 46%, transparent 58%);
  --sk-borde: rgba(255, 179, 225, 0.5);
  --sk-bisel-hi: rgba(255, 241, 251, 0.3);
  --sk-bisel-lo: rgba(40, 0, 30, 0.5);
  --sk-anillo: rgba(255, 122, 200, 0.16);
  --sk-halo: 0 0 30px -10px rgba(255, 122, 200, 0.55), 0 22px 44px -30px rgba(0, 0, 0, 0.95);
  --sk-radio: 1.6rem;
  --sk-esquina: 14px;
  --sk-esquina-color: #ffb3e1;
}

/* ── Controles: pastilla de chicle (texto claro sobre caramelo oscuro) ── */
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: linear-gradient(180deg, rgba(255, 122, 200, 0.26), rgba(36, 16, 44, 0.94)) !important;
  border: 1px solid rgba(255, 179, 225, 0.55) !important;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 241, 251, 0.45), inset 0 -3px 8px rgba(40, 0, 30, 0.55), 0 0 14px rgba(255, 122, 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.12) 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);
}

/* ── 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(167, 243, 208, 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; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 189 · v245 · KIT BUBBLEGUM: SLIME GLOSSY, FX EN CANVAS Y SLOT ICON
 * ──────────────────────────────────────────────────────────────────────────
 *   · Superficies de slime/chicle: degradé rosado → púrpura → lavanda pastel
 *     sobre el cristal ciruela (el texto claro se sigue leyendo), banda
 *     especular arriba, gotas de brillo sueltas y acolchado por sombras
 *     interiores (todo vía las variables --sk-* de power-alfa.css: no se
 *     agregan pseudo-elementos que choquen con los de cada tarjeta).
 *   · Controles «jelly»: al pasar el dedo se aplastan y rebotan (solo
 *     transform, curva de resorte oficial).
 *   · Lienzos del FX (skin-bubblegum.js): R191 · #pw-bg-arena (fondo +
 *     burbujas de la página) y .pw-bg-fx-hab dentro del hábitat; nunca
 *     reciben toques.
 *   · Slot Icon: el chip de la skin en la tira es una burbuja de chicle
 *     glossy. 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):not(#pa-bubble)[data-power-family][data-power-accent="bubble"] body.power-hud {
  --sk-vidrio: rgba(34, 12, 40, 0.88);
  --sk-tex:
    linear-gradient(180deg, rgba(255, 241, 251, 0.2) 0%, rgba(255, 241, 251, 0.05) 9%, transparent 20%),
    radial-gradient(9px 7px at 88% 12%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(5px 4px at 93% 19%, rgba(255, 255, 255, 0.4), transparent 70%),
    radial-gradient(6px 8px at 7% 86%, rgba(255, 214, 240, 0.32), transparent 70%),
    radial-gradient(120% 70% at 0% 0%, rgba(255, 122, 200, 0.2), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(167, 139, 250, 0.22), transparent 65%),
    radial-gradient(70% 50% at 60% 115%, rgba(196, 181, 253, 0.16), transparent 70%);
  --sk-tex-size: auto, auto, auto, auto, auto, auto, auto;
  --sk-sheen: linear-gradient(115deg, transparent 30%, rgba(255, 241, 251, 0.14) 42%, rgba(255, 241, 251, 0.03) 50%, transparent 58%);
  --sk-halo:
    inset 0 12px 20px -14px rgba(255, 241, 251, 0.45),
    inset 0 -16px 24px -16px rgba(167, 139, 250, 0.42),
    0 0 30px -10px rgba(255, 122, 200, 0.55),
    0 22px 44px -30px rgba(0, 0, 0, 0.95);
}

/* 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;
}
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(60% 40% at 30% 18%, rgba(255, 255, 255, 0.34), transparent 70%),
    linear-gradient(180deg, rgba(255, 122, 200, 0.3), rgba(167, 139, 250, 0.2) 55%, rgba(36, 16, 44, 0.94)) !important;
}

/* 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>), igual que #pa-ondas.
   #pw-bg-arena es UN solo lienzo para el fondo Moon Sand y las burbujas de
   la página (QA R191: dos lienzos de pantalla entera bajo la UI costaban la
   mitad de los cuadros con CPU ×4). Se renderiza a resolución reducida y se
   escala con suavizado (image-rendering: auto). */
#pw-bg-arena {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
#pw-bg-arena { image-rendering: auto; }
/* 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) ── */
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(167, 243, 208, 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 de chicle 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 de energía en Canvas
 * (.hv-cv-skin) y para las skins sin patrón propio cae al de Cyber Pulse:
 * con `bubble` se veía el orbe cian genérico. Con la skin equipada, esa
 * esfera se apaga (solo opacidad) y vuelve a verse la cápsula de
 * companion.js (#hud-slot-swatch, 5 .hud-bubble adentro), vestida acá como
 * una burbuja glossy de slime rosa con brillo pastel, la misma familia que
 * el chip de la tira (R189). Todo bajo [data-power-accent="bubble"]: con
 * cualquier otra skin el slot queda exactamente como estaba.
 * Solo se anima transform / opacity con las curvas oficiales.
 * ════════════════════════════════════════════════════════════════════════ */
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(187, 247, 220, 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: el bamboleo de una caja con sombras y
     máscara se re-rasterizaba cada cuadro sin GPU. 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(167, 243, 208, 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 de slime que cuelga de la burbuja y se estira. */
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; }
}