.player{margin-top:28px;border:1px solid var(--border);background:var(--bg);overflow:hidden}
.player canvas.lp{display:block;width:100%;cursor:pointer;background:linear-gradient(180deg,var(--bg),var(--hov2))}
.pl-ui{display:flex;align-items:center;gap:16px;padding:14px 18px}
.pl-play{width:48px;height:48px;padding:0;justify-content:center;font-size:16px}
.pl-info{display:flex;flex-direction:column;min-width:0}.pl-info b{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-time{font-size:12px;color:var(--text2)}
.pl-bar{height:10px;margin:0 18px;background:var(--hov);cursor:pointer;position:relative}
.pl-bar i{position:absolute;inset:0 auto 0 0;width:0;background:repeating-linear-gradient(90deg,var(--brand) 0 6px,color-mix(in srgb,var(--brand) 60%,transparent) 6px 8px)}
.pl-list{list-style:none;padding:12px 0 6px;margin:0}
.pl-list .track{display:flex;gap:14px;align-items:baseline;padding:10px 18px;cursor:pointer;transition:background .15s}
.pl-list .track:hover{background:var(--hov)}.pl-list .track.on{background:var(--hov);box-shadow:inset 3px 0 0 var(--brand)}
.pl-list .n{color:var(--brand);font-size:12px}.pl-list em{color:var(--text2);font-size:12px;margin-left:auto;font-style:normal}
.player{--pbeat:0;position:relative;box-shadow:0 0 calc(var(--pbeat)*40px) calc(var(--pbeat)*4px) color-mix(in srgb,var(--brand) 35%,transparent);transition:box-shadow .1s}
.pl-stage{position:relative;background:linear-gradient(180deg,var(--bg),var(--hov2))}
.pl-stage canvas.lp{height:100%}
.player.playing .pl-play{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 40%,transparent)}
.pl-b{background:none;border:1px solid var(--border);color:var(--text2);width:36px;height:36px;font:15px var(--mono);cursor:pointer;transition:background .15s,color .15s}
.pl-b:hover{background:var(--hov);color:var(--text)}.pl-b.on{background:var(--brand);color:var(--onbrand);border-color:var(--brand)}
.pl-ui{flex-wrap:wrap}.pl-info{flex:1;min-width:120px}
.pl-vol{display:flex;align-items:center;gap:6px;color:var(--text2);font-size:13px}.pl-vol input{width:90px;accent-color:var(--brand)}
.pl-vu{display:flex;gap:3px;height:34px;align-items:flex-end}.pl-vu i{width:7px;height:100%;transform-origin:bottom;transform:scaleY(.06);background:linear-gradient(0deg,var(--brand),var(--crest) 70%,#ff5a5a);transition:transform .05s}
.pl-list .track img{width:34px;height:34px;object-fit:cover;align-self:center}
.player.has-cover.lay-scen .pl-stage::after{content:"";position:absolute;inset:0;background:var(--cover) center/cover;opacity:.16;filter:blur(18px) saturate(1.3);pointer-events:none}
/* vinyl */
.lay-skiva .pl-stage{display:flex;align-items:center;justify-content:center;--d:calc(var(--sh,340px)*.42)}
.lay-skiva .pl-stage canvas.lp{position:absolute;inset:0}
.vinyl{position:relative;height:42%;aspect-ratio:1;border-radius:50%;cursor:pointer;will-change:transform;
  background:repeating-radial-gradient(circle,#0c0c0c 0 2px,#161616 2px 4px),radial-gradient(circle,#222,#000);box-shadow:0 8px 30px rgba(0,0,0,.6),inset 0 0 0 2px #2a2a2a}
.vinyl::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 40%,rgba(255,255,255,.1) 50%,transparent 60% 90%,rgba(255,255,255,.06) 96%,transparent)}
.vinyl .label{position:absolute;inset:32%;border-radius:50%;overflow:hidden;background:var(--brand);box-shadow:0 0 0 3px #111}
.vinyl .label img{width:100%;height:100%;object-fit:cover}.vinyl .label::after{content:"";position:absolute;left:50%;top:50%;width:10%;height:10%;margin:-5% 0 0 -5%;border-radius:50%;background:var(--bg)}
/* mini */
.lay-mini{margin-top:20px}.lay-mini .pl-bar{margin-bottom:12px}
@media (max-width:640px){.pl-vol input{width:70px}.pl-vu{display:none}}
@media (prefers-reduced-motion:reduce){.vinyl{transform:none!important}.player{box-shadow:none}}
.lp-banner{position:relative;overflow:hidden;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--bg),var(--hov2))}
.lp-banner canvas{position:absolute;inset:0;width:100%;height:100%}
.lp-over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;padding:24px}
.lp-over h2{font-size:clamp(40px,10vw,128px);line-height:1;color:var(--crest);margin:0;text-shadow:4px 4px 0 var(--dim);letter-spacing:-.02em}
.lp-over p{margin-top:12px;color:var(--text);max-width:48ch}
.pl-sub{font-size:12px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pl-sub:empty{display:none}
.pl-lyrics{margin:12px 18px 0;padding:12px 14px;border-left:3px solid var(--brand);background:var(--hov2);white-space:pre-wrap;line-height:1.7;font-size:13px;color:var(--text2);max-height:260px;overflow-y:auto}
.pl-viz{font-size:16px}
.pl-vizname{position:absolute;left:14px;top:12px;padding:4px 10px;background:color-mix(in srgb,var(--bg) 80%,transparent);border:1px solid var(--brand);font-size:12px;color:var(--text);opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;pointer-events:none;z-index:2}
.pl-vizname.on{opacity:1;transform:none}
.pl-vu{cursor:pointer;position:relative}.pl-vu u{display:none}
.pl-vu[data-m=led] i{-webkit-mask:repeating-linear-gradient(0deg,#000 0 3px,transparent 3px 5px);mask:repeating-linear-gradient(0deg,#000 0 3px,transparent 3px 5px);width:9px}
.pl-vu[data-m=needle]{width:64px;height:38px;border:1px solid var(--border);background:radial-gradient(circle at 50% 100%,var(--hov2),transparent 75%);overflow:hidden}
.pl-vu[data-m=needle] i{display:none}
.pl-vu[data-m=needle] u{display:block;position:absolute;left:50%;bottom:-3px;width:2px;height:32px;margin-left:-1px;background:linear-gradient(0deg,var(--text2),#ff5a5a);transform-origin:50% 100%;transform:rotate(-50deg);transition:transform .06s}
.pl-vu[data-m=needle]::before{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--brand)}
.pl-vu[data-m=needle]::after{content:"";position:absolute;inset:5px 6px auto;height:20px;border:1px dashed var(--border);border-bottom:0;border-radius:40px 40px 0 0}
/* helskärm för effekten */
.pl-fs{position:absolute;right:10px;top:10px;z-index:3;width:34px;height:34px;background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid var(--border);color:var(--text);font:16px var(--mono);cursor:pointer;opacity:.75;transition:opacity .15s,border-color .15s}
.pl-fs:hover{opacity:1;border-color:var(--brand)}
.pl-fsbar{display:none}
.pl-stage:fullscreen{height:100%!important;width:100%;background:var(--bg);cursor:none}
.pl-stage:fullscreen.fs-awake{cursor:default}
.pl-stage:fullscreen .pl-fs{display:none}
.pl-stage:fullscreen .pl-fsbar{display:flex;position:absolute;left:0;right:0;bottom:0;z-index:4;align-items:center;gap:12px;padding:16px 22px;background:linear-gradient(transparent,rgba(0,0,0,.75));opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}
.pl-stage:fullscreen.fs-awake .pl-fsbar{opacity:1;transform:none}
.pl-fstitle{flex:1;color:#fff;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-fsbar .pl-b{background:rgba(0,0,0,.5);color:#fff;border-color:rgba(255,255,255,.25);width:40px;height:40px}
.pl-stage:fullscreen .pl-vizname{left:22px;top:20px;font-size:14px}