/* ============================================================
   PLAYER — оболочка урока/теста, сцена шагов, таймлайны.
   ============================================================ */

.player { max-width: 860px; margin: 0 auto; padding-block: var(--s-4) var(--s-7); }

.player-top { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
.back-btn {
  width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid var(--hairline);
  display: grid; place-items: center; color: var(--text-soft); background: var(--bg-1);
  transition: .18s; flex: none; cursor: pointer; font-size: 20px; line-height: 1;
}
.back-btn:active { transform: scale(.94); }
@media (hover: hover) { .back-btn:hover { background: var(--bg-2); color: var(--text); } }

.deck-head { text-align: center; margin-bottom: var(--s-5); }
.deck-head .pill { margin-bottom: var(--s-3); }
.deck-head h1 { font-size: clamp(25px, 6.4vw, 50px); margin: 0 0 8px; animation: rise .5s ease both; }
.lesson-sub { font-size: 17px; font-weight: 600; color: var(--accent); animation: rise .5s .05s ease both; }
@media (min-width: 720px) { .lesson-sub { font-size: 20px; } }

/* ---------- сцена ---------- */
.stage { position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; }
.step { width: 100%; }
.step.in { animation: cardIn .45s cubic-bezier(.2,.7,.2,1) both; }
.step.back.in { animation-name: cardInBack; }
@media (min-width: 720px) { .stage { min-height: 440px; } }

@keyframes cardIn     { from { opacity: 0; transform: translateX(28px) } to { opacity: 1; transform: none } }
@keyframes cardInBack { from { opacity: 0; transform: translateX(-28px) } to { opacity: 1; transform: none } }
@keyframes rise       { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }

.fade-seq > * { animation: rise .5s ease both; }
.fade-seq > *:nth-child(1) { animation-delay: .05s } .fade-seq > *:nth-child(2) { animation-delay: .12s }
.fade-seq > *:nth-child(3) { animation-delay: .19s } .fade-seq > *:nth-child(4) { animation-delay: .26s }
.fade-seq > *:nth-child(5) { animation-delay: .33s } .fade-seq > *:nth-child(6) { animation-delay: .40s }

/* ---------- управление ---------- */
.controls {
  display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5);
  position: sticky; bottom: 0; z-index: 20;
  padding: var(--s-3) 0 calc(var(--s-3) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 62%, transparent);
}
.nav-btn {
  flex: 1; min-height: var(--tap); padding: 14px 16px;
  border-radius: var(--r-md); border: 1px solid var(--hairline);
  background: var(--bg-1); color: var(--text); font-size: 15px; font-weight: 600;
  cursor: pointer; transition: .16s; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.nav-btn:disabled { opacity: .35; cursor: default; }
.nav-btn:active:not(:disabled) { transform: scale(.98); }
.nav-btn.primary { background: var(--accent); border-color: transparent; color: var(--on-accent); }
@media (hover: hover) {
  .nav-btn:hover:not(:disabled) { background: var(--bg-2); border-color: var(--hairline-2); }
  .nav-btn.primary:hover { filter: brightness(1.08); }
}
@media (min-width: 720px) {
  .controls { position: static; padding: 0; background: none; margin-top: var(--s-6); }
}

.step-dots { display: flex; gap: 6px; justify-content: center; margin-top: var(--s-4); flex-wrap: wrap; }
.step-dots i { width: 20px; height: 4px; border-radius: 3px; background: var(--bg-3); cursor: pointer; transition: .25s; }
.step-dots i.on { background: var(--accent); }
.step-dots i.done { background: color-mix(in oklab, var(--accent) 55%, var(--bg-3)); }

.khint {
  display: none;
  text-align: center; font-family: var(--font-mono); font-size: 11px;
  color: var(--text-faint); margin-top: var(--s-4); letter-spacing: .05em;
}
@media (min-width: 900px) and (hover: hover) { .khint { display: block; } }

/* ============================================================
   ТАЙМЛАЙН (анимированный SVG)
   ============================================================ */
.tl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 8px 0 0; }
.tl-scroll::-webkit-scrollbar { display: none; }
.tl { display: block; width: 100%; min-width: 460px; max-width: 720px; margin: 0 auto; overflow: visible; }
.tl .axis-line { stroke: var(--hairline-2); stroke-width: 2; }
.tl .glow { animation: nowpulse 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes nowpulse { 0%, 100% { opacity: .35 } 50% { opacity: .8 } }
.tl .nowdot { stroke: var(--c-now); stroke-width: 2; stroke-dasharray: 2 4; }
.tl .lbl-now { fill: var(--c-now); font-family: var(--font-mono); font-size: 15px; letter-spacing: 3px; }
.tl .lbl-end { fill: var(--text-faint); font-family: var(--font-mono); font-size: 13px; letter-spacing: 3px; }
.tl .cap { font-family: var(--font-mono); font-size: 16px; }
.tl .axis-head { fill: var(--hairline-2); }

/* ось шире экрана: сжимаем меньше, а подписи наоборот увеличиваем,
   иначе после масштабирования SVG они превращаются в пыль */
@media (max-width: 560px) {
  .tl { min-width: 420px; }
  .tl .lbl-now { font-size: 20px; letter-spacing: 2px; }
  .tl .lbl-end { font-size: 17px; letter-spacing: 2px; }
  .tl .cap { font-size: 20px; }
}

.tl .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1s .15s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.tl .pop {
  opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center;
  animation: pop .4s ease forwards;
}
@keyframes pop { to { opacity: 1; transform: scale(1); } }
.tl .checkmark { opacity: 0; animation: fadein .4s .9s forwards; }
@keyframes fadein { to { opacity: 1; } }