/* ================= MUSIC ROOM ================= */
.room{position:relative;overflow:hidden;padding-bottom:40px}
.room-bg{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 85% 8%,rgba(242,180,90,.16),transparent 40%),radial-gradient(circle at 5% 60%,rgba(139,123,255,.12),transparent 40%)}
.room-bg i{position:absolute;top:-240px;right:-240px;width:720px;height:720px;border-radius:50%;border:1px solid var(--line);animation:ripple 9s linear infinite;opacity:0}
.room-bg i:nth-child(2){animation-delay:2.25s}.room-bg i:nth-child(3){animation-delay:4.5s}.room-bg i:nth-child(4){animation-delay:6.75s}
@keyframes ripple{0%{transform:scale(.2);opacity:0}15%{opacity:1}100%{transform:scale(1.5);opacity:0}}

.room-head{position:relative;z-index:2;padding:clamp(120px,14vw,160px) var(--pad) clamp(36px,5vw,60px);max-width:980px}
.back{display:inline-block;color:var(--ink-dim);margin-bottom:28px;transition:color .3s,transform .3s var(--ease)}
.back:hover{color:var(--amber);transform:translateX(-4px)}
.room-head h1.section-title{font-size:clamp(2.2rem,4.6vw,3.8rem)}

/* ---------- player layout ---------- */
.player{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,4vw,64px);align-items:center;padding:0 var(--pad)}

/* ---------- stage ---------- */
.stage{position:relative;width:100%;max-width:600px;aspect-ratio:1/.98;margin:0 auto;perspective:1500px}
.deck-wrap{position:absolute;inset:0 0 15% 0;display:grid;place-items:center;transition:opacity .7s var(--ease),transform .9s var(--ease)}
.deck{position:relative;width:92%;aspect-ratio:1.14/1;border-radius:26px;transform-style:preserve-3d;
  background:linear-gradient(150deg,#2c2621,#171310 55%,#0d0b0a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 14px 0 #070608,0 60px 80px -30px rgba(0,0,0,.75);
  transform:rotateX(26deg) rotateZ(-5deg);transition:transform 1.2s var(--ease)}
.stage:hover .deck{transform:rotateX(20deg) rotateZ(-3deg)}
.deck::before{content:"SHAKILA · 33⅓";position:absolute;left:7%;bottom:5.5%;font-family:var(--mono);font-size:.55rem;letter-spacing:.2em;color:rgba(236,231,220,.35)}
.deck::after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(95deg,rgba(255,255,255,.012) 0 2px,transparent 2px 6px);pointer-events:none}
.platter{position:absolute;left:5%;top:6.5%;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#2a2a30 0 40%,#16161a 41% 97%,#3a3a42 98%);box-shadow:0 6px 18px rgba(0,0,0,.6);transform:translateZ(3px)}
.vinyl{position:absolute;left:7%;top:8.6%;width:66%;aspect-ratio:1;border-radius:50%;transform:translateZ(8px);
  background:repeating-radial-gradient(circle,#121214 0 1.2px,#0a0a0b 1.2px 3px);
  box-shadow:0 0 0 2px #050505,0 10px 26px rgba(0,0,0,.7);
  animation:spin 1.9s linear infinite;animation-play-state:paused}
.vinyl::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 20deg,transparent 0 8%,rgba(255,255,255,.13) 12%,transparent 18% 48%,rgba(255,255,255,.09) 61%,transparent 68%);
  animation:spin 1.9s linear infinite reverse;animation-play-state:paused}
.grooves{position:absolute;inset:6%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 0 0 18px rgba(0,0,0,.25),inset 0 0 0 19px rgba(255,255,255,.035)}
.label{position:absolute;inset:32%;border-radius:50%;display:grid;place-items:center;overflow:hidden;background-size:cover;background-position:center;
  background-color:var(--amber);box-shadow:inset 0 0 0 3px rgba(0,0,0,.25)}
.label.gen{background-image:radial-gradient(circle at 30% 30%,hsla(var(--h,38),90%,70%,1),hsla(calc(var(--h,38) + 40),80%,42%,1))}
.label span{font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,3.4vw,2.6rem);color:rgba(20,16,12,.85)}
.label.img span{display:none}
.spindle{position:absolute;left:50%;top:50%;width:4%;height:4%;margin:-2% 0 0 -2%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#888 60%,#333)}
.stage.playing .vinyl,.stage.playing .vinyl::after{animation-play-state:running}

.arm{position:absolute;right:8%;top:7%;width:46px;height:64%;transform-origin:23px 23px;transform:translateZ(16px) rotate(2deg);transition:transform 1.1s var(--ease);z-index:3}
.stage.playing .arm{transform:translateZ(16px) rotate(24deg)}
.arm .pivot{position:absolute;left:0;top:0;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e9e4da,#8c867c 55%,#2d2a26);box-shadow:0 6px 14px rgba(0,0,0,.6)}
.arm .rod{position:absolute;left:20px;top:23px;width:6px;height:calc(100% - 50px);border-radius:4px;background:linear-gradient(90deg,#6d685f,#e8e2d6,#7b766c)}
.arm .head{position:absolute;left:9px;bottom:0;width:28px;height:42px;border-radius:6px;background:linear-gradient(160deg,#2c2925,#111);box-shadow:0 6px 12px rgba(0,0,0,.6),inset 0 -3px 0 var(--amber)}
.deck-led{position:absolute;right:7%;bottom:7%;width:9px;height:9px;border-radius:50%;background:#3a2f22;transition:.4s}
.stage.playing .deck-led{background:#f2b45a;box-shadow:0 0 14px #f2b45a,0 0 30px rgba(242,180,90,.6)}

/* video screen */
.screen{position:absolute;inset:4% 0 16% 0;display:grid;place-items:center;opacity:0;pointer-events:none;transform:scale(.92) translateY(14px);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.screen-inner{position:relative;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 60px -10px rgba(242,180,90,.25)}
.vid-host{position:absolute;inset:0;display:none}
.vid-host.on{display:block}
.vid-host iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.stage.video .screen{opacity:1;pointer-events:auto;transform:none}
.stage.video .deck-wrap{opacity:0;transform:translateY(30px) scale(.88);pointer-events:none}
.viz{position:absolute;left:0;right:0;bottom:0;width:100%;height:14%;display:block}

/* ---------- now playing ---------- */
.np{min-width:0}
.np-kind{display:inline-flex;align-items:center;gap:9px;color:var(--amber);padding:7px 14px;border:1px solid var(--line);border-radius:30px;background:var(--card)}
.np-dot{width:7px;height:7px;border-radius:50%;background:var(--ink-faint)}
.np.playing .np-dot{background:var(--teal);animation:pulse 2s infinite}
.np-title{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.2vw,2.8rem);line-height:1.08;margin:18px 0 6px;letter-spacing:-.01em}
.np-sub{color:var(--ink-dim);font-size:1rem;min-height:1.2em}
.np-credits{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px 22px;margin:24px 0 26px}
.np-credits div{border-left:2px solid var(--line);padding-left:12px}
.np-credits dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.np-credits dd{font-size:.95rem;margin-top:2px}

.ctrl{padding:22px 24px;border:1px solid var(--line);border-radius:24px;background:var(--card);box-shadow:var(--shadow);backdrop-filter:blur(8px)}
.seek{display:flex;align-items:center;gap:14px}
.seek .t{font-size:.7rem;color:var(--ink-dim);min-width:38px}
.seek .t:last-child{text-align:right}
.bar{position:relative;flex:1;height:6px;border-radius:6px;background:var(--line);cursor:pointer;touch-action:none}
.bar::before{content:"";position:absolute;inset:-10px 0}
.bar-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--teal),var(--amber))}
.bar-knob{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.4);transform:scale(.7);transition:transform .25s}
.bar:hover .bar-knob,.bar.drag .bar-knob{transform:scale(1)}
.ext-note{display:none;text-align:center;color:var(--ink-faint);font-size:.62rem;margin-top:-4px}
.np.ext .seek{opacity:.35;pointer-events:none}
.np.ext .ext-note{display:block;margin-top:10px}
.btns{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,18px);margin:20px 0 16px}
.cb{position:relative;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.cb:hover{border-color:var(--ink);transform:translateY(-2px)}
.cb:active{transform:scale(.94)}
.cb svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#bPrev svg,#bNext svg{fill:currentColor}
.cb.sm{width:40px;height:40px;color:var(--ink-dim)}
.cb.sm svg{width:17px;height:17px}
.cb.xs{width:34px;height:34px;border:0}
.cb.xs svg{width:18px;height:18px}
.cb.on{color:var(--amber);border-color:var(--amber)}
.cb b{position:absolute;top:-2px;right:-2px;width:16px;height:16px;border-radius:50%;background:var(--amber);color:var(--on-accent);font-size:.6rem;font-family:var(--mono);display:none;place-items:center}
.cb.one b{display:grid}
.cb.play{width:70px;height:70px;border:0;background:var(--amber);color:var(--on-accent);box-shadow:0 14px 34px -10px var(--amber)}
.cb.play:hover{transform:scale(1.06)}
.cb.play svg{width:26px;height:26px;fill:currentColor;stroke:none}
.cb.play .i-pause,.np.playing .cb.play .i-play{display:none}
.np.playing .cb.play .i-pause{display:block}
.np.ext .cb.play{opacity:.4;pointer-events:none}
.cb .i-mute,.vol.muted .cb .i-vol{display:none}
.vol.muted .cb .i-mute{display:block}
.vol{display:flex;align-items:center;gap:10px}
.vbar{position:relative;width:120px;height:5px;border-radius:5px;background:var(--line);cursor:pointer;touch-action:none}
.vbar::before{content:"";position:absolute;inset:-10px 0}
.vbar-fill{position:absolute;left:0;top:0;bottom:0;width:90%;border-radius:inherit;background:var(--ink-dim)}
.open-src{margin-left:auto;color:var(--teal);font-size:.64rem;display:none}
.open-src.on{display:inline}
.open-src:hover{text-decoration:underline}

.np-info{margin-top:24px}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line)}
.tab{background:none;border:0;color:var(--ink-dim);font:inherit;font-size:.88rem;padding:10px 14px;cursor:pointer;position:relative}
.tab::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--amber);transform:scaleX(0);transition:transform .4s var(--ease)}
.tab.on{color:var(--ink)}.tab.on::after{transform:scaleX(1)}
.tab-pane{display:none;padding:18px 2px 0;color:var(--ink-dim);font-size:.96rem;animation:fadeUp .5s var(--ease)}
.tab-pane.on{display:block}
.tab-pane ul{list-style:none}
.tab-pane li{display:flex;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line)}
.tab-pane li::before{content:"♪";color:var(--amber)}
.tab-pane .none{color:var(--ink-faint);font-style:italic}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- tracklist ---------- */
.tracks-sec{position:relative;z-index:2;padding:clamp(70px,9vw,120px) var(--pad) 0}
.tracks-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
.tracks-head h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3vw,2.3rem)}
.tracks-head .mono{color:var(--ink-faint)}
.tracks{list-style:none;border-top:1px solid var(--line)}
.tr{display:grid;grid-template-columns:40px 56px 1fr auto 64px;gap:18px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer;position:relative;border-radius:14px;transition:background .3s}
.tr:hover{background:var(--card)}
.tr.on{background:var(--card);box-shadow:inset 3px 0 0 var(--amber)}
.tr-n{font-family:var(--mono);font-size:.78rem;color:var(--ink-faint);text-align:center}
.tr-eq{display:none;gap:2px;align-items:flex-end;justify-content:center;height:16px}
.tr-eq i{width:3px;height:100%;background:var(--amber);border-radius:2px;animation:lw .9s ease-in-out infinite;transform-origin:bottom}
.tr-eq i:nth-child(2){animation-delay:.2s}.tr-eq i:nth-child(3){animation-delay:.4s}
.tr.on.live .tr-n{display:none}.tr.on.live .tr-eq{display:flex}
.tr-cover{width:56px;height:56px;border-radius:12px;background-size:cover;background-position:center;display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:1.4rem;color:rgba(20,16,12,.8);box-shadow:var(--shadow)}
.tr-main{min-width:0}
.tr-title{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-meta{display:block;color:var(--ink-dim);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-kind{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:20px;border:1px solid var(--line);color:var(--ink-dim)}
.tr-kind.youtube{color:#e5484d;border-color:rgba(229,72,77,.35)}
.tr-kind.facebook{color:#3b82f6;border-color:rgba(59,130,246,.35)}
.tr-kind.audio{color:var(--teal);border-color:color-mix(in srgb,var(--teal) 40%,transparent)}
.tr-dur{font-family:var(--mono);font-size:.74rem;color:var(--ink-faint);text-align:right}
.empty{display:none;text-align:center;padding:60px 20px;color:var(--ink-dim)}
.empty .mono{color:var(--amber)}
.empty-wave{display:flex;gap:6px;justify-content:center;height:40px;margin-bottom:22px}
.empty-wave i{width:4px;background:var(--amber);border-radius:4px;animation:lw 1.1s ease-in-out infinite}
.empty-wave i:nth-child(2n){animation-delay:.2s;background:var(--teal)}.empty-wave i:nth-child(3n){animation-delay:.45s}
.room.is-empty .empty{display:block}
.room.is-empty .tracks{display:none}
.room.is-empty .ctrl{opacity:.5;pointer-events:none}

.room-foot{padding:90px var(--pad) 0}

@media (max-width:960px){
  .player{grid-template-columns:1fr}
  .stage{max-width:520px}
}
@media (max-width:600px){
  .tr{grid-template-columns:28px 46px 1fr 44px;gap:12px;padding:12px 8px}
  .tr-kind{display:none}
  .tr-cover{width:46px;height:46px;border-radius:10px}
  .ctrl{padding:18px 16px}
  .vbar{width:90px}
  .deck::before{display:none}
  .arm{width:34px;transform-origin:17px 17px}
  .arm .pivot{width:34px;height:34px}.arm .rod{left:14px;top:17px;width:5px}.arm .head{left:5px;width:24px;height:34px}
}