/* ---------- тест голоса на главной (range.js): две ноты — и какие песни вам по голосу ---------- */
/* Блок одет так же, как живая строка «Так будет выглядеть ваша песня» (alive.css): карточка, слева слова, справа сцена */
.vr {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: center;
  margin: 0 0 32px; padding: 24px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface);
  position: relative; isolation: isolate; overflow: hidden;
}
/* тёплый отсвет из угла — эхо ауры наверху; пока идёт тест, он чуть ярче */
.vr::before {
  content: ""; position: absolute; z-index: -1; inset: -40% auto auto -20%; width: 70%; height: 140%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(217, 64, 143, .14), transparent); transition: opacity .6s ease;
  opacity: .7;
}
.vr:is([data-state="low"], [data-state="high"])::before { opacity: 1; }

.vr-kicker { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
.vr-title { margin: 0 0 10px; font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.vr-say { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.5; min-height: 3em; }
/* подбадривание, пока тает полоска: фраза ярче и каждый раз чуть вспыхивает */
.vr-say.cheer { color: var(--text); animation: vr-cheer .35s cubic-bezier(.2, .8, .3, 1.2); }
@keyframes vr-cheer { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* шаги: какие ноты уже пойманы */
.vr-steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.vr-step {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 4px; border-radius: 99px;
  background: var(--glass); color: var(--muted); font-size: 13px; transition: background-color .25s ease, color .25s ease;
}
.vr-step i {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 600 12px/1 var(--mono); font-style: normal;
  background: var(--glass-2); color: var(--text); transition: background-color .25s ease, color .25s ease;
}
.vr-step .ro-pill { transition: background-color .25s ease; }
.vr-step .vr-empty { background: transparent; color: var(--faint); }
.vr[data-state="low"] .vr-step[data-s="low"], .vr[data-state="high"] .vr-step[data-s="high"] { background: var(--glass-2); color: var(--text); }
.vr[data-state="low"] .vr-step[data-s="low"] i, .vr[data-state="high"] .vr-step[data-s="high"] i { background: var(--text); color: var(--ink); }
.vr[data-state="idle"] .vr-steps, .vr[data-state="done"] .vr-steps { display: none; }

/* сколько осталось ждать до следующего шага: полоска тает за 3 с */
.vr-wait { height: 2px; margin: 0 0 14px; border-radius: 2px; background: transparent; overflow: hidden; }
.vr-wait i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--aura); }
.vr-wait.go i { width: 100%; animation: vr-wait 3s linear forwards; }
@keyframes vr-wait { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.vr[data-state="idle"] .vr-wait, .vr[data-state="done"] .vr-wait { display: none; }
.vr-buttons .btn svg { width: 16px; height: 16px; }
.vr [hidden] { display: none !important; }

/* ---------- сцена ---------- */
.vr-stage { min-width: 0; padding: 14px 14px 10px; border-radius: 16px; background: var(--bg); }
.vr-plot { position: relative; padding-top: 30px; }

/* полоса нот: каждая клетка — нота в своём цвете, как под слогами; черные клавиши темнее */
.vr-keys { position: relative; z-index: 1; display: flex; gap: 2px; height: 30px; }
.vr-k {
  flex: 1 1 0; min-width: 0; border-radius: 3px; background: var(--nc); opacity: .2;
  transition: opacity .35s ease, transform .2s ease, box-shadow .2s ease;
}
.vr-k.b { opacity: .12; transform: scaleY(.66); transform-origin: bottom; }
.vr-k.in { opacity: .85; }
.vr-k.b.in { opacity: .6; }
.vr-k.on { opacity: 1; transform: scaleY(1.18); transform-origin: bottom; box-shadow: 0 0 14px var(--nc); }

/* «ваш голос» — светящаяся черта над полосой с названием ноты; пока нота держится, свет разгорается (--p) */
.vr-voice {
  position: absolute; z-index: 3; top: 0; left: 50%; height: 64px; width: 0; pointer-events: none;
  opacity: 0; transition: left .12s linear, opacity .25s ease;
}
.vr[data-state="idle"] .vr-voice { transition: left .38s cubic-bezier(.3, .7, .3, 1), opacity .25s ease; }
.vr-voice.show { opacity: 1; }
.vr-voice::after {
  content: ""; position: absolute; top: 24px; bottom: 0; left: -1px; width: 2px; border-radius: 2px;
  background: linear-gradient(#fff, rgba(255, 255, 255, .15));
}
.vr-voice .ro-pill {
  position: absolute; top: 0; left: 0; transform: translateX(-50%); white-space: nowrap;
  box-shadow: 0 0 calc(4px + 20px * var(--p, 0)) calc(2px * var(--p, 0)) var(--nc);
  transition: background-color .12s ease, box-shadow .15s ease;
}
.vr[data-state="done"] .vr-voice { display: none; }

/* столбец голоса: от низкой ноты до высокой, через полосу и все песни */
.vr-band {
  position: absolute; z-index: 0; top: 26px; bottom: -4px; left: 50%; width: 0; border-radius: 10px;
  background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); opacity: 0;
  transition: left .55s cubic-bezier(.2, .7, .2, 1), width .55s cubic-bezier(.2, .7, .2, 1), opacity .4s ease;
}
.vr.has-band .vr-band { opacity: 1; }

/* подписи октав и метки пойманных нот под полосой */
.vr-under { position: relative; z-index: 2; height: 26px; margin-top: 6px; }
.vr-under > span:not(.vr-pin) { position: absolute; top: 4px; transform: translateX(-50%); font: 500 11px/1 var(--mono); color: var(--faint); }
.vr.has-band .vr-under > span:not(.vr-pin) { opacity: .5; }
.vr-under > span.off { opacity: 0 !important; }
.vr-pin { position: absolute; top: 0; transform: translateX(-50%); opacity: 0; transition: left .3s ease, opacity .25s ease; }
.vr-pin.show { opacity: 1; }
.vr-pin .ro-pill { display: block; font-size: 13px; padding: 2px 8px; box-shadow: 0 0 0 3px var(--bg); }
/* пойманная нота встаёт всплеском и кольцом */
.vr-pin.pop .ro-pill { animation: vr-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
.vr-pin.pop::after {
  content: ""; position: absolute; inset: -2px; border-radius: 9px; pointer-events: none;
  animation: vr-ring .7s ease-out forwards; box-shadow: 0 0 0 0 rgba(255, 255, 255, .55);
}
@keyframes vr-pop { from { transform: scale(.5); } }
@keyframes vr-ring { to { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } }

/* ---------- песни: полоска от самой низкой ноты партии до самой высокой ---------- */
/* «Здесь будут названия ваших песен» — пока своих нет, ниже известные песни для примера */
.vr-cap { position: relative; z-index: 1; margin: 6px 0 2px; font-size: 12px; font-weight: 500; color: var(--muted); }
.vr-songs { position: relative; z-index: 1; display: grid; gap: 2px; margin-top: 4px; }
.vr-song {
  display: grid; gap: 3px; padding: 3px 0 4px; color: inherit; text-decoration: none; border-radius: 8px;
}
a.vr-song:hover .vr-name { color: var(--text); }
.vr-line { display: flex; gap: 10px; align-items: baseline; min-width: 0; font-size: 13px; }
.vr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); transition: color .2s ease; }
.vr-name small { margin-left: 6px; font-size: 12px; color: var(--faint); }
.vr-verdict { flex: none; font-size: 12px; font-weight: 600; opacity: 0; transform: translateX(6px); transition: opacity .3s ease, transform .3s ease; }
.vr-track { position: relative; display: block; height: 7px; }
.vr-ghost, .vr-bar { position: absolute; top: 0; height: 100%; border-radius: 99px; }
.vr-ghost { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); opacity: 0; transition: opacity .4s ease; }
.vr-bar {
  display: flex; justify-content: space-between; overflow: hidden;
  background: linear-gradient(90deg, var(--c1), var(--c2)); opacity: .55; filter: saturate(.75);
  transition: left .8s cubic-bezier(.2, .7, .2, 1), opacity .4s ease, filter .4s ease;
}
/* куски, которые торчат за голос, — красной штриховкой */
.vr-out { display: block; height: 100%; width: 0; background: repeating-linear-gradient(-45deg, var(--miss) 0 3px, rgba(16, 16, 18, .85) 3px 6px); }

.vr.judged .vr-verdict { opacity: 1; transform: none; transition-delay: calc(var(--d) * 110ms + 350ms); }
.vr.judged .vr-bar { opacity: 1; filter: none; transition-delay: 0s, calc(var(--d) * 110ms), calc(var(--d) * 110ms); }
.vr.judged .vr-song.moved .vr-ghost { opacity: 1; transition-delay: calc(var(--d) * 110ms + 300ms); }
.vr.judged .vr-name { color: var(--text); }
.vr-song.v-ok .vr-verdict { color: var(--hit); }
.vr-song.v-shift .vr-verdict { color: var(--close); }
.vr-song.v-train .vr-verdict { color: var(--miss); }
.vr-song.v-train .vr-bar { opacity: .75; }
/* при появлении результата песни встают по очереди */
.vr.reveal .vr-song { animation: vr-rise .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d) * 110ms); }
@keyframes vr-rise { from { opacity: .3; transform: translateY(4px); } }

.vr-note { margin: 10px 0 0; font-size: 12px; color: var(--faint); }
.vr-note:empty { display: none; }

/* подпись на карточке песни в «Моих песнях» */
.chip.vr-chip.v-ok { color: var(--hit); }
.chip.vr-chip.v-shift { color: var(--close); }
.chip.vr-chip.v-train { color: var(--miss); }

@media (max-width: 860px) {
  .vr { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .vr-say { min-height: 0; }
}
@media (max-width: 520px) {
  .vr-keys { gap: 1px; height: 26px; }
  .vr-k { border-radius: 2px; }
  .vr-name small { display: none; }
  /* до результата места хватает: у известной песни без исполнителя не понять, чья она */
  .vr:not(.judged) .vr-name small { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .vr-pin.pop .ro-pill, .vr-pin.pop::after, .vr.reveal .vr-song, .vr-wait.go i { animation: none; }
  .vr-bar, .vr-band, .vr-voice, .vr-k { transition: none; }
  .vr-say.cheer { animation: none; }
}