/* Подсказки круга «Слушай» / «Вступаем через 2… 1» / «Пой!» посередине ленты нот (phasecue.js, 2026-11-09).
   Двигаются только transform и opacity, размытия фона нет: под меткой каждый кадр едут ноты. */

/* на ленте вместо #phase показывается .cue; на свёрнутом окне нот (.min-roll) остаётся прежняя метка над пультом */
.dock:not(.min-roll) .roll-wrap.has-cue > .phase { display: none; }

.cue {
  --cue-ring: var(--note, #cfcfd6);
  position: absolute; left: 0; top: 0; z-index: 2; width: max-content; pointer-events: none;
  font-size: clamp(34px, 4.4vw, 58px);
  /* в полоске над нотами; места (--dx/--dy/--ds, --mx/--my/--ms) считает phasecue.js */
  transform: translate(var(--dx, 0px), var(--dy, 0px)) translate(-50%, -50%) scale(var(--ds, .4));
  transition: transform .55s cubic-bezier(.22, .8, .24, 1), opacity .22s ease;
}
.cue.mid { transform: translate(var(--mx, 0px), var(--my, 0px)) translate(-50%, -50%) scale(var(--ms, 1)); }
.cue.off { opacity: 0; }
/* метка стоит наверху самих нот (телефон) — отсчёт проигрыша «Через 5 с» опускается под неё */
.roll-wrap:has(> .cue.in-roll:not(.mid):not(.off)) > .gap-count { transform: translate(-50%, 34px); }

.cue-in {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: .2em .78em .24em; border-radius: 999px; white-space: nowrap;
  font-size: 1em; line-height: 1; font-weight: 700; letter-spacing: -.03em;
  color: var(--text, #f3f0ea); background: rgba(14, 14, 18, .74);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 12px 32px rgba(0, 0, 0, .42);
}
html.spectrum .cue-in { font-family: var(--display); font-weight: 600; letter-spacing: -.045em; }
.cue-t { font: inherit; }
.cue-cap { display: none; font-size: .3em; line-height: 1.25; font-weight: 500; letter-spacing: 0; opacity: .82; }
html.spectrum .cue-cap { font-family: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

/* «Пой!» — светлая таблетка, видна издалека; запись — красная */
.cue.sing { --cue-ring: var(--accent, #f3f0ea); }
.cue.sing .cue-in {
  background: var(--accent, #f3f0ea); color: var(--ink, #111);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 12px 34px rgba(0, 0, 0, .45);
}
.cue.rec { --cue-ring: var(--miss, #ff5d5d); }
.cue.rec .cue-in { background: var(--miss, #ff5d5d); color: var(--ink, #111); animation: rec-pulse 1.2s ease-in-out infinite; }

/* отсчёт: подпись сверху, большая цифра */
.cue.count { --cue-ring: var(--accent, #f3f0ea); }
.cue.count .cue-in { border-radius: .4em; padding: .26em .62em .18em; background: rgba(14, 14, 18, .8); }
.cue.count .cue-cap { display: block; margin-bottom: .1em; }
.cue.count .cue-t { font-size: 1.32em; line-height: .96; font-variant-numeric: tabular-nums; }

/* волны: невидимы, пока их не запустит phasecue.js (burst) */
.cue-ring {
  position: absolute; inset: 0; border-radius: 999px; opacity: 0;
  border: 3px solid var(--cue-ring); box-shadow: 0 0 22px -2px var(--cue-ring);
}
.cue.count .cue-ring { border-radius: .4em; }
/* «Пой!» в полоске: мягкий пульс, пока идёт круг */
.cue.sing:not(.mid):not(.off) .cue-ring + .cue-ring { animation: cue-beat 1.7s cubic-bezier(.2, .7, .3, 1) .6s infinite; }
@keyframes cue-beat {
  0% { transform: scale(1); opacity: .75; }
  70%, 100% { transform: scale(var(--bx, 1.2), var(--by, 1.6)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cue { transition: opacity .2s ease; }
  .cue-ring { display: none; }
  .cue.rec .cue-in { animation: none; }
}
html.lite .cue { transition: opacity .2s ease; }
html.lite .cue-ring { display: none; }