/* Compact window controls reserve their own column at every breakpoint. */
#player .player-heading>div:first-child{min-width:0;flex:1}
#player .player-window-actions{display:flex;flex:none;align-items:center;gap:4px}
#player .player-window-actions .small-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;min-height:32px;margin:0;padding:0;border-radius:50%}
#player .player-window-actions svg{width:18px;height:18px;display:block}
.mini-player{position:fixed;z-index:45;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(760px,calc(100% - 32px));box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"identity transport window" "timeline timeline timeline" "status status status";align-items:center;gap:8px 16px;padding:12px 16px 10px;background:var(--panel,#142c33);color:var(--ink,#eff5f4);border:1px solid #65bec366;border-radius:3px 22px 3px 22px;box-shadow:0 10px 40px #0007}
.mini-player[hidden]{display:none!important}
.mini-identity{grid-area:identity;display:flex;align-items:center;gap:12px;min-width:0;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.mini-cover{display:block;flex:0 0 44px;width:44px;height:44px;overflow:hidden;border-radius:2px 9px 2px 9px;background:#0b171a}
.mini-cover img{width:100%;height:100%;object-fit:cover}
.mini-copy{display:block;min-width:0}
.mini-eyebrow{display:block;font-size:9px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--accent,#65bec3)}
.mini-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:1.6;font-weight:500}
.mini-window-actions{grid-area:window;display:flex;gap:2px}
.mini-transport{grid-area:transport;display:flex;align-items:center;gap:4px}
.mini-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:44px;padding:0;border:0;background:transparent;color:var(--accent,#65bec3);border-radius:3px;cursor:pointer}
.mini-icon svg{display:block;width:20px;height:20px}
.mini-icon:hover,.mini-identity:hover{color:var(--ink,#eff5f4)}
.mini-player .mini-play{width:40px;height:40px;border:1px solid var(--accent,#65bec3);border-radius:50%;margin-inline:3px}
.mini-player .mini-window-actions .mini-icon{width:32px;color:var(--muted,#a7bfc2)}
#mini-volume-host{display:flex;align-items:center}
.mini-player .volume-button svg{width:24px;height:24px}
.mini-player .volume-popover{right:0;bottom:calc(100% + 15px)}
.mini-timeline{grid-area:timeline;display:flex;align-items:center;gap:10px;min-width:0;font-size:10px;line-height:1.2;color:var(--muted,#a7bfc2);font-variant-numeric:tabular-nums}
#mini-seek{flex:1;min-width:0;width:100%;height:20px;margin:0;padding:0;accent-color:var(--accent,#65bec3);cursor:pointer}
.mini-status{grid-area:status;margin:0;font-size:11px;line-height:1.5;color:var(--muted,#a7bfc2)}
body.mini-player-active{padding-bottom:140px}
body.mini-player-active .back-to-top{bottom:calc(142px + env(safe-area-inset-bottom,0px))}
@media(max-width:600px){
 .mini-player{bottom:calc(10px + env(safe-area-inset-bottom,0px));width:calc(100% - 20px);padding:8px 10px 6px;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"identity transport window" "timeline timeline timeline" "status status status";gap:3px 6px;border-radius:3px 16px 3px 16px}
 .mini-cover{width:34px;height:34px;flex-basis:34px}
 .mini-identity{gap:8px}.mini-title{font-size:12px;line-height:1.4}
 .mini-eyebrow{display:none}
 .mini-transport{gap:2px}
 .mini-transport .mini-icon{width:34px;height:40px}
 .mini-player .mini-play{width:36px;height:36px;margin-inline:0}
 .mini-player .mini-window-actions .mini-icon{width:30px;height:40px}
 /* Cover/title opens the full player; keep the main mobile actions directly visible. */
 #mini-previous,#mini-expand{display:none}
 #mini-volume-host{display:flex;flex:none}
 .mini-player .volume-button{width:34px;min-width:34px;height:40px;min-height:40px;padding:0}
 .mini-player .volume-popover{box-sizing:border-box;width:min(220px,calc(100vw - 48px))}
 .mini-timeline{gap:7px;font-size:9px}
 #mini-seek{height:20px}
 body.mini-player-active{padding-bottom:112px}
 body.mini-player-active .back-to-top{bottom:calc(114px + env(safe-area-inset-bottom,0px))}
}
/* Equal square dimensions prevent oval controls, regardless of input type. */
#player .player-window-actions{gap:7px;align-items:flex-start}
#player #player-close,#player #player-minimize{box-sizing:border-box;width:36px;height:36px;min-width:36px;max-width:36px;min-height:36px;max-height:36px;aspect-ratio:1;padding:0;margin:0;flex:0 0 36px;border-radius:50%;align-self:flex-start}
#player #player-close svg,#player #player-minimize svg{display:block;width:16px;height:16px;flex:none}
/* Let native wheel/touch scrolling continue into the containing modal. */
#player #tracklist-entries,#player #mix-tracklist{overscroll-behavior-y:auto;touch-action:pan-y pinch-zoom}
#player.player-panel{overscroll-behavior-y:contain}

/* Artwork and its dark backing share one fade. Content remains fully opaque. */
@media(max-width:700px){
 #player .player-layout{position:relative;isolation:isolate;grid-template-columns:minmax(0,1fr);background:transparent;overflow:visible}
 #player .player-detail{position:relative;z-index:1;background:transparent}
 #player .player-layout::before,#player .player-layout::after,
 #player .player-detail::before,#player .player-detail::after{content:none}
 #player #player-cover{display:block;position:absolute;inset:0 0 auto;width:auto;max-width:none;height:100%;max-height:none;aspect-ratio:auto;margin:0;border:0;border-radius:0;box-shadow:none;pointer-events:none;z-index:0;opacity:1;background:#0b171a;overflow:hidden;
 -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 20%,rgba(0,0,0,.82) 42%,rgba(0,0,0,.38) 65%,rgba(0,0,0,.08) 85%,transparent 100%);
 mask-image:linear-gradient(to bottom,#000 0%,#000 20%,rgba(0,0,0,.82) 42%,rgba(0,0,0,.38) 65%,rgba(0,0,0,.08) 85%,transparent 100%);
 -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
 #player #player-cover img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:.24;filter:none}
 #player #player-cover::before,#player #player-cover::after{content:none}
}

/* Keep decorative artwork inside the content width; allow vertical modal scrolling. */
#player.player-panel{box-sizing:border-box;max-width:calc(100vw - 24px);overflow-x:hidden;overflow-y:auto}
#player .player-layout,#player .player-detail,#player .player-heading,#player .player-navigation{min-width:0}
@media(max-width:700px){
 #player .player-layout{width:100%;max-width:100%;box-sizing:border-box}
 #player .player-heading{gap:12px}
 #player .player-metadata{max-width:100%;column-gap:8px}
 #player .player-release{white-space:normal;overflow-wrap:anywhere}
 #player .player-navigation{flex-wrap:wrap}
 #player .player-navigation>div{min-width:0;max-width:100%}
 #player .player-controls{flex-wrap:wrap}
 #player #tracklist-entries{overflow-wrap:anywhere}
}

/* Mobile full-bleed artwork: the layout owns the full inner panel width.
   Text padding lives on the detail column, not on the decorative layer. */
@media(max-width:700px){
 #player.player-panel{--player-mobile-padding:22px;padding:var(--player-mobile-padding);overflow-x:hidden}
 #player .player-layout{box-sizing:border-box;position:relative;left:auto;right:auto;transform:none;
  width:calc(100% + 2 * var(--player-mobile-padding));max-width:none;
  margin:calc(-1 * var(--player-mobile-padding)) calc(-1 * var(--player-mobile-padding)) 0;
  padding:0;gap:0;isolation:isolate}
 #player .player-detail{box-sizing:border-box;width:100%;min-width:0;margin:0;
  padding:var(--player-mobile-padding);padding-bottom:0;transform:none}
 #player #player-cover{box-sizing:border-box;inset:0;left:0;right:0;top:0;bottom:0;
  width:100%;height:100%;min-width:0;max-width:100%;margin:0;padding:0;
  transform:none;translate:none;scale:none;align-self:stretch;justify-self:stretch}
 #player #player-cover img{box-sizing:border-box;inset:0;width:100%;height:100%;max-width:none;
  margin:0;padding:0;transform:none;translate:none;scale:none;object-fit:cover;object-position:center top}
}

/* Matching badge heights; release label and date share one text style. */
#player .player-metadata .genre-badge,
#player .player-metadata .player-release{box-sizing:border-box;display:inline-flex;align-items:center;min-height:30px;align-self:center;margin:0}
#player .player-metadata .player-release{column-gap:.3em;flex-wrap:wrap;font-weight:400;color:var(--muted,#a7bfc2);border-radius:0}
#player .player-metadata .player-release time{font:inherit;color:inherit;letter-spacing:inherit;font-variant-numeric:tabular-nums}
#player .player-metadata .player-release[hidden]{display:none}