/**
 * 🎨 UPROTA — Sistema de Sprites Pixel Art
 * Arquitectura & Integración: Nexo
 * Sprites & Arte Original: Pix
 */

/* Regla base de renderizado pixel-perfect */
.pixel-art,
.pixel-icon {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  object-fit: contain;
}

/* Tamaños estándar de sprites */
.icon-16 {
  width: 16px;
  height: 16px;
}

.icon-20 {
  width: 20px;
  height: 20px;
}

.icon-24 {
  width: 24px;
  height: 24px;
}

.icon-32 {
  width: 32px;
  height: 32px;
}

.icon-48 {
  width: 48px;
  height: 48px;
}

/* Efecto hover suave para interactivos */
.nav-tab-btn .pixel-icon {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), filter 0.15s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.nav-tab-btn:hover .pixel-icon {
  transform: translateY(-1px) scale(1.08);
}

.nav-tab-btn.active .pixel-icon {
  transform: scale(1.12);
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.4));
}

/* Ajustes de alineación en chips de recursos */
.recurso-chip .pixel-icon {
  margin-right: 2px;
}

/* Animación de Ondas de Radio (Loop 2 frames steps(1)) */
.sprite-radio-onda-anim {
  width: 20px;
  height: 20px;
  background-image: url('../assets/sprites/ui/sprite_radio_onda_frame1.png');
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  display: inline-block;
  vertical-align: middle;
  animation: animRadioOnda 0.7s steps(1) infinite;
}

@keyframes animRadioOnda {
  0%, 100% {
    background-image: url('../assets/sprites/ui/sprite_radio_onda_frame1.png');
  }
  50% {
    background-image: url('../assets/sprites/ui/sprite_radio_onda_frame2.png');
  }
}

/* Botón de Check interactivo con sprite */
.btn-check-item .pixel-icon {
  width: 16px;
  height: 16px;
}

/* Emojis Pixel Art (16x16 nativos para textos y listas) */
.emoji-pixel {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  display: inline-block;
  object-fit: contain;
  flex-shrink: 0;
}

/* ==========================================
   MODO FIESTA / FESTIVAL DEL REFUGIO (Retro Harlem Shake)
   ========================================== */

@keyframes fiestaRebote {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  25% { transform: translateY(-4px) rotate(-3deg) scale(1.05); }
  50% { transform: translateY(0) rotate(0deg) scale(1); }
  75% { transform: translateY(-3px) rotate(3deg) scale(1.04); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

@keyframes fiestaGlow {
  0% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); border-color: #f59e0b; }
  50% { box-shadow: 0 0 35px rgba(56, 189, 248, 0.6); border-color: #38bdf8; }
  100% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); border-color: #f59e0b; }
}

@keyframes fiestaIconoBounce {
  0%, 100% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.25) rotate(-8deg); }
  60% { transform: scale(1.2) rotate(8deg); }
}

body.modo-fiesta-activo .pixel-icon,
body.modo-fiesta-activo .nav-tab-btn,
body.modo-fiesta-activo .recurso-chip,
body.modo-fiesta-activo .diorama-sprite-modulo,
body.modo-fiesta-activo .torta-container {
  animation: fiestaRebote 0.45s infinite ease-in-out;
}

body.modo-fiesta-activo .app-header {
  animation: fiestaGlow 0.8s infinite ease-in-out;
}

.fiesta-icono-rebotante {
  animation: fiestaIconoBounce 0.6s infinite ease-in-out;
  display: inline-block;
}