/* Раздел «Песни»: полка + караоке-плеер.
   Дизайн-язык платформы: тёмный premium glass, Unbounded + Manrope,
   палитра из player.css/themes.css (страница живёт во всех восьми темах).
   Закон движения: анимируются только transform и opacity, всё тяжёлое
   спит при reduced-motion, ничего не прыгает само — движется то, на что
   человек смотрит (винил во время звука, слово в момент, когда оно поёт). */

.songs-page{
  min-height:100vh;background:var(--bg-1,#101511);
  padding:clamp(20px,4vw,44px) clamp(16px,5vw,56px) 80px;
}

/* ── шапка ─────────────────────────────────────────────────────── */
.sp-top{display:flex;gap:18px;align-items:flex-start;max-width:1100px;margin:0 auto 26px}
.sp-back{
  flex:none;display:grid;place-items:center;width:44px;height:44px;margin-top:4px;
  border-radius:14px;color:var(--ink-dim);background:var(--shell);
  box-shadow:inset 0 0 0 1px var(--shell-line);
  transition:color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);
}
.sp-back:hover{color:var(--ink);background:var(--gold-soft)}
.sp-back:active{transform:scale(.94)}
.sp-back:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sp-back svg{width:20px;height:20px}
.sp-title{font-family:var(--font-d);font-size:clamp(1.5rem,3.4vw,2.25rem);font-weight:600;color:var(--ink);margin:0 0 8px}
.sp-line{max-width:56ch;color:var(--ink-dim);font-size:.9688rem;line-height:1.55;margin:0}

/* ── полка ─────────────────────────────────────────────────────── */
.sp-shelf{
  max-width:1100px;margin:0 auto;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.sp-card{
  --disc:var(--gold);
  position:relative;overflow:hidden;text-align:left;cursor:pointer;
  border:0;border-radius:22px;padding:18px 18px 16px;min-height:150px;
  background:var(--core);box-shadow:inset 0 0 0 1px var(--shell-line),var(--inner-light);
  color:var(--ink);font-family:var(--font-t);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.sp-card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--disc) 45%,transparent),0 18px 40px -22px color-mix(in oklab,var(--disc) 55%,transparent)}
.sp-card:active{transform:translateY(-1px) scale(.99)}
.sp-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* скелет полки: держит высоту до прихода каталога, лечит CLS 0.39 */
.sp-skel{display:block;height:150px;border-radius:18px;background:var(--core);box-shadow:inset 0 0 0 1px var(--shell-line)}
@media (prefers-reduced-motion:no-preference){.sp-skel{animation:sp-pulse 1.4s ease-in-out infinite}}
@keyframes sp-pulse{0%,100%{opacity:.55}50%{opacity:.85}}

/* мини-винил в углу: чистый CSS, у каждой песни свой цвет лейбла */
.sp-card::after{
  content:"";position:absolute;right:-34px;top:-34px;width:120px;height:120px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in oklab,var(--disc) 80%,#000) 0 17%, transparent 17.5%),
    repeating-radial-gradient(circle at 50% 50%, #14161a 0 3px, #1d2025 3px 4px);
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 10px 26px -14px rgba(0,0,0,.8);
  transition:transform .6s var(--ease);
}
.sp-card:hover::after{transform:rotate(28deg)}
/* видимая часть винила ~86px в правом верхнем углу: первые строки карточки
   держат жёсткий отступ от него, иначе заголовок режется на полуслове */
.sp-card h3{font-family:var(--font-d);font-size:1.0313rem;font-weight:600;margin:0 0 6px;max-width:calc(100% - 88px)}
.sp-card .sc-who{color:var(--ink-dim);font-size:.8438rem;margin:0 0 12px;max-width:calc(100% - 88px)}
/* play-аффорданс: на странице про музыку у карточки есть знак звука */
.sp-card::before{
  content:"▶";position:absolute;right:22px;top:22px;z-index:1;
  font-size:.8125rem;line-height:1;color:color-mix(in oklab,var(--disc) 85%,#fff);
  opacity:.9;transition:transform .3s var(--ease);
}
.sp-card:hover::before{transform:scale(1.25)}
/* альбомные карточки: тело тоже не заезжает под винил */
.sp-album-card .sp-card-body{display:block;padding-right:82px}
/* обложка трека альбома: SVG-серия из landing-v2/assets/album */
.sp-cover{position:absolute;right:14px;top:14px;width:76px;height:76px;border-radius:12px;object-fit:cover;box-shadow:0 8px 20px -10px rgba(0,0,0,.7),inset 0 0 0 1px var(--shell-line)}
.sp-album-card{position:relative}
.sp-album-card::after{display:none}
.sp-album-card::before{display:none}
.sp-card .sc-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sp-chip{
  font-size:.7188rem;font-weight:700;letter-spacing:.02em;
  padding:4px 9px;border-radius:99px;color:var(--ink-dim);
  background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line);
}
.sp-chip.year{color:color-mix(in oklab,var(--disc) 80%,var(--ink))}
.sp-chip.warn{color:var(--gold)}

/* ── подпись о правах ──────────────────────────────────────────── */
.sp-note{max-width:1100px;margin:26px auto 0;color:var(--ink-faint);font-size:.8125rem;line-height:1.55}

/* ── плеер ─────────────────────────────────────────────────────── */
.pl-veil{
  position:fixed;inset:0;z-index:900;background:rgba(8,10,9,.62);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transition:opacity .45s var(--ease);
}
.pl-veil.on{opacity:1}
.pl{
  position:fixed;z-index:910;inset:auto 0 0 0;margin:0 auto;max-width:760px;
  max-height:min(88vh,860px);display:flex;flex-direction:column;
  border-radius:28px 28px 0 0;padding:22px 22px 18px;
  background:color-mix(in oklab,var(--bg-2,#151b16) 92%,var(--ink) 2%);
  box-shadow:inset 0 1px 0 color-mix(in oklab,var(--ink) 14%,transparent),0 -30px 80px -30px rgba(0,0,0,.7);
  transform:translateY(18px);opacity:0;
  transition:transform .5s var(--ease),opacity .5s var(--ease);
}
.pl.on{transform:translateY(0);opacity:1}
@media (min-width:900px){
  .pl{inset:0;margin:auto;border-radius:28px;max-height:min(86vh,780px)}
}
.pl-close{
  position:absolute;right:14px;top:14px;z-index:2;
  display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:12px;cursor:pointer;
  color:var(--ink-dim);background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line);
  transition:color .3s var(--ease),transform .3s var(--ease);
}
.pl-close:hover{color:var(--ink)}
.pl-close:active{transform:scale(.92)}
.pl-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pl-close svg{width:18px;height:18px}

.pl-stage{display:flex;gap:20px;align-items:center;padding:4px 4px 14px}
.pl-vinyl-wrap{position:relative;flex:none;width:clamp(96px,18vw,132px);aspect-ratio:1}
.pl-vinyl{
  position:absolute;inset:7%;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 24%, rgba(255,255,255,.045) 24.5% 25%, transparent 25.5%),
    repeating-radial-gradient(circle at 50% 50%, #101216 0 2.6px, #191c21 2.6px 3.6px),
    conic-gradient(from 210deg, transparent 0 40%, rgba(255,255,255,.05) 47% 53%, transparent 60%);
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 18px 44px -18px rgba(0,0,0,.85);
  display:grid;place-items:center;
}
.pl-label{
  width:37%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 30%, color-mix(in oklab,var(--disc,#F0B254) 92%,#fff) 0 8%, color-mix(in oklab,var(--disc,#F0B254) 78%,#000) 70%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
}
.pl-label span{font-family:var(--font-d);font-size:.5rem;font-weight:700;color:rgba(12,10,6,.82)}
/* вращение живёт только пока звук звучит */
@keyframes spin{to{transform:rotate(360deg)}}
.pl.playing .pl-vinyl{animation:spin 3.6s linear infinite}
.pl-ring{position:absolute;inset:-2%;transform:rotate(-90deg)}
.pl-ring circle{fill:none;stroke-width:2.6}
.pl-ring-rail{stroke:color-mix(in oklab,var(--ink) 12%,transparent)}
.pl-ring-run{
  stroke:var(--disc,#F0B254);stroke-linecap:round;
  stroke-dasharray:301.6;stroke-dashoffset:301.6;
  transition:stroke-dashoffset .45s linear;
}
.pl-title{font-family:var(--font-d);font-size:clamp(1.0625rem,2.6vw,1.375rem);font-weight:600;color:var(--ink);margin:0 0 6px}
.pl-performer{color:var(--ink-dim);font-size:.875rem;margin:0}
.pl-flag{color:var(--gold);font-size:.8125rem;margin:8px 0 0}

/* ── бегущие слова ─────────────────────────────────────────────── */
.pl-words{
  flex:1;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;
  padding:10px 6px 26px;mask-image:linear-gradient(transparent 0,#000 26px,#000 calc(100% - 30px),transparent);
}
@media (prefers-reduced-motion:reduce){.pl-words{scroll-behavior:auto}}
.pl-words-hint{color:var(--ink-faint);font-size:.8438rem;margin:0 0 14px}
.pl-line{margin:0 0 10px;line-height:1.75;font-size:clamp(1.0625rem,2.8vw,1.3125rem);font-weight:600}
.pl-w{
  display:inline-block;padding:1px 5px;margin:0 -1px;border-radius:9px;cursor:pointer;
  color:var(--ink-dim);
  transition:color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);
}
.pl-w:hover{color:var(--ink);background:var(--shell)}
.pl-w:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.pl-w.past{color:var(--ink)}
.pl-w.now{
  color:var(--gold);background:var(--gold-soft);
  transform:translateY(-1px);
  text-shadow:0 0 22px var(--halo);
}
.pl-w.low{border-bottom:1px dashed color-mix(in oklab,var(--ink) 30%,transparent)}
.pl-w.saved{color:var(--mint)}
@media (prefers-reduced-motion:reduce){
  .pl.playing .pl-vinyl{animation:none}
  .pl-w.now{transform:none}
}

/* ── пульт ─────────────────────────────────────────────────────── */
.pl-deck{display:flex;align-items:center;gap:14px;padding:12px 4px 0;border-top:1px solid var(--shell-line)}
.pl-play{
  flex:none;display:grid;place-items:center;width:56px;height:56px;border:0;border-radius:50%;cursor:pointer;
  color:#14110a;background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  box-shadow:0 12px 30px -12px var(--halo);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),opacity .3s var(--ease);
}
.pl-play:hover{transform:scale(1.05)}
.pl-play:active{transform:scale(.96)}
.pl-play:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.pl-play:disabled{opacity:.4;cursor:default;transform:none}
.pl-play svg{width:24px;height:24px;fill:currentColor}
.pl-play .i-pause{display:none}
.pl.playing .pl-play .i-play{display:none}
.pl.playing .pl-play .i-pause{display:block}
.pl-time{font-variant-numeric:tabular-nums;color:var(--ink-dim);font-size:.875rem;font-weight:700}
.pl-time-sep{margin:0 6px;color:var(--ink-faint)}
.pl-toast{
  margin-left:auto;color:var(--mint);font-size:.8438rem;font-weight:700;
  opacity:0;transform:translateY(4px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.pl-toast.on{opacity:1;transform:none}

/* ── Наш альбом ── */
.sp-shelf-h{font-family:var(--font-d);font-size:1.125rem;font-weight:600;color:var(--ink);max-width:1180px;margin:26px auto 6px}
.sp-shelf-line{color:var(--ink-dim);font-size:.875rem;line-height:1.55;max-width:56ch;margin:0 auto 14px;margin-left:auto}
.sp-album{max-width:1180px;margin:0 auto}
.sp-album .sp-shelf-h,.sp-album .sp-shelf-line{margin-left:0;margin-right:0}
.sp-album-card .sp-card-note{color:var(--gold);font-size:.75rem;font-weight:700}

/* экран трека */
.al-wrap{max-width:640px;margin:0 auto;padding:8px 0 80px}
.al-status{color:var(--gold);font-size:.875rem;font-weight:700;margin:0 0 10px}
.al-story{color:var(--ink-dim);font-size:.9375rem;line-height:1.6;margin:0 0 22px}
.al-sec{margin-bottom:20px}
.al-sec h3{font-family:var(--font-d);font-size:.8125rem;font-weight:600;color:var(--gold);text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px}
.al-sec p{margin:0 0 4px;font-size:1.0625rem;line-height:1.7;color:var(--ink)}
.al-sec .w-w{cursor:pointer;border-radius:6px;padding:0 2px;transition:background .2s var(--ease)}
.al-sec .w-w:hover{background:var(--gold-soft)}
.al-vocab h2{font-family:var(--font-d);font-size:1rem;font-weight:600;color:var(--ink);margin:26px 0 10px}
.al-vocab-row{display:flex;gap:8px;flex-wrap:wrap}
.al-word{display:flex;gap:6px;align-items:center;min-height:38px;padding:0 13px;border:0;border-radius:99px;cursor:pointer;
  font-family:var(--font-t);font-size:.8438rem;font-weight:700;color:var(--gold);
  background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 30%,transparent)}
.al-word i{font-style:normal;opacity:.75;font-weight:400}
.al-word.in{color:var(--mint);background:color-mix(in oklab,var(--mint) 10%,transparent)}
/* обложка на странице трека */
.al-cover{margin-left:auto;flex:none;width:clamp(84px,14vw,112px);height:auto;border-radius:14px;box-shadow:0 12px 28px -14px rgba(0,0,0,.75),inset 0 0 0 1px var(--shell-line)}