/* y2k17 music scroll-lock fix */
/* —— float desk + snap windows (y2k9) —— */
.float-desk{
  position:fixed;z-index:60;width:min(240px,78vw);
  background:rgba(8,8,8,.96);border:2px solid var(--acid);
  box-shadow:5px 5px 0 #000;color:var(--ink);
  font-family:var(--mono);user-select:none;
}
.float-desk.is-hidden{display:none}
.float-desk.is-live{border-color:var(--magenta);box-shadow:5px 5px 0 var(--magenta)}
.float-desk.is-dragging{opacity:.92;cursor:grabbing;z-index:70}
.float-chrome{display:flex;justify-content:space-between;align-items:center;gap:.4rem;
  padding:.28rem .4rem;background:linear-gradient(90deg,var(--acid),var(--acid-hot));color:#050505;
  cursor:grab;font-size:.55rem;letter-spacing:.12em;font-weight:800}
.float-desk.is-live .float-chrome{background:linear-gradient(90deg,var(--magenta),#ff7ad9);color:#fff}
.float-x{border:1px solid #050505;background:#050505;color:var(--acid);font-weight:800;cursor:pointer;line-height:1;padding:.05rem .35rem}
.float-title{padding:.45rem .55rem .1rem;font-size:.78rem;letter-spacing:.06em;color:var(--acid);font-weight:800}
.float-by{padding:0 .55rem .35rem;font-size:.5rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.float-controls{display:flex;gap:.35rem;padding:0 .55rem .5rem}
.float-controls button{flex:1;border:1px solid var(--acid);background:var(--acid);color:#050505;
  font-family:var(--mono);font-size:.7rem;font-weight:800;padding:.35rem 0;cursor:pointer}
.float-desk.is-live .float-controls button{border-color:var(--magenta);background:var(--magenta);color:#fff}
.float-progress{height:4px;margin:0 .55rem .55rem;background:#111;border:1px solid rgba(200,255,0,.25)}
.float-progress i{display:block;height:100%;width:0;background:var(--acid)}
.float-desk.is-live .float-progress i{background:var(--magenta)}

.panel.is-window{touch-action:none}
.panel.is-window .panel-chrome{cursor:grab}
.panel.is-window.is-dragging{opacity:.94;z-index:8;box-shadow:8px 8px 0 var(--magenta)}
.panel.is-window.is-dragging .panel-chrome{cursor:grabbing}
.snap-ghost{outline:1px dashed rgba(200,255,0,.45);outline-offset:2px}

.mini-meter .bar i.maxed,
.over-meter i.maxed{box-shadow:0 0 12px var(--acid)!important}
.rail-btn.is-fire{background:var(--magenta)!important;border-color:var(--magenta)!important;color:#fff!important}
.stage.is-shaking{animation:shake .28s linear}
@keyframes shake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-3px,1px)}
  40%{transform:translate(3px,-2px)}
  60%{transform:translate(-2px,2px)}
  80%{transform:translate(2px,-1px)}
}
.confetti{position:fixed;inset:0;z-index:80;pointer-events:none}


/* y2k14 volume slider */
.float-vol,.desk-vol{
  display:flex;align-items:center;gap:.4rem;
  padding:0 .55rem .45rem;font-family:var(--mono,monospace);
}
.float-vol-lab,.desk-vol-lab{
  flex:0 0 auto;font-size:.5rem;letter-spacing:.12em;color:var(--acid,#c8ff00);font-weight:800;
}
.vol-slider,input[data-desk-vol]{
  -webkit-appearance:none;appearance:none;flex:1;height:8px;border-radius:0;
  background:linear-gradient(90deg,#111 0%,#1a1a00 100%);
  border:1px solid rgba(200,255,0,.45);outline:none;cursor:pointer;
  box-shadow:inset 1px 1px 0 #000;
}
.vol-slider::-webkit-slider-thumb,input[data-desk-vol]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;
  background:linear-gradient(180deg,#eaff66,#c8ff00);border:1px solid #050505;
  box-shadow:2px 2px 0 #000;cursor:grab;
}
.vol-slider::-moz-range-thumb,input[data-desk-vol]::-moz-range-thumb{
  width:14px;height:14px;background:linear-gradient(180deg,#eaff66,#c8ff00);
  border:1px solid #050505;box-shadow:2px 2px 0 #000;cursor:grab;border-radius:0;
}
.float-desk.is-live .float-vol-lab{color:#fff}
.float-desk.is-live .vol-slider,
.float-desk.is-live input[data-desk-vol]{border-color:var(--magenta,#ff2bd6)}
.float-desk.is-live .vol-slider::-webkit-slider-thumb,
.float-desk.is-live input[data-desk-vol]::-webkit-slider-thumb{
  background:linear-gradient(180deg,#ff7ad9,var(--magenta,#ff2bd6));
}
.desk-vol{padding:.15rem 0 0;flex:1 1 100%}
.desk-controls .desk-vol{margin-top:.15rem}

/* y2k16 — sitewide themes via data-theme */
html[data-theme="acid"],:root{
  --void:#050505;--acid:#c8ff00;--acid-hot:#eaff66;--magenta:#ff2bd6;--cyan:#00f0ff;
  --ink:#f2ffe6;--muted:#8a8a8a;--yellow:#ffe600;--line:rgba(200,255,0,.55);--warn:#ff3b1f;
}
html[data-theme="light"]{
  --void:#f4f4f0;--acid:#1a1a1a;--acid-hot:#333;--magenta:#c4008a;--cyan:#007a8a;
  --ink:#111;--muted:#555;--yellow:#8a6a00;--line:rgba(0,0,0,.35);--warn:#c42810;
}
html[data-theme="ice"]{
  --void:#061018;--acid:#00f0ff;--acid-hot:#9ff7ff;--magenta:#7aa2ff;--cyan:#00f0ff;
  --ink:#e8fbff;--muted:#7a9aaa;--yellow:#ffe600;--line:rgba(0,240,255,.45);--warn:#ff6b4a;
}
html[data-theme="hot"]{
  --void:#120505;--acid:#ff3b1f;--acid-hot:#ff7a4a;--magenta:#ff2bd6;--cyan:#ffe600;
  --ink:#ffe8e0;--muted:#aa7a70;--yellow:#ffe600;--line:rgba(255,59,31,.5);--warn:#ff3b1f;
}
html[data-theme="violet"]{
  --void:#0c0614;--acid:#b44dff;--acid-hot:#d9a0ff;--magenta:#ff2bd6;--cyan:#8a7aff;
  --ink:#f3e8ff;--muted:#8a7aaa;--yellow:#ffe600;--line:rgba(180,77,255,.5);--warn:#ff4a8a;
}
html[data-theme="light"] body{background:var(--void);color:var(--ink)}
html[data-theme="light"] .wipe{background:#f4f4f0}

/* music wheel — fixed overlay portal, circular geometry */
.music-wheel{
  position:fixed!important;inset:0!important;z-index:85!important;
  display:flex;align-items:center;justify-content:center;
  margin:0!important;padding:0;transform:none!important;
  pointer-events:auto;
}
.music-wheel.is-hidden{display:none!important;pointer-events:none!important}
.mw-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(2px);z-index:0}
.mw-panel{position:relative;z-index:1;width:min(440px,92vw);padding:1rem 1rem 1.25rem;
  background:rgba(8,8,8,.97);border:2px solid var(--acid);box-shadow:6px 6px 0 #000,0 0 40px rgba(200,255,0,.15);
  max-height:min(92dvh,640px);overflow:auto;overscroll-behavior:contain}
.mw-chrome{display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  font-family:var(--mono,monospace);font-size:.62rem;letter-spacing:.14em;color:#050505;
  background:linear-gradient(90deg,var(--acid),var(--acid-hot,#eaff66));padding:.35rem .5rem;font-weight:800;margin:-1rem -1rem .75rem}
.mw-x{border:1px solid #050505;background:#050505;color:var(--acid);font-weight:800;cursor:pointer;padding:.05rem .4rem}
.mw-hint{font-family:var(--mono,monospace);font-size:.5rem;letter-spacing:.1em;color:var(--muted);margin-bottom:.75rem;text-transform:uppercase}
.mw-stage{position:relative;width:min(320px,78vw);aspect-ratio:1/1;margin:0 auto;overflow:visible}
.mw-ring{position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(200,255,0,.4);background:
    radial-gradient(circle at 50% 50%,rgba(0,0,0,.35) 0 22%,transparent 23%),
    conic-gradient(from 0deg,rgba(200,255,0,.1),rgba(255,43,214,.12),rgba(200,255,0,.1));
  box-shadow:inset 0 0 24px rgba(0,0,0,.45),0 0 20px rgba(200,255,0,.12);
  transition:transform .18s ease-out;overflow:visible;transform-origin:50% 50%}
.mw-hub{position:absolute;left:50%;top:50%;width:28%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;border:2px solid rgba(200,255,0,.55);background:
    radial-gradient(circle at 40% 35%,#2a2a00,#0a0a0a 70%);
  box-shadow:0 0 16px rgba(200,255,0,.25);pointer-events:none;z-index:2}
.mw-hub i{position:absolute;left:50%;top:50%;width:28%;aspect-ratio:1;margin:0;transform:translate(-50%,-50%);
  border-radius:50%;background:#050505;border:2px solid #666}
.mw-track{
  position:absolute;left:50%;top:50%;z-index:3;
  width:max-content;max-width:7.2rem;margin:0;padding:.2rem .35rem;
  transform:translate(-50%,-50%) rotate(var(--ang)) translateY(calc(-1 * var(--mw-r,118px))) rotate(calc(-1 * var(--ang)));
  transform-origin:center center;
  background:rgba(0,0,0,.55);border:1px solid rgba(200,255,0,.35);border-radius:2px;
  cursor:pointer;pointer-events:auto;
  display:flex;align-items:center;gap:.3rem;color:var(--acid);
  font-family:var(--mono,monospace);font-size:.58rem;letter-spacing:.04em;text-align:left;
  box-shadow:2px 2px 0 #000;
}
.mw-track:hover,.mw-track.is-focus{border-color:var(--acid);background:rgba(200,255,0,.14);color:#fff;z-index:4}
.mw-track.is-focus{box-shadow:0 0 12px rgba(200,255,0,.35),2px 2px 0 #000}
.mw-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);border:1px solid var(--acid);flex:0 0 auto}
.mw-track.is-focus .mw-dot{background:var(--acid);box-shadow:0 0 8px var(--acid)}
.mw-lab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:5.8rem;line-height:1.2}
.mw-focus{margin-top:.9rem;text-align:center;font-family:var(--mono,monospace);font-size:.75rem;letter-spacing:.1em;color:var(--acid);font-weight:800;line-height:1.35}

/* Music wheel open: do NOT freeze/reposition body (that jumped the layout
   and trapped scroll). Overlay is already position:fixed and covers the UI. */
html.mw-open{
  /* keep page scroll position intact; overlay eats interaction */
}
html.mw-open .stage,html.mw-open .ps2-stage,html.mw-open .xp-desktop{
  transform:none!important;
}
.music-wheel:not(.is-hidden){
  touch-action:none;
}
.music-wheel .mw-panel{touch-action:pan-y}


/* CD pop */
.music-cd{position:fixed;left:50%;top:42%;z-index:90;transform:translate(-50%,-50%) scale(.4);
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .25s ease;width:120px;height:120px}
.music-cd.is-show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.music-cd.is-drop{transform:translate(-50%,120%) scale(.55) rotate(25deg);opacity:0;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s ease .15s}
.cd-disc{width:120px;height:120px;border-radius:50%;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%,#111 0 14%,transparent 15%),
    repeating-conic-gradient(from 0deg,#222 0 4deg,#c8ff00 4deg 5deg,#333 5deg 9deg,#ff2bd6 9deg 10deg);
  border:3px solid var(--acid);box-shadow:0 0 24px rgba(200,255,0,.35),4px 4px 0 #000}
.cd-hole{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  background:var(--void,#050505);border:2px solid #888;box-shadow:inset 0 0 0 3px #222}
.cd-shine{position:absolute;inset:8%;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 42%,transparent 58%,rgba(255,255,255,.12));pointer-events:none}
.cd-label{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);font-family:var(--mono,monospace);
  font-size:.48rem;letter-spacing:.08em;color:#fff;text-shadow:1px 1px 0 #000;white-space:nowrap;max-width:78px;overflow:hidden;text-overflow:ellipsis}


/* y2k17 light surface — full white bg when theme=light */
html[data-theme="light"],
html[data-theme="light"] body{
  background:#f4f4f0!important;
  color:#111!important;
}
html[data-theme="light"] .float-desk{
  background:rgba(255,255,255,.97)!important;
  color:#111;
}