/* ===================================================================
   BOILER ROOM // decks  —  CDJ hardware, year 2080
   Fonts: Bruno Ace / Bruno Ace SC (UI), Doto (LCD dot-matrix)
   =================================================================== */
:root{
  --bg:#04050a;
  --ink:#e9edf6;
  --ink-dim:#8b93a7;
  --ink-faint:#565d72;
  --cyan:#ff2a40;
  --amber:#ff9d2f;
  --red:#ff3b54;
  --green:#39ff9b;
  --magenta:#ff45cf;
  --line:#46517a;
  --screen-ink:#76ffd6;
  --shadow:0 22px 60px rgba(0,0,0,.66);

  /* ---- texture toolkit (2080 hardware) ---- */
  --carbon:
    repeating-linear-gradient(45deg,#0d0f17 0 3px,#0a0c12 3px 6px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.022) 0 3px,transparent 3px 6px);
  --brushed:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,rgba(0,0,0,.05) 1px 2px);
  --knurl:repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 2px,rgba(255,255,255,.07) 2px 4px);
  --machine:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.05) 0 1px,transparent 1px 4px);
  --r:4px;
  --font-ui:"Bruno Ace SC",system-ui,sans-serif;
  --font-disp:"Bruno Ace","Bruno Ace SC",sans-serif;
  --font-lcd:"Doto",monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-ui);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;overscroll-behavior:none;touch-action:manipulation;letter-spacing:.02em;
}
button{font-family:inherit;color:inherit;cursor:pointer}
input{font-family:inherit}

/* ---------- background ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:
  radial-gradient(1200px 820px at 50% -12%, #161229 0%, transparent 60%),
  radial-gradient(940px 720px at 92% 112%, #1c0a22 0%, transparent 55%),
  var(--bg);}
.bg-photo{position:absolute;inset:-6%;background-size:cover;background-position:center;
  opacity:.12;filter:saturate(1.15) contrast(1.05);mix-blend-mode:screen;}
.bg-photo--ball{background-image:url("assets/bg/discoball.jpg");opacity:.15;animation:floatA 26s ease-in-out infinite;}
.bg-photo--floor{background-image:url("assets/bg/floor.jpg");opacity:.10;background-position:bottom;animation:floatB 34s ease-in-out infinite;}
@keyframes floatA{0%,100%{transform:scale(1.05) translate(0,0)}50%{transform:scale(1.12) translate(-2%,-1.5%)}}
@keyframes floatB{0%,100%{transform:scale(1.08) translate(0,0)}50%{transform:scale(1.02) translate(2%,1%)}}
.bg-grid{position:absolute;inset:-50% 0 -10% 0;background-image:
  linear-gradient(rgba(255,42,64,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,69,207,.05) 1px,transparent 1px);
  background-size:48px 48px;transform:perspective(440px) rotateX(62deg) translateY(10%);
  transform-origin:bottom;opacity:.45;animation:grid 13s linear infinite;}
@keyframes grid{to{background-position:0 48px,48px 0}}
.bg-haze{position:absolute;inset:0;background:radial-gradient(62% 52% at 50% 60%, transparent 0%, rgba(4,5,10,.72) 100%);}
.bg-grain{position:absolute;inset:0;opacity:.06;pointer-events:none;mix-blend-mode:overlay;background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------- boot ---------- */
.boot{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:radial-gradient(900px 640px at 50% 42%,rgba(18,10,38,.72),rgba(2,3,7,.97));
  backdrop-filter:blur(5px);transition:opacity .5s ease;}
.boot.is-gone{opacity:0;pointer-events:none}
.boot-inner{display:flex;flex-direction:column;align-items:center;gap:54px}
.boot-disc{position:relative;width:170px;height:170px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 42%,#2a3142 0%,#0c0f18 60%,#05060c 100%),
    var(--machine);
  border:1px solid #465077;
  box-shadow:0 0 60px rgba(255,42,64,.22),0 24px 50px rgba(0,0,0,.6),inset 0 0 46px rgba(0,0,0,.8);
  animation:spin 3.2s linear infinite;}
.boot-disc-sheen{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,42,64,.28) 40deg,transparent 90deg,
    rgba(255,69,207,.22) 200deg,transparent 250deg);mix-blend-mode:screen;}
.boot-disc-hub{position:absolute;inset:36%;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#1a1f2e,#06080e);border:1px solid #465077;
  box-shadow:inset 0 0 18px rgba(0,0,0,.9),0 0 12px rgba(255,42,64,.25);}
.boot-disc-mark{position:absolute;top:8px;left:50%;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 16px var(--cyan);}
@keyframes spin{to{transform:rotate(360deg)}}
.boot-btn{position:relative;border:0;padding:0;background:none}
.boot-btn span{display:inline-block;font-family:var(--font-ui);font-size:14px;letter-spacing:.34em;
  color:var(--cyan);padding:18px 40px;border-radius:40px;
  background:linear-gradient(180deg,rgba(255,42,64,.12),rgba(255,42,64,.03));
  border:1px solid rgba(255,42,64,.55);
  box-shadow:0 0 28px rgba(255,42,64,.28),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -10px 22px rgba(0,0,0,.4);
  transition:.18s;}
.boot-btn:hover span{background:linear-gradient(180deg,rgba(255,42,64,.22),rgba(255,42,64,.06));box-shadow:0 0 48px rgba(255,42,64,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.boot-btn:active span{transform:translateY(2px)}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 16px;
  background:linear-gradient(180deg,rgba(8,9,15,.94),rgba(8,9,15,.55));
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  box-shadow:inset 0 -1px 0 rgba(255,42,64,.12);}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-disp);font-size:13px;letter-spacing:.12em}
.brand-dot{width:11px;height:11px;border-radius:50%;background:var(--red);box-shadow:0 0 14px var(--red);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.32}}
.topbar-center{display:flex;align-items:center;gap:14px}
.masterwrap{display:flex;align-items:center;gap:9px}
.masterlabel{font-size:10px;letter-spacing:.16em;color:var(--ink-faint)}
.master{width:96px}

/* ---------- pad: illuminated rubber control (chips + transport pads) ---------- */
.chip,.pad{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-ui);font-size:11px;letter-spacing:.14em;border-radius:4px;
  -webkit-user-select:none;user-select:none;color:var(--ink-dim);
  background:linear-gradient(180deg,#1b2030,#0c0e16);
  border:1px solid #566392;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -10px 16px rgba(0,0,0,.45),0 3px 8px rgba(0,0,0,.5);}
.chip{padding:9px 13px}
.chip::after,.pad::after{content:"";position:absolute;left:6px;right:6px;top:4px;height:38%;border-radius:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent);pointer-events:none}
.chip:active,.pad:active{transform:translateY(1.5px);box-shadow:inset 0 2px 8px rgba(0,0,0,.7)}
.chip-led{width:8px;height:8px;border-radius:50%;background:#333a4a;box-shadow:inset 0 0 4px #000}
.chip--auto.is-on{color:var(--green);border-color:rgba(57,255,155,.55);
  background:linear-gradient(180deg,rgba(57,255,155,.22),rgba(57,255,155,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 18px rgba(57,255,155,.3),inset 0 -10px 16px rgba(0,0,0,.35)}
.chip--auto.is-on .chip-led{background:var(--green);box-shadow:0 0 10px var(--green)}
.chip--list{color:var(--cyan);border-color:rgba(255,42,64,.4)}
.chip--list:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 16px rgba(255,42,64,.3)}

/* ---------- rig layout ---------- */
.rig{position:relative;z-index:10;display:grid;gap:16px;padding:18px;
  grid-template-columns:1fr minmax(228px,308px) 1fr;align-items:start;max-width:1440px;margin:0 auto}

/* ---------- panels (deck / mixer) ---------- */
.deck,.mixer{position:relative;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 22%),
    var(--carbon);
  border:1.5px solid #66739c;}
.deck::before,.mixer::before{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);}
/* crisp top accent line */
.deck::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--accent);opacity:.65}
.deck{padding:15px}
.deck[data-deck="A"]{--accent:var(--cyan)}
.deck[data-deck="B"]{--accent:var(--amber)}
.deck.is-live{border-color:color-mix(in srgb,var(--accent) 50%,#465077)}
.deck.is-live::after{opacity:1;box-shadow:0 0 12px var(--accent)}

.deck-head{display:flex;align-items:center;gap:10px;margin-bottom:11px;font-size:10px;letter-spacing:.14em}
.deck-tag{font-family:var(--font-disp);color:var(--accent);font-size:11px}
.deck-fmt{color:var(--ink-faint);border:1px solid var(--line);padding:2px 6px;border-radius:5px;font-size:9px;font-family:var(--font-lcd);font-weight:700}
.deck-load{margin-left:auto;color:var(--ink-faint);font-size:10px;font-family:var(--font-lcd);font-weight:600}
.deck.is-live .deck-load{color:var(--red)}

/* ---------- LCD screen ---------- */
.screen{position:relative;border-radius:4px;padding:11px 13px;margin-bottom:15px;
  background:linear-gradient(180deg,#04140f,#01100c);
  border:1px solid #0c3a30;box-shadow:inset 0 0 26px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.5);}
.screen::before{content:"";position:absolute;inset:0;border-radius:4px;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;opacity:.5}
.screen-row{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.screen-no{font-family:var(--font-lcd);font-weight:900;font-size:30px;color:var(--accent);line-height:.9;min-width:48px;
  text-shadow:0 0 14px color-mix(in srgb,var(--accent) 55%,transparent)}
.screen-titles{min-width:0;flex:1}
.screen-title{font-family:var(--font-lcd);font-weight:700;color:var(--screen-ink);font-size:15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em;text-shadow:0 0 10px rgba(118,255,214,.4)}
.screen-artist{font-family:var(--font-lcd);font-weight:500;color:#2f9c81;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.wave{position:relative;height:42px;border-radius:3px;overflow:hidden;cursor:pointer;background:#020a08;border:1px solid #0a2f26}
.wave-bars{position:absolute;inset:0;display:flex;align-items:center;gap:2px;padding:0 2px;opacity:.6}
.wave-bars i{flex:1;background:linear-gradient(180deg,#13735c,#0c4537);border-radius:1px;min-width:1px}
.wave-fill{position:absolute;top:0;bottom:0;left:0;width:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 38%,transparent),color-mix(in srgb,var(--accent) 10%,transparent));
  border-right:2px solid var(--accent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 65%,transparent);pointer-events:none}
.wave-head{display:none}
.screen-times{display:flex;justify-content:space-between;margin-top:8px;font-size:13px;font-family:var(--font-lcd);font-weight:700;color:#46c1a2}
.t-bpm{color:var(--ink-faint)}

/* ---------- jog / platter ---------- */
.platter-wrap{position:relative;display:flex;justify-content:center;align-items:center;margin:6px 0 16px}
.platter{position:relative;width:min(58vw,216px);aspect-ratio:1;border-radius:50%;touch-action:none;cursor:grab;
  background:radial-gradient(circle at 50% 40%,#262c3d 0%,#0c0e16 60%,#05060a 100%);
  border:1px solid #566392;box-shadow:0 12px 32px rgba(0,0,0,.62),inset 0 0 44px rgba(0,0,0,.72);}
.platter:active{cursor:grabbing}
/* knurled grip ring */
.platter-ring{position:absolute;inset:4%;border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg,#0a0d15 0deg 2.6deg,#161a27 2.6deg 5.2deg);
  border:1px solid #1a1f2c;
  box-shadow:inset 0 0 0 6px #0b0e16,inset 0 0 30px rgba(0,0,0,.85);}
.platter-ring::after{content:"";position:absolute;inset:13%;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#1a1f2d,#090b12);border:1px solid #465077;
  background-image:var(--machine);box-shadow:inset 0 0 26px rgba(0,0,0,.8)}
.platter-spin{position:absolute;inset:4%;border-radius:50%;will-change:transform}
.platter-dot{position:absolute;top:7%;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 16px var(--accent),0 0 4px #fff}
.platter-center{position:absolute;inset:31%;border-radius:50%;display:grid;place-items:center;text-align:center;padding:6px;
  background:radial-gradient(circle at 50% 38%,#181d2b,#06080f);border:1px solid #566392;
  box-shadow:inset 0 0 20px rgba(0,0,0,.85),0 0 0 4px rgba(0,0,0,.4)}
.platter-center span{font-family:var(--font-lcd);font-weight:500;font-size:9px;color:var(--accent);letter-spacing:.04em;line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;opacity:.92}
.deck.is-live .platter{box-shadow:0 12px 32px rgba(0,0,0,.62),inset 0 0 44px rgba(0,0,0,.72),0 0 30px color-mix(in srgb,var(--accent) 32%,transparent)}
.deck.is-live .platter-dot{animation:none}

/* tempo fader rail beside the platter */
.tempo{position:absolute;right:-4px;top:50%;transform:translateY(-50%);height:158px}
.tempo-label{position:absolute;right:0;top:calc(50% + 88px);font-size:8px;color:var(--ink-faint);letter-spacing:.12em}

/* ---------- transport ---------- */
.transport{display:flex;align-items:center;justify-content:center;gap:16px}
.jbtn{position:relative;width:74px;height:74px;border-radius:50%;border:0;padding:0;background:none;flex:0 0 auto}
.jbtn-cap{position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 50% 34%,#5b6478 0%,#2a3142 42%,#0e1119 100%),
    var(--machine);
  border:1px solid #050709;
  box-shadow:0 6px 16px rgba(0,0,0,.65),inset 0 2px 3px rgba(255,255,255,.28),inset 0 -8px 14px rgba(0,0,0,.7);}
.jbtn::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--ring,#444);
  box-shadow:0 0 16px var(--ring,#444),inset 0 0 10px var(--ring,#444);opacity:.92;pointer-events:none}
.jbtn-lbl{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-ui);font-size:11px;
  letter-spacing:.1em;color:#0a0c10;text-shadow:0 1px 0 rgba(255,255,255,.3)}
.jbtn-ico{position:absolute;inset:0;display:grid;place-items:center;font-size:20px;color:#0a0c10;text-shadow:0 1px 0 rgba(255,255,255,.3)}
.jbtn:active{transform:translateY(2px)}
.jbtn:active .jbtn-cap{box-shadow:0 2px 6px rgba(0,0,0,.6),inset 0 2px 10px rgba(0,0,0,.7)}
.jbtn--cue{--ring:var(--amber)}
.jbtn--cue.is-armed{--ring:var(--red)}
.jbtn--cue.is-armed .jbtn-cap{background:radial-gradient(circle at 50% 34%,#ffd9a0,#c8761f 60%,#5e360c)}
.jbtn--play{--ring:var(--green)}
.jbtn--play.is-playing .jbtn-cap{background:radial-gradient(circle at 50% 34%,#b9ffd9,#2bb46a 55%,#0c4d2c)}
.jbtn--play.is-playing .jbtn-ico{color:#04130b}
.jbtn--play .pause-ico{display:none}
.jbtn--play.is-playing .play-ico{display:none}
.jbtn--play.is-playing .pause-ico{display:grid}

.pads{display:flex;flex-direction:column;gap:9px;flex:1 1 auto;max-width:150px}
.pad{flex-direction:column;gap:1px;padding:9px 8px;line-height:1.05}
.pad b{font-size:12px;letter-spacing:.12em}
.pad small{font-size:8px;letter-spacing:.18em;color:var(--ink-faint);font-family:var(--font-lcd);font-weight:600}
.pad--next{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,#566392);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 16%,#11141d),#0a0d15)}
.pad--next:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 16px color-mix(in srgb,var(--accent) 40%,transparent)}
.pad--key{color:var(--ink-faint)}
.pad--key.is-on{color:var(--magenta);border-color:rgba(255,69,207,.5);
  background:linear-gradient(180deg,rgba(255,69,207,.2),rgba(255,69,207,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 16px rgba(255,69,207,.3),inset 0 -10px 16px rgba(0,0,0,.35)}
.pad--key.is-on small{color:#b03c95}

/* ---------- mixer ---------- */
.mixer{padding:15px 13px;position:sticky;top:66px}
.mixer-top{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:start}
.channel{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:4px}
.ch-id{font-family:var(--font-disp);font-size:13px;letter-spacing:.06em}
.channel[data-ch="A"] .ch-id{color:var(--cyan)}
.channel[data-ch="B"] .ch-id{color:var(--amber)}

/* ---------- knob: physical cap + LED collar + tick ring ---------- */
.knob{position:relative;width:56px;display:flex;flex-direction:column;align-items:center;gap:7px;-webkit-user-select:none;user-select:none}
.knob-ring{position:absolute;top:0;left:50%;width:54px;height:54px;margin-left:-27px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 225deg,
    var(--knob-accent,var(--cyan)) 0deg,
    var(--knob-accent,var(--cyan)) calc(var(--val,0.5)*270deg),
    rgba(255,255,255,.05) calc(var(--val,0.5)*270deg),
    rgba(255,255,255,.05) 270deg,
    transparent 270deg);
  -webkit-mask:radial-gradient(closest-side,transparent 70%,#000 72%);
          mask:radial-gradient(closest-side,transparent 70%,#000 72%);
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--knob-accent,var(--cyan)) 60%,transparent));opacity:.9}
.knob[data-ch="B"]{--knob-accent:var(--amber)}
.knob--filter{--knob-accent:var(--magenta)}
.knob-dial{position:relative;width:42px;height:42px;margin-top:6px;border-radius:50%;touch-action:none;cursor:ns-resize;
  background:radial-gradient(circle at 50% 36%,#333a4c 0%,#171b26 60%,#0a0c12 100%);
  border:1px solid #04060a;
  box-shadow:0 5px 12px rgba(0,0,0,.6),inset 0 2px 2px rgba(255,255,255,.18),inset 0 -6px 10px rgba(0,0,0,.6)}
.knob-dial::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--machine);opacity:.5}
.knob-dial::after{content:"";position:absolute;left:50%;top:4px;width:3px;height:14px;margin-left:-1.5px;border-radius:2px;
  background:var(--knob-accent,var(--cyan));box-shadow:0 0 8px var(--knob-accent,var(--cyan));
  transform-origin:50% 17px;transform:rotate(var(--rot,0deg))}
.knob-lbl{font-family:var(--font-ui);font-size:8px;letter-spacing:.1em;color:var(--ink-faint)}

/* VU meter */
.meter{width:9px;height:74px;background:#05070b;border:1px solid var(--line);border-radius:3px;overflow:hidden;display:flex;align-items:flex-end;margin-top:2px;box-shadow:inset 0 0 6px rgba(0,0,0,.8)}
.meter i{display:block;width:100%;height:0%;background:linear-gradient(0deg,var(--green),var(--amber) 72%,var(--red));transition:height .06s linear}

.mixer-logo{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ink-faint);padding:0 2px}
.mixer-logo span{font-family:var(--font-disp);font-size:13px;color:var(--ink-dim)}
.mixer-logo small{font-family:var(--font-lcd);font-weight:600;font-size:8px;letter-spacing:.16em}

.fader{height:156px;margin-top:2px}
.xfade-wrap{display:flex;align-items:center;gap:11px;margin-top:18px;padding:0 4px}
.xf-end{font-family:var(--font-disp);font-size:12px;color:var(--ink-faint)}
.xfade-wrap .xf-end:first-child{color:var(--cyan)}
.xfade-wrap .xf-end:last-child{color:var(--amber)}
.xfade{flex:1}

/* ---------- range inputs: recessed channel + real fader cap ---------- */
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:7px;border-radius:5px;
  background:linear-gradient(180deg,#05070c,#1a1f2c);border:1px solid #04060a;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.03)}
input[type=range]::-moz-range-track{height:7px;border-radius:5px;background:#0a0d14;border:1px solid #04060a;box-shadow:inset 0 1px 3px rgba(0,0,0,.9)}
/* horizontal cap */
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:34px;margin-top:-14px;border-radius:5px;
  background:linear-gradient(180deg,#3a4255 0%,#13161f 48%,#272d3c 50%,#1a1f2c 52%,#0c0e15 100%);
  border:1px solid #04060a;
  box-shadow:0 4px 9px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(0,0,0,.4);}
input[type=range]::-moz-range-thumb{width:20px;height:34px;border-radius:5px;background:linear-gradient(180deg,#2a3042,#0c0e15);border:1px solid #04060a}
/* grip line across the cap */
input[type=range]::-webkit-slider-thumb{background-image:
  linear-gradient(180deg,rgba(255,255,255,.22),transparent 40%),
  var(--knurl);background-blend-mode:overlay;}

/* vertical faders */
.fader,.tempo{-webkit-appearance:slider-vertical;writing-mode:vertical-lr;direction:rtl;width:30px}
.fader::-webkit-slider-runnable-track,.tempo::-webkit-slider-runnable-track{width:7px;height:100%}
.fader::-webkit-slider-thumb,.tempo::-webkit-slider-thumb{margin-top:0;margin-left:-8px;width:32px;height:18px;
  background-image:var(--knurl),linear-gradient(90deg,rgba(255,255,255,.18),transparent 40%);}
.tempo::-webkit-slider-thumb{background:linear-gradient(180deg,#ffd9a8,#b56f1e);height:16px}
.xfade::-webkit-slider-thumb{width:28px;height:36px}
.master::-webkit-slider-runnable-track{background:linear-gradient(90deg,#6e0a1a,var(--cyan))}

/* ---------- playlist drawer ---------- */
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,88vw);z-index:50;
  background:linear-gradient(180deg,#0c0e16,#06070e);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.7,.2,1);
  display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.6)}
.drawer.is-open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-bottom:1px solid var(--line);
  font-family:var(--font-disp);font-size:12px;letter-spacing:.08em;color:var(--ink-dim)}
.drawer-head span span{font-family:var(--font-lcd);font-weight:700;color:var(--cyan)}
.drawer-close{background:none;border:1px solid var(--line);border-radius:3px;width:34px;height:34px;color:var(--ink-dim)}
.drawer-list{overflow-y:auto;flex:1;padding:6px;-webkit-overflow-scrolling:touch}
.row{display:flex;align-items:center;gap:11px;padding:10px;border-radius:4px;cursor:pointer;transition:.12s}
.row:hover{background:#12151f}
.row.is-onA{box-shadow:inset 3px 0 0 var(--cyan)}
.row.is-onB{box-shadow:inset 3px 0 0 var(--amber)}
.row-no{font-family:var(--font-lcd);font-weight:700;font-size:14px;color:var(--ink-faint);min-width:28px}
.row-meta{min-width:0;flex:1}
.row-title{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-artist{font-size:11px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-load{display:flex;gap:5px;opacity:0;transition:.12s}
.row:hover .row-load,.row.is-onA .row-load,.row.is-onB .row-load{opacity:1}
.row-load button{font-family:var(--font-ui);font-size:10px;border:1px solid var(--line);background:#11141d;border-radius:7px;padding:5px 8px;color:var(--ink-dim)}
.row-load button[data-to="A"]:hover{color:var(--cyan);border-color:var(--cyan)}
.row-load button[data-to="B"]:hover{color:var(--amber);border-color:var(--amber)}
.row-fmt{font-family:var(--font-lcd);font-weight:700;font-size:8px;color:var(--ink-faint);border:1px solid var(--line);border-radius:4px;padding:2px 4px}
.scrim{position:fixed;inset:0;z-index:40;background:rgba(2,3,6,.5);opacity:0;pointer-events:none;transition:.28s}
.scrim.is-open{opacity:1;pointer-events:auto}

.footenote{position:relative;z-index:10;text-align:center;color:var(--ink-faint);font-size:9px;letter-spacing:.06em;padding:8px 16px 24px}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .rig{grid-template-columns:1fr;max-width:560px}
  .deck[data-deck="A"]{order:1}.mixer{order:2;position:static}.deck[data-deck="B"]{order:3}
  .platter{width:min(64vw,260px)}
  .topbar-center .masterwrap{display:none}
  .footenote{display:none}
}
@media (max-width:480px){
  .rig{padding:11px;gap:11px}
  .knob-dial{width:40px;height:40px}.knob{width:50px}.knob-ring{width:52px;height:52px;margin-left:-26px}
  .jbtn{width:66px;height:66px}
  .screen-art{width:46px;height:46px}
  .brand-sub{display:none}
}
@media (hover:none){.row-load{opacity:1}}

/* ===================================================================
   PHOTOS — actual images featured across the rig
   =================================================================== */
.brand-name{color:var(--ink)}
.brand-sub{font-family:var(--font-ui);font-size:9px;letter-spacing:.16em;color:var(--ink-dim);
  padding-left:10px;margin-left:2px;border-left:1.5px solid #66739c}

/* boot disc = spinning disco-ball photo */
.boot-disc{background:
    radial-gradient(circle at 50% 40%,rgba(8,6,12,.15),rgba(3,4,9,.82) 80%),
    url("assets/bg/discoball.jpg") center/cover no-repeat;
  border:2px solid #66739c;}

/* stronger screen border */
.screen{border:1.5px solid #1f8068}

/* cover art on the LCD */
.screen-art{position:relative;flex:0 0 auto;width:56px;height:56px;border-radius:3px;
  background:#02100c center/cover no-repeat;
  border:1.5px solid var(--accent);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 38%,transparent),inset 0 0 0 1px rgba(0,0,0,.7)}
.art-no{position:absolute;left:0;bottom:0;font-family:var(--font-lcd);font-weight:900;font-size:11px;
  color:#fff;background:rgba(0,0,0,.72);padding:0 5px;border-top-right-radius:3px;letter-spacing:.02em}

/* vinyl photo label spinning in the jog */
.platter-label{position:absolute;inset:29%;border-radius:50%;
  background:#02100c center/cover no-repeat;
  border:1px solid rgba(0,0,0,.7);box-shadow:inset 0 0 22px rgba(0,0,0,.6),0 0 0 2px rgba(0,0,0,.5)}
.platter-center{inset:41%;background:radial-gradient(circle at 50% 38%,#2a3142,#06080e);
  border:1.5px solid #66739c;box-shadow:inset 0 0 10px rgba(0,0,0,.85),0 0 0 3px rgba(0,0,0,.45)}
.platter-center span{display:none}

/* playlist thumbnails */
.row-art{flex:0 0 auto;width:40px;height:40px;border-radius:3px;
  background:#02100c center/cover no-repeat;border:1px solid #46517a;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}