/* MgcPlayhead — karaoke spotlight + growing progress line. Duolingo-style:
   chunky cards, bouncy motion, Nunito (inherited). All classes prefixed ph-. */

/* --- per-note spotlight: the "now play this" note, shown BIG --- */
.ph-spot{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:10px auto 2px; padding:8px 20px; max-width:360px;
  background:#fff; border:3px solid var(--blue); border-radius:20px;
  box-shadow:0 4px 0 var(--blue-dark);
}
.ph-spot-note{
  font-size:50px; font-weight:900; color:var(--blue-dark); line-height:1.1;
  animation:ph-pulse 1.8s ease-in-out infinite;
}
.ph-spot-hint{font-size:15px; font-weight:800; color:var(--gray); line-height:1.35;}
@keyframes ph-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}

/* --- growing progress line --- */
.ph-wrap{margin:10px 6px 4px;}
.ph-count{
  text-align:center; font-weight:800; font-size:14px; color:var(--gray);
  margin-bottom:6px;
}
.ph-track{
  position:relative; height:16px; background:#e8e0cf; border-radius:999px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.12);
}
.ph-fill{
  position:absolute; left:0; top:0; bottom:0; width:0; border-radius:999px;
  background:linear-gradient(180deg,#8be400,var(--green));
  box-shadow:0 3px 0 var(--green-dark);
  transition:width .55s cubic-bezier(.34,1.56,.64,1); /* bouncy overshoot */
}
/* the sloth rides the leading edge of the line */
.ph-dot{
  position:absolute; top:50%; left:0; transform:translate(-50%,-58%);
  font-size:26px; line-height:1; pointer-events:none;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));
  transition:left .55s cubic-bezier(.34,1.56,.64,1);
}
/* celebration: full bar does a happy bounce on the finish screen */
.ph-track.ph-done{animation:ph-win .55s ease 2;}
@keyframes ph-win{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

@media (prefers-reduced-motion:reduce){
  .ph-spot-note{animation:none;}
  .ph-fill,.ph-dot{transition:none;}
  .ph-track.ph-done{animation:none;}
}