/* ========== THEME: สวนสัตว์สดใส (Bright Zoo) ========== */
[data-theme="bright"] {
  /* Background */
  --bg-primary: #FFF7ED;
  --bg-secondary: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FFF0E0;
  --bg-overlay: rgba(255, 247, 237, 0.95);

  /* Accent colors */
  --neon-warm: #FF6B9D;
  --neon-gold: #FBBF24;
  --neon-amber: #FB923C;
  --neon-cream: #FFF5E1;

  /* Status */
  --correct: #10B981;
  --wrong: #EF4444;
  --warning: #FBBF24;

  /* Text */
  --text-primary: #1E293B;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;

  /* UI */
  --shadow-glow: 0 2px 12px rgba(255, 107, 157, 0.15);
}

/* Body background with animated pastel gradient */
[data-theme="bright"] body {
  background: #FFF7ED;
}
[data-theme="bright"] body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 10% 20%, rgba(255, 107, 157, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(96, 165, 250, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(192, 132, 252, 0.08) 0%, transparent 50%);
  animation: floatingBg 15s ease-in-out infinite alternate;
}
@keyframes floatingBg {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.1) translate(-2%, -2%); }
}

/* Header & Nav */
[data-theme="bright"] .header {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 107, 157, 0.15);
}
[data-theme="bright"] .header-stat .val { color: #FF6B9D; }
[data-theme="bright"] .header-icon { width: 28px; height: 28px; color: #FF6B9D; }
[data-theme="bright"] .header-icon-dragon { width: 36px; height: 36px; }

[data-theme="bright"] .bottom-nav {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 107, 157, 0.12);
}
[data-theme="bright"] .nav-btn { color: #64748B; }
[data-theme="bright"] .nav-btn .icon-svg {
  filter: brightness(0) saturate(100%) invert(40%) sepia(10%) saturate(500%) hue-rotate(180deg) brightness(90%) contrast(90%);
}
[data-theme="bright"] .nav-btn.active { color: #FF6B9D; }
[data-theme="bright"] .nav-btn.active .icon-svg {
  filter: brightness(0) saturate(100%) invert(55%) sepia(80%) saturate(2000%) hue-rotate(310deg) brightness(100%) contrast(100%);
}

/* Buttons */
[data-theme="bright"] .btn-primary {
  background: linear-gradient(135deg, #FF6B9D, #C084FC);
  color: white;
}
[data-theme="bright"] .btn-primary:hover {
  box-shadow: 0 4px 20px rgba(255, 107, 157, 0.3);
}

/* Cards & inputs */
[data-theme="bright"] .card,
[data-theme="bright"] .login-input {
  border: 1px solid rgba(255, 107, 157, 0.12);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

/* Subject dropdown */
[data-theme="bright"] .subject-dropdown-btn {
  background: white;
  border-color: rgba(255, 107, 157, 0.2);
}
[data-theme="bright"] .subject-dropdown-btn:hover { border-color: #FF6B9D; }
[data-theme="bright"] .subject-dropdown-list {
  background: white;
  border-color: rgba(255, 107, 157, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
[data-theme="bright"] .subject-option:hover { background: #FFF0E0; }
[data-theme="bright"] .subject-option.active { color: #FF6B9D; background: rgba(255, 107, 157, 0.06); }

/* Stage buttons */
[data-theme="bright"] .stage-btn {
  background: white;
  border-color: rgba(255, 107, 157, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
[data-theme="bright"] .stage-btn.completed {
  border-color: #10B981;
  background: #F0FDF4;
  color: #10B981;
}
[data-theme="bright"] .stage-btn.current {
  border-color: #FBBF24;
  background: #FFFBEB;
  color: #F59E0B;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.25);
}
[data-theme="bright"] .stage-btn.open {
  border-color: rgba(192, 132, 252, 0.3);
  background: white;
  color: #1E293B;
  opacity: 1;
}
[data-theme="bright"] .stage-btn.open:hover {
  box-shadow: 0 4px 16px rgba(192, 132, 252, 0.2);
  border-color: #C084FC;
}
[data-theme="bright"] .stage-label { color: #64748B; }
[data-theme="bright"] .stage-stars .star { color: #D1D5DB; }
[data-theme="bright"] .stage-stars .star.earned { color: #FBBF24; }

/* Path line */
[data-theme="bright"] .path-line { background: #E5E7EB; }
[data-theme="bright"] .path-line.completed { background: #10B981; opacity: 0.4; }

/* Login screen */
[data-theme="bright"] .login-screen h1 { color: #FF6B9D; }
[data-theme="bright"] .login-input:focus {
  border-color: #FF6B9D;
  box-shadow: 0 0 12px rgba(255, 107, 157, 0.15);
}

/* Quiz screen */
[data-theme="bright"] .quiz-screen { background: #FFF7ED; }
[data-theme="bright"] .quiz-header { background: rgba(255, 255, 255, 0.9); }
[data-theme="bright"] .quiz-progress { background: #E2D6CA; }
[data-theme="bright"] .quiz-mini-bar .quiz-progress { background: #E2D6CA; }
[data-theme="bright"] .quiz-question { color: #1E293B; }

[data-theme="bright"] .choice-btn {
  background: white;
  color: #1E293B;
  border-color: rgba(192, 132, 252, 0.15);
}
[data-theme="bright"] .choice-btn:hover:not(.answered) { border-color: rgba(192, 132, 252, 0.4); }
[data-theme="bright"] .choice-btn.correct { border-color: #10B981; background: #F0FDF4; color: #047857; }
[data-theme="bright"] .choice-btn.wrong { border-color: #EF4444; background: #FEF2F2; color: #B91C1C; }
[data-theme="bright"] .choice-btn .label { background: rgba(255, 107, 157, 0.1); color: #FF6B9D; }
[data-theme="bright"] .choice-btn.correct .label { background: rgba(16, 185, 129, 0.15); color: #10B981; }
[data-theme="bright"] .choice-btn.wrong .label { background: rgba(239, 68, 68, 0.15); color: #EF4444; }

/* Explain overlay */
[data-theme="bright"] .explain-overlay {
  background: rgba(255, 247, 237, 0.96);
  backdrop-filter: blur(8px);
}
[data-theme="bright"] .explain-result.is-correct { color: #10B981; }
[data-theme="bright"] .explain-result.is-wrong { color: #EF4444; }
[data-theme="bright"] .explain-answer { color: #FF6B9D; }
[data-theme="bright"] .explain-text { color: #1E293B; }
[data-theme="bright"] .explain-text strong { color: #FF6B9D; }
[data-theme="bright"] .explain-divider { border-top-color: rgba(255, 107, 157, 0.15); }
[data-theme="bright"] .explain-question-recall {
  background: rgba(192, 132, 252, 0.06);
  border-left-color: rgba(192, 132, 252, 0.3);
  color: #64748B;
}
[data-theme="bright"] .explain-user-answer.user-correct { color: #10B981; }
[data-theme="bright"] .explain-user-answer.user-wrong { color: #EF4444; }
[data-theme="bright"] .explain-xp { color: #F59E0B; }

/* Hamburger menu */
[data-theme="bright"] .app-menu-btn {
  background: white;
  border-color: rgba(255, 107, 157, 0.25);
}
[data-theme="bright"] .app-menu-dropdown {
  background: white;
  border-color: rgba(255, 107, 157, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
[data-theme="bright"] .app-menu-item { color: #64748B; border-bottom-color: rgba(0,0,0,0.04); }
[data-theme="bright"] .app-menu-item:hover { background: #FFF0E0; color: #1E293B; }

/* Profile */
[data-theme="bright"] .stat-card { background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
[data-theme="bright"] .stat-card .val { color: #FF6B9D; }
[data-theme="bright"] .stat-card .label { color: #64748B; }

/* Combo */
[data-theme="bright"] .combo-display { color: #FF6B9D; }

/* Result screen */
[data-theme="bright"] .result-title { color: #FF6B9D; }

/* Road background for light theme */
[data-theme="bright"] .path-map {
  background-image: url('/images/road-vertical-light.svg');
}
[data-theme="bright"] .path-map.horizontal {
  background-image: url('/images/road-horizontal-light.svg');
}
[data-theme="bright"] .path-map.vertical {
  background-image: url('/images/road-vertical-light.svg') !important;
}

/* Scrollbar */
[data-theme="bright"] .path-map::-webkit-scrollbar-thumb { background: rgba(255, 107, 157, 0.2); }

/* TTS button & header icon buttons */
[data-theme="bright"] .tts-btn,
[data-theme="bright"] .header-icon-btn {
  background: white;
  color: #FF6B9D;
  border-color: rgba(255, 107, 157, 0.15);
}

/* Quiz menu */
[data-theme="bright"] .quiz-menu-btn {
  background: white;
  border-color: rgba(255, 107, 157, 0.25);
}
[data-theme="bright"] .quiz-menu-dropdown {
  background: white;
  border-color: rgba(255, 107, 157, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Quiz footer */
[data-theme="bright"] .quiz-footer { background: rgba(255, 255, 255, 0.9); }

/* Hearts */
[data-theme="bright"] .heart-container .heart { opacity: 0.3; }
[data-theme="bright"] .heart-container .heart.active { opacity: 1; }

/* Mascot bubble */
.mascot-bubble {
  display: flex; align-items: center; gap: 10px;
}
.mascot-bubble svg {
  width: 60px; height: 60px; flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  animation: mascotBounce 2s ease-in-out infinite;
}
.mascot-speech {
  background: linear-gradient(135deg, #F3E8FF, #FCE7F3);
  color: #7C3AED; font-weight: 600; font-size: 0.95rem;
  padding: 8px 14px; border-radius: 16px;
  position: relative; font-family: 'Mali', cursive;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  animation: speechPop 0.4s cubic-bezier(0.17, 0.89, 0.32, 1.28);
}
@keyframes mascotBounce {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}
@keyframes speechPop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.explain-mascot { margin-bottom: 8px; }

/* Theme toggle in menu */
[data-theme="bright"] .theme-toggle-label { color: #64748B; }