/* ═══════════════════════════════════════════════════════════════════════════
   SPARK M!NDS — SITE MUSIC (compact player module, drop-in) · v2 "Symbiosis"
   17-track shuffle soundtrack. Separate from the cinematic descent score.
   Files stream from  SITE FX/site theme music /  (relative → resolves at web root).
═══════════════════════════════════════════════════════════════════════════ */
:root{
  --spm-gold:#f5c542; --spm-gold-warm:#ffe066; --spm-ink:#f4f1e8; --spm-muted:#9aa0aa;
  --spm-line:rgba(255,255,255,.14); --spm-glow:rgba(245,197,66,.3);
}

/* topbar toggle (injected into .topbar-actions to match the other controls) */
#spkMusicToggle{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  border:1px solid rgba(255,255,255,.16); color:#d9dce2; background:rgba(5,7,10,.4);
  padding:8px 12px; border-radius:999px; cursor:pointer;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  transition:border-color .25s, color .25s, background .25s, transform .25s, box-shadow .25s;
}
#spkMusicToggle:hover{ border-color:rgba(255,255,255,.42); color:#fff; background:rgba(255,255,255,.04); transform:translateY(-1px); }
#spkMusicToggle.playing{ border-color:rgba(245,197,66,.55); color:var(--spm-gold-warm); box-shadow:0 0 16px -6px var(--spm-glow); }
#spkMusicToggle .spm-eq{ display:inline-flex; align-items:flex-end; gap:2px; height:12px; }
#spkMusicToggle .spm-eq i{ width:2px; height:4px; background:currentColor; border-radius:1px; }
#spkMusicToggle.playing .spm-eq i{ animation:spmEq .9s ease-in-out infinite; }
#spkMusicToggle.playing .spm-eq i:nth-child(2){ animation-delay:.15s; }
#spkMusicToggle.playing .spm-eq i:nth-child(3){ animation-delay:.3s; }
#spkMusicToggle.playing .spm-eq i:nth-child(4){ animation-delay:.45s; }
@keyframes spmEq{ 0%,100%{ height:4px; } 50%{ height:12px; } }

/* player popover */
#spkMusic{
  position:fixed; top:60px; right:clamp(12px,3vw,24px); z-index:70;
  width:min(324px, calc(100vw - 24px));
  border:1px solid rgba(245,197,66,.24); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, rgba(12,14,19,.98), rgba(6,8,12,.99));
  box-shadow:0 30px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.03) inset;
  font-family:var(--font-body,'Space Grotesk','Inter',sans-serif); color:var(--spm-ink);
  opacity:0; visibility:hidden; transform:translateY(-10px) scale(.98);
  transition:opacity .3s, transform .3s, visibility .3s; cursor:auto;
}
#spkMusic.open{ opacity:1; visibility:visible; transform:none; }
#spkMusic *{ cursor:auto; }
/* soft gold aura that breathes while playing */
#spkMusic::before{
  content:''; position:absolute; left:50%; top:-40%; width:150%; height:120%;
  transform:translateX(-50%); pointer-events:none; opacity:0; transition:opacity .5s;
  background:radial-gradient(60% 50% at 50% 0%, rgba(245,197,66,.14), transparent 70%);
}
#spkMusic.is-playing::before{ opacity:1; animation:spmAura 4.5s ease-in-out infinite; }
@keyframes spmAura{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

.spm-grip{ display:none; }

.spm-head{ display:flex; align-items:center; gap:8px; padding:12px 14px 6px; position:relative; }
.spm-head-label{ flex:1; font-family:var(--font-mark,'Orbitron',sans-serif); font-size:10px; letter-spacing:.2em; color:var(--spm-gold); text-transform:uppercase; }
.spm-head-close{ width:26px; height:26px; border-radius:50%; border:1px solid var(--spm-line); background:rgba(5,7,10,.6); color:var(--spm-muted); font-size:16px; line-height:1; cursor:pointer; transition:.2s; }
.spm-head-close:hover{ border-color:var(--spm-gold); color:#fff; }

/* small icon buttons (queue in head; shuffle/repeat in the control row) */
.spm-mini{ position:relative; width:28px; height:28px; display:grid; place-items:center;
  border:1px solid transparent; border-radius:8px; background:none; color:var(--spm-muted);
  cursor:pointer; transition:color .2s, background .2s, border-color .2s, transform .15s; overflow:hidden; }
.spm-mini svg{ width:16px; height:16px; }
.spm-mini:hover{ color:#fff; background:rgba(255,255,255,.05); }
.spm-mini:active{ transform:scale(.92); }
.spm-mini.on{ color:var(--spm-gold); border-color:rgba(245,197,66,.4); background:rgba(245,197,66,.1); box-shadow:0 0 12px -6px var(--spm-glow); }

/* live visualizer */
.spm-viz{ display:block; width:100%; height:48px; margin:2px 0 2px; opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }

.spm-track{ padding:0 14px; font-size:13.5px; font-weight:600; color:var(--spm-ink); overflow:hidden; white-space:nowrap; }
.spm-track-run{ display:inline-block; white-space:nowrap; will-change:transform; }
.spm-track-run.run{ animation:spmMarquee 9s ease-in-out infinite alternate; }
@keyframes spmMarquee{ 0%,12%{ transform:translateX(0); } 88%,100%{ transform:translateX(calc(-1 * var(--spm-shift,0px))); } }
.spm-sub{ padding:2px 14px 10px; font-size:10.5px; letter-spacing:.08em; color:var(--spm-muted); text-transform:uppercase; }

.spm-prog{ margin:0 14px; height:5px; border-radius:3px; background:rgba(255,255,255,.1); cursor:pointer; position:relative; transition:height .15s; touch-action:none; }
.spm-prog:hover{ height:7px; }
.spm-prog-buf{ position:absolute; inset:0 auto 0 0; width:0; border-radius:3px; background:rgba(255,255,255,.12); }
.spm-prog-fill{ position:absolute; inset:0 auto 0 0; width:0; border-radius:3px; background:linear-gradient(90deg,var(--spm-gold),var(--spm-gold-warm)); box-shadow:0 0 10px -2px var(--spm-glow); }
.spm-prog-knob{ position:absolute; top:50%; left:0; width:11px; height:11px; margin-left:-5.5px; border-radius:50%;
  background:var(--spm-gold-warm); box-shadow:0 0 8px var(--spm-glow); transform:translateY(-50%) scale(0); transition:transform .15s; }
.spm-prog:hover .spm-prog-knob{ transform:translateY(-50%) scale(1); }

.spm-time{ display:flex; justify-content:space-between; padding:5px 14px 0; font-size:10px; color:var(--spm-muted); letter-spacing:.06em; }

.spm-ctrls{ display:flex; align-items:center; justify-content:center; gap:10px; padding:8px 14px 6px; }
.spm-btn{ position:relative; cursor:pointer; color:var(--spm-ink); border:none; background:none; display:grid; place-items:center; transition:color .2s, transform .2s; overflow:hidden; border-radius:50%; }
.spm-btn:hover{ color:var(--spm-gold); transform:scale(1.08); }
.spm-btn svg{ width:20px; height:20px; fill:currentColor; }
.spm-play{ width:46px; height:46px; border-radius:50%; color:#1a1204;
  background:linear-gradient(135deg,var(--spm-gold-warm),var(--spm-gold)); box-shadow:0 6px 18px -6px var(--spm-glow); }
.spm-play:hover{ color:#1a1204; transform:scale(1.06); }
.spm-play svg{ width:22px; height:22px; }
/* pulse ring while playing */
.spm-play::before{ content:''; position:absolute; inset:0; border-radius:50%; border:2px solid var(--spm-gold-warm); opacity:0; }
#spkMusic.is-playing .spm-play::before{ animation:spmPulse 2.4s ease-out infinite; }
@keyframes spmPulse{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(1.75); opacity:0; } }
/* buffering spinner overrides the pulse */
#spkMusic.is-buffering .spm-play::after{ content:''; position:absolute; inset:-3px; border-radius:50%;
  border:2px solid rgba(26,18,4,.25); border-top-color:#1a1204; animation:spmSpin .7s linear infinite; }
@keyframes spmSpin{ to{ transform:rotate(360deg); } }

/* press ripple */
.spm-btn.rippling::after, .spm-mini.rippling::after{ content:''; position:absolute; left:50%; top:50%; width:8px; height:8px;
  border-radius:50%; background:rgba(245,197,66,.5); transform:translate(-50%,-50%) scale(0); animation:spmRipple .5s ease-out; }
@keyframes spmRipple{ to{ transform:translate(-50%,-50%) scale(9); opacity:0; } }

.spm-vol{ display:flex; align-items:center; gap:8px; padding:6px 14px 14px; }
.spm-volbtn{ display:grid; place-items:center; border:none; background:none; cursor:pointer; padding:0; color:var(--spm-muted); transition:color .2s; }
.spm-volbtn:hover{ color:var(--spm-gold); }
.spm-volbtn svg{ width:16px; height:16px; fill:currentColor; }
.spm-vol input[type=range]{ flex:1; -webkit-appearance:none; appearance:none; height:4px; border-radius:2px;
  background:rgba(255,255,255,.14); outline:none; cursor:pointer; }
.spm-vol input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:13px; height:13px; border-radius:50%; background:var(--spm-gold); box-shadow:0 0 8px var(--spm-glow); }
.spm-vol input[type=range]::-moz-range-thumb{ width:13px; height:13px; border:none; border-radius:50%; background:var(--spm-gold); }

/* queue */
.spm-queue{ max-height:0; overflow:hidden; border-top:1px solid rgba(255,255,255,.06); transition:max-height .26s ease; }
.spm-queue.open{ max-height:230px; }
.spm-qlist{ list-style:none; margin:0; padding:6px 6px 10px; max-height:230px; overflow-y:auto; overscroll-behavior:contain; }
.spm-qlist::-webkit-scrollbar{ width:6px; } .spm-qlist::-webkit-scrollbar-thumb{ background:rgba(245,197,66,.3); border-radius:3px; }
.spm-qitem{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; cursor:pointer;
  font-size:12.5px; color:var(--spm-muted); transition:background .18s, color .18s; }
.spm-qitem:hover{ background:rgba(255,255,255,.05); color:var(--spm-ink); }
.spm-qdot{ flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.2); transition:.2s; }
.spm-qname{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spm-qtag{ flex:0 0 auto; font-size:8px; letter-spacing:.1em; color:var(--spm-gold); border:1px solid rgba(245,197,66,.4); border-radius:4px; padding:2px 4px; }
.spm-qitem.current{ background:rgba(245,197,66,.1); color:var(--spm-ink); }
.spm-qitem.current .spm-qdot{ background:var(--spm-gold); box-shadow:0 0 8px var(--spm-glow); animation:spmDot 1.4s ease-in-out infinite; }
@keyframes spmDot{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.5); } }

/* ── mobile: dock as a bottom sheet with a drag grip + safe-area ── */
@media (max-width:560px){
  #spkMusic{ top:auto; bottom:0; right:0; left:0; width:auto;
    border-radius:20px 20px 0 0; border-bottom:0;
    transform:translateY(16px); padding-bottom:max(10px, env(safe-area-inset-bottom));
    box-shadow:0 -20px 60px -20px rgba(0,0,0,.9); }
  #spkMusic.open{ transform:none; }
  .spm-grip{ display:block; width:40px; height:4px; border-radius:99px; background:rgba(255,255,255,.22); margin:8px auto 0; }
  .spm-viz{ height:56px; }
  .spm-ctrls{ gap:16px; padding:10px 14px 8px; }
  .spm-btn svg{ width:24px; height:24px; }
  .spm-play{ width:56px; height:56px; } .spm-play svg{ width:26px; height:26px; }
  .spm-mini{ width:34px; height:34px; } .spm-mini svg{ width:18px; height:18px; }
  .spm-prog{ height:7px; } .spm-queue.open,.spm-qlist{ max-height:min(46vh,300px); }
}

@media (prefers-reduced-motion:reduce){
  #spkMusicToggle.playing .spm-eq i{ animation:none; height:8px; }
  #spkMusic.is-playing::before,#spkMusic.is-playing .spm-play::before,.spm-track-run.run,.spm-qitem.current .spm-qdot{ animation:none; }
}