:root{--bg:#04060d;--glass:rgba(12,18,32,.72);--line:rgba(255,255,255,.12);--txt:#e8eefc;--dim:#9aa7c7;--acc:#4fd1ff}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font:14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden}
#globe{position:fixed;inset:0}
.hidden{display:none!important}
#loading{position:fixed;inset:0;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:var(--bg);z-index:50}
.spinner{width:42px;height:42px;border:3px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:s 1s linear infinite}
@keyframes s{to{transform:rotate(360deg)}}
.glass{background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:14px}
#side{position:fixed;left:14px;top:14px;bottom:96px;width:272px;display:flex;flex-direction:column;gap:10px;padding:14px;background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:14px;z-index:5}
.brand{font-weight:700;font-size:17px;letter-spacing:.3px}.logo{color:var(--acc)}
input[type=search]{width:100%;padding:9px 12px;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:10px;color:var(--txt);outline:none}
input[type=search]:focus{border-color:var(--acc)}
#genres{overflow-y:auto;flex:1;margin:0 -6px;padding:0 6px}
#genres::-webkit-scrollbar,#plist::-webkit-scrollbar{width:6px}#genres::-webkit-scrollbar-thumb,#plist::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.fam{margin:6px 0}.fam>.fh{display:flex;align-items:center;gap:8px;padding:6px 6px;cursor:pointer;border-radius:8px;font-weight:600;color:var(--dim);font-size:12px;text-transform:uppercase;letter-spacing:.6px}
.fam>.fh:hover{background:rgba(255,255,255,.06)}.fam>.fh .dot{width:9px;height:9px;border-radius:50%}
.fam>.fh .caret{margin-left:auto;transition:transform .15s}.fam.open>.fh .caret{transform:rotate(90deg)}
.fam .gl{display:none;flex-wrap:wrap;gap:5px;padding:4px 2px 8px}.fam.open .gl{display:flex}
.chip{padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid transparent;cursor:pointer;font-size:12.5px;color:var(--txt);white-space:nowrap}
.chip:hover{background:rgba(255,255,255,.14)}.chip.on{background:var(--acc);color:#04121c;font-weight:600}
.chip small{opacity:.6;margin-left:4px}
.allbtn{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid transparent;color:var(--txt);cursor:pointer;font-size:14px;font-weight:600}
.allbtn.on{background:var(--acc);color:#04121c}
#topbar{position:fixed;right:14px;top:14px;display:flex;gap:8px;z-index:6}
#searchwrap{position:fixed;left:50%;top:14px;transform:translateX(-50%);width:min(520px,calc(100vw - 640px));min-width:260px;z-index:7}
#searchwrap input{width:100%;background:var(--glass);backdrop-filter:blur(14px);text-align:center}
#searchwrap input:focus{text-align:left}
#topbar button{background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:0 12px;cursor:pointer;white-space:nowrap}
#topbar button:hover{border-color:var(--acc)}
#sresults{position:absolute;top:44px;left:0;right:0;max-height:55vh;overflow:auto;background:rgba(10,15,28,.96);border:1px solid var(--line);border-radius:12px}
#panel{position:fixed;right:14px;top:66px;bottom:96px;width:340px;display:flex;flex-direction:column;background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:14px;z-index:5}
#panel header{display:flex;justify-content:space-between;gap:8px;padding:14px;border-bottom:1px solid var(--line)}
#ptitle{font-weight:700;font-size:15px}#psub{color:var(--dim);font-size:12px;margin-top:2px}
#pclose{background:none;border:0;color:var(--dim);font-size:16px;cursor:pointer}
#plist{overflow-y:auto;flex:1}
.row{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.05)}
.row:hover{background:rgba(255,255,255,.07)}.row.now{background:rgba(79,209,255,.16)}
.row img,.row .ph{width:34px;height:34px;border-radius:7px;object-fit:cover;background:rgba(255,255,255,.08);flex:none;display:flex;align-items:center;justify-content:center;font-size:15px}
.row .t{min-width:0;flex:1}.row .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:550}.row .m{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#player{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;width:min(640px,calc(100vw - 28px));display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:16px;z-index:7}
#pfav{width:44px;height:44px;border-radius:9px;object-fit:cover;background:rgba(255,255,255,.08)}
#player .info{flex:1;min-width:0}#pname{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#pmeta{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pplay{width:42px;height:42px;border-radius:50%;border:0;background:var(--acc);color:#04121c;font-size:16px;cursor:pointer}#pplay:disabled{opacity:.35;cursor:default}
#vol{width:90px;accent-color:var(--acc)}
#stat{position:fixed;left:14px;bottom:30px;color:var(--dim);font-size:12px;z-index:4;max-width:280px}
.tip{background:rgba(8,12,24,.92);border:1px solid var(--line);border-radius:10px;padding:7px 10px;font:13px system-ui;color:#e8eefc}
.tip b{display:block}.tip span{color:#9aa7c7;font-size:12px}
@media(max-width:820px){#side{display:none}#searchwrap{left:14px;transform:none;width:calc(100vw - 28px);top:58px}#panel{width:calc(100vw - 28px)}}

#bands{display:flex;flex-wrap:wrap;gap:5px}.chk{font-size:12px;color:var(--dim);display:flex;gap:6px;align-items:center;cursor:pointer}

#panel{display:flex;flex-direction:column}
#pdetail{overflow-y:auto;max-height:58%;padding:12px 14px;border-bottom:1px solid var(--line);flex:none}
#pdetail::-webkit-scrollbar{width:6px}#pdetail::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.dhead{display:flex;gap:12px;align-items:center}.dlogo{width:56px;height:56px;border-radius:12px;object-fit:cover;background:rgba(255,255,255,.08);flex:none}
.dn{font-weight:700;font-size:16px;line-height:1.25}.dm{color:var(--acc);font-size:12.5px;margin-top:2px}
.dbtns{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.dbtns button,.dbtns a{padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--txt);font-size:12.5px;text-decoration:none;cursor:pointer}
.dbtns button[data-a=zoom]{background:var(--acc);color:#04121c;border-color:transparent;font-weight:600}
.dbtns button:hover,.dbtns a:hover{border-color:var(--acc)}
.dsec{margin:12px 0 5px;font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--dim);font-weight:600}
.dchips{display:flex;flex-wrap:wrap;gap:5px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px}.kv span{color:var(--dim);flex:none}.kv b{font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere}
.kv i{color:var(--dim);font-style:normal;font-size:11.5px}.url{font-size:11.5px;color:var(--dim)}
.dtags{display:flex;flex-wrap:wrap;gap:4px}.dtags span{padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--dim);font-size:11.5px}
.sbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.08);color:var(--txt);font-size:16px;cursor:pointer}.sbtn:disabled{opacity:.35;cursor:default}
#toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);padding:8px 16px;background:rgba(10,15,28,.95);border:1px solid var(--acc);border-radius:999px;z-index:20;font-size:13px}

.pl{width:44px;height:44px;border-radius:9px;object-fit:contain;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;flex:none}
#plogo{flex:none}#plogo .tile{color:#fff}
.row img,.dlogo{object-fit:contain!important;background:#fff!important}
.tile{color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;border-radius:inherit}
.ph.tile,.dlogo.tile{background-clip:padding-box}
.dlogo.tile{width:56px;height:56px;border-radius:12px;font-size:24px;flex:none}
.star{background:none;border:0;color:var(--dim);font-size:19px;cursor:pointer;padding:2px 4px;flex:none}.star:hover{color:#ffd45a}.star.on,.sbtn.on{color:#ffd45a}
.sbtn.on{border-color:#ffd45a}
.chip.fav.on{background:#ffd45a;color:#2a1d00}.dbtns .fbtn.on{background:rgba(255,212,90,.2);border-color:#ffd45a;color:#ffd45a}
.shead{padding:8px 14px 4px;font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--dim);font-weight:600}
.star{font-size:28px!important;line-height:1;padding:0 6px!important}
.sbtn{width:46px!important;height:46px!important;font-size:24px!important}
.dbtns .fbtn{font-size:15px!important;padding:7px 14px!important}
.chip.fav{font-size:14px}

#favtop{font-size:15px}#favtop.on{border-color:#ffd45a!important;color:#ffd45a}#favtop span{font-size:13px}
#favdrawer{position:fixed;left:50%;bottom:86px;width:min(920px,calc(100vw - 28px));transform:translate(-50%,calc(100% + 100px));transition:transform .38s cubic-bezier(.2,.8,.2,1);background:rgba(12,18,32,.9);backdrop-filter:blur(16px);border:1px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0;z-index:6;padding:12px 14px 22px}
#favdrawer.open{transform:translate(-50%,0)}
#favdrawer header{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.ft{font-weight:700;font-size:15px;color:#ffd45a}.ft span{color:var(--dim);font-weight:500;margin-left:4px}
#favdrawer .chk{margin-left:auto}
#favclose{background:none;border:0;color:var(--dim);font-size:22px;cursor:pointer;line-height:1}
#favlist{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;min-height:112px}
#favlist::-webkit-scrollbar{height:6px}#favlist::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.fcard{position:relative;flex:none;width:128px;padding:10px 8px 8px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid transparent;text-align:center;cursor:pointer}
.fcard:hover{background:rgba(255,255,255,.12)}.fcard.now{border-color:var(--acc)}
.fl{width:56px;height:56px;border-radius:12px;object-fit:contain;background:#fff;margin:0 auto;display:flex;align-items:center;justify-content:center;font-size:24px}
.fl.tile{color:#fff}
.fn{margin-top:7px;font-weight:600;font-size:12.5px;line-height:1.25;height:32px;overflow:hidden}.fm{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.fcard .star{position:absolute;top:0;right:2px;font-size:22px!important}
.fempty{color:var(--dim);padding:18px 8px;line-height:1.6}
#panel.lift{}
#attr{position:fixed;right:8px;bottom:2px;font-size:10px;color:rgba(255,255,255,.6);z-index:3;display:flex;align-items:center;gap:6px;pointer-events:none}#attr #attrTxt{background:rgba(0,0,0,.65);padding:3px 8px;border-radius:6px;pointer-events:auto}#attrBtn{pointer-events:auto;background:none;border:0;color:rgba(255,255,255,.3);font-size:13px;line-height:1;cursor:pointer;padding:2px 4px}#attrBtn:hover{color:rgba(255,255,255,.8)}

.dbtns button[data-a=zoom]{background:var(--acc);color:#04121c;border-color:transparent;font-weight:600}
#pplay{background:var(--acc)!important;color:var(--acc-ink)!important}.chip.on,.allbtn.on{background:var(--acc)!important;color:var(--acc-ink)!important}.dbtns button[data-a=zoom]{background:var(--acc)!important;color:var(--acc-ink)!important}.dbtns button:first-child{color:var(--acc-ink)}
:root{--acc:#39ff14;--acc-ink:#031200;--acc-rgb:57,255,20}
#dots{position:fixed;inset:0;pointer-events:none;z-index:1}
#side,#topbar,#panel,#player,#favdrawer,#stat{z-index:6}.tip{position:fixed;z-index:30;pointer-events:none}


#bullseye{position:fixed;left:0;top:0;width:112px;height:112px;margin:0;transform:translate(calc(50vw - 56px),calc(50vh - 56px));will-change:transform;z-index:2;pointer-events:none;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.9)) drop-shadow(0 0 4px rgba(0,0,0,.45));opacity:.92}
@keyframes spin{to{transform:rotate(360deg)}}

#ytbox{position:fixed;left:-10000px;top:0;width:200px;height:200px;overflow:hidden;pointer-events:none}
#ytplayer,#ytplayer iframe{width:200px;height:200px}
#blctl{display:inline-flex;gap:6px}#blctl.hidden{display:none}

#shareBtn{display:inline-grid;place-items:center;padding:0!important}#shareBtn .shic{display:block}.dbtns button .shic{width:15px;height:15px;vertical-align:-3px;margin-right:2px}

#themeBtn .tdot{width:14px;height:14px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 2px rgba(255,255,255,.35)}
#themepop{position:absolute;top:44px;right:0;z-index:9;background:rgba(10,15,28,.96);border:1px solid var(--line);border-radius:12px;padding:12px;width:244px}
#themepop h4{margin:0 0 9px;font:600 11px system-ui;letter-spacing:.7px;text-transform:uppercase;color:var(--dim)}
#themepop .sw{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
#themepop .sw button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;font:500 11px system-ui;color:var(--dim);padding:4px 0;border-radius:8px}
#themepop .sw button i{width:34px;height:34px;border-radius:50%;display:block;border:2px solid rgba(255,255,255,.25);transition:transform .12s}
#themepop .sw button:hover i{transform:scale(1.1)}
#themepop .sw button.on{color:var(--txt)}#themepop .sw button.on i{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
#bullseye circle[fill]{fill:var(--acc)}

#themepop{background:var(--glass-solid,rgba(10,15,28,.96))!important}#sresults{background:var(--glass-solid,rgba(10,15,28,.96))!important}
#themepop .sw{grid-template-columns:repeat(4,1fr)}
#themepop .sw button{text-align:center;line-height:1.15}
#themepop{width:292px}
body{letter-spacing:.01em}

#bullseye.lock{opacity:1;filter:drop-shadow(0 0 5px var(--acc))}#bullseye.lock circle:first-child{stroke:var(--acc)}

.brand{display:flex;align-items:center;gap:8px}.brand #themeBtn{margin-left:auto;background:var(--glass-solid,rgba(255,255,255,.07));border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:5px 9px;cursor:pointer;font:600 12px system-ui;display:inline-flex;align-items:center;gap:6px}
.brand #themeBtn:hover{border-color:var(--acc)}.brand #themeBtn .tdot{width:11px;height:11px}
#themepop{position:fixed;left:298px;top:14px;right:auto;z-index:9}
#sresults{top:44px}

#livebtn{display:inline-flex;align-items:center;gap:7px}#livebtn .ldot{width:9px;height:9px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 0 0 rgba(255,59,59,.7);animation:lv 1.6s infinite}
@keyframes lv{70%{box-shadow:0 0 0 7px rgba(255,59,59,0)}100%{box-shadow:0 0 0 0 rgba(255,59,59,0)}}
#livecount{font-size:12px;color:var(--dim)}
.ltabs{display:flex;gap:6px;margin-bottom:8px}.ltabs button{flex:1;background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:6px 4px;font:600 12px system-ui;cursor:pointer}
.ltabs button.on{background:var(--acc);color:var(--acc-ink);border-color:transparent}.ltabs b{opacity:.7;margin-left:3px}
.lw{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:6px;background:#000}.lw iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.lwt{display:flex;align-items:center;gap:6px;padding:6px 8px;font:600 12px system-ui}.lwt span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lwt button{background:none;border:0;color:var(--dim);cursor:pointer}
.lth{width:64px;height:36px;border-radius:5px;object-fit:cover;flex:none;background:#111}
.lempty{padding:18px 14px;color:var(--dim);line-height:1.6;font-size:13px}.lempty code{background:rgba(255,255,255,.08);padding:1px 5px;border-radius:4px;font-size:12px}
.lrow .n{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

#livebtn{background:#c4161c!important;border-color:#ff5a5f!important;color:#fff!important;font-weight:800;letter-spacing:.06em}
#livebtn .ldot{background:#fff}#livecount{color:#fff;opacity:.9}
.lfams{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 8px}.lfams .chip small{opacity:.6;margin-left:4px}
.ltabs button{font-size:11.5px!important}

.lfsel{width:100%;margin:0 0 8px;background:rgba(255,255,255,.07);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:500 12.5px system-ui}
.lfsel option{background:#10151f}
.ltabs{gap:4px!important}.ltabs button{padding:6px 2px!important;font-size:11.5px!important;min-width:0}.ltabs b{display:block;font-size:10.5px;opacity:.7;margin:0}


/* ===== responsive pass: phones, tablets, mid-size desktops ===== */
html,body{height:100%;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
button,input,select,label{touch-action:manipulation}
#menuBtn,#sideScrim{display:none}
/* mid-size desktop / tablet landscape: the search drops to its own row so it never collides with the buttons or the detail panel */
@media(min-width:821px) and (max-width:1320px){
  #searchwrap{left:300px;transform:none;top:56px;width:max(260px,calc(100vw - 300px - 370px))}
  #panel{top:56px}
}
@media(max-width:820px){
  #menuBtn{display:inline-flex;align-items:center}
  #topbar{left:10px;right:10px;top:max(10px,env(safe-area-inset-top));gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  #topbar::-webkit-scrollbar{display:none}
  #topbar button{height:40px;padding:0 12px;flex:0 0 auto;font-size:13px}
  #searchwrap{left:10px;right:10px;width:auto;min-width:0;transform:none;top:calc(max(10px,env(safe-area-inset-top)) + 50px)}
  #searchwrap input{height:42px;font-size:16px}
  #side{display:flex;left:0;top:0;bottom:0;width:min(88vw,360px);border-radius:0 16px 16px 0;transform:translateX(-105%);transition:transform .28s ease;z-index:20;padding-top:max(14px,env(safe-area-inset-top));padding-bottom:max(14px,env(safe-area-inset-bottom));overflow:hidden}
  #side.open{transform:none}
  #sideScrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:19}
  #sideScrim.on{display:block}
  #gsearch{font-size:16px;height:42px}
  #panel{left:8px;right:8px;width:auto;top:auto;bottom:calc(86px + env(safe-area-inset-bottom));max-height:52vh;max-height:52dvh;border-radius:16px}
  #player{width:calc(100vw - 16px);bottom:max(8px,env(safe-area-inset-bottom));padding:8px 10px;gap:8px}
  #player button{min-width:42px;min-height:42px}
  #vol{display:none}
  #favdrawer{width:calc(100vw - 16px);bottom:calc(78px + env(safe-area-inset-bottom));max-height:55vh}
  #themepop{position:fixed;left:10px;right:10px;top:70px;width:auto!important}
  #themepop .sw{grid-template-columns:repeat(4,1fr)}
  #stat{display:none}
}
@media(max-width:380px){#topbar button{padding:0 9px;font-size:12px}}
/* very large screens: a little more breathing room */
@media(min-width:1800px){#side{width:300px}#panel{width:380px}#player{width:min(760px,50vw)}}

#tapStart{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:15;background:var(--acc);color:var(--acc-ink,#000);font:700 14px system-ui;padding:12px 20px;border-radius:999px;box-shadow:0 6px 24px rgba(0,0,0,.5);cursor:pointer;animation:tapPulse 1.6s ease-in-out infinite;white-space:nowrap}
@keyframes tapPulse{50%{transform:translateX(-50%) scale(1.06)}}

@media(max-width:430px){#plogo{width:40px;height:40px}#randomBar{display:none}}

/* ===== phone: larger, thumb-friendly UI (desktop is untouched) ===== */
@media(max-width:820px){
  html,body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{font-size:16px}
  #topbar{gap:8px}
  #topbar button{height:46px;padding:0 15px;font-size:15px;border-radius:13px}
  #searchwrap{top:calc(max(10px,env(safe-area-inset-top)) + 58px)}
  #searchwrap input{height:50px;font-size:16px;border-radius:13px}
  #side{width:min(90vw,380px);gap:12px;padding:16px}
  #side .brand{font-size:19px}
  #gsearch{height:48px;border-radius:12px}
  .chip{padding:8px 13px;font-size:15px}
  .fam>.fh{padding:13px 8px;font-size:15px}
  .chk{font-size:14px}
  #player{padding:10px 12px;gap:10px;border-radius:18px;min-height:74px}
  #plogo{width:52px;height:52px}
  #pname{font-size:16px}#pmeta{font-size:13px}
  #player button{min-width:50px;min-height:50px;font-size:19px}
  #panel{border-radius:18px}
  #panel header{padding:16px}
  #ptitle{font-size:17px}#psub{font-size:13px}
  .row{padding:12px 14px;gap:12px}
  .row img,.row .ph{width:44px;height:44px}
  .row .t{font-size:15px}
  #tapStart{font-size:16px;padding:14px 22px}
  #favdrawer{padding:14px}
}
@media(max-width:380px){#topbar button{padding:0 11px;font-size:14px}}

.powered{margin:-6px 0 2px 2px;font-size:12px;color:var(--dim);letter-spacing:.3px}
.powered a{color:var(--acc);text-decoration:none}.powered a:hover{text-decoration:underline}

#bounceHead{position:fixed;inset:0;pointer-events:none;z-index:4;overflow:hidden;display:none}
#bounceHead.on{display:block}
#bounceHead .bhx{position:absolute;left:0;top:0;animation:bhx 19s linear infinite alternate}
#bounceHead .bhy{display:block;width:62px;height:auto;pointer-events:auto;cursor:pointer;animation:bhy 13s linear infinite alternate;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}
#bounceHead .bhy img{display:block;width:100%;height:auto}
@keyframes bhx{from{transform:translateX(0)}to{transform:translateX(calc(100vw - 62px))}}
@keyframes bhy{from{transform:translateY(0)}to{transform:translateY(calc(100vh - 88px))}}
@media (prefers-reduced-motion:reduce){#bounceHead .bhx,#bounceHead .bhy{animation:none}}

/* floating Omarchy Store shuttle */
.sh{position:fixed;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.shx{position:absolute;left:0;top:0;animation:shx 29s linear infinite alternate;animation-delay:-11s}
.shy{display:block;width:96px;pointer-events:auto;cursor:pointer;animation:shy 21s linear infinite alternate;animation-delay:-7s;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}
.shy img{display:block;width:100%;height:auto}
@keyframes shx{from{transform:translateX(0)}to{transform:translateX(calc(100vw - 96px))}}
@keyframes shy{from{transform:translateY(0)}to{transform:translateY(calc(100vh - 70px))}}
@media(prefers-reduced-motion:reduce){.shx,.shy{animation:none}}

/* LIVE NOW hidden for now (feature kept in code) */
#randomBar{flex:none}

/* phones: tapping one station shows its full info card (no cramped detail + duplicate list row) */
@media(max-width:820px){
  #panel.single{max-height:70vh;max-height:70dvh}
  #panel.single #pdetail{max-height:none;flex:1;min-height:0;border-bottom:0;-webkit-overflow-scrolling:touch}
  #panel.single #plist{display:none}
  #panel.single header{padding:10px 14px}
}

/* desktop: single-station info card sizes to its content instead of a full-height panel */
@media(min-width:821px){
  #panel.single{bottom:auto;max-height:calc(100vh - 180px);max-height:calc(100dvh - 180px)}
  #panel.single #pdetail{max-height:none;flex:1;min-height:0;border-bottom:0}
  #panel.single #plist{display:none}
  #player #pname,#player #plogo,#player #pmeta{cursor:pointer}
}

/* Random lives in the player bar now; the top-bar copy stays in the DOM (the bar button and N key click it) but is hidden */
#random{display:none!important}
@media(max-width:820px){#panel.single{max-height:78vh;max-height:78dvh}}

/* ---- Rolodex view ---- */
#rolo{position:fixed;left:0;right:0;top:58px;bottom:96px;z-index:5;background:rgba(5,9,16,.82);backdrop-filter:blur(6px);display:flex;flex-direction:column}
#rolo.hidden{display:none}
#roloHead{flex:none;text-align:center;padding:8px 0 0;font-size:13px;color:var(--dim)}#roloHead b{color:var(--acc);margin-right:8px;letter-spacing:.08em;text-transform:uppercase}
#roloStage{position:absolute;inset:34px 0 0 0;perspective:620px;perspective-origin:50% 50%;overflow:hidden;pointer-events:none}
#roloScroll{position:absolute;inset:34px 0 0 0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y;cursor:pointer}
#roloScroll::-webkit-scrollbar{display:none}
#roloSpacer{width:1px}
.rc{position:absolute;left:0;right:40px;margin:0 auto;top:0;width:min(520px,calc(100% - 56px));height:var(--rh,68px);display:flex;align-items:center;gap:14px;padding:0 14px;border-radius:16px;background:var(--glass-solid,rgba(14,22,38,.96));border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.45);will-change:transform;backface-visibility:hidden}
.rc.mid{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 10px 30px rgba(0,0,0,.55)}
.rc.now .rn{color:var(--acc)}
.rlogo{width:48px;height:48px;flex:none;border-radius:10px;overflow:hidden;display:grid;place-items:center}
.rlogo img,.rlogo .rl{width:48px;height:48px;border-radius:10px;object-fit:cover;background:rgba(255,255,255,.08)}
.rt{flex:1;min-width:0}.rn{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rm{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.rp{color:var(--acc);font-size:15px;flex:none;opacity:.8}
#roloAz{position:absolute;right:6px;top:40px;bottom:6px;width:30px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:4px 0;background:rgba(255,255,255,.06);border-radius:15px;touch-action:none;user-select:none;z-index:2}
#roloAz span{font:700 11px system-ui;color:var(--dim);line-height:1;flex:1;display:grid;place-items:center;width:100%}
#roloAz span.on{color:var(--acc-ink,#000);background:var(--acc);border-radius:50%;max-height:22px;max-width:22px;flex:none;height:22px;margin:-2px 0}
#roloAz span.off{opacity:.25}
#roloBubble{position:absolute;right:52px;top:50%;transform:translateY(-50%);width:76px;height:76px;border-radius:18px;background:var(--acc);color:var(--acc-ink,#000);font:800 44px system-ui;display:none;place-items:center;z-index:3}
#roloBubble.on{display:grid}
@media(max-width:820px){#rolo{top:108px;bottom:calc(86px + env(safe-area-inset-bottom))}.rc{height:62px}.rlogo,.rlogo img,.rlogo .rl{width:44px;height:44px}#roloAz span{font-size:10px}}

/* Rolodex lives in the space beside the genre sidebar on desktop and follows the window size */
@media(min-width:821px){#rolo{left:300px;top:100px}}
@media(max-width:820px){
  #rolo{top:108px;bottom:calc(86px + env(safe-area-inset-bottom));bottom:calc(86px + env(safe-area-inset-bottom))}
  #roloAz{width:34px;right:4px;top:34px;bottom:4px;padding:2px 0}
  #roloAz span{font-size:11px}
  .rc{right:38px;width:calc(100% - 52px)}
  .rn{font-size:15px}
}
@media(max-height:560px){#roloHead{display:none}#roloStage,#roloScroll{inset:0}#roloAz{top:4px}}

/* phones: close button for the Genres drawer, beside Theme */
#sideClose{display:none}
@media(max-width:820px){#sideClose{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--glass-solid,rgba(255,255,255,.08));color:var(--txt);font-size:16px;cursor:pointer}.brand #themeBtn{margin-left:auto}}

#roloHead{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:nowrap;padding:6px 44px 0 8px;white-space:nowrap}#roloCnt{overflow:hidden;text-overflow:ellipsis;min-width:0}
#roloClear{background:var(--acc);color:var(--acc-ink,#000);border:0;border-radius:999px;padding:3px 10px;font:700 12px system-ui;cursor:pointer}
#roloClear.hidden{display:none}

/* ===== phones: bigger two-row control panel (logo + name on top; favourite, share, random, volume, play below) ===== */
#volIco{display:none}
@media(max-width:820px){
  #player{display:grid!important;grid-template-columns:48px 48px 48px 22px 1fr 62px;grid-template-areas:"logo info info info info info" "fav share rnd vi vol play";column-gap:8px;row-gap:10px;align-items:center;padding:12px 12px calc(12px + env(safe-area-inset-bottom));min-height:0;bottom:max(8px,env(safe-area-inset-bottom))}
  #plogo{grid-area:logo;width:48px;height:48px}
  #player .info{grid-area:info;min-width:0}
  #pname{font-size:17px}#pmeta{font-size:13px}
  #favBtn{grid-area:fav}#shareBtn{grid-area:share}#randomBar{grid-area:rnd;display:block!important}
  #volIco{grid-area:vi;display:block;font-size:16px;text-align:center}
  #vol{grid-area:vol;display:block!important;width:100%;height:30px;margin:0}
  #pplay{grid-area:play;width:62px!important;height:62px!important;min-width:62px!important;min-height:62px!important;font-size:22px!important}
  #player .sbtn{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}
  #panel{bottom:calc(158px + env(safe-area-inset-bottom))}
  #rolo{bottom:calc(158px + env(safe-area-inset-bottom))}
  #favdrawer{bottom:calc(150px + env(safe-area-inset-bottom))}
  #tapStart{bottom:calc(168px + env(safe-area-inset-bottom))}
}
@media(max-width:820px) and (max-height:600px){#player{grid-template-columns:44px 44px 44px 20px 1fr 52px;row-gap:6px;padding:8px 10px}#plogo{width:44px;height:44px}#pplay{width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important}#player .sbtn{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}#panel,#rolo{bottom:128px}}
@media(max-width:400px){
  #player{grid-template-columns:44px 44px 44px 18px 1fr 56px;column-gap:6px}
  #player .sbtn{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
  #pplay{width:56px!important;height:56px!important;min-width:56px!important;min-height:56px!important}
  #plogo{width:44px;height:44px}
  #volIco{font-size:14px}
}

@keyframes mpulse{50%{transform:scale(1.35);opacity:.6}}
.mutedpulse{animation:mpulse 1.1s ease-in-out infinite}
@media(min-width:821px){#volIco.mutedpulse{display:inline-block}}

/* ---- now playing + saved songs ---- */
#pnow{font-size:12px;color:var(--acc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}#pnow:empty{display:none}
#saveSong{opacity:.45;font-size:16px;position:relative}#saveSong.ready{opacity:1;border-color:var(--acc)}#saveSong.busy{animation:mpulse .7s infinite}
#songsTop span{opacity:.8;margin-left:2px}
#songs{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;width:min(560px,calc(100vw - 16px));max-height:60vh;max-height:60dvh;display:flex;flex-direction:column;background:var(--glass-solid,rgba(10,15,28,.96));backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:16px;z-index:9;box-shadow:0 12px 40px rgba(0,0,0,.55)}
#songs.hidden{display:none}
#songs header{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
#songs .ft{font-weight:700}#songs .sbar{display:flex;gap:6px}
#songs .sbar button{background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:6px 10px;cursor:pointer;font-size:13px}
#songsList{overflow-y:auto;padding:6px 10px 10px}
.srow{display:flex;gap:8px;align-items:flex-start;padding:10px 4px;border-bottom:1px solid var(--line)}
.srow .st{flex:1;min-width:0}.sn{font-weight:700;font-size:14px;word-break:break-word}.sm{font-size:12px;color:var(--dim);margin-top:2px}
.sa{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.sa a,.sa button{font-size:12px;color:var(--txt);text-decoration:none;background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:999px;padding:5px 10px;cursor:pointer}
.sdel{background:none;border:0;color:var(--dim);font-size:16px;cursor:pointer;padding:4px 8px}
@media(max-width:820px){
  #songs{bottom:calc(158px + env(safe-area-inset-bottom));max-height:56dvh}
  #player{grid-template-areas:"logo info info info info save" "fav share rnd vi vol play"!important}
  #saveSong{grid-area:save;display:grid!important}
}

.sa a.found{background:var(--acc);color:var(--acc-ink,#000);border-color:var(--acc);font-weight:700}
.sa a.srch{opacity:.65;border-style:dashed}
.snf{font-size:11px;color:var(--dim);align-self:center}

.sa a.srch{opacity:1;border-style:solid}
.sa a.found{background:var(--acc);color:var(--acc-ink,#000);border-color:var(--acc);font-weight:700}

#loading{transition:opacity .6s ease}#loading.fading{opacity:0;pointer-events:none}

#globe{cursor:grab}#globe.grabbing{cursor:grabbing}

/* save-song button: big theme-coloured note behind, SAVE over SONG filling the circle */
#saveSong{display:block!important;position:relative;padding:0;line-height:1;overflow:hidden}
#saveSong .ni{position:absolute;left:50%;top:50%;width:104%;height:104%;transform:translate(-50%,-50%);color:var(--acc);opacity:1}
#saveSong .nt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
#saveSong .nt b{font:900 10px/1 system-ui,sans-serif;letter-spacing:.04em;color:#fff;text-shadow:0 0 2px #000,0 0 3px #000,0 1px 2px #000}
@media(max-width:820px){#saveSong .nt b{font-size:11px}}
#dtip{text-align:center}#dtip b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dtip span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25}


/* menu specials: LIVE NOW / Old-Time Stories / Kids, under the theme + genre search */
#specials{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px}
#specials button{flex:1 1 auto;min-height:36px;padding:7px 11px;border-radius:10px;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px}
#specials .spbtn{background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--txt);font-weight:700}
#specials .spbtn:hover{border-color:var(--acc)}#specials .spbtn.on{background:var(--acc);color:var(--acc-ink,#04121c);border-color:var(--acc)}
#specials #livebtn{flex:1 1 100%}

.lgo{display:inline-block;margin-top:8px;padding:7px 12px;border-radius:999px;border:1px solid var(--acc);color:var(--acc);text-decoration:none;font-weight:700;font-size:13px}
.lwt .lgo{margin:0 6px 0 auto;padding:2px 8px}

.adddj{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px;align-items:center}.adddj b{flex:1 0 100%;font-size:12px;color:var(--dim)}
.adddj input{flex:1 1 90px;min-width:0;background:rgba(255,255,255,.07);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:500 13px system-ui}
.adddj button{background:var(--acc);color:var(--acc-ink,#04121c);border:0;border-radius:8px;padding:7px 14px;font-weight:800;cursor:pointer}
.mixrow{cursor:default}.mixrow .sa{margin-top:2px}

/* platform badge next to "Social live": flashes like an ON AIR light */
#ptitle .onair{display:inline-flex;align-items:center;gap:5px;margin-left:8px;vertical-align:middle;padding:2px 7px 2px 3px;border-radius:8px;background:rgba(255,255,255,.08);animation:onairflash 1.1s ease-in-out infinite}
#ptitle .onair i{font:900 9px/1 system-ui;font-style:normal;letter-spacing:.12em;color:#ff4d4d}
@keyframes onairflash{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,77,77,.0)}50%{opacity:.45;box-shadow:0 0 12px 2px rgba(255,77,77,.55)}}
@media(prefers-reduced-motion:reduce){#ptitle .onair{animation:none}}

/* lyrics satellite + popup */
#sat{position:fixed;left:0;top:0;z-index:4;display:none;cursor:pointer;text-align:center;color:#dfe9ff;filter:drop-shadow(0 0 8px rgba(120,190,255,.55));will-change:transform;-webkit-tap-highlight-color:transparent}
#sat.on{display:block;animation:satglow 2.4s ease-in-out infinite}#sat span{display:block;font:800 8.5px/1 system-ui;letter-spacing:.14em;margin-top:2px;color:var(--acc)}
@keyframes satglow{50%{filter:drop-shadow(0 0 14px var(--acc))}}
@media(prefers-reduced-motion:reduce){#sat.on{animation:none}}
#lyrics{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,92vw);max-height:min(70vh,70dvh);display:flex;flex-direction:column;background:var(--glass);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:16px;z-index:40;box-shadow:0 14px 50px rgba(0,0,0,.6)}
#lyrics.hidden{display:none}
#lyrics .lh{display:flex;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}#lyT{font-weight:800;font-size:16px}#lyA{color:var(--dim);font-size:13px;margin-top:2px}
#lyX{background:none;border:0;color:var(--txt);font-size:18px;cursor:pointer;align-self:flex-start}
#lyB{white-space:pre-wrap;overflow-y:auto;padding:14px 18px;font-size:15px;line-height:1.55;text-align:center;-webkit-overflow-scrolling:touch}
#lyrics .lf{padding:7px 14px;font-size:10.5px;color:var(--dim);border-top:1px solid var(--line);text-align:center}
/* lock */
#lockBtn.on{background:var(--acc)!important;color:var(--acc-ink,#04121c)!important;border-color:var(--acc)!important}
body.locked #randomBar{opacity:.35}

.djcard{cursor:default;padding-bottom:10px}.djcard .n{font-size:16px}.djcard .sa a{border-color:var(--acc);color:var(--acc)}
.djmix{margin-top:10px;display:flex;flex-direction:column;gap:2px}.djmix .m{font-size:11px;color:var(--dim);margin-bottom:2px;letter-spacing:.04em;text-transform:uppercase}
.djmix a{color:var(--txt);text-decoration:none;font-size:13px;line-height:1.3;padding:5px 0;border-top:1px solid var(--line);display:block}.djmix a:hover{color:var(--acc)}

/* ---- QA fixes ---- */
/* closed favourites drawer must be fully off-screen and untouchable (it was peeking out behind the player on phones) */
#favdrawer{transform:translate(-50%,calc(100% + 320px));visibility:hidden;transition:transform .38s cubic-bezier(.2,.8,.2,1),visibility 0s linear .38s}
#favdrawer.open{transform:translate(-50%,0);visibility:visible;transition-delay:0s}
/* roomier touch targets */
#themeBtn{min-height:34px;padding:6px 12px}.chk input{width:18px;height:18px}#favclose{min-width:38px;min-height:38px}
@media(max-width:820px){#favdrawer,#rolo{bottom:var(--pbot,158px)!important}}
/* very small phones: volume gets its own full-width row so the slider is usable */
@media(max-width:360px){
  #player{grid-template-areas:"logo info info info info save" "fav share rnd . . play" "vi vol vol vol vol vol"!important}
  #vol{height:34px}
}

#diag{position:fixed;left:6px;top:calc(env(safe-area-inset-top) + 118px);z-index:60;max-width:calc(100vw - 12px);background:rgba(0,0,0,.78);color:#9dffb0;border:1px solid #39ff14;border-radius:10px;padding:8px 10px;font:11px/1.35 ui-monospace,Menlo,monospace;pointer-events:none}
#diag pre{margin:0;white-space:pre-wrap;word-break:break-word}#diag ol{margin:6px 0 0;padding-left:16px;color:#dfe9ff}
#diag .dgb{display:flex;gap:6px;margin-top:6px;pointer-events:auto}#diag button{background:#39ff14;color:#031200;border:0;border-radius:8px;padding:8px 10px;font:700 12px system-ui}

/* DJ stickers circling the Earth */
.djstk{position:fixed;left:0;top:0;width:70px;transform-origin:50% 50%;will-change:transform,opacity;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}
.djstk img{display:block;width:100%;height:auto;pointer-events:none}
.djstk i{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);white-space:nowrap;font:800 9px/1 system-ui;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);text-shadow:0 0 4px #000,0 0 3px #000}
.djstk .x{position:absolute;right:-6px;top:-6px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.75);border:1px solid var(--line);color:#fff;display:grid;place-items:center;font:700 13px/1 system-ui;cursor:pointer}

/* menu: DJ Mixes chip + Kids/Stories categories at the bottom */
.chip.dj{background:linear-gradient(135deg,#f4f6f8 0%,#aeb4bc 38%,#e9ecef 52%,#8d939b 100%);color:#10141a;border-color:#d9dde2;font-weight:800;box-shadow:0 0 8px rgba(220,226,232,.35),inset 0 1px 0 rgba(255,255,255,.7)}.chip.dj small{opacity:.75;color:inherit}
.fam.setrow .fh{cursor:pointer}.fam.setrow .fh .cnt{margin-left:auto;opacity:.6;font-size:11px}.fam.setrow .fh.on{color:var(--acc)}

/* synced lyrics */
#lyrics .lf{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left}#lyH{flex:1;min-width:0}
#lyrics .lyn{display:none;gap:6px}#lyrics.sync .lyn{display:flex}#lyrics .lyn button{background:rgba(255,255,255,.1);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:6px 9px;font:700 11px system-ui;cursor:pointer}
#lyrics.sync #lyB{padding:30vh 18px;font-size:18px}
#lyrics.sync .ll{padding:5px 0;opacity:.38;transition:opacity .25s,transform .25s,color .25s;cursor:pointer;line-height:1.35}
#lyrics.sync .ll.on{opacity:1;color:var(--acc);transform:scale(1.04);font-weight:800}

/* All stations + Lyric stations on one line */
.allrow{display:flex;gap:6px}.allrow .allbtn{flex:1 1 0;min-width:0;text-align:center;padding:7px 6px;font-size:13px;line-height:1.15}
.allrow .allbtn small{display:block;font-size:11px;font-weight:600;opacity:.7;margin-top:2px}
#lyH.need{color:var(--acc);font-weight:800;animation:needp 1.2s ease-in-out infinite}@keyframes needp{50%{opacity:.45}}

/* 1UP Radio sticker: floats around, taps through to 1upradio.com */
.un{position:fixed;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.ux{position:absolute;left:0;top:0;animation:ux 23s linear infinite alternate;animation-delay:-5s}
.uy{display:block;width:78px;pointer-events:auto;cursor:pointer;animation:uy 17s linear infinite alternate;animation-delay:-3s;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}
.uy img{display:block;width:100%;height:auto}
@keyframes ux{from{transform:translateX(0)}to{transform:translateX(calc(100vw - 78px))}}
@keyframes uy{from{transform:translateY(0)}to{transform:translateY(calc(100vh - 78px))}}
@media(max-width:600px){.uy{width:60px}@keyframes ux{from{transform:translateX(0)}to{transform:translateX(calc(100vw - 60px))}}@keyframes uy{from{transform:translateY(0)}to{transform:translateY(calc(100vh - 60px))}}}
@media(prefers-reduced-motion:reduce){.ux,.uy{animation:none}}

/* lock button: floats above Save song, nearly transparent until you use it */
#lockBtn{position:fixed;left:0;top:0;z-index:9;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);backdrop-filter:blur(6px);color:#fff;font-size:15px;line-height:1;cursor:pointer;opacity:.5;padding:0;display:grid;place-items:center;transition:opacity .2s}
#lockBtn:hover,#lockBtn:focus-visible{opacity:1}
#lockBtn.on{opacity:1}
@media(max-width:820px){#lockBtn{width:36px;height:36px}}
#scopepill{position:fixed;left:50%;transform:translateX(-50%);top:calc(60px + env(safe-area-inset-top));z-index:7;background:rgba(10,12,20,.85);color:#fff;border:1px solid var(--acc,#39ff14);border-radius:999px;padding:5px 12px;font:700 12px system-ui,sans-serif;cursor:pointer;max-width:80vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scopepill.hidden{display:none}

/* history tickets: the last three stations you moved on from */
#hist{position:fixed;left:50%;top:14px;transform:translateX(-50%);display:flex;gap:10px;z-index:6;pointer-events:none;max-width:min(620px,56vw)}
#hist .tk{pointer-events:auto;cursor:pointer;display:flex;align-items:center;gap:7px;height:34px;padding:0 13px;background:var(--glass);backdrop-filter:blur(14px);border:1px dashed var(--line);border-radius:7px;color:var(--txt);font:inherit;font-size:12.5px;white-space:nowrap;position:relative;min-width:0;animation:tkIn .38s cubic-bezier(.2,1.4,.4,1)}
#hist .tk::before,#hist .tk::after{content:"";position:absolute;top:50%;width:9px;height:9px;margin-top:-5px;background:var(--bg);border-radius:50%}
#hist .tk::before{left:-5px}#hist .tk::after{right:-5px}
#hist .tk i{width:8px;height:8px;border-radius:50%;background:var(--tc,var(--acc));flex:none;box-shadow:0 0 6px var(--tc,var(--acc))}
#hist .tk b{font-weight:600;overflow:hidden;text-overflow:ellipsis;max-width:150px}
#hist .tk small{color:var(--dim);font-size:11px;flex:none}
#hist .tk:hover{border-color:var(--acc);border-style:solid;transform:translateY(1px)}
@keyframes tkIn{from{opacity:0;transform:translateY(-16px) scale(.88)}to{opacity:1;transform:none}}
@media(max-width:820px){#hist{left:10px;right:10px;transform:none;max-width:none;gap:8px;top:calc(max(10px,env(safe-area-inset-top)) + 112px)}
#panel:not(.hidden) ~ #hist{display:none}
#hist .tk{height:30px;padding:0 11px;font-size:11.5px;flex:0 1 auto;min-width:0;max-width:calc((100% - 16px) / 3)}#hist .tk b{max-width:none;flex:1;min-width:0}#hist .tk small{display:none}}
@media(prefers-reduced-motion:reduce){#hist .tk{animation:none}}

/* ===== Nebula skin (theme "Nebula"): animated wallpaper + violet glass UI, like the Legal Desk / 1UP skins ===== */
#nebwall{position:fixed;inset:0;z-index:0;overflow:hidden;background:#07050f center/cover no-repeat;pointer-events:none}
#nebwall i{position:absolute;width:90vmax;height:90vmax;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform;mix-blend-mode:screen}
#nebwall i:nth-child(1){left:-30vmax;top:-30vmax;background:radial-gradient(closest-side,#6a2bff,transparent);animation:nebA 38s ease-in-out infinite alternate}
#nebwall i:nth-child(2){right:-35vmax;bottom:-35vmax;background:radial-gradient(closest-side,#d02bb0,transparent);animation:nebB 46s ease-in-out infinite alternate}
#nebwall i:nth-child(3){left:20vmax;top:25vmax;width:60vmax;height:60vmax;background:radial-gradient(closest-side,#2b8cff,transparent);opacity:.35;animation:nebC 55s ease-in-out infinite alternate}
@keyframes nebA{to{transform:translate(25vmax,18vmax) scale(1.2)}}@keyframes nebB{to{transform:translate(-22vmax,-16vmax) scale(1.15)}}@keyframes nebC{to{transform:translate(-18vmax,12vmax) scale(.8)}}
body.skin-nebula #globe{z-index:1}
body.skin-nebula #side,body.skin-nebula #panel,body.skin-nebula #player,body.skin-nebula #favdrawer,body.skin-nebula #themepop,body.skin-nebula #sresults{background:linear-gradient(160deg,rgba(54,26,128,.78),rgba(9,6,20,.88))!important;border:1px solid rgba(139,92,246,.7);border-radius:20px;box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 10px 40px rgba(80,30,200,.35),0 0 26px rgba(139,92,246,.22);backdrop-filter:blur(18px) saturate(1.3)}
body.skin-nebula #topbar button,body.skin-nebula #searchwrap input,body.skin-nebula .brand #themeBtn{background:linear-gradient(160deg,rgba(60,30,140,.7),rgba(12,8,30,.8))!important;border:1px solid rgba(139,92,246,.6);border-radius:999px;box-shadow:0 0 14px rgba(139,92,246,.25)}
body.skin-nebula #topbar button:hover,body.skin-nebula .brand #themeBtn:hover{box-shadow:0 0 20px rgba(176,97,255,.7);border-color:#cc8cff}
body.skin-nebula .chip,body.skin-nebula .allbtn,body.skin-nebula input[type=search]{border-radius:999px}
body.skin-nebula .chip.on,body.skin-nebula .allbtn.on,body.skin-nebula .allrow .on{background:linear-gradient(135deg,#8b5cf6,#5cc8f5);color:#fff;box-shadow:0 0 14px rgba(139,92,246,.6)}
body.skin-nebula #pplay{background:linear-gradient(135deg,#8b5cf6,#5cc8f5)!important;color:#fff!important;box-shadow:0 0 22px rgba(139,92,246,.8)}
body.skin-nebula #pname{color:#e6e1fa;text-shadow:0 0 12px rgba(176,97,255,.6)}

/* Omarchy Store shuttle: flies end to end just above the control panel, back and forth, with engine flames (same as 1upradio.com's top banner) */
.sh{left:0;right:0;top:auto;bottom:calc(var(--pbot,90px) - 6px);height:84px}
.shx{animation:shflyx 24s linear infinite;animation-delay:0s}
.shy{position:relative;width:84px;margin-top:4px;animation:shflip 24s linear infinite,shbob 2.6s ease-in-out infinite alternate;animation-delay:0s,0s}
.shx:hover,.shx:hover .shy{animation-play-state:paused}
.shy .fl{display:block;position:absolute;z-index:0;left:80%;top:37%;width:42%;height:auto;overflow:visible;transform-origin:0 50%;transform:rotate(-25deg);pointer-events:none;filter:drop-shadow(0 0 6px rgba(255,120,0,.85))}
.shy img{position:relative;z-index:1}
.shy .fl path{transform-box:fill-box;transform-origin:0 50%}
.shy .fl .o{animation:fo .13s ease-in-out infinite alternate}.shy .fl .m{animation:fm .09s ease-in-out infinite alternate}.shy .fl .c{animation:fc .07s ease-in-out infinite alternate}
@keyframes fo{from{transform:scale(.82,.9)}to{transform:scale(1.18,1.08)}}
@keyframes fm{from{transform:scale(1.1,.9)}to{transform:scale(.8,1.1)}}
@keyframes fc{from{transform:scale(.8,1)}to{transform:scale(1.15,.85)}}
@keyframes shflyx{0%{transform:translateX(-130px)}50%{transform:translateX(calc(100vw + 40px))}100%{transform:translateX(-130px)}}
@keyframes shflip{0%,49.99%{transform:rotate(-25deg) scaleX(-1)}50%,100%{transform:rotate(25deg)}}
@keyframes shbob{from{translate:0 0}to{translate:0 9px}}
@media(prefers-reduced-motion:reduce){.sh{display:none}}
@media(max-width:820px){.sh{height:70px}.shy{width:62px;margin-top:3px;animation-duration:46s,2.8s}.shx{animation-duration:46s}}

/* control panel: square, end to end (no rounded corners, full width, glued to the bottom) */
#player,body.skin-nebula #player{left:0!important;right:0!important;bottom:0!important;transform:none!important;width:100%!important;border-radius:0!important;border-left:0!important;border-right:0!important;border-bottom:0!important}
@media(min-width:821px){#player{padding-left:max(18px,calc((100vw - 900px)/2))!important;padding-right:max(18px,calc((100vw - 900px)/2))!important}}
@media(max-width:820px){#player{padding-bottom:max(10px,env(safe-area-inset-bottom))!important}}
#stat{bottom:calc(var(--pbot,90px) - 2px)}
#attr{bottom:calc(var(--pbot,90px) - 6px)}

/* desktop: order = star, volume, lock, save song, share, random, play; the lock button sits in the bar beside the volume meter */
#lockSlot{display:none}
@media(min-width:821px){
  #plogo{order:0}#player .info{order:1}#favBtn{order:2}#volIco{order:3}#vol{order:4;flex:0 0 120px;width:120px}#lockSlot{display:block;order:5;width:34px;height:34px;flex:none}
  #saveSong{order:6}#shareBtn{order:7}#randomBar{order:8}#pplay{order:9}
  #lockBtn{opacity:1}
}

/* phones/tablets: the lock sits in the control panel right beside Save song (top row), same size as the other round buttons */
@media(max-width:820px){
  #player #lockBtn{position:static!important;grid-column:5;grid-row:1;justify-self:end;align-self:center;width:48px!important;height:48px!important;font-size:22px;opacity:1!important;margin:0;border:1px solid var(--line);background:rgba(255,255,255,.08);backdrop-filter:none;transition:none}
  #player #lockBtn.on{background:var(--acc)!important;border-color:var(--acc)!important}
  #player .info{padding-right:56px}
}
@media(max-width:820px) and (max-height:600px){#player #lockBtn{width:44px!important;height:44px!important}#player .info{padding-right:52px}}
/* hover magnifier: one composited layer; position = translate3d, size = a transform transition (no layout, no canvas redraw) */
#hoverMag{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:2;will-change:transform;contain:layout paint}
#hoverMag i{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 1.5px rgba(255,255,255,.85);opacity:0;
  transform:scale(calc(var(--s,.3) * .4)) translateZ(0);transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .16s cubic-bezier(.2,.8,.2,1);will-change:transform,opacity;backface-visibility:hidden}
#hoverMag.on i{opacity:.95;transform:scale(var(--s,.3)) translateZ(0)}
@media (prefers-reduced-motion:reduce){#hoverMag i{transition:none}}
#dtip{will-change:transform}
/* Sky details button (Celestial view only): constellation names, twinkling stations, country outlines */
#skyBtn{display:none;position:fixed;right:14px;bottom:112px;z-index:9;width:46px;height:46px;border-radius:50%;border:1px solid rgba(231,196,106,.6);background:rgba(7,13,30,.8);color:#e7c46a;font-size:21px;line-height:1;cursor:pointer;backdrop-filter:blur(10px);-webkit-tap-highlight-color:transparent;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s}
body.sky-on #skyBtn{display:block}
#skyBtn:active{transform:scale(.92)}
#skyBtn.on{background:#e7c46a;color:#1a1405;box-shadow:0 0 18px rgba(231,196,106,.65)}
@media(min-width:821px){body:has(#panel:not(.hidden)) #skyBtn{right:372px}}
@media(max-width:820px){#skyBtn{bottom:calc(196px + env(safe-area-inset-bottom));right:12px}}
/* Celestial convoy: replaces the three bouncing stickers while the Celestial view is on */
body.sky-on .sh,body.sky-on #bounceHead,body.sky-on .un{display:none!important}
#convoy{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden;display:none}
body.sky-on #convoy{display:block}
#convoy a{position:absolute;left:0;top:0;display:block;pointer-events:auto;cursor:pointer;will-change:transform;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}
#convoy .cvI{display:block;position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
#convoy img{display:block;width:100%;height:auto;position:relative;z-index:1}
#convoy .cvS{width:136px}#convoy .cvU{width:64px}#convoy .cvB{width:50px}
#convoy .cvS .fl{display:block;position:absolute;z-index:0;left:80%;top:37%;width:42%;height:auto;overflow:visible;transform-origin:0 50%;transform:rotate(-6deg);pointer-events:none;filter:drop-shadow(0 0 6px rgba(255,120,0,.85))}
#convoy .cvS .fl path{transform-box:fill-box;transform-origin:0 50%}
#convoy .cvS .fl .o{animation:fo .13s ease-in-out infinite alternate}#convoy .cvS .fl .m{animation:fm .09s ease-in-out infinite alternate}#convoy .cvS .fl .c{animation:fc .07s ease-in-out infinite alternate}
#convoy .cvW{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#convoy .cvW path{fill:none;stroke:#e7c46a;stroke-width:2.2;stroke-linecap:round;opacity:.95;filter:drop-shadow(0 0 4px rgba(231,196,106,.8))}
@media(max-width:820px){#convoy .cvS{width:104px}#convoy .cvU{width:50px}#convoy .cvB{width:40px}}
@media(prefers-reduced-motion:reduce){#convoy{display:none!important}}
/* Theme button + popup: no glowing border or halo (any view, any look) */
#themeBtn,#themeBtn:hover,#themeBtn:focus,#themeBtn:focus-visible,#themeBtn:active,.brand #themeBtn,.brand #themeBtn:hover,body.skin-nebula .brand #themeBtn,body.skin-nebula .brand #themeBtn:hover,body.skin-celestial .brand #themeBtn,body.skin-celestial .brand #themeBtn:hover{outline:none!important;box-shadow:none!important;border-color:var(--line)!important;-webkit-tap-highlight-color:transparent}
#themeBtn .tdot,.brand #themeBtn .tdot{box-shadow:none!important}
#themepop,body.skin-nebula #themepop,body.skin-celestial #themepop{box-shadow:none!important;border-color:var(--line)!important;outline:none!important}
#themepop .sw button,#themepop .sw button:focus,#themepop .sw button:focus-visible{outline:none!important}
#themepop .sw button.on i{box-shadow:none!important}
/* messages (lock / unlock ...) sit ABOVE the control panel, never over the station name */
#toast{bottom:calc(var(--pbot,90px) + 10px)!important;max-width:min(92vw,360px);text-align:center;white-space:nowrap;pointer-events:none}
/* Startup screen: ALL-CAPS futuristic title, live local time and place, and a PUSH START button that starts the radio */
@font-face{font-family:"Orbitron";font-weight:500;font-display:swap;src:url(vendor/fonts/orbitron-500.woff2) format("woff2")}
@font-face{font-family:"Orbitron";font-weight:800;font-display:swap;src:url(vendor/fonts/orbitron-800.woff2) format("woff2")}
#loading{background:radial-gradient(ellipse at 50% 38%,#0b1d47 0%,#050b1c 55%,#02050c 100%)!important;overflow:hidden;justify-content:center}
#loading .ld-stars{position:absolute;inset:0;background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 28% 72%,#cfe0ff,transparent),radial-gradient(1.4px 1.4px at 44% 30%,#fff,transparent),radial-gradient(1px 1px at 62% 82%,#fff,transparent),radial-gradient(1.2px 1.2px at 78% 24%,#cfe0ff,transparent),radial-gradient(1px 1px at 88% 64%,#fff,transparent),radial-gradient(1px 1px at 6% 56%,#fff,transparent),radial-gradient(1.3px 1.3px at 52% 12%,#fff,transparent),radial-gradient(1px 1px at 36% 90%,#cfe0ff,transparent),radial-gradient(1.2px 1.2px at 94% 10%,#fff,transparent);animation:ldTw 4s ease-in-out infinite alternate}
@keyframes ldTw{from{opacity:.45}to{opacity:1}}
#loading .ld-scan{position:absolute;left:0;right:0;top:-20%;height:20%;background:linear-gradient(180deg,transparent,rgba(95,200,216,.10),transparent);animation:ldScan 5.5s linear infinite;pointer-events:none}
@keyframes ldScan{to{top:110%}}
#loading .ld-c{position:absolute;width:34px;height:34px;border:0 solid rgba(231,196,106,.75);opacity:0;animation:ldFade .8s .4s ease forwards}
#loading .ld-tl{left:22px;top:22px;border-width:2px 0 0 2px}#loading .ld-tr{right:22px;top:22px;border-width:2px 2px 0 0}
#loading .ld-bl{left:22px;bottom:22px;border-width:0 0 2px 2px}#loading .ld-br{right:22px;bottom:22px;border-width:0 2px 2px 0}
#loading .ld-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:0 24px;animation:ldIn .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes ldIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
#loading .ld-orb{position:relative;width:74px;height:74px;border-radius:50%;margin-bottom:12px;background:radial-gradient(circle at 36% 30%,#2a5cb8,#10275a 55%,#060d24);border:2px solid #e7c46a;box-shadow:inset 0 0 18px rgba(95,200,216,.25),0 0 26px rgba(95,200,216,.25)}
#loading .ld-orb::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px dashed rgba(231,196,106,.55);animation:s 9s linear infinite}
#loading .ld-orb i{position:absolute;left:50%;top:-12px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(231,196,106,.7);transform-origin:4.5px 49px;animation:s 9s linear infinite}
#loading .ld-by{font:500 12px Orbitron,system-ui,sans-serif;letter-spacing:.5em;text-transform:uppercase;color:#8fb6d8;opacity:0;animation:ldFade .8s .1s ease forwards}
#loading .ld-name{font:800 clamp(24px,5.6vw,58px)/1.1 Orbitron,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;min-height:1.1em;filter:drop-shadow(0 0 18px rgba(231,196,106,.45)) drop-shadow(0 0 3px rgba(255,255,255,.35))}
#loading .ld-name span{display:inline-block;color:transparent;background:linear-gradient(180deg,#ffffff 0%,#ffe9a6 48%,#e7c46a 100%);-webkit-background-clip:text;background-clip:text;opacity:0;transform:translateY(10px) scale(1.15);animation:ldLetter .6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes ldLetter{to{opacity:1;transform:none}}
@keyframes ldFade{to{opacity:1}}
#loading .ld-line{width:0;height:2px;background:linear-gradient(90deg,transparent,#5fc8d8,#e7c46a,#5fc8d8,transparent);animation:ldLine 1.1s 1s ease forwards}
@keyframes ldLine{to{width:min(420px,76vw)}}
#loading .ld-time{font:500 clamp(30px,7.4vw,60px)/1.05 Orbitron,ui-monospace,monospace;color:#e8fbff;letter-spacing:.1em;opacity:0;animation:ldFade .8s 1.2s ease forwards;font-variant-numeric:tabular-nums;text-shadow:0 0 16px rgba(95,200,216,.6)}
#loading .ld-place{font:500 clamp(11px,3vw,15px)/1.4 Orbitron,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#cdbf8f;opacity:0;animation:ldFade .8s 1.5s ease forwards}
#loading #loadmsg{margin-top:10px;font:500 11px Orbitron,system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#6f86b0;animation:ldPulse 1.6s ease-in-out infinite}
@keyframes ldPulse{50%{opacity:.4}}
#ldStart{position:absolute;left:50%;bottom:calc(9vh + env(safe-area-inset-bottom));transform:translateX(-50%);min-width:min(300px,78vw);padding:16px 30px;border:1px solid rgba(231,196,106,.9);background:rgba(231,196,106,.08);color:#f3e3ad;font:800 clamp(15px,3.6vw,20px)/1 Orbitron,system-ui,sans-serif;letter-spacing:.32em;text-transform:uppercase;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .5s,background .2s,box-shadow .2s;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);-webkit-tap-highlight-color:transparent}
#ldStart.ready{opacity:1;pointer-events:auto;animation:ldBtn 1.5s ease-in-out infinite}
@keyframes ldBtn{50%{background:rgba(231,196,106,.22);box-shadow:0 0 22px rgba(231,196,106,.45)}}
#ldStart:hover,#ldStart:focus-visible{background:#e7c46a;color:#1a1405;outline:none}
#ldStart:active{transform:translateX(-50%) scale(.97)}
@media(prefers-reduced-motion:reduce){#loading .ld-card,#loading .ld-stars,#loading .ld-scan,#loading .ld-orb::before,#loading .ld-orb i,#loading #loadmsg,#ldStart.ready{animation:none}#loading .ld-name span,#loading .ld-by,#loading .ld-time,#loading .ld-place,#loading .ld-c{animation:none;opacity:1;transform:none}#loading .ld-line{animation:none;width:min(420px,76vw)}}
#loading .ld-orb svg{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);filter:drop-shadow(0 0 4px rgba(0,0,0,.6))}
#loading .ld-date{font:500 clamp(11px,3vw,15px)/1.4 Orbitron,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#8fa6cc;opacity:0;animation:ldFade .8s 1.7s ease forwards;text-align:center}
@media(prefers-reduced-motion:reduce){#loading .ld-date{animation:none;opacity:1}}
/* Celestial: lights button (hide the station lights, show the world outline in light blue) */
#lightsBtn{display:none;position:fixed;right:14px;bottom:170px;z-index:9;width:46px;height:46px;border-radius:50%;border:1px solid rgba(95,200,216,.6);background:rgba(7,13,30,.8);color:#9fe3f0;font-size:20px;line-height:1;cursor:pointer;backdrop-filter:blur(10px);-webkit-tap-highlight-color:transparent;transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s}
body.sky-on #lightsBtn{display:block}
#lightsBtn:active{transform:scale(.92)}
#lightsBtn.on{background:#5fc8d8;color:#04121c;filter:grayscale(1)}
body.sky-lights-off #hoverMag{display:none}
@media(min-width:821px){body:has(#panel:not(.hidden)) #lightsBtn{right:372px}}
@media(max-width:820px){#lightsBtn{bottom:calc(250px + env(safe-area-inset-bottom));right:12px}}