/* Full player (opens from the now-bar) — a Soc.sheet tinted by the on-air cover colour. */
/* The whole sheet is painted with the on-air cover: --bg1 (top) and --bg2 (middle) are the cover's two colours, toned dark enough
   for white type (see tone() in player.js); the bottom falls to near-black so the controls always read.
   Layout: a column — the head, then .pl as the only scroller — so the colour and the aurora stay put while the content scrolls. */
.soc-sheet.pl-sheet{ --pc:#7c5cff; --bg1:#2a2250; --bg2:#1c1838; padding:0; display:flex; flex-direction:column; overflow:hidden; max-height:min(94vh, calc(100dvh - env(safe-area-inset-top) - 14px));
  background:linear-gradient(180deg, var(--bg1) 0%, color-mix(in srgb, var(--bg2) 88%, #08080c) 46%, #08080c 100%); }
.pl-sheet .soc-head{ background:none; flex:none; margin:0; height:calc(44px + env(safe-area-inset-top)); padding-top:calc(10px + env(safe-area-inset-top)); }
.pl-sheet .soc-grab{ background:rgba(255,255,255,.28); }
/* minimise: a chevron pointing down, top right (the grab handle still drags the screen away) */
.pl-sheet .soc-x{ right:14px; left:auto; top:calc(8px + env(safe-area-inset-top)); width:36px; height:36px; background:rgba(255,255,255,.12); color:#fff; }
.pl-sheet .soc-x:active{ background:rgba(255,255,255,.22); }
.pl{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:6px 24px calc(18px + env(safe-area-inset-bottom));
  -webkit-mask-image:linear-gradient(transparent 0, #000 12px); mask-image:linear-gradient(transparent 0, #000 12px); }
.pl::-webkit-scrollbar{ display:none; }
/* phones: the player is the whole screen, not a card laid over the page */
@media (max-width:500px){
  .pl-sheet .soc-x{ display:none; }   /* a phone closes it by pulling it down or tapping the handle: no button over the picture */
  .pl-sheet .soc-grab{ width:48px; height:5px; }
  .pl-sheet .soc-head{ cursor:pointer; }
  .soc-sheet.pl-sheet{ top:0; bottom:0; height:auto; max-height:none; width:100%; border:0; border-radius:0; box-shadow:none; }
}
.pl-me{ position:absolute; right:-9px; bottom:-9px; width:34px; height:34px; border-radius:50%; overflow:hidden; border:3px solid rgba(10,10,16,.72); display:grid; place-items:center; background:#1a1826; cursor:pointer; }
.pl-me img{ position:static; width:100%; height:100%; border-radius:50%; }
.pl-t{ margin:0; font:800 21px/1.18 var(--disp); letter-spacing:-.02em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pl-a{ margin:3px 0 0; font:600 14px/1.3 var(--sans); color:#c3c1d0; }
.pl-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 6px; }
.pl-chip{ display:inline-flex; align-items:center; gap:6px; max-width:100%; font:700 11.5px var(--sans); padding:6px 10px; border-radius:99px; background:rgba(255,255,255,.07); color:#d6d4e2; border:0; }
.pl-chip.live{ color:var(--ok); } .pl-chip.live i{ position:relative; width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); }
.pl-chip.live i::after{ content:""; position:absolute; inset:-5px; border-radius:50%; background:radial-gradient(circle, rgba(56,211,155,.6), transparent 66%); animation:ripple 2.2s ease-out infinite; }
.pl-chip.st{ cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.pl-bar{ position:relative; height:4px; border-radius:4px; background:rgba(255,255,255,.1); margin:8px 0 16px; overflow:visible; }
.pl-bar b{ position:absolute; left:0; top:0; bottom:0; width:var(--w); border-radius:4px; overflow:hidden; background:var(--rc); animation:plfill 1.3s cubic-bezier(.2,.9,.25,1) both .15s; }
.pl-bar b::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%); background-size:240% 100%; background-repeat:no-repeat; animation:glint 3.2s ease-in-out 1.4s infinite; }
/* the head of the bar: a small opaque round "stone" (faceted like a brilliant from above) that flashes with a four-point star */
.pl-bar::after{ content:""; position:absolute; top:50%; left:var(--w); width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
  background:radial-gradient(circle at 36% 32%, #fff 0 22%, transparent 24%),
             conic-gradient(from 0deg, #fff 0 12%, #d6ccff 12% 25%, #9d8bff 25% 37%, #f4f1ff 37% 50%, #bfb2ff 50% 62%, #8472f0 62% 75%, #fff 75% 87%, #cfc4ff 87% 100%);
  box-shadow:0 0 5px rgba(255,255,255,.7), 0 0 12px color-mix(in srgb, var(--pc) 70%, transparent);
  animation:plgem 2.6s ease-in-out 1.2s infinite, plsparkin 1.3s cubic-bezier(.2,.9,.25,1) both .15s; }
.pl-bar::before{ content:""; position:absolute; z-index:1; top:50%; left:var(--w); width:22px; height:22px; margin:-11px 0 0 -11px; opacity:0; pointer-events:none;
  background:linear-gradient(90deg, transparent, #fff 50%, transparent) center/100% 1.5px no-repeat, linear-gradient(0deg, transparent, #fff 50%, transparent) center/1.5px 100% no-repeat;
  animation:pltwinkle 2.6s ease-in-out 1.2s infinite, plsparkin 1.3s cubic-bezier(.2,.9,.25,1) both .15s; }
/* same rank + % as the last render (play/pause, any re-render): no entrance at all — the fill and its stone are already in
   place. (Zeroing only some delays left the stone .15s behind the fill, and the fill regrew from empty every time.) */
.pl-bar.still b{ animation:none; }
.pl-bar.still::after{ animation:plgem 2.6s ease-in-out 1.2s infinite; }
.pl-bar.still::before{ animation:pltwinkle 2.6s ease-in-out 1.2s infinite; }
@keyframes plgem{ 0%,30%,100%{ filter:none; transform:none; } 10%{ filter:brightness(1.7) saturate(.6); transform:scale(1.3); } }
@keyframes pltwinkle{ 0%,100%{ opacity:0; transform:scale(.3) rotate(0); } 10%{ opacity:1; transform:scale(1) rotate(45deg); } 26%{ opacity:0; transform:scale(.45) rotate(90deg); } }
@keyframes plfill{ from{ width:0; } }
@keyframes plsparkin{ from{ left:0; } }
/* the rank line: letters decode into place, then a ripple of light passes through them */
.pl-rank{ font:600 11.5px/1.5 var(--sans); color:var(--muted); margin:8px 0 0; letter-spacing:.01em; }
.pl-rank .rw{ display:inline-block; white-space:nowrap; vertical-align:top; }
/* every letter is a slot: a window one line tall; the glyph is stacked twice inside, so rolling the stack up one line
   pushes the old letter out through the top while the same letter comes in from below */
.pl-rank .rc{ display:inline-block; vertical-align:top; height:1.5em; line-height:1.5em; overflow:hidden; white-space:pre; }
.pl-rank .rc.sp{ width:.3em; }
.pl-rank .rc{ color:var(--rcol, var(--muted)); }
.pl-rank .ri{ display:block; }
.pl-rank.go .ri{ animation:rcroll 1.1s cubic-bezier(.65,0,.25,1) both; animation-delay:calc(var(--i) * 48ms); }
.pl-rank .ri::after{ content:attr(data-c); display:block; }
.pl-rank.go .rc{ animation:rctint 1.1s ease-in-out both; animation-delay:calc(var(--i) * 48ms); }
.pl-rank .rc.scr{ color:var(--faint); animation:none; } .pl-rank .rc.scr .ri{ animation:none; }
.pl-rank .rc.set .ri{ animation:rcland .42s cubic-bezier(.2,.9,.25,1); }
.pl-rank.go .rc.set .ri{ animation:rcroll 1.1s cubic-bezier(.65,0,.25,1) both; animation-delay:calc(var(--i) * 48ms); }
@keyframes rcland{ from{ transform:translateY(100%); } to{ transform:none; } }
@keyframes rcroll{ 0%{ transform:translateY(0); } 60%,99.9%{ transform:translateY(-50%); } 100%{ transform:translateY(0); } }
@keyframes rctint{ 0%,100%{ color:var(--rcol, var(--muted)); } 25%{ color:#fff; } }
/* things that change get a soft entrance */
.pl-t.in, .pl-a.in{ animation:plin .5s cubic-bezier(.2,.9,.25,1) both; } .pl-a.in{ animation-delay:.06s; }
.pl-cover.in{ animation:plcover .6s cubic-bezier(.2,.9,.25,1) both; }
@keyframes plin{ from{ opacity:0; transform:translateY(8px); } }
@keyframes plcover{ from{ opacity:0; transform:scale(.92) rotate(-1.5deg); } }
@keyframes plbreath{ 50%{ opacity:1; transform:scale(1.08); } }
.pl-play{ position:relative; } .pl-play.live::after{ content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid color-mix(in srgb, var(--pc) 80%, #fff); pointer-events:none; animation:plhalo 2.6s ease-out infinite; }
@keyframes plhalo{ 0%{ transform:scale(.96); opacity:.7; } 100%{ transform:scale(1.5); opacity:0; } }
/* the colour behind the cover drifts, slowly, and follows the cover when it changes */
@property --pc{ syntax:"<color>"; inherits:true; initial-value:#7c5cff; }
@property --pc2{ syntax:"<color>"; inherits:true; initial-value:#5b43d6; }
@property --bg1{ syntax:"<color>"; inherits:true; initial-value:#2a2250; }
@property --bg2{ syntax:"<color>"; inherits:true; initial-value:#1c1838; }
.soc-sheet.pl-sheet{ transition:--pc .9s ease, --pc2 .9s ease, --bg1 .9s ease, --bg2 .9s ease, transform .38s cubic-bezier(.2,.9,.25,1); }
.pl-aur{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; border-radius:inherit; }
.pl-aur i{ position:absolute; border-radius:50%; aspect-ratio:1; will-change:transform; }   /* soft by gradient, not by filter:blur — a blurred, moving layer is repainted every frame */
.pl-aur i:nth-child(1){ width:130%; left:-40%; top:-14%; opacity:.75; background:radial-gradient(closest-side, var(--bg1), transparent); animation:aur1 15s ease-in-out infinite alternate; }
.pl-aur i:nth-child(2){ width:120%; right:-50%; top:28%; opacity:.7; background:radial-gradient(closest-side, var(--bg2), transparent); animation:aur2 21s ease-in-out infinite alternate; }
.pl-aur i:nth-child(3){ width:100%; left:-6%; top:6%; opacity:.5; background:radial-gradient(closest-side, color-mix(in srgb, var(--bg1) 50%, var(--bg2)), transparent); animation:aur3 26s ease-in-out infinite alternate; }
@keyframes aur1{ to{ transform:translate(26%, 22%) scale(1.2); } }
@keyframes aur2{ to{ transform:translate(-28%, -18%) scale(.85); } }
@keyframes aur3{ to{ transform:translate(-18%, 30%) scale(1.3); } }
.pl-sheet > .soc-head, .pl-sheet > .pl{ position:relative; z-index:1; }
@media (prefers-reduced-motion:reduce){
  .pl-aur i, .pl-cover.live::before, .pl-play.live::after, .pl-chip.live i::after, .pl-bar b, .pl-bar b::after, .pl-bar::after, .pl-bar::before, .pl-rank .rc, .pl-rank .ri, .pl-t.in, .pl-a.in, .pl-cover.in{ animation:none !important; }
}
.pl-ctrl{ display:flex; align-items:center; justify-content:space-between; margin:12px 0 20px; }
.pl-b{ display:flex; flex-direction:column; align-items:center; gap:5px; width:56px; background:none; border:0; color:#d6d4e2; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent; }
.pl-b:disabled{ opacity:.35; cursor:default; }
.pl-bi{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.07); }
.pl-b:not(:disabled):active .pl-bi{ background:rgba(255,255,255,.14); }
.pl-b em{ font:700 10px var(--sans); font-style:normal; color:var(--muted); white-space:nowrap; }
.pl-b.on .pl-bi{ color:var(--accent); } .pl-b[data-a="fav"].on svg, .pl-b[data-a="save"].on svg{ fill:currentColor; } .pl-b.on em{ color:var(--accent); }
.pl-b.done .pl-bi{ color:var(--ok); background:rgba(56,211,155,.14); } .pl-b.done em{ color:var(--ok); }
.pl-play{ width:66px; height:66px; border-radius:50%; border:0; background:#fff; color:#0b0b10; display:grid; place-items:center; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.45); -webkit-tap-highlight-color:transparent; }
.pl-play:active{ transform:scale(.96); }
.pl-l{ font:800 10px var(--sans); letter-spacing:.16em; color:var(--faint); margin:0 0 8px; display:flex; gap:10px; } .pl-l span{ color:var(--air,#7dd3fc); letter-spacing:.04em; }
.pl-seg{ display:flex; gap:4px; background:rgba(255,255,255,.06); border-radius:14px; padding:4px; margin-bottom:16px; }
.pl-seg button{ flex:1; display:flex; gap:7px; justify-content:center; align-items:center; border:0; background:none; color:var(--muted); font:700 12.5px var(--sans); padding:9px 0; border-radius:11px; cursor:pointer; }
.pl-seg button.on{ background:var(--accent); color:#fff; }
.pl-vol{ display:flex; align-items:center; gap:12px; margin:0 0 16px; color:var(--muted); } .pl-vol .slider{ flex:1; margin:0; } .pl-vol span{ font:700 12px var(--sans); min-width:22px; text-align:right; font-variant-numeric:tabular-nums; }
.pl-sleep{ display:flex; flex-wrap:nowrap; gap:7px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; margin:0 -6px; padding:0 6px; }
.pl-sleep::-webkit-scrollbar{ display:none; }
.pl-sleep button{ flex:none; display:inline-flex; align-items:center; gap:6px; font:700 12px var(--sans); padding:8px 12px; border-radius:11px; border:0; background:rgba(255,255,255,.07); color:#c8c6d4; cursor:pointer; }
.pl-sleep button.on{ background:var(--accent); color:#fff; } .pl-sleep .cust{ color:var(--accent); }

/* ---- the cover as a real object: a slim slab you can turn with a finger or the mouse ---- */
.pl-cover{ --w:min(236px,62vw); --t:10px; position:relative; width:var(--w); height:var(--w); margin:6px auto 22px; perspective:900px; touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
.pl-cover:active{ cursor:grabbing; }
.pl-cover::before{ content:""; position:absolute; left:6%; right:6%; bottom:-22px; height:30px; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--pc) 80%, #000), transparent); filter:blur(12px); opacity:.75; pointer-events:none; }
.pl-cover.live::before{ animation:plbreath 5.5s ease-in-out infinite; }
.pl-obj{ position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; }
.pl-obj .pl-face{ position:absolute; inset:0; border-radius:3px; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; background:#14111f; }
.pl-obj .pl-front{ transform:translateZ(calc(var(--t) / 2)); }
.pl-obj .pl-back{ transform:rotateY(180deg) translateZ(calc(var(--t) / 2)); background:#14111f; }
.pl-obj .pl-front img, .pl-ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; pointer-events:none; }
.pl-ph{ display:grid; place-items:center; font:800 56px var(--disp); color:rgba(255,255,255,.9); }
/* the light on the front: one soft band that slides across as the slab turns, never harsh */
.pl-obj .sheen{ position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(112deg, transparent 32%, rgba(255,255,255,.26) 46%, rgba(255,255,255,.05) 54%, transparent 66%) no-repeat; background-size:260% 100%; background-position:calc(var(--sx, 50) * 1%) 0; opacity:.55; }
.pl-obj .pl-front::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(135deg, rgba(255,255,255,.14), transparent 28%, transparent 78%, rgba(0,0,0,.18)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
/* the back: the cover blurred into a dark sleeve, with the track written on it */
.pl-obj .pl-back::before{ content:""; position:absolute; inset:-20px; background:var(--bi, none) center/cover; filter:blur(22px) saturate(1.2) brightness(.55); }
.pl-obj .pl-back::after{ content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(0,0,0,.15), rgba(0,0,0,.55)); }
.pl-obj .pl-back-in{ position:absolute; z-index:2; inset:0; padding:16px; display:flex; flex-direction:column; justify-content:flex-end; gap:3px; text-align:left; }
.pl-obj .pl-back-in small{ position:absolute; top:14px; left:16px; font:800 9px var(--sans); letter-spacing:.2em; color:rgba(255,255,255,.55); }
.pl-obj .pl-back-in b{ font:800 17px/1.2 var(--disp); letter-spacing:-.01em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pl-obj .pl-back-in span{ font:600 12.5px var(--sans); color:rgba(255,255,255,.8); } .pl-obj .pl-back-in em{ font:600 10.5px var(--sans); font-style:normal; color:rgba(255,255,255,.5); margin-top:6px; }
/* edges: a pale plastic rim so the thickness reads */
.pl-obj .pl-ed{ position:absolute; opacity:var(--eo, 0); background:linear-gradient(90deg, color-mix(in srgb, var(--pc) 42%, #3a394a), color-mix(in srgb, var(--pc) 18%, #14131b)); box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16); }   /* the rim shows only once the slab is actually turned: at rest it must not read as a border */
.pl-obj .pl-ed.l, .pl-obj .pl-ed.r{ top:0; bottom:0; width:var(--t); left:calc(50% - var(--t) / 2); }
.pl-obj .pl-ed.l{ transform:rotateY(-90deg) translateZ(calc(var(--w) / 2)); } .pl-obj .pl-ed.r{ transform:rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.pl-obj .pl-ed.t, .pl-obj .pl-ed.b{ left:0; right:0; height:var(--t); top:calc(50% - var(--t) / 2); background:linear-gradient(180deg, color-mix(in srgb, var(--pc) 46%, #40404f), color-mix(in srgb, var(--pc) 16%, #14131b)); }
.pl-obj .pl-ed.t{ transform:rotateX(90deg) translateZ(calc(var(--w) / 2)); } .pl-obj .pl-ed.b{ transform:rotateX(-90deg) translateZ(calc(var(--w) / 2)); }
.pl-cover .pl-me{ z-index:5; }

@media (max-width:500px){ .pl-cover{ --w:min(78vw, 40dvh, 340px); } }