/* ============================================================
   DEAD PROTOTYPE — MASTER STYLESHEET
   Cleaned, corrected, and free of old project identifiers
   ============================================================ */

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

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

/* ===== 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('');
  background-size: 710px 450px;
  background-repeat: no-repeat;
  opacity: 0%;
}

/* ===== 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.gif'); }
#btnVolUp      { background-image: url('Volume-Up.gif'); }
#btnVolDown    { background-image: url('Volume-Down.gif'); }
#btnGainUp     { background-image: url('Gain-Up.gif'); }
#btnGainDown   { background-image: url('Gain-Down.gif'); }
#btnLoudness   { background-image: url('Loudness.gif'); }
#btnBassBoost  { background-image: url('Bass-Boost.gif'); }
#btnStereoMono { background-image: url('Stereo-Mono.gif'); }

/* ===== STAGING POSITIONS FOR BUTTONS ===== */
#btnPlay      { left: 25px;  top: 14px;  height: 65px; width: 135px; }
#btnVolUp     { left: 250px; top: 180px; height: 65px; width: 195px; }
#btnVolDown   { left: 250px; top: 237px; height: 65px; width: 200px; }
#btnGainUp    { left: 190px; top: 293px; height: 85px; width: 125px; }
#btnGainDown  { left: 400px; top: 292px; height: 105px; width: 135px; }
#btnLoudness  { left: 20px;  top: 125px; height: 85px; width: 125px; }
#btnBassBoost { left: 570px; top: 140px; height: 95px; width: 125px; }
#btnStereoMono{ left: 575px; top: 25px;  height: 95px; width: 125px; }

/* ===== SLIDER GRAPHICS ===== */
.slider-graphic {
  position: absolute;
  width: 30px;     /* legacy PNG width */
  height: 55px;    /* legacy PNG height */
  pointer-events: auto;
  user-select: none;
  cursor: grab;
  z-index: 5;
}

/* Slider positions (left/right only; top is neutral 315px) */
#slider1  { left: 4px;   top: 315px; }
#slider2  { left: 35px;  top: 315px; }
#slider3  { left: 67px;  top: 315px; }
#slider4  { left: 98px;  top: 315px; }
#slider5  { left: 134px; top: 315px; }
#slider6  { left: 548px; top: 315px; height: 55px; width: 35px;}
#slider7  { left: 581px; top: 315px; }
#slider8  { left: 612px; top: 315px; }
#slider9  { left: 642px; top: 315px; }
#slider10 { left: 671px; top: 315px; }

/* ===== READOUT TEXT ===== */
#readout {
  position: absolute;
  top: 35px;
  left: 210px;
  width: 240px;
  height: 30px;
  color: grey;
  font-family: gabriola;
  font-size: 18px;
  text-align: center;
  line-height: 30px;
  background: transparent;
  border: 1px solid grey;
  border-radius: 4px;
  pointer-events: none;
}