/* v2 · el player es una barra lateral a la derecha, de arriba abajo (estilo Yandex Музыка, mejorado); el contenido se corre a la izquierda */
@property --ring-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ring-turn { to { --ring-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .v2 .playing .ph-art .p-ring::after { animation: none; } }

:root { --panel-w: clamp(340px, 26vw, 420px); --panel-gap: 28px; --strip-w: 92px; }

@media (min-width: 981px) {
  .v2 section { padding-right: calc(var(--panel-w) + var(--panel-gap) * 2.5); padding-left: 120px; padding-bottom: 90px; transition: padding-right .6s cubic-bezier(.4, 0, .2, 1); }
  .v2.ph-min section { padding-right: calc(var(--strip-w) + 40px); } /* plegado: el contenido recupera el ancho y queda centrado (izq. 120 por el menú) */
  .v2 .made { right: auto; left: 30px; }
  /* escritorio: «Слушать альбом» no va arriba (están los botones de la lista y el panel); en móvil sí, a la derecha */
  .v2 .top-cta { display: none; }

  /* menú: números más grandes, ahora hay sitio */
  .v2 .side { left: 34px; }
  .v2 .side a { height: calc(32px * var(--s)); font-size: calc(19px * var(--s)); }
  .v2 .side a::before { width: calc(16px * var(--s)); }
  .v2 .side a.active::before { width: 40px; }

  /* el panel */
  .v2 .player.phone {
    left: auto; right: 0; top: 0; bottom: 0; width: var(--panel-w); transform: none; opacity: 1;
    flex-direction: column; align-items: stretch; gap: 0; padding: 26px 24px 14px; border-radius: 0;
    background: rgba(8, 12, 22, .5); border: none; border-left: 1px solid rgba(255, 255, 255, .12); overscroll-behavior: contain;
    backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); overflow: visible;
    transition: width .55s cubic-bezier(.4, 0, .2, 1);
  }
  .v2 .player.phone { animation: none; } /* el panel no «respira» (se veía como un parpadeo) */
  .v2 .player.phone.ph-enter { animation: ph-in .5s cubic-bezier(.2, .7, .2, 1); } /* entrada suave solo al abrir la web */
  @keyframes ph-in { from { opacity: 0; transform: translateX(24px); } }

  /* plegar / desplegar: pestaña pegada al borde izquierdo del panel, a media altura (como un cajón) */
  .v2 .ph-toggle { position: absolute; left: -26px; top: 50%; translate: 0 -50%; z-index: 2; width: 26px; height: 72px; display: grid; place-items: center;
    border-radius: 14px 0 0 14px; background: rgba(255, 255, 255, .7); border: none; box-shadow: -4px 0 18px rgba(0, 0, 0, .25);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .3s; } /* blanca al 70 %: se nota sobre cualquier fondo */
  .v2 .ph-toggle:hover { background: rgba(255, 255, 255, .92); }
  .v2 .ph-toggle svg { width: 16px; height: 16px; fill: none; stroke: #4a5a70; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s; transform: rotate(-90deg); }

  /* al plegar/desplegar: el contenido se funde, el panel cambia de ancho y el contenido vuelve */
  .v2 .player.phone > :not(.ph-toggle) { transition: opacity .2s; }
  .v2 .player.phone.ph-fade > :not(.ph-toggle) { opacity: 0; }

  /* portada grande cuadrada, con el anillo y las notas */
  .v2 .ph-art { position: relative; margin: 0 0 16px; }
  .v2 .ph-art .p-cover { width: min(100%, 36vh); margin: 0 auto; height: auto; aspect-ratio: 1; border-radius: 26px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
  /* borde de la portada: sonando .5; en pausa se queda, pero tenue (30 % de eso) */
  .v2 .ph-art .p-ring { inset: -1px; border-radius: 26px; border: 1px solid rgba(255, 255, 255, .15); opacity: 1; }
  .v2 .playing .ph-art .p-ring { animation: none; border-color: rgba(255, 255, 255, .22); }
  /* sonando: una luz en degradado recorre el borde de la portada, como el anillo de móvil pero siguiendo el cuadrado */
  .v2 .ph-art .p-ring::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; opacity: 0; transition: opacity .8s;
    background: conic-gradient(from var(--ring-a), rgba(220, 230, 245, 0) 0deg 200deg, rgba(220, 230, 245, .4) 300deg, #fff 356deg, rgba(220, 230, 245, 0) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
  .v2 .playing .ph-art .p-ring::after { opacity: 1; animation: ring-turn 9s linear infinite; }
  .v2.ph-min .ph-art .p-ring::after { display: none; }

  .v2 .p-info { flex: none; }
  .v2 .p-top { gap: 10px; }
  .v2 .p-num { font-size: 13px; }
  .v2 .p-title { font-size: 16px; font-weight: 500; white-space: normal; line-height: 1.3; }
  .v2 .ph-phrase { margin: 6px 0 10px; font-size: 13px; line-height: 1.45; opacity: .65; min-height: 2.9em; }
  .v2 .p-ctrl { justify-content: center; gap: 22px; margin: 8px 0 6px; }
  .v2 .p-ctrl .p-play { width: 62px; height: 62px; background: rgba(255, 255, 255, .9); color: #0a0f19; border: none; }
  .v2 .p-ctrl .p-play:hover { background: #fff; }
  .v2 .p-ctrl .p-play svg { width: 22px; height: 22px; }
  .v2 .p-vol { width: 60%; align-self: center; margin: 2px 0 10px; opacity: .35; height: 14px; transition: opacity .4s; }
  .v2 .p-vol:hover { opacity: .8; }
  .v2 .p-cta { align-self: center; margin: 0 0 10px; }

  /* nombre del álbum, nítido (blanco pleno, sin transparencia), como cabecera de la lista */
  .v2 .ph-album { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 6px 0 0; padding: 12px 2px 8px; border-top: 1px solid rgba(255, 255, 255, .1);
    font-family: 'Cormorant', Georgia, serif; font-weight: 600; font-size: 21px; letter-spacing: .02em; color: #fff; white-space: nowrap; }
  .v2 .ph-album span { font-family: 'Noto Sans Web', sans-serif; font-weight: 400; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #c9ced6; }

  /* lista de pistas dentro del panel */
  .v2 .ph-list { list-style: none; margin: 0 -8px; padding: 0; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; overscroll-behavior: contain; }
  .v2 .ph-list li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; font-size: 13px; cursor: pointer; transition: background .4s; }
  .v2 .ph-list li:hover { background: rgba(255, 255, 255, .06); }
  .v2 .ph-list .ln { font-family: 'Cormorant', Georgia, serif; font-size: 15px; width: 22px; opacity: .55; }
  .v2 .ph-list .lt { flex: 1; line-height: 1.3; }
  .v2 .ph-list .ld { font-size: 11px; opacity: .45; }
  /* cerradas: número y título en gris, como desactivadas; solo el botón «Слушать альбом» está vivo */
  .v2 .ph-list li.locked { cursor: default; }
  .v2 .ph-list li.locked:hover { background: none; }
  .v2 .ph-list li.locked .ln, .v2 .ph-list li.locked .lt { opacity: .35; }
  .v2 .ph-rel { flex: none; color: var(--text); text-decoration: none; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
    border: 1px solid #ffffff45; border-radius: 20px; padding: 5px 10px; opacity: .8; transition: background .3s, opacity .3s, border-color .3s; }
  .v2 .ph-rel:hover { opacity: 1; background: #ffffff18; border-color: #ffffff90; }
  .v2 .ph-list li.current { background: rgba(255, 255, 255, .1); }
  .v2 .ph-list li.current .ln { opacity: 1; }
  .v2 .ph-list .eq { display: none; height: 12px; }
  .v2 .ph-list li.current.on .eq { display: flex; }
  .v2 .ph-list li.current.on .ld { display: none; }

  /* plegado: franja estrecha a la derecha (portada · anterior · play · siguiente); clic en ella o en la pestaña la abre */
  .v2.ph-min .player.phone { width: var(--strip-w); padding: 26px 0; align-items: center; cursor: pointer; }
  .v2.ph-min .ph-art { margin: 0 0 18px; }
  /* portada redonda como en móvil, con el mismo anillo en degradado girando mientras suena */
  .v2.ph-min .ph-art .p-cover { width: 56px; border-radius: 50%; box-shadow: none; }
  .v2.ph-min .ph-art .p-ring { inset: -5px; border-radius: 50%; border: none;
    background: conic-gradient(rgba(220, 230, 245, 0) 0deg 140deg, rgba(220, 230, 245, .35) 270deg, rgba(255, 255, 255, .95) 356deg, rgba(220, 230, 245, 0) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.2px)); }
  .v2.ph-min .ph-art .p-ring { opacity: 0; }
  .v2.ph-min .playing .ph-art .p-ring { opacity: 1; animation: spin 9s linear infinite; }
  .v2.ph-min .p-info, .v2.ph-min .p-vol, .v2.ph-min .p-cta, .v2.ph-min .ph-album, .v2.ph-min .ph-list { display: none; }
  .v2.ph-min .p-ctrl { flex-direction: column; margin: 0; gap: 14px; }
  .v2.ph-min .p-ctrl .p-play { width: 50px; height: 50px; }
  .v2.ph-min .p-ctrl .p-play svg { width: 18px; height: 18px; }
  .v2.ph-min .ph-toggle svg { transform: rotate(90deg); }
}

/* móvil: se queda la cápsula de siempre; lo del «teléfono» no aplica */
@media (max-width: 980px) {
  /* anillo de la portada: arco en degradado que se desvanece como una estela (antes, borde seco a medias) */
  .v2 .p-ring { border: none; background: conic-gradient(rgba(220, 230, 245, 0) 0deg 140deg, rgba(220, 230, 245, .35) 270deg, rgba(255, 255, 255, .95) 356deg, rgba(220, 230, 245, 0) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.2px)); }
  .v2 .playing .p-ring { animation-duration: 9s; }
  .v2 .ph-toggle, .v2 .ph-album, .v2 .ph-list, .v2 .ph-phrase { display: none; }
  .v2 .ph-art { flex: none; }
}

/* botón play de cada bloque: crece al pasar el ratón y anuncia la acción (слушать / продолжить / пауза) con su icono a la derecha.
   «scale» va aparte de «transform» (que lo usa la animación de aparición) */
.v2 #pPlay { position: relative; }
.v2 .track .play[data-n] { position: relative; transition: background .8s, border-color .8s, box-shadow .8s, scale .6s cubic-bezier(.2, .8, .2, 1); }
.v2 .track .play[data-n]:hover:not(.on) { scale: 1.08; } /* si el clic va a pausar, no crece */
/* ancho fijo: nada cambia de tamaño al pasar el ratón (si no, el botón «tiembla» y corta las notas).
   Icono de reposo a la izquierda (▶ o ecualizador), icono de la acción a la derecha; el texto, centrado, cambia en su sitio */
.v2 .track .play[data-n] { width: 216px; justify-content: center; padding-left: 0; padding-right: 0; }
.v2 .track .play[data-n] > .ico, .v2 .track .play[data-n] > .eq { position: absolute; left: 30px; top: 50%; translate: 0 -50%; transition: opacity .35s; }
.v2 .track .play[data-n]:hover > .ico, .v2 .track .play[data-n]:hover > .eq { opacity: 0; }
.v2 .lbls { display: grid; }
.v2 .lbls > span { grid-area: 1 / 1; text-align: center; transition: opacity .35s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.v2 .lbl-h { opacity: 0; transform: translateY(7px); }
.v2 .track .play:hover .lbl { opacity: 0; transform: translateY(-7px); }
.v2 .track .play:hover .lbl-h { opacity: 1; transform: none; }
.v2 .ico-h { position: absolute; right: 30px; top: 50%; display: grid; opacity: 0; transform: translate(-8px, -50%); transition: opacity .4s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.v2 .ico-h svg { grid-area: 1 / 1; width: 10px; height: 10px; fill: currentColor; }
.v2 .ico-h .h-pause, .v2 .play.on .ico-h .h-play { display: none; }
.v2 .play.on .ico-h .h-pause { display: block; }
.v2 .track .play:hover .ico-h { opacity: 1; transform: translate(0, -50%); }

/* notas musicales: salen alrededor del botón, suben, se mecen y se desvanecen */
.notes { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.note { position: absolute; bottom: 80%; color: #fff; font-family: 'Cormorant', Georgia, serif; opacity: 0;
  text-shadow: 0 0 14px rgba(220, 230, 245, .55); animation: note-rise var(--d, 6s) cubic-bezier(.25, .1, .25, 1) forwards; will-change: transform, opacity; }
@keyframes note-rise {
  0%   { opacity: 0; transform: translate(0, 0) rotate(var(--r0, -8deg)) scale(.7); }
  15%  { opacity: .85; }
  50%  { transform: translate(var(--dx1, 10px), -45%) rotate(var(--r1, 6deg)) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx2, -6px), -110px) rotate(var(--r2, -4deg)) scale(1.05); filter: blur(3px); }
}
@media (prefers-reduced-motion: reduce) { .note { display: none; } .v2 .track .play[data-n]:hover { scale: 1; } }


/* barra de avance como un cometa: recorrido tenue, estela que se enciende hacia la punta y cabeza luminosa que respira al sonar */
.v2 .p-fill { background: rgba(255, 255, 255, .32); overflow: visible; }
.v2 .p-fill::before { content: ''; position: absolute; right: 0; top: 50%; translate: 0 -50%; width: min(100%, 90px); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(230, 238, 250, .9)); box-shadow: 0 0 8px rgba(210, 225, 245, .45); }
.v2 .p-fill::after { content: ''; position: absolute; right: -3px; top: 50%; translate: 0 -50%; width: 6px; height: 6px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, .85), 0 0 18px 5px rgba(200, 215, 240, .45); opacity: 0; transition: opacity .8s; }
.v2 .playing .p-fill::after { opacity: 1; animation: comet 2.6s ease-in-out infinite; }
@keyframes comet { 50% { box-shadow: 0 0 8px 3px rgba(255, 255, 255, .95), 0 0 26px 8px rgba(200, 215, 240, .6); } }
@media (prefers-reduced-motion: reduce) { .v2 .playing .p-fill::after { animation: none; } }
/* álbum sin pistas para escuchar aquí (solo links): sin panel, el contenido usa todo el ancho y el botón de arriba se ve */
@media (min-width: 981px) {
  .v2.noplay section { padding-right: 120px; }
  .v2.noplay .top-cta { display: inline-flex; }
}

/* repetir + temporizador */
.ph-tools { display: none; }
@media (min-width: 981px) {
  .v2 .ph-tools { display: flex; justify-content: center; gap: 8px; margin: 0 0 12px; }
  .v2 .ph-tool { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 20px; border: 1px solid transparent; background: transparent;
    color: var(--text); font: inherit; font-size: 11px; letter-spacing: .08em; opacity: .5; cursor: pointer; transition: opacity .3s, background .3s, border-color .3s; }
  .v2 .ph-tool:hover { opacity: .9; background: rgba(255, 255, 255, .08); }
  .v2 .ph-tool[aria-pressed="true"] { opacity: 1; border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); }
  .v2 .ph-tool svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .v2 #pTimerLbl { font-variant-numeric: tabular-nums; min-width: 4.2em; text-align: left; }
  .v2.ph-min .ph-tools { display: none; }
}

/* volumen: altavoz · barra fina con relleno · cifra */
.ph-vol { display: none; }
@media (min-width: 981px) {
  .v2 .ph-vol { display: flex; align-items: center; gap: 10px; width: 78%; align-self: center; margin: 4px 0 12px; }
  .v2 .ph-vol .p-vol { flex: 1; width: auto; margin: 0; opacity: 1; height: 14px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
  .v2 .ph-vol .p-vol::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, .8) var(--v, 70%), rgba(255, 255, 255, .16) var(--v, 70%)); }
  .v2 .ph-vol .p-vol::-moz-range-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, .8) var(--v, 70%), rgba(255, 255, 255, .16) var(--v, 70%)); }
  .v2 .ph-vol .p-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .5); transition: transform .3s; }
  .v2 .ph-vol .p-vol::-moz-range-thumb { width: 10px; height: 10px; border: none; border-radius: 50%; background: #fff; }
  .v2 .ph-vol .p-vol:hover::-webkit-slider-thumb { transform: scale(1.3); }
  .v2 .ph-mute { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--text); opacity: .75; transition: opacity .3s, background .3s; }
  .v2 .ph-mute:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
  .v2 .ph-mute svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .v2 .ph-mute .x, .v2 .ph-mute[data-level="0"] .w1, .v2 .ph-mute[data-level="0"] .w2, .v2 .ph-mute[data-level="1"] .w2 { display: none; }
  .v2 .ph-mute[data-level="0"] .x { display: inline; }
  .v2 .ph-vol-val { width: 3.2em; font-size: 11px; letter-spacing: .04em; font-variant-numeric: tabular-nums; text-align: right; opacity: .7; }
  .v2 .ph-vol-val.bump { animation: vol-bump .45s cubic-bezier(.2, .8, .2, 1); }
  .v2.ph-min .ph-vol { display: none; }
}
@keyframes vol-bump { 30% { transform: scale(1.25); opacity: 1; } }

/* compartir: menú del player */
.share-wrap { position: relative; }
.share-pop { position: absolute; bottom: calc(100% + 8px); right: 0; min-width: 210px; padding: 6px; border-radius: 14px; display: flex; flex-direction: column;
  background: rgba(10, 14, 24, .92); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s, transform .3s, visibility .25s; z-index: 5; }
.share-pop.open { opacity: 1; visibility: visible; transform: none; }
.share-pop button { text-align: left; padding: 10px 12px; border-radius: 10px; color: var(--text); font: inherit; font-size: 13px; }
.share-pop button:hover { background: rgba(255, 255, 255, .1); }

/* ===== panel en todas las páginas: visible si el álbum tiene audio aquí o si algo está sonando ===== */
@media (min-width: 981px) {
  .v2:not(.has-panel) .player.phone { display: none; }
  .v2:not(.has-panel) section { padding-right: 120px; }
  .v2.noplay.has-panel section { padding-right: calc(var(--panel-w) + var(--panel-gap) * 2.5); }
  .v2.noplay.has-panel.ph-min section { padding-right: calc(var(--strip-w) + 40px); }
  /* índice: el panel se superpone al contenido (no lo empuja ni lo estrecha) */
  .v2 .ph-toggle[hidden] { display: none; }

  /* selector de álbum arriba del panel: recuadro tipo «select» (disco · альбом / título · ⇅) */
  .v2 .ph-albumbar { display: flex; margin: -6px 0 14px; position: relative; }
  .v2 .ph-albsel { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 10px; border-radius: 14px; color: var(--text); text-align: left;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); transition: background .3s, border-color .3s; cursor: pointer; }
  .v2 .ph-albsel:hover, .v2 .ph-albsel[aria-expanded="true"] { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .3); }
  .v2 .ph-albsel svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  /* portada del álbum en el selector, con ⇅ en la esquina */
  .v2 .pa-cover { position: relative; flex: none; width: 34px; height: 34px; border-radius: 8px; background: #222 center / cover; transition: box-shadow .4s; }
  /* línea alrededor solo si lo que suena es de otro álbum que el de la página; sin línea si coincide */
  .v2 .player.other .pa-cover { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .75); }
  .v2 .pa-badge { position: absolute; right: -5px; bottom: -5px; width: 16px !important; height: 16px !important; padding: 2px; border-radius: 50%;
    background: #fff; color: #0a0f19; stroke-width: 2.4 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); display: none; }
  .v2 .pa-chev { width: 16px; height: 16px; opacity: .7; }
  .v2 .pa-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .v2 .pa-k { font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); opacity: .7; }
  .v2 .pa-t { font-family: 'Noto Sans Web', 'Noto Sans', sans-serif; font-weight: 400; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .v2 .pa-l { opacity: .55; }
  .v2 .pa-k .k-on, .v2 .playing .pa-k .k-off { display: none; }  /* «сейчас играет» solo mientras suena; en pausa «в плеере» */
  .v2 .playing .pa-k .k-on { display: inline; }
  .v2 .ph-albumbar .sw-menu { left: auto; right: 0; top: calc(100% + 8px); z-index: 6; }
  /* plegado: solo el ⇅ arriba de la franja; la lista de álbumes se abre hacia la izquierda */
  .v2.ph-min .ph-albumbar { margin: 0 0 16px; justify-content: center; }
  /* plegado: solo la portada del álbum con ⇅ (que se note que se puede cambiar) y una etiqueta al pasar el ratón */
  .v2.ph-min .ph-albsel { flex: none; padding: 0; gap: 0; background: none; border: none; position: relative; }
  .v2.ph-min .ph-albsel .pa-txt, .v2.ph-min .ph-albsel .pa-chev { display: none; }
  .v2.ph-min .pa-cover { width: 50px; height: 50px; border-radius: 12px; }
  .v2.ph-min .pa-badge { display: block; }
  .v2.ph-min .ph-albsel::after { content: 'СМЕНИТЬ АЛЬБОМ\A' attr(data-tip); white-space: pre; position: absolute; right: calc(100% + 14px); top: 50%; translate: 0 -50%;
    padding: 9px 14px; border-radius: 12px; font-size: 13px; line-height: 1.6; text-align: left; background: rgba(10, 14, 24, .92); border: 1px solid rgba(255, 255, 255, .15);
    opacity: 0; pointer-events: none; transition: opacity .25s; }
  .v2.ph-min .ph-albsel:hover::after { opacity: 1; }
  .v2.ph-min .ph-albsel[aria-expanded="true"]::after { opacity: 0; }
  .v2.ph-min .ph-albumbar .sw-menu { right: calc(100% + 14px); top: 0; }
}
.ph-albumbar { display: none; }

/* pestaña de plegar: arriba, a la altura del selector de álbum y con su mismo alto */
@media (min-width: 981px) {
  .v2 .ph-toggle { top: 20px; translate: none; height: 54px; }
  .v2.ph-min .ph-toggle { top: 26px; height: 50px; }
}
/* álbum sin audio aquí (Ella) con el panel visible: el botón de arriba quedaría encima del panel → fuera (abajo están los links) */
@media (min-width: 981px) { .v2.noplay.has-panel .top-cta { display: none; } }

/* repetir: el «1» dentro del icono solo en «повтор трека» */
.ph-tool .one { display: none; font: 600 8px/1 'Noto Sans Web', sans-serif; fill: currentColor; stroke: none; }
.ph-tool[data-mode="one"] .one { display: inline; }

/* panel más compacto: portada más pequeña y menos aire, para que la lista de canciones se vea */
@media (min-width: 981px) {
  .v2 .ph-art .p-cover { width: min(100%, 26vh); }
  .v2 .ph-art { margin-bottom: 12px; }
  .v2 .ph-albumbar { margin: -8px 0 12px; }
  .v2 .ph-albsel { padding: 7px 12px 7px 8px; }
  .v2 .pa-cover { width: 30px; height: 30px; }
  .v2 .ph-phrase { margin: 4px 0 6px; min-height: 0; }
  .v2 .p-ctrl { margin: 4px 0 2px; }
  .v2 .ph-vol { margin: 2px 0 8px; }
  .v2 .ph-tools { margin-bottom: 8px; }
  .v2 .ph-album { padding: 10px 2px 6px; }
}
@media (min-width: 981px) { .v2:not(.ph-min) .ph-toggle { top: 18px; height: 50px; } } /* sigue alineada con el selector, más bajo */

/* portada del player en círculo: gira mientras suena y se detiene en pausa (con un brillo fijo encima) */
@media (min-width: 981px) {
  .v2 .ph-art .p-cover { border-radius: 50%; box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .14);
    animation: spin 9s linear infinite; animation-play-state: paused; }
  .v2 .playing .ph-art .p-cover { animation-play-state: running; }
  /* el agujero del centro, como un disco */
  .v2 .ph-art .p-cover::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7%; height: 7%; translate: -50% -50%; border-radius: 50%;
    background: #0b0c0f; box-shadow: 0 0 0 2px rgba(255, 255, 255, .18); }
  .v2.ph-min .ph-art .p-cover::after { display: none; }
  .v2 .ph-art .p-ring { border-radius: 50%; }
  /* el brillo del disco no gira con él: va encima, fijo */
  .v2 .ph-art { position: relative; }
  .v2 .ph-art::after { content: ''; position: absolute; left: 50%; top: 0; width: min(100%, 26vh); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; pointer-events: none;
    background: conic-gradient(from 30deg, transparent 0 40deg, rgba(255, 255, 255, .12) 60deg, transparent 90deg 220deg, rgba(255, 255, 255, .09) 240deg, transparent 270deg); }
  .v2.ph-min .ph-art::after { display: none; }
}
@media (min-width: 981px) { .v2 .ph-tool { white-space: nowrap; flex: none; } .v2 .ph-tools { flex-wrap: nowrap; } } /* nunca en dos líneas */
@media (min-width: 981px) {
  /* etiqueta «Сменить альбом» del player plegado: por delante de la pestaña de plegar y a su izquierda */
  .v2.ph-min .ph-albumbar { z-index: 3; }
  .v2.ph-min .ph-albsel::after { right: calc(100% + 46px); z-index: 3; }
}
/* si lo que suena es de otro álbum que el de la página, el panel proyecta una sombra (va «por su cuenta»); si coinciden, sin sombra */
@media (min-width: 981px) {
  .v2 .player.phone { transition: width .55s cubic-bezier(.4, 0, .2, 1), box-shadow .6s ease; }
  .v2 .player.phone.other { box-shadow: -26px 0 60px rgba(0, 0, 0, .6), -2px 0 0 rgba(0, 0, 0, .25); }
}

/* ===================== MÓVIL: mini-player abajo + tarjeta desde abajo (bottom sheet) =====================
   Plegado: cápsula abajo con portada, título y avance, ▶ ⏭ y ↑ (abre la tarjeta).
   Abierto: el mismo player completo en una tarjeta fija abajo/izq./der. que deja un hueco arriba (se ve la página detrás). */
@media (max-width: 980px) {
  .v2 .m-btn, .v2 .m-menu { display: none !important; } /* el player sustituye al antiguo menú de tres rayas */

  /* --- mini-player --- */
  .v2 .ph-albumbar, .v2 .ph-vol, .v2 .ph-tools, .v2 .p-time { display: none; }
  .v2 .ph-art { order: 1; }
  .v2 .p-info { order: 2; flex: 1; min-width: 0; }
  .v2 .p-ctrl { order: 3; }
  .v2 .ph-toggle { order: 4; display: grid; place-items: center; position: static; flex: none; width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255, 255, 255, .14); border: none; box-shadow: none; }
  .v2 .ph-toggle svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); transition: transform .4s; }

  /* --- tarjeta abierta --- */
  html:has(body.sheet-open) { overflow: hidden; }
  body.sheet-open::after { content: ''; position: fixed; inset: 0; z-index: 19; background: rgba(2, 4, 10, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade-in .35s ease; }
  @keyframes fade-in { from { opacity: 0; } }
  .v2.sheet-open .player.phone { left: 0; right: 0; bottom: 0; top: 56px; width: auto; transform: none; opacity: 1; translate: none;
    flex-direction: column; align-items: stretch; gap: 0; padding: 30px 22px calc(24px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0;
    background: rgba(10, 14, 24, .94); border: none; border-top: 1px solid rgba(255, 255, 255, .14); overflow-y: auto; overscroll-behavior: contain;
    animation: sheet-in .45s cubic-bezier(.2, .8, .2, 1); }
  @keyframes sheet-in { from { transform: translateY(45%); opacity: .3; } }
  .v2.sheet-open .player.phone::before { content: ''; position: absolute; top: 9px; left: 50%; width: 42px; height: 4px; translate: -50% 0; border-radius: 2px; background: rgba(255, 255, 255, .3); }
  .v2.sheet-open .ph-toggle { position: absolute; top: 14px; right: 16px; }
  .v2.sheet-open .ph-toggle svg { transform: none; }

  /* capa propia por encima del disco que gira (su animación crea otra capa y tapaba el menú de álbumes) */
  .v2.sheet-open .ph-albumbar { display: flex; order: 0; margin: 0 48px 18px 0; position: relative; z-index: 4; }
  .v2.sheet-open .ph-albsel { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 14px; color: var(--text); text-align: left;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
  .v2.sheet-open .pa-cover { flex: none; width: 34px; height: 34px; border-radius: 8px; background: #222 center / cover; }
  .v2.sheet-open .pa-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .v2.sheet-open .pa-k { font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); opacity: .7; }
  .v2.sheet-open .pa-k .k-on, .v2.sheet-open .playing .pa-k .k-off { display: none; }
  .v2.sheet-open .playing .pa-k .k-on { display: inline; }
  .v2.sheet-open .pa-t { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .v2.sheet-open .pa-l { opacity: .55; }
  .v2.sheet-open .pa-chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .7; flex: none; }
  .v2.sheet-open .pa-badge { display: none; }
  .v2.sheet-open .ph-albumbar .sw-menu { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 6; }

  .v2.sheet-open .ph-art { order: 1; margin: 0 0 18px; display: flex; justify-content: center; }
  .v2.sheet-open .ph-art .p-cover { width: min(66vw, 34svh); height: auto; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .14);
    animation: spin 9s linear infinite; animation-play-state: paused; }
  .v2.sheet-open .playing .ph-art .p-cover { animation-play-state: running; }
  .v2.sheet-open .ph-art .p-cover::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7%; height: 7%; translate: -50% -50%; border-radius: 50%; background: #0b0c0f; box-shadow: 0 0 0 2px rgba(255, 255, 255, .18); }
  .v2.sheet-open .ph-art .p-ring { display: none; }
  .v2.sheet-open .p-info { order: 2; flex: none; }
  .v2.sheet-open .p-title { font-size: 17px; white-space: normal; }
  .v2.sheet-open .ph-phrase { display: block; margin: 6px 0 10px; font-size: 13px; opacity: .65; }
  .v2.sheet-open .p-time { display: flex; }
  .v2.sheet-open .p-ctrl { order: 3; justify-content: center; gap: 30px; margin: 12px 0 10px; }
  .v2.sheet-open .p-ctrl #pPrev { display: grid; }
  .v2.sheet-open .p-ctrl .p-play { width: 66px; height: 66px; background: rgba(255, 255, 255, .92); color: #0a0f19; border: none; }
  .v2.sheet-open .ph-tools { order: 4; display: flex; justify-content: center; gap: 8px; margin: 0 0 14px; }
  .v2.sheet-open .ph-tool { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 20px; color: var(--text); font-size: 12px; opacity: .7; white-space: nowrap; }
  .v2.sheet-open .ph-tool[aria-pressed="true"] { opacity: 1; background: rgba(255, 255, 255, .12); }
  .v2.sheet-open .ph-tool svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .v2.sheet-open .ph-album { order: 5; display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: 12px 2px 8px; border-top: 1px solid rgba(255, 255, 255, .1);
    font-family: 'Unbounded', 'Noto Sans Web', sans-serif; font-weight: 300; font-size: 16px; color: #fff; }
  .v2.sheet-open .ph-album span { font-family: 'Noto Sans Web', sans-serif; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #c9ced6; }
  .v2.sheet-open .ph-list { order: 6; display: block; list-style: none; margin: 0 -8px; padding: 0; }
  .v2.sheet-open .ph-list li { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 14px; font-size: 14px; }
  .v2.sheet-open .ph-list li.current { background: rgba(255, 255, 255, .1); }
  .v2.sheet-open .ph-list .ln { font-size: 12px; width: 22px; opacity: .55; }
  .v2.sheet-open .ph-list .lt { flex: 1; line-height: 1.3; }
  .v2.sheet-open .ph-list .ld { font-size: 11px; opacity: .45; }
  .v2.sheet-open .ph-list li.locked .ln, .v2.sheet-open .ph-list li.locked .lt { opacity: .35; }
  .v2.sheet-open .ph-list .eq { display: none; }
  .v2.sheet-open .ph-list li.current.on .eq { display: flex; }
  .v2.sheet-open .ph-list li.current.on .ld { display: none; }
  .v2.sheet-open .ph-rel { flex: none; color: var(--text); text-decoration: none; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid #ffffff45; border-radius: 20px; padding: 6px 10px; }
  .v2.sheet-open .share-pop { bottom: calc(100% + 8px); right: 0; }
}
@media (max-width: 980px) {
  /* con la tarjeta abierta, el velo tapa también la cabecera: tocar el hueco de arriba solo cierra (no pulsa el logo de detrás) */
  body.sheet-open::after { z-index: 45; }
  .v2.sheet-open .player.phone { z-index: 50; }
}