/**
 * Wheel of Knowledge - Styling
 * Mystical wheel spin system
 */

/* ===== WHEEL BUTTON ===== */
#wheel-btn {
  position: absolute;
  top: 0.75rem;
  left: 6rem; /* left-24 = 6rem */
  font-size: 1.5rem;
  color: #FBBF24; /* amber-300 */
  transition: all 0.3s ease;
  z-index: 50;
}

#wheel-btn:hover {
  color: white;
  transform: scale(1.1) rotate(15deg);
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.8));
}

/* Spin animation on hover */
#wheel-btn:hover {
  animation: wheelSpin 1s ease-in-out;
}

@keyframes wheelSpin {
  0% { transform: scale(1.1) rotate(0deg); }
  100% { transform: scale(1.1) rotate(360deg); }
}

/* ===== WHEEL MODAL ===== */
.wheel-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6) !important; /* Same as Settings modal */
  backdrop-filter: blur(8px) !important; /* Blur effect like Settings */
  -webkit-backdrop-filter: blur(8px) !important; /* Safari support */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.wheel-modal.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Ensure modal content is above overlay */
.wheel-modal-content {
  position: relative;
  z-index: 1;
  overflow-y: auto;
  max-height: 90vh;
}

/* ===== DIFFICULTY CARDS HOVER ===== */
.difficulty-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px currentColor;
}

#wheel-easy-btn:hover {
  border-color: rgba(251, 191, 36, 0.9);
  box-shadow: 0 0 30px rgba(251, 191, 36, 0.6);
}

#wheel-medium-btn:hover {
  border-color: rgba(16, 185, 129, 0.9);
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.6);
}

#wheel-hard-btn:hover {
  border-color: rgba(59, 130, 246, 0.9);
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
}

/* ===== WHEEL CONTAINER ===== */
.wheel-container {
  position: relative;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    rgba(88, 28, 135, 0.9) 0%,
    rgba(76, 29, 149, 0.7) 50%,
    rgba(49, 46, 129, 0.5) 100%
  );
  border: 4px solid rgba(168, 85, 247, 0.8);
  border-radius: 50%;
  box-shadow: 
    0 0 40px rgba(168, 85, 247, 0.8),
    0 0 80px rgba(192, 132, 252, 0.5),
    inset 0 0 60px rgba(88, 28, 135, 0.6);
  overflow: hidden;
}

/* ===== MYSTICAL ARROW POINTER ===== */
.wheel-pointer {
  position: absolute;
  top: 10px;  /* Overlaps wheel edge */
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  pointer-events: none;
  width: 60px;
  height: 90px;
  transform-origin: top center;
  /* No animation by default - controlled by .spinning class */
}

/* Arrow swings only when wheel is spinning */
.wheel-pointer.spinning {
  animation: arrowSwing 1s ease-in-out infinite, arrowGlowPulse 2s ease-in-out infinite;
}

/* Slower swing when wheel is slowing down */
.wheel-pointer.slowing {
  animation: arrowSwingSlow 1.8s ease-in-out infinite, arrowGlowPulse 3s ease-in-out infinite;
}

/* Arrow body (shaft) - reversed gradient for downward arrow */
.arrow-body {
  position: absolute;
  top: 0;  /* Start from top */
  left: 50%;
  transform: translateX(-50%);
  width: 8px;  /* Slightly thicker for visibility */
  height: 55px;
  background: linear-gradient(180deg, 
    rgba(168, 85, 247, 1) 0%,     /* Purple at top */
    rgba(251, 191, 36, 1) 50%,    /* Amber middle */
    rgba(255, 215, 0, 1) 100%);   /* Gold at bottom (near tip) */
  border-radius: 4px;
  box-shadow: 
    0 0 15px rgba(251, 191, 36, 0.8),
    0 0 30px rgba(168, 85, 247, 0.6),
    inset 0 0 10px rgba(255, 255, 255, 0.3);
  animation: arrowShaftPulse 1.5s ease-in-out infinite;
}

/* Arrow tip (triangle pointing DOWN) */
.arrow-tip {
  position: absolute;
  top: 50px;  /* At bottom of shaft */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 24px solid transparent;   /* Wider tip */
  border-right: 24px solid transparent;
  border-top: 35px solid #FBBF24;  /* border-TOP makes it point DOWN */
  filter: drop-shadow(0 0 20px rgba(251, 191, 36, 1))
          drop-shadow(0 0 40px rgba(168, 85, 247, 0.8))
          drop-shadow(0 0 60px rgba(255, 215, 0, 0.6));
  animation: arrowTipPulse 1.5s ease-in-out infinite;
}

/* Fast pendulum swing - when wheel starts spinning */
@keyframes arrowSwing {
  0% { 
    transform: translateX(-50%) rotate(-15deg);  /* Swing left */
  }
  25% {
    transform: translateX(-50%) rotate(0deg);    /* Center */
  }
  50% { 
    transform: translateX(-50%) rotate(15deg);   /* Swing right */
  }
  75% {
    transform: translateX(-50%) rotate(0deg);    /* Center */
  }
  100% { 
    transform: translateX(-50%) rotate(-15deg);  /* Back to left */
  }
}

/* Slow swing - when wheel is decelerating */
@keyframes arrowSwingSlow {
  0% { 
    transform: translateX(-50%) rotate(-8deg);  /* Smaller swing left */
  }
  25% {
    transform: translateX(-50%) rotate(0deg);   /* Center */
  }
  50% { 
    transform: translateX(-50%) rotate(8deg);   /* Swing right */
  }
  75% {
    transform: translateX(-50%) rotate(0deg);   /* Center */
  }
  100% { 
    transform: translateX(-50%) rotate(-8deg);  /* Back to left */
  }
}

/* Magical glow pulse animation */
@keyframes arrowGlowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.6))
            drop-shadow(0 0 15px rgba(168, 85, 247, 0.4))
            drop-shadow(0 0 25px rgba(168, 85, 247, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.8))
            drop-shadow(0 0 20px rgba(168, 85, 247, 0.6))
            drop-shadow(0 0 35px rgba(168, 85, 247, 0.4))
            drop-shadow(0 0 50px rgba(168, 85, 247, 0.2));
  }
}

/* Arrow shaft pulse animation */
@keyframes arrowShaftPulse {
  0%, 100% { 
    height: 55px;
    opacity: 0.95;
  }
  50% { 
    height: 58px;  /* Slight stretch */
    opacity: 1;
  }
}

/* Arrow tip pulse animation */
@keyframes arrowTipPulse {
  0%, 100% { 
    transform: translateX(-50%) scale(1);
    filter: drop-shadow(0 0 20px rgba(251, 191, 36, 1))
            drop-shadow(0 0 40px rgba(168, 85, 247, 0.8));
  }
  50% { 
    transform: translateX(-50%) scale(1.15);  /* Bigger pulse */
    filter: drop-shadow(0 0 35px rgba(251, 191, 36, 1))
            drop-shadow(0 0 65px rgba(168, 85, 247, 1))
            drop-shadow(0 0 90px rgba(255, 215, 0, 0.9));
  }
}

/* ===== WHEEL CANVAS ===== */
.wheel-canvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* ===== WHEEL SPINNING STATE ===== */
.wheel-container.spinning {
  animation: wheelRotate 3s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}

/* ===== SPINNING ANIMATION ===== */
.wheel-container.spinning .wheel-canvas {
  animation: wheelRotate 3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  transform-origin: center center;
}

/* Magical glow during spin */
.wheel-container.wheel-glowing {
  animation: wheelGlow 1.2s ease-in-out infinite;
}

/* Light theme glow */
body.light-theme .wheel-container.wheel-glowing {
  animation: wheelGlowLight 1.2s ease-in-out infinite !important;
}

@keyframes wheelRotate {
  0% { 
    transform: rotate(0deg); 
  }
  100% { 
    transform: rotate(calc(720deg + var(--target-angle, 0deg))); 
  }
}

/* ===== DIFFICULTY INDICATORS ===== */
.difficulty-glow-easy {
  box-shadow: 
    0 0 40px rgba(251, 191, 36, 0.8),
    0 0 80px rgba(251, 191, 36, 0.5),
    inset 0 0 60px rgba(251, 191, 36, 0.3);
  border-color: rgba(251, 191, 36, 0.9);
}

.difficulty-glow-medium {
  box-shadow: 
    0 0 40px rgba(16, 185, 129, 0.8),
    0 0 80px rgba(16, 185, 129, 0.5),
    inset 0 0 60px rgba(16, 185, 129, 0.3);
  border-color: rgba(16, 185, 129, 0.9);
}

.difficulty-glow-hard {
  box-shadow: 
    0 0 40px rgba(59, 130, 246, 0.8),
    0 0 80px rgba(59, 130, 246, 0.5),
    inset 0 0 60px rgba(59, 130, 246, 0.3);
  border-color: rgba(59, 130, 246, 0.9);
}

/* ===== SPARKLE EFFECTS ===== */
.wheel-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(251, 191, 36, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.8);
  pointer-events: none;
  animation: wheelSparkleFloat 1s ease-out forwards;
}

@keyframes wheelSparkleFloat {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: scale(2) rotate(360deg) translateY(-50px);
  }
}

/* ===== MAGICAL WHEEL GLOW (like XP bar shimmer) ===== */
@keyframes wheelGlow {
  0%, 100% {
    box-shadow: 
      0 0 40px rgba(168, 85, 247, 0.5),
      0 0 80px rgba(192, 132, 252, 0.4),
      0 0 120px rgba(240, 171, 252, 0.3),
      inset 0 0 60px rgba(88, 28, 135, 0.6);
    border-color: rgba(168, 85, 247, 0.8);
  }
  50% {
    box-shadow: 
      0 0 60px rgba(168, 85, 247, 0.9),
      0 0 120px rgba(192, 132, 252, 0.8),
      0 0 180px rgba(240, 171, 252, 0.7),
      0 0 240px rgba(240, 171, 252, 0.4),
      inset 0 0 80px rgba(88, 28, 135, 0.8);
    border-color: rgba(240, 171, 252, 1);
  }
}

/* Light theme glow variant */
@keyframes wheelGlowLight {
  0%, 100% {
    box-shadow: 
      0 0 40px rgba(139, 92, 246, 0.7),
      0 0 80px rgba(168, 85, 247, 0.5),
      0 0 120px rgba(192, 132, 252, 0.4),
      inset 0 0 60px rgba(139, 92, 246, 0.3);
    border-color: rgba(139, 92, 246, 0.9);
  }
  50% {
    box-shadow: 
      0 0 60px rgba(139, 92, 246, 1),
      0 0 120px rgba(168, 85, 247, 0.9),
      0 0 180px rgba(192, 132, 252, 0.7),
      0 0 240px rgba(139, 92, 246, 0.5),
      inset 0 0 80px rgba(139, 92, 246, 0.5);
    border-color: rgba(168, 85, 247, 1);
  }
}

/* Oracle cat pulsing animation */
@keyframes oracleCatPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 
      0 0 30px rgba(168, 85, 247, 0.9),
      0 0 60px rgba(192, 132, 252, 0.7),
      0 0 90px rgba(240, 171, 252, 0.5),
      0 0 120px rgba(168, 85, 247, 0.3);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 
      0 0 50px rgba(168, 85, 247, 1),
      0 0 100px rgba(192, 132, 252, 1),
      0 0 150px rgba(240, 171, 252, 0.8),
      0 0 200px rgba(168, 85, 247, 0.5);
  }
}

/* Fade out animation for Oracle cat */
@keyframes fadeOut {
  from { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1); 
  }
  to { 
    opacity: 0; 
    transform: translate(-50%, -50%) scale(0.7); 
  }
}

/* ✨ MYSTICAL FLOATING SYMBOLS ANIMATION */
@keyframes mysticalFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--float-x)), calc(-50% + var(--float-y))) scale(1.5) rotate(360deg);
  }
}

/* ✨ LANDING SPARKLE BURST ANIMATION */
@keyframes landingBurst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 10px currentColor;
  }
  100% {
    opacity: 0;
    transform: translate(
      calc(-50% + cos(var(--burst-angle)) * var(--burst-distance)), 
      calc(-50% + sin(var(--burst-angle)) * var(--burst-distance))
    ) scale(0);
    box-shadow: 0 0 30px currentColor;
  }
}

/* ===== QUESTION SCREEN & ANSWERS ===== */

/* Screen visibility base rules */
#wheel-difficulty-screen,
#wheel-spin-screen,
#wheel-question-screen {
  display: block;
  width: 100%;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Question container - DARK THEME */
.wheel-question-container {
  background: rgba(88, 28, 135, 0.5);
  padding: 1.5rem;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

/* Question text - DARK THEME */
.wheel-question-text {
  font-size: 1.25rem;
  color: #e9d5ff;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* Answers container */
.wheel-answers-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  width: 100%;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 550px; /* Reserve space for answers + fact */
  position: relative; /* For absolute positioned success/fail messages */
}

/* Answer buttons - DARK THEME */
.wheel-answer-btn {
  width: 100% !important;
  padding: 1rem 1.25rem !important;
  border-radius: 0.75rem !important;
  background: rgba(139, 92, 246, 0.2) !important;
  border: 2px solid rgba(168, 85, 247, 0.5) !important;
  color: #e9d5ff !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.wheel-answer-btn:hover:not(:disabled) {
  background: rgba(168, 85, 247, 0.3);
  border-color: rgba(168, 85, 247, 0.8);
  transform: translateX(4px);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
}

.wheel-answer-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.wheel-answer-btn.selected {
  background: rgba(168, 85, 247, 0.4) !important;
  border-color: rgba(168, 85, 247, 0.9) !important;
  transform: translateX(4px);
}

.wheel-answer-btn.correct {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #10b981 !important;
  color: white !important;
  animation: correctPulse 0.5s ease;
}

.wheel-answer-btn.wrong {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border-color: #ef4444 !important;
  color: white !important;
  animation: wrongShake 0.5s ease;
}

@keyframes wrongShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

@keyframes correctPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Old trivia button styles - keep for compatibility */
.trivia-answer-btn {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(251, 191, 36, 0.3);
  color: white;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  display: block !important;
  visibility: visible !important;
}

.trivia-answer-btn:hover:not(:disabled) {
  background: rgba(251, 191, 36, 0.2);
  border-color: rgba(251, 191, 36, 0.5);
  transform: translateX(4px);
}

.trivia-answer-btn:disabled {
  cursor: not-allowed;
}

.trivia-answer-btn.correct {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-color: #10b981;
  animation: correctPulse 0.5s ease;
}

.trivia-answer-btn.wrong {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border-color: #ef4444;
  animation: wrongShake 0.5s ease;
}

/* ===== LIGHT THEME OVERRIDES ===== */

/* Question container - LIGHT THEME */
body.light-theme .wheel-question-container {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 2px solid rgba(139, 92, 246, 0.3) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Question text - LIGHT THEME */
body.light-theme .wheel-question-text {
  color: #3b0764 !important;
}

/* Answer buttons - LIGHT THEME */
body.light-theme .wheel-answer-btn {
  background: rgba(248, 250, 252, 0.95) !important;
  border: 2px solid rgba(139, 92, 246, 0.5) !important;
  color: #3b0764 !important;
}

body.light-theme .wheel-answer-btn:hover:not(:disabled) {
  background: rgba(237, 233, 254, 1) !important;
  border-color: rgba(139, 92, 246, 0.8) !important;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

body.light-theme .wheel-answer-btn.correct {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #10b981 !important;
  color: white !important;
}

body.light-theme .wheel-answer-btn.wrong {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border-color: #ef4444 !important;
  color: white !important;
}

/* Modal overlay in light theme - same as dark theme, blur works everywhere */

body.light-theme #wheel-btn {
  color: #92400e !important; /* Dark amber for light background */
}

body.light-theme #wheel-btn:hover {
  color: #78350f !important;
  filter: drop-shadow(0 0 10px rgba(217, 119, 6, 0.8)) !important;
}

/* Wheel modal overlay - SAME dark overlay for both themes (blur effect) */
/* Removed white background override - dark overlay works better with blur */

/* Modal content background on light theme */
body.light-theme .wheel-modal-content {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%) !important;
  border: 3px solid rgba(139, 92, 246, 0.6) !important;
  box-shadow: 0 0 50px rgba(139, 92, 246, 0.5) !important;
}

/* Headers on light theme */
body.light-theme .wheel-modal h2,
body.light-theme .wheel-modal h3,
body.light-theme .wheel-modal h4 {
  color: #78350f !important; /* Dark amber */
  text-shadow: 0 0 20px rgba(217, 119, 6, 0.4) !important;
}

/* Text colors on light theme */
body.light-theme .wheel-modal p,
body.light-theme .wheel-modal .text-purple-100,
body.light-theme .wheel-modal .text-purple-200,
body.light-theme .wheel-modal .text-purple-300,
body.light-theme #wheel-stage-text,
body.light-theme #wheel-question-category {
  color: #3b0764 !important; /* Very dark purple */
}

/* Difficulty card text on light theme */
body.light-theme #wheel-easy-btn .text-amber-300,
body.light-theme .text-amber-300 {
  color: #92400e !important; /* Dark amber */
}

body.light-theme #wheel-medium-btn .text-emerald-300,
body.light-theme .text-emerald-300 {
  color: #065f46 !important; /* Dark emerald */
}

body.light-theme #wheel-hard-btn .text-blue-300,
body.light-theme .text-blue-300 {
  color: #1e3a8a !important; /* Dark blue */
}

/* Difficulty card small text on light theme */
body.light-theme .difficulty-card .text-sm {
  color: #6b21a8 !important; /* Medium purple */
}

body.light-theme .difficulty-card .text-xs {
  color: #7c3aed !important; /* Lighter purple */
}

/* Difficulty card backgrounds on light theme */
body.light-theme #wheel-easy-btn {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.08)) !important;
  border: 2px solid rgba(217, 119, 6, 0.5) !important;
}

body.light-theme #wheel-medium-btn {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.08)) !important;
  border: 2px solid rgba(6, 95, 70, 0.5) !important;
}

body.light-theme #wheel-hard-btn {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08)) !important;
  border: 2px solid rgba(30, 58, 138, 0.5) !important;
}

/* Wheel container on light theme */
body.light-theme .wheel-container {
  background: radial-gradient(
    circle,
    rgba(248, 250, 252, 0.95) 0%,
    rgba(241, 245, 249, 0.9) 50%,
    rgba(226, 232, 240, 0.85) 100%
  ) !important;
  border: 4px solid rgba(139, 92, 246, 0.6) !important;
  box-shadow: 
    0 0 40px rgba(139, 92, 246, 0.5),
    0 0 80px rgba(168, 85, 247, 0.3),
    inset 0 0 60px rgba(241, 245, 249, 0.8) !important;
}

/* Wheel pointer on light theme - purple gradient arrow */
body.light-theme .wheel-pointer .arrow-body {
  background: linear-gradient(180deg, 
    rgba(139, 92, 246, 1) 0%, 
    rgba(88, 28, 135, 1) 50%,
    rgba(76, 29, 149, 1) 100%);
  box-shadow: 
    0 0 15px rgba(139, 92, 246, 0.8),
    0 0 30px rgba(88, 28, 135, 0.6),
    inset 0 0 10px rgba(255, 255, 255, 0.3);
}

body.light-theme .wheel-pointer .arrow-tip {
  border-top-color: #8B5CF6;  /* Purple tip pointing DOWN */
  filter: drop-shadow(0 0 20px rgba(139, 92, 246, 1))
          drop-shadow(0 0 40px rgba(88, 28, 135, 0.8))
          drop-shadow(0 0 60px rgba(76, 29, 149, 0.6));
}

/* Close button on light theme */
body.light-theme .wheel-modal button[onclick="closeWheelModal()"] {
  color: #6b21a8 !important;
}

body.light-theme .wheel-modal button[onclick="closeWheelModal()"]:hover {
  color: #3b0764 !important;
}

/* Spin button on light theme */
body.light-theme #wheel-spin-btn {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
  border: 2px solid rgba(139, 92, 246, 0.8) !important;
  color: white !important;
}

/* Question screen background on light theme */
body.light-theme #wheel-question-screen .bg-purple-950\/50 {
  background: rgba(248, 250, 252, 0.9) !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
}

/* Question text on light theme */
body.light-theme #wheel-question-text {
  color: #3b0764 !important;
}

/* Question container background on light theme */
body.light-theme #wheel-question-screen .bg-purple-950\/50 {
  background: rgba(249, 250, 251, 0.9) !important;
  border: 2px solid rgba(139, 92, 246, 0.3) !important;
}

/* Answer buttons on light theme */
body.light-theme .trivia-answer-btn {
  background: rgba(248, 250, 252, 0.9) !important;
  border: 2px solid rgba(139, 92, 246, 0.5) !important;
  color: #3b0764 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.light-theme .trivia-answer-btn:hover:not(:disabled) {
  background: rgba(139, 92, 246, 0.15) !important;
  border-color: rgba(139, 92, 246, 0.6) !important;
}

body.light-theme .trivia-answer-btn.correct {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #10b981 !important;
  color: white !important;
}

body.light-theme .trivia-answer-btn.wrong {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border-color: #ef4444 !important;
  color: white !important;
}

@media (max-width: 768px) {
  #wheel-btn {
    left: 5rem; /* Slightly closer on mobile */
  }
  
  .wheel-container {
    width: 350px;
    height: 350px;
  }
  
  .wheel-pointer {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  #wheel-btn {
    left: 4.5rem;
    font-size: 1.25rem;
  }
  
  .wheel-container {
    width: 280px;
    height: 280px;
  }
  
  .wheel-pointer {
    font-size: 1.5rem;
  }
}

/* ===== CATEGORY REVEAL OVERLAY (IN-CONTAINER DRAMATIC ANNOUNCEMENT) ===== */
#category-reveal-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 90%;
  height: auto;
  padding: 2rem;
  background: linear-gradient(135deg, 
    rgba(88, 28, 135, 0.7) 0%, 
    rgba(107, 33, 168, 0.8) 50%, 
    rgba(88, 28, 135, 0.7) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 3px solid rgba(251, 191, 36, 0.6);
  box-shadow: 0 0 40px rgba(251, 191, 36, 0.4),
              0 0 80px rgba(168, 85, 247, 0.3),
              inset 0 0 40px rgba(88, 28, 135, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  pointer-events: none;
}

#category-reveal-overlay.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.category-reveal-content {
  text-align: center;
  animation: revealBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.category-emoji {
  font-size: 5rem;
  margin-bottom: 0.5rem;
  animation: 
    emojiZoom 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    emojiFloat 2s ease-in-out infinite 0.6s;
  filter: drop-shadow(0 0 30px rgba(251, 191, 36, 0.8))
          drop-shadow(0 0 60px rgba(255, 215, 0, 0.6));
}

.category-name {
  font-size: 2.5rem;
  font-weight: 900;
  color: #FFD700;
  text-shadow: 
    0 0 20px rgba(255, 215, 0, 1),
    0 0 40px rgba(255, 193, 7, 0.8),
    0 0 60px rgba(255, 235, 59, 0.6),
    2px 2px 8px rgba(0, 0, 0, 0.8);
  margin-bottom: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: 
    textFlip 0.8s ease-out,
    textGlow 2s ease-in-out infinite 0.8s;
  transform-style: preserve-3d;
}

.category-subtitle {
  font-size: 1rem;
  color: #e9d5ff;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  animation: fadeInUp 0.8s ease-out 0.3s both;
  opacity: 0.9;
}

/* ===== CATEGORY REVEAL ANIMATIONS ===== */
@keyframes revealBounce {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  70% {
    transform: scale(1.1) rotate(10deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes emojiZoom {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.3) rotate(180deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 1;
  }
}

@keyframes emojiFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-20px) scale(1.05);
  }
}

@keyframes textFlip {
  0% {
    transform: perspective(1000px) rotateY(-90deg);
    opacity: 0;
  }
  50% {
    transform: perspective(1000px) rotateY(10deg);
  }
  100% {
    transform: perspective(1000px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes textGlow {
  0%, 100% {
    text-shadow: 
      0 0 20px rgba(255, 215, 0, 1),
      0 0 40px rgba(255, 193, 7, 0.8),
      0 0 60px rgba(255, 235, 59, 0.6),
      2px 2px 8px rgba(0, 0, 0, 0.8);
  }
  50% {
    text-shadow: 
      0 0 30px rgba(255, 215, 0, 1),
      0 0 60px rgba(255, 193, 7, 1),
      0 0 90px rgba(255, 235, 59, 0.8),
      2px 2px 8px rgba(0, 0, 0, 0.8);
  }
}

@keyframes fadeInUp {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 0.9;
  }
}

/* ===== RESPONSIVE - CATEGORY REVEAL ===== */
@media (max-width: 768px) {
  .category-emoji {
    font-size: 3.5rem;
  }
  
  .category-name {
    font-size: 1.8rem;
  }
  
  .category-subtitle {
    font-size: 0.9rem;
  }
  
  #category-reveal-overlay {
    width: 95%;
    padding: 1.5rem;
  }
}

/* ===== NO SPINS MODAL ===== */
@keyframes scale-in {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-scale-in {
  animation: scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== LIGHT THEME COMPATIBILITY ===== */

/* Arrow pointer light theme - lighter glow for visibility */
body.light-theme .arrow-body {
  background: linear-gradient(180deg, 
    rgba(139, 92, 246, 1) 0%,      /* Slightly lighter purple */
    rgba(251, 191, 36, 1) 50%,     /* Keep amber */
    rgba(16, 185, 129, 1) 100%     /* Keep emerald */
  ) !important;
}

body.light-theme .arrow-head {
  border-top-color: rgba(139, 92, 246, 1) !important;
  filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.6))
          drop-shadow(0 0 18px rgba(139, 92, 246, 0.4))
          drop-shadow(0 0 28px rgba(168, 85, 247, 0.3)) !important;
}

/* No-spins modal light theme - lighter background */
body.light-theme #wheel-no-spins-modal {
  background: rgba(255, 255, 255, 0.9) !important;
}

body.light-theme #wheel-no-spins-modal > div {
  background: linear-gradient(to bottom right, #f3e8ff, #e9d5ff) !important;
  border-color: rgba(139, 92, 246, 0.8) !important;
}

body.light-theme #wheel-no-spins-message {
  color: #6b21a8 !important;
}

body.light-theme #wheel-no-spins-modal h3 {
  background: linear-gradient(to right, #7c3aed, #db2777) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body.light-theme #wheel-no-spins-modal button {
  background: linear-gradient(to right, #7c3aed, #db2777) !important;
}

@media (max-width: 480px) {
  .category-emoji {
    font-size: 2.5rem;
  }
  
  .category-name {
    font-size: 1.3rem;
  }
  
  .category-subtitle {
    font-size: 0.75rem;
  }
  
  #category-reveal-overlay {
    width: 95%;
    padding: 1rem;
  }
}