/**
 * Pixel Art Viewport — módulo reutilizable (Radio Vibra FM)
 *
 * Escala sprites estilo Habbo sin suavizado bicúbico del navegador.
 * Usar: contenedor .pixel-viewport + img.pixel-art (o .pixel-viewport__sprite)
 */

/* ── Algoritmo nearest-neighbor en todos los motores ── */
.pixel-art,
.pixel-viewport__sprite,
.pixel-thumb {
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

/* ── Contenedor responsivo (sin JS en resize) ── */
.pixel-viewport {
  --pixel-viewport-max: 340px;
  --pixel-viewport-ratio: 1 / 1;
  --pixel-sprite-max-h: 240px;
  --pixel-sprite-min-h: 120px;
  --pixel-sprite-height: 72%;

  position: relative;
  width: 100%;
  max-width: var(--pixel-viewport-max);
  aspect-ratio: var(--pixel-viewport-ratio);
  container-type: size;
  contain: layout paint style;
  overflow: hidden;
}

/* Sala Keko: el motor (engine.js) controla posición y escala del avatar. */
.keko-room.pixel-viewport {
  contain: layout style;
  overflow: hidden;
  aspect-ratio: unset;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  clip-path: none;
  container-type: normal;
}

.keko-room .pixel-viewport__stage {
  overflow: hidden;
  clip-path: none;
  pointer-events: none;
}

/* Móvil: el motor centra el sprite con JS (misma lógica que escritorio). */
.keko-room.keko-room--engine-layout .pixel-viewport__sprite,
.keko-room.keko-room--engine-layout .keko-room__avatar {
  bottom: auto;
  left: auto;
  top: auto;
  right: auto;
  transform: none;
  min-height: 0;
  max-height: none;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: auto;
  margin: 0;
}

@media (max-width: 900px) {
  .keko-room.keko-room--engine-layout .keko-room__avatar,
  .keko-room.keko-room--engine-layout .kg-avatar {
    pointer-events: auto;
    touch-action: none;
    -webkit-touch-callout: none;
  }

  .keko-room .pixel-viewport__stage {
    pointer-events: auto;
    touch-action: none;
  }

  .keko-room.pixel-viewport.kg-stage {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
  }
}

/* Escenario interno: capa de composición aislada (barato en repaint) */
.pixel-viewport__stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Sprite principal — altura en % del contenedor + límites en px */
.pixel-viewport__sprite {
  position: absolute;
  left: 50%;
  bottom: 22%;
  transform: translateX(-50%);
  width: auto;
  height: var(--pixel-sprite-height);
  min-height: var(--pixel-sprite-min-h);
  max-height: min(var(--pixel-sprite-max-h), 72cqh);
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}

.pixel-viewport__sprite.is-dragging {
  cursor: grabbing;
}

/* Miniaturas del armario */
.pixel-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

@media (max-width: 768px) {
  .pixel-viewport {
    --pixel-viewport-max: min(100%, 300px);
    --pixel-sprite-max-h: 200px;
    --pixel-sprite-min-h: 100px;
    --pixel-sprite-height: 68%;
  }

  .keko-room.pixel-viewport {
    max-width: none;
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-viewport__sprite {
    transition: none;
  }
}