/* Opium Zone – preview player bar. Id selectors on purpose: they sit on top of the older themed rules. */
#miniPlayer{
  --soft-c:var(--soft,#a9dfcb);--warm-c:var(--warm,#e6c3a7);--p:0%;--load:0;
  position:fixed;left:50%;bottom:22px;z-index:40;transform:translate(-50%,calc(100% + 40px));
  width:min(1040px,calc(100vw - 32px));display:flex;align-items:center;gap:16px;
  padding:10px 14px 10px 10px;border-radius:24px;
  background:linear-gradient(115deg,hsl(var(--tone,188) 32% 14% / .9),hsl(var(--tone,188) 24% 9% / .94) 60%,hsl(var(--tone,188) 18% 8% / .95));
  border:1px solid hsl(0 0% 100% / .12);
  box-shadow:0 30px 70px -18px hsl(0 0% 0% / .75),0 0 0 1px hsl(0 0% 0% / .25),inset 0 1px hsl(0 0% 100% / .07);
  backdrop-filter:saturate(1.5) blur(26px);-webkit-backdrop-filter:saturate(1.5) blur(26px);
  transition:transform .55s cubic-bezier(.2,.75,.2,1),box-shadow .4s;
  isolation:isolate;overflow:visible
}
#miniPlayer.visible{transform:translate(-50%,0)}
/* soft accent glow while playing + progress hairline on the top edge */
#miniPlayer:before{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 140% at 8% 50%,color-mix(in srgb,var(--soft-c) 18%,transparent),transparent 70%);opacity:0;transition:opacity .6s}
#miniPlayer.isPlaying:before{opacity:1}
#miniPlayer:after{content:"";position:absolute;left:22px;right:22px;top:-1px;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--soft-c),var(--warm-c)) 0 0/var(--p) 100% no-repeat;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--soft-c) 70%,transparent));opacity:.9}

/* cover with live equaliser */
#miniPlayer .miniArt{position:relative;flex:none;width:56px;height:56px;border-radius:14px;overflow:hidden;
  box-shadow:0 6px 18px hsl(0 0% 0% / .45);transition:box-shadow .5s}
#miniPlayer.isPlaying .miniArt{box-shadow:0 6px 18px hsl(0 0% 0% / .45),0 0 0 1.5px color-mix(in srgb,var(--soft-c) 70%,transparent),0 0 22px color-mix(in srgb,var(--soft-c) 35%,transparent)}
#miniPlayer .miniArt img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .6s,filter .4s}
#miniPlayer.isPlaying .miniArt img{transform:scale(1.06);filter:brightness(.62)}
#miniPlayer .miniEq{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:3px;opacity:0;transition:opacity .3s}
#miniPlayer.isPlaying .miniEq{opacity:1}
#miniPlayer .miniEq i{display:block;width:3px;height:20px;border-radius:2px;background:#fff;transform-origin:center;animation:ozMiniEq .9s ease-in-out infinite alternate;transform:scaleY(.35)}
#miniPlayer .miniEq i:nth-child(2){animation-duration:.7s;animation-delay:-.3s}
#miniPlayer .miniEq i:nth-child(3){animation-duration:1.05s;animation-delay:-.6s}
#miniPlayer .miniEq i:nth-child(4){animation-duration:.8s;animation-delay:-.15s}
@keyframes ozMiniEq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}

/* title + meta */
#miniPlayer .miniInfo{flex:0 1 230px;min-width:0}
#miniPlayer .miniInfo strong{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:#f1f5f1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#miniPlayer .miniInfo small{display:block;margin-top:3px;font-size:12px;letter-spacing:.02em;color:hsl(var(--tone,188) 10% 66%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
#miniPlayer[data-loading] .miniInfo small{color:var(--soft-c)}

/* play / pause with download ring */
#miniPlayer .miniPlay{position:relative;flex:none;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;
  background:var(--soft-c);color:hsl(var(--tone,188) 40% 10%);cursor:pointer;opacity:1;
  box-shadow:0 6px 20px -6px color-mix(in srgb,var(--soft-c) 70%,transparent);transition:transform .2s cubic-bezier(.2,.7,.2,1),filter .2s,background .3s}
#miniPlayer .miniPlay:hover{transform:scale(1.06);filter:brightness(1.07)}
#miniPlayer .miniPlay:active{transform:scale(.96)}
#miniPlayer .miniPlayIcon{display:grid;place-items:center;width:22px;height:22px}
#miniPlayer .miniPlayIcon svg{display:block;width:22px;height:22px}
/* the play triangle is optically centred: nudge right by a sixth of its width */
#miniPlayer .miniPlay[data-state=paused] .miniPlayIcon svg{transform:translateX(1px)}
#miniPlayer .miniLoadRing{position:absolute;inset:-5px;width:58px;height:58px;transform:rotate(-90deg);pointer-events:none;opacity:0;transition:opacity .25s}
#miniPlayer .miniLoadRing circle{fill:none;stroke:var(--soft-c);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:calc(var(--load) * 1) 1;transition:stroke-dasharray .15s linear}
#miniPlayer[data-loading] .miniLoadRing{opacity:1}
#miniPlayer[data-loading] .miniPlay{background:hsl(0 0% 100% / .1);color:var(--soft-c);box-shadow:none;cursor:progress}
#miniPlayer[data-loading] .miniPlayIcon{animation:ozMiniPulse 1s ease-in-out infinite alternate}
@keyframes ozMiniPulse{from{opacity:.45}to{opacity:1}}

/* waveform timeline */
#miniPlayer .miniTimeline{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px}
#miniPlayer .miniTime{flex:none;min-width:34px;font-size:12px;color:hsl(var(--tone,188) 10% 62%);font-variant-numeric:tabular-nums;letter-spacing:.02em}
#miniPlayer #miniDuration{text-align:right}
#miniPlayer .miniWave{position:relative;flex:1 1 auto;min-width:60px;height:40px}
#miniPlayer .miniWave canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#miniPlayer .miniWave input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;display:block;-webkit-appearance:none;appearance:none;background:none}
#miniPlayer .miniWave:has(input:focus-visible){outline:2px solid var(--soft-c);outline-offset:4px;border-radius:8px}

/* volume */
#miniPlayer .miniVolume{flex:none;display:flex;align-items:center;gap:6px;padding-left:14px;border-left:1px solid hsl(0 0% 100% / .09)}
#miniPlayer .miniMute{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:none;color:hsl(0 0% 100% / .82);cursor:pointer;opacity:1;transition:background .2s,color .2s}
#miniPlayer .miniMute:hover{background:hsl(0 0% 100% / .08);color:#fff}
#miniPlayer .miniMute svg{display:block;width:21px;height:21px}
#miniPlayer #miniVolume{--v:85%;width:96px;height:22px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;display:block}
#miniPlayer #miniVolume::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--soft-c) var(--v),hsl(0 0% 100% / .16) var(--v))}
#miniPlayer #miniVolume::-moz-range-track{height:4px;border-radius:4px;background:hsl(0 0% 100% / .16)}
#miniPlayer #miniVolume::-moz-range-progress{height:4px;border-radius:4px;background:var(--soft-c)}
#miniPlayer #miniVolume::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 8px hsl(0 0% 0% / .45);transform:scale(.85);transition:transform .15s}
#miniPlayer #miniVolume::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 8px hsl(0 0% 0% / .45)}
#miniPlayer #miniVolume:hover::-webkit-slider-thumb,#miniPlayer #miniVolume:focus-visible::-webkit-slider-thumb{transform:scale(1.05)}
#miniPlayer #miniVolume:focus-visible{outline:2px solid var(--soft-c);outline-offset:4px;border-radius:6px}

/* close */
#miniPlayer .miniClose{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;color:hsl(0 0% 100% / .6);opacity:1;transition:background .2s,color .2s}
#miniPlayer .miniClose:hover{background:hsl(0 0% 100% / .08);color:#fff}
#miniPlayer .miniClose svg{width:18px;height:18px}

/* the row that is loading pulses gently */
.soundRow.isLoading .soundPlay{animation:ozMiniPulse .8s ease-in-out infinite alternate}

/* narrower screens: waveform drops to its own row, hardware volume replaces the slider */
@media (max-width:760px){
  #miniPlayer{bottom:12px;width:calc(100vw - 20px);flex-wrap:wrap;gap:10px 12px;padding:10px 10px 8px;border-radius:20px}
  #miniPlayer .miniArt{width:46px;height:46px;border-radius:12px}
  #miniPlayer .miniInfo{flex:1 1 0}
  #miniPlayer .miniPlay{width:44px;height:44px}
  #miniPlayer .miniLoadRing{width:54px;height:54px}
  #miniPlayer .miniTimeline{order:5;flex:1 0 100%;gap:10px}
  #miniPlayer .miniWave{height:30px}
  #miniPlayer .miniVolume{display:none}
}
@media (prefers-reduced-motion:reduce){#miniPlayer,#miniPlayer *{transition-duration:.01ms!important}}