/* DEAD STOCK — DJ SET */
.room.dj::before{background-image:url(img/dj.jpg)}
.dj .stage{width:1672px;height:941px}
.dj .photo{width:1672px;height:941px}
.deck{position:absolute;border-radius:50%;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent}
.deck.grab{cursor:grabbing}
.deck:focus{outline:none}
.deck:focus-visible{box-shadow:0 0 0 3px rgba(239,231,214,.7)}
.disc{position:absolute;left:50%;top:50%;width:244px;height:244px;margin:-122px 0 0 -122px;pointer-events:none;will-change:transform}
.disc img{width:100%;height:100%}
.deck .ring{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 40%,rgba(255,255,255,.07) 45%,transparent 52%,transparent 90%,rgba(255,255,255,.05) 95%,transparent);opacity:0;transition:opacity .3s}
.deck:hover .ring,.deck.grab .ring{opacity:1}
.deck .tag{top:auto;bottom:-6px}
.deck:hover .tag,.deck:focus-visible .tag{opacity:1}
.ss{position:absolute;border:0;padding:0;background:none;border-radius:4px;cursor:pointer}
.ss::after{content:"";position:absolute;inset:0;border-radius:4px;box-shadow:inset 0 0 0 100px rgba(255,255,255,0);transition:box-shadow .15s}
.ss:hover::after{box-shadow:inset 0 0 0 100px rgba(255,255,255,.08)}
.ss:active::after{box-shadow:inset 0 0 0 100px rgba(0,0,0,.25)}
.ss .tag{top:auto;bottom:100%;transform:translate(-50%,-8px) rotate(-2deg)}
.ss:hover .tag,.ss:focus-visible .tag{opacity:1}
.ss[aria-pressed="true"] .tag{background:#d23a2e;color:#fff}
/* crossfader disegnato sopra la foto */
.xrail{position:absolute;left:775px;top:552px;width:136px;height:40px;cursor:ew-resize;touch-action:none}
.xrail:focus{outline:none}
.xcap{position:absolute;top:50%;width:22px;height:44px;margin:-22px 0 0 -11px;border-radius:3px;pointer-events:none;
  background:linear-gradient(90deg,#1a1a1a,#3c3c3c 30%,#2a2a2a 50%,#3c3c3c 70%,#151515);box-shadow:0 4px 6px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.18)}
.xcap::after{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:2px;margin-left:-1px;background:#e9e4da;box-shadow:0 0 3px rgba(255,255,255,.4)}
.xrail .tag{top:auto;bottom:100%;transform:translate(-50%,-14px) rotate(-2deg)}
.xrail:hover .tag,.xrail:focus-visible .tag{opacity:1}
.vu{position:absolute;left:812px;top:218px;width:46px;height:94px;display:flex;justify-content:space-between;pointer-events:none;mix-blend-mode:screen}
.vu i{display:block;width:12px;height:100%;transform-origin:50% 100%;transform:scaleY(0);transition:transform .06s linear;
  background:linear-gradient(to top,rgba(255,170,30,.55),rgba(255,200,40,.55) 60%,rgba(255,60,30,.7));filter:blur(1.5px)}
.led{position:absolute;width:26px;height:26px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,60,40,.9),rgba(255,40,30,.25) 50%,transparent 70%);opacity:.35;transition:opacity .3s}
.deck.on~.led,.led.on{opacity:1}
/* istruzioni sotto la console */
.dj-help{position:absolute;left:90px;right:90px;top:680px;display:flex;justify-content:center;gap:26px;flex-wrap:wrap;color:#e8e2d5;font-weight:700;font-size:21px;letter-spacing:.14em;text-align:center;pointer-events:none}
.dj-help span{background:rgba(12,12,12,.55);padding:8px 14px 5px;border:1px solid rgba(239,231,214,.25)}
.dj-help b{color:#d23a2e}
.dj-turn{display:none}
@media (max-width:860px){
  .room.dj{overflow:hidden}
  .room.dj::before{display:block}
  .dj .track{position:absolute;inset:0}
}
@media (max-width:860px) and (orientation:portrait){
  .dj-turn{display:block;position:absolute;left:0;right:0;bottom:16px;text-align:center;font-weight:700;font-size:13px;letter-spacing:.18em;color:#e8e2d5;pointer-events:none}
}