/* ─── Base ─── */
* { -webkit-tap-highlight-color: transparent; }

/* ─── Bottom nav active ─── */
.nav-btn.active { color: #4f46e5; }
.nav-btn.active span { color: #4f46e5; }

/* ─── Timer ring ─── */
.timer-ring { transition: stroke-dashoffset 1s linear; }
.timer-text { font-variant-numeric: tabular-nums; }

/* ─── Pet pulse ─── */
@keyframes soft-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.pet-pulse { animation: soft-pulse 3s ease-in-out infinite; }

/* ─── Fade transitions ─── */
.view-enter {
  animation: fade-up 0.25s ease-out both;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Quiz card flip ─── */
.quiz-card {
  transition: opacity 0.2s, transform 0.2s;
}

/* ─── Custom range slider ─── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4f46e5;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(79,70,229,0.3);
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }