/* ============================================================================
   PokeWave.net — CSS adicional (no-Tailwind)
   ============================================================================
   Tailwind se carga vía Play CDN en el layout (suficiente para desarrollo).
   Para producción óptima:  npm run build  → reemplaza este archivo.
   ============================================================================ */

/* Variables CSS de tipos Pokémon (para usar inline con var(--type-...)) */
:root {
  --type-normal:#A8A878; --type-fire:#F08030; --type-water:#6890F0; --type-electric:#F8D030;
  --type-grass:#78C850;  --type-ice:#98D8D8;  --type-fighting:#C03028; --type-poison:#A040A0;
  --type-ground:#E0C068; --type-flying:#A890F0; --type-psychic:#F85888; --type-bug:#A8B820;
  --type-rock:#B8A038;   --type-ghost:#705898; --type-dragon:#7038F8;  --type-dark:#705848;
  --type-steel:#B8B8D0;  --type-fairy:#EE99AC;
}

/* Sprites pixel art clásicos: nítidos sin antialiasing */
.pixelated {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Ocultar scrollbar visual conservando funcionalidad (rieles internos) */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Scrollbar fino y elegante para el resto */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(126,126,134,0.4);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255,204,0,0.6);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Mejor renderizado de fuentes */
body {
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Animación stagger para items que aparecen secuencialmente */
@keyframes stagger-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stagger-item {
  animation: stagger-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--index, 0) * 60ms);
}

/* Ripple sutil al hacer clic en botones marcados */
.ripple { position: relative; overflow: hidden; }
.ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,204,0,0.35) 0%, transparent 60%);
  opacity: 0;
  transform: scale(0);
  transition: transform 0.5s, opacity 0.5s;
  pointer-events: none;
}
.ripple:active::after {
  transform: scale(1);
  opacity: 1;
  transition: 0s;
}

/* Decoración pokeball reutilizable */
.pokeball-deco {
  background: radial-gradient(circle at 50% 50%, #EE1515 0% 45%, #ffffff 45% 55%, #1a1a1a 55% 100%);
  border-radius: 9999px;
  border: 4px solid #1a1a1a;
}

/* Selección de texto con amarillo Pokémon */
::selection { background: rgba(255, 204, 0, 0.45); color: #0A0A0A; }