/* ============ DJ LOOP BATTLE · 拟物控制台 ============ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  font-family:var(--font);color:var(--ink);background:#000;
  display:flex;flex-direction:column;position:relative;
  transition:filter .6s;
}
body.morphing{filter:brightness(2.2) saturate(3) blur(3px)}
canvas{display:block}

/* ---------------- 主题变量 ---------------- */
body{ /* 默认 = cyber */
  --font:"Rajdhani","Segoe UI","PingFang SC",sans-serif;
  --rad:12px; --rad-pad:8px;
  --ink:#cfe9ff; --ink-dim:#5b7a99;
  --accent:#00f0ff; --accent2:#ff2bd6; --warm:#ffb700;
  --wave:#00ffd9; --wave2:#ff2bd6;
  --lcd-bg:#03100e; --lcd-ink:#28ffce;
  --panel1:#2b3140; --panel2:#171b26; --panel-line:#3d4660;
  --pad-face:linear-gradient(180deg,#222a3e,#10131d);
  --pad-on:#00f0ff; --pad-on2:#ff2bd6;
  --knob-edge:conic-gradient(#9aa7c0 0 10deg,#3a4358 10deg 20deg,#9aa7c0 20deg 30deg,#3a4358 30deg 40deg,#9aa7c0 40deg 50deg,#3a4358 50deg 60deg,#9aa7c0 60deg 70deg,#3a4358 70deg 80deg,#9aa7c0 80deg 90deg,#3a4358 90deg 100deg,#9aa7c0 100deg 110deg,#3a4358 110deg 120deg,#9aa7c0 120deg 130deg,#3a4358 130deg 140deg,#9aa7c0 140deg 150deg,#3a4358 150deg 160deg,#9aa7c0 160deg 170deg,#3a4358 170deg 180deg,#9aa7c0 180deg 190deg,#3a4358 190deg 200deg,#9aa7c0 200deg 210deg,#3a4358 210deg 220deg,#9aa7c0 220deg 230deg,#3a4358 230deg 240deg,#9aa7c0 240deg 250deg,#3a4358 250deg 260deg,#9aa7c0 260deg 270deg,#3a4358 270deg 280deg,#9aa7c0 280deg 290deg,#3a4358 290deg 300deg,#9aa7c0 300deg 310deg,#3a4358 310deg 320deg,#9aa7c0 320deg 330deg,#3a4358 330deg 340deg,#9aa7c0 340deg 350deg,#3a4358 350deg 360deg);
  --vinyl-label:radial-gradient(circle,#0ff 0%,#066 55%,#033 100%);
  --glow:0 0 18px rgba(0,240,255,.55);
  --btn-face:linear-gradient(180deg,#39415a,#1c2130);
}
body[data-style="bit8"]{
  --font:"Courier New",ui-monospace,monospace;
  --rad:0px; --rad-pad:0px;
  --ink:#d8ffd8; --ink-dim:#5d8a5d;
  --accent:#7cff00; --accent2:#ffd000; --warm:#ff5a5a;
  --wave:#7cff00; --wave2:#ffd000;
  --lcd-bg:#0a1a06; --lcd-ink:#aaff55;
  --panel1:#3b4a3b; --panel2:#1c241c; --panel-line:#577a4d;
  --pad-face:linear-gradient(180deg,#2c3a2c,#141c14);
  --pad-on:#7cff00; --pad-on2:#ffd000;
  --vinyl-label:radial-gradient(circle,#7cff00 0%,#2c5a00 60%,#143000 100%);
  --glow:0 0 0 3px #142014,0 0 0 6px #7cff0066;
  --btn-face:linear-gradient(180deg,#44563f,#222c20);
}
body[data-style="guofeng"]{
  --font:"STKaiti","KaiTi","Songti SC",serif;
  --rad:14px; --rad-pad:10px;
  --ink:#f3e3c2; --ink-dim:#8d7a58;
  --accent:#ff4d3a; --accent2:#ffc24d; --warm:#ffc24d;
  --wave:#ffc24d; --wave2:#ff4d3a;
  --lcd-bg:#160b06; --lcd-ink:#ffb35c;
  --panel1:#4a3326; --panel2:#241710; --panel-line:#7a5a36;
  --pad-face:linear-gradient(180deg,#3c2a1c,#1b110a);
  --pad-on:#ffc24d; --pad-on2:#ff4d3a;
  --vinyl-label:radial-gradient(circle,#ffc24d 0%,#a33b1f 55%,#4a1208 100%);
  --glow:0 0 18px rgba(255,194,77,.5);
  --btn-face:linear-gradient(180deg,#5a4128,#2a1d12);
}
body[data-style="idol"]{
  --font:"Avenir Next","PingFang SC","Segoe UI",sans-serif;
  --rad:20px; --rad-pad:16px;
  --ink:#ffeaf6; --ink-dim:#9b7d96;
  --accent:#ff7ad9; --accent2:#7adfff; --warm:#ffe97a;
  --wave:#ff7ad9; --wave2:#7adfff;
  --lcd-bg:#160818; --lcd-ink:#ff9be4;
  --panel1:#3a2c44; --panel2:#1d1426; --panel-line:#5d4a72;
  --pad-face:linear-gradient(180deg,#352940,#191220);
  --pad-on:#ff7ad9; --pad-on2:#7adfff;
  --vinyl-label:radial-gradient(circle,#ff7ad9 0%,#8a2d6d 55%,#3a0f30 100%);
  --glow:0 0 22px rgba(255,122,217,.6);
  --btn-face:linear-gradient(180deg,#4d3a5e,#241a30);
}

/* ---------------- 舞台场景 ---------------- */
#scene{position:fixed;inset:0;z-index:0;overflow:hidden;transition:opacity .5s}
.sc,.beams,.crowd,.haze{position:absolute;inset:0;transition:all .8s}
.haze{background:radial-gradient(ellipse 70% 50% at 50% 100%,rgba(255,255,255,.06),transparent 70%)}
.beams{display:flex;justify-content:space-around;align-items:flex-start;pointer-events:none}
.beams i{width:9vw;height:120vh;transform-origin:top center;opacity:.5;
  background:linear-gradient(180deg,var(--accent) 0%,transparent 80%);
  clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);
  animation:sway 5.5s ease-in-out infinite alternate;filter:blur(2px)}
.beams i:nth-child(2n){background:linear-gradient(180deg,var(--accent2) 0%,transparent 80%);animation-duration:4.2s;animation-delay:-2s}
.beams i:nth-child(3n){animation-delay:-1s;animation-duration:6.5s}
@keyframes sway{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
.crowd{top:auto;height:18vh;
  background:radial-gradient(3px 8px at 10% 70%,var(--accent) 40%,transparent 60%),radial-gradient(3px 9px at 22% 55%,var(--accent2) 40%,transparent 60%),radial-gradient(3px 8px at 35% 75%,var(--warm) 40%,transparent 60%),radial-gradient(3px 9px at 48% 58%,var(--accent) 40%,transparent 60%),radial-gradient(3px 8px at 61% 72%,var(--accent2) 40%,transparent 60%),radial-gradient(3px 9px at 74% 60%,var(--warm) 40%,transparent 60%),radial-gradient(3px 8px at 87% 70%,var(--accent) 40%,transparent 60%),radial-gradient(3px 9px at 96% 56%,var(--accent2) 40%,transparent 60%);
  background-size:220px 100%;animation:wave-hands 1.1s ease-in-out infinite alternate;opacity:.8}
@keyframes wave-hands{from{transform:translateY(2px)}to{transform:translateY(-6px)}}

/* cyber 场景 */
body[data-style="cyber"] .sky{background:linear-gradient(180deg,#020208 0%,#0a0824 45%,#27104d 75%,#511b6b 100%)}
body[data-style="cyber"] .d1{background:
  linear-gradient(0deg,#0b0a1f 0 28%,transparent 28%),
  repeating-linear-gradient(90deg,#11102e 0 60px,#1b1840 60px 90px,#0d0c26 90px 170px);
  top:auto;height:46vh;opacity:.9;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 30%);mask:linear-gradient(180deg,transparent 0,#000 30%)}
body[data-style="cyber"] .d2{background:
  radial-gradient(2px 2px at 12% 22%,#0ff 50%,transparent),radial-gradient(2px 2px at 30% 12%,#f0f 50%,transparent),
  radial-gradient(2px 2px at 55% 18%,#fff 50%,transparent),radial-gradient(2px 2px at 78% 9%,#0ff 50%,transparent),
  radial-gradient(2px 2px at 92% 25%,#f0f 50%,transparent);background-size:480px 480px}
body[data-style="cyber"] .d3{background:radial-gradient(circle at 76% 30%,#ff2bd6 0 3.2vh,transparent 3.4vh),radial-gradient(circle at 76% 30%,#ff2bd644 0 6vh,transparent 8vh)}
body[data-style="cyber"] .ground{top:auto;height:30vh;transform:perspective(360px) rotateX(58deg);transform-origin:bottom;
  background:repeating-linear-gradient(90deg,transparent 0 58px,#00f0ff55 58px 60px),repeating-linear-gradient(0deg,transparent 0 38px,#ff2bd655 38px 40px),linear-gradient(180deg,#0a0420,#1a0838);
  animation:gridrun 1.4s linear infinite}
@keyframes gridrun{from{background-position:0 0,0 0,0 0}to{background-position:0 0,0 40px,0 0}}

/* 8-bit 场景 */
body[data-style="bit8"] .sky{background:linear-gradient(180deg,#03031a 0 30%,#0a2a4a 30% 55%,#14507a 55% 75%,#2a7aa0 75%);image-rendering:pixelated}
body[data-style="bit8"] .d3{background:radial-gradient(circle at 80% 22%,#ffd000 0 24px,transparent 25px);box-shadow:none;
  filter:drop-shadow(0 0 0 #000);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
body[data-style="bit8"] .d1{top:auto;height:34vh;
  background:
   linear-gradient(0deg,#072607 0 22%,transparent 22%),
   repeating-linear-gradient(90deg,#0f3a14 0 48px,transparent 48px 64px,#145a1e 64px 96px,transparent 96px 150px);
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 26%);mask:linear-gradient(180deg,transparent 0,#000 26%)}
body[data-style="bit8"] .d2{background:
  radial-gradient(3px 3px at 14% 16%,#fff 50%,transparent),radial-gradient(3px 3px at 42% 9%,#fff 50%,transparent),
  radial-gradient(3px 3px at 66% 20%,#fff 50%,transparent),radial-gradient(3px 3px at 88% 12%,#fff 50%,transparent);
  background-size:420px 420px;image-rendering:pixelated}
body[data-style="bit8"] .ground{top:auto;height:16vh;
  background:repeating-linear-gradient(90deg,#3a2a10 0 24px,#2a1d0a 24px 48px),linear-gradient(0deg,#1a1206,transparent);
  border-top:4px solid #7cff00}
body[data-style="bit8"] .beams i{filter:none;clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);opacity:.28}

/* 国风 场景 */
body[data-style="guofeng"] .sky{background:linear-gradient(180deg,#0d0703 0%,#241007 40%,#4a2310 75%,#6e3a18 100%)}
body[data-style="guofeng"] .d3{background:radial-gradient(circle at 22% 24%,#ffe9b8 0 4.4vh,transparent 4.6vh),radial-gradient(circle at 22% 24%,#ffe9b833 0 9vh,transparent 11vh)}
body[data-style="guofeng"] .d1{top:auto;height:52vh;opacity:.85;background:
  radial-gradient(60vw 34vh at 18% 100%,#1c0f08 60%,transparent 61%),
  radial-gradient(50vw 42vh at 55% 100%,#2a160b 60%,transparent 61%),
  radial-gradient(64vw 30vh at 88% 100%,#170c06 60%,transparent 61%)}
body[data-style="guofeng"] .d2{background:
  radial-gradient(8px 12px at 12% 30%,#ff4d3a 45%,#a32613 60%,transparent 70%),
  radial-gradient(8px 12px at 32% 18%,#ff4d3a 45%,#a32613 60%,transparent 70%),
  radial-gradient(8px 12px at 70% 24%,#ff4d3a 45%,#a32613 60%,transparent 70%),
  radial-gradient(8px 12px at 90% 34%,#ff4d3a 45%,#a32613 60%,transparent 70%);
  background-size:600px 600px;animation:lantern 4s ease-in-out infinite alternate}
@keyframes lantern{from{transform:translateY(0)}to{transform:translateY(8px)}}
body[data-style="guofeng"] .ground{top:auto;height:14vh;background:linear-gradient(0deg,#120a05,transparent),repeating-linear-gradient(90deg,#ffc24d22 0 2px,transparent 2px 90px)}
body[data-style="guofeng"] .beams i{opacity:.22;filter:blur(6px)}

/* 虚拟歌姬 场景 */
body[data-style="idol"] .sky{background:radial-gradient(ellipse 90% 70% at 50% 110%,#5e1b54 0%,#2a0f3a 45%,#0a0414 100%)}
body[data-style="idol"] .d3{background:
  radial-gradient(circle at 50% 34%,#ffffffcc 0 1.6vh,#ff7ad9aa 1.6vh 2.4vh,transparent 2.6vh),
  conic-gradient(from 0deg at 50% 34%,transparent 0 8deg,#ff7ad922 8deg 10deg,transparent 10deg 26deg,#7adfff22 26deg 28deg,transparent 28deg 60deg,#ff7ad922 60deg 62deg,transparent 62deg 100deg,#fff2 100deg 102deg,transparent 102deg 150deg,#7adfff22 150deg 152deg,transparent 152deg 200deg,#ff7ad922 200deg 202deg,transparent 202deg 260deg,#fff2 260deg 262deg,transparent 262deg 320deg,#7adfff22 320deg 322deg,transparent 322deg);
  animation:halo 9s linear infinite}
@keyframes halo{from{transform:rotate(0)}to{transform:rotate(360deg)}}
body[data-style="idol"] .d1{top:auto;height:36vh;background:
  radial-gradient(46vw 30vh at 50% 108%,#ff7ad92e 40%,transparent 70%),
  repeating-conic-gradient(from -10deg at 50% 130%,transparent 0 14deg,#ffffff08 14deg 16deg)}
body[data-style="idol"] .d2{background:
  radial-gradient(2px 2px at 16% 20%,#fff 50%,transparent),radial-gradient(3px 3px at 36% 10%,#ff7ad9 50%,transparent),
  radial-gradient(2px 2px at 58% 16%,#7adfff 50%,transparent),radial-gradient(3px 3px at 82% 8%,#fff 50%,transparent),
  radial-gradient(2px 2px at 94% 22%,#ff7ad9 50%,transparent);background-size:380px 380px;animation:sparkle 2.4s ease-in-out infinite alternate}
@keyframes sparkle{from{opacity:.4}to{opacity:1}}
body[data-style="idol"] .ground{top:auto;height:22vh;background:
  linear-gradient(0deg,#1c0a20,transparent),
  repeating-linear-gradient(90deg,#ff7ad933 0 3px,transparent 3px 46px,#7adfff33 46px 49px,transparent 49px 92px);
  animation:stagepulse .47s ease-in-out infinite alternate}
@keyframes stagepulse{from{opacity:.5}to{opacity:1}}
body[data-style="idol"] .beams i{opacity:.65}
body[data-style="bit8"] .beams i,body[data-style="guofeng"] .beams i{animation-duration:7s}
/* ---------------- 顶栏 ---------------- */
#topbar{
  position:relative;z-index:5;display:flex;align-items:center;gap:18px;padding:8px 16px;
  background:linear-gradient(180deg,var(--panel1),var(--panel2));
  border-bottom:1px solid var(--panel-line);
  box-shadow:0 6px 18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12);
}
.brand{display:flex;align-items:center;gap:10px;width:300px;flex:none;overflow:hidden;white-space:nowrap}
.logo-dot{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:var(--glow);animation:blinkdot 1s steps(2) infinite}
@keyframes blinkdot{50%{opacity:.45}}
.brand h1{font-size:22px;letter-spacing:2px;font-weight:800}
.brand h1 b{color:var(--accent)}
.brand .sub{font-size:11px;color:var(--ink-dim);border:1px solid var(--panel-line);padding:2px 8px;border-radius:var(--rad);letter-spacing:1px}

.morph-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none;width:88px}
#morphBtn{position:relative;width:72px;height:72px;border-radius:50%;border:none;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#555e77,#1a1e2b 70%);
  box-shadow:0 6px 14px rgba(0,0,0,.7),inset 0 2px 3px rgba(255,255,255,.25),inset 0 -4px 8px rgba(0,0,0,.6);
  transition:transform .12s}
#morphBtn:active{transform:scale(.93)}
.morph-ring{position:absolute;inset:-5px;border-radius:50%;
  background:conic-gradient(var(--accent),var(--accent2),var(--warm),var(--accent));
  -webkit-mask:radial-gradient(circle,transparent 64%,#000 66%);mask:radial-gradient(circle,transparent 64%,#000 66%);
  animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.morph-core{position:relative;font-size:11px;font-weight:800;color:var(--ink);letter-spacing:1px;text-shadow:0 0 8px var(--accent)}
.morph-dots{display:flex;gap:6px}
.morph-dots i{width:8px;height:8px;border-radius:50%;background:#333a;border:1px solid var(--panel-line)}
.morph-dots i.on{background:var(--accent);box-shadow:var(--glow)}

.master-ctl{display:flex;align-items:center;gap:14px;flex:1;justify-content:center}
.bpm-box{display:grid;grid-template-columns:auto auto auto;align-items:center;gap:6px;position:relative;padding-bottom:12px}
.bpm-box .tag{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%)}
.tag{font-size:9px;letter-spacing:1.5px;color:var(--ink-dim);white-space:nowrap}
.lcd{font-family:ui-monospace,Menlo,monospace;background:var(--lcd-bg);color:var(--lcd-ink);
  padding:4px 12px;border-radius:6px;font-size:20px;font-weight:700;min-width:96px;text-align:center;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.08);text-shadow:0 0 6px currentColor}
.bpm-box button,.rec-btn,.dl-btn{
  background:var(--btn-face);color:var(--ink);border:1px solid var(--panel-line);border-radius:var(--rad);
  width:30px;height:30px;font-size:16px;cursor:pointer;
  box-shadow:0 3px 6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.15)}
.bpm-box button:active{transform:translateY(1px)}
.beatled{display:flex;gap:8px}
.beatled i{width:14px;height:14px;border-radius:50%;background:#1a1a1a;border:2px solid #000;box-shadow:inset 0 2px 3px rgba(0,0,0,.8)}
.beatled i.on{background:var(--accent);box-shadow:var(--glow)}
.beatled i.bar{background:var(--accent2)}
.beatled i.bar.on{box-shadow:0 0 16px var(--accent2)}
.rec-btn{width:auto;padding:0 14px;height:34px;font-weight:700;color:#ff5a5a;letter-spacing:1px}
.rec-btn.on{background:linear-gradient(180deg,#7a1010,#3a0505);color:#fff;box-shadow:0 0 16px #ff3030aa;animation:blinkdot 1s steps(2) infinite}
.dl-btn{width:auto;padding:7px 12px;height:auto;text-decoration:none;font-size:13px;color:var(--accent)}
.cuemix{display:flex;flex-direction:column;align-items:center;gap:2px}
.song-box{display:flex;flex-direction:column;align-items:center;gap:3px}
#songSel{max-width:172px;font-weight:700}

.score-zone{min-width:210px;display:flex;flex-direction:column;align-items:flex-end;gap:3px;position:relative}
.score-lcd{display:flex;align-items:baseline;gap:8px;background:var(--lcd-bg);border-radius:8px;padding:4px 14px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.9)}
.score-lcd span{font-family:ui-monospace,Menlo,monospace;font-size:24px;font-weight:800;color:var(--lcd-ink);text-shadow:0 0 8px currentColor}
.score-lcd em{font-size:9px;color:var(--ink-dim);font-style:normal;letter-spacing:2px}
.combo{font-size:13px;font-weight:800;color:var(--warm);text-shadow:0 0 8px var(--warm)}
.popup{position:fixed;left:50%;top:40%;z-index:60;font-weight:800;white-space:nowrap;pointer-events:none;
  transform:translate(-50%,-50%);text-shadow:0 2px 4px #000;
  animation:pop-fly .75s cubic-bezier(.45,-.25,.75,.45) 1s forwards}
.pop-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  animation:pop-burst .5s cubic-bezier(.2,1.9,.4,1) both}
.popup .grade{display:block;font-size:54px;font-weight:900;letter-spacing:3px;line-height:1.05;
  background:linear-gradient(180deg,#fff 10%,var(--accent) 55%,var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
  filter:drop-shadow(0 0 12px var(--accent));animation:grade-zoom .55s cubic-bezier(.2,2.2,.4,1) both}
.popup.g-perfect .grade{background:linear-gradient(180deg,#fff 5%,var(--warm) 45%,#ff7a2b);
  -webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 16px var(--warm))}
.popup.g-miss .grade{background:linear-gradient(180deg,#bbb,#666);-webkit-background-clip:text;background-clip:text;filter:none;font-size:34px}
.popup .pts{display:block;font-size:34px;font-weight:900;color:var(--warm);text-shadow:0 0 16px var(--warm),0 2px 4px #000}
.popup .meta{display:block;font-size:14px;color:var(--ink);opacity:.92}
@keyframes pop-burst{0%{transform:scale(.15);opacity:0}55%{transform:scale(1.2);opacity:1}100%{transform:scale(1)}}
@keyframes pop-fly{0%{transform:translate(-50%,-50%) scale(1);opacity:1}80%{opacity:.85}
  100%{transform:translate(calc(-50% + var(--tx,40vw)),calc(-50% + var(--ty,-34vh))) scale(.12);opacity:0}}
@keyframes grade-zoom{from{transform:scale(2.8);filter:blur(5px);opacity:0}to{transform:scale(1);opacity:1}}
.popup .spark{position:absolute;left:50%;top:45%;width:7px;height:7px;border-radius:50%;
  background:var(--c,#fff);box-shadow:0 0 10px var(--c,#fff);
  animation:spark-fly .9s ease-out var(--dl,0s) both}
@keyframes spark-fly{0%{transform:translate(0,0) scale(0);opacity:0}12%{transform:translate(0,0) scale(1.4);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(.15);opacity:0}}
.popup.g-perfect .pop-card::before{content:"";position:absolute;left:50%;top:42%;width:16px;height:16px;border-radius:50%;
  border:3px solid var(--warm);transform:translate(-50%,-50%) scale(.3);animation:ring-out .8s ease-out .1s both}
@keyframes ring-out{from{transform:translate(-50%,-50%) scale(.3);opacity:1}to{transform:translate(-50%,-50%) scale(15);opacity:0}}
.score-lcd.bump{animation:lcd-bump .55s}
@keyframes lcd-bump{30%{transform:scale(1.14);box-shadow:0 0 26px var(--accent),inset 0 2px 8px rgba(0,0,0,.9)}}
.combo.bump{animation:combo-bump .55s}
@keyframes combo-bump{30%{transform:scale(1.55) rotate(-5deg)}60%{transform:scale(.92)}}

/* ---------------- 控制台布局 ---------------- */
#console{position:relative;z-index:4;flex:1;display:grid;grid-template-columns:1fr 300px 1fr;gap:14px;
  padding:12px 18px 16px;min-height:0;align-items:stretch;width:100%;max-width:1560px;margin:0 auto}
.deck,.mixer{
  position:relative;border-radius:var(--rad);padding:10px;min-height:0;overflow:hidden;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,var(--panel1),var(--panel2) 70%);
  border:1px solid var(--panel-line);
  box-shadow:0 14px 30px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 6px rgba(0,0,0,.5);
}
/* 面板螺丝 */
.deck::before,.deck::after,.mixer::before,.mixer::after{
  content:"";position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#aab,#445 60%,#112);
  box-shadow:inset 0 -1px 1px rgba(0,0,0,.8),0 1px 1px rgba(255,255,255,.15);z-index:3}
.deck::before{top:7px;left:7px}.deck::after{top:7px;right:7px}
.mixer::before{bottom:7px;left:7px}.mixer::after{bottom:7px;right:7px}

/* ---------------- Deck ---------------- */
.deck{display:flex;flex-direction:column;gap:8px}
.deck-top{display:flex;align-items:center;gap:10px}
.deck-tag{font-size:13px;font-weight:800;letter-spacing:2px;color:var(--accent);border:1px solid var(--panel-line);
  padding:3px 10px;border-radius:var(--rad-pad);background:rgba(0,0,0,.35);text-shadow:0 0 8px var(--accent)}
.wave-wrap{position:relative;flex:1;height:64px;background:var(--lcd-bg);border-radius:8px;overflow:hidden;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.07)}
.wave{width:100%;height:100%}
.wave-grid{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 24%,rgba(255,255,255,.07) 24% 25%);pointer-events:none}

.deck-mid{display:flex;gap:10px;align-items:center;justify-content:center}
.platter-zone{position:relative;width:218px;height:218px;flex:none}
.platter-base{position:absolute;inset:-6px;border-radius:50%;
  background:conic-gradient(#494f63,#22252f,#494f63,#22252f,#494f63);
  box-shadow:0 10px 22px rgba(0,0,0,.7),inset 0 2px 4px rgba(255,255,255,.18)}
.platter{position:absolute;inset:0;border-radius:50%;cursor:grab;touch-action:none;z-index:2}
.platter:active{cursor:grabbing}
.ring-glow{position:absolute;inset:0;border-radius:50%;box-shadow:var(--glow),inset 0 0 22px rgba(0,0,0,.8);
  border:3px solid var(--accent);opacity:.85;transition:box-shadow .12s;pointer-events:none;z-index:3}
.platter.hot .ring-glow{box-shadow:0 0 34px var(--accent),0 0 60px var(--accent2);opacity:1}
.vinyl{position:absolute;inset:6px;border-radius:50%;
  background:
   repeating-radial-gradient(circle at 50% 50%,#0c0c10 0 1.6px,#1d1d24 1.6px 3.2px),
   radial-gradient(circle,#16161c,#050507);
  box-shadow:inset 0 4px 14px rgba(0,0,0,.85)}
.vinyl::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(transparent 0 40deg,rgba(255,255,255,.12) 55deg 65deg,transparent 80deg 215deg,rgba(255,255,255,.08) 230deg 240deg,transparent 255deg);
  pointer-events:none}
.vinyl .label{position:absolute;inset:34%;border-radius:50%;background:var(--vinyl-label);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 3px #0a0a0a,inset 0 2px 5px rgba(255,255,255,.3)}
.vinyl .label span{font-weight:900;font-size:26px;color:#fff;text-shadow:0 0 10px rgba(0,0,0,.8)}
.vinyl .spindle{position:absolute;inset:48.5%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#eee,#666)}
.vinyl .sticker{position:absolute;width:10px;height:10px;border-radius:50%;left:50%;top:9%;transform:translateX(-50%);
  background:var(--accent2);box-shadow:0 0 8px var(--accent2)}

.deck-side{display:flex;gap:10px;align-items:stretch;height:218px}
.pitch-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}
.fader-v{position:relative;width:34px;flex:1;border-radius:6px;
  background:linear-gradient(90deg,#101218,#22252f,#101218);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.9)}
.fader-v::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:4px;transform:translateX(-50%);
  background:#000;border-radius:2px;box-shadow:0 1px 0 rgba(255,255,255,.1)}
.fader-cap{position:absolute;left:50%;transform:translate(-50%,-50%);width:30px;height:18px;border-radius:3px;cursor:grab;touch-action:none;
  background:linear-gradient(180deg,#666e85,#23262f 45%,#3c4150 55%,#15171d);
  box-shadow:0 4px 8px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.fader-cap::after{content:"";position:absolute;left:3px;right:3px;top:48%;height:2px;background:var(--accent);box-shadow:0 0 5px var(--accent)}
.pitch-val{font-size:10px;font-family:ui-monospace,monospace;color:var(--lcd-ink)}
.deck-btns{display:flex;flex-direction:column;gap:8px;justify-content:center}
.sq-btn{background:var(--btn-face);border:1px solid var(--panel-line);border-radius:var(--rad-pad);color:var(--ink);
  font-weight:800;font-size:11px;letter-spacing:1px;padding:9px 8px;cursor:pointer;min-width:62px;
  box-shadow:0 4px 8px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.sq-btn:active{transform:translateY(1px)}
.sq-btn.lit{color:#001016;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#000));box-shadow:var(--glow)}
.sq-btn.play-btn{font-size:15px}
.sq-btn.play-btn.lit{background:linear-gradient(180deg,#39e75f,#0e7a2a);color:#fff;box-shadow:0 0 16px #39e75f88}

.hotcue-row{display:flex;gap:6px;align-items:stretch}
.hotcue{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 2px;cursor:pointer;
  background:var(--pad-face);border:1px solid var(--panel-line);border-radius:var(--rad-pad);color:var(--ink-dim)}
.hotcue b{font-size:10px;letter-spacing:1px}
.hotcue span{font-size:9px;font-family:ui-monospace,monospace}
.hotcue.set{color:var(--warm);border-color:var(--warm);box-shadow:0 0 10px color-mix(in srgb,var(--warm) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.1)}
.hotcue:active{transform:translateY(1px)}
.looplen{display:flex;align-items:center;gap:4px;padding:0 6px;border:1px solid var(--panel-line);border-radius:var(--rad-pad);background:rgba(0,0,0,.3)}
.llen{width:30px;height:24px;border:1px solid var(--panel-line);border-radius:4px;background:var(--btn-face);color:var(--ink-dim);cursor:pointer;font-size:11px;font-weight:700}
.llen.lit{color:#000;background:var(--warm);box-shadow:0 0 10px var(--warm)}

.fx-row{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:2px 4px}
.fx-sel{display:flex;align-items:center;gap:6px}
.fxsel{background:var(--lcd-bg);color:var(--lcd-ink);border:1px solid var(--panel-line);border-radius:6px;
  font-family:ui-monospace,monospace;font-size:12px;padding:5px 6px;outline:none;cursor:pointer}
.knob-unit{display:flex;flex-direction:column;align-items:center;gap:2px}
.knob{position:relative;width:46px;height:46px;border-radius:50%;cursor:grab;touch-action:none;flex:none;
  background:var(--knob-edge);box-shadow:0 5px 10px rgba(0,0,0,.65),inset 0 1px 2px rgba(255,255,255,.3)}
.knob .cap{position:absolute;inset:6px;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#596179,#1b1e29 75%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.35),inset 0 -3px 6px rgba(0,0,0,.7)}
.knob .cap::before{content:"";position:absolute;left:50%;top:3px;width:3px;height:11px;border-radius:2px;
  transform:translateX(-50%);background:var(--accent);box-shadow:0 0 6px var(--accent)}
.knob.mini{width:36px;height:36px}.knob.mini .cap{inset:5px}.knob.mini .cap::before{height:8px}
.knob-unit .tag,.knob-unit span{font-size:9px;letter-spacing:1px;color:var(--ink-dim)}

/* Loop Pads */
.pads{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;flex:1;min-height:118px}
.pad{position:relative;border:none;border-radius:var(--rad-pad);cursor:pointer;overflow:hidden;
  background:var(--pad-face);color:var(--ink);
  box-shadow:0 5px 9px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -4px 8px rgba(0,0,0,.5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px}
.pad b{font-size:11px;font-weight:800;letter-spacing:.5px;pointer-events:none}
.pad i{font-size:9px;font-style:normal;color:var(--ink-dim);pointer-events:none}
.pad:active{transform:translateY(2px)}
.pad.on{color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--pad-on) 70%,#222),color-mix(in srgb,var(--pad-on) 28%,#000));
  box-shadow:0 0 16px var(--pad-on),inset 0 1px 0 rgba(255,255,255,.4)}
.pad.on i{color:#ffffffcc}
.pad.on::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
body[data-style="cyber"] .pad.on::after{border:2px solid var(--pad-on2);animation:neonpulse .45s ease-in-out infinite alternate}
@keyframes neonpulse{from{box-shadow:inset 0 0 4px var(--pad-on2)}to{box-shadow:inset 0 0 18px var(--pad-on2)}}
body[data-style="bit8"] .pad.on::after{border:3px dashed #000;animation:bitstep .5s steps(2) infinite}
@keyframes bitstep{50%{transform:translate(2px,0)}}
body[data-style="guofeng"] .pad.on::after{border:2px solid var(--pad-on2);border-radius:50%;inset:30% 35%;animation:inkripple 1s ease-out infinite}
@keyframes inkripple{from{transform:scale(.4);opacity:1}to{transform:scale(2.6);opacity:0}}
body[data-style="idol"] .pad.on::after{background:radial-gradient(circle at 70% 25%,#fff 0 2px,transparent 3px),radial-gradient(circle at 25% 65%,#fff 0 2px,transparent 3px);animation:sparkle .6s ease-in-out infinite alternate}
.pad.blink{animation:padhit .15s ease-out}
@keyframes padhit{from{filter:brightness(2.4)}to{filter:brightness(1)}}

/* ---------------- Mixer ---------------- */
.mixer{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.mix-title{text-align:center;font-size:11px;letter-spacing:3px;color:var(--ink-dim);padding:2px 0}
.mix-body{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;flex:1;min-height:0}
.mix-ch{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 2px;border-radius:var(--rad-pad);
  background:rgba(0,0,0,.22);border:1px solid var(--panel-line)}
.mix-ch .ch-tag{font-size:10px;font-weight:800;color:var(--accent);letter-spacing:1px}
.mix-mid{display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:flex-start;padding-top:6px}
.vu{width:30px;flex:1;min-height:80px;background:var(--lcd-bg);border-radius:5px;box-shadow:inset 0 2px 8px rgba(0,0,0,.9)}
.ch-fader-zone{height:96px;width:100%;display:flex;justify-content:center}
.cue-head.lit{background:linear-gradient(180deg,var(--warm),color-mix(in srgb,var(--warm) 50%,#000));color:#000;box-shadow:0 0 14px var(--warm)}
.xf-zone{padding:4px 10px 6px}
.fader-h{position:relative;height:34px;border-radius:6px;background:linear-gradient(180deg,#101218,#22252f,#101218);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.9)}
.fader-h::before{content:"";position:absolute;top:50%;left:8px;right:8px;height:4px;transform:translateY(-50%);
  background:#000;border-radius:2px}
.fader-h .fader-cap{width:20px;height:30px;transform:translate(-50%,-50%);top:50%}
.fader-h .fader-cap::after{left:48%;top:3px;bottom:3px;height:auto;width:2px}
.xf-tags{display:flex;justify-content:space-between;font-size:9px;color:var(--ink-dim);padding:2px 4px;letter-spacing:1px}

/* ---------------- 开机遮罩 ---------------- */
#boot{position:fixed;inset:0;z-index:99;display:flex;align-items:center;justify-content:center;
  background:rgba(2,3,8,.88);backdrop-filter:blur(8px)}
#boot.off{display:none}
#bootBtn{display:flex;flex-direction:column;align-items:center;gap:10px;padding:38px 54px;cursor:pointer;
  background:radial-gradient(circle at 50% 25%,#2c3344,#0d1018 75%);border:1px solid var(--panel-line);border-radius:24px;
  color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.8),var(--glow)}
#bootBtn b{font-size:54px;color:var(--accent);text-shadow:0 0 24px var(--accent)}
#bootBtn span{font-size:20px;font-weight:800;letter-spacing:4px}
#bootBtn em{font-size:12px;color:var(--ink-dim);font-style:normal}

body[data-style="bit8"] .sq-btn,body[data-style="bit8"] .pad,body[data-style="bit8"] .hotcue,body[data-style="bit8"] .llen{box-shadow:3px 3px 0 #000,inset 0 1px 0 rgba(255,255,255,.18)}
body[data-style="bit8"] *{text-shadow:none!important}
body[data-style="idol"] .pad,body[data-style="idol"] .sq-btn{border-radius:16px}
@media (max-width:1180px){#console{grid-template-columns:1fr 240px 1fr}.platter-zone{width:180px;height:180px}.deck-side{height:180px}}