/* Custom theme tokens — port of src/styles.css essentials.
   Tailwind v3 from CDN provides utility classes; this file adds the
   `quest-*` and animation utilities used by the game panels. */

body {
  font-family: "Outfit", system-ui, sans-serif;
  background: #0d0d18;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(34, 211, 238, 0.12), transparent 40%),
    radial-gradient(circle at 90% 90%, rgba(168, 85, 247, 0.12), transparent 40%);
  min-height: 100vh;
  color: #fafafa;
}

.bg-gradient-card {
  background: linear-gradient(160deg, rgba(40, 50, 80, 0.5) 0%, rgba(20, 25, 50, 0.5) 100%);
}
.shadow-glow {
  box-shadow: 0 0 40px -10px rgba(34, 211, 238, 0.5);
}
.text-gradient {
  background: linear-gradient(135deg, #22d3ee 0%, #a855f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Quest theme */
.quest-bg {
  background: radial-gradient(ellipse at 50% 0%, #2a1a6b 0%, #1a1147 45%, #0d0826 100%);
}
.quest-stars {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.7) 1px, transparent 1.5px),
    radial-gradient(circle at 82% 28%, rgba(255, 255, 255, 0.6) 1px, transparent 1.5px),
    radial-gradient(circle at 55% 65%, rgba(255, 255, 255, 0.8) 1.2px, transparent 1.8px),
    radial-gradient(circle at 28% 88%, rgba(255, 255, 255, 0.5) 1px, transparent 1.5px),
    radial-gradient(circle at 92% 75%, rgba(255, 255, 255, 0.6) 1px, transparent 1.5px);
  background-size: 240px 240px;
}
.quest-card {
  position: relative;
  border-radius: 1.5rem;
  background: linear-gradient(180deg, #1a1456 0%, #0d0838 100%);
  padding: 3px;
  background-clip: padding-box;
}
.quest-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: linear-gradient(180deg, #5a8dff 0%, #3855c4 50%, #2a1f7a 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.quest-pill-pop {
  border: 2px solid #ff3b5c;
  box-shadow: 0 0 14px rgba(255, 59, 92, 0.55), inset 0 0 10px rgba(255, 59, 92, 0.2);
}
.quest-pill-plain { border: 1.5px solid rgba(120, 140, 220, 0.45); }
.quest-title {
  font-family: "Luckiest Guy", "Bangers", system-ui, sans-serif;
  color: #ffd233;
  -webkit-text-stroke: 2px #1a0d3a;
  letter-spacing: 0.04em;
  text-shadow:
    0 1px 0 #fff7c2,
    0 4px 0 #b8851a,
    0 6px 0 #8a5e0f,
    0 8px 0 #5c3e08,
    0 10px 12px rgba(0, 0, 0, 0.6);
  line-height: 0.95;
}
.quest-tagline {
  font-family: "Luckiest Guy", "Bangers", system-ui, sans-serif;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 2px 0 #1a0d3a, 0 3px 6px rgba(0, 0, 0, 0.6);
}
.quest-key {
  background: linear-gradient(180deg, #eaf3ff 0%, #b6d2f5 100%);
  color: #1a0d3a;
  border: 1.5px solid #6b86b8;
  box-shadow: 0 3px 0 #4a6593, 0 5px 8px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.quest-key-active {
  background: linear-gradient(180deg, #5ce0ff 0%, #2196d4 100%);
  color: #fff;
  border: 1.5px solid #38d9ff;
  box-shadow: 0 0 14px #38d9ff, 0 3px 0 #1a6e9e;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-6px) rotate(4deg); }
}
.animate-bob { animation: bob 2.4s ease-in-out infinite; }
.animate-bob-slow { animation: bob 3.6s ease-in-out infinite; }

@keyframes pop-in {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.animate-pop-in { animation: pop-in 0.45s cubic-bezier(.2,1.4,.4,1) both; }

@keyframes tile-flip {
  0% { transform: rotateX(0); }
  50% { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}
.animate-tile-flip { animation: tile-flip 0.55s ease both; transform-style: preserve-3d; }

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px -4px #22d3ee, 0 0 40px -10px #22d3ee; }
  50% { box-shadow: 0 0 36px 0 #22d3ee, 0 0 70px -6px #22d3ee; }
}
.animate-glow-pulse { animation: glow-pulse 1.6s ease-in-out infinite; }

@keyframes spin-slow { 100% { transform: rotate(360deg); } }
.animate-spin-slow { animation: spin-slow 4s linear infinite; }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.animate-float { animation: float 3s ease-in-out infinite; }

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 80px rgba(245,158,11,0.15); }
  50% { box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 120px rgba(245,158,11,0.35); }
}

@keyframes fade-in-up {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up 0.35s ease-out both; }
.animate-slide-in-bottom { animation: fade-in-up 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both; }

/* Reactions battle */
@keyframes neon-blue {
  0%,100% { box-shadow: 0 0 10px #1877F2, 0 0 30px #1877F2, 0 0 60px #1877F280; border-color: #4FC3F7; }
  50% { box-shadow: 0 0 20px #1877F2, 0 0 60px #1877F2, 0 0 100px #1877F2; border-color: #fff; }
}
@keyframes neon-red {
  0%,100% { box-shadow: 0 0 10px #E53935, 0 0 30px #E53935, 0 0 60px #E5393580; border-color: #FF6B6B; }
  50% { box-shadow: 0 0 20px #E53935, 0 0 60px #E53935, 0 0 100px #E53935; border-color: #fff; }
}
@keyframes neon-green {
  0%,100% { box-shadow: 0 0 10px #00C853, 0 0 30px #00C853, 0 0 60px #00C85380; border-color: #69F0AE; }
  50% { box-shadow: 0 0 20px #00C853, 0 0 60px #00C853, 0 0 100px #00C853; border-color: #fff; }
}
@keyframes neon-yellow {
  0%,100% { box-shadow: 0 0 10px #FFD600, 0 0 30px #FFD600, 0 0 60px #FFD60080; border-color: #FFFF00; }
  50% { box-shadow: 0 0 20px #FFD600, 0 0 60px #FFD600, 0 0 100px #FFD600; border-color: #fff; }
}
@keyframes neon-purple {
  0%,100% { box-shadow: 0 0 10px #AA00FF, 0 0 30px #AA00FF, 0 0 60px #AA00FF80; border-color: #E040FB; }
  50% { box-shadow: 0 0 20px #AA00FF, 0 0 60px #AA00FF, 0 0 100px #AA00FF; border-color: #fff; }
}
@keyframes neon-orange {
  0%,100% { box-shadow: 0 0 10px #FF6D00, 0 0 30px #FF6D00, 0 0 60px #FF6D0080; border-color: #FF9E40; }
  50% { box-shadow: 0 0 20px #FF6D00, 0 0 60px #FF6D00, 0 0 100px #FF6D00; border-color: #fff; }
}
@keyframes fly-emoji {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-300px) scale(1.8); }
}
@keyframes crown { 0%,100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-8px) rotate(8deg); } }
@keyframes pulse-score { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes cta-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.85; } }
@keyframes grid-move { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } }
@keyframes title-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes live-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes winner-flash { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes bar-shine { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }