/* Escenario del chibi + tiles del carrusel. */

/* Chibi stage: floor (cast shadow) + doll (capas PNG, rim outline vía theme). */
.chibi-stage {
  position: relative;
  width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  /* Sin overflow:hidden — el doll escalado 1.15× y su drop-shadow se extienden
     fuera del stage. Cortarlos trunca la cast shadow bajo los pies. */
}

/* Desktop: desplazar el chibi a la izquierda para balancear vs el panel der. */
@media (min-width: 881px) {
  .chibi-stage {
    transform: translateX(-15%);
  }
}

.chibi-stage__floor {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 58%;
  height: 5%;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 50% 50% at 50% 50%,
      rgba(0, 0, 0, 0.60) 0%,
      rgba(0, 0, 0, 0.32) 38%,
      rgba(0, 0, 0, 0.10) 72%,
      transparent 100%
    );
  filter: blur(5px);
}

.chibi-stage__doll {
  position: absolute;
  inset: 0;
  /* Scale para reducir el padding transparente del PNG (canvas 2000x2000). */
  transform: scale(1.15);
  transform-origin: 50% 50%;
}

/* Capas individuales del chibi. */
.doll-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease-soft);
}

.chibi-stage.is-swapping .doll-layer {
  opacity: 0;
}

/* Tiles del carrusel */
.tile {
  flex: 0 0 auto;
  background: var(--surface-2);
  border-radius: var(--radius-card);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition:
    transform var(--dur-fast) var(--ease-pop),
    background var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-fast) var(--ease-soft);
}

.tile:hover {
  background: var(--surface);
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

.tile:active { transform: translateY(0); }

.tile__thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transition: filter var(--dur-fast) var(--ease-soft);
}

/* Body no tiene icono pre-encuadrado en assets/outfits/icons/ — usa el
   asset original con zoom para llenar el tile. */
.tile__thumb--body { transform: scale(1.5); transform-origin: 50% 55%; }

.tile[aria-pressed='true'] {
  background: var(--surface);
  box-shadow: inset 0 0 0 3px var(--ink);
}