/* 🎵 the shared song player: Spotify's layout in Hikari's own colours (anime.css tokens; dark and light): a bar at the bottom,
   a «now playing» screen on phones. Prefix sb- / sbf- */
.sb{position:fixed;z-index:70;inset-inline:0;bottom:0;height:76px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:16px;padding:0 18px;
  background:var(--fg,#151F2E);color:var(--strong,#E4EDF6);border-top:1px solid var(--line,#23324A);box-shadow:0 -10px 30px rgba(0,0,0,.18);font-family:var(--font,Vazirmatn,sans-serif);transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.sb.on{transform:none}
.sb button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;display:grid;place-items:center}
.sb svg{width:20px;height:20px;fill:currentColor}
.sb-now{display:flex;align-items:center;gap:12px;min-width:0;cursor:pointer}
.sb-art{width:54px;height:54px;border-radius:8px;object-fit:cover;flex:none;background:var(--fg2,#1B2738);box-shadow:var(--shadow-s)}
.sb-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.sb-t{font-size:14px;font-weight:700;color:var(--strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;text-align:right;unicode-bidi:plaintext}
.sb-s{font-size:12px;color:var(--muted,#6C8299);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-s a{color:inherit}.sb-s a:hover{color:var(--blue);text-decoration:underline}
.sb-s.err{color:var(--red,#E85D75)}
.sb-mid{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.sb-ctl{display:flex;align-items:center;gap:22px;direction:ltr} /* the same way as the timeline */
.sb-ctl .sb-pv,.sb-ctl .sb-nx,.sb-sh,.sb-sr,.sb-x{color:var(--text,#9FADBD)}
.sb-ctl .sb-pv:hover,.sb-ctl .sb-nx:hover,.sb-sh:hover,.sb-sr:hover,.sb-x:hover{color:var(--strong)}
.sb-sh svg,.sb-sr svg{width:17px;height:17px}
.sb-sh.on{color:var(--blue)!important;position:relative}.sb-sh.on::after{content:'';position:absolute;bottom:-7px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--blue)}
.sb-pp{width:38px;height:38px;border-radius:50%;background:var(--blue,#3DB4F2)!important;color:#fff!important;box-shadow:0 6px 16px color-mix(in srgb,var(--blue,#3DB4F2) 35%,transparent);transition:transform .15s,background .15s}
.sb-pp:hover{transform:scale(1.06);background:var(--blue-d,#1E97D8)!important}.sb-pp svg{width:18px;height:18px}
.sb-pp.wait svg{animation:sbSpin 1s linear infinite}
@keyframes sbSpin{to{transform:rotate(360deg)}}
.sb-prog{display:flex;align-items:center;gap:8px;width:100%;max-width:560px;font-size:11px;color:var(--muted);direction:ltr}
.sb-bar{flex:1;height:4px;border-radius:4px;background:var(--line,#23324A);position:relative;cursor:pointer;touch-action:none}
.sb-bar i{position:absolute;inset-block:0;left:0;width:var(--p,0%);border-radius:4px;background:var(--blue)}
.sb-bar b{position:absolute;top:50%;left:var(--p,0%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px var(--blue-soft);opacity:0;transition:opacity .15s}
.sb-bar:hover b{opacity:1}
.sb-end{display:flex;align-items:center;justify-content:flex-end;gap:14px;font-size:12px;color:var(--muted)}
.sb-end a{color:var(--text);white-space:nowrap}.sb-end a:hover{color:var(--blue)}
.sb-vol{width:96px;accent-color:var(--blue)}
.sb-tag{font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:2px 8px;white-space:nowrap}
body.sb-pad{padding-bottom:84px}
body.sb-pad .hk-en,body.sb-pad .app-ban{bottom:calc(90px + env(safe-area-inset-bottom,0px))!important} /* the English note / app banner sit above the player */

/* the «now playing» screen (phones: tap the bar) */
.sbf{position:fixed;inset:0;z-index:75;display:flex;flex-direction:column;gap:18px;padding:calc(14px + env(safe-area-inset-top)) 22px calc(26px + env(safe-area-inset-bottom));color:var(--strong);font-family:var(--font,Vazirmatn,sans-serif);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c,var(--blue)) 60%,var(--bg)) 0%,color-mix(in srgb,var(--c,var(--blue)) 22%,var(--bg)) 45%,var(--bg) 100%);transform:translateY(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1);overflow:auto}
.sbf.on{transform:none}
.sbf button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;display:grid;place-items:center}
.sbf svg{fill:currentColor}
.sbf-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text)}
.sbf-top b{display:block;color:var(--strong);font-size:13px;text-align:center}
.sbf-top button svg{width:26px;height:26px}.sbf-top .sb-sr svg{width:21px;height:21px}
.sbf .sb-lk{width:44px;height:44px}.sbf .sb-lk svg{width:26px;height:26px}
.sbf-art{width:min(100%,360px);aspect-ratio:1;margin:8px auto 0;border-radius:var(--r-l,10px);object-fit:cover;box-shadow:var(--shadow);background:var(--fg2)}
.sbf-info{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:520px;width:100%;margin:0 auto}
.sbf-info div{min-width:0}
.sbf-t{font-size:22px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;text-align:right;unicode-bidi:plaintext}
.sbf-s{font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbf-s a{color:inherit}
.sbf-go{flex:none;font-size:12px;font-weight:700;color:var(--strong);background:var(--fg);border:1px solid var(--line);border-radius:99px;padding:6px 12px}
.sbf .sb-prog{max-width:520px;margin:0 auto;font-size:12px;color:var(--text)}
.sbf .sb-bar{height:5px}.sbf .sb-bar b{opacity:1}
.sbf-ctl{display:flex;align-items:center;justify-content:center;gap:30px;direction:ltr}
.sbf-ctl .sb-pv svg,.sbf-ctl .sb-nx svg{width:34px;height:34px}.sbf-ctl .sb-sh svg,.sbf-ctl .sb-sr svg{width:22px;height:22px}
.sbf .sb-pv,.sbf .sb-nx{color:var(--strong)}.sbf .sb-sh,.sbf .sb-sr{color:var(--text)}
.sbf-ctl .sb-pp{width:68px;height:68px}.sbf-ctl .sb-pp svg{width:30px;height:30px}
.sbf-note{text-align:center;font-size:12px;color:var(--muted);line-height:1.9}
.sbf-note a{color:var(--blue);text-decoration:underline}
.sbf-q{max-width:520px;width:100%;margin:0 auto;background:var(--fg);border:1px solid var(--line);border-radius:var(--r-l,10px);padding:12px}
.sbf-q h3{margin:0 0 8px;font-size:15px}
.sbf-go{align-self:center}

/* ♥, 📻 and the queue (۱۰ آبان) */
.sb-lk{flex:none;width:32px;height:32px;color:var(--text,#9FADBD);border-radius:50%;transition:transform .15s,color .15s}
.sb-lk:hover{color:var(--strong)}.sb-lk svg{width:19px;height:19px}
.sb-lk.on{color:var(--green,#4CCA51)}.sb-lk.on svg{animation:sbPop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes sbPop{40%{transform:scale(1.3)}}
.sb-rd,.sb-qb{color:var(--text,#9FADBD);position:relative}.sb-rd:hover,.sb-qb:hover{color:var(--strong)}
.sb-rd svg{width:18px;height:18px}.sb-qb svg{width:19px;height:19px}
.sb-rd.on,.sb-qb.on{color:var(--blue)}.sb-rd.on::after{content:'';position:absolute;bottom:-7px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--blue)}
.sb-s.msg{color:var(--blue)}.sb-s.msg a,.sbf-s.msg a{color:var(--blue);text-decoration:underline;font-weight:700}
.sb-full.am{font-weight:700;color:var(--strong)!important;border:1px solid var(--line);border-radius:99px;padding:3px 10px;background:var(--fg2)}
.sbf .sb-full.am{display:inline-block;margin-top:6px;text-decoration:none!important;font-size:12px}
.sbq{position:absolute;bottom:calc(100% + 10px);left:18px;width:min(380px,calc(100vw - 36px));max-height:min(62vh,520px);display:flex;flex-direction:column;background:var(--fg,#151F2E);border:1px solid var(--line);border-radius:var(--r-l,12px);box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden}
.sbq[hidden]{display:none}
.sbq-h{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px}.sbq-h b{font-size:15px;color:var(--strong)}.sbq-h button{color:var(--muted)}.sbq-h svg{width:18px;height:18px}
.sbq-l{overflow:auto;padding:0 8px 10px;overscroll-behavior:contain}
.sb-ql button{width:100%;display:flex;align-items:center;gap:10px;padding:6px;border-radius:8px;text-align:right}
.sb-ql button:hover{background:var(--fg2)}
.sb-ql img{width:38px;height:38px;border-radius:5px;object-fit:cover;flex:none;background:var(--fg2)}
.sb-ql span{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.sb-ql b{font-size:13.5px;font-weight:600;color:var(--strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;text-align:right}
.sb-ql small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-ql button.on b{color:var(--blue)}
.sb-ql button.no{opacity:.4;cursor:default}
.sb-qr{margin:10px 6px 4px;font-size:12px;font-weight:700;color:var(--blue)}
.sb-qe{margin:8px 6px 2px;font-size:11px;color:var(--muted)}
.sb-eq{display:flex;align-items:flex-end;gap:2px;height:14px;flex:none;font-style:normal}
.sb-eq i{width:3px;height:100%;background:var(--blue);border-radius:1px;transform-origin:bottom;animation:sbEq .9s ease-in-out infinite alternate}
.sb-eq i:nth-child(2){animation-delay:-.3s}.sb-eq i:nth-child(3){animation-delay:-.6s}
.sb:not(.play) .sb-eq i,.sbf .sb-eq i{animation-play-state:paused}
.sb.play~.sbf .sb-eq i{animation-play-state:running}
@keyframes sbEq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}

@media (max-width:760px){
  .sb{inset-inline:8px;bottom:calc(64px + env(safe-area-inset-bottom));height:58px;border-radius:12px;border:1px solid var(--line);padding:0 8px 0 10px;grid-template-columns:minmax(0,1fr) auto;gap:8px;
    background:color-mix(in srgb,var(--c,var(--blue)) 22%,var(--fg));box-shadow:var(--shadow);overflow:hidden}
  html.hkapp .sb{bottom:calc(10px + env(safe-area-inset-bottom))}
  .sb-art{width:42px;height:42px;border-radius:6px}
  .sb-mid{position:absolute;inset-inline:8px;bottom:0;gap:0}
  .sb-mid .sb-ctl,.sb-mid .sb-prog span{display:none}
  .sb-mid .sb-prog{max-width:none}
  .sb-mid .sb-bar{height:2px;pointer-events:none}.sb-mid .sb-bar b{display:none}
  .sb-end{gap:4px}.sb-end a,.sb-vol,.sb-end .sb-tag,.sb-end .sb-qb,.sb-end .sb-sr{display:none}
  .sb-lk{width:34px;height:34px}.sbq{display:none}
  .sb-end .sb-pp{width:38px;height:38px;background:none!important;color:var(--strong)!important;box-shadow:none}
  .sb-end .sb-pp svg{width:24px;height:24px}
  .sb-x svg{width:18px;height:18px}
  body.sb-pad{padding-bottom:132px}
  body.sb-pad .hk-en,body.sb-pad .app-ban{bottom:calc(132px + env(safe-area-inset-bottom,0px))!important}
}
@media (min-width:761px){.sb-end .sb-pp,.sbf{display:none}}
html.lite .sb,html.lite .sbf{transition:none}
@media (prefers-reduced-motion:reduce){.sb,.sbf{transition:none}.sb-pp.wait svg,.sb-lk.on svg,.sb-eq i{animation:none}}