/* ===== GLOBAL RESET ===== */
html, body {
  margin: 0;
  padding: 0;
  width: 710px;
  height: 450px;
  overflow: hidden;
  background: #000;
}

/* Center the player on screen */
body {
  margin: 0;
  padding: 0;
  width: 710px;
  height: 450px;
  overflow: hidden;
  background: #000;
}
}

/* ===== PLAYER CONTAINER ===== */
#player {
  position: relative;
  width: 710px;   /* FINAL SIZE */
  height: 450px;  /* FINAL SIZE */
  overflow: hidden;
}

/* ===== FACEPLATE ===== */
#faceplate {
  position: absolute;
  top: 0;
  left: 0;
  width: 710px;
  height: 450px;
  background-image: url('FacePlate.png');
  background-size: 710px 450px;
  background-repeat: no-repeat;
}

/* ===== GENERIC CONTROL CLASS ===== */
.control {
  position: absolute;
  user-select: none;
  pointer-events: auto;
}

/* ===== BUTTONS ===== */
.btn {
  width: 64px;
  height: 64px;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}

/* Individual button images */
#btnPlay {
  background-image: url('Play.png');
}

#btnVolUp {
  background-image: url('Volume-Up.png');
}

#btnVolDown {
  background-image: url('Volume-Down.png');
}

#btnGainUp {
  background-image: url('Gain-Up.png');
}

#btnGainDown {
  background-image: url('Gain-Down.png');
}

#btnLoudness {
  background-image: url('Loudness.png');
}

#btnBassBoost {
  background-image: url('Bass-Boost.png');
}

#btnStereoMono {
  background-image: url('Stereo-Mono.png');
}

/* ===== STAGING POSITIONS FOR BUTTONS ===== */

#btnPlay {
  left: 10px;
  top: 9px;
  height: 65px;
  width: 135px; 
}

#btnVolUp {
  height: 65px;
  width: 195px;
  left: 250px;
  top: 165px;
}

#btnVolDown {
  height: 65px;
  width: 200px;
  left: 250px;
  top: 232px;
}

#btnGainUp {
  left: 190px;
  top: 285px;
  height: 85px;
  width: 125px; 
}

#btnGainDown {
  height: 105px;
  width: 135px; 
  left: 420px;
  top: 292px;
}

#btnLoudness {
  height: 85px;
  width: 125px; 
  left: 10px;
  top: 105px;
}

#btnBassBoost {
  height: 95px;
  width: 125px; 
  left: 575px;
  top: 105px;
}

#btnStereoMono {
  height: 95px;
  width: 125px; 
  left: 575px;
  top: 25px;
}

/* ===== SLIDER GRAPHICS ===== */

.slider-graphic {
  position: absolute;
  width: 45px;     /* real PNG width */
  height: 65px;   /* real PNG height */
  pointer-events: auto;
  user-select: none;
  cursor: grab;
  z-index: 5;
}

/* Slider positions (left/right only; top is neutral 315px) */
#slider1  { left: 1px;   top: 315px; }
#slider2  { left: 31px;  top: 315px; }
#slider3  { left: 61px;  top: 315px; }
#slider4  { left: 94px;  top: 315px; }
#slider5  { left: 130px; top: 315px; }
#slider6  { left: 544px; top: 315px; }
#slider7  { left: 577px; top: 315px; }
#slider8  { left: 608px; top: 315px; }
#slider9  { left: 638px; top: 315px; }
#slider10 { left: 665px; top: 315px; }

/* ===== READOUT TEXT ===== */
#readout {
  position: absolute;
  top: 35px;
  left: 210px;
  width: 240px;
  height: 30px;
  color: #0ff;
  font-family: monospace;
  font-size: 18px;
  text-align: center;
  line-height: 30px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #0ff;
  border-radius: 4px;
  pointer-events: none;
}