src/app/globals.css

@import "tailwindcss";

/* --- Cosmetic custom-property defaults --- */
:root {
  --cosmetic-card-bg: rgba(26, 16, 64, 0.4);
  --cosmetic-card-border: rgba(255, 255, 255, 0.1);
  --cosmetic-card-glow: none;
  --cosmetic-star-color: white;
  --cosmetic-answer-border: rgba(255, 255, 255, 0.2);
  --cosmetic-answer-hover: rgba(233, 30, 140, 0.5);
  --cosmetic-title-gradient: none;
}

@theme {
  --color-navy: #0a0e27;
  --color-purple-deep: #1a1040;
  --color-dark: #0a0a1a;
  --color-magenta: #e91e8c;
  --color-gold: #ffc107;
  --color-cyan: #00d4ff;
  --color-card: rgba(255, 255, 255, 0.05);
  --color-card-border: rgba(255, 255, 255, 0.1);
  --font-display: "Inter", sans-serif;
}

/* --- Base body background --- */
body {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(233, 30, 140, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(26, 16, 64, 0.8) 0%, transparent 60%),
    linear-gradient(135deg, var(--color-navy) 0%, var(--color-dark) 100%);
  background-attachment: fixed;
  color: white;
  min-height: 100vh;
}

/* --- Glass card --- */
.glass-card {
  background: rgba(26, 16, 64, 0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border-radius: 1rem;
}

/* --- Glow utilities --- */
.glow-magenta {
  box-shadow:
    0 0 20px rgba(233, 30, 140, 0.4),
    0 0 40px rgba(233, 30, 140, 0.2);
}

.glow-gold {
  box-shadow:
    0 0 20px rgba(255, 193, 7, 0.4),
    0 0 40px rgba(255, 193, 7, 0.2);
}

.glow-cyan {
  box-shadow:
    0 0 20px rgba(0, 212, 255, 0.4),
    0 0 40px rgba(0, 212, 255, 0.2);
}

/* --- Shake animation (wrong answer feedback) --- */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

/* --- Fast pulse (1s cycle) --- */
.animate-pulse-fast {
  animation: pulse-fast 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-fast {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* --- Starfield twinkle --- */
@keyframes twinkle {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.star {
  position: absolute;
  pointer-events: none;
  width: 2px;
  height: 2px;
  background: var(--cosmetic-star-color, white);
  border-radius: 50%;
  animation: twinkle var(--twinkle-duration, 3s) ease-in-out infinite;
  animation-delay: var(--twinkle-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .star {
    animation: none;
    opacity: 0.6;
  }
}

/* --- Rainbow star animation (prismatic_field cosmetic) --- */
@keyframes rainbow-star {
  0%   { background: hsl(0, 100%, 70%); }
  16%  { background: hsl(60, 100%, 70%); }
  33%  { background: hsl(120, 100%, 70%); }
  50%  { background: hsl(180, 100%, 70%); }
  66%  { background: hsl(240, 100%, 70%); }
  83%  { background: hsl(300, 100%, 70%); }
  100% { background: hsl(360, 100%, 70%); }
}

.star-rainbow {
  animation:
    twinkle var(--twinkle-duration, 3s) ease-in-out infinite,
    rainbow-star 3s linear infinite;
  animation-delay: var(--twinkle-delay, 0s);
}

@keyframes shine-sweep {
  0%, 100% { transform: translateX(-120%); }
  50% { transform: translateX(120%); }
}