.dj-booth{grid-template-columns:minmax(175px,.82fr) minmax(280px,1.25fr) minmax(175px,.82fr);gap:clamp(12px,2vw,26px);padding-inline:clamp(12px,2.6vw,32px)}
.dj-turntable{width:min(235px,100%)}
.vocal-deck .dj-record{box-shadow:0 0 0 4px #050405,0 0 30px #16f2ff38}
.vocal-deck .dj-label{background:radial-gradient(circle,#fff 0 4%,#16f2ff 5% 62%,#075b75 63%);color:#050308}
.dj-mixer{gap:.48rem;text-align:center}
.dj-mixer>button{width:100%;min-height:42px}
.dj-pad-bank{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:8px;border:2px solid #36303b;background:#09070c;box-shadow:inset 0 0 22px #000}
.dj-mixer .dj-pad{position:relative;width:100%;min-height:58px;padding:5px 3px;border:2px solid #70245d;background:linear-gradient(145deg,#441536,#1b0c18);color:#fff;box-shadow:0 4px 0 #080407,0 0 12px #ff3cac22;letter-spacing:.04em;touch-action:manipulation}
.dj-mixer .dj-pad:nth-child(2n){border-color:#176f78;background:linear-gradient(145deg,#104d55,#092125);box-shadow:0 4px 0 #030809,0 0 12px #16f2ff22}
.dj-mixer .dj-pad b,.dj-mixer .dj-pad span{display:block}.dj-mixer .dj-pad b{font-size:.72rem}.dj-mixer .dj-pad span{margin-top:3px;color:#c9bdcd;font:800 .62rem/1 monospace}
.dj-mixer .dj-pad:hover,.dj-mixer .dj-pad:focus-visible{outline:2px solid #fff;outline-offset:1px}.dj-mixer .dj-pad.active{transform:translateY(3px);background:#ff3cac;color:#08040d;box-shadow:0 1px 0 #080407,0 0 24px #ff3cac}.dj-mixer .dj-pad:nth-child(2n).active{background:#16f2ff;box-shadow:0 1px 0 #030809,0 0 24px #16f2ff}
@media(max-width:760px){.dj-arcade-game{grid-template-rows:auto minmax(130px,.42fr) minmax(475px,1.35fr)}.dj-booth{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:7px 10px;padding:8px 10px 12px}.dj-turntable{width:min(172px,100%)}.dj-mixer{grid-column:1/-1;grid-row:2;grid-template-columns:1fr 1fr;gap:.4rem .55rem}.dj-mixer>button{grid-column:1/-1;min-height:38px}.dj-pad-bank{grid-column:1/-1;gap:5px;padding:6px}.dj-mixer .dj-pad{min-height:48px}.dj-mixer label,.dj-mixer p,.dj-mixer>small{grid-column:span 1}.dj-mixer>small{align-self:center;font-size:.52rem}.dj-mixer label{font-size:.58rem}.dj-mixer progress{height:11px}}
@media(max-width:420px){.dj-arcade-game{grid-template-rows:auto minmax(118px,.38fr) minmax(485px,1.45fr)}.dj-turntable{width:min(150px,100%)}.dj-mixer .dj-pad{min-height:45px}.dj-mixer .dj-pad b{font-size:.65rem}.dj-mixer .dj-pad span{font-size:.58rem}}