:root {
  --green: #7dffab;
  --green-dim: #2f8f5a;
  --amber: #ffc46b;
  --amber-dim: #9a6f2e;
  --screen: #04120a;
  --text: #c9ffe0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #030608;
  color: var(--text);
  font-family: "Share Tech Mono", ui-monospace, monospace;
}

body {
  overflow: hidden;
  padding-top: var(--menuh, 0px);
}

/* CRT overlay — sits over the scene, under the desk/action bar */
.crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03), transparent 70%);
  mix-blend-mode: multiply;
  animation: flicker 4s infinite steps(60);
}

@keyframes flicker {
  0%, 100% { opacity: 0.85; }
  92% { opacity: 0.85; }
  93% { opacity: 0.7; }
  94% { opacity: 0.85; }
  97% { opacity: 0.78; }
}

/* The scene is the app: full-viewport 8-bit night rail, drawn by GR.Train */
#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* --- slim operator strip (power + desk toggle) -------------------------------
     floats just below the moon (the scene draws it at 78vw / 18vh), so the
     foreground (track, train, foreground trees) stays fully visible. It anchors
     LEFT; the player panel sits below it, also left, clear of the desk (right). */
.action-bar {
  position: fixed;
  top: calc(18vh + 5vmin);
  left: 8vw;
  right: auto;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(8px, 1.4vw, 16px);
  padding: clamp(6px, 1vh, 10px) clamp(10px, 1.6vw, 18px);
  background: linear-gradient(180deg, rgba(10, 20, 16, 0.9), rgba(6, 14, 10, 0.92));
  border: 1px solid #1e4a30;
  border-radius: 12px;
  box-shadow: 0 0 24px rgba(60, 220, 140, 0.12), inset 0 0 24px rgba(0, 0, 0, 0.5);
}

.action-bar .power {
  font-family: inherit;
  font-size: clamp(12px, 1.4vw, 18px);
  letter-spacing: 2px;
  padding: clamp(8px, 1vh, 12px) clamp(14px, 1.8vw, 22px);
  border-radius: 8px;
  border: 1px solid var(--amber-dim);
  background: rgba(255, 196, 107, 0.05);
  color: var(--amber);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.action-bar .power:hover { background: rgba(255, 196, 107, 0.12); }

.action-bar .power.on {
  border-color: var(--amber);
  background: rgba(255, 196, 107, 0.18);
  box-shadow: 0 0 14px rgba(255, 196, 107, 0.35);
  animation: pulse 2.2s infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255,196,107,0.3); }
  50% { box-shadow: 0 0 18px rgba(255,196,107,0.55); }
}

/* the player panel: now playing + judging, fixed on the LEFT (below the action
   strip) so it never overlaps the desk panel on the top-right. */
.np-progress {
  position: fixed;
  left: 8vw;
  top: calc(18vh + 5vmin + 13vmin);
  z-index: 6;
  width: clamp(300px, 32vw, 460px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(8px, 1.2vh, 14px);
  padding: clamp(10px, 1.6vh, 18px);
  background: linear-gradient(180deg, rgba(10, 20, 16, 0.9), rgba(6, 14, 10, 0.92));
  border: 1px solid #1e4a30;
  border-radius: 12px;
  box-shadow: 0 0 24px rgba(60, 220, 140, 0.12), inset 0 0 24px rgba(0, 0, 0, 0.5);
}

.np-progress[hidden] { display: none; }

.np-progress .np-progress-track {
  flex: 1 0 100%;
  min-width: 48px;
  height: clamp(5px, 0.8vh, 8px);
  background: rgba(125, 255, 171, 0.15);
  border-radius: 3px;
  overflow: hidden;
}

.np-progress .np-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--amber), var(--green));
  border-radius: 3px;
  transition: width 0.25s linear;
}

.np-progress .np-progress-meta {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(10px, 1.1vw, 15px);
  color: var(--green-dim);
  letter-spacing: 0.5px;
}

.np-verdict {
  font-size: clamp(10px, 1.1vw, 15px);
  letter-spacing: 1px;
  white-space: nowrap;
  color: var(--green-dim);
}
.np-verdict.keep { color: var(--amber); }
.np-verdict.drop { color: #ff8a8a; }

.song-btn {
  font-family: inherit;
  font-size: clamp(10px, 1vw, 14px);
  letter-spacing: 1px;
  padding: clamp(4px, 0.6vh, 8px) clamp(10px, 1.2vw, 16px);
  border-radius: 6px;
  border: 1px solid rgba(125, 255, 171, 0.3);
  background: rgba(255, 255, 255, 0.03);
  color: var(--green);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.song-btn:hover { border-color: var(--green); background: rgba(125, 255, 171, 0.1); }

.song-btn.keep { color: var(--amber); border-color: rgba(255, 196, 107, 0.3); }
.song-btn.keep:hover { border-color: var(--amber); background: rgba(255, 196, 107, 0.1); }

.song-btn.drop { color: #ff8a8a; border-color: rgba(255, 138, 138, 0.3); }
.song-btn.drop:hover { border-color: #ff8a8a; background: rgba(255, 138, 138, 0.1); }

.desk-btn {
  font-family: inherit;
  font-size: clamp(11px, 1.2vw, 16px);
  letter-spacing: 2px;
  padding: clamp(6px, 0.9vh, 10px) clamp(12px, 1.6vw, 20px);
  border-radius: 8px;
  border: 1px solid rgba(125, 255, 171, 0.25);
  background: rgba(255, 255, 255, 0.03);
  color: var(--green-dim);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.desk-btn:hover { border-color: var(--green); color: var(--green); }

.desk-btn.open { border-color: var(--green); color: var(--green); background: rgba(125, 255, 171, 0.1); }

.desk-btn.on {
  border-color: var(--green);
  color: var(--green);
  background: rgba(125, 255, 171, 0.1);
  box-shadow: 0 0 10px rgba(125, 255, 171, 0.25);
}

/* --- the operator desk: floating panel, hidden by default -------------------- */
.desk {
  position: fixed;
  right: clamp(8px, 2vw, 24px);
  top: clamp(8px, 2vh, 24px);
  z-index: 8;
  width: clamp(300px, 30vw, 460px);
  max-height: calc(100dvh - clamp(8px, 2vh, 24px) * 2);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 18px);
  padding: clamp(12px, 1.8vh, 22px);
  background: linear-gradient(160deg, rgba(16, 34, 24, 0.95) 0%, rgba(9, 18, 14, 0.96) 60%, rgba(12, 26, 17, 0.95) 100%);
  border: 1px solid #1e4a30;
  border-radius: 14px;
  box-shadow: 0 0 0 1px #050a07, 0 0 32px rgba(60, 220, 140, 0.15), inset 0 0 40px rgba(0, 0, 0, 0.6);
}

.desk[hidden] { display: none; }

.desk::-webkit-scrollbar { width: 6px; }
.desk::-webkit-scrollbar-thumb { background: #1e4a30; border-radius: 3px; }

.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(125, 255, 171, 0.15);
  border-radius: 12px;
}

.brand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: clamp(8px, 1vh, 14px);
  border-bottom: 1px dashed #1e4a30;
}

.callsign {
  font-family: "VT323", monospace;
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1;
  letter-spacing: 4px;
  color: var(--green);
  text-shadow: 0 0 12px rgba(125, 255, 171, 0.6);
}

.slogan {
  font-size: clamp(10px, 1vw, 14px);
  color: var(--green-dim);
  letter-spacing: 1px;
}

/* now-playing text lives in the desk (the scene shows it diegetically) */
.np-hidden { display: none; }

.np-label {
  font-size: clamp(10px, 1.1vw, 15px);
  letter-spacing: 3px;
  color: var(--amber-dim);
}

.controls { display: flex; }

.side {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 14px);
  flex: 1;
}

.band-switch {
  display: flex;
  gap: clamp(6px, 0.8vh, 10px);
}

.band-btn {
  flex: 1;
  font-family: inherit;
  font-size: clamp(11px, 1.2vw, 16px);
  letter-spacing: 3px;
  padding: clamp(6px, 0.9vh, 12px) 0;
  border-radius: 8px;
  border: 1px solid rgba(125, 255, 171, 0.2);
  background: rgba(255, 255, 255, 0.03);
  color: var(--green-dim);
  cursor: pointer;
  transition: all 0.15s;
}

.band-btn:hover { border-color: rgba(125, 255, 171, 0.5); }

.band-btn.active {
  border-color: var(--green);
  color: var(--green);
  background: rgba(125, 255, 171, 0.1);
  box-shadow: 0 0 12px rgba(125, 255, 171, 0.25);
  text-shadow: 0 0 8px rgba(125, 255, 171, 0.6);
}

.station-list {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.9vh, 12px);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.station-list::-webkit-scrollbar { width: 6px; }
.station-list::-webkit-scrollbar-thumb { background: #1e4a30; border-radius: 3px; }

.station-btn {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  text-align: left;
  font-family: inherit;
  font-size: clamp(12px, 1.3vw, 17px);
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(125, 255, 171, 0.2);
  border-radius: 8px;
  padding: clamp(8px, 1vh, 14px) clamp(10px, 1.2vw, 18px);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.station-btn:hover { border-color: rgba(125, 255, 171, 0.5); }

.station-btn.active {
  border-color: var(--green);
  background: rgba(125, 255, 171, 0.08);
  box-shadow: 0 0 14px rgba(125, 255, 171, 0.25);
}

.station-btn .dot {
  width: clamp(8px, 0.8vw, 12px);
  height: clamp(8px, 0.8vw, 12px);
  border-radius: 50%;
  background: var(--green-dim);
  flex: 0 0 auto;
}

.station-btn.active .dot { background: var(--green); box-shadow: 0 0 8px var(--green); }

.station-btn .sub {
  margin-left: auto;
  font-size: clamp(9px, 0.9vw, 12px);
  color: var(--green-dim);
}

.misc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 1.2vw, 16px);
}

.vol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: clamp(10px, 1vw, 14px);
  letter-spacing: 2px;
  color: var(--green-dim);
}

.vol input[type="range"] {
  width: clamp(100px, 14vw, 200px);
  accent-color: var(--green);
}

.studio { flex: 0 0 auto; }

.studio-head {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  flex-wrap: wrap;
}

.review-status {
  font-size: clamp(10px, 1.1vw, 15px);
  color: var(--amber);
  letter-spacing: 1px;
}

.studio-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.studio-actions .song-btn { font-size: clamp(9px, 0.8vw, 13px); padding: clamp(3px, 0.4vh, 6px) clamp(8px, 1vw, 14px); }

.reason-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  z-index: 50;
}

.reason-modal[hidden] { display: none; }

.reason-card {
  width: clamp(320px, 40vw, 520px);
  padding: clamp(16px, 2vh, 28px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vh, 18px);
}

.reason-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.reason-title {
  font-size: clamp(12px, 1.3vw, 18px);
  letter-spacing: 3px;
  color: #ff8a8a;
}

.reason-sub {
  font-size: clamp(13px, 1.5vw, 20px);
  color: var(--text);
}

.reason-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.reason-grid .song-btn {
  text-align: left;
  font-size: clamp(10px, 1vw, 14px);
  letter-spacing: 1px;
}

.reason-custom {
  display: flex;
  gap: 8px;
  align-items: center;
}

.reason-input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: clamp(12px, 1.4vw, 18px);
  padding: clamp(6px, 0.8vh, 12px) clamp(8px, 1vw, 14px);
  border-radius: 6px;
  border: 1px solid rgba(125, 255, 171, 0.25);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  outline: none;
}

.reason-input:focus { border-color: var(--green); }

.footer {
  flex: 0 0 auto;
  padding-top: clamp(6px, 0.8vh, 10px);
  border-top: 1px dashed #1e4a30;
  display: flex;
  justify-content: space-between;
  font-size: clamp(9px, 0.9vw, 13px);
  color: var(--green-dim);
  letter-spacing: 1px;
}

#powerState { color: var(--amber-dim); }
body.powered #powerState { color: var(--amber); text-shadow: 0 0 8px rgba(255,196,107,0.5); }

/* Tablets: keep the operator strip under the moon but compact so every control
   stays inside the green box (the player panel tucks in on the left). */
@media (min-width: 701px) and (max-width: 1100px) {
  .action-bar {
    left: 4vw;
    gap: clamp(6px, 1vw, 10px);
    padding: clamp(6px, 0.9vh, 9px) clamp(8px, 1.2vw, 12px);
  }
  .action-bar .power {
    font-size: clamp(11px, 1.4vw, 14px);
    padding: clamp(6px, 1vh, 9px) clamp(10px, 1.6vw, 16px);
  }
  .action-bar .desk-btn {
    font-size: clamp(10px, 1.2vw, 13px);
    padding: clamp(5px, 0.8vh, 8px) clamp(9px, 1.4vw, 14px);
  }
  .np-progress {
    left: 4vw;
    top: calc(18vh + 5vmin + 13vmin);
    width: clamp(280px, 38vw, 420px);
  }
  .np-progress .song-btn {
    font-size: clamp(9px, 1vw, 12px);
    padding: clamp(3px, 0.5vh, 6px) clamp(7px, 1vw, 12px);
  }
  .np-progress .np-progress-track { min-width: 36px; }
}

/* Small screens: the desk becomes a bottom sheet, the player + action bar wrap */
@media (max-width: 700px) {
  .desk {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: 8px;
    width: auto;
    max-height: min(70dvh, calc(100dvh - 120px));
  }
  .action-bar {
    left: 8px;
    right: 8px;
    top: calc(18vh + 36px);
    justify-content: center;
    flex-wrap: wrap;
  }
  .np-progress {
    left: 8px;
    right: 8px;
    width: auto;
    top: calc(18vh + 36px + 12vmin);
    justify-content: center;
  }
  .np-progress-meta { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}