/* ═══════════════════════════════════════════════════════════════
   animations.css — confetti, counters, streaks, transitions, toasts
   ═══════════════════════════════════════════════════════════════ */

/* ── Screen transitions ── */
.screen.screen-enter{ animation: screenFadeSlide .38s cubic-bezier(.16,1,.3,1); }
@keyframes screenFadeSlide{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ── Confetti ── */
.confetti-container{ position:fixed; inset:0; pointer-events:none; z-index:99998; overflow:hidden; }
.confetti-piece{
  position:absolute; width:9px; height:14px; border-radius:2px;
  opacity:0; animation:confettiFly 1.3s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes confettiFly{
  0%{ opacity:1; transform:translate(0,0) rotate(0deg); }
  85%{ opacity:1; }
  100%{ opacity:0; transform:translate(var(--dx),calc(var(--dy) + 260px)) rotate(var(--rot)); }
}

/* ── Streak flame ── */
.streak-badge{ display:inline-flex; align-items:center; gap:.3rem; background:var(--card);
  border:1px solid var(--border); border-radius:20px; padding:.35rem .8rem; font-size:.85rem; }
.streak-flame{ font-size:1.05rem; display:inline-block; filter:grayscale(.3); }
.streak-num{ font-weight:700; color:var(--text); }
.flame-warm{ filter:none; animation:flamePulse 2s ease-in-out infinite; }
.flame-hot{ filter:none; animation:flamePulse 1.4s ease-in-out infinite; }
.flame-epic{ filter:none; animation:flamePulse 1s ease-in-out infinite; }
@keyframes flamePulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.22); }
}

/* ── Toasts ── */
.toast-host{ position:fixed; top:1rem; left:50%; transform:translateX(-50%);
  z-index:99999; display:flex; flex-direction:column; gap:.5rem; align-items:center; pointer-events:none; }
.toast{
  background:#0d1f3c; border:1.5px solid var(--border); border-radius:10px;
  padding:.65rem 1.1rem; font-size:.88rem; color:var(--text);
  box-shadow:0 8px 28px rgba(0,0,0,.5); opacity:0; transform:translateY(-14px);
  transition:opacity .25s, transform .25s; max-width:90vw;
}
.toast-show{ opacity:1; transform:translateY(0); }
.toast-error{ border-color:var(--wrong); color:#fca5a5; }
.toast-success{ border-color:var(--correct); color:#86efac; }
.toast-info{ border-color:var(--blue); }

/* ── Ripple ── */
.btn, .topic-card, .type-card, .count-card{ position:relative; overflow:hidden; }
.ripple{
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.5); transform:translate(-50%,-50%) scale(0);
  animation:rippleGrow .6s ease-out forwards; pointer-events:none;
}
@keyframes rippleGrow{
  to{ transform:translate(-50%,-50%) scale(22); opacity:0; }
}

/* ── Correct/wrong pulse ── */
.pulse-correct{ animation:pulseGreen .5s ease; }
.pulse-wrong{ animation:pulseRed .5s ease; }
@keyframes pulseGreen{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.5); }
  100%{ box-shadow:0 0 0 14px rgba(34,197,94,0); }
}
@keyframes pulseRed{
  0%{ box-shadow:0 0 0 0 rgba(239,68,68,.5); }
  100%{ box-shadow:0 0 0 14px rgba(239,68,68,0); }
}

/* ── Skeleton loading ── */
.skeleton-row{ height:52px; border-radius:10px; overflow:hidden; margin-bottom:.6rem;
  background:rgba(255,255,255,.04); position:relative; }
.skeleton-shimmer{
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation:shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(100%); }
}

/* ── Due badge on topic cards ── */
.due-badge{
  position:absolute; top:.7rem; right:.7rem; background:var(--accent); color:#000;
  font-size:.68rem; font-weight:800; padding:.15rem .5rem; border-radius:20px;
  animation:dueBadgeIn .3s ease;
}
@keyframes dueBadgeIn{
  from{ transform:scale(0); }
  to{ transform:scale(1); }
}

/* ── Progress dashboard ── */
.dash-header{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; }
.dash-stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:2rem; }
.dash-stat-card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1.25rem; text-align:center; }
.dash-stat-num{ font-family:'Playfair Display',serif; font-size:2rem; font-weight:700; color:var(--accent); }
.dash-stat-label{ font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:.3rem; }
.dash-topic-row{ display:flex; align-items:center; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--border); }
.dash-topic-name{ flex:1; font-size:.9rem; }
.dash-bar-wrap{ flex:2; height:8px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; }
.dash-bar-fill{ height:100%; border-radius:4px; transition:width .6s cubic-bezier(.16,1,.3,1); }
.dash-topic-pct{ width:44px; text-align:right; font-size:.82rem; color:var(--muted); }
.rename-input{ background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:8px;
  padding:.4rem .7rem; color:var(--text); font-size:.85rem; }

/* ── Exam mode ── */
.exam-timer{ font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; color:var(--accent);
  background:var(--card); border:2px solid var(--border); border-radius:10px; padding:.4rem 1rem; }
.exam-timer.timer-low{ color:var(--wrong); border-color:var(--wrong); animation:flamePulse 1s ease-in-out infinite; }
.exam-topic-tag{ font-size:.72rem; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.4rem; }

/* ── Home button in header ── */
.dash-nav-btn{ background:var(--card); border:1px solid var(--border); color:var(--text);
  padding:.45rem .9rem; border-radius:8px; cursor:pointer; font-size:.82rem; transition:background .15s; }
.dash-nav-btn:hover{ background:var(--card-hover); }