/* Bad Orbit album player v3 (Sep 2026): the player is the whole page. Album art across the top fades into the
   title and transport; the track list fills the rest (beside the art on wide screens).
   Palette from the Bad Orbit wordmark: cream #ffe6ba, signal red #e4522c, ink #15191d. */
#bo-player{--cream:#ffe6ba;--red:#e4522c;--red-hi:#f26a44;--ink:#15191d;--muted:#b9ad97;--dim:#8d8577;--line:#ffe6ba1c;--bg:#11161c;
 --bo-h:640px;display:block;height:var(--bo-h);max-width:none;margin:0;color:var(--cream);font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-tap-highlight-color:transparent}
#bo-player *{box-sizing:border-box}
#bo-player button,#bo-player select{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;margin:0}
#bo-player :focus-visible{outline:2px solid var(--cream);outline-offset:2px;border-radius:8px}
#bo-player a{color:inherit;text-decoration:none}
#bo-player [hidden]{display:none!important}
#bo-player p,#bo-player h2,#bo-player h3{margin:0}
.bo-ic{width:18px;height:18px;display:block;flex:none}
.bo-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* the page is only the player: no site header, footer, back link or page title */
body:has(#bo-player)>.site-header,body:has(#bo-player)>footer,body:has(#bo-player) .destination>.back,body:has(#bo-player) .destination>h1{display:none!important}
html:has(#bo-player){overflow:hidden;height:100%;overscroll-behavior:none}
body:has(#bo-player){position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;min-height:0!important;margin:0!important;padding:0!important;background:#11161c}
body:has(#bo-player) main#content{margin:0!important;padding:0!important;min-height:0!important}
body.admin-bar:has(#bo-player){top:46px;height:calc(100% - 46px)}
@media(min-width:783px){body.admin-bar:has(#bo-player){top:32px;height:calc(100% - 32px)}}
.destination.document:has(#bo-player){padding:0!important;margin:0!important;max-width:none!important;min-height:0!important;width:auto!important}
.destination.document:has(#bo-player) .prose{max-width:none!important;margin:0!important;padding:0!important}
.bo-standalone{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;margin:0;background:#11161c;padding:0}

/* deck: full screen, no bubble */
.bo-deck{--hero-h:320px;--fade:52px;--bar:0px;position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;background:var(--bg)}
.bo-deck::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.3;background:repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 3px)}
.bo-deck audio{display:none}
.bo-stage{position:relative;display:flex;flex-direction:column;gap:8px;padding:0 0 10px;flex:1;min-height:0;min-width:0}
#bo-player .bo-handle{position:absolute;left:50%;transform:translateX(-50%);flex:none;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 26px 4px;min-width:118px;color:var(--muted);font:600 11px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;touch-action:none}
#bo-player .bo-handle:hover{color:var(--cream)}
.bo-grab{display:block;width:42px;height:4px;border-radius:99px;background:#ffe6ba59}
#bo-player .bo-handle:hover .bo-grab{background:var(--red)}
@media(prefers-reduced-motion:no-preference){
 /* the line lifts off like a ship leaving the pad, with a short burn under it */
 #bo-player .bo-handle.bo-hint .bo-grab{position:relative;animation:bo-liftoff 1.9s ease-in-out 1.2s 4 both}
 #bo-player .bo-handle.bo-hint .bo-grab::after{content:"";position:absolute;left:50%;top:100%;width:20px;height:11px;margin:1px 0 0 -10px;border-radius:99px;background:linear-gradient(#e4522ccc,#f2a15c00);opacity:0;transform-origin:50% 0;pointer-events:none;animation:bo-burn 1.9s ease-in-out 1.2s 4 both}
 @keyframes bo-liftoff{0%,62%,100%{transform:translateY(0) scaleX(1);background:#ffe6ba59;box-shadow:none}16%{transform:translateY(-2px) scaleX(.96);background:#f2a15ccc;box-shadow:0 3px 10px #e4522c40}32%{transform:translateY(-8px) scaleX(.86);background:var(--red);box-shadow:0 7px 18px #e4522c70}50%{transform:translateY(-2px) scaleX(.97);background:#f2a15c8c;box-shadow:0 3px 9px #e4522c30}}
 @keyframes bo-burn{0%,62%,100%{opacity:0;transform:scaleY(.15)}18%{opacity:.7;transform:scaleY(.65)}34%{opacity:.95;transform:scaleY(1.2)}50%{opacity:.3;transform:scaleY(.45)}}
}
.bo-scrim{position:absolute;inset:0;z-index:7;background:#05070ab3;backdrop-filter:blur(2px)}
.bo-sheet-head{display:flex;justify-content:center;padding:10px 0 6px;cursor:grab;touch-action:none}
.bo-stage>:not(.bo-hero){padding-inline:16px}

/* hero: the art takes the whole top and fades into the deck. .bo-media is where the song videos will switch in. */
.bo-hero{position:relative;height:var(--hero-h);flex:none;overflow:hidden;touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none}
.bo-media{position:absolute;inset:0;transition:transform .17s ease,opacity .17s ease;will-change:transform}
.bo-media img{pointer-events:none;-webkit-user-drag:none}
.bo-flash{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:#0d1116c7;border:1px solid #ffe6ba30;color:var(--cream);backdrop-filter:blur(8px);animation:bo-flash .5s ease forwards;pointer-events:none}
.bo-flash .bo-ic{width:32px;height:32px}
@keyframes bo-flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}30%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}}
.bo-media{-webkit-mask-image:linear-gradient(#000 calc(100% - var(--fade)),#0009 calc(100% - var(--fade) * .45),transparent);mask-image:linear-gradient(#000 calc(100% - var(--fade)),#0009 calc(100% - var(--fade) * .45),transparent)}
.bo-cover,.bo-media video{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.bo-media video{display:none;background:#04060a}
.bo-video .bo-vid{display:block}
.bo-video .bo-cover,.bo-video .bo-sides{display:none!important}
.bo-video .bo-media{-webkit-mask-image:none;mask-image:none}
.bo-cinema.bo-video .bo-media video{position:absolute;inset:0;object-fit:contain;background:#000;-webkit-mask-image:none;mask-image:none}
.bo-wide.bo-video .bo-media video{position:absolute;inset:0;object-fit:contain;-webkit-mask-image:none;mask-image:none}
.bo-modes{display:flex;justify-content:center;gap:2px;width:max-content;margin:0 auto 7px;padding:2px;border-radius:99px;background:#0d1116d9;border:1px solid #ffe6ba26}
.bo-modes[hidden]{display:none}
#bo-player .bo-mode{height:25px;padding:0 13px;border:0!important;border-radius:99px!important;background:transparent!important;color:var(--muted)!important;font:700 10px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;transition:background .2s,color .2s}
#bo-player .bo-mode.bo-on{background:var(--red)!important;color:#fff4e0!important}
#bo-player .bo-mode:not(.bo-on):hover{color:var(--cream)!important;background:#ffe6ba14!important}
/* full screen upright: the media sits at the top of the screen, the way a video app does it */
.bo-full .bo-hero{margin-top:0!important}
.bo-full .bo-info{display:none}
/* a video frame is shorter than the cover, so the player sits as one centred block */
.bo-video .bo-hero{margin-top:auto}
.bo-video .bo-transport{margin-top:0}
.bo-cinema .bo-modes{margin:0 0 5px 16px}
.bo-wide .bo-modes{margin-bottom:5px}
.bo-bottombar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding:4px max(10px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.bo-topbar>*{pointer-events:auto}
.bo-topbar-end{display:flex;gap:6px}
#bo-player .bo-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 9px;border-radius:99px;background:#0d1116d9;border:1px solid #ffe6ba2e;color:var(--cream);font:600 12px/1 system-ui,sans-serif;letter-spacing:.02em;white-space:nowrap;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .2s,border-color .2s}
#bo-player .bo-chip:hover{background:#e4522ccc;border-color:#e4522c}
#bo-player .bo-chip .bo-ic{width:16px;height:16px}
#bo-player .bo-chip-icon{width:32px;padding:0;justify-content:center}
#bo-player .bo-offline span{display:none}
#bo-player .bo-offline{position:relative}
#bo-player .bo-offline.bo-is-ready{border-color:#e4522c99!important;color:var(--red)!important}
#bo-player .bo-offline.bo-is-ready::after{content:"";position:absolute;right:-1px;top:-1px;width:11px;height:11px;border-radius:50%;background:var(--red);border:2px solid #12171d}
#bo-player .bo-offline.bo-is-busy{border-color:#e4522c99!important}
#bo-player .bo-offline .bo-ic{width:17px;height:17px}#bo-player .bo-offline.bo-is-ready .bo-ic{stroke-width:3}
#bo-player .bo-offline.bo-is-live{background:var(--red)!important;border-color:var(--red)!important;color:#fff4e0!important;animation:bo-blink 2s ease-in-out infinite}


.bo-ring{--p:0;width:16px;height:16px;border-radius:50%;flex:none;background:conic-gradient(var(--red) calc(var(--p) * 360deg),#ffe6ba33 0);-webkit-mask:radial-gradient(circle,transparent 4.5px,#000 5px);mask:radial-gradient(circle,transparent 4.5px,#000 5px)}

/* title block sits in the faded part of the art */
.bo-head{position:relative;z-index:1;margin-top:-6px;text-align:center;min-width:0}
.bo-lockup{display:flex;flex-direction:column;align-items:center;gap:3px;margin-bottom:8px!important}
.bo-logo{width:104px;height:auto;display:block;filter:drop-shadow(0 2px 8px #000c)}
.bo-lockup span{font-size:9.5px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);padding-left:.34em}
.bo-album{font-size:clamp(20px,5.4vw,30px);line-height:1.1;font-weight:800;letter-spacing:.01em;color:var(--cream);text-wrap:balance;text-shadow:0 2px 14px #000,0 2px 0 #e4522c55}
.bo-song{margin-top:6px!important;font-size:15px;font-weight:600;line-height:1.3;color:#fff4e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bo-sub{display:flex;justify-content:center;gap:10px;margin-top:3px!important;font-size:11px;letter-spacing:.06em;color:var(--dim)}
.bo-sub>span:empty{display:none}
.bo-sub>span+span:not(:empty)::before{content:"";display:inline-block;width:1px;height:9px;margin-right:10px;background:#ffe6ba33;vertical-align:-1px}

/* transport */
.bo-transport{min-width:0;margin-top:auto}
.bo-wide .bo-transport{margin-top:0}
.bo-seek{--progress:0%;display:block;width:100%;height:6px;margin:4px 0 0;border-radius:99px;appearance:none;-webkit-appearance:none;cursor:pointer;background:linear-gradient(90deg,var(--red) var(--progress),#ffe6ba26 var(--progress))}
.bo-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--cream);box-shadow:0 0 0 3px var(--red),0 0 12px #e4522caa}
.bo-seek::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--cream);box-shadow:0 0 0 3px var(--red)}
.bo-times{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;margin-top:4px}
.bo-controls{display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vw,16px);margin-top:2px}
#bo-player .bo-round{width:46px;height:46px;border-radius:50%!important;display:grid;place-items:center;color:var(--cream)!important;background:#ffe6ba0d!important;border:1px solid #ffe6ba24!important;transition:background .2s,transform .15s}
#bo-player .bo-round:hover{background:#e4522c33!important;border-color:#e4522c99!important}
#bo-player .bo-round:active{transform:scale(.94)}
#bo-player .bo-small{width:38px;height:38px}
#bo-player .bo-small .bo-ic{width:16px;height:16px}
#bo-player .bo-play{width:74px;height:74px;background:var(--red)!important;border:0!important;color:#fff4e0!important;box-shadow:0 6px 22px #e4522c77,inset 0 1px 0 #ffffff40}
#bo-player .bo-play .bo-ic{width:30px;height:30px}
#bo-player .bo-play:hover{background:var(--red-hi)!important}
#bo-player.bo-playing .bo-play{animation:bo-pulse 2.4s ease-in-out infinite}
@keyframes bo-pulse{50%{box-shadow:0 6px 30px #e4522ccc,inset 0 1px 0 #ffffff40}}
@keyframes bo-blink{50%{opacity:.35}}
#bo-player .bo-round[aria-pressed=true]{background:#e4522c!important;border-color:#e4522c!important}
#bo-player .bo-speed select{appearance:none;-webkit-appearance:none;height:30px;padding:0 10px!important;border-radius:99px!important;border:1px solid #ffe6ba30!important;background:#ffe6ba0d!important;font-size:12px!important;color:var(--cream)}
#bo-player .bo-speed option{background:#12171d;color:var(--cream)}

/* description, buy and share */
.bo-info{min-width:0}
.bo-buy-row{display:flex;align-items:stretch;gap:8px;max-width:440px;margin:0 auto;width:100%}
.bo-buy-row>.bo-slot{flex:1;min-width:0;display:flex}
#bo-player .bo-purchase{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:6px 12px;border-radius:12px;font:700 13px/1.2 system-ui,sans-serif;letter-spacing:.02em;text-decoration:none;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:filter .2s,background .2s}
#bo-player .bo-buy-row .bo-purchase{width:100%}
#bo-player .bo-buy-album{background:var(--red);color:#fff4e0!important;box-shadow:0 6px 18px #e4522c55}
#bo-player .bo-buy-album:hover{filter:brightness(1.1)}
#bo-player .bo-buy-track{border:1.5px solid var(--cream)!important;color:var(--cream)!important}
#bo-player .bo-buy-track:hover{background:#ffe6ba14}
#bo-player .bo-owned{background:#ffe6ba14!important;border:1px solid #ffe6ba40!important;color:var(--cream)!important;box-shadow:none}
.bo-share-wrap{position:relative;flex:none;display:flex}
#bo-player .bo-share-btn{width:40px;border-radius:12px!important;display:grid;place-items:center;border:1.5px solid #ffe6ba55!important;color:var(--cream)}
#bo-player .bo-share-btn:hover,#bo-player .bo-share-btn[aria-expanded=true]{background:#e4522c!important;border-color:#e4522c!important}
#bo-player .bo-share-menu{position:absolute;right:0;bottom:calc(100% + 8px);z-index:5;min-width:190px;padding:6px;border-radius:14px;background:#1b2129;border:1px solid #e4522c66;box-shadow:0 14px 40px #000c}
#bo-player .bo-share-menu button{display:flex!important;align-items:center;gap:10px;width:100%;padding:10px 12px!important;border-radius:10px!important;font-size:13px!important;text-align:left}
#bo-player .bo-share-menu button:hover{background:#e4522c33!important}
#bo-player .bo-share-menu .bo-ic{width:16px;height:16px;color:var(--red)}

/* track list: the only part that scrolls */
.bo-list{position:absolute;left:0;right:0;bottom:0;z-index:8;height:auto;max-height:100%;display:flex;flex-direction:column;border-top:1px solid #e4522c66;border-radius:20px 20px 0 0;background:#0d1116f5;backdrop-filter:blur(14px);box-shadow:0 -18px 50px #000a;transform:translateY(100%);transition:transform .3s cubic-bezier(.22,.61,.36,1);will-change:transform}
.bo-sheet .bo-list{transform:translateY(0)}
#bo-player .bo-playlist-label{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 16px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.bo-list-meta{display:flex;gap:10px;color:var(--dim)}
.bo-list-meta span+span::before{content:"";display:inline-block;width:1px;height:9px;margin-right:10px;background:#ffe6ba33;vertical-align:-1px}
#bo-player .bo-tracks{flex:1;min-height:0;overflow-y:auto;touch-action:pan-y;list-style:none!important;margin:0!important;padding:4px 0!important;scrollbar-width:thin;scrollbar-color:#e4522c88 transparent;overscroll-behavior:contain}
#bo-player .bo-tracks li{display:flex;align-items:center;gap:6px;margin:0!important;padding:0 8px 0 6px;border-left:3px solid transparent}
#bo-player .bo-tracks li:hover{background:#ffe6ba08}
#bo-player .bo-track{flex:1;min-width:0;display:grid!important;grid-template-columns:26px minmax(0,1fr) auto auto;gap:8px;align-items:center;text-align:left;padding:9px 4px!important}
.bo-num{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums;text-align:right}
.bo-tt{min-width:0}
.bo-tt strong{display:block;font-size:13.5px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--cream)}
#bo-player .bo-track time{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}
#bo-player .bo-active{background:linear-gradient(90deg,#e4522c26,transparent 80%)!important;border-left-color:var(--red)!important}
.bo-active .bo-num{color:var(--red)}
.bo-active strong{color:#fff4e0}
.bo-row-buy{flex:none;display:flex}
#bo-player .bo-row-buy .bo-purchase{width:auto;flex:none;overflow:visible;min-height:28px;padding:3px 9px;border-radius:99px;font-size:11px;border:1px solid #ffe6ba40!important;color:var(--cream)!important;background:transparent}
#bo-player .bo-row-buy .bo-purchase:hover{background:#e4522c!important;border-color:#e4522c!important}
#bo-player .bo-row-share{flex:none;width:30px;height:30px;border-radius:50%!important;display:grid;place-items:center;color:var(--muted)}
#bo-player .bo-row-share .bo-ic{width:15px;height:15px}
#bo-player .bo-row-share:hover{color:var(--cream);background:#e4522c33!important}
/* cleaner rows: price and share appear on the playing track (and on hover with a mouse) */
#bo-player .bo-tracks li:not(.bo-active) .bo-row-buy,#bo-player .bo-tracks li:not(.bo-active) .bo-row-share{display:none}
@media(hover:hover){#bo-player .bo-tracks li:not(:hover) .bo-row-buy,#bo-player .bo-tracks li:not(:hover) .bo-row-share{display:none}#bo-player .bo-tracks li:hover .bo-row-buy{display:flex}#bo-player .bo-tracks li:hover .bo-row-share{display:grid}}
/* no connection: only saved tracks can play */
#bo-player .bo-unavailable{opacity:.35}
#bo-player .bo-unavailable .bo-track{cursor:not-allowed;pointer-events:none}
#bo-player.bo-is-offline .bo-row-buy,#bo-player.bo-is-offline .bo-row-share,#bo-player.bo-is-offline .bo-share-wrap{display:none!important}

/* play counts: full count under the song title; compact count per row, only when there are plays */
.bo-pc{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.bo-pc.bo-has::before{content:"";display:inline-block;width:0;height:0;margin-right:4px;border-left:6px solid currentColor;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;opacity:.8;vertical-align:0}
.bo-active .bo-pc{color:var(--muted)}
.bo-idx{display:block;position:relative;text-align:right}
.bo-eq{display:none;align-items:flex-end;justify-content:flex-end;gap:2px;height:13px}
.bo-eq i{width:3px;height:3px;border-radius:1px;background:var(--red)}
#bo-player.bo-playing .bo-active .bo-num{display:none}
#bo-player.bo-playing .bo-active .bo-eq{display:flex}
@media(prefers-reduced-motion:no-preference){
 #bo-player.bo-playing .bo-active .bo-eq i{animation:bo-eq .9s ease-in-out infinite}
 #bo-player.bo-playing .bo-active .bo-eq i:nth-child(2){animation-duration:.64s;animation-delay:.18s}
 #bo-player.bo-playing .bo-active .bo-eq i:nth-child(3){animation-duration:1.08s;animation-delay:.36s}
 @keyframes bo-eq{0%,100%{height:3px}50%{height:13px}}
}
#bo-player.bo-playing .bo-active .bo-eq i:nth-child(2){height:9px}
#bo-player.bo-playing .bo-active .bo-eq i:nth-child(3){height:6px}
.bo-cols{display:none;grid-template-columns:26px minmax(0,1fr) auto auto;gap:8px;padding:7px 12px 7px 13px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line)}
.bo-cols span:first-child{text-align:right}
.bo-wide .bo-cols{display:grid}
@media(hover:hover){
 .bo-wide .bo-tracks li:hover:not(.bo-active) .bo-num{color:transparent}
 .bo-wide .bo-tracks li:hover:not(.bo-active) .bo-idx::after{content:"";position:absolute;right:1px;top:50%;margin-top:-5px;border-left:9px solid var(--cream);border-top:5px solid transparent;border-bottom:5px solid transparent}
}

/* about and offline panel, status toast */
.bo-about{position:absolute;inset:auto 10px 10px 10px;z-index:6;max-height:calc(100% - 20px);overflow:auto;padding:18px 18px 16px;border-radius:18px;background:#161c23f5;border:1px solid #e4522c66;box-shadow:0 18px 50px #000d;backdrop-filter:blur(8px)}
.bo-kicker{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:4px!important}
.bo-about h3{margin:0 0 8px!important;font-size:20px;color:var(--cream)}
.bo-about>p{margin:0 0 12px!important;color:var(--muted);font-size:14px}
#bo-player .bo-about-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--cream)}
#bo-player .bo-about-close:hover{background:#e4522c33}
.bo-off-card{margin-top:4px;padding:14px;border-radius:14px;background:#0e1318;border:1px solid #ffe6ba1f}
.bo-off-card.bo-is-ready{border-color:#e4522c88;background:linear-gradient(160deg,#e4522c1f,#0e1318 60%)}
.bo-off-head{display:flex;align-items:center;gap:12px}
.bo-off-head>div{display:flex;flex-direction:column;min-width:0}
.bo-off-badge{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:#ffe6ba14;color:var(--cream)}
.bo-off-badge .bo-ring{width:22px;height:22px}
.bo-is-ready .bo-off-badge{background:var(--red);color:#fff4e0;box-shadow:0 0 0 4px #e4522c33}
.bo-is-ready .bo-off-badge .bo-ic{stroke-width:3}
.bo-off-title{font-size:15px;color:var(--cream)}
.bo-off-state{font-size:12px;color:var(--muted)}
.bo-is-ready .bo-off-state{color:var(--red-hi);font-weight:600}
.bo-off-bar{height:5px;margin:12px 0 10px;border-radius:99px;background:#ffe6ba1a;overflow:hidden}
.bo-off-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--red);transition:width .4s}
.bo-off-detail{font-size:13px;color:var(--muted);margin-bottom:12px!important}
#bo-player .bo-off-action{width:100%;min-height:40px;border-radius:12px;background:var(--red);color:#fff4e0;font-weight:700;font-size:13px}
#bo-player .bo-off-action:hover{filter:brightness(1.1)}
#bo-player .bo-off-action.bo-quiet{background:transparent;border:1px solid #ffe6ba40;color:var(--muted);font-weight:600}
.bo-note{font-size:11.5px;color:var(--dim);margin-top:10px!important;line-height:1.45}
.bo-status{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:7;max-width:calc(100% - 28px);margin:0!important;padding:8px 14px;border-radius:12px;background:#1b2129f5;border:1px solid #e4522c77;color:var(--cream);font-size:12px;text-align:center;box-shadow:0 10px 30px #000c}
.bo-status:empty{display:none}
.bo-fail{padding:40px 20px;text-align:center;color:var(--muted)}

/* small phones */
@media(max-width:380px){.bo-stage>:not(.bo-hero){padding-inline:12px}#bo-player .bo-round{width:44px;height:44px}#bo-player .bo-small{width:36px;height:36px}#bo-player .bo-play{width:68px;height:68px}#bo-player .bo-purchase{font-size:12px;padding:6px 8px}.bo-row-buy{display:none}#bo-player .bo-chip{padding:0 10px 0 8px}}
/* short phones: one line of description */
@media(max-height:700px) and (max-width:819px){.bo-stage{gap:8px}}

/* wide screens: art, title and transport on the left, track list on the right */
.bo-deck.bo-wide{display:grid;grid-template-columns:minmax(0,1fr) clamp(290px,23vw,380px)}
.bo-wide .bo-sides{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.24);filter:blur(9px) saturate(1.05) brightness(.82)}
.bo-wide .bo-cover,.bo-wide .bo-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:none;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);
 -webkit-mask-composite:source-in;mask-composite:intersect}
.bo-wide .bo-stage{overflow:hidden;padding-bottom:18px;gap:12px}
.bo-wide .bo-stage>:not(.bo-hero){padding-inline:clamp(20px,2.4vw,34px)}
/* phone landscape: the art fills the screen and the controls float over it */
.bo-cinema .bo-hero{position:absolute;inset:0;height:auto;z-index:0}
.bo-cinema .bo-media{-webkit-mask-image:none;mask-image:none}
.bo-sides{display:none}
.bo-cinema .bo-sides{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.28);filter:blur(9px) saturate(1.05) brightness(.82)}
.bo-cinema .bo-cover,.bo-cinema .bo-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:none;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 17%,#000 83%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 17%,#000 83%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
 -webkit-mask-composite:source-in;mask-composite:intersect}
.bo-cinema .bo-stage{position:absolute;inset:0;justify-content:flex-end;gap:4px;padding-bottom:0}
.bo-cinema .bo-stage::after{content:"";position:absolute;inset:auto 0 0;height:62%;background:linear-gradient(transparent,#03060ad9);z-index:1;pointer-events:none;transition:opacity .45s}
.bo-cinema .bo-stage>:not(.bo-hero){position:relative;z-index:2;transition:opacity .3s ease}
.bo-cinema .bo-info,.bo-cinema .bo-lockup{display:none!important}
.bo-cinema .bo-head{margin-top:0;text-align:left;padding-inline:16px}
.bo-cinema .bo-album{font-size:14px;opacity:.7;text-shadow:0 2px 10px #000}
.bo-cinema .bo-song{font-size:17px;margin-top:0!important}
.bo-cinema .bo-sub{justify-content:flex-start;margin-top:1px!important}
.bo-cinema .bo-transport{margin-top:0}
.bo-cinema .bo-controls{margin-top:0;gap:clamp(10px,4vw,22px)}
#bo-player .bo-cinema .bo-play{width:56px;height:56px}
#bo-player .bo-cinema .bo-play .bo-ic{width:24px;height:24px}
#bo-player .bo-cinema .bo-round{width:40px;height:40px}
#bo-player .bo-cinema .bo-small{width:34px;height:34px}
.bo-cinema .bo-bottombar{padding-top:0;margin-top:0}
.bo-cinema .bo-handle{min-width:90px;padding:8px 20px 4px}
.bo-cinema .bo-handle span:last-child{display:none}
.bo-cinema .bo-grab{width:54px}
.bo-cinema .bo-list{max-height:82%}
#bo-player .bo-fs{display:grid}
.bo-bar-end{display:flex;align-items:center;gap:8px}
/* the pair on the right carries the same width as the Universe chip on the left, and both marks read the same size */
#bo-player .bo-bottombar .bo-chip-icon{width:36px;height:36px;padding:0;justify-content:center;place-items:center}
#bo-player .bo-bar-end .bo-fs .bo-ic{width:18px;height:18px}
.bo-cinema .bo-head{padding-bottom:2px}
.bo-cinema.bo-idle .bo-head,.bo-cinema.bo-idle .bo-transport,.bo-cinema.bo-idle .bo-bottombar{opacity:0;pointer-events:none}
.bo-cinema.bo-idle .bo-stage::after{opacity:0}
.bo-wide .bo-list{position:static;transform:none;height:auto;flex:1;min-height:0;border-top:0;border-radius:0;border-left:1px solid var(--line);background:#0a0e1266;backdrop-filter:none;box-shadow:none}
.bo-wide .bo-handle,.bo-wide .bo-sheet-head,.bo-wide .bo-scrim{display:none!important}
.bo-wide .bo-stage{flex:none}
.bo-wide .bo-playlist-label{padding:14px 18px!important}
.bo-wide .bo-about{inset:auto auto 16px 16px;width:min(440px,calc(var(--stage-w,560px) - 32px))}
.bo-wide .bo-album{font-size:clamp(17px,1.45vw,21px)}
.bo-wide .bo-song{font-size:13px;margin-top:1px!important}
.bo-wide .bo-sub{font-size:10.5px;margin-top:2px!important}
.bo-wide .bo-lockup{margin-bottom:4px!important}
.bo-wide .bo-lockup img{height:22px}
.bo-wide .bo-lockup span{font-size:8px}
.bo-wide .bo-stage{gap:7px;padding-bottom:12px}
.bo-wide .bo-seek{height:5px}
.bo-wide .bo-times{font-size:10px;margin-top:2px}
.bo-wide .bo-controls{gap:14px;margin-top:0}
#bo-player .bo-wide .bo-round{width:36px;height:36px}
#bo-player .bo-wide .bo-round .bo-ic{width:17px;height:17px}
#bo-player .bo-wide .bo-small{width:30px;height:30px}
#bo-player .bo-wide .bo-play{width:52px;height:52px}
#bo-player .bo-wide .bo-play .bo-ic{width:22px;height:22px}
#bo-player .bo-wide .bo-purchase{min-height:32px;padding:5px 10px;font-size:12px;border-radius:10px}
.bo-wide .bo-buy-row{gap:8px}
.bo-wide .bo-bottombar{padding-top:6px}
@media(max-height:720px){.bo-wide .bo-lockup{margin-bottom:4px!important}}

/* The song poster, laid over the shared room loop. Every track uses the same
   video and only this image changes.

   The overlay must land in EXACTLY the box the video fills, or the poster slides
   off the wall. Both are 1920x1080, so identical object-fit means identical
   mapping at any size or orientation. The fit is therefore copied from the video
   in script rather than restated here: the deck uses cover in cinema but contain
   when wide, and a hand-mirrored rule had already drifted out of step. .bo-media
   is the positioning context and the video always fills it, so inset:0 gives the
   overlay the same box in every mode. */
.bo-vid-art{position:absolute;inset:0;width:100%;height:100%;display:none;
  pointer-events:none;z-index:2}
.bo-video-loop .bo-vid-art:not([hidden]){display:block}

/* Video always fits the screen whole, like any video player: never zoomed or cropped, in any orientation,
   size or full screen. Leftover space is black. The poster overlay copies this fit in script, so it stays on the wall. */
.bo-deck.bo-video .bo-media video{object-fit:contain!important;object-position:50% 50%!important;background:#000!important}

/* the blurred room behind the whole video (see paintBg): sits under it, filling any space the video leaves */
.bo-vid-bg{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(12px) saturate(1.05) brightness(.8);transform:scale(1.12);pointer-events:none;z-index:0}
.bo-deck.bo-video .bo-vid-bg.bo-ready{display:block}
.bo-deck.bo-video .bo-media video{position:absolute;inset:0;width:100%;height:100%;z-index:1;background:transparent!important}
.bo-deck.bo-video .bo-media{overflow:hidden;background:#000}

/* sideways, the full screen button moves up into the controls row beside the download button, where it stays in
   view; the bottom bar copy steps aside so there is only one */
#bo-player .bo-fs-row{display:none}
#bo-player .bo-cinema .bo-fs-row{display:grid}
#bo-player .bo-cinema .bo-bar-end .bo-fs{display:none}
#bo-player .bo-cinema .bo-fs-row .bo-ic{width:18px;height:18px}
/* Complete album covers on both the website and the saved offline player. */
#bo-player .bo-deck:not(.bo-video) .bo-media,#bo-player .bo-cover{-webkit-mask-image:none!important;mask-image:none!important}
#bo-player .bo-cover{object-fit:contain!important;object-position:center!important;transform:none!important;padding:8px;box-sizing:border-box}
#bo-player .bo-deck:not(.bo-video) .bo-sides{opacity:.18}
#bo-player .bo-diag{display:none}