/* ⚡ VTC floor jukebox (music.html, preview "jukebox-floor"). Layers are swappable — see FLOOR-JUKEBOX-README.md */
.fj{--gold:#f7d573;--cy:#3ef0ff;--vi:#a66bff;--mg:#ff3df2;--pulse:0;--h:calc(100svh - 150px);position:relative;height:max(520px,var(--h));max-width:100%;margin:0 auto 18px;display:grid;place-items:center;overflow:hidden;border-radius:18px;
 background:radial-gradient(90% 60% at 50% 30%,#2a0f45 0,#0b0618 60%,#04020a);user-select:none;-webkit-user-select:none;touch-action:pan-y}
.fj-cab{position:relative;height:96%;aspect-ratio:.56;max-width:96%;container-type:size}
@supports not (height:1cqh){.fj-cab{width:min(96%,52svh)}}
/* layer: body */
.fj-body{position:absolute;inset:0;border-radius:50% 50% 8% 8%/30% 30% 4% 4%;background:linear-gradient(90deg,#3a1c0c,#8a4a1e 18%,#c27b38 30%,#6b3514 50%,#c27b38 70%,#8a4a1e 82%,#3a1c0c);box-shadow:0 0 0 3px #f7d57355,0 30px 60px #000,inset 0 0 40px #000a}
.fj-body::after{content:"";position:absolute;left:8%;right:8%;bottom:3%;height:30%;border-radius:10px;background:repeating-linear-gradient(90deg,#1a0d06 0 3px,#3b220f 3px 9px);box-shadow:inset 0 0 20px #000,0 0 0 2px var(--gold)}
.fj-body.img{background:center/100% 100% no-repeat var(--art);box-shadow:none}.fj-body.img::after{display:none}
/* layer: light tubes */
.fj-tube{position:absolute;top:14%;bottom:4%;width:7%;border-radius:40px;background:linear-gradient(180deg,var(--gold),var(--cy) 35%,var(--vi) 70%,var(--mg));background-size:100% 300%;animation:fjflow 6s linear infinite;
 filter:brightness(calc(.8 + var(--pulse)*.9)) saturate(1.3);box-shadow:0 0 calc(10px + var(--pulse)*40px) var(--cy),0 0 calc(4px + var(--pulse)*20px) var(--mg),inset 0 0 8px #fff8;opacity:.95}
.fj-tl{left:3%}.fj-tr{right:3%}
.fj-tube::after{content:"";position:absolute;inset:6% 30%;border-radius:20px;background:linear-gradient(#fff9,#fff2);filter:blur(1px)}
@keyframes fjflow{to{background-position:0 300%}}
/* layer: glass arch window + carousel */
.fj-glass{position:absolute;left:13%;right:13%;top:5%;height:44%;border-radius:50% 50% 6% 6%/40% 40% 4% 4%;overflow:hidden;background:radial-gradient(70% 70% at 50% 60%,#160b2e,#05030c);box-shadow:inset 0 0 0 3px var(--gold),inset 0 0 30px #000,0 0 18px #f7d57355;perspective:600px;touch-action:pan-y;cursor:grab;outline:none}
.fj-glass:focus-visible{box-shadow:inset 0 0 0 3px var(--cy),0 0 20px var(--cy)}
.fj-glass::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#ffffff22 40%,transparent 48%),linear-gradient(200deg,transparent 60%,#3ef0ff14 70%,transparent 80%);border-radius:inherit}
.fj-portal{position:absolute;inset:-30%;opacity:0;transition:opacity 1.2s;background:conic-gradient(from 0deg,#3ef0ff55,#a66bff66,#ff3df255,#f7d57366,#3ef0ff55);-webkit-mask:radial-gradient(circle,#000 20%,transparent 62%);mask:radial-gradient(circle,#000 20%,transparent 62%);animation:fjspin 9s linear infinite}
.open .fj-portal{opacity:calc(.6 + var(--pulse)*.4)}
.fj-portal::after{content:"";position:absolute;inset:25%;border-radius:50%;border:2px dashed #f7d573aa;animation:fjspin 5s linear infinite reverse}
@keyframes fjspin{to{transform:rotate(360deg)}}
.fj-scene{position:absolute;left:50%;top:46%;transform-style:preserve-3d;transform:rotateX(-6deg)}
.fj-ring{--rz:28cqw;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.15,.85,.25,1.08)}.fj-ring.drag{transition:none}
.fj-alb{position:absolute;width:20cqw;aspect-ratio:1;left:-10cqw;top:-10cqw;border-radius:6px;transform:rotateY(calc(var(--i)*360deg/var(--n))) translateZ(var(--rz));box-shadow:0 0 0 1px #f7d57399,0 0 12px #ff3df255;filter:brightness(.5);transition:filter .4s,transform .5s cubic-bezier(.2,1.5,.4,1);backface-visibility:hidden}
.fj-alb img{width:100%;height:100%;display:block;border-radius:inherit;object-fit:cover;pointer-events:none}
.fj-alb.front{filter:none;transform:rotateY(calc(var(--i)*360deg/var(--n))) translateZ(calc(var(--rz) + 3cqw)) translateY(-1.5cqw) scale(1.08);box-shadow:0 0 0 2px var(--gold),0 0 22px var(--gold),0 0 40px var(--cy);cursor:pointer}
.fj-ttl{position:absolute;left:0;right:0;bottom:4%;text-align:center;font:700 clamp(.8rem,3.4cqw,1.2rem) Georgia,serif;color:var(--gold);text-shadow:0 0 10px #f7d573aa;pointer-events:none}
/* layer: mechanism (turntable + arm + vinyl) */
.fj-mech{position:absolute;left:16%;right:16%;top:50%;height:15%;border-radius:12px;background:linear-gradient(#1c1030,#0a0616);box-shadow:inset 0 0 0 2px #f7d57388,inset 0 0 20px #000}
.fj-plat{position:absolute;left:50%;top:55%;width:56%;aspect-ratio:1;transform:translate(-50%,-50%) scaleY(.3);border-radius:50%;background:radial-gradient(circle,#555 0 6%,#222 7% 100%);box-shadow:0 0 0 2px #888,0 0 calc(8px + var(--pulse)*24px) var(--cy)}
.fj-vinyl{position:absolute;left:50%;top:55%;width:50%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scaleY(.3);opacity:0;pointer-events:none;transform-style:preserve-3d}
.fj-vinyl .face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;background:repeating-radial-gradient(circle,#111 0 2px,#1d1d1d 2px 4px);box-shadow:0 0 0 1px #f7d57388}
.fj-vinyl .face.b{transform:rotateY(180deg)}
.fj-vinyl .lbl{position:absolute;inset:32%;border-radius:50%;overflow:hidden;background:var(--gold)}.fj-vinyl .lbl img{width:100%;height:100%;object-fit:cover}
.fj-vinyl.on{opacity:1}.playing .fj-vinyl.on .face{animation:fjspin 1.8s linear infinite}
.fj-arm{position:absolute;right:6%;top:-40%;width:44%;height:120%;pointer-events:none;transform-origin:85% 10%;transform:rotate(-24deg);transition:transform .7s cubic-bezier(.3,1.3,.5,1)}
.fj-arm svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 4px var(--cy))}
.playing .fj-arm{transform:rotate(4deg)}
/* marquee + controls */
.fj-marq{position:absolute;left:14%;right:14%;top:66.5%;height:5%;display:flex;align-items:center;justify-content:center;border-radius:6px;background:#0d0518;box-shadow:inset 0 0 12px #ff3df288,0 0 0 1px var(--gold);overflow:hidden;font:700 clamp(.6rem,3cqw,.95rem)/1 "Courier New",monospace;letter-spacing:2px;color:#ffe14a;text-shadow:0 0 6px #ffe14a;white-space:nowrap;text-transform:uppercase}
.fj-ctl{position:absolute;left:12%;right:12%;top:72.5%;display:flex;gap:4%;justify-content:center;z-index:4}
.fj-ctl button{width:clamp(38px,12cqw,56px);aspect-ratio:1;border-radius:50%;border:1px solid var(--cy);background:#140c2acc;color:#fff;font-size:clamp(.9rem,4cqw,1.3rem);cursor:pointer;box-shadow:0 0 10px #3ef0ff66}
.fj-ctl .pp{border:2px solid var(--mg);box-shadow:0 0 16px var(--mg)}
.fj-ctl button:focus-visible{outline:2px solid #ffe14a}
.fj-hint{position:absolute;left:50%;top:44.5%;transform:translateX(-50%);font:600 clamp(.6rem,2.6cqw,.8rem)/1 system-ui,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:#fff3c4;text-shadow:0 0 6px var(--mg),0 0 10px var(--cy);white-space:nowrap;pointer-events:none;transition:opacity .6s;z-index:3}
.fj-hint.gone{opacity:0}
.fj-credit{position:absolute;right:10px;bottom:6px;font-size:.7rem;color:#b3abd6;z-index:4}
/* layer: crest */
.fj-crest{position:absolute;left:50%;top:-1%;width:34%;aspect-ratio:1;transform:translateX(-50%);z-index:3;pointer-events:none;filter:drop-shadow(0 0 calc(6px + var(--pulse)*18px) var(--gold))}
.fj-crest svg,.fj-intro-crest svg{width:100%;height:100%;animation:fjspin 40s linear infinite}
/* fx canvas + telekinetic sigil */
.fj-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
.fj-sigil{position:absolute;width:110px;height:110px;margin:-55px 0 0 -55px;pointer-events:none;z-index:7;opacity:0;transition:opacity .25s}
.fj-sigil.on{opacity:1}.fj-sigil svg{width:100%;height:100%;animation:fjspin 2.5s linear infinite;filter:drop-shadow(0 0 6px #ff9d2a)}
/* intro */
.fj-intro{position:absolute;inset:0;z-index:10;display:grid;place-items:center;align-content:center;gap:4%;background:radial-gradient(circle,#1a0b33ee,#04020af5);transition:opacity .8s}
.fj-intro.done{opacity:0;pointer-events:none}
.fj-intro-crest{width:min(70vw,48vh);aspect-ratio:1;animation:fjbloom 2.2s cubic-bezier(.2,1.2,.3,1) both;filter:drop-shadow(0 0 20px var(--gold)) drop-shadow(0 0 40px var(--cy))}
.fj-wave{position:absolute;left:50%;top:45%;width:20px;height:20px;margin:-10px;border-radius:50%;border:3px solid var(--cy);box-shadow:0 0 30px var(--cy),inset 0 0 30px var(--vi);animation:fjwave 1.8s .5s ease-out both}
.fj-wave.w2{animation-delay:.8s;border-color:var(--gold)}
@keyframes fjbloom{0%{transform:scale(.1) rotate(-90deg);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes fjwave{0%{transform:scale(1);opacity:1}100%{transform:scale(70);opacity:0}}
.fj-intro h2{margin:0;text-align:center;font:700 clamp(1.3rem,5vw,2.2rem) Georgia,serif;color:var(--gold);text-shadow:0 0 14px #f7d573aa;animation:fjfade 1s 1.4s both}
.fj-enter{justify-self:center;padding:14px 30px;border-radius:40px;border:2px solid var(--gold);background:linear-gradient(90deg,#3ef0ff33,#a66bff44,#ff3df233);color:#fff;font:700 1.05rem system-ui,sans-serif;letter-spacing:2px;text-transform:uppercase;cursor:pointer;box-shadow:0 0 24px #f7d57388;animation:fjfade 1s 1.8s both,fjglow 2s 2.8s ease-in-out infinite}
.fj-enter:focus-visible{outline:3px solid var(--cy)}
.fj-skip{background:none;border:0;color:#b3abd6;text-decoration:underline;cursor:pointer;animation:fjfade 1s 2s both;justify-self:center}
@keyframes fjfade{from{opacity:0;transform:translateY(10px)}}
@keyframes fjglow{50%{box-shadow:0 0 40px var(--cy),0 0 10px var(--gold)}}
/* tracklist */
.fj-list{position:absolute;left:8%;right:8%;top:22%;max-height:54%;overflow:auto;z-index:8;background:#0d0820f4;border:1px solid var(--gold);border-radius:12px;padding:6px;margin:0;list-style:none;box-shadow:0 0 28px #ff3df266}
.fj-list[hidden]{display:none}
.fj-list button{width:100%;text-align:left;background:none;border:0;color:#efeaff;padding:8px;border-radius:8px;cursor:pointer;font:inherit;display:flex;gap:8px}
.fj-list button:hover,.fj-list button:focus-visible,.fj-list .on{background:#3ef0ff22;color:#ffe14a;outline:none}
@media(prefers-reduced-motion:reduce){.fj *,.fj *::before,.fj *::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}}
/* ===== Edge's art layers (img/floor/*.webp), aligned to jukebox-full-composite.png; % of the cabinet ===== */
.fj{background:radial-gradient(80% 55% at 50% 25%,#1a0b33 0,#07040f 60%,#020106)}
.fj-cab{aspect-ratio:1094/1968}
.fj-cab>img{position:absolute;display:block;pointer-events:none;-webkit-user-drag:none}
.fj-body{inset:0;width:100%;height:100%;z-index:5;border-radius:0;background:none;box-shadow:none}.fj-body::after{display:none}
.fj-tube{z-index:6;border-radius:0;background:none;animation:none;width:auto;box-shadow:none;mix-blend-mode:screen;
 filter:brightness(calc(.85 + var(--pulse)*1.1)) drop-shadow(0 0 calc(2px + var(--pulse)*16px) currentColor);opacity:calc(.8 + var(--pulse)*.2)}
.fj-tube::after{display:none}
.fj-tl{left:2.43%;top:20.83%;width:20%;height:56.4%;color:#3ef0ff}.fj-tr{left:78.2%;right:auto;top:20.83%;width:18.55%;height:56.4%;color:#a66bff}
.fj-glass{left:17.8%;right:auto;width:63.8%;top:5.7%;height:29.6%;z-index:1;border-radius:50% 50% 0 0/42% 42% 0 0;background:radial-gradient(70% 70% at 50% 55%,#160b2e,#030208);box-shadow:none}
.fj-glass::after{display:none}
.fj-dome{left:15.9%;top:5.89%;width:67.64%;height:34.55%;z-index:2}
.fj-scene{z-index:3;left:49.3%;top:15.5%;position:absolute}
.fj-ring{--rz:17cqw}
.fj-alb{width:13cqw;left:-6.5cqw;top:-6.5cqw}
.fj-alb.front{transform:rotateY(calc(var(--i)*360deg/var(--n))) translateZ(calc(var(--rz) + 2cqw)) translateY(-1cqw) scale(1.1)}
.fj-scene,.fj-alb{pointer-events:auto}
.fj-vinyl{left:49.1%;top:27.6%;width:31%;z-index:3;transform:translate(-50%,-50%) scaleY(.3)}
.fj-vinyl .face{background:none;box-shadow:none}.fj-vinyl .face img{width:100%;height:100%;display:block}
.fj-vinyl .lbl{inset:33.5%;background:none}
.fj-arm{left:auto;right:12%;top:8%;width:36%;height:auto;z-index:4;transform-origin:88% 10%;transform:rotate(-14deg)}
.fj-arm img{width:100%;height:auto;display:block;filter:drop-shadow(0 0 6px #3ef0ff88)}
.playing .fj-arm{transform:rotate(2deg)}
.fj-ttl{z-index:7;top:31.5%;bottom:auto}
.fj-crest{top:-6%;width:46%;z-index:7;mix-blend-mode:screen}
.fj-crest img,.fj-intro-crest img{width:100%;height:100%;object-fit:contain;display:block;animation:fjspin 60s linear infinite}
.fj-hint{top:36%;z-index:7}
.fj-marq{left:20%;right:20%;top:38.5%;height:3.6%;z-index:7;opacity:.92}
.fj-ctl{top:auto;bottom:16%;z-index:8}
.fj-list{z-index:9}
.fj-portal{z-index:0}
.fj-wave,.fj-intro-crest{pointer-events:none}.fj-intro>*{position:relative;z-index:1}.fj-wave{position:absolute;z-index:0}
/* carousel prominence + crest above the arch */
.fj-crest{top:-8.5%;width:36%;opacity:.9}
.fj-scene{top:17.2%}.fj-ring{--rz:19cqw}.fj-alb{width:15cqw;left:-7.5cqw;top:-7.5cqw}
.fj-cab{width:auto;height:96%;max-width:96%}
/* ===== phones: full-screen jukebox, art contained (no crop), chrome hidden, controls overlaid ===== */
@media(max-width:640px){
 .fj-page>header,.fj-page header{display:none}
 .fj-page main{padding-top:0}
 .fj{height:100vh;height:100dvh;width:100vw;margin:0 0 16px calc(50% - 50vw);border-radius:0;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) calc(62px + env(safe-area-inset-bottom)) env(safe-area-inset-left);box-sizing:border-box}
 .fj-cab{height:auto;max-width:none;width:min(100vw - env(safe-area-inset-left) - env(safe-area-inset-right),(100dvh - 62px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*1094/1968)}
 @supports not (height:1dvh){.fj-cab{width:min(100vw,(100vh - 62px)*1094/1968)}}
 .fj-intro{padding:env(safe-area-inset-top) 0 calc(62px + env(safe-area-inset-bottom))}
 .fj-credit{bottom:calc(66px + env(safe-area-inset-bottom))}
}
@media(max-width:640px){.fj-page main{padding:0 0 14px}.fj-page main>:not(.fj){margin-left:14px;margin-right:14px}.fj{margin:0 0 16px}}
/* portal emergence */
.fj-portal{opacity:.38}.open .fj-portal{opacity:calc(.6 + var(--pulse)*.4)}
.fj-ghosts{position:absolute;inset:0;z-index:4;pointer-events:none}
.fj-ghost{position:absolute;aspect-ratio:1;will-change:transform,opacity;transform:translate(-50%,-50%)}
.fj-ghost img{width:100%;height:100%;display:block;border-radius:6px;box-shadow:0 0 0 2px #f7d573,0 0 22px #3ef0ff}
.fj-ripple{position:absolute;width:22%;aspect-ratio:1;border-radius:50%;border:2px solid #3ef0ff;box-shadow:0 0 18px #a66bff,inset 0 0 14px #f7d573;will-change:transform,opacity;opacity:0}
.fj-alb.emerging{opacity:0}
.fj-time{position:absolute;left:50%;transform:translateX(-50%);top:71.6%;z-index:8;font:600 clamp(.6rem,2.8cqw,.85rem)/1 ui-monospace,monospace;color:#fff3c4;text-shadow:0 0 6px #3ef0ff;background:#0d0518cc;border:1px solid var(--gold);border-radius:999px;padding:3px 10px;pointer-events:none;font-variant-numeric:tabular-nums}
.fj-audio{display:none}
@media (max-width:640px){.fj-time{top:42.6%}}
#fj .fj-party{position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:10px;z-index:9;white-space:nowrap;padding:8px 16px;border-radius:999px;font:700 clamp(.7rem,1.6vw,.9rem)/1.1 system-ui,sans-serif;letter-spacing:.5px;color:#1a0b2e;text-decoration:none;background:linear-gradient(110deg,#f7d573,#3ef0ff 45%,#a66bff 75%,#f7d573);background-size:250% 100%;animation:fjholo 5s linear infinite;box-shadow:0 0 14px #3ef0ff88,0 0 0 1px #fff6}
.fj-party:hover,.fj-party:focus-visible{box-shadow:0 0 22px #f7d573,0 0 0 2px #fff;outline:none}
#fj .fj-party.in{position:relative;bottom:auto;display:inline-block;margin-top:14px}
@keyframes fjholo{to{background-position:-250% 0}}
@media (max-width:640px){#fj .fj-party:not(.in){bottom:calc(88px + env(safe-area-inset-bottom));font-size:.72rem;padding:7px 12px}}
@media (prefers-reduced-motion:reduce){.fj-party{animation:none}}
/* bigger, clearer albums (v77) */
.fj-scene{top:18.5%}
.fj-ring{--rz:23cqw}
.fj-alb{width:20cqw;left:-10cqw;top:-10cqw;filter:brightness(.82) saturate(.95);box-shadow:0 0 0 1px #f7d573cc,0 0 10px #3ef0ff66}
.fj-alb.front{z-index:5;filter:none;transform:rotateY(calc(var(--i)*360deg/var(--n))) translateZ(calc(var(--rz) + 4cqw)) translateY(-.5cqw) scale(1.45);box-shadow:0 0 0 2px var(--gold),0 0 0 4px #3ef0ff88,0 0 24px var(--gold),0 0 46px #a66bffaa}
.fj-ttl{font-size:clamp(.85rem,4.2cqw,1.25rem);font-weight:700;color:#ffe9a8;text-shadow:0 0 6px #000,0 0 12px #f7d573aa;z-index:7}
/* v78: arm moves, record keeps size and spins */
.fj-arm,.playing .fj-arm{transition:transform .6s cubic-bezier(.3,1,.5,1);z-index:6}
.fj-arm.moving{transition:none}
.fj-vinyl{transform-style:preserve-3d;will-change:transform}
.fj-vinyl.carry{z-index:6}
.playing .fj-vinyl.on .face{animation:none}
.fj-fx{z-index:7}.fj-sigil{z-index:8}