/* Local copy of title styles from root css/base.css
   Includes minimal keyframes so game can use the same title look
*/
.main-title {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 900;
  margin-bottom: 0.25rem;
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.0;
}

.title-gradient {
  background: linear-gradient(
    135deg,
    #a855f7 0%,
    #ec4899 25%,
    #f59e0b 50%,
    #ec4899 75%,
    #a855f7 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerGradient 4s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.6));
}

.title-sparkle {
  font-size: clamp(1.2rem, 3vw, 2rem);
  animation: sparkleRotate 3s ease-in-out infinite;
  display: inline-block;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.8));
}

/* Local keyframes to mimic site animations */
@keyframes shimmerGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes sparkleRotate {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Utility: title-like styling for smaller UI elements (buttons, labels) */
.title-button {
  display: inline-block;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.15rem; /* slightly larger to better fill buttons */
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}