/**
 * Base Styles - Layout, Typography, Colors
 * Foundation styles for Magic Cat Oracle
 */

/* ===== LAYOUT & TYPOGRAPHY ===== */
body {
  font-family: 'Inter', system-ui, sans-serif;

  background-image:
    linear-gradient(rgba(100, 50, 200, 0.3), rgba(50, 30, 150, 0.35)),
    url("../assets/images/ForestDark.png");

  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-blend-mode: multiply;
  
  /* Performance optimization */
  will-change: background;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* Smooth transition for time-based backgrounds */
  transition: opacity 750ms ease-in-out, background-image 750ms ease-in-out;
}

.magic-glow {
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.6);
}

/* ===== FLOATING SPARKLES CONTAINER ===== */
#sparkles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}

/* ===== PARTICLE STYLING ===== */
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(200, 150, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(200, 150, 255, 0.8);
  animation: floatUp linear infinite;
}

/* Golden particle styling */
.golden-particle {
  background: radial-gradient(circle, #FFD700 0%, #FFC107 100%) !important;
  box-shadow: 
    0 0 20px rgba(255, 215, 0, 0.9),
    0 0 40px rgba(255, 193, 7, 0.6) !important;
  animation: goldenTwinkle 0.8s ease-in-out infinite alternate;
}

/* ===== GAMIFICATION SECTION ===== */
#stats-section {
  animation: slideUp 0.5s ease-out;
}

.tooltip {
  position: relative;
  cursor: help;
}

.tooltip:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.7rem;
  white-space: nowrap;
  z-index: 50;
  pointer-events: none;
}

.animate-bounce {
  animation: bounce 0.6s ease-in-out;
}