/**
 * Component Styles - Cat, Button, Modal, Oracle Text, Combo Counter, Legendary
 * All UI components for Magic Cat Oracle
 */

/* ===== MAGICAL CAT COMPONENT ===== */
.magic-cat-wrapper {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto 2rem;
  z-index: 10;
  
  /* Sync floating animation with cat */
  animation: floatCat 3s ease-in-out infinite;
  
  /* Crystal Ball Effect - Glass Sphere Container */
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.1) 20%,
    rgba(168, 85, 247, 0.15) 50%,
    rgba(139, 92, 246, 0.3) 80%,
    rgba(88, 28, 135, 0.5) 100%
  );
  
  /* Multiple layers for realistic glass effect */
  box-shadow: 
    /* Outer glow */
    0 0 40px rgba(168, 85, 247, 0.6),
    0 0 60px rgba(139, 92, 246, 0.4),
    /* Glass depth */
    inset 0 0 60px rgba(255, 255, 255, 0.1),
    /* Top highlight (3D sphere illusion) */
    inset -10px -10px 40px rgba(255, 255, 255, 0.3),
    /* Bottom shadow (3D depth) */
    inset 20px 20px 60px rgba(0, 0, 0, 0.3);
  
  /* Subtle border for glass edge */
  border: 2px solid rgba(255, 255, 255, 0.2);
  
  /* Allow bubble to overflow outside wrapper */
  overflow: visible;
}

/* Glass highlight overlay (positioned absolutely) */
.magic-cat-wrapper::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 15%;
  width: 40%;
  height: 40%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.3) 30%,
    transparent 70%
  );
  border-radius: 50%;
  filter: blur(8px);
  pointer-events: none;
  z-index: 2;
  opacity: 0.8;
}

/* Secondary reflection (bottom right) */
.magic-cat-wrapper::after {
  content: '';
  position: absolute;
  bottom: 15%;
  right: 20%;
  width: 25%;
  height: 25%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  border-radius: 50%;
  filter: blur(6px);
  pointer-events: none;
  z-index: 2;
  opacity: 0.6;
}

.magic-cat {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 50%;
  overflow: hidden;  /* Keep cat image inside circle */
  
  /* Remove old drop-shadow, wrapper now handles glow */
  filter: brightness(1.1) contrast(1.05);
  
  /* Remove floatCat from here - now on wrapper */
  animation: glowCat 2s ease-in-out infinite alternate;
  transition: transform 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
  
  /* Ensure cat is below glass highlights */
  position: relative;
  z-index: 1;
}

.magic-cat:hover {
  transform: scale(1.1) rotate(-2deg);
  filter: drop-shadow(0 0 20px #f0abfc) 
          drop-shadow(0 0 30px #c084fc) 
          drop-shadow(0 0 40px #a78bfa);
}

.magic-cat.burst {
  animation: catBlink 0.85s ease-in-out, glowFlash 0.8s ease-in-out !important;
}

.magic-cat.burst {
  animation: catBlink 0.85s ease-in-out, glowFlash 0.8s ease-in-out !important;
}

/* Secret cat animations */
.magic-cat.secret-spin {
  animation: secretSpin 1s ease-in-out !important;
}

.magic-cat.secret-bounce {
  animation: secretBounce 1s ease-in-out !important;
}

.magic-cat.secret-glow {
  animation: secretGlow 1s ease-in-out !important;
}

/* ===== BUTTON COMPONENT ===== */
#revealBtn {
  padding: 1rem 2rem;
  font-size: 1.54rem;
  font-weight: 600;
  background: linear-gradient(135deg, #a855f7, #8b5cf6);
  color: white;
  border: 2px solid rgba(168, 85, 247, 0.5);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
  min-width: 360px;
  width: 360px;
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

#revealBtn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}

#revealBtn:active {
  transform: scale(0.98);
}

/* Cat shimmer effect when category changes */
.magic-cat.cat-shimmer {
  animation: catShimmer 0.8s ease-in-out;
}

#revealBtn.button-shimmer {
  animation: buttonShimmer 0.7s ease-in-out;
}

#revealBtn.button-shimmer::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 100%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(168, 85, 247, 0.4) 20%,
    rgba(192, 132, 252, 0.6) 40%,
    rgba(168, 85, 247, 0.4) 60%,
    transparent
  );
  transform: skewX(-20deg);
  animation: shimmerSlide 0.7s ease-in-out;
}

/* ===== USER TITLE COMPONENT ===== */
.user-title {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #c084fc;
  background: linear-gradient(135deg, #a855f7, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
  margin-right: 0.25rem;
  letter-spacing: 0.05em;
  text-transform: capitalize;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.5));
  animation: titlePulse 3s ease-in-out infinite;
  position: relative;
}

.user-title::before {
  content: '[';
  color: #a855f7;
  margin-right: 0.15rem;
  opacity: 0.7;
}

.user-title::after {
  content: ']';
  color: #a855f7;
  margin-left: 0.15rem;
  opacity: 0.7;
}

/* ===== AI ORACLE COMPONENTS ===== */

/* AI prophecy badge */
.ai-prophecy-badge {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.75rem;
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
  animation: aiPulse 2s ease-in-out infinite;
}

/* AI loading message */
.ai-loading, .ai-generating {
  color: #10b981;
  font-size: 1rem;
  animation: pulse 1.5s ease-in-out infinite;
}

/* AI limit reached message */
.ai-limit-message {
  padding: 1.5rem;
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 12px;
  text-align: center;
}

/* AI error message */
.ai-error {
  color: #ef4444;
  padding: 1rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
}

/* Quiz button shimmer effect */
#quiz-btn.button-shimmer {
  animation: buttonShimmer 0.7s ease-in-out;
}

#quiz-btn.button-shimmer::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 100%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(168, 85, 247, 0.4) 20%,
    rgba(192, 132, 252, 0.6) 40%,
    rgba(240, 171, 252, 0.8) 50%,
    rgba(192, 132, 252, 0.6) 60%,
    rgba(168, 85, 247, 0.4) 80%,
    transparent
  );
  animation: purpleSweep 0.7s ease-in-out;
  filter: blur(8px);
}

#revealBtn.glow-button {
  box-shadow: 0 0 25px rgba(240, 171, 252, 0.6),
              0 0 35px rgba(168, 85, 247, 0.4);
  border-color: rgba(240, 171, 252, 0.8);
}

/* ===== ORACLE TEXT COMPONENT ===== */
#result {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
  justify-content: center;
  align-items: baseline;
  font-size: 1.95em;
}

.oracle-word {
  display: inline-block;
  opacity: 0;
  animation: wordAppear 0.6s ease-out forwards;
  position: relative;
}

/* ===== LEGENDARY PROPHECY COMPONENT ===== */
.legendary-prophecy {
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.3) 0%,
    rgba(88, 28, 135, 0.5) 50%,
    rgba(139, 92, 246, 0.3) 100%);
  padding: 1.5rem;
  border-radius: 1rem;
  border: 2px solid rgba(255, 215, 0, 0.8);
  box-shadow: 
    0 0 30px rgba(255, 215, 0, 0.5),
    0 0 60px rgba(255, 193, 7, 0.3),
    inset 0 0 30px rgba(88, 28, 135, 0.4);
  animation: legendaryShimmer 3s ease-in-out infinite;
  position: relative;
}

.legendary-word {
  color: #FFD700 !important;
  font-weight: 800 !important;
  text-shadow: 
    0 0 15px rgba(255, 215, 0, 1),
    0 0 25px rgba(255, 193, 7, 0.8),
    1px 1px 3px rgba(0, 0, 0, 1) !important;
  animation: legendaryTextGlow 2s ease-in-out infinite;
  opacity: 1 !important;
  -webkit-text-fill-color: #FFD700 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* ===== TRIVIA TIER BUTTONS ===== */
.trivia-tier-btn {
  border: 2px solid rgba(168, 85, 247, 0.5);
  cursor: pointer;
  font-size: 14px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: white;
  /* 50% smaller (28px) */
  width: 28px;
  height: 28px;
  border-radius: 4px;
}

/* Unlocked state - brighter purple */
.trivia-tier-btn.unlocked {
  background: linear-gradient(135deg, #a855f7, #8b5cf6);
  border-color: rgba(168, 85, 247, 0.7);
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}

/* Locked state - darker purple */
.trivia-tier-btn.locked {
  background: linear-gradient(135deg, #4c1d95, #5b21b6);
  border-color: rgba(91, 33, 182, 0.5);
  cursor: not-allowed;
  opacity: 0.7;
  box-shadow: 0 0 10px rgba(91, 33, 182, 0.3);
}

/* Almost unlocked - glowing purple */
.trivia-tier-btn.almost-unlocked {
  background: linear-gradient(135deg, #a855f7, #8b5cf6);
  animation: almostUnlockedPulse 1.5s ease-in-out infinite;
}

/* Tier button hover effects */
.trivia-tier-btn.unlocked:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.6);
  border-color: rgba(240, 171, 252, 0.8);
}

.trivia-tier-btn:active:not(.locked) {
  transform: scale(0.98);
}

/* Lock hint visibility - stack vertically in square */
.trivia-tier-btn.locked .tier-lock {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
}

.trivia-tier-btn.locked .tier-label {
  opacity: 0.8;
}

.trivia-tier-btn.unlocked .tier-lock {
  display: none !important;
}

/* Tier emoji badges - larger in square layout */
.tier-emoji {
  font-size: 1.5em;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Almost unlocked pulse animation */
@keyframes almostUnlockedPulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 30px rgba(240, 171, 252, 0.8), 0 0 50px rgba(168, 85, 247, 0.6);
    transform: scale(1.05);
    border-color: rgba(240, 171, 252, 0.9);
  }
}

/* ===== COMBO COUNTER COMPONENT ===== */
#combo-counter {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  z-index: 100;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: all 0.3s ease-out;
}

#combo-counter.combo-active {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.combo-text {
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #a855f7, #ec4899, #f59e0b);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 2s ease infinite;
  text-shadow: 0 0 20px rgba(168, 85, 247, 0.8);
  letter-spacing: 3px;
}

.combo-number {
  font-size: 4rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 
    0 0 20px rgba(168, 85, 247, 1),
    0 0 40px rgba(236, 72, 153, 0.8),
    0 0 60px rgba(245, 158, 11, 0.6);
  margin: -0.5rem 0;
}

.combo-multiplier {
  font-size: 2rem;
  animation: pulse 0.8s ease-in-out infinite;
}

/* ===== LEGENDARY CHANCE COMPONENT ===== */
#legendary-chance.legendary-chance-inline {
  position: static;
  background: transparent;
  backdrop-filter: none;
  padding: 0;
  border-radius: 0;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  font-size: 0.875rem;
  z-index: auto;
  transition: all 0.3s ease;
  text-align: right;
  flex: 1;
}

#legendary-chance.legendary-boosted {
  animation: legendaryPulse 1.5s ease-in-out infinite;
}

.legendary-icon {
  font-size: 1rem;
  display: inline-block;
  animation: rotateStar 3s linear infinite;
  margin-right: 0.25rem;
}

.legendary-percent {
  font-weight: 800;
  font-size: 2rem;
  color: #a855f7;
  line-height: 1;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
}

#legendary-chance.legendary-boosted .legendary-percent {
  background: linear-gradient(135deg, #FFD700, #FFC107, #FFEB3B);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 2s ease infinite;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

.legendary-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline;
}

/* ===== NAME MODAL COMPONENT ===== */
#name-modal {
  display: none;
  animation: fadeIn 0.3s ease-out;
}

#name-modal > div {
  animation: slideDown 0.4s ease-out;
}

#name-input {
  font-size: 1rem;
  letter-spacing: 0.5px;
}

#name-input::placeholder {
  opacity: 0.6;
}

#modal-confirm-btn, #modal-skip-btn {
  font-size: 1rem;
  letter-spacing: 0.5px;
}

#modal-confirm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}

#modal-skip-btn:hover {
  border-color: rgba(168, 85, 247, 0.8);
  background: rgba(168, 85, 247, 0.1);
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
  #app {
    padding: 1rem !important;
    max-width: 95% !important;
    margin: 0.5rem;
  }

  .magic-cat-wrapper {
    width: 200px;
    height: 200px;
    margin: 0 auto 1rem;
  }

  h1 {
    font-size: 1.75rem !important;
    margin-bottom: 0.5rem !important;
  }

  #app > p {
    font-size: 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  #stats-grid {
    gap: 0.5rem !important;
  }

  #stats-grid > div {
    padding: 0.5rem !important;
  }

  #stats-grid .text-2xl {
    font-size: 1.25rem !important;
  }

  #revealBtn {
    font-size: 0.875rem !important;
    padding: 0.625rem 1rem !important;
    min-width: 280px !important;
    width: 280px !important;
    min-height: 44px !important;
  }

  #shareButtons button {
    font-size: 0.625rem !important;
    padding: 0.375rem 0.5rem !important;
  }

  #result {
    font-size: 1rem !important;
    margin-top: 1rem !important;
  }

  #name-modal > div {
    max-width: 90% !important;
    padding: 1.5rem !important;
    margin: 1rem;
  }

  #name-modal h2 {
    font-size: 1.5rem !important;
  }

  #name-modal p {
    font-size: 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  #global-counter {
    font-size: 1.5rem !important;
  }

  .legendary-percent {
    font-size: 1.5rem !important;
  }

  .legendary-icon {
    font-size: 0.875rem !important;
  }

  .legendary-label {
    font-size: 0.625rem !important;
  }

  #achievements-list > div {
    font-size: 0.625rem !important;
    padding: 0.25rem 0.5rem !important;
  }

  .legendary-prophecy {
    padding: 1rem !important;
    font-size: 0.9rem !important;
  }

  .legendary-word {
    font-size: inherit !important;
  }

  .fixed.top-4.right-4 {
    top: 1rem !important;
    right: 1rem !important;
    left: 1rem !important;
    padding: 0.75rem !important;
    font-size: 0.875rem !important;
  }

  #combo-counter {
    top: 15%;
    transform: translateX(-50%) scale(0.7);
  }

  #combo-counter.combo-active {
    transform: translateX(-50%) scale(0.85);
  }

  .combo-text {
    font-size: 1rem !important;
  }

  .combo-number {
    font-size: 2.5rem !important;
  }

  .combo-multiplier {
    font-size: 1.5rem !important;
  }

  #legendary-chance {
    top: 5px;
    right: 5px;
    padding: 0.375rem 0.625rem;
    font-size: 0.625rem;
  }

  .legendary-icon {
    font-size: 0.875rem;
  }

  .legendary-percent {
    font-size: 0.875rem;
  }

  .legendary-label {
    font-size: 0.5rem;
  }
}

@media (max-width: 480px) {
  #app {
    padding: 0.75rem !important;
  }

  .magic-cat-wrapper {
    width: 160px;
    height: 160px;
  }

  h1 {
    font-size: 1.5rem !important;
  }

  #revealBtn {
    font-size: 0.75rem !important;
    padding: 0.5rem 0.75rem !important;
    min-width: 240px !important;
    width: 240px !important;
    min-height: 40px !important;
  }

  #result {
    font-size: 0.875rem !important;
  }

  #stats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.375rem !important;
  }

  #stats-grid > div {
    padding: 0.375rem !important;
  }

  #stats-grid .text-xs {
    font-size: 0.625rem !important;
  }

  #stats-grid .text-2xl,
  #stats-grid .text-xl {
    font-size: 1rem !important;
  }

  .combo-text {
    font-size: 0.875rem !important;
  }

  .combo-number {
    font-size: 2rem !important;
  }

  .combo-multiplier {
    font-size: 1.25rem !important;
  }

  .legendary-percent {
    font-size: 1.25rem !important;
  }

  .legendary-label {
    display: none;
  }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
  button {
    min-height: 44px;
    min-width: 44px;
  }

  .magic-cat:hover {
    transform: none;
    filter: drop-shadow(0 0 15px #a855f7) 
            drop-shadow(0 0 25px #8b5cf6) 
            drop-shadow(0 0 35px #c084fc);
  }

  button:active {
    transform: scale(0.95);
    transition: transform 0.1s;
  }
}

/* Landscape mode */
@media (max-width: 768px) and (orientation: landscape) {
  .magic-cat-wrapper {
    width: 150px;
    height: 150px;
  }

  #app {
    padding: 0.5rem !important;
  }

  h1 {
    font-size: 1.25rem !important;
    margin-bottom: 0.25rem !important;
  }
}

/* ===== TOGGLE SWITCH COMPONENT ===== */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(139, 92, 246, 0.3);
  border: 2px solid rgba(139, 92, 246, 0.5);
  transition: 0.3s;
  border-radius: 26px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: rgba(168, 85, 247, 0.7);
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: rgba(139, 92, 246, 0.8);
  border-color: rgba(168, 85, 247, 1);
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
}

input:checked + .toggle-slider:before {
  transform: translateX(24px);
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.toggle-slider:hover {
  border-color: rgba(168, 85, 247, 0.8);
}

/* ===== LIGHT THEME STYLES ===== */
body.light-theme {
  background: url('../assets/images/forestLight.png') center/cover no-repeat fixed;
  /* Enable will-change for smooth theme transitions */
  will-change: background;
}

body.light-theme #app {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(168, 85, 247, 0.3);
}

body.light-theme h1,
body.light-theme p,
body.light-theme .text-purple-200,
body.light-theme .text-purple-300 {
  color: #581c87;
}

body.light-theme .bg-purple-900\/30,
body.light-theme .bg-purple-950\/30,
body.light-theme .bg-purple-950\/50 {
  background-color: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
}

body.light-theme button {
  color: #581c87;
}

body.light-theme #result {
  color: #6b21a8;
  text-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

/* Light theme crystal ball - brighter, more transparent */
body.light-theme .magic-cat-wrapper {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.5) 20%,
    rgba(168, 85, 247, 0.1) 50%,
    rgba(139, 92, 246, 0.2) 80%,
    rgba(88, 28, 135, 0.3) 100%
  );
  box-shadow: 
    0 0 40px rgba(168, 85, 247, 0.4),
    0 0 60px rgba(139, 92, 246, 0.3),
    inset 0 0 60px rgba(255, 255, 255, 0.3),
    inset -10px -10px 40px rgba(255, 255, 255, 0.6),
    inset 20px 20px 60px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}

body.light-theme .magic-cat-wrapper::before {
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.5) 30%,
    transparent 70%
  );
}

body.light-theme .magic-cat-wrapper::after {
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
}

body.light-theme .magic-cat {
  filter: drop-shadow(0 0 15px #c084fc) 
          drop-shadow(0 0 25px #a855f7) 
          drop-shadow(0 0 35px #8b5cf6);
}

/* Light theme - make stats text more visible */
body.light-theme #counter,
body.light-theme #streak,
body.light-theme #tier,
body.light-theme #user-level,
body.light-theme #global-counter {
  color: #3b0764; /* Very dark purple - same as h1 */
  text-shadow: 0 0 5px rgba(88, 28, 135, 0.3);
}

body.light-theme .text-xs {
  color: #6b21a8 !important; /* Darker purple for labels */
}

/* Light theme - Trivia modal title and level text */
body.light-theme #difficulty-info h3,
body.light-theme #difficulty-info .text-base,
body.light-theme #difficulty-info .text-xl {
  color: #3b0764 !important; /* Dark purple for titles */
}

/* Light theme - make Golden Chance visible */
body.light-theme .legendary-label {
  color: #92400e; /* Dark amber/brown */
  text-shadow: 0 0 8px rgba(217, 119, 6, 0.5);
  font-weight: 600;
}

body.light-theme .legendary-percent {
  color: #92400e; /* Dark amber */
  text-shadow: 0 0 10px rgba(217, 119, 6, 0.6);
}

body.light-theme #legendary-chance.legendary-boosted .legendary-percent {
  background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 15px rgba(217, 119, 6, 0.7);
}

/* Light theme - Settings modal dropdown */
body.light-theme #voice-select {
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #3b0764 !important;
  border-color: rgba(139, 92, 246, 0.5) !important;
}

/* Light theme - Trivia stats visibility */
body.light-theme #stat-total-games,
body.light-theme #stat-total-score,
body.light-theme #stat-total-accuracy,
body.light-theme #stat-current-streak {
  color: #3b0764 !important; /* Dark purple for stat values */
}

/* Light theme - Target difficulty cards directly */
body.light-theme #difficulty-info > div span,
body.light-theme #difficulty-info > div div,
body.light-theme #difficulty-info > div h3,
body.light-theme div[class*="bg-yellow-900"] span,
body.light-theme div[class*="bg-yellow-900"] div,
body.light-theme div[class*="bg-yellow-900"] h3,
body.light-theme div[class*="bg-emerald-900"] span,
body.light-theme div[class*="bg-emerald-900"] div,
body.light-theme div[class*="bg-emerald-900"] h3,
body.light-theme div[class*="bg-blue-900"] span,
body.light-theme div[class*="bg-blue-900"] div,
body.light-theme div[class*="bg-blue-900"] h3 {
  color: #3b0764 !important; /* Dark purple for all text in cards */
}

/* Light theme - Specifically for labels like "Games:", "Best:", etc */
body.light-theme #difficulty-info span[class*="text-yellow"],
body.light-theme #difficulty-info span[class*="text-emerald"],
body.light-theme #difficulty-info span[class*="text-blue"],
body.light-theme #difficulty-info div[class*="text-yellow"],
body.light-theme #difficulty-info div[class*="text-emerald"],
body.light-theme #difficulty-info div[class*="text-blue"] {
  color: #6b21a8 !important; /* Medium purple for labels */
}

/* Light theme - Close buttons moved to index.html for better specificity */

body.light-theme #voice-select option {
  background-color: #ffffff;
  color: #3b0764;
}

/* ===== TRIVIA QUIZ STYLES ===== */
.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;
}

.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;
}

@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); }
}

.trivia-unlocked {
  animation: triviaUnlock 0.6s ease-out;
}

@keyframes triviaUnlock {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.8);
  }
  50% {
    transform: translateY(5px) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===== CAT CHAT BUBBLE ===== */
.cat-bubble {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px) scale(0.8);
  background: linear-gradient(135deg, #1f1f3a 0%, #2d1b4e 100%);
  border: 3px solid rgba(168, 85, 247, 0.6);
  border-radius: 20px;
  padding: 12px 16px;
  max-width: 280px;
  min-width: 200px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
              0 0 20px rgba(168, 85, 247, 0.3),
              inset 0 0 20px rgba(168, 85, 247, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 150;
}

.cat-bubble::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid rgba(168, 85, 247, 0.6);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3));
}

.cat-bubble-show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(-20px) scale(1);
}

.cat-bubble-close {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(168, 85, 247, 0.3);
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  padding: 0;
  line-height: 1;
}

.cat-bubble-close:hover {
  background: rgba(168, 85, 247, 0.6);
  color: white;
  transform: rotate(90deg);
}

#cat-bubble-text {
  margin: 0;
  padding-right: 16px;
  font-size: 14px;
  line-height: 1.4;
  color: #e9d5ff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Responsive bubble */
@media (max-width: 640px) {
  .cat-bubble {
    max-width: 220px;
    min-width: 180px;
    padding: 10px 14px;
    top: -15px;
  }
  
  #cat-bubble-text {
    font-size: 12px;
  }
}

/* ===== PROGRESS BAR (LIQUID GLOW EFFECT) ===== */
.progress-bar-container {
  width: 100%;
  height: 20px;
  background: linear-gradient(to right, 
    rgba(88, 28, 135, 0.3), 
    rgba(107, 33, 168, 0.3)
  );
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(168, 85, 247, 0.3);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, 
    #a855f7,
    #c084fc,
    #e9d5ff,
    #c084fc,
    #a855f7
  );
  background-size: 200% 100%;
  border-radius: 10px;
  box-shadow: 
    0 0 10px rgba(168, 85, 247, 0.8),
    0 0 20px rgba(192, 132, 252, 0.6),
    0 0 30px rgba(233, 213, 255, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  animation: liquidFlow 3s linear infinite;
  position: relative;
}

.progress-bar-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0.4), 
    transparent
  );
  border-radius: 10px 10px 0 0;
}

@keyframes liquidFlow {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}

/* ===== LEVEL UP NOTIFICATION ===== */
.level-up-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  z-index: 10000;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.level-up-notification.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.level-up-content {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
  border: 3px solid #fbbf24;
  border-radius: 20px;
  padding: 30px 50px;
  box-shadow: 
    0 0 30px rgba(168, 85, 247, 0.8),
    0 0 60px rgba(192, 132, 252, 0.6),
    0 10px 40px rgba(0, 0, 0, 0.5),
    inset 0 2px 10px rgba(255, 255, 255, 0.3);
  text-align: center;
  animation: levelUpPulse 0.6s ease-in-out;
}

.level-up-icon {
  font-size: 64px;
  margin-bottom: 10px;
  animation: levelUpSpin 0.8s ease-out;
}

.level-up-title {
  font-size: 32px;
  font-weight: bold;
  color: #fbbf24;
  text-shadow: 
    0 0 10px rgba(251, 191, 36, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.8);
  margin-bottom: 8px;
}

.level-up-subtitle {
  font-size: 20px;
  color: #e9d5ff;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

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

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

/* ===== ACHIEVEMENT NOTIFICATION (SMALLER VERSION) ===== */
.achievement-notification {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  z-index: 9999;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.achievement-notification.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.achievement-content {
  background: linear-gradient(135deg, #ec4899 0%, #a855f7 50%, #8b5cf6 100%);
  border: 2px solid #fbbf24;
  border-radius: 16px;
  padding: 20px 35px;
  box-shadow: 
    0 0 25px rgba(236, 72, 153, 0.7),
    0 0 50px rgba(168, 85, 247, 0.5),
    0 8px 30px rgba(0, 0, 0, 0.4),
    inset 0 2px 8px rgba(255, 255, 255, 0.3);
  text-align: center;
  animation: achievementPulse 0.5s ease-in-out;
  min-width: 280px;
}

.achievement-icon {
  font-size: 48px;
  margin-bottom: 8px;
  animation: achievementBounce 0.6s ease-out;
}

.achievement-title {
  font-size: 16px;
  font-weight: bold;
  color: #fbbf24;
  text-shadow: 
    0 0 8px rgba(251, 191, 36, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.8);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.achievement-name {
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  margin-bottom: 4px;
}

.achievement-desc {
  font-size: 13px;
  color: #e9d5ff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  opacity: 0.95;
}

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

@keyframes achievementBounce {
  0% {
    transform: translateY(-20px) scale(0.8);
    opacity: 0;
  }
  50% {
    transform: translateY(5px) scale(1.1);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Mobile responsive for achievements */
@media (max-width: 640px) {
  .achievement-content {
    padding: 16px 28px;
    min-width: 240px;
  }
  
  .achievement-icon {
    font-size: 40px;
  }
  
  .achievement-title {
    font-size: 14px;
  }
  
  .achievement-name {
    font-size: 18px;
  }
  
  .achievement-desc {
    font-size: 12px;
  }
}
/* ===== DISCIPLE PROFILE MODAL ===== */

/* Profile modal animations */
@keyframes fadeInProfile {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#profile-modal:not(.hidden) > div {
  animation: fadeInProfile 0.3s ease-out;
}

/* Avatar selection grid */
.avatar-option {
  position: relative;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(168, 85, 247, 0.3);
  transition: all 0.3s ease;
  background: rgba(139, 92, 246, 0.1);
}

.avatar-option:hover:not(.locked) {
  border-color: rgba(168, 85, 247, 0.8);
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}

.avatar-option.selected {
  border-color: #FFD700;
  border-width: 3px;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.7);
}

.avatar-option.selected::after {
  content: '✓';
  position: absolute;
  top: 5px;
  right: 5px;
  background: #FFD700;
  color: #000;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
}

.avatar-option.locked {
  cursor: not-allowed;
  opacity: 0.5;
  filter: grayscale(0.7);
}

.avatar-option img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  display: block;
}

.avatar-name {
  padding: 6px;
  text-align: center;
  font-size: 0.7rem;
  color: #c084fc;
  background: rgba(88, 28, 135, 0.5);
  backdrop-filter: blur(4px);
}

.avatar-option.selected .avatar-name {
  color: #FFD700;
  font-weight: 600;
}

.avatar-lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.85);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  color: #fff;
  font-weight: 700;
  backdrop-filter: blur(10px);
  white-space: nowrap;
  min-width: fit-content;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Username click effect */
#user-greeting {
  transition: all 0.2s ease;
}

#user-greeting:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

/* Fade in animation for profile notification */
@keyframes fadeInNotification {
  from {
    opacity: 0;
    transform: translate(-50%, -10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.animate-fade-in {
  animation: fadeInNotification 0.3s ease-out;
}

/* Light theme compatibility for profile */
body.light-theme #profile-modal > div {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(139, 92, 246, 0.5) !important;
}

body.light-theme #profile-modal h2,
body.light-theme #profile-modal h3,
body.light-theme #profile-modal h4 {
  color: #581c87 !important;
}

body.light-theme #profile-modal .text-purple-100,
body.light-theme #profile-modal .text-purple-200,
body.light-theme #profile-modal .text-purple-300 {
  color: #6b21a8 !important;
}

body.light-theme #profile-modal .text-purple-400 {
  color: #7c3aed !important;
}

body.light-theme #profile-modal .bg-purple-900\/30,
body.light-theme #profile-modal .bg-purple-950\/50,
body.light-theme #profile-modal .bg-purple-950\/95 {
  background: rgba(255, 255, 255, 0.8) !important;
}

body.light-theme #profile-modal .border-purple-500\/30,
body.light-theme #profile-modal .border-purple-500\/50 {
  border-color: rgba(139, 92, 246, 0.4) !important;
}

/* Fix Top 5 Actions text visibility on light theme */
body.light-theme #profile-top-clicks span {
  color: #3b0764 !important;
}

body.light-theme #profile-top-clicks .font-semibold {
  color: #581c87 !important;
}

body.light-theme #profile-modal textarea {
  background: rgba(248, 248, 255, 0.9) !important;
  color: #3b0764 !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
}

body.light-theme #profile-modal textarea::placeholder {
  color: rgba(107, 33, 168, 0.5) !important;
}

body.light-theme .avatar-option {
  background: rgba(196, 181, 253, 0.2) !important;
  border-color: rgba(139, 92, 246, 0.4) !important;
}

body.light-theme .avatar-name {
  color: #6b21a8 !important;
  background: rgba(196, 181, 253, 0.3) !important;
}

/* Mobile responsive adjustments for profile */
@media (max-width: 640px) {
  #profile-modal > div {
    max-height: 95vh;
  }
  
  .avatar-option img {
    height: 60px;
  }
  
  .avatar-name {
    font-size: 0.6rem;
    padding: 4px;
  }
}