/* ---------- шторки (мобайл: слайд снизу) ---------- */

.sheet {
  --drag: 1; /* здесь шторка едет снизу — её можно тянуть; на десктопе флаг снимают */
  position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-start;
  background: var(--bg); overflow: hidden;
  transform: translateY(100%); transition: transform var(--dur-sheet) var(--ease);
}
.sheet--open { transform: translateY(0); }
/* Пока тянут пальцем, шторкой правит жест — переход только мешал бы. */
.sheet--drag { transition: none; }
/* Ручка жеста. touch-action обязателен: иначе браузер заберёт вертикаль себе. */
.sheet__head, .art { touch-action: none; }
.sheet__bg { position: absolute; inset: 0; }
.sheet__body { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; padding: var(--pad-t) var(--gutter) max(30px, calc(var(--safe-b) + 14px)); }
.sheet--premium .sheet__body {
  padding: var(--pad-t) var(--gutter) max(28px, calc(var(--safe-b) + 14px));
  overflow-y: auto; scrollbar-width: none;
}
.sheet--premium .sheet__body::-webkit-scrollbar { display: none; }
.sheet--premium .hero, .sheet--premium .perks, .sheet--premium .plans, .sheet--premium .cta { flex: none; }
.sheet--lyrics .sheet__body { padding: var(--pad-t) 0 max(30px, calc(var(--safe-b) + 14px)); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 24px; }
.sheet--lyrics .sheet__head { padding: 0 var(--gutter) 20px; }
.sheet__head--end { justify-content: flex-end; padding-bottom: 6px; }
.sheet__title { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sheet__title i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--t3); }
.sheet__title b { font-size: 13px; font-weight: 700; }
.sheet__title--track b { font-size: 13px; }
.sheet__title--track i { font-size: 11px; font-weight: 500; letter-spacing: normal; color: var(--t3); text-transform: none; }

/* Подложка плеера — синий градиент, тающий в фон (как тонировка Spotify) */
#sheet-player .sheet__bg { background: linear-gradient(180deg, #24447f 0%, #16265c 34%, var(--bg) 78%); }
.sheet__bg--blur { filter: blur(64px); opacity: 0.7; transform: scale(1.4); }
.sheet__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.72) 0%, rgba(var(--bg-rgb), 0.5) 40%, rgba(var(--bg-rgb), 0.9) 100%); }

.art { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding-bottom: clamp(16px, 4vh, 32px); }

.nowplaying { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap-el); padding-bottom: 20px; }
.nowplaying__text { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.nowplaying__text h2 { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.nowplaying__text p { font-size: 14px; font-weight: 500; color: var(--t2); }
/* Строка артистов: каждый — отдельная кнопка-ссылка (тап открывает его
   страницу), разделены запятой. У коллаба «A, B» тапаешь именно нужного.
   Контейнер обрезает длинную строку, ссылки выглядят как текст. */
.nowplaying__artists { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--t2); }
.artistlink { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; transition: color var(--dur) var(--ease); }
.artistlink:active { color: var(--t1); }
.likebtn {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; border-radius: var(--pill); color: var(--t2);
  background: var(--surface-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.likebtn:active { transform: scale(0.92); }
.likebtn--on { color: var(--on-accent); background: var(--accent); }

.progress { display: flex; flex-direction: column; gap: 10px; padding-bottom: 22px; cursor: pointer; touch-action: none; }
.progress--compact { padding-bottom: 12px; }
.progress__track { position: relative; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.15); }
/* Полоска тонкая — цель для пальца расширяем невидимой областью, как у полос
   эквалайзера. */
.progress__track::before { content: ''; position: absolute; inset: -14px 0; }
/* Схваченный кноб растёт: тот же отклик, что у эквалайзера. */
.progress.is-drag .progress__track span { transform: scale(1.35); }
.progress__track span { transition: transform var(--dur) var(--ease); }
.progress__track i { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 2px; background: var(--accent); }
.progress__track span { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; left: 0; border-radius: var(--pill); background: #ffffff; box-shadow: var(--shadow-1); }
.progress__times { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 500; letter-spacing: 0.01em; color: var(--t3); font-variant-numeric: tabular-nums; }

.transport { display: flex; align-items: center; justify-content: space-between; padding-bottom: 26px; }
.tbtn { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; color: var(--t2); transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.tbtn:active { transform: scale(0.9); }
.tbtn--md { width: 48px; height: 48px; color: var(--t1); }
.tbtn--on { color: var(--accent); }

.actionbar { margin-top: auto; display: flex; align-items: center; gap: 8px; padding-top: 16px; }
.actionbar__sound {
  display: flex; align-items: center; gap: 9px; flex: 1;
  padding: 12px 18px; border-radius: var(--pill); color: var(--accent-soft);
  background: var(--accent-tint);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.actionbar__sound:active { transform: scale(0.97); }
.actionbar__sound b { font-size: 13px; font-weight: 700; color: var(--accent-soft); }
.actionbar__btn {
  display: flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: var(--pill); background: var(--surface-2); color: var(--t2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.actionbar__btn:active { background: var(--surface-3); color: var(--t1); }
.actionbar__btn--on { color: var(--accent); background: var(--surface-2); }

/* ---------- текст песни ---------- */

.lyrics-modes { padding: 0 var(--gutter) 20px; }
.lyrics { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 6px var(--gutter) 40%; display: flex; flex-direction: column; gap: 20px; }
.lyrics::-webkit-scrollbar { display: none; }
.lyrics__line {
  position: relative;
  font-size: 19px; font-weight: 700; line-height: 1.35;
  text-align: left; padding: 0; cursor: pointer; opacity: 0.26;
  transition: opacity 0.4s var(--ease), filter 0.4s var(--ease);
}
.lyrics__txt { color: var(--t1); transition: opacity 0.4s var(--ease); }
.lyrics__hl {
  position: absolute; inset: 0; pointer-events: none;
  color: var(--accent-soft);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.lyrics__line--on { opacity: 1; transition-duration: 0.24s; }
.lyrics__line--on .lyrics__hl { opacity: 1; transition-duration: 0.26s; }
.lyrics__line--on .lyrics__txt { opacity: 0.001; transition-duration: 0.26s; }
.lyrics__gap { height: 6px; }
.lyrics__status { padding: 20px 0; font-size: 15px; font-weight: 500; color: var(--t3); }
.lyrics__note { padding: 0 var(--gutter) 12px; font-size: 11px; font-weight: 500; color: var(--t4); line-height: 1.55; }

.minibar { margin: 0 var(--gutter); padding: 16px 0 0; border-top: 1px solid var(--line-soft); }
.minibar__row { display: flex; align-items: center; justify-content: space-between; }
.minibar__ctl { display: flex; align-items: center; gap: 22px; }
.minibar__t { font-size: 11px; font-weight: 500; color: var(--t3); width: 40px; font-variant-numeric: tabular-nums; }
.minibar__t--r { text-align: right; }

.ghostbtn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 8px; border-radius: var(--pill); font-size: 12px; font-weight: 700;
  background: var(--surface-2); color: var(--t1);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ghostbtn:active { background: var(--surface-3); transform: scale(0.97); }
.ghostbtn--accent { color: var(--on-accent); background: var(--accent); }
.ghostbtn--accent:active { background: var(--accent-deep); }