:root {
  color-scheme: light only;
  --primary: #4A90D9;
  --primary-dark: #2E6BB5;
  --primary-light: #7FB3E8;
  --warm: #FF8C42;
  --warm-light: #FFB380;
  --success: #52B788;
  --success-light: #95D5B2;
  --gold: #FFD700;
  --bg: #FFF9F0;
  --bg-card: #FFFFFF;
  --text: #2D3142;
  --text-soft: #6B7280;
  --border: #E5E7EB;
  --shadow-sm: 0 1px 3px rgba(45, 49, 66, 0.08);
  --shadow-md: 0 4px 12px rgba(45, 49, 66, 0.10);
  --shadow-lg: 0 12px 32px rgba(45, 49, 66, 0.14);
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  direction: rtl;
  font-family: 'Assistant', -apple-system, sans-serif;
  font-size: 18px;
  background: linear-gradient(180deg, #FFE8F3 0%, #FFF9F0 30%, #FDF4E6 100%) !important;
  background-attachment: fixed !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
  forced-color-adjust: none;
}
body {
  background: transparent !important;
  color: var(--text) !important;
}
/* Block browser auto-dark — keep our pastel palette no matter what */
@media (prefers-color-scheme: dark) {
  html { background: linear-gradient(180deg, #FFE8F3 0%, #FFF9F0 30%, #FDF4E6 100%) !important; color: var(--text) !important; }
  body, .welcome-card, .topic-intro-card, .exercise-card, .badge-card, .lesson-card, .app-header {
    background-color: white !important;
    color: var(--text) !important;
  }
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#app {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
}

button {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  border-radius: var(--radius-pill);
  padding: 14px 28px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

button:active { transform: scale(0.97); }

.btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { background: var(--primary-dark); box-shadow: var(--shadow-lg); }

.btn-warm {
  background: var(--warm);
  color: white;
  box-shadow: var(--shadow-md);
}
.btn-warm:hover { background: #E67730; box-shadow: var(--shadow-lg); }

.btn-mega {
  font-size: 1.25rem !important;
  padding: 18px 36px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #FF8C42, #FFB380) !important;
  color: white !important;
  box-shadow: 0 6px 20px rgba(255, 140, 66, 0.4) !important;
  letter-spacing: 0.5px;
  animation: pulseGlow 1.8s ease-in-out infinite, bounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-mega:hover { transform: translateY(-3px) scale(1.05) !important; }

.btn-secondary {
  font-size: 0.9rem !important;
  padding: 10px 18px !important;
  font-weight: 600 !important;
  opacity: 0.85;
}

.btn-ghost {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary-light);
}
.btn-ghost:hover { background: var(--primary-light); color: white; }

#ex-ask-tamar, #lesson-explain-again {
  background: linear-gradient(135deg, #FFD1DC, #FFB7DE);
  color: var(--text);
  border: 2px solid #FFB7DE;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(255, 143, 171, 0.3);
  /* "Breathing" pulse so the button doesn't get missed — Nati's request 19/05/2026. */
  animation: boti-breathe 2.4s ease-in-out infinite;
}
#ex-ask-tamar:hover, #lesson-explain-again:hover {
  background: linear-gradient(135deg, #FFB7DE, #FF8FAB);
  color: white;
  transform: scale(1.04);
  animation: none; /* stop breathing while hovered — direct interaction */
}
@keyframes boti-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(255, 143, 171, 0.3),
                0 0 0 0 rgba(255, 143, 171, 0.55);
  }
  50% {
    transform: scale(1.045);
    box-shadow: 0 4px 14px rgba(255, 143, 171, 0.5),
                0 0 0 10px rgba(255, 143, 171, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  #ex-ask-tamar, #lesson-explain-again { animation: none; }
  /* Global accessibility — kill looping background animations for users who opt out of motion
     (vestibular sensitivity, ADHD focus needs). EXCEPT for short feedback animations that
     are the entire point of "you got it right" — confetti and celebrations are kept so a kid
     with reduced-motion still sees that her correct answer registered (post-fix audit ממצא 1).
     The :not() chain matches what celebrations.js + bot-panel.js generate. */
  *:not(.confetti-piece):not(.celebration-card):not(.celebration-emoji):not(.celebration-text):not(.typing-dots > span),
  *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus rings — visible keyboard focus for div-based clickables (post-fix audit ממצא 4).
   Uses :focus-visible so mouse clicks don't get the ring, only keyboard navigation. */
.choice:focus-visible,
.topic-card:focus-visible,
.subject-card:focus-visible,
.exam-card:focus-visible {
  outline: 3px solid #4A90D9;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(74, 144, 217, 0.2);
}

/* Per-choice TTS — small inline speaker icon next to each English choice. */
.choice { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.choice .choice-text { flex: 1; min-width: 0; }
.choice .choice-tts { flex-shrink: 0; }
.choice .choice-tts .tts-btn {
  font-size: 0.8rem; padding: 4px 8px; min-height: 32px;
  background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.1);
}

/* Typing dots — three dots that bob in sequence while Boti is thinking. */
.typing-dots { display: inline-flex; gap: 4px; align-items: center; padding: 2px 4px; }
.typing-dots > span {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: 0.5;
  animation: typing-bob 1s infinite ease-in-out;
}
.typing-dots > span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots > span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bob {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-6px); opacity: 1; }
}

input[type="text"], input[type="password"] {
  font-family: inherit;
  font-size: 1.1rem;
  padding: 14px 18px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: white;
  color: var(--text);
  width: 100%;
  transition: border 0.12s ease;
  text-align: right;
}
input:focus {
  outline: none;
  border-color: var(--primary);
}

/* === Login screen === */
.login-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
}

.login-card {
  background: var(--bg-card);
  padding: 40px 32px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 420px;
  width: 100%;
}

.login-emoji { font-size: 4rem; margin-bottom: 16px; }
.login-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 8px;
}
.login-subtitle {
  font-size: 1.05rem;
  color: var(--text-soft);
  margin-bottom: 28px;
}
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form button { margin-top: 12px; }
.login-error {
  color: #DC2626;
  font-size: 0.95rem;
  margin-top: 8px;
  min-height: 1.4em;
}

/* === Stacked fraction === */
.frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  margin: 0 3px;
  font-size: 0.95em;
  line-height: 1;
}
.frac > span:first-child {
  border-bottom: 2px solid currentColor;
  padding: 0 6px 1px;
  font-weight: 700;
}
.frac > span:last-child {
  padding: 1px 6px 0;
  font-weight: 700;
}
.frac.large { font-size: 1.4em; }

/* === Welcome user bar === */
.welcome-user-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 8px 0;
  font-size: 0.85rem;
  color: var(--text-soft);
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

/* === Welcome screen === */
.welcome-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
}

.welcome-card {
  background: var(--bg-card);
  padding: 48px 36px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 560px;
  width: 100%;
}

.teacher-avatar-large {
  width: 140px;
  height: 140px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  background: white;
}
.teacher-avatar-large svg { width: 100%; height: 100%; }
.streak-badge {
  display: inline-block;
  background: linear-gradient(135deg, #FF8C42, #FFD700);
  color: white;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  animation: pulseGlow 2s ease infinite;
}

.welcome-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 12px;
}
.welcome-text {
  font-size: 1.15rem;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 28px;
}
.welcome-text strong { color: var(--warm); }

/* === Header === */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 12px 18px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}

.header-left { display: flex; align-items: center; gap: 12px; }
.header-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: white;
}
.header-avatar svg { width: 100%; height: 100%; }
.header-title { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.header-subtitle { font-size: 0.85rem; color: var(--text-soft); }

/* Old .progress-bar / .progress-segment removed 22/05/2026 — replaced by .happy-progress
   inside quiz/exercise screens (per-question). See further down. */

.progress-btn {
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  cursor: pointer;
}
.progress-btn:hover { background: var(--primary-light); color: white; }

/* === Topic menu === */
.topic-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  padding: 8px 0;
}

.topic-card {
  position: relative; /* so the WANTED-style "בוצע" stamp can absolute-position inside */
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #FFE0EC 0%, #FFF0F8 60%, #FFF9F0 100%);
}
.topic-card::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.topic-card[data-topic-id="1"], .topic-card[data-topic-id="2"], .topic-card[data-topic-id="3"], .topic-card[data-topic-id="4"] {
  background: linear-gradient(135deg, #FFB7DE 0%, #FFD1DC 50%, #FFE8F0 100%) !important;
  border: 2px solid #FF8FBF;
}
.topic-card[data-topic-id="5"], .topic-card[data-topic-id="6"], .topic-card[data-topic-id="7"], .topic-card[data-topic-id="8"] {
  background: linear-gradient(135deg, #B19CD9 0%, #C8B6FF 50%, #E0D5FF 100%) !important;
  border: 2px solid #9381E8;
}
.topic-card[data-topic-id="9"], .topic-card[data-topic-id="10"], .topic-card[data-topic-id="11"] {
  background: linear-gradient(135deg, #87CEEB 0%, #B8E0FF 50%, #E0F2FF 100%) !important;
  border: 2px solid #5DBAE8;
}
/* English Five Fantastic Unit 2 — coral/red, echoes the subject card */
.topic-card[data-topic-id="12"], .topic-card[data-topic-id="13"], .topic-card[data-topic-id="14"],
.topic-card[data-topic-id="15"], .topic-card[data-topic-id="16"] {
  background: linear-gradient(135deg, #FFD1DA 0%, #FF8A95 60%, #FFB7C2 100%) !important;
  border: 2px solid #E63946;
}
.topic-card[data-topic-id="17"], .topic-card[data-topic-id="18"], .topic-card[data-topic-id="19"] {
  background: linear-gradient(135deg, #FFE4B5 0%, #FFC288 60%, #FFD4A3 100%) !important;
  border: 2px solid #E07A1F;
}
/* Science — space — deep violet/indigo, mirrors the gradient on the subject card */
.topic-card[data-topic-id="20"], .topic-card[data-topic-id="21"],
.topic-card[data-topic-id="22"], .topic-card[data-topic-id="23"] {
  background: linear-gradient(135deg, #C4B5FD 0%, #A78BFA 60%, #818CF8 100%) !important;
  border: 2px solid #6B46C1;
}

.topic-icon-big {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 6px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.12));
  animation: iconBob 2.4s ease-in-out infinite;
  display: block;
}
@keyframes iconBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(3deg); }
}
.topic-card:hover .topic-icon-big {
  animation: iconBob 2.4s ease-in-out infinite, iconWiggle 0.5s ease;
}
@keyframes iconWiggle {
  0% { transform: scale(1) rotate(0); }
  25% { transform: scale(1.2) rotate(-12deg); }
  75% { transform: scale(1.2) rotate(12deg); }
  100% { transform: scale(1) rotate(0); }
}
.topic-card:hover {
  transform: translateY(-6px) scale(1.03) rotate(-1deg);
  box-shadow: 0 12px 30px rgba(255, 143, 171, 0.35);
}
.topic-card:hover .topic-number { animation: wobble 0.5s ease; }
.topic-card.locked { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.6); }
.topic-card.locked:hover { transform: none; box-shadow: var(--shadow-md); }
.topic-card.complete { border-color: var(--success); background: linear-gradient(135deg, #B8F4D6 0%, #E0FFE8 100%); }
.topic-card.complete::after {
  content: '✓';
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--success);
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: var(--shadow-sm);
  animation: pop 0.5s ease;
}
.topic-card.in-progress { border-color: var(--primary); animation: pulseGlow 2s ease infinite; }

.topic-number {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.5px;
}
.topic-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}
.topic-status {
  font-size: 0.85rem;
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.2px;
  align-self: flex-start;
  border: 2px solid transparent;
}
/* Stronger, more visible status colors (Nati 22/05/2026 — "צבעים בולטים יותר") */
.topic-status.done { color: white; background: #10B981; border-color: #047857; box-shadow: 0 2px 6px rgba(16,185,129,0.4); }
.topic-status.current { color: white; background: #3B82F6; border-color: #1E40AF; box-shadow: 0 2px 6px rgba(59,130,246,0.4); }
.topic-status.fresh { color: white; background: #F59E0B; border-color: #B45309; box-shadow: 0 2px 6px rgba(245,158,11,0.4); }
.topic-status.skipped { color: white; background: #6B7280; border-color: #374151; box-shadow: 0 2px 6px rgba(107,114,128,0.4); }
.topic-status.locked { color: #6B7280; background: #F3F4F6; border-color: #D1D5DB; }

/* WANTED-style stamp for completed topics (Nati 22/05/2026 — "חותמת מבוקש, בוצע") */
.topic-stamp {
  position: absolute;
  top: 14px;
  left: 12px;
  z-index: 5;
  background: white;
  color: #DC2626;
  border: 4px double #DC2626;
  padding: 6px 18px;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: 4px;
  font-family: 'Impact', 'Arial Black', sans-serif;
  transform: rotate(-14deg);
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.35);
  text-shadow: 1px 1px 0 rgba(220, 38, 38, 0.15);
  pointer-events: none;
  opacity: 0.92;
  text-align: center;
}
/* Slightly fade out the rest of the card so the stamp pops.
   .topic-card already has position:relative globally — no need to re-declare. */
.topic-card.complete .topic-title,
.topic-card.complete .topic-number,
.topic-card.complete .topic-icon-big {
  opacity: 0.75;
}
.topic-section-title {
  grid-column: 1 / -1;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin: 16px 0 4px;
}
.topic-section-title:first-child { margin-top: 0; }

/* === Lesson card === */
.lesson-screen { display: flex; flex-direction: column; gap: 16px; }
.lesson-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
}
.lesson-step-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 16px;
}
.lesson-explanation {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 20px;
}
.lesson-explanation strong { color: var(--warm); font-weight: 700; }
.lesson-visual {
  margin: 20px 0;
  display: flex;
  justify-content: center;
  background: var(--bg);
  padding: 20px;
  border-radius: var(--radius);
}
.worked-example {
  background: linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 100%);
  border-right: 4px solid var(--warm);
  padding: 18px 22px;
  border-radius: var(--radius);
  margin-top: 16px;
}
.worked-example-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--warm);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.worked-example-question { font-weight: 700; margin-bottom: 12px; }
.worked-example-solution { display: flex; flex-direction: column; gap: 8px; line-height: 1.7; }
.worked-example-solution li { padding-right: 4px; }
.worked-example-highlight {
  margin-top: 12px;
  padding: 10px 14px;
  background: white;
  border-radius: var(--radius-sm);
  font-style: italic;
  color: var(--primary-dark);
  font-weight: 600;
}

.lesson-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.step-dots { display: flex; gap: 6px; }
.step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
}
.step-dot.active { background: var(--primary); }
.step-dot.done { background: var(--success); }

/* === Exercise card === */
.exercise-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
}
.exercise-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--warm);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.exercise-question {
  font-size: 1.2rem;
  line-height: 1.7;
  margin-bottom: 20px;
}
.choices { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.choice {
  padding: 14px 18px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1.05rem;
  text-align: right;
  transition: all 0.12s ease;
}
.choice:hover { border-color: var(--primary-light); background: white; }
.choice.selected { border-color: var(--primary); background: var(--primary-light); color: white; }
.choice.correct { border-color: var(--success); background: var(--success-light); }
.choice.wrong { border-color: #FCA5A5; background: #FEE2E2; }

.feedback {
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 1.05rem;
  line-height: 1.6;
}
.feedback.correct { background: #D1FAE5; color: #065F46; border-right: 4px solid var(--success); }
.feedback.encourage { background: #FEF3C7; color: #92400E; border-right: 4px solid var(--warm); }

/* === Bot panel === */
.bot-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45, 49, 66, 0.4);
  display: flex;
  justify-content: flex-start;
  z-index: 100;
  animation: fadeIn 0.18s ease;
}
.bot-panel {
  background: var(--bg-card);
  width: min(440px, 100%);
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: slideInLeft 0.24s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* Joyful animations for kids */
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 144, 217, 0.4); }
  50% { box-shadow: 0 0 0 14px rgba(74, 144, 217, 0); }
}
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes sparkle { 0% { transform: scale(0) rotate(0deg); opacity: 0; } 50% { transform: scale(1.2) rotate(180deg); opacity: 1; } 100% { transform: scale(0) rotate(360deg); opacity: 0; } }
@keyframes confettiFall {
  0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
@keyframes slideInUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes scaleIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.1); opacity: 1; }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes wobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

/* Apply animations to existing elements */
.welcome-card, .login-card { animation: bounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.welcome-card .teacher-avatar-large { animation: bounceIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards, float 3s ease-in-out 1s infinite; }
.welcome-card .welcome-title { animation: slideInUp 0.5s ease 0.4s backwards; }
.welcome-card .welcome-text { animation: slideInUp 0.5s ease 0.5s backwards; }
.welcome-card .btn-warm { animation: bounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s backwards, pulseGlow 2s ease-in-out 1.5s infinite; }
.brand-name { animation: shimmer 4s linear infinite; background-size: 200% auto; }
.streak-badge { animation: bounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards, wobble 2s ease 2s infinite; transform-origin: center; }
.topic-card { animation: slideInUp 0.4s ease backwards; }
.topic-card:nth-child(1) { animation-delay: 0.05s; }
.topic-card:nth-child(2) { animation-delay: 0.1s; }
.topic-card:nth-child(3) { animation-delay: 0.15s; }
.topic-card:nth-child(4) { animation-delay: 0.2s; }
.topic-card:nth-child(5) { animation-delay: 0.25s; }
.topic-card:nth-child(6) { animation-delay: 0.3s; }
.topic-card:nth-child(7) { animation-delay: 0.35s; }
.topic-card:nth-child(8) { animation-delay: 0.4s; }
.topic-card:nth-child(9) { animation-delay: 0.45s; }
.topic-card:nth-child(10) { animation-delay: 0.5s; }
.topic-card:nth-child(11) { animation-delay: 0.55s; }
.topic-card:hover { transform: translateY(-4px) rotate(-1deg); }

.lesson-card, .exercise-card { animation: slideInUp 0.35s ease; }
.subject-card { animation: pop 0.5s ease backwards; }
.subject-card:nth-child(1) { animation-delay: 0.1s; }
.subject-card:nth-child(2) { animation-delay: 0.2s; }
.subject-card:nth-child(3) { animation-delay: 0.3s; }

.teacher-avatar-large {
  animation: float 3s ease-in-out infinite;
  position: relative;
}
.teacher-avatar-large::before,
.teacher-avatar-large::after {
  content: '✨';
  position: absolute;
  font-size: 1.6rem;
  animation: sparkleOrbit 4s ease-in-out infinite;
  pointer-events: none;
}
.teacher-avatar-large::before {
  top: -8px;
  left: -10px;
  animation-delay: 0s;
}
.teacher-avatar-large::after {
  bottom: 4px;
  right: -8px;
  animation-delay: 2s;
}
@keyframes sparkleOrbit {
  0%, 100% { transform: scale(0.6) rotate(0deg); opacity: 0.4; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 1; }
}

.header-avatar { animation: float 4s ease-in-out infinite; }
.btn-warm { animation: pulseGlow 2s ease-in-out infinite; }

/* Choice click animations — visual feedback when child selects */
.choice {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative;
  overflow: hidden;
}
.choice.selected {
  animation: choiceSelect 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 20px rgba(74, 144, 217, 0.25);
}
.choice.correct {
  animation: choiceCorrect 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.choice.wrong {
  animation: choiceWrong 0.5s ease;
}
@keyframes choiceSelect {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.05); }
  100% { transform: translateY(-3px) scale(1.02); }
}
@keyframes choiceCorrect {
  0% { transform: scale(1); }
  30% { transform: scale(1.12) rotate(-2deg); }
  60% { transform: scale(0.98) rotate(1deg); }
  100% { transform: scale(1.02); }
}
@keyframes choiceWrong {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* Page transition — slide-in for screen changes */
.lesson-screen,
.welcome-screen,
.rewards-screen {
  animation: pageSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pageSlideIn {
  0% { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Topic cards — playful hover */
.topic-card {
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.topic-card:hover {
  transform: translateY(-6px) scale(1.03) rotate(-0.5deg);
  box-shadow: 0 14px 32px rgba(74, 144, 217, 0.2);
}
.topic-card:active { transform: translateY(-2px) scale(1.01); }

/* Welcome card — entrance zoom */
.welcome-card {
  animation: welcomeZoomIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes welcomeZoomIn {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

/* Streak badge pulses */
.streak-badge {
  animation: streakPulse 1.6s ease-in-out infinite, slideInUp 0.4s ease;
}
@keyframes streakPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* Lesson visual fade-in */
.lesson-visual {
  animation: visualFadeIn 0.5s ease;
}
@keyframes visualFadeIn {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

/* Hint bubble — bounce in */
.hint-bubble { animation: hintBounceIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes hintBounceIn {
  0% { opacity: 0; transform: translateX(20px) scale(0.9); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* Answer reveal — celebrate */
.answer-reveal {
  animation: answerCelebrate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes answerCelebrate {
  0% { opacity: 0; transform: scale(0.7) rotate(-3deg); }
  60% { transform: scale(1.05) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Quota display — gentle bob */
#quota-display > div {
  animation: quotaBob 0.5s ease, quotaPulse 3s ease-in-out infinite 1s;
}
@keyframes quotaBob {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes quotaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,144,217,0); }
  50% { box-shadow: 0 0 0 4px rgba(74,144,217,0.08); }
}

/* Submit button bounce */
.btn-primary {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-primary:hover { transform: translateY(-2px) scale(1.04); }
.btn-primary:active { transform: translateY(0) scale(0.98); }

/* Boti reaction on correct/wrong — header avatar bounces */
body.celebrating .header-avatar {
  animation: avatarCelebrate 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.encouraging .header-avatar {
  animation: avatarEncourage 0.6s ease;
}
@keyframes avatarCelebrate {
  0% { transform: scale(1) rotate(0); }
  25% { transform: scale(1.25) rotate(-8deg); }
  50% { transform: scale(1.15) rotate(8deg); }
  75% { transform: scale(1.2) rotate(-4deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes avatarEncourage {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

/* Stat numbers — count-in feel */
.intro-stat-value, .exam-score-pct {
  animation: statBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes statBounceIn {
  0% { opacity: 0; transform: scale(0.5); }
  60% { transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

.feedback.correct {
  animation: pop 0.5s ease;
}
.feedback.encourage { animation: slideInUp 0.3s ease; }

.choice { transition: all 0.18s ease; }
.choice:hover { transform: translateY(-2px) scale(1.01); }
.choice.correct { animation: pop 0.4s ease; }

.bot-msg { animation: slideInUp 0.25s ease; }

/* Confetti container */
.confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}
.confetti-piece {
  position: absolute;
  width: 12px;
  height: 12px;
  top: -20px;
  animation: confettiFall linear forwards;
}

/* Celebration overlay */
.celebration-overlay {
  position: fixed;
  inset: 0;
  background: rgba(74, 144, 217, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: fadeIn 0.3s ease;
}
.celebration-card {
  background: white;
  padding: 40px;
  border-radius: var(--radius-lg);
  text-align: center;
  max-width: 420px;
  animation: pop 0.5s ease;
}
.celebration-emoji { font-size: 5rem; animation: bounce 1s ease infinite; margin-bottom: 12px; }
.celebration-title { font-size: 2rem; font-weight: 800; color: var(--primary-dark); margin-bottom: 12px; }
.celebration-text { font-size: 1.1rem; line-height: 1.6; color: var(--text); margin-bottom: 24px; }

/* Sparkles around correct answer */
.sparkle {
  position: absolute;
  font-size: 1.5rem;
  animation: sparkle 0.8s ease forwards;
  pointer-events: none;
}

/* Star burst */
.star-burst {
  display: inline-block;
  animation: pop 0.5s ease, wiggle 0.5s ease 0.5s;
}

.bot-header {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}
.bot-close {
  margin-right: auto;
  background: var(--bg);
  border: none;
  font-size: 1.2rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
}
.bot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bot-msg {
  padding: 12px 16px;
  border-radius: var(--radius);
  max-width: 85%;
  line-height: 1.6;
}
.bot-msg.tamar { background: var(--primary-light); color: white; align-self: flex-start; border-top-right-radius: 4px; }
.bot-msg.student { background: var(--bg); align-self: flex-end; border-top-left-radius: 4px; }
.bot-msg.thinking { background: var(--bg); color: var(--text-soft); font-style: italic; align-self: flex-start; }

.admin-link-btn {
  display: block;
  margin: 14px auto 0;
  padding: 10px 22px;
  background: linear-gradient(135deg, #1B3A5C, #0A2E4A);
  color: white;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(10,46,74,0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.admin-link-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(10,46,74,0.35);
}

.hints-stack {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hint-bubble {
  background: #FFF7ED;
  border: 1px solid #FFD580;
  color: #92400E;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 0.98rem;
  line-height: 1.5;
  animation: slideInUp 0.35s ease;
}
.hint-bubble .hint-num {
  font-weight: 700;
  color: #B45309;
  margin-left: 6px;
}
.answer-reveal {
  background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
  border: 2px dashed #10B981;
  border-radius: 14px;
  padding: 14px 18px;
  margin-top: 12px;
  animation: slideInUp 0.4s ease;
}
.answer-reveal-label {
  font-size: 0.85rem;
  color: #065F46;
  font-weight: 600;
  margin-bottom: 6px;
}
.answer-reveal-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: #065F46;
  text-align: center;
}
.btn-hint {
  background: linear-gradient(135deg, #FED7AA, #FDBA74);
  color: #9A3412;
  border: none;
  padding: 10px 18px;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 3px 10px rgba(253,186,116,0.35);
}
.btn-hint:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(253,186,116,0.45);
}
.btn-hint:active { transform: translateY(0); }

.bank-tag {
  display: inline-block;
  background: rgba(255,255,255,0.25);
  color: white;
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 10px;
  margin-bottom: 6px;
  font-weight: 600;
}
.not-meant-btn {
  display: block;
  margin-top: 10px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.18);
  color: white;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 14px;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.not-meant-btn:hover { background: rgba(255,255,255,0.3); }
.not-meant-btn:active { transform: scale(0.96); }

.bot-input-row {
  display: flex;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}
.bot-input-row input { flex: 1; }
.bot-send {
  padding: 0 18px;
  background: var(--primary);
  color: white;
  border-radius: var(--radius);
  font-weight: 700;
}

.bot-mic {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.bot-mic:hover { background: var(--primary-light); color: white; }
.bot-mic.recording {
  background: #DC2626;
  color: white;
  border-color: #DC2626;
  animation: pulseGlow 1.2s ease infinite;
}

/* === Loading === */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: 1.1rem;
  color: var(--text-soft);
}

/* === Subject menu === */
.subject-menu-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 4px;
}
.subject-header {
  text-align: center;
  margin-bottom: 24px;
  padding: 12px;
}
.subject-h1 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 8px;
}
.subject-h2 {
  font-size: 1.15rem;
  color: var(--text-soft);
}
.subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  padding: 4px;
}
.subject-card {
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  color: white;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  text-align: center;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.subject-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.subject-card.inactive { opacity: 0.6; cursor: not-allowed; background: linear-gradient(135deg, #94A3B8, #64748B) !important; }
.subject-card.placeholder { background: linear-gradient(135deg, #F1F5F9, #E2E8F0) !important; color: var(--text-soft); cursor: default; }
.subject-card.placeholder:hover { transform: none; box-shadow: var(--shadow-md); }
.subject-card-recent { box-shadow: 0 0 0 4px #FFD700, 0 8px 24px rgba(255, 215, 0, 0.4); transform: scale(1.02); animation: pulseRecent 2s ease-in-out infinite; }
.tts-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 8px 0 0 8px; padding: 6px 14px;
  background: linear-gradient(135deg, #4A90D9, #2E6BB5);
  color: white; border: none; border-radius: 999px;
  font-size: 0.88rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 3px 10px rgba(74, 144, 217, 0.3);
  transition: transform 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.tts-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(74, 144, 217, 0.45); }
.tts-btn:active:not(:disabled) { transform: translateY(0); }
.tts-btn:disabled { opacity: 0.7; cursor: wait; }
.tts-btn.tts-playing { background: linear-gradient(135deg, #FF8A95, #E63946); animation: ttsPulse 1.2s ease-in-out infinite; }
@keyframes ttsPulse { 0%, 100% { box-shadow: 0 3px 10px rgba(230, 57, 70, 0.4); } 50% { box-shadow: 0 5px 18px rgba(230, 57, 70, 0.65); } }
.subject-card-recent:hover { transform: translateY(-4px) scale(1.02); }
@keyframes pulseRecent { 0%, 100% { box-shadow: 0 0 0 4px #FFD700, 0 8px 24px rgba(255, 215, 0, 0.4); } 50% { box-shadow: 0 0 0 6px #FFD700, 0 12px 32px rgba(255, 215, 0, 0.55); } }
.subject-emoji { font-size: 3.5rem; margin-bottom: 4px; }
.subject-title { font-size: 1.6rem; font-weight: 800; }
.subject-subtitle { font-size: 0.95rem; opacity: 0.9; }
.subject-status {
  margin-top: 10px;
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255,255,255,0.25);
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

/* === Mobile === */
@media (max-width: 600px) {
  html { font-size: 16px; }
  #app { padding: 12px; }
  .lesson-card, .exercise-card, .login-card, .welcome-card { padding: 20px; }
  .topic-menu { grid-template-columns: 1fr 1fr; gap: 12px; }
  .topic-card { padding: 14px; }
  .app-header { flex-wrap: wrap; row-gap: 10px; }
  /* Old .progress-bar mobile override removed 22/05/2026 with the segment bar itself. */
}

/* === Boti avatar wrapper === */
.boti-av {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 16px rgba(255, 143, 171, 0.25);
}
.boti-av .avatar-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

/* === Brand logo === */
.brand-logo {
  text-align: center;
  margin-bottom: 18px;
}
.brand-name {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--primary-dark);
  background: linear-gradient(135deg, var(--primary), var(--warm));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
  font-family: 'Assistant', sans-serif;
}
.brand-tagline {
  font-size: 0.95rem;
  color: var(--text-soft);
  font-weight: 600;
}

/* === Password eye === */
.password-wrap {
  position: relative;
  width: 100%;
}
.password-wrap input {
  width: 100%;
  padding-left: 48px;
}
.password-eye {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  transition: background 0.15s ease;
}
.password-eye:hover { background: var(--bg); }
.password-eye.on { color: var(--primary); }

/* === Forgot password === */
.forgot-link {
  display: block;
  margin: 8px auto 0;
  background: transparent;
  border: none;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 4px;
}
.forgot-link:hover { color: var(--primary-dark); }

.forgot-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45, 49, 66, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: fadeIn 0.2s ease;
}
.forgot-modal-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  max-width: 420px;
  width: 90%;
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: pop 0.35s ease;
}
.forgot-emoji { font-size: 3rem; margin-bottom: 8px; }
.forgot-title { font-size: 1.4rem; font-weight: 800; color: var(--primary-dark); margin-bottom: 8px; }
.forgot-subtitle { font-size: 0.95rem; color: var(--text-soft); margin-bottom: 18px; line-height: 1.5; }
.forgot-email {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  text-align: right;
  direction: ltr;
}
.forgot-email:focus { outline: none; border-color: var(--primary); }
.forgot-msg {
  font-size: 0.9rem;
  min-height: 1.4em;
  margin-bottom: 14px;
  color: var(--text);
  text-align: right;
}
.forgot-msg.error { color: #DC2626; }
.forgot-msg.success { color: var(--success); font-weight: 700; }
.forgot-actions { display: flex; gap: 10px; justify-content: center; }

/* === Exam section + cards === */
.exam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 8px;
  margin-bottom: 24px;
}
.exam-card {
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  color: white;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
  animation: pop 0.5s ease backwards;
}
.exam-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow-lg); }
.exam-card-icon { font-size: 2.4rem; margin-bottom: 4px; }
.exam-card-title { font-size: 1.3rem; font-weight: 800; }
.exam-card-subtitle { font-size: 0.95rem; opacity: 0.95; }
.exam-card-meta { font-size: 0.8rem; opacity: 0.85; margin-top: 2px; }
.exam-card-last {
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.25);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.exam-card-btn {
  margin-top: 12px;
  padding: 9px 22px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  pointer-events: none;
}

/* === Happy progress bar + topic banner (Nati 22/05/2026) === */
.quiz-topic-banner {
  background: linear-gradient(135deg, #FFE5F1 0%, #FFF4D6 50%, #E0F7FA 100%);
  border-radius: 14px;
  padding: 10px 18px;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  color: #5B21B6;
  border: 2px solid rgba(167, 139, 250, 0.35);
  box-shadow: 0 2px 8px rgba(167, 139, 250, 0.15);
}
.happy-progress {
  position: relative;
  height: 28px;
  background: #F1F5F9;
  border-radius: 999px;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.08);
  border: 2px solid #E2E8F0;
}
.happy-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #FBBF24 0%, #F472B6 35%, #A78BFA 70%, #60A5FA 100%);
  background-size: 200% 100%;
  animation: happyShimmer 3s linear infinite;
  border-radius: 999px;
  transition: width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 12px rgba(244, 114, 182, 0.5);
}
@keyframes happyShimmer {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}
.happy-progress-label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-weight: 800;
  font-size: 0.95rem;
  color: #1F2937;
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
  letter-spacing: 0.3px;
}
@media (prefers-reduced-motion: reduce) {
  .happy-progress-fill { animation: none; }
}

/* === Exam progress bar === */
.exam-progress {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.exam-progress-label {
  font-size: 0.9rem;
  color: var(--text-soft);
  margin-bottom: 8px;
  font-weight: 600;
}
.exam-progress-bar {
  height: 8px;
  background: var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.exam-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--warm));
  transition: width 0.4s ease;
  border-radius: var(--radius-pill);
}

/* === Exam score circle === */
.exam-score-circle {
  width: 180px;
  height: 180px;
  margin: 16px auto;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--grade-color, #4A90D9) 0deg, var(--grade-color, #4A90D9) calc(var(--pct, 100) * 1deg), var(--border) 0);
  position: relative;
  animation: pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.exam-score-circle::before {
  content: '';
  position: absolute;
  inset: 12px;
  background: var(--bg-card);
  border-radius: 50%;
}
.exam-score-pct {
  position: relative;
  font-size: 3rem;
  font-weight: 800;
  color: var(--grade-color, var(--primary));
  line-height: 1;
}
.exam-score-fraction {
  position: relative;
  font-size: 0.95rem;
  color: var(--text-soft);
  margin-top: 4px;
}
.exam-grade-label {
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 8px;
}

/* === User bar === */
.user-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px 12px;
  font-size: 0.85rem;
  color: var(--text-soft);
}
.user-name { font-weight: 700; color: var(--primary-dark); }
.logout-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 0.82rem;
  color: var(--text-soft);
  cursor: pointer;
  font-family: inherit;
}
.logout-btn:hover { background: var(--bg); border-color: var(--primary-light); color: var(--primary); }

/* === Quiz chip === */
.quiz-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: var(--primary-light);
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  margin-top: 6px;
  transition: background 0.15s ease, transform 0.12s ease;
  font-family: inherit;
  align-self: flex-start;
}
.quiz-chip:hover { background: var(--primary); transform: scale(1.04); }
.topic-card.locked .quiz-chip { display: none; }

/* === Learn chip — sits above the quiz-chip on each topic card (Nati 22/05/2026) === */
.learn-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: linear-gradient(135deg, #6EE7B7, #10B981);
  color: white;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  margin-top: 6px;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
  font-family: inherit;
  align-self: flex-start;
  box-shadow: 0 3px 0 #047857, 0 6px 12px rgba(16, 185, 129, 0.3);
}
.learn-chip:hover { transform: scale(1.04); }
.topic-card.locked .learn-chip { display: none; }

/* === Topic Intro card === */
.topic-intro-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  animation: scaleIn 0.35s ease;
}
.topic-intro-icon { font-size: 3.5rem; }
.topic-intro-title { font-size: 1.5rem; font-weight: 800; color: var(--primary-dark); }
.topic-intro-meta { font-size: 0.9rem; color: var(--text-soft); }
.topic-intro-stats { display: flex; gap: 24px; margin: 8px 0; }
.intro-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.intro-stat-value { font-size: 1.4rem; font-weight: 800; color: var(--primary); }
.intro-stat-label { font-size: 0.78rem; color: var(--text-soft); }
.intro-quiz-result {
  font-size: 1.05rem;
  color: var(--text-soft);
  padding: 6px 14px;
  background: var(--bg);
  border-radius: var(--radius-pill);
}
.intro-memory-tip {
  font-size: 0.95rem;
  color: var(--primary-dark);
  background: linear-gradient(135deg, #FFF7ED, #FEF3C7);
  border-right: 4px solid var(--warm);
  padding: 12px 16px;
  border-radius: var(--radius);
  text-align: right;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
}
.topic-intro-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* Two-button layout: "למידה" + "תרגול" side by side, equal visual weight. Nati 19/05/2026 — שיהיה ברור. */
.topic-intro-actions-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 520px;
  margin: 18px auto 4px;
}
.topic-intro-actions-dual .btn-mega {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 12px;
  text-align: center;
  line-height: 1.25;
  border-radius: 22px;
}
.topic-intro-actions-dual .action-icon { font-size: 2rem; line-height: 1; }
.topic-intro-actions-dual .action-title { font-weight: 800; font-size: 1.05rem; }
.topic-intro-actions-dual .action-sub { font-size: 0.78rem; font-weight: 500; opacity: 0.85; }
.topic-intro-actions-dual .action-learn {
  background: linear-gradient(135deg, #FFE5B4, #FFB347);
  border: 2px solid #FF9F1C;
}
.topic-intro-actions-dual .action-practice {
  background: linear-gradient(135deg, #BAE6FD, #60A5FA);
  border: 2px solid #3B82F6;
  color: #0F172A;
}
@media (max-width: 480px) {
  .topic-intro-actions-dual { grid-template-columns: 1fr; }
}

/* === Rewards screen === */
.rewards-screen { display: flex; flex-direction: column; padding: 8px 0; }
.rewards-header { text-align: center; margin-bottom: 24px; }
.rewards-title { font-size: 2rem; font-weight: 800; color: var(--primary-dark); margin-bottom: 6px; }
.rewards-subtitle { font-size: 1rem; color: var(--text-soft); }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.badge-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 20px 12px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform 0.15s ease;
}
.badge-card:hover { transform: translateY(-3px); }
.badge-card.earned {
  border-color: var(--gold);
  background: linear-gradient(180deg, #FFFBEB 0%, white 100%);
  animation: pop 0.4s ease;
}
.badge-card.pending {
  opacity: 0.85;
  border-color: var(--border);
  background: var(--bg-card);
}
.badge-emoji { font-size: 2.4rem; }
.badge-name { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.badge-desc { font-size: 0.8rem; color: var(--text-soft); line-height: 1.4; }
.badge-status {
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 10px;
  display: inline-block;
}
.earned-tag { background: #D1FAE5; color: #065F46; }
.pending-tag { background: #FFE0F0; color: #9D174D; }

.rewards-btn {
  margin-top: 14px;
  background: linear-gradient(135deg, var(--gold), var(--warm-light));
  color: var(--text);
  font-size: 0.95rem;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rewards-btn:hover { box-shadow: var(--shadow-md); transform: scale(1.04); }

/* === Print (formula sheet) === */
@media print {
  .no-print { display: none !important; }
  body { background: white; }
}

/* ================================================================
   KIDS DESIGN REFRESH — overrides for joyful, alive, animated feel
   targets ages 10-11. Inspired by Duolingo/Khan Kids visual energy.
   ================================================================ */

/* Floating ambient bubbles — page-level personality */
body::before, body::after {
  content: '';
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  z-index: -1;
  opacity: 0.35;
  filter: blur(60px);
  animation: ambientFloat 18s ease-in-out infinite;
}
body::before {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #FFB7DE, transparent);
  top: -100px;
  left: -100px;
}
body::after {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #B8E0FF, transparent);
  bottom: -150px;
  right: -150px;
  animation-delay: 6s;
}
@keyframes ambientFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.1); }
  66% { transform: translate(-30px, 30px) scale(0.95); }
}

/* Welcome card — big, bold, joyful */
.welcome-card {
  background: linear-gradient(180deg, #ffffff 0%, #FFF9FB 100%) !important;
  border: 3px solid #FFE0EF !important;
  border-radius: 32px !important;
  padding: 32px 28px !important;
  box-shadow:
    0 20px 60px rgba(255, 183, 222, 0.25),
    0 0 0 6px rgba(255, 224, 240, 0.4) !important;
  position: relative;
  overflow: visible !important;
}
.welcome-card::before {
  content: '⭐';
  position: absolute;
  top: 20px;
  right: 26px;
  font-size: 1.8rem;
  animation: starTwinkle 2.5s ease-in-out infinite;
}
.welcome-card::after {
  content: '💫';
  position: absolute;
  bottom: 32px;
  left: 26px;
  font-size: 1.6rem;
  animation: starTwinkle 2.5s ease-in-out infinite 1.25s;
}
@keyframes starTwinkle {
  0%, 100% { transform: scale(0.8) rotate(0deg); opacity: 0.5; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 1; }
}

/* Brand logo punch */
.brand-name {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  background: linear-gradient(90deg, #FF6B9D, #C5A55A, #4A90D9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  letter-spacing: 1px;
}
.brand-tagline {
  font-size: 1rem;
  color: #FF6B9D;
  font-weight: 600;
  margin-top: 4px;
}

/* Welcome title — much bigger and warmer */
.welcome-title {
  font-size: 2rem !important;
  background: linear-gradient(135deg, #FF6B9D, #C5A55A);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-weight: 800 !important;
  margin: 16px 0 8px !important;
}

.welcome-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #4A4458 !important;
}

/* Buttons — juicy, oversized, with shadow & punch */
.btn-warm {
  background: linear-gradient(135deg, #FF6B9D 0%, #FFB7DE 100%) !important;
  color: white !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  padding: 16px 36px !important;
  border-radius: 50px !important;
  letter-spacing: 0.5px;
  box-shadow:
    0 6px 0 #D9457D,
    0 12px 24px rgba(255, 107, 157, 0.4) !important;
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.btn-warm:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 10px 0 #D9457D,
    0 18px 32px rgba(255, 107, 157, 0.5) !important;
}
.btn-warm:active {
  transform: translateY(2px) !important;
  box-shadow:
    0 2px 0 #D9457D,
    0 4px 8px rgba(255, 107, 157, 0.3) !important;
}

.btn-mega {
  background: linear-gradient(135deg, #FF6B9D 0%, #FFB7DE 50%, #C5A55A 100%) !important;
  font-size: 1.3rem !important;
  padding: 20px 44px !important;
  box-shadow:
    0 8px 0 #D9457D,
    0 16px 32px rgba(255, 107, 157, 0.4) !important;
}

.btn-primary {
  background: linear-gradient(135deg, #4A90D9, #2E6BB5) !important;
  color: white !important;
  font-weight: 700 !important;
  padding: 14px 32px !important;
  border-radius: 50px !important;
  box-shadow:
    0 5px 0 #1E5394,
    0 10px 20px rgba(74, 144, 217, 0.35) !important;
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 8px 0 #1E5394,
    0 14px 26px rgba(74, 144, 217, 0.45) !important;
}
.btn-primary:active {
  transform: translateY(2px) !important;
  box-shadow:
    0 2px 0 #1E5394,
    0 4px 8px rgba(74, 144, 217, 0.3) !important;
}

/* Topic cards — full color, raised, animated */
.topic-card {
  border-radius: 24px !important;
  border: 3px solid rgba(255, 255, 255, 0.8) !important;
  padding: 24px 18px !important;
  box-shadow:
    0 8px 0 rgba(0, 0, 0, 0.08),
    0 14px 30px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative;
  overflow: hidden !important;
}
.topic-card:hover {
  transform: translateY(-6px) rotate(-1deg) scale(1.03) !important;
  box-shadow:
    0 14px 0 rgba(0, 0, 0, 0.1),
    0 24px 40px rgba(0, 0, 0, 0.15) !important;
}
.topic-card:active {
  transform: translateY(0) scale(0.99) !important;
}
.topic-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(255, 255, 255, 0.5), transparent 50%);
  pointer-events: none;
}

.topic-icon-big {
  font-size: 4rem !important;
  margin-bottom: 8px !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15)) !important;
}

.topic-title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #2D3142 !important;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.6);
}

/* Exercise card — playful */
.exercise-card {
  border-radius: 28px !important;
  border: 3px solid #FFE0EF !important;
  padding: 28px 24px !important;
  box-shadow:
    0 10px 30px rgba(255, 183, 222, 0.2),
    0 0 0 6px rgba(255, 224, 240, 0.3) !important;
}

.exercise-question {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  color: #2D3142 !important;
}

/* Choice cards — big, juicy */
.choice {
  background: linear-gradient(180deg, #ffffff, #FFF9FB) !important;
  border: 3px solid #E8E2EE !important;
  border-radius: 20px !important;
  padding: 18px 22px !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.05), 0 6px 12px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative;
}
.choice:hover {
  transform: translateY(-3px) !important;
  border-color: #FFB7DE !important;
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.08), 0 12px 20px rgba(255, 183, 222, 0.25) !important;
}
.choice.selected {
  background: linear-gradient(180deg, #E8F1FF, #DCE9FF) !important;
  border-color: #4A90D9 !important;
  color: #2E6BB5 !important;
  box-shadow: 0 5px 0 #4A90D9, 0 10px 20px rgba(74, 144, 217, 0.3) !important;
  transform: translateY(-2px) !important;
}
.choice.correct {
  background: linear-gradient(180deg, #D1FAE5, #A7F3D0) !important;
  border-color: #10B981 !important;
  color: #065F46 !important;
  box-shadow: 0 5px 0 #10B981, 0 10px 20px rgba(16, 185, 129, 0.4) !important;
  animation: choiceCorrectBig 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.choice.wrong {
  background: linear-gradient(180deg, #FEE2E2, #FECACA) !important;
  border-color: #EF4444 !important;
  color: #991B1B !important;
  box-shadow: 0 5px 0 #EF4444, 0 10px 20px rgba(239, 68, 68, 0.3) !important;
  animation: choiceWrongShake 0.5s ease !important;
}
@keyframes choiceCorrectBig {
  0% { transform: scale(1) rotate(0); }
  20% { transform: scale(1.15) rotate(-3deg); }
  40% { transform: scale(0.95) rotate(2deg); }
  60% { transform: scale(1.08) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes choiceWrongShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

/* Header — colorful gradient */
.app-header {
  background: linear-gradient(135deg, #FFB7DE 0%, #C8B6FF 50%, #B8E0FF 100%) !important;
  border-radius: 0 0 24px 24px !important;
  padding: 14px 18px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
  border: none !important;
}
.header-title { color: white !important; font-weight: 800 !important; text-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.header-subtitle { color: rgba(255, 255, 255, 0.9) !important; }

/* Streak badge — flashy */
.streak-badge {
  background: linear-gradient(135deg, #FFD93D, #FF8C42) !important;
  color: white !important;
  font-weight: 800 !important;
  padding: 8px 18px !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 14px rgba(255, 140, 66, 0.4), 0 0 0 4px rgba(255, 217, 61, 0.2) !important;
  font-size: 1rem !important;
  display: inline-block !important;
  margin: 12px auto !important;
}

/* Subject menu — cards with personality */
.subject-card {
  border-radius: 24px !important;
  border: 3px solid white !important;
  padding: 24px !important;
  box-shadow:
    0 8px 0 rgba(0, 0, 0, 0.08),
    0 14px 28px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.subject-card:hover {
  transform: translateY(-5px) rotate(-0.5deg) !important;
}

/* Quiz chip — playful */
.quiz-chip {
  background: linear-gradient(135deg, #FFD93D, #FF8C42) !important;
  color: white !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 50px !important;
  font-size: 0.85rem !important;
  box-shadow: 0 3px 0 #E07020, 0 6px 12px rgba(255, 140, 66, 0.3) !important;
  border: none !important;
}

/* Lesson visual — softer with glow */
.lesson-visual {
  border-radius: 20px !important;
  background: linear-gradient(180deg, #FFF9F0, #FFE8F0) !important;
  border: 2px dashed #FFB7DE !important;
  padding: 18px !important;
  margin: 14px 0 !important;
}

/* Mobile — bigger, more touchable, more animated */
@media (max-width: 600px) {
  html { font-size: 17px; }
  body { padding: 0; }
  #app { padding: 8px; max-width: 100%; }

  .welcome-title { font-size: 1.7rem !important; }
  .topic-icon-big { font-size: 3.2rem !important; }
  .topic-card { padding: 18px 14px !important; min-height: 180px; }
  .topic-title { font-size: 1rem !important; }
  .topic-intro-icon { font-size: 4.5rem !important; }
  .topic-intro-title { font-size: 1.5rem !important; }

  /* Bigger touch targets */
  .choice {
    padding: 20px 18px !important;
    font-size: 1.1rem !important;
    min-height: 60px;
  }
  .btn-warm, .btn-primary, .btn-mega {
    padding: 16px 32px !important;
    font-size: 1.1rem !important;
    width: auto;
  }
  .btn-mega { font-size: 1.2rem !important; padding: 18px 36px !important; }

  /* Header smaller on mobile */
  .app-header { padding: 10px 12px !important; }
  .header-title { font-size: 1rem !important; }
  .header-subtitle { font-size: 0.78rem !important; }

  /* FAB smaller but still visible */
  .boti-fab {
    bottom: 14px;
    left: 14px;
    padding: 10px 16px;
    font-size: 0.9rem;
  }
  .boti-fab-icon { font-size: 1.2rem; }

  /* Welcome card padding */
  .welcome-card { padding: 24px 20px !important; }
  .exercise-card { padding: 20px 16px !important; }

  /* Subject cards full-width on mobile */
  .subject-card { padding: 24px 18px !important; }

  /* Topic intro card */
  .topic-intro-card { padding: 24px 18px !important; }

  /* Hint bubbles full-width on mobile */
  .hint-bubble { padding: 14px 16px !important; font-size: 1rem !important; }

  /* Bigger emoji decorations */
  .welcome-card::before,
  .welcome-card::after { font-size: 2rem !important; }
}

/* Permanent idle animations — always visible, not hover-dependent */
.welcome-card .teacher-avatar-large {
  animation: float 3s ease-in-out infinite, gentleBreathing 4s ease-in-out infinite;
}
@keyframes gentleBreathing {
  0%, 100% { filter: drop-shadow(0 4px 12px rgba(255, 183, 222, 0.4)); }
  50% { filter: drop-shadow(0 8px 20px rgba(255, 107, 157, 0.6)); }
}

/* Always-running sparkle background on welcome */
.welcome-screen::after {
  content: '✨';
  position: fixed;
  top: 25%;
  left: 8%;
  font-size: 2rem;
  animation: floatSparkle 6s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
  opacity: 0.4;
}
@keyframes floatSparkle {
  0%, 100% { transform: translate(0, 0) rotate(0); opacity: 0.4; }
  50% { transform: translate(20px, -30px) rotate(180deg); opacity: 0.8; }
}

/* Topic card always-bobs (don't wait for hover) */
.topic-card {
  animation: cardIdleBob 4s ease-in-out infinite;
}
.topic-card:nth-child(2n) { animation-delay: 0.5s; }
.topic-card:nth-child(3n) { animation-delay: 1s; }
.topic-card:nth-child(4n) { animation-delay: 1.5s; }
@keyframes cardIdleBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Active-state feedback for ALL interactive elements (mobile = no hover) */
.choice:active,
button:active,
.topic-card:active,
.subject-card:active,
.exam-card:active {
  transform: scale(0.96) !important;
  transition: transform 0.08s ease !important;
}

/* Topic intro icon — massive and bouncy */
.topic-intro-icon {
  font-size: 5rem !important;
  text-align: center;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
  animation: bigBob 2.5s ease-in-out infinite;
}
@keyframes bigBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}
.topic-intro-title {
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  background: linear-gradient(90deg, #FF6B9D, #C5A55A);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-align: center;
  margin: 8px 0 !important;
}

/* Confetti — more colorful */
.confetti-piece {
  border-radius: 50% !important;
}

/* === Login screen — warm, inviting === */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  background: white !important;
  border-radius: 32px !important;
  padding: 36px 32px !important;
  border: 4px solid #FFE0EF !important;
  box-shadow:
    0 20px 60px rgba(255, 183, 222, 0.3),
    0 0 0 8px rgba(255, 224, 240, 0.4) !important;
  max-width: 440px;
  width: 100%;
  position: relative;
  animation: welcomeZoomIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.login-card::before {
  content: '🌟';
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 1.8rem;
  animation: starTwinkle 2.5s ease-in-out infinite;
}
.login-card::after {
  content: '💖';
  position: absolute;
  top: 18px;
  left: 22px;
  font-size: 1.8rem;
  animation: starTwinkle 2.5s ease-in-out infinite 1.25s;
}

/* Subject menu cards — bigger, illustrated */
.subject-card {
  border-radius: 28px !important;
  padding: 32px 24px !important;
  text-align: center;
}
.subject-card .subject-icon,
.subject-card div:first-child {
  font-size: 4.5rem !important;
  margin-bottom: 12px !important;
  animation: bigBob 2.8s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}
.subject-card h2,
.subject-card .subject-title {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: white !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  letter-spacing: 0.5px;
}
/* Recent-subject pin badge — small, fixed font-size so the parent rule doesn't blow it up */
.subject-recent-badge {
  position: absolute !important;
  top: -10px;
  right: 12px;
  background: #FFD700;
  color: #5C4500 !important;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem !important;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
  border: 2px solid white;
  white-space: nowrap;
  z-index: 5;
  line-height: 1.2;
  animation: none !important;
  text-shadow: none !important;
}

/* Section titles — fun, prominent */
.topic-section-title {
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  background: linear-gradient(90deg, #FF6B9D, #C5A55A);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  margin: 24px 0 16px !important;
  text-align: center;
  position: relative;
}
.topic-section-title::before,
.topic-section-title::after {
  content: '✨';
  margin: 0 12px;
  font-size: 1.2rem;
  -webkit-text-fill-color: initial;
}

/* Exam cards — colorful, prominent */
.exam-card {
  border-radius: 24px !important;
  border: 3px solid white !important;
  box-shadow:
    0 8px 0 rgba(0, 0, 0, 0.08),
    0 14px 28px rgba(0, 0, 0, 0.12) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.exam-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow:
    0 14px 0 rgba(0, 0, 0, 0.1),
    0 22px 36px rgba(0, 0, 0, 0.15) !important;
}
.exam-card-icon {
  font-size: 3rem !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}
.exam-card-title {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
}

/* Quiz/exam progress bar — fancier */
.exam-progress-bar {
  background: rgba(255, 255, 255, 0.5) !important;
  border-radius: 50px !important;
  height: 14px !important;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.exam-progress-fill {
  background: linear-gradient(90deg, #FFD93D, #FF8C42, #FF6B9D) !important;
  border-radius: 50px !important;
  box-shadow: 0 0 20px rgba(255, 140, 66, 0.5);
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Stars/score circles — big and proud */
.exam-score-circle {
  background: linear-gradient(135deg, #FFF9F0, #FFE0EF) !important;
  border: 6px solid var(--grade-color, #FFD93D) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  animation: scoreCirclePulse 2s ease-in-out infinite;
}
@keyframes scoreCirclePulse {
  0%, 100% { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15); }
  50% { box-shadow: 0 12px 40px rgba(255, 217, 61, 0.3); }
}

/* Page transition — slide-in for screen changes */
.welcome-screen,
.subject-menu,
.topic-menu,
.rewards-screen {
  animation: pageJoyEnter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Make every page entrance feel alive */
.lesson-screen {
  animation: pageJoyEnter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pageJoyEnter {
  0% { opacity: 0; transform: translateY(20px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Floating "Ask Boti" button — visible on every screen */
.boti-fab {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 998;
  background: linear-gradient(135deg, #FF6B9D, #C5A55A);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 14px 22px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow:
    0 6px 0 #B33A6E,
    0 14px 32px rgba(255, 107, 157, 0.5),
    0 0 0 4px rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  gap: 8px;
  animation: fabBounce 2.5s ease-in-out infinite;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.boti-fab:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow:
    0 10px 0 #B33A6E,
    0 20px 40px rgba(255, 107, 157, 0.6),
    0 0 0 4px rgba(255, 255, 255, 0.4);
}
.boti-fab:active {
  transform: translateY(2px) scale(0.96);
  box-shadow:
    0 2px 0 #B33A6E,
    0 4px 8px rgba(255, 107, 157, 0.3);
}
.boti-fab-icon { font-size: 1.4rem; }
.boti-fab-label { font-weight: 800; }
@keyframes fabBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@media (max-width: 600px) {
  .boti-fab {
    bottom: 16px;
    left: 16px;
    padding: 12px 18px;
    font-size: 0.95rem;
  }
}

/* Soft AI-usage banner — appears above the header once a user crosses 100 calls/month */
.ai-usage-banner {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #92400E;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  padding: 8px 14px;
  border-bottom: 2px solid #F59E0B;
  direction: rtl;
}
@media (max-width: 600px) {
  .ai-usage-banner { font-size: 0.85rem; padding: 6px 10px; }
}

/* Feedback boxes — bigger, more noticeable */
.feedback {
  font-size: 1.1rem !important;
  padding: 16px 20px !important;
  border-radius: 18px !important;
  font-weight: 700 !important;
  margin-top: 16px !important;
}
.feedback.correct {
  background: linear-gradient(135deg, #D1FAE5, #A7F3D0) !important;
  color: #065F46 !important;
  border: 2px solid #10B981 !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.25) !important;
}
.feedback.encourage {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A) !important;
  color: #92400E !important;
  border: 2px solid #F59E0B !important;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.2) !important;
}