/* ══════════════════════════════════════════════════════════════════════════
 * R197 · v255 — TIENDA DECO «SHOWCASE» (ui-engine)
 * R198 · v256 — TIENDA COMPACTA (ui-engine). Referencia de Dirección:
 *   «DECORATION SHOP» (rejilla oscura, celdas de marco neón fino, ícono al
 *   centro, rótulo de una línea). La tarjeta R197 medía 343 px de alto en
 *   teléfono (peana + luz + chips en renglón propio + bola de 28 px + botón
 *   macizo de latón): ahora es una celda limpia.
 *
 * Panel DECO (slot 5 de la Hotbar, perfil.html · #deco-tienda). Lo pinta
 * renderDecoTienda() de companion.js: una celda por objeto, con su ícono 3D
 * a escala ENTERA de píxel físico (--dt-ico, calculado en JS según el DPR) y
 * las 5 variantes como swatches.
 *
 * Reglas (AGENTS §3, §6.1–§6.4, LECCIONES UI):
 *  - Cristal obsidiana + filo de latón + borde neón 1px por rareza + halo 14px.
 *    Sin bg-zinc-* y sin tramas repeating-*-gradient.
 *  - Solo se animan transform / opacity / filter, con las curvas oficiales.
 *  - 44 px táctiles declarados en la regla BASE de cada control (el área
 *    táctil es de 44; lo que se VE es más liviano: bola de 20, borde fino).
 *  - Las skins tematizan «.pf-section button» con !important (clip-path,
 *    pastillas, ::after de brillo, jelly): el bloque «AISLAMIENTO» al final
 *    los neutraliza con 3 ids de especificidad.
 *  - Se carga entre perfil-fashion.css y power-alfa.css (r160: detrás de
 *    alfa solo va powi-stats.css).
 * ══════════════════════════════════════════════════════════════════════════ */

.deco-tienda {
  --dt-resorte: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dt-deriva: cubic-bezier(0.16, 1, 0.3, 1);
  --dt-laton: #d6b25e;
  --dt-laton-claro: #fde7a8;
  --dt-obsidiana: rgba(9, 8, 14, 0.94);
  --dt-ico: 96px;
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  min-width: 0;
}
.deco-tienda[hidden] { display: none !important; }
/* En ≥ 600 px .hud-panel-inner arma 3 columnas (auto 1fr auto): la tienda va a todo el ancho. */
#hud-panel-decoracion .hud-panel-inner { grid-template-columns: minmax(0, 1fr); }
.deco-tienda * { box-sizing: border-box; }

/* ── Cabecera: título, colección y saldo ─────────────────────────────── */
.deco-tienda-cab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
}
.deco-tienda-titulo {
  margin: 0;
  min-width: 0;
  font: 900 12px/1.1 'Orbitron', ui-monospace, monospace;
  letter-spacing: 0.14em;
  color: #f4f4f5;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
}
.deco-tienda-titulo small {
  margin-left: 4px;
  font: 700 11px/1 'Rajdhani', system-ui, sans-serif;
  letter-spacing: 0.06em;
  color: #a1a1aa;
}
.deco-tienda-saldo {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 6px;
  font: 800 12px/1 'Orbitron', ui-monospace, monospace;
  color: #fde68a;
  background: rgba(20, 14, 4, 0.85);
  border: 1px solid rgba(251, 191, 36, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.22), 0 0 14px rgba(251, 191, 36, 0.22);
}
.deco-tienda-barra {
  grid-column: 1 / -1;
  position: relative;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
}
.deco-tienda-barra i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #b45309, #fbbf24 60%, #fde68a);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  transition: transform 420ms var(--dt-deriva);
}

/* ── Pestañas de categoría: ícono SVG de trazo (power-icons.js) + rótulo ─ */
.deco-tienda-filtros {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}
.deco-filtro {
  position: relative;
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px 1px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  font: 700 10px/1 'Rajdhani', system-ui, sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #a1a1aa;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 120ms var(--dt-resorte), filter 140ms var(--dt-deriva);
}
.deco-filtro-ico { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; line-height: 0; }
.deco-filtro-ico svg { width: 18px; height: 18px; display: block; }
@media (min-width: 600px) {
  .deco-filtro { flex-direction: row; gap: 6px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
}
.deco-filtro-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.deco-filtro[aria-selected="true"] {
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.75);
  background: rgba(239, 68, 68, 0.1);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.3);
}
.deco-filtro:active { transform: scale(0.95); }
@media (hover: hover) {
  .deco-filtro:hover { filter: brightness(1.2); }
}

/* ── Rejilla ─────────────────────────────────────────────────────────── */
.deco-tienda-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}
@media (min-width: 600px) {
  .deco-tienda-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
}

/* ── Celda: cristal obsidiana, marco neón fino por rareza, escuadras ─── */
.deco-carta {
  --rz: #e4e4e7;
  position: relative;
  isolation: isolate;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 4px 4px 4px;
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(70% 46% at 50% 34%, color-mix(in srgb, var(--rz) 12%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(20, 18, 26, 0.92), rgba(6, 6, 10, 0.96));
  border: 1px solid color-mix(in srgb, var(--rz) 42%, transparent);
  box-shadow:
    0 0 14px color-mix(in srgb, var(--rz) 18%, transparent),
    inset 0 1px 0 rgba(214, 178, 94, 0.22);
  transition: transform 220ms var(--dt-resorte), filter 160ms var(--dt-deriva);
}
/* Escuadras de neón en las 4 esquinas (el marco de la referencia), sin tramas. */
.deco-carta::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: 6px;
  pointer-events: none;
  background:
    linear-gradient(var(--rz), var(--rz)) left top / 9px 1px no-repeat,
    linear-gradient(var(--rz), var(--rz)) left top / 1px 9px no-repeat,
    linear-gradient(var(--rz), var(--rz)) right top / 9px 1px no-repeat,
    linear-gradient(var(--rz), var(--rz)) right top / 1px 9px no-repeat,
    linear-gradient(var(--rz), var(--rz)) left bottom / 9px 1px no-repeat,
    linear-gradient(var(--rz), var(--rz)) left bottom / 1px 9px no-repeat,
    linear-gradient(var(--rz), var(--rz)) right bottom / 9px 1px no-repeat,
    linear-gradient(var(--rz), var(--rz)) right bottom / 1px 9px no-repeat;
  opacity: 0.75;
}
.deco-carta[data-rareza="legendaria"] {
  box-shadow:
    0 0 14px rgba(251, 191, 36, 0.32),
    inset 0 1px 0 rgba(255, 240, 200, 0.3);
}
.deco-carta.is-en-uso { border-color: rgba(52, 211, 153, 0.7); }
@media (hover: hover) {
  .deco-carta:hover { transform: translate3d(0, -2px, 0); filter: brightness(1.08); }
  .deco-carta:hover .deco-thumb { transform: translate3d(0, -3px, 0); }
  .deco-carta:hover .deco-luz { opacity: 1; }
}

/* Rareza (izq.) y precio / estado (der.): etiquetas finas SOBRE la vitrina,
   no un renglón propio. */
.deco-carta-top {
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 4px;
  right: 4px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3px;
  min-width: 0;
  pointer-events: none;
}
.deco-rareza,
.deco-estado {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 4px;
  border-radius: 3px;
  font: 800 7.5px/1.2 'Orbitron', ui-monospace, monospace;
  letter-spacing: 0.06em;
  background: rgba(6, 6, 10, 0.78);
}
.deco-rareza {
  flex: 0 1 auto;
  color: var(--rz);
  border: 1px solid color-mix(in srgb, var(--rz) 55%, transparent);
}
.deco-estado {
  flex: 0 0 auto;
  color: #fde68a;
  border: 1px solid rgba(251, 191, 36, 0.4);
}
.deco-estado.is-gratis { color: #a7f3d0; border-color: rgba(52, 211, 153, 0.5); }
.deco-estado.is-tiene { color: #e0f2fe; border-color: rgba(125, 211, 252, 0.5); }
.deco-estado.is-puesto { color: #6ee7b7; border-color: rgba(52, 211, 153, 0.7); box-shadow: 0 0 8px rgba(52, 211, 153, 0.3); }

/* Vitrina: el ícono al centro, a escala entera del píxel físico (--dt-ico). */
.deco-escenario {
  position: relative;
  height: calc(var(--dt-ico) + 8px);
  margin-top: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
}
.deco-luz {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(var(--dt-ico) * 1.25);
  height: calc(var(--dt-ico) * 1.05);
  margin-left: calc(var(--dt-ico) * -0.625);
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 62%, color-mix(in srgb, var(--rz) 20%, transparent), transparent 92%);
  opacity: 0.6;
  transition: opacity 220ms var(--dt-deriva);
}
/* Piso de la vitrina: una línea de luz, no una peana maciza. */
.deco-peana {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: calc(var(--dt-ico) * 0.95);
  height: 6px;
  margin-left: calc(var(--dt-ico) * -0.475);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--rz) 40%, transparent), transparent 100%);
}
.deco-peana::after {
  content: "";
  position: absolute;
  inset: -6px -10px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--rz) 80%, #fff);
  opacity: 0;
  pointer-events: none;
}
.deco-thumb {
  position: relative;
  display: block;
  width: var(--dt-ico);
  height: var(--dt-ico);
  margin-bottom: 4px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.6));
  transition: transform 260ms var(--dt-resorte);
}

/* Rótulo: nombre en una línea (dos como máximo si la fuente no cargó) y la
   variante debajo, chica. */
.deco-nombre {
  min-width: 0;
  text-align: center;
  font: 700 12px/1.12 'Rajdhani', system-ui, sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #f4f4f5;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.deco-variante {
  min-width: 0;
  text-align: center;
  font: 600 10px/1.15 'Rajdhani', system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--rz) 50%, #a1a1aa);
  overflow-wrap: anywhere;
}

/* Pie: 5 swatches + la acción como 6.ª celda (3 × 2 celdas de 44 px). Antes
   la acción era un renglón propio de ancho completo debajo de 2 renglones de
   swatches. */
.deco-pie {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  justify-content: center;
  gap: 0;
  min-width: 0;
  margin: auto -4px 0;   /* abajo de la celda · 3 celdas de 44 aun en la celda de 360 px (el aire queda adentro) */
}
@media (min-width: 600px) {
  .deco-pie { grid-template-columns: repeat(3, 48px); }
}
/* Swatches: 5 variantes. Área táctil de 44 px; lo visible es una bola de 20. */
.deco-muestras { display: contents; }
.deco-muestra {
  position: relative;
  width: 44px;
  min-height: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 120ms var(--dt-resorte);
}
.deco-muestra-bola {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(135deg, var(--m1) 0 55%, var(--m2) 55% 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24);
  transition: transform 200ms var(--dt-resorte);
}
.deco-muestra[aria-pressed="true"] .deco-muestra-bola {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px #0b0b10, 0 0 0 3px #fde68a, 0 0 10px rgba(251, 191, 36, 0.5);
}
.deco-muestra-tiene {
  position: absolute;
  right: 9px;
  bottom: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  pointer-events: none;
  background: #34d399;
  border: 1px solid #0b0b10;
  box-shadow: 0 0 5px rgba(52, 211, 153, 0.8);
}
.deco-muestra:active { transform: scale(0.88); }
@media (hover: hover) {
  .deco-muestra:hover .deco-muestra-bola { transform: scale(1.12); }
  .deco-muestra[aria-pressed="true"]:hover .deco-muestra-bola { transform: scale(1.1); }
}

/* Acción: celda de 44 × 44 (ícono de trazo + rótulo corto), filo neón fino.
   El texto completo vive en el botón (sr-only + title). */
.deco-accion {
  position: relative;
  width: 44px;
  min-width: 0;
  min-height: 44px;
  height: 44px;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  white-space: nowrap;
  font: 700 8.5px/1 'Rajdhani', system-ui, sans-serif;
  letter-spacing: 0.01em;
  color: #fde68a;
  /* El marco visible va 3 px ADENTRO del área táctil (outline-offset negativo + fondo en content-box):
     la celda de 44 llega al borde de la tarjeta, el filo no. */
  background: rgba(251, 191, 36, 0.08);
  background-clip: content-box;
  border: 0;
  outline: 1px solid rgba(251, 191, 36, 0.55);
  outline-offset: -3px;
  transition: transform 120ms var(--dt-resorte), filter 140ms var(--dt-deriva);
}
.deco-accion-ico { width: 16px; height: 16px; display: block; flex: 0 0 auto; }
.deco-accion::after { content: attr(data-corto); display: block; }
.deco-accion:active:not(:disabled) { transform: scale(0.95); }
.deco-accion:disabled { cursor: default; }
@media (hover: hover) {
  .deco-accion:hover:not(:disabled) { filter: brightness(1.2); }
}

/* Brillo que barre la celda (al usar / colocar): banda diagonal, solo transform + opacity. */
.deco-brillo {
  position: absolute;
  inset: -20% -40%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 246, 214, 0.08) 44%, rgba(255, 250, 230, 0.5) 50%, rgba(255, 246, 214, 0.08) 56%, transparent 62%);
  opacity: 0;
  transform: translate3d(-70%, 0, 0);
}

/* ── Micro-interacciones (se disparan desde renderDecoTienda) ────────── */
@keyframes dtEntra {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.95);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes dtPop {
  0% {
    transform: scale(0.88);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes dtSalta {
  0% {
    transform: translate3d(0, 14px, 0) scale(0.7);
    opacity: 0.4;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes dtAro {
  0% {
    transform: scale(0.6);
    opacity: 0.95;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}
@keyframes dtBarre {
  0% {
    transform: translate3d(-70%, 0, 0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate3d(70%, 0, 0);
    opacity: 0;
  }
}
@keyframes dtCambia {
  0% {
    transform: scale(0.82);
    opacity: 0.35;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
.deco-tienda-grid.is-entra .deco-carta {
  animation: dtEntra 240ms var(--dt-resorte) backwards;
  animation-delay: calc(var(--i, 0) * 28ms);
}
.deco-carta.is-pop { animation: dtPop 480ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.deco-carta.is-pop .deco-thumb { animation: dtSalta 520ms var(--dt-resorte) backwards; }
.deco-carta.is-pop .deco-peana::after { animation: dtAro 600ms var(--dt-deriva) 1; }
.deco-carta.is-barrido .deco-brillo { animation: dtBarre 720ms var(--dt-deriva) 1; }
.deco-carta.is-barrido .deco-peana::after { animation: dtAro 600ms var(--dt-deriva) 1; }
.deco-carta.is-var .deco-thumb { animation: dtCambia 240ms var(--dt-resorte) backwards; }

@media (prefers-reduced-motion: reduce) {
  .deco-tienda-grid.is-entra .deco-carta,
  .deco-carta.is-pop,
  .deco-carta.is-pop .deco-thumb,
  .deco-carta.is-var .deco-thumb,
  .deco-carta .deco-peana::after,
  .deco-carta .deco-brillo { animation: none !important; }
  .deco-carta,
  .deco-thumb,
  .deco-muestra-bola,
  .deco-tienda-barra i { transition: none; }
}

/* ══ AISLAMIENTO DE SKINS ══════════════════════════════════════════════
 * power-skins.css, skin-bubblegum.css y las familias de perfil.html visten
 * «.pf-section button» con !important (fondo, borde, clip-path, ::after,
 * jelly). La tienda conserva su paleta: 3 ids de especificidad le ganan a
 * los 2 de bubble (html:not(#pa-nunca):not(#pa-bubble)…). */
html:not(#dt-a):not(#dt-b):not(#dt-c) body .deco-tienda button {
  clip-path: none !important;
  animation: none !important;
  overflow: visible !important;
  text-shadow: none !important;
}
html:not(#dt-a):not(#dt-b):not(#dt-c) body .deco-tienda button::before,
html:not(#dt-a):not(#dt-b):not(#dt-c) body .deco-tienda button:not(.deco-accion)::after {
  content: none !important;
  display: none !important;
}
/* R198 · el ::after de la acción es SU rótulo corto: las skins no lo pisan. */
html:not(#dt-a):not(#dt-b):not(#dt-c) body .deco-tienda .deco-accion::after {
  content: attr(data-corto) !important;
  display: block !important;
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
html:not(#dt-a):not(#dt-b):not(#dt-c) body .deco-tienda .deco-carta.is-caro .deco-estado {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.5);
}
html:not(#dt-a):not(#dt-b):not(#dt-c) body .deco-tienda .deco-filtro {
  color: #a1a1aa !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
html:not(#dt-a):not(#dt-b):not(#dt-c) body .deco-tienda .deco-filtro[aria-selected="true"] {
  color: #fecaca !important;
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.75) !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.3) !important;
}
html:not(#dt-a):not(#dt-b):not(#dt-c) body .deco-tienda .deco-muestra {
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}
html:not(#dt-a):not(#dt-b):not(#dt-c) body .deco-tienda .deco-accion {
  color: #fde68a !important;
  background: rgba(251, 191, 36, 0.08) !important;
  background-clip: content-box !important;
  border: 0 !important;
  border-radius: 10px !important;
  outline: 1px solid rgba(251, 191, 36, 0.55) !important;
  outline-offset: -3px !important;
  box-shadow: none !important;
}
html:not(#dt-a):not(#dt-b):not(#dt-c) body .deco-tienda .deco-accion:focus-visible { outline: 2px solid #fef3c7 !important; }
html:not(#dt-a):not(#dt-b):not(#dt-c) body .deco-tienda .deco-carta.is-caro .deco-accion {
  color: #fca5a5 !important;
  background: rgba(239, 68, 68, 0.06) !important;
  background-clip: content-box !important;
  outline-color: rgba(248, 113, 113, 0.45) !important;
}
html:not(#dt-a):not(#dt-b):not(#dt-c) body .deco-tienda .deco-carta.is-tiene .deco-accion {
  color: #e4e4e7 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  background-clip: content-box !important;
  outline-color: rgba(214, 178, 94, 0.45) !important;
}
html:not(#dt-a):not(#dt-b):not(#dt-c) body .deco-tienda .deco-carta.is-en-uso .deco-accion {
  color: #6ee7b7 !important;
  background: rgba(16, 185, 129, 0.1) !important;
  background-clip: content-box !important;
  outline-color: rgba(52, 211, 153, 0.6) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * R201 · v259 — TIENDA POR RAREZA (SET DE 5 TIERS) Y REACCIONES EN EL CUARTO
 * (ui-engine). Referencia B de Dirección: paneles cyber oscuros con escuadras
 * de neón gruesas, marco biselado, placa interior iluminada desde arriba y
 * halo fino. Misma caja que la R198 (no crece el alto de la celda).
 *
 * Tier = POSICIÓN de la variante (contrato del lead, igual en muebles3d.py):
 *   1 Común · 2 Raro · 3 Épico · 4 Legendario · 5 POWER (rojo de marca).
 * Los colores de tier son tokens globales (--pw-tier-N): los usan la tienda,
 * los muebles del cuarto y el Power Fashion Studio (perfil-fashion.css).
 * ══════════════════════════════════════════════════════════════════════════ */
:root {
  --pw-tier-1: #b8b8c4;
  --pw-tier-2: #22d3ee;
  --pw-tier-3: #a855f7;
  --pw-tier-4: #fbbf24;
  --pw-tier-5: #ff2a3d;
}

/* ── Leyenda del set (cabecera) ─────────────────────────────────────── */
.deco-tier-leyenda {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 4px;
  font: 800 8px/1 'Orbitron', ui-monospace, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a1a1aa;
  white-space: nowrap;
}
.deco-tier-leyenda span { min-width: 0; display: inline-flex; align-items: center; gap: 3px; color: var(--tz); }
.deco-tier-leyenda b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  font: 900 7px/1 'Orbitron', ui-monospace, monospace;
  color: #0b0b10;
  background: var(--tz);
  box-shadow: 0 0 6px color-mix(in srgb, var(--tz) 60%, transparent);
}

/* ── Celda: panel cyber biselado (Referencia B) ─────────────────────── */
.deco-carta {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 58%),
    radial-gradient(70% 46% at 50% 40%, color-mix(in srgb, var(--rz) 14%, transparent), transparent 74%),
    linear-gradient(180deg, rgba(18, 16, 24, 0.94), rgba(5, 5, 9, 0.97));
  border: 1px solid color-mix(in srgb, var(--rz) 55%, transparent);
  box-shadow:
    0 0 14px color-mix(in srgb, var(--rz) 26%, transparent),
    0 6px 14px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 240, 200, 0.26),
    inset 0 -1px 0 rgba(0, 0, 0, 0.85),
    inset 0 0 0 2px rgba(0, 0, 0, 0.55),
    inset 0 0 0 3px color-mix(in srgb, var(--dt-laton) 16%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--rz) 12%, transparent);
}
/* Escuadras gruesas de neón (2 × 12 px) con resplandor, como el marco de la referencia. */
.deco-carta::before {
  inset: 1px;
  border-radius: 7px;
  background:
    linear-gradient(var(--rz), var(--rz)) left top / 12px 2px no-repeat,
    linear-gradient(var(--rz), var(--rz)) left top / 2px 12px no-repeat,
    linear-gradient(var(--rz), var(--rz)) right top / 12px 2px no-repeat,
    linear-gradient(var(--rz), var(--rz)) right top / 2px 12px no-repeat,
    linear-gradient(var(--rz), var(--rz)) left bottom / 12px 2px no-repeat,
    linear-gradient(var(--rz), var(--rz)) left bottom / 2px 12px no-repeat,
    linear-gradient(var(--rz), var(--rz)) right bottom / 12px 2px no-repeat,
    linear-gradient(var(--rz), var(--rz)) right bottom / 2px 12px no-repeat;
  filter: drop-shadow(0 0 3px var(--rz));
  opacity: 0.9;
}
/* Placa interior de la vitrina: marco fino del tier, luz cenital, fondo hundido. */
.deco-escenario::before {
  content: "";
  position: absolute;
  inset: 0 6px;
  border-radius: 6px;
  pointer-events: none;
  background:
    radial-gradient(80% 60% at 50% 18%, rgba(255, 255, 255, 0.06), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.6));
  border: 1px solid color-mix(in srgb, var(--rz) 30%, transparent);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.deco-rareza {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--rz) 30%, transparent);
}
/* Pips del tier: 5 rayitas de 2 px (máscara de 5 tramos explícitos, sin tramas repetidas),
   encendidas hasta la del tier. */
.deco-tier-pips {
  --t: 1;
  flex: 0 0 auto;
  width: 14px;
  height: 5px;
  background: linear-gradient(90deg, var(--rz) 0 calc(var(--t) * 3px - 1px), rgba(255, 255, 255, 0.22) 0);
  -webkit-mask: linear-gradient(90deg, #000 0 2px, transparent 2px 3px, #000 3px 5px, transparent 5px 6px, #000 6px 8px, transparent 8px 9px, #000 9px 11px, transparent 11px 12px, #000 12px 14px);
          mask: linear-gradient(90deg, #000 0 2px, transparent 2px 3px, #000 3px 5px, transparent 5px 6px, #000 6px 8px, transparent 8px 9px, #000 9px 11px, transparent 11px 12px, #000 12px 14px);
}

/* ── Set de 5 swatches: aro del tier + inicial ──────────────────────── */
.deco-muestra-bola {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9), 0 0 0 2px var(--tz, rgba(255, 255, 255, 0.24));
  transform: translate3d(0, -3px, 0);
}
.deco-muestra[aria-pressed="true"] .deco-muestra-bola {
  transform: translate3d(0, -3px, 0) scale(1.1);
  box-shadow: 0 0 0 2px #0b0b10, 0 0 0 3.5px var(--tz, #fde68a), 0 0 10px var(--tz, rgba(251, 191, 36, 0.5));
}
.deco-muestra-tier {
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 14px;
  margin-left: -7px;
  text-align: center;
  pointer-events: none;
  font: 900 7px/1 'Orbitron', ui-monospace, monospace;
  color: var(--tz);
  text-shadow: 0 0 4px color-mix(in srgb, var(--tz) 70%, transparent);
}
.deco-muestra-tiene { right: 8px; bottom: 12px; }
.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, 42, 61, 0.75);
}
.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, 42, 61, 0.9);
}
@media (hover: hover) {
  .deco-muestra:hover .deco-muestra-bola { transform: translate3d(0, -3px, 0) scale(1.12); }
  .deco-muestra[aria-pressed="true"]:hover .deco-muestra-bola { transform: translate3d(0, -3px, 0) scale(1.1); }
}

/* ── Edición POWER: rojo de marca, insignia sólida y marco que respira ─ */
.deco-carta.is-power { --rz: var(--pw-tier-5); }
.deco-carta.is-power .deco-rareza {
  color: #fff;
  background: linear-gradient(180deg, #ff4a5a, #c8102e);
  border-color: #ff8a95;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 10px rgba(255, 42, 61, 0.7);
}
.deco-carta.is-power .deco-tier-pips { background: #fff; }
.deco-carta.is-power::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 22px rgba(255, 42, 61, 0.35), 0 0 18px rgba(255, 42, 61, 0.45);
  opacity: 0.35;
  animation: dtPowerRespira 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate;
}
@keyframes dtPowerRespira {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}
.deco-carta[data-tier="4"] .deco-luz { opacity: 0.85; }
.deco-carta.is-power .deco-luz { opacity: 1; }

/* ══ R201 · MUEBLES DEL CUARTO: halo y reacción al toque por tier ═════════
 * Lo pinta DecoFx (companion.js): data-tier en .pet-deco-prop, clases fx-* con
 * los efectos del catálogo y data-toque="a" / "b" alternados (v259: data-* y no clases, el Tailwind CDN observa `class`) (keyframes
 * gemelos: reinician sin `offsetWidth`). Sin rAF propio; las animaciones CSS
 * se congelan solas con la pestaña oculta. */
.pet-deco-prop[data-tier="4"]::before,
.pet-deco-prop[data-tier="5"]::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -6%;
  height: 30%;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 55%, rgba(251, 191, 36, 0.42), transparent 72%);
  opacity: 0.5;
  animation: dfxHalo 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate;
  will-change: opacity;
}
.pet-deco-prop[data-tier="5"]::before { background: radial-gradient(50% 50% at 50% 55%, rgba(255, 42, 61, 0.5), transparent 72%); }
.pet-deco-prop.is-techo[data-tier="4"]::before,
.pet-deco-prop.is-techo[data-tier="5"]::before { bottom: auto; top: 30%; height: 50%; }
@keyframes dfxHalo {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 0.9;
  }
}
/* R203 · v261 · chispas, anillo y destello del toque: UN lienzo 2D (DecoFx, companion.js), ya no nodos DOM.
 * Encima de los muebles de adelante (z 24), sin toques. */
#power-companion-box .pet-deco-fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 25;
  pointer-events: none;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
.pet-deco-prop[data-tier="1"] { --dfx: var(--pw-tier-1); }
.pet-deco-prop[data-tier="2"] { --dfx: var(--pw-tier-2); }
.pet-deco-prop[data-tier="3"] { --dfx: var(--pw-tier-3); }
.pet-deco-prop[data-tier="4"] { --dfx: var(--pw-tier-4); }
.pet-deco-prop[data-tier="5"] { --dfx: var(--pw-tier-5); }

/* Tier 1 · pop (resorte). Tier 2 · pop + destello. */
.pet-deco-prop.pet-deco-prop[data-toque="a"] .pet-deco-ventana { animation: dfxPopA 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.pet-deco-prop.pet-deco-prop[data-toque="b"] .pet-deco-ventana { animation: dfxPopB 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.pet-deco-prop.pet-deco-prop[data-tier="2"][data-toque="a"] .pet-deco-ventana { animation: dfxBrilloA 480ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.pet-deco-prop.pet-deco-prop[data-tier="2"][data-toque="b"] .pet-deco-ventana { animation: dfxBrilloB 480ms cubic-bezier(0.34, 1.56, 0.64, 1); }
/* Épico · pulso de ecualizador (aplastar y estirar desde la base); el anillo lo dibuja el lienzo (R203). */
.pet-deco-prop.pet-deco-prop[data-fx~="pulso"][data-toque="a"] .pet-deco-ventana { animation: dfxPulsoA 620ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.pet-deco-prop.pet-deco-prop[data-fx~="pulso"][data-toque="b"] .pet-deco-ventana { animation: dfxPulsoB 620ms cubic-bezier(0.34, 1.56, 0.64, 1); }
/* Power · glitch de energía (sacudón + aberración cian/roja) en lugar del pulso. */
.pet-deco-prop.pet-deco-prop[data-fx~="glitch"][data-toque="a"] .pet-deco-ventana { animation: dfxGlitchA 700ms cubic-bezier(0.16, 1, 0.3, 1); }
.pet-deco-prop.pet-deco-prop[data-fx~="glitch"][data-toque="b"] .pet-deco-ventana { animation: dfxGlitchB 700ms cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes dfxPopA {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(0.92, 0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes dfxPopB {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(0.92, 0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes dfxBrilloA {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(0.92, 0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes dfxBrilloB {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(0.92, 0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes dfxPulsoA {
  0% {
    transform: scale(1);
  }
  22% {
    transform: scale(1.06, 0.86);
  }
  48% {
    transform: scale(0.96, 1.1);
  }
  72% {
    transform: scale(1.02, 0.97);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes dfxPulsoB {
  0% {
    transform: scale(1);
  }
  22% {
    transform: scale(1.06, 0.86);
  }
  48% {
    transform: scale(0.96, 1.1);
  }
  72% {
    transform: scale(1.02, 0.97);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes dfxGlitchA {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  10% {
    transform: translate3d(-3px, 0, 0) scale(1.06, 0.88);
  }
  20% {
    transform: translate3d(3px, -1px, 0) scale(0.96, 1.1);
  }
  30% {
    transform: translate3d(-2px, 1px, 0) scale(1.02, 0.97);
  }
  42% {
    transform: translate3d(1px, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes dfxGlitchB {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  10% {
    transform: translate3d(-3px, 0, 0) scale(1.06, 0.88);
  }
  20% {
    transform: translate3d(3px, -1px, 0) scale(0.96, 1.1);
  }
  30% {
    transform: translate3d(-2px, 1px, 0) scale(1.02, 0.97);
  }
  42% {
    transform: translate3d(1px, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .deco-carta.is-power::after,
  .pet-deco-prop[data-tier="4"]::before,
  .pet-deco-prop[data-tier="5"]::before,
  .pet-deco-prop.pet-deco-prop[data-toque="a"] .pet-deco-ventana,
  .pet-deco-prop.pet-deco-prop[data-toque="b"] .pet-deco-ventana { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * R204 · v262 · SOMBRAS DE PROFUNDIDAD EN LA DUELA (R205 · v263: tramadas, ver abajo)
 * - #pet-floor-shadow-canvas (SombrasPiso, companion.js): una elipse de oclusión bajo cada
 *   mueble de piso y bajo el equipo de sonido, en el plano del piso. z 1: encima del fondo y de
 *   WallProps (z 0), debajo de muebles (9/24), parlante (10/25) y mascota. Se pinta solo al
 *   cambiar el layout.
 * - Sombra de la mascota: `scale` por la razón profundidad/ventana (--pw-prof, la escribe
 *   sombraSueloProfundidad solo al cambiar). La propiedad `scale` compone con el `transform`
 *   de sus keyframes de salto y paso (no los pisa). Núcleo de contacto más denso que la
 *   penumbra: la mascota se lee apoyada, no flotando. El halo de acento de power-alfa queda.
 * ══════════════════════════════════════════════════════════════════════════ */
#power-companion-box .pet-floor-sombras {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
/* R205 · SOMBRA DE LA MASCOTA EN PIXEL ART (manda sobre el radial suave de la R204).
 * Sin blur ni degradados de aerógrafo: el elemento queda transparente y dos pseudo-elementos
 * pintan TRAMAS de un píxel del arte (--pw-u, que escribe sombraSueloProfundidad):
 *   ::before  halo de acento: damero del acento recortado a la elipse (reemplaza el box-shadow
 *             difuso de power-alfa.css, R90; el carmesí sigue viviendo en la base).
 *   ::after   sombra: núcleo sólido de borde duro (≤ 56 %) + anillo en damero hasta el 100 %.
 * Las máscaras tienen corte duro (99 % → 100 %): ningún borde difuminado. `scale` sigue
 * componiendo con los keyframes de salto y paso. */
#power-companion-box .pet-stage-wrap .pet-ground-shadow {
  scale: var(--pw-prof, 1);
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  border-radius: 0;
  --pw-trama: calc(var(--pw-u, 1px) * 2);
}
#power-companion-box .pet-stage-wrap .pet-ground-shadow::before,
#power-companion-box .pet-stage-wrap .pet-ground-shadow::after {
  content: '';
  position: absolute;
  pointer-events: none;
  image-rendering: pixelated;
  -webkit-mask-image: radial-gradient(closest-side, #000 99%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 99%, transparent 100%);
}
#power-companion-box .pet-stage-wrap .pet-ground-shadow::before {
  inset: -18% -10%;
  opacity: 0.5;
  background: conic-gradient(var(--pa-accent, #ef4444) 25%, transparent 0 50%, var(--pa-accent, #ef4444) 0 75%, transparent 0) 0 0 / var(--pw-trama) var(--pw-trama);
}
#power-companion-box .pet-stage-wrap .pet-ground-shadow::after {
  inset: 0;
  background:
    radial-gradient(closest-side, rgba(6, 3, 10, 0.74) 99%, transparent 100%) 50% 50% / 56% 56% no-repeat,
    conic-gradient(rgba(6, 3, 10, 0.7) 25%, transparent 0 50%, rgba(6, 3, 10, 0.7) 0 75%, transparent 0) 0 0 / var(--pw-trama) var(--pw-trama);
}

/* ══ R210 · v267 — TAMAGOTCHI Y MENÚ DEL DOBLE TAP ══
 * #pet-tama-fx-canvas: fantasma sonámbulo (35 %), estallido neón, estela, arcoíris, Zzz y snack (companion.js
 * PetTamaFx, sin rAF propio). #pet-tama-menu: mini-menú kawaii sobre la mascota, posicionado UNA vez por
 * transform (inline); la entrada anima solo transform/opacity de .ptm-caja con keyframes gemelos A/B por
 * data-abierto (sin var() en @keyframes, sin clases: el Tailwind CDN observa `class`). Botones de 50 × 52 px
 * (≥ 44) con su altura en la regla base. */
#power-companion-box .pet-tama-fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 26;
  pointer-events: none;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
#power-companion-box #pet-tama-menu {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 40;
  height: 64px;
  padding: 0;
  pointer-events: auto;
  touch-action: manipulation;
}
#power-companion-box #pet-tama-menu[hidden] {
  display: none !important;
}
#power-companion-box #pet-tama-menu .ptm-caja {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 22px;
  background: rgba(22, 10, 30, 0.9);
  border: 1px solid rgba(255, 122, 214, 0.6);
  box-shadow: 0 0 14px rgba(255, 79, 216, 0.32), inset 0 1px 0 rgba(255, 228, 246, 0.28), inset 0 -2px 0 rgba(201, 162, 90, 0.35);
  transform-origin: 50% 100%;
}
#power-companion-box #pet-tama-menu[data-lado="abajo"] .ptm-caja { transform-origin: 50% 0%; }
#power-companion-box #pet-tama-menu[data-abierto="a"] .ptm-caja { animation: ptmPopA 220ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
#power-companion-box #pet-tama-menu[data-abierto="b"] .ptm-caja { animation: ptmPopB 220ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes ptmPopA {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.7); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes ptmPopB {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.7); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
#power-companion-box #pet-tama-menu .ptm-btn {
  width: 50px;
  min-height: 52px;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  padding: 0;
  border-radius: 16px;
  border: 1px solid rgba(255, 179, 230, 0.45);
  background: rgba(255, 255, 255, 0.06);
  color: #ffe4f6;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition-property: transform, filter;
  transition-duration: 120ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
#power-companion-box #pet-tama-menu .ptm-btn:hover,
#power-companion-box #pet-tama-menu .ptm-btn:focus-visible {
  filter: brightness(1.25) drop-shadow(0 0 6px rgba(255, 79, 216, 0.55));
  outline: none;
}
#power-companion-box #pet-tama-menu .ptm-btn:active { transform: scale(0.95); }
#power-companion-box #pet-tama-menu .ptm-btn[data-bloqueado="1"] {
  opacity: 0.55;
  border-style: dashed;
  cursor: not-allowed;
}
#power-companion-box #pet-tama-menu .ptm-ico {
  font-size: 20px;
  line-height: 1;
}
#power-companion-box #pet-tama-menu .ptm-txt {
  max-width: 48px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
@media (prefers-reduced-motion: reduce) {
  #power-companion-box #pet-tama-menu[data-abierto] .ptm-caja { animation: none; }
  #power-companion-box #pet-tama-menu .ptm-btn { transition: none; }
}

/* ══ R222 · v280 — BOTÓN «💖 REANIMAR» DE LA MASCOTA DERROTADA POR HAMBRE ══
 * companion.js PetTama.boton: solo derrotada, perfil propio y fuera del Doppelgänger (si no, `hidden`). Cristal
 * obsidiana (relleno ahumado + bisel latón por box-shadow inset, sin degradado ni backdrop-filter, poda R90) con
 * borde neón rosa 1px y halo 14px, en la esquina de abajo OPUESTA al cuerpo tirado (data-lado, lo pone
 * PetTama.boton: nunca lo tapa). Alto de 44 px declarado SOLO acá (regla base). Selector de 3 ids (el id
 * repetido suma): las reglas de skin del tipo `.pf-section button` no lo repintan (R198). Solo transform/filter. */
#power-companion-box #pet-tama-reanimar#pet-tama-reanimar {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 39;   /* debajo del menú de la pócima (#pet-tama-menu, z 40): si se cruzan, manda el menú abierto */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 96px;   /* R223 · ancho FIJO (= PET_TAMA_BTN_W de companion.js): la esquina se elige sin medir */
  min-width: 0;
  max-width: calc(50% - 20px);
  min-height: 44px;
  height: auto;
  margin: 0;
  padding: 4px 6px;
  border-radius: 16px;
  border: 1px solid rgba(255, 79, 216, 0.6);
  background: rgba(13, 13, 18, 0.88);
  box-shadow: 0 0 14px rgba(255, 79, 216, 0.3), inset 0 1px 0 rgba(255, 228, 246, 0.26), inset 0 -2px 0 rgba(201, 162, 90, 0.5);
  color: #ffe4f6;
  font: 800 12px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition-property: transform, filter;
  transition-duration: 120ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
#power-companion-box #pet-tama-reanimar#pet-tama-reanimar[hidden] { display: none !important; }
#power-companion-box #pet-tama-reanimar#pet-tama-reanimar[data-lado="der"] { left: auto; right: 10px; }
/* R223 · hasta tres renglones (título · precio o «Faltan N 🪙» · «gratis en Xh»). Ya no sube a la fila de arriba (tapaba el logo): siempre abajo. */
#power-companion-box #pet-tama-reanimar#pet-tama-reanimar .ptr-t,
#power-companion-box #pet-tama-reanimar#pet-tama-reanimar .ptr-s,
#power-companion-box #pet-tama-reanimar#pet-tama-reanimar .ptr-r {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  pointer-events: none;
}
#power-companion-box #pet-tama-reanimar#pet-tama-reanimar .ptr-t { font-size: 11.5px; }
#power-companion-box #pet-tama-reanimar#pet-tama-reanimar .ptr-s { font-size: 9.5px; font-weight: 700; color: #ffd36b; letter-spacing: 0; }
#power-companion-box #pet-tama-reanimar#pet-tama-reanimar .ptr-r { font-size: 9px; font-weight: 700; color: #9ff5c0; letter-spacing: 0; }
#power-companion-box #pet-tama-reanimar#pet-tama-reanimar .ptr-r[hidden] { display: none; }
#power-companion-box #pet-tama-reanimar#pet-tama-reanimar[data-pago="falta"] {
  border-color: rgba(255, 196, 77, 0.55);
  box-shadow: 0 0 14px rgba(255, 196, 77, 0.22), inset 0 1px 0 rgba(255, 240, 210, 0.2), inset 0 -2px 0 rgba(201, 162, 90, 0.5);
  color: rgba(255, 228, 246, 0.72);
}
#power-companion-box #pet-tama-reanimar#pet-tama-reanimar[data-no="a"] { animation: ptrNoA 260ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
#power-companion-box #pet-tama-reanimar#pet-tama-reanimar[data-no="b"] { animation: ptrNoB 260ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes ptrNoA {
  0% { transform: translate3d(0, 0, 0); }
  30% { transform: translate3d(-4px, 0, 0); }
  60% { transform: translate3d(3px, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes ptrNoB {
  0% { transform: translate3d(0, 0, 0); }
  30% { transform: translate3d(-4px, 0, 0); }
  60% { transform: translate3d(3px, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
#power-companion-box #pet-tama-reanimar#pet-tama-reanimar:hover,
#power-companion-box #pet-tama-reanimar#pet-tama-reanimar:focus-visible {
  filter: brightness(1.2) drop-shadow(0 0 6px rgba(255, 79, 216, 0.55));
  outline: none;
}
#power-companion-box #pet-tama-reanimar#pet-tama-reanimar:active { transform: translate3d(0, 0, 0) scale(0.95); transition-duration: 100ms; }
#power-companion-box #pet-tama-reanimar#pet-tama-reanimar[data-pago="rescate"] { border-color: rgba(124, 245, 164, 0.6); box-shadow: 0 0 14px rgba(124, 245, 164, 0.28), inset 0 1px 0 rgba(228, 255, 238, 0.26), inset 0 -2px 0 rgba(201, 162, 90, 0.5); }
@media (prefers-reduced-motion: reduce) {
  #power-companion-box #pet-tama-reanimar#pet-tama-reanimar { transition: none; }
  #power-companion-box #pet-tama-reanimar#pet-tama-reanimar[data-no] { animation: none; }
}

/* ══ R212 · v270 — SALA LLENA: aviso de la tienda ══
 * DecoTienda.avisar (companion.js) pinta este rótulo 8 s cuando un mueble no entra en ningún lugar limpio ni
 * reacomodando lo que la persona no fijó: el mueble NO se pone encima de otro. Cristal obsidiana con borde
 * neón ámbar de 1px y halo de 14px; sin animación (no compite con el pop de la carta). */
#hud-panel-decoracion .deco-tienda-aviso {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 191, 71, 0.55);
  background-color: rgba(13, 13, 18, 0.86);   /* cristal: relleno ahumado + bisel por box-shadow inset, sin degradado */
  box-shadow: 0 0 14px rgba(255, 191, 71, 0.3), inset 0 1px 0 rgba(255, 236, 196, 0.22), inset 0 10px 14px -10px rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(120, 82, 20, 0.45);
  color: #ffe3a8;
  font: 800 12px/1.3 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.02em;
}
#hud-panel-decoracion .deco-tienda-aviso > span { min-width: 0; }
#hud-panel-decoracion .deco-tienda-aviso-ico {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 191, 71, 0.7);
  color: #ffbf47;
  font: 900 13px/1 'Orbitron', ui-monospace, monospace;
}

/* ══ R220 · v278 — TIENDA DECO COMPACTA: el cuarto a la vista ══
 * Orden de Dirección: el panel ya no tapa la pantalla. companion.js deja el hábitat visible ARRIBA de la tienda
 * (hotbarActivateSlot, slot «decoracion») y acá la tienda pasa a una sola fila de celdas que se desliza de lado
 * (scroll-snap), con la cabecera apretada, y cada celda se acuesta (vitrina | rótulo + swatches): ~140 px de
 * alto contra los ~196 de la R198. Swatches y acción siguen de 44 px (regla base) y el ícono a escala entera.
 * El rótulo «Decoración» de perfil.html se esconde: la tienda ya trae su título. Sin animaciones nuevas. */
#hud-panel-decoracion .hud-panel-inner > .w-full > div:first-child:not(.deco-tienda) {
  display: none;
}
#hud-panel-decoracion #deco-tienda.deco-tienda {
  gap: 6px;
  margin-bottom: 0;
}
#hud-panel-decoracion #deco-tienda .deco-tienda-cab { gap: 2px 8px; }
#hud-panel-decoracion #deco-tienda .deco-tienda-grid {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  padding: 2px 2px 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(214, 178, 94, 0.45) transparent;
  -webkit-overflow-scrolling: touch;
}
/* La celda se acuesta: vitrina a la izquierda; nombre, variante y la grilla de 3 × 2 celdas de 44 px a la
   derecha. Rareza y precio siguen como etiquetas finas arriba, ahora en su propio renglón de 16 px. */
#hud-panel-decoracion #deco-tienda .deco-carta {
  display: grid;
  grid-template-columns: max(72px, calc(var(--dt-ico) + 4px)) 132px;
  grid-template-rows: 16px auto auto auto;
  column-gap: 6px;
  row-gap: 0;
  align-items: start;
  padding: 4px 6px 4px 4px;
  scroll-snap-align: start;
}
#hud-panel-decoracion #deco-tienda .deco-escenario {
  grid-column: 1;
  grid-row: 2 / span 3;
  align-self: center;
  margin-top: 2px;
}
#hud-panel-decoracion #deco-tienda .deco-nombre {
  grid-column: 2;
  grid-row: 2;
  margin-top: 2px;
  text-align: left;
}
#hud-panel-decoracion #deco-tienda .deco-variante {
  grid-column: 2;
  grid-row: 3;
  text-align: left;
}
#hud-panel-decoracion #deco-tienda .deco-pie {
  grid-column: 2;
  grid-row: 4;
  justify-content: start;
  margin: 2px 0 0;
}
@media (min-width: 600px) {
  #hud-panel-decoracion #deco-tienda .deco-carta { grid-template-columns: max(72px, calc(var(--dt-ico) + 4px)) 144px; }
  #hud-panel-decoracion #deco-tienda .deco-tienda-grid { grid-auto-columns: max-content; gap: 8px; }
}

/* ══ R209 · v266 — MUEBLES SIN RECUADRO: nada a la vista hasta que la hoja está decodificada ══
 * pintarHojaDeco (companion.js) pone data-carga="espera" mientras la hoja del mueble (o del equipo de
 * sonido) se baja y se decodifica, y "lista" cuando ya está en el <img>. Mientras espera: ni el sprite, ni el
 * halo de tier (::before), ni la sombra de piso (SombrasPiso salta ese mueble). Solo opacity; aparece con la
 * curva de deriva. data-* y no clases: el Tailwind CDN observa `class`. */
#power-companion-box .pet-deco-prop[data-carga="espera"],
#power-companion-box #pet-room-radio[data-carga="espera"] {
  opacity: 0;
  pointer-events: none;
}
#power-companion-box .pet-deco-prop[data-carga="lista"] {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  #power-companion-box .pet-deco-prop[data-carga="lista"] { transition: none; }
}