/* Full-screen "Now playing" sheet for phones (js/nowplaying.js). */
.np-sheet{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;gap:0;padding:max(10px,env(safe-area-inset-top)) 22px max(18px,env(safe-area-inset-bottom));background:#080808;color:var(--text);overflow:hidden;transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);touch-action:pan-x}
.np-sheet[hidden]{display:none}
.np-sheet.open{transform:none}
.np-bg{position:absolute;inset:-25%;z-index:-1;background-size:cover;background-position:center;filter:blur(70px) saturate(1.25);opacity:.34;transition:background-image .3s}
.np-sheet::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,8,8,.35),#080808 78%)}

.np-top{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:48px}
.np-close,.np-top-spacer{width:44px;height:44px;flex:0 0 auto}
.np-close{display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--text);cursor:pointer}
.np-close svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.np-label{font-size:.7rem;letter-spacing:.2em;color:var(--gold);font-weight:700}

.np-cover{flex:1 1 auto;min-height:0;width:100%;display:grid;place-items:center;padding:8px 0}
.np-cover img{width:min(100%,46dvh,420px);aspect-ratio:1;object-fit:cover;border-radius:14px;background:#171717;border:1px solid var(--gold-border);box-shadow:0 0 0 1px rgba(232,197,71,.06),0 22px 60px rgba(0,0,0,.6),0 0 70px rgba(232,197,71,.12)}
.np-sheet:not(.is-playing) .np-cover img{transform:scale(.92);transition:transform .3s}
.np-cover img{transition:transform .3s}

.np-meta{width:100%;display:flex;align-items:center;gap:12px;margin-top:10px}
.np-copy{flex:1;min-width:0;display:grid;gap:3px}
.np-copy strong{font-size:1.32rem;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.np-artist{justify-self:start;max-width:100%;padding:0;border:0;background:transparent;color:var(--muted);font:inherit;font-size:.95rem;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.np-icon{width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--text);cursor:pointer;position:relative}
.np-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.np-icon svg .fill,.np-play svg .fill{fill:currentColor;stroke:none}
.np-like.active{color:var(--gold)}
.np-like.active svg{fill:currentColor}
.np-like:disabled{opacity:.4}

.np-seek{width:100%;margin-top:14px}
.np-seek input{width:100%;height:26px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;touch-action:none}
.np-seek input::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:linear-gradient(90deg,var(--gold) var(--range,0%),rgba(255,255,255,.18) var(--range,0%))}
.np-seek input::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;margin-top:-5px;border-radius:50%;background:var(--gold-bright);border:0;box-shadow:0 0 0 4px rgba(232,197,71,.2)}
.np-seek input::-moz-range-track{height:5px;border-radius:3px;background:rgba(255,255,255,.18)}
.np-seek input::-moz-range-progress{height:5px;border-radius:3px;background:var(--gold)}
.np-seek input::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:var(--gold-bright)}
.np-times{display:flex;justify-content:space-between;margin-top:2px;font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}

.np-controls{width:100%;display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.np-play{width:68px;height:68px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--gold);color:#17140a;cursor:pointer;box-shadow:0 8px 26px rgba(232,197,71,.28)}
.np-play:active{transform:scale(.96)}
.np-play svg{width:30px;height:30px}
.np-mode{color:#9a9a93}
.np-mode.active{color:var(--gold)}
.np-mode.active::after{content:"";position:absolute;bottom:3px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--gold)}
.np-one{display:none;position:absolute;top:10px;right:9px;font-size:.55rem;font-weight:800;line-height:1}
.np-mode.one .np-one{display:block}

html.np-open,html.np-open body{overflow:hidden}
@media (min-width:721px){.np-sheet{display:none!important}}
@media (max-height:640px){.np-cover img{width:min(100%,38dvh)}.np-copy strong{font-size:1.15rem}}
@media (prefers-reduced-motion:reduce){.np-sheet,.np-cover img,.np-bg{transition:none}}

/* Library panel on phones (js/drawer.js): it slides in and follows the finger. */
@media (max-width:720px){
  html:not(.embedded) .sidebar{display:flex;position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:40;border-radius:0 12px 12px 0;transform:translateX(-104%);visibility:hidden;box-shadow:none;padding-top:max(16px,env(safe-area-inset-top));transition:transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s .24s,box-shadow .24s}
  html:not(.embedded) .sidebar.open{transform:none;visibility:visible;box-shadow:20px 0 70px rgba(0,0,0,.72);transition:transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s,box-shadow .24s}
  .drawer-scrim{position:fixed;inset:0;z-index:39;background:#000;opacity:0;pointer-events:none;transition:opacity .24s}
  html.drawer-open .drawer-scrim{opacity:.6;pointer-events:auto}
  html.drawer-open{overflow:hidden}
}
@media (min-width:721px){.drawer-scrim{display:none}}