:root {
  --led-green: #39d353;
  --led-yellow: #f2c94c;
  --led-red: #ff4d4f;
  --led-off: rgba(255,255,255,.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050505;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: #eee;
  padding: 40px 0;
}

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

/* The actual photo, sized to its native aspect ratio so every
   percentage-based overlay below lines up with the artwork. */
.boombox-photo {
  position: relative;
  width: 900px;
  max-width: 94vw;
  aspect-ratio: 1536 / 1024;
  background-image: url("boombox.png");
  background-size: 100% 100%;
}

/* LED VU meter, laid over the printed FM/AM tuner scale.
   Split into separate L/R channel rows, each finely segmented like a
   late-80s/90s stereo LED bargraph. */
.vu-meter {
  position: absolute;
  left: 21.2%;
  top: 35.2%;
  width: 57.7%;
  height: 7%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 3px 4px;
  background: #14181a;
  border-radius: 2px;
}
.vu-row {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 1px;
}
.vu-row .led {
  flex: 1;
  border-radius: 1px;
  background: var(--led-off);
  transition: background-color .05s linear;
}
.vu-row .led.zone-green.lit { background: var(--led-green); }
.vu-row .led.zone-yellow.lit { background: var(--led-yellow); }
.vu-row .led.zone-red.lit { background: var(--led-red); }

/* Track info shown on the cassette's blank cream label */
.cassette-label-overlay {
  position: absolute;
  left: 39.7%;
  top: 63.2%;
  width: 18.8%;
  height: 3.4%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Courier New", monospace;
  color: #2a2015;
  pointer-events: none;
  overflow: hidden;
}
.cassette-title {
  font-size: 10px;
  font-weight: bold;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.cassette-artist {
  font-size: 8px;
  opacity: .75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Spinning reel graphics, placed exactly over the photo's cassette reels */
.reel-gfx {
  position: absolute;
  width: 2.75%;
  height: 4.15%;
  border-radius: 50%;
  background: repeating-conic-gradient(#141414 0deg 30deg, #3d3d3d 30deg 60deg);
  box-shadow: inset 0 0 0 2px #e9e6da;
  animation: spin 2.2s linear infinite;
  animation-play-state: paused;
}
.is-playing .reel-gfx { animation-play-state: running; }
.reel-left { left: 43.4%; top: 69.2%; }
.reel-right { left: 52.0%; top: 69.2%; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Transparent hit-areas over the row of 7 cassette-deck buttons */
.transport-overlay {
  position: absolute;
  left: 39.97%;
  top: 83.2%;
  width: 17.97%;
  height: 4.4%;
  display: flex;
}
.deck-btn-overlay {
  flex: 1;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.deck-btn-overlay svg {
  width: 55%;
  height: 55%;
  fill: rgba(25,25,25,.8);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.55));
}
.deck-btn-overlay:active svg { fill: rgba(0,0,0,.9); transform: translateY(1px); }
.deck-btn-overlay .icon-pause { display: none; }
.deck-btn-overlay.is-playing .icon-play { display: none; }
.deck-btn-overlay.is-playing .icon-pause { display: block; }
.deck-btn-overlay.deco { cursor: default; }
.deck-btn-overlay.deco:active svg { fill: rgba(25,25,25,.8); transform: none; }

/* Knob "sprites": each is a crop of the same photo covering exactly one
   printed knob (rim + pointer line included), clipped to a circle and
   rotated directly in response to dragging — since the pointer line is
   part of the rotated image itself, it tracks perfectly with no separate
   overlay needed. */
.knob-sprite {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  background-image: url("boombox.png");
  background-repeat: no-repeat;
  cursor: grab;
  touch-action: none;
}
.knob-sprite:active { cursor: grabbing; }

.volume-knob {
  left: 66.99%;
  top: 45.21%;
  width: 4.427%;
  height: 6.641%;
  background-size: 2258.8% 1505.9%;
  background-position: 70.09% 48.43%;
}

/* ---- Off-photo control panel ---- */
.control-panel {
  width: 420px;
  max-width: 94vw;
  background: #1d1e22;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,.4);
}

.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.tab-btn {
  flex: 1;
  padding: 8px;
  border-radius: 6px;
  border: none;
  background: #2a2b30;
  color: #b9b9be;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tab-btn.active { background: #2f7dd6; color: #fff; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.queue-now {
  padding: 8px 12px;
  font-size: 13px;
  color: #fff;
  background: rgba(47,125,214,.15);
  border-radius: 6px;
  margin-bottom: 8px;
}
.queue-now .q-label {
  font-size: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #7fb3ea;
  display: block;
  margin-bottom: 2px;
}

.search-row {
  display: flex;
  gap: 8px;
}
.search-row input {
  flex: 1;
  padding: 9px 12px;
  border-radius: 6px;
  border: none;
  background: #efefef;
  font-size: 14px;
}
.search-row button {
  padding: 9px 16px;
  border-radius: 6px;
  border: none;
  background: #2f7dd6;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

.results {
  margin-top: 10px;
  max-height: 220px;
  overflow-y: auto;
  background: rgba(255,255,255,.05);
  border-radius: 6px;
}
.result-item {
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.result-item:hover { background: rgba(255,255,255,.1); }
.result-item .r-info { min-width: 0; overflow: hidden; }
.result-item .r-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-item .r-artist { opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-item .r-queue-btn {
  flex: 0 0 auto;
  background: rgba(255,255,255,.1);
  border: none;
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.result-item .r-queue-btn:hover { background: #2f7dd6; }

.reconnect-btn {
  display: block;
  margin: 10px auto 0;
  padding: 10px 20px;
  border-radius: 20px;
  border: none;
  background: #1db954;
  color: white;
  font-weight: bold;
  cursor: pointer;
}
.reconnect-btn:hover { background: #1ed760; }

.login-screen { text-align: center; }
.login-screen button {
  margin-top: 16px;
  padding: 14px 26px;
  font-size: 15px;
  border-radius: 30px;
  border: none;
  background: #1db954;
  color: white;
  font-weight: bold;
  cursor: pointer;
}
.login-screen button:hover { background: #1ed760; }

.hint {
  text-align: center;
  font-size: 12px;
  color: #b9b9be;
  opacity: .8;
  margin-top: 10px;
}