/* ============================================================
   HanziLearn – E-Learning Stylesheet
   ============================================================ */

/* ── Learn Header ────────────────────────────────────────────── */
.learn-header {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  padding: 2rem 0 0;
  position: relative;
}
/* Coloured top bar — colour injected by JS via --lc on #learnHeader */
.learn-header::before {
  content: '';
  position: absolute; top:0; left:0; right:0; height:3px;
  background: var(--lc, var(--accent));
}

.learn-badge {
  display:inline-flex; align-items:center;
  background: var(--lc, var(--accent));
  color:#fff; font-family:var(--mono-font); font-size:.85rem;
  font-weight:700; padding:.4rem .9rem; border-radius:999px;
}

.learn-title   { font-size:1.5rem; font-weight:700; }
.learn-subtitle { font-size:.85rem; color:var(--text-muted); }

.learn-user-chip {
  background:var(--bg-base); border:1px solid var(--border);
  border-radius:999px; padding:.35rem 1rem;
  font-size:.85rem; color:var(--text-muted);
}

/* ── Mode Tabs ───────────────────────────────────────────────── */
.mode-tabs {
  display:flex; gap:.25rem; overflow-x:auto; padding-bottom:0;
}
.mode-tabs::-webkit-scrollbar { height:0; }

.mode-tab {
  padding:.6rem 1.2rem; border-radius:10px 10px 0 0;
  font-size:.875rem; font-weight:500; color:var(--text-muted);
  text-decoration:none; white-space:nowrap;
  border:1px solid transparent; border-bottom:none;
  transition:all .2s;
}
.mode-tab:hover { color:var(--text-primary); background:rgba(255,255,255,.04); }
.mode-tab.active {
  color:var(--text-primary); background:var(--bg-base);
  border-color:var(--border);
}

/* ── Level Strip ─────────────────────────────────────────────── */
.level-strip {
  background:var(--bg-base); border-bottom:1px solid var(--border);
  padding:.75rem 0;
}
.level-pill {
  font-family:var(--mono-font); font-size:.8rem; font-weight:600;
  padding:.3rem .75rem; border-radius:999px;
  border:1.5px solid var(--border); color:var(--text-muted);
  text-decoration:none; transition:all .2s; white-space:nowrap;
}
.level-pill:hover { border-color:var(--accent); color:var(--accent); }
.level-pill.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ── Loading Spinner ─────────────────────────────────────────── */
.learn-spinner {
  width:48px; height:48px;
  border:3px solid var(--border); border-top-color:var(--accent);
  border-radius:50%; animation:spin .8s linear infinite; margin:0 auto;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ════════════════════════════════════════════════════════════
   FLASHCARD – 3-D flip animation
   ════════════════════════════════════════════════════════════ */

.fc-progress-wrap { max-width:520px; margin:0 auto; }

/*
  .fc-scene   — sets up the 3-D perspective container
  .fc-card    — the card that actually rotates
  .fc-front / .fc-back  — the two faces (back is pre-rotated 180°)
  Adding .flipped to .fc-card triggers the flip.
*/
.fc-scene {
  width:100%; max-width:420px; height:300px;
  perspective: 1200px;          /* depth of 3-D space        */
  cursor:pointer; margin:0 auto;
  outline:none;                 /* handled by card border     */
}

.fc-card {
  position:relative; width:100%; height:100%;
  transform-style: preserve-3d;          /* children exist in 3-D  */
  transition: transform .65s cubic-bezier(.4, 0, .2, 1);
  border-radius:20px;
}

/* Click/keyboard — JS toggles this class */
.fc-card.flipped {
  transform: rotateY(180deg);
}

.fc-front,
.fc-back {
  position:absolute; inset:0;
  backface-visibility: hidden;          /* hide face when rotated away */
  -webkit-backface-visibility: hidden;
  border-radius:20px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:2rem; text-align:center;
}

/* Front face */
.fc-front {
  background: var(--bg-elevated);
  border:2px solid var(--border);
}

/* Back face — pre-rotated 180° so it faces backward initially */
.fc-back {
  background: linear-gradient(135deg, rgba(230,57,70,.08), var(--bg-elevated));
  border:2px solid rgba(230,57,70,.25);
  transform: rotateY(180deg);
}

/* Hover hint on front */
.fc-scene:hover .fc-front:not(.fc-card.flipped .fc-front) {
  border-color:rgba(230,57,70,.3);
}

.fc-hanzi {
  font-family:var(--hanzi-font); font-size:4rem;
  font-weight:700; color:var(--accent); line-height:1;
}
.fc-hanzi--sm { font-size:2.5rem; }

.fc-tap-hint { margin-top:1rem; color:var(--text-muted); font-size:.8rem; }

.fc-pinyin {
  font-family:var(--mono-font); font-size:1.1rem;
  color:var(--text-muted); margin:.5rem 0;
}

.fc-topic {
  font-size:.75rem; color:var(--text-muted);
  background:rgba(255,255,255,.06); border:1px solid var(--border);
  border-radius:999px; padding:.15rem .6rem; margin-bottom:.5rem;
}

.fc-divider { width:40px; height:2px; background:var(--border); margin:.75rem 0; }

.fc-meaning { font-size:.95rem; color:var(--text-primary); margin-bottom:.2rem; }
.fc-meaning--vi { color:var(--text-muted); font-size:.85rem; }

.btn-icon {
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:0;
}

/* ════════════════════════════════════════════════════════════
   QUIZ MODE
   ════════════════════════════════════════════════════════════ */
.quiz-timer {
  font-family:var(--mono-font); font-size:1.5rem; font-weight:700;
  color:var(--accent); min-width:48px; text-align:center; transition:color .3s;
}
.quiz-timer.urgent { color:#F44336; animation:pulse .5s ease-in-out infinite alternate; }
@keyframes pulse { from{opacity:1} to{opacity:.4} }

.quiz-question-card {
  background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:2.5rem; text-align:center;
  max-width:480px; margin:0 auto;
}
.quiz-hanzi { font-family:var(--hanzi-font); font-size:3.5rem; font-weight:700; color:var(--accent); line-height:1; }
.quiz-pinyin { font-family:var(--mono-font); color:var(--text-muted); margin-top:.5rem; }

.quiz-options {
  display:grid; grid-template-columns:1fr 1fr; gap:.75rem;
  max-width:480px; margin:0 auto;
}
.quiz-option {
  background:var(--bg-elevated); border:2px solid var(--border);
  border-radius:var(--radius); padding:1rem; cursor:pointer;
  transition:all .2s; font-size:.95rem; text-align:center;
  color:var(--text-primary);
}
.quiz-option:hover:not(:disabled) { border-color:var(--accent); background:var(--accent-soft); }
.quiz-option.correct { border-color:#4CAF50; background:rgba(76,175,80,.12); color:#4CAF50; }
.quiz-option.wrong   { border-color:#F44336; background:rgba(244,67,54,.12); color:#F44336; }
.quiz-option:disabled { cursor:default; opacity:.7; }

.result-emoji    { font-size:4rem; }
.result-score-wrap {
  display:inline-block; background:var(--bg-elevated);
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem 3rem;
}
.result-score   { font-family:var(--mono-font); font-size:2.5rem; font-weight:700; color:var(--accent); }
.result-percent { font-size:1rem; color:var(--text-muted); }

/* ════════════════════════════════════════════════════════════
   FILL BLANK MODE
   ════════════════════════════════════════════════════════════ */
.fb-exercise-card {
  background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:2rem;
  max-width:600px; margin:0 auto;
}
.fb-context { font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:1rem; }
.fb-sentence { font-family:var(--hanzi-font); font-size:1.8rem; color:var(--text-primary); line-height:1.6; margin-bottom:.75rem; }
.fb-blank { display:inline-block; min-width:80px; border-bottom:3px solid var(--accent); color:var(--accent); font-weight:700; text-align:center; padding:0 .5rem; }
.fb-hint  { font-family:var(--mono-font); font-size:.85rem; color:var(--text-muted); }

.fb-input {
  background:var(--bg-elevated); border:2px solid var(--border);
  border-radius:var(--radius); color:var(--text-primary);
  font-size:1.1rem; font-family:var(--hanzi-font);
}
.fb-input:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
  background:var(--bg-elevated); color:var(--text-primary);
}

.fb-feedback {
  max-width:480px; padding:.75rem 1rem; border-radius:var(--radius); font-weight:600;
}
.fb-feedback.correct { background:rgba(76,175,80,.12); border:1px solid rgba(76,175,80,.3); color:#4CAF50; }
.fb-feedback.wrong   { background:rgba(244,67,54,.12); border:1px solid rgba(244,67,54,.3); color:#F44336; }
.fb-translation { font-size:.85rem; color:var(--text-muted); font-style:italic; max-width:480px; margin-top:.5rem; }

/* ════════════════════════════════════════════════════════════
   LEADERBOARD MODE
   ════════════════════════════════════════════════════════════ */
.lb-card {
  background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.5rem;
}
.lb-card-title {
  font-size:1rem; font-weight:700; margin-bottom:1.25rem;
  padding-bottom:.75rem; border-bottom:1px solid var(--border);
}
.lb-item {
  display:flex; align-items:center; gap:1rem;
  padding:.75rem 0; border-bottom:1px solid rgba(255,255,255,.04);
  transition:all .2s;
}
.lb-item:last-child { border-bottom:none; }
.lb-item:hover { padding-left:.25rem; }

.lb-rank { font-family:var(--mono-font); font-size:.85rem; color:var(--text-muted); width:24px; text-align:center; flex-shrink:0; }
.lb-rank.gold   { color:#FFD700; font-weight:700; font-size:1rem; }
.lb-rank.silver { color:#C0C0C0; font-weight:700; }
.lb-rank.bronze { color:#CD7F32; font-weight:700; }

.lb-avatar {
  width:36px; height:36px; border-radius:50%;
  background:var(--accent-soft); border:1.5px solid rgba(230,57,70,.2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--hanzi-font); font-size:.9rem; color:var(--accent); flex-shrink:0;
}
.lb-name  { flex:1; font-weight:500; font-size:.9rem; }
.lb-score { font-family:var(--mono-font); font-size:.85rem; color:var(--accent); font-weight:600; }

.lb-my-stats {
  background:var(--bg-elevated);
  border:1px solid rgba(230,57,70,.2); border-radius:var(--radius-lg); padding:1.5rem;
}
.my-stat-card { background:var(--bg-base); border-radius:var(--radius); padding:1.25rem; text-align:center; }
.my-stat-val  { font-family:var(--mono-font); font-size:1.75rem; font-weight:700; color:var(--accent); }
.my-stat-label { font-size:.8rem; color:var(--text-muted); margin-top:.25rem; }