/* ============================================================
   WYS-RX3 — fake all-in-one DJ system
   Base coordinate system: 1800 x 1200, scaled to fit viewport.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #050506;
  overflow: hidden;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

body.hide-cursor, body.hide-cursor * { cursor: none !important; }

/* ---- ambient room glow: one hue at a time, following the master deck ---- */
#ambient {
  position: fixed; inset: -10%;
  background:
    radial-gradient(55% 45% at 50% 42%, rgba(58, 105, 215, 0.13), transparent 70%),
    radial-gradient(45% 35% at 50% 85%, rgba(58, 90, 180, 0.07), transparent 70%);
  opacity: .35;
  transition: opacity .12s linear;
  pointer-events: none;
}
#ambient::after { /* amber layer crossfades in when deck B is on air */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(55% 45% at 50% 42%, rgba(215, 140, 55, 0.12), transparent 70%),
    radial-gradient(45% 35% at 50% 85%, rgba(180, 110, 45, 0.07), transparent 70%);
  opacity: var(--mixB, 0);
  transition: opacity 3s ease;
}

/* ---- stage scaling ---- */
#stage {
  position: fixed;
  left: 50%; top: 50%;
  width: 1920px; height: 1200px; /* 16:10 — fills a 2560×1600 laptop edge-to-edge */
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: center center;
}

/* ---- deck body ---- */
#deck {
  position: absolute; inset: 0;
  border-radius: 26px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #1b1c1f 0%, #131417 8%, #101114 55%, #0c0d10 100%);
  box-shadow:
    0 40px 120px rgba(0,0,0,.85),
    0 6px 24px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -2px 6px rgba(0,0,0,.7);
}
#deck::after { /* soft top sheen */
  content: ""; position: absolute; inset: 0; border-radius: 26px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.05), transparent 30%);
}

#chrome-layer { position: absolute; inset: 0; }

/* panel seam hairlines */
.seam {
  position: absolute; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(255,255,255,.05));
}
.seam.h { height: 2px; }
.seam.v { width: 2px; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(255,255,255,.05)); }

/* ============ generic hardware bits ============ */

.lbl {
  position: absolute;
  color: #9aa0a8;
  font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
  font-stretch: condensed;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  transform: translate(-50%, -50%);
  text-shadow: 0 1px 1px rgba(0,0,0,.8);
  pointer-events: none;
}
.lbl.bright { color: #d7dbe0; }
.lbl.dim    { color: #6d7278; font-size: 8px; }
.lbl.tiny   { font-size: 7px; letter-spacing: .05em; }
.lbl.orange { color: #ffb03a; }
.lbl.blue   { color: #6fb2ff; }
.lbl.red    { color: #ff6a5e; }
.lbl.boxed  {
  border: 1px solid #3a3d42; border-radius: 3px;
  padding: 1px 5px; background: rgba(0,0,0,.35); color: #c9cdd2;
}

/* ---- knobs ---- */
.knob {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #4a4d53, #26282c 58%, #101114 100%);
  box-shadow:
    0 4px 9px rgba(0,0,0,.75),
    inset 0 1px 1px rgba(255,255,255,.22),
    inset 0 -3px 6px rgba(0,0,0,.65);
}
.knob .cap {
  position: absolute; inset: 0; border-radius: 50%;
  transform: rotate(var(--rot, 0deg));
}
.knob .cap::before { /* indicator line */
  content: ""; position: absolute;
  left: 50%; top: 7%;
  width: 2.5px; height: 30%;
  margin-left: -1.25px;
  border-radius: 2px;
  background: #e8eaee;
  box-shadow: 0 0 4px rgba(255,255,255,.35);
}
.knob.k-color .cap::before { background: #ffb03a; box-shadow: 0 0 5px rgba(255,176,58,.6); }
.knob::after { /* printed tick-scale ring around the knob */
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  background: repeating-conic-gradient(#454a52 0deg 2deg, transparent 2deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%, #000 82%, transparent 83%);
          mask: radial-gradient(circle, transparent 66%, #000 67%, #000 82%, transparent 83%);
  z-index: -1;
}

/* ---- rect buttons ---- */
.btn {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #1c1e22, #101215);
  border: 1px solid #33363c;
  border-radius: 4px;
  color: #b9bec5;
  font-size: 8px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.09);
  transition: box-shadow .08s, background .08s, color .08s;
}
.btn.round { border-radius: 50%; }
.btn.pill  { border-radius: 10px; }

/* lit variants */
.btn.lit-orange { background: linear-gradient(180deg,#ffb03a,#e07f12); color:#241300; border-color:#ffcf85;
  box-shadow: 0 0 14px rgba(255,160,40,.75), inset 0 1px 0 rgba(255,255,255,.4); }
.btn.lit-blue { background: linear-gradient(180deg,#4d9dff,#1f61d4); color:#04122b; border-color:#9cc6ff;
  box-shadow: 0 0 14px rgba(70,150,255,.75), inset 0 1px 0 rgba(255,255,255,.4); }
.btn.lit-red { background: linear-gradient(180deg,#ff5f52,#cf2318); color:#2b0300; border-color:#ff9a90;
  box-shadow: 0 0 14px rgba(255,80,60,.75), inset 0 1px 0 rgba(255,255,255,.35); }
.btn.lit-green { background: linear-gradient(180deg,#43e07a,#18a548); color:#00220c; border-color:#93f0b6;
  box-shadow: 0 0 14px rgba(50,220,110,.75), inset 0 1px 0 rgba(255,255,255,.35); }
.btn.lit-white { background: linear-gradient(180deg,#f2f4f7,#c2c8cf); color:#17191c; border-color:#fff;
  box-shadow: 0 0 12px rgba(255,255,255,.55), inset 0 1px 0 #fff; }

/* soft glow-only (edge lit) variants for big transports */
.btn.ring-green { border-color:#2ecb6c; color:#bfeecf;
  box-shadow: 0 0 16px rgba(46,203,108,.55), inset 0 0 10px rgba(46,203,108,.35); }
.btn.ring-orange { border-color:#ffab2e; color:#ffd9a1;
  box-shadow: 0 0 16px rgba(255,171,46,.5), inset 0 0 10px rgba(255,171,46,.3); }

/* big transport buttons */
.btn.transport {
  background:
    radial-gradient(circle at 35% 30%, #2b2d31, #191b1e 60%, #0e0f12);
  border: 2px solid #3c3f45;
  border-radius: 50%;
  color: #cfd3d8;
  font-size: 13px;
}

/* tiny leds */
.led {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #3a2020;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.7);
}
.led.on-red    { background:#ff4438; box-shadow: 0 0 8px rgba(255,68,56,.9); }
.led.on-green  { background:#3ce07a; box-shadow: 0 0 8px rgba(60,224,122,.9); }
.led.on-orange { background:#ffa62e; box-shadow: 0 0 8px rgba(255,166,46,.9); }

/* ---- performance pads ---- */
/* pads are dark rubber until the set gives them a reason to glow */
.pad {
  position: absolute;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.3)),
    #17181b;
  border: 1px solid rgba(0,0,0,.8);
  box-shadow:
    0 3px 5px rgba(0,0,0,.7),
    inset 0 1px 1px rgba(255,255,255,.09),
    inset 0 0 0 2px rgba(0,0,0,.3);        /* rubber keyline */
  transition: filter .16s ease-out, box-shadow .16s ease-out, background .3s;
}
.pad.lit {
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(0,0,0,.25)),
    var(--col, #333);
  filter: brightness(.55) saturate(.9);
  box-shadow:
    0 0 10px -3px var(--col),
    0 3px 5px rgba(0,0,0,.7),
    inset 0 1px 1px rgba(255,255,255,.18),
    inset 0 0 0 2px rgba(0,0,0,.25);
}
.pad.flash {
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(0,0,0,.25)),
    var(--col, #666);
  filter: brightness(1.3) saturate(1.1);
  box-shadow: 0 0 20px var(--col), 0 3px 5px rgba(0,0,0,.7), inset 0 1px 1px rgba(255,255,255,.35);
  transition: filter .03s, box-shadow .03s;
}

/* ---- faders ---- */
.fader-track {
  position: absolute;
  background: linear-gradient(90deg, #000, #17181b 45%, #000);
  border-radius: 3px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.05);
}
.fader-track.vert { width: 9px; }
.fader-track.horz { height: 9px;
  background: linear-gradient(180deg, #000, #17181b 45%, #000); }

.fader-handle {
  position: absolute;
  background: linear-gradient(180deg, #3d4046, #17181b 45%, #232529);
  border: 1px solid #0a0a0c;
  border-radius: 3px;
  box-shadow: 0 4px 8px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.25);
}
.fader-handle::after { /* white index line */
  content: ""; position: absolute; background: #e8eaee; border-radius: 1px;
}
.fader-handle.vert { width: 34px; height: 15px; margin-left: -17px; margin-top: -7.5px; }
.fader-handle.vert::after { left: 3px; right: 3px; top: 50%; height: 2px; margin-top: -1px; }
.fader-handle.horz { width: 15px; height: 34px; margin-left: -7.5px; margin-top: -17px; }
.fader-handle.horz::after { top: 3px; bottom: 3px; left: 50%; width: 2px; margin-left: -1px; }

.fader-ticks { position: absolute; pointer-events: none; }
.fader-ticks .tick { position: absolute; background: #4b4f55; }

/* --- prominent crossfader --- */
.xf-well {
  position: absolute;
  border-radius: 10px;
  background: linear-gradient(180deg, #060708, #0f1114 60%, #0a0b0d);
  border: 1px solid #292c31;
  box-shadow:
    inset 0 4px 12px rgba(0,0,0,.95),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 1px 0 rgba(255,255,255,.07);
}
.fader-track.horz.big { height: 13px; border-radius: 4px; }
.fader-handle.horz.big {
  width: 20px; height: 40px;
  margin-left: -10px; margin-top: -20px;
  border-radius: 4px;
  background: linear-gradient(180deg, #4a4e55, #1a1c1f 45%, #2b2d32);
  box-shadow: 0 5px 12px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.3);
}
.fader-handle.horz.big::after { width: 3px; }

/* loop pills: unlit amber face — glow comes only from the ghost DJ's lit() */
.btn.amber-face {
  background: linear-gradient(180deg, #35270f, #1d1508);
  border-color: #6b4a1a;
  color: #d9a75f;
  box-shadow: 0 2px 4px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,214,140,.12);
}

/* chassis screws */
.screw {
  position: absolute;
  width: 9px; height: 9px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5a5e66, #26282c 62%, #0b0c0e);
  box-shadow: 0 1px 1px rgba(255,255,255,.08), inset 0 -1px 2px rgba(0,0,0,.8);
}
.screw::after { /* slot */
  content: ""; position: absolute;
  left: 15%; right: 15%; top: 50%; height: 1.4px; margin-top: -0.7px;
  background: rgba(5,6,7,.9);
  transform: rotate(var(--slot, 40deg));
}

/* paused transport breathes */
@keyframes playBlink {
  0%, 100% { filter: brightness(.55); }
  50%      { filter: brightness(1.5); }
}
.btn.transport.blink { animation: playBlink 1.15s ease-in-out infinite; }

/* ---- VU meters ---- */
.meter-col { position: absolute; }
.meter-seg {
  position: absolute; left: 0; width: 100%; height: 7px;
  border-radius: 1.5px;
  background: #1c1f22;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.6);
}
/* unlit LEDs keep a faint tint of their zone color, like real hardware */
.meter-seg[data-c="g"] { background: #14231a; }
.meter-seg[data-c="o"] { background: #262015; }
.meter-seg[data-c="r"] { background: #271614; }
.meter-seg.on.g { background: #35d768; box-shadow: 0 0 6px rgba(53,215,104,.65); }
.meter-seg.on.o { background: #ffb02e; box-shadow: 0 0 6px rgba(255,176,46,.65); }
.meter-seg.on.r { background: #ff4438; box-shadow: 0 0 7px rgba(255,68,56,.8); }

/* ---- jog wheels ---- */
.jog {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #303236, #1a1c1f 55%, #0b0c0e 100%);
  box-shadow:
    0 14px 34px rgba(0,0,0,.8),
    inset 0 2px 2px rgba(255,255,255,.1),
    inset 0 -8px 18px rgba(0,0,0,.8);
}
.jog::before { /* studio-light catch on the top rim */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(90% 55% at 30% 8%, rgba(255,255,255,.09), transparent 45%);
  pointer-events: none;
  z-index: 2;
}
.jog .ridges {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(
    rgba(255,255,255,.06) 0deg 1.1deg,
    rgba(0,0,0,.32) 1.1deg 3.4deg);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 62%, #000 97%, transparent 98%);
          mask: radial-gradient(circle, transparent 61%, #000 62%, #000 97%, transparent 98%);
}
.jog .platter {
  position: absolute; inset: 13.5%;
  border-radius: 50%;
  border: 2px solid #34373d; /* polished rim between ridges and platter */
  background:
    radial-gradient(circle at 42% 34%, #26282c, #141518 58%, #08090b);
  box-shadow:
    inset 0 3px 9px rgba(0,0,0,.9),
    0 0 0 1px #0a0b0d,
    0 1px 0 rgba(255,255,255,.07);
}
.jog .sheen { /* rotates while "playing" */
  position: absolute; inset: 13.5%;
  border-radius: 50%;
  background: conic-gradient(rgba(255,255,255,.10), transparent 22%, transparent 55%, rgba(255,255,255,.05) 68%, transparent 80%);
  mix-blend-mode: screen;
}
.jog .disp {
  position: absolute; inset: 31%;
  border-radius: 50%;
  background: radial-gradient(circle at 46% 40%, #14161a, #08090b 75%);
  border: 3px solid #17181b;
  box-shadow: 0 0 0 2px #08090b, inset 0 0 18px rgba(0,0,0,.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
}
.jog .disp .ring {
  position: absolute; inset: 5%;
  border-radius: 50%;
  border: 3px solid #d1202a;
  box-shadow: 0 0 10px rgba(220,40,50,.55), inset 0 0 8px rgba(220,40,50,.35);
  opacity: .9;
}
.jog .disp .art {
  width: 44%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #3f8cff 0%, #1c3f8f 45%, #0c1730 100%);
  box-shadow: 0 0 12px rgba(63,140,255,.35);
  display: flex; align-items: center; justify-content: center;
  color: #eaf2ff; font-weight: 800; font-size: 15px; letter-spacing: .04em;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.jog .disp .t1 { color: #cfd6df; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.jog .disp .t2 { color: #6d7787; font-size: 7px; letter-spacing: .18em; }
.jog .orbit {
  position: absolute; inset: 31%;
  border-radius: 50%;
  transform: rotate(0deg);
  pointer-events: none;
}
.jog .orbit::before { /* position marker dot */
  content: ""; position: absolute;
  left: 50%; top: 2.5%;
  width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 7px rgba(255,255,255,.9);
}

/* ---- switches (tiny 3-pos slide) ---- */
.slide {
  position: absolute; transform: translate(-50%, -50%);
  background: #0c0d0f; border: 1px solid #2c2f34; border-radius: 3px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.8);
}
.slide .nub {
  position: absolute; top: 1px; bottom: 1px; width: 40%;
  background: linear-gradient(180deg,#4a4d53,#232529);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.2);
}

/* ---- USB slots ---- */
.usb {
  position: absolute; transform: translate(-50%, -50%);
  border-radius: 6px;
  background: linear-gradient(180deg, #1a1b1e, #0d0e10);
  border: 1px solid #313439;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.05);
}
.usb::before { /* slot */
  content: ""; position: absolute; left: 18%; right: 18%; top: 42%; height: 9px;
  background: #050607; border-radius: 2px;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.05);
}

/* ============ panoramic touchscreen ============ */
#screen-bezel {
  position: absolute;
  left: 26px; top: 28px; width: 1868px; height: 402px; /* full-width band */
  border-radius: 16px;
  background: linear-gradient(180deg, #17181b, #0a0b0d 70%);
  border: 1px solid #2b2d31;
  box-shadow:
    0 18px 40px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -4px 10px rgba(0,0,0,.75);
}
#screen-brand {
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  color: #83888f; font-size: 11px; font-weight: 800; letter-spacing: .34em;
}
#screen-sub {
  position: absolute; top: 9px; right: 20px;
  color: #4c5158; font-size: 8px; font-weight: 700; letter-spacing: .18em;
}
#screen {
  position: absolute; left: 104px; top: 28px;
  width: 1660px; height: 360px;
  border-radius: 5px;
  background: #05070b;
  box-shadow: 0 0 0 1px #000, 0 0 34px rgba(40,90,200,.16);
}

/* bezel wing vents */
.vent {
  position: absolute;
  width: 62px; height: 4px;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: linear-gradient(180deg, #050607, #101215);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.05);
}

/* ============ start overlay ============ */
#overlay {
  position: fixed; inset: 0; z-index: 50;
  background: radial-gradient(80% 70% at 50% 35%, rgba(10,14,24,.92), rgba(2,3,5,.98));
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s;
}
#overlay.hidden { opacity: 0; pointer-events: none; }

#overlay-card {
  width: min(560px, 92vw);
  text-align: center;
  color: #c8cdd4;
  padding: 28px 30px 22px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(20,23,30,.9), rgba(10,12,16,.9));
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
.ov-logo {
  font-size: 44px; font-weight: 900; letter-spacing: .18em;
  color: #f2f5f9; text-shadow: 0 0 30px rgba(80,140,255,.45);
}
.ov-model { margin-top: 2px; font-size: 11px; letter-spacing: .3em; color: #8b93a0; }
.ov-tag { margin: 14px 0 18px; font-size: 14px; color: #aab2bd; }

#btn-start {
  font: inherit; cursor: pointer;
  width: 100%;
  padding: 14px 18px;
  font-size: 15px; font-weight: 800; letter-spacing: .06em;
  color: #061224;
  background: linear-gradient(180deg, #63a8ff, #2f6fe0);
  border: 1px solid #9cc6ff; border-radius: 10px;
  box-shadow: 0 6px 24px rgba(60,130,255,.45), inset 0 1px 0 rgba(255,255,255,.5);
}
#btn-start:hover { filter: brightness(1.08); }
#btn-start:active { transform: translateY(1px); }

.ov-error {
  margin-top: 12px; padding: 10px 12px;
  font-size: 12.5px; text-align: left;
  color: #ffb4ad; background: rgba(120,20,12,.25);
  border: 1px solid rgba(255,90,70,.4); border-radius: 8px;
}
.ov-help {
  margin-top: 16px; text-align: left;
  font-size: 12.5px; line-height: 1.55; color: #99a1ac;
  border-top: 1px solid rgba(255,255,255,.07); padding-top: 14px;
}
.ov-help b { color: #ced4dc; }
.ov-help ol { margin: 6px 0 8px 20px; }
.ov-note { font-size: 11.5px; color: #7c8490; }
.ov-links { margin-top: 12px; }
.ov-links a { color: #6fa8ff; font-size: 12.5px; text-decoration: none; }
.ov-links a:hover { text-decoration: underline; }

/* ============ HUD ============ */
#hud {
  position: fixed; right: 14px; bottom: 12px; z-index: 40;
  display: flex; gap: 10px; align-items: center;
  opacity: .75; transition: opacity .4s;
}
body.hide-cursor #hud { opacity: 0; }
#hud-badge {
  color: #ffd27a; border: 1px solid rgba(255,176,58,.5);
  padding: 3px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  background: rgba(60,35,0,.4);
}
#btn-fs {
  font-size: 17px; line-height: 1;
  color: #cfd5dc; background: rgba(20,24,30,.75);
  border: 1px solid rgba(255,255,255,.15); border-radius: 8px;
  width: 38px; height: 34px; cursor: pointer;
}
#btn-fs:hover { background: rgba(40,48,60,.85); }