/* Age-Differentiated Visual Themes */

/* ==========================================================================
   THEME: GRADE 2 (Kid - Lớp 2)
   Playful, warm, large touch targets, cheerful feedback, rounded edges
   ========================================================================== */
body[data-theme="grade-2"] {
  --bg-primary: #0f172a;
  --bg-surface: #1e293b;
  --bg-card: #273549;
  --accent-primary: #f59e0b; /* Amber Gold */
  --accent-secondary: #06b6d4; /* Vibrant Cyan */
  --accent-tertiary: #ec4899; /* Pink */
  --border-color: rgba(245, 158, 11, 0.25);
  --radius-lg: 26px;
  --radius-md: 18px;
}

body[data-theme="grade-2"] .profile-badge {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: white;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
}

body[data-theme="grade-2"] .question-text {
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  color: #fef08a;
  line-height: 1.4;
}

body[data-theme="grade-2"] .choice-btn {
  min-height: 72px;
  font-size: 1.5rem;
  font-weight: 700;
  border-radius: 20px;
  background: #334155;
  border: 2px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body[data-theme="grade-2"] .choice-btn:active {
  transform: scale(0.95);
}

body[data-theme="grade-2"] .choice-btn:hover {
  border-color: #f59e0b;
  background: #3e4f66;
  transform: translateY(-2px);
}

/* ==========================================================================
   THEME: GRADE 4 (Junior - Lớp 4)
   Explorer, structured problem solving, cyan/emerald, progression quest
   ========================================================================== */
body[data-theme="grade-4"] {
  --bg-primary: #091e24;
  --bg-surface: #0e303a;
  --bg-card: #143d4a;
  --accent-primary: #10b981; /* Emerald */
  --accent-secondary: #0ea5e9; /* Sky Blue */
  --accent-tertiary: #6366f1; /* Indigo */
  --border-color: rgba(16, 185, 129, 0.22);
  --radius-lg: 18px;
  --radius-md: 12px;
}

body[data-theme="grade-4"] .profile-badge {
  background: linear-gradient(135deg, #10b981, #0ea5e9);
  color: white;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

body[data-theme="grade-4"] .question-text {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.5;
  color: #e2e8f0;
}

body[data-theme="grade-4"] .choice-btn {
  min-height: 58px;
  font-size: 1.15rem;
  font-weight: 600;
  border-radius: 14px;
  background: #153b47;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  text-align: left;
  padding: 14px 20px;
}

body[data-theme="grade-4"] .choice-btn:hover {
  border-color: #10b981;
  background: #1c4b5b;
}

/* ==========================================================================
   THEME: GRADE 9 (Senior - Lớp 9)
   Academic Focus Mode, slate/violet, serious, exam-ready, detailed reasoning
   ========================================================================== */
body[data-theme="grade-9"] {
  --bg-primary: #090d16;
  --bg-surface: #111827;
  --bg-card: #182235;
  --accent-primary: #8b5cf6; /* Violet */
  --accent-secondary: #3b82f6; /* Blue */
  --accent-tertiary: #ec4899;
  --border-color: rgba(139, 92, 246, 0.2);
  --radius-lg: 14px;
  --radius-md: 10px;
}

body[data-theme="grade-9"] .profile-badge {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.25);
}

body[data-theme="grade-9"] .question-text {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.6;
  color: #f1f5f9;
}

body[data-theme="grade-9"] .choice-btn {
  min-height: 52px;
  font-size: 1.05rem;
  font-weight: 500;
  border-radius: 10px;
  background: #1a2333;
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
  padding: 12px 18px;
  font-family: inherit;
}

body[data-theme="grade-9"] .choice-btn:hover {
  border-color: #8b5cf6;
  background: #232f45;
}

/* Exam / Academic step explanation for Grade 9 */
.solution-box {
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 14px;
  font-size: 0.95rem;
  line-height: 1.6;
}

.solution-box .title {
  font-weight: 700;
  color: #c4b5fd;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Choice States */
.choice-btn.correct {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #10b981 !important;
  color: #6ee7b7 !important;
}

.choice-btn.wrong {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
}