:root{
  color-scheme: dark;
  --bg0:#02020a;
  --bg1:#05060b;

  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.66);
  --stroke:rgba(255,255,255,.10);

  --cyan:rgba(0,220,255,1);
  --pink:rgba(255,70,200,1);
  --violet:rgba(160,110,255,1);

  --panelTop: rgba(255,255,255,.05);
  --panelBot: rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }

body.ph-page{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  background:
    radial-gradient(1100px 700px at 50% 10%, rgba(160,110,255,.25), transparent 55%),
    radial-gradient(900px 600px at 20% 30%, rgba(0,200,255,.14), transparent 55%),
    radial-gradient(900px 600px at 80% 40%, rgba(255,70,200,.12), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg0) 60%, #010109);

  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

/* =========================================================
   MAIN DEVICE
========================================================= */
.boombox{
  width:min(1120px, 100%);
  border-radius:28px;
  border:1px solid var(--stroke);
  background:
    radial-gradient(900px 220px at 50% 0%, rgba(0,220,255,.10), transparent 60%),
    linear-gradient(180deg, var(--panelTop), var(--panelBot));
  box-shadow:
    0 40px 150px rgba(0,0,0,.72),
    0 0 0 1px rgba(255,255,255,.06) inset;
  overflow:hidden;
  position:relative;
}

/* top sheen */
.boombox::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(900px 300px at 50% -10%, rgba(0,220,255,.12), transparent 65%);
  pointer-events:none;
  opacity:.9;
}

/* floor glow reflection */
.boombox::after{
  content:"";
  position:absolute;
  left:7%;
  right:7%;
  bottom:-22px;
  height:46px;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,220,255,.35), rgba(255,70,200,.22), transparent 72%);
  filter: blur(10px);
  opacity:.95;
  pointer-events:none;
}

/* carry handle */
.bb-handle{
  position:absolute;
  left:50%;
  top:-26px;
  transform:translateX(-50%);
  width:520px;
  height:54px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.35));
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  pointer-events:none;
}
.bb-handle::after{
  content:"";
  position:absolute;
  inset:12px 22px;
  border-radius:999px;
  background: rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.10);
}

/* =========================================================
   BOOMBOX LAYOUT (speaker - center - speaker)
========================================================= */
.bb-body-boombox{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1.8fr 1fr;
  gap:16px;
  padding:22px;
}

.bb-left, .bb-right{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.bb-center{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* =========================================================
   BRAND STRIP
========================================================= */
.bb-brand-strip{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.24));
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.bb-logo{
  width:52px;
  height:52px;
  border-radius:14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 45%),
    linear-gradient(135deg, rgba(0,220,255,.65), rgba(255,70,200,.55));
  box-shadow: 0 10px 30px rgba(0,220,255,.16);
}

.bb-brand-text .bb-title{
  font-weight:1000;
  letter-spacing:.18em;
  font-size:12px;
}
.bb-brand-text .bb-sub{
  color:var(--muted);
  font-size:12px;
  margin-top:4px;
}

/* =========================================================
   TUNER
========================================================= */
.bb-tuner{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(700px 150px at 50% 0%, rgba(0,220,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(10,12,26,.92), rgba(0,0,0,.30));
  box-shadow: 0 12px 36px rgba(0,0,0,.40);
  padding:12px 14px;
  position:relative;
  overflow:hidden;
}

.tuner-scale{
  display:flex;
  justify-content:space-between;
  color:rgba(255,255,255,.55);
  font-size:11px;
  letter-spacing:.10em;
  font-weight:800;
}

.tuner-needle{
  margin-top:10px;
  height:3px;
  background: rgba(255,255,255,.10);
  border-radius:999px;
  position:relative;
  overflow:hidden;
}
.tuner-needle-bar{
  position:absolute;
  top:-10px;
  left:50%;
  width:3px;
  height:26px;
  border-radius:3px;
  background: linear-gradient(180deg, var(--pink), var(--cyan));
  box-shadow: 0 0 18px rgba(0,220,255,.35);
  transform: translateX(-50%);
}

.tuner-label{
  display:flex;
  justify-content:space-between;
  margin-top:10px;
  font-weight:1000;
  letter-spacing:.08em;
  font-size:12px;
}
.bb-station{ color: rgba(0,220,255,.95); }
.bb-freq{ color: rgba(255,70,200,.95); }

/* =========================================================
   DECK / DISPLAY
========================================================= */
.bb-now-label{
  font-size:10px;
  letter-spacing:.22em;
  color:rgba(255,255,255,.62);
  font-weight:900;
}

.bb-deck{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(800px 220px at 50% 0%, rgba(255,70,200,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.35));
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  padding:14px;
}

.deck-window{
  border-radius:16px;
  padding:12px 12px;
  background:
    radial-gradient(600px 160px at 50% 0%, rgba(0,220,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(5,7,16,.85), rgba(0,0,0,.55));
  border:1px solid rgba(255,255,255,.12);
}

.deck-title{
  font-size:22px;
  font-weight:1000;
  letter-spacing:.01em;
  text-shadow: 0 0 18px rgba(0,220,255,.14);
  margin-top:6px;
}
.deck-artist{
  color:rgba(255,255,255,.70);
  font-size:13px;
  margin-top:4px;
}

/* hardware button row */
.deck-buttons{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:12px;
}

.hw-btn{
  width:56px;
  height:42px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.30));
  color:rgba(255,255,255,.9);
  cursor:pointer;
  transition: transform .08s ease, filter .2s ease;
  box-shadow:
    0 8px 18px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.05) inset;
}
.hw-btn:hover{ filter: brightness(1.07); }
.hw-btn:active{ transform: translateY(1px) scale(.99); }

.hw-btn-play{
  width:84px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), transparent 45%),
    linear-gradient(135deg, rgba(0,220,255,.30), rgba(255,70,200,.22));
  box-shadow: 0 14px 40px rgba(0,220,255,.14);
}

/* =========================================================
   KNOBS + CONTROLS
========================================================= */
.bb-bottom{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.knobs{
  display:flex;
  gap:14px;
  flex:1;
  flex-wrap:wrap;
}

.knob-block{ min-width:240px; }

.knob-cap{
  font-size:10px;
  letter-spacing:.22em;
  color:rgba(255,255,255,.65);
  margin-bottom:6px;
  font-weight:900;
}

.slider{
  width:100%;
  accent-color: white;
}

/* dial */
.dial{
  width:92px; height:92px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.10), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.22));
  position:relative;
  cursor:grab;
  touch-action:none;
  box-shadow:
    inset 0 0 0 10px rgba(0,0,0,.28),
    0 14px 30px rgba(0,0,0,.35);
  transition: transform .18s ease;
}
.dial:active{ cursor:grabbing; }

.dial-ring{
  position:absolute;
  inset:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: radial-gradient(circle at 50% 50%, rgba(0,220,255,.08), transparent 60%);
  pointer-events:none;
}

.dial-tickmarks{
  position:absolute;
  inset:14px;
  border-radius:999px;
  background:
    repeating-conic-gradient(
      rgba(255,255,255,.14) 0 2deg,
      transparent 2deg 10deg
    );
  mask: radial-gradient(circle at 50% 50%, transparent 55%, #000 58%);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 55%, #000 58%);
  opacity:.55;
  pointer-events:none;
}

.dial-pointer{
  position:absolute;
  width:4px; height:40px;
  left:50%; top:10px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--pink), var(--cyan));
  border-radius:999px;
  filter: drop-shadow(0 6px 10px rgba(0,220,255,.25));
}

.dial-glow{
  position:absolute; inset:-10px;
  border-radius:999px;
  background: radial-gradient(circle at 50% 50%, rgba(0,220,255,.22), transparent 60%);
  opacity:0;
  transition: opacity .2s ease;
  pointer-events:none;
}
.dial.tuning .dial-glow{ opacity:.95; }

/* select */
.genre-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width:220px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(8,10,18,.85);
  color:var(--text);
  padding:10px 12px;
  margin-top:10px;
}


/* Dark dropdown menu (prevents white popup on native <select>) */
select option,
select optgroup,
.genre-select option,
.genre-select optgroup{
  background-color:#0b1020;
  color:rgba(255,255,255,.92);
}


/* submit button */
.btn{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color:var(--text);
  padding:10px 14px;
  border-radius:16px;
  text-decoration:none;
  cursor:pointer;
  transition: transform .08s ease, filter .2s ease, background .2s ease;
  user-select:none;
}
.btn:hover{ filter: brightness(1.08); }
.btn:active{ transform: translateY(1px) scale(.99); }

.bb-link{
  margin-left:auto;
  background:
    linear-gradient(135deg, rgba(0,220,255,.22), rgba(255,70,200,.18));
  box-shadow: 0 10px 28px rgba(0,200,255,.10);
}

/* =========================================================
   SPEAKERS (NEON LED RINGS)
========================================================= */
.bb-speaker{
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.45));
  box-shadow:
    0 18px 50px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04) inset;
  padding:18px;
  position:relative;
  overflow:hidden;
}

/* rainbow LED ring */
.bb-speaker::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:999px;
  background:
    conic-gradient(
      rgba(255,50,120,1),
      rgba(255,160,50,1),
      rgba(255,240,80,1),
      rgba(80,255,160,1),
      rgba(0,220,255,1),
      rgba(120,120,255,1),
      rgba(255,70,200,1),
      rgba(255,50,120,1)
    );
  opacity:.95;
  mask: radial-gradient(circle at 50% 50%, transparent 58%, #000 63%);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 58%, #000 63%);
  pointer-events:none;
  box-shadow: 0 0 34px rgba(0,220,255,.10);
}

.speaker{
  /* keep compatibility with JS pulse class */
  position:relative;
}
.cone{
  width:100%;
  aspect-ratio:1/1;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(circle at 50% 55%, rgba(0,0,0,.75), transparent 62%),
    radial-gradient(circle at 50% 50%, rgba(0,220,255,.06), transparent 55%);
  transform: scale(1);
  transition: transform 80ms linear;
  position:relative;
  z-index:1;
}
.speaker.pulse .cone{ transform: scale(1.02); }

.grill{
  position:absolute;
  inset:14px;
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), transparent 55%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.05) 0 2px, transparent 2px 10px);
  opacity:.38;
  pointer-events:none;
  z-index:2;
}

/* screws */
.screws{
  position:absolute;
  inset:10px;
  pointer-events:none;
  z-index:3;
}
.screws::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 4% 6%, rgba(255,255,255,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 96% 6%, rgba(255,255,255,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 4% 94%, rgba(255,255,255,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 96% 94%, rgba(255,255,255,.35) 0 2px, transparent 3px);
  opacity:.55;
}

/* =========================================================
   VU METERS (LED)
========================================================= */
.bb-vu{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

.vu-bar{
  width:10px;
  height:60px;
  border-radius:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  position:relative;
  --level: 10;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}
.vu-bar::before{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height: calc(var(--level) * 1%);
  background: linear-gradient(180deg, var(--pink), var(--cyan));
  box-shadow: 0 0 16px rgba(0,220,255,.15);
  transition: height 120ms linear;
}

/* =========================================================
   QUEUE PANEL
========================================================= */
.bb-queue{
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.30));
}

.queue-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  background: rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.queue-title{
  font-weight:1000;
  letter-spacing:.16em;
  font-size:12px;
}

.queue-genre{
  font-size:12px;
  color:rgba(0,220,255,.92);
  font-weight:900;
}

.queue-list{
  max-height:320px;
  overflow:auto;
}

.queue-item{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.queue-item:last-child{ border-bottom:none; }

.q-main{ min-width:0; }

.q-title{
  font-weight:950;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.q-artist{
  color:rgba(255,255,255,.65);
  font-size:12px;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.q-badge{
  font-size:11px;
  border:1px solid rgba(255,255,255,.14);
  padding:6px 10px;
  border-radius:999px;
  color:rgba(255,255,255,.82);
  height:fit-content;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 980px){
  .bb-body-boombox{
    grid-template-columns: 1fr;
    padding:18px;
  }
  .bb-handle{ width:340px; }
  .knob-block{ min-width: 220px; }
}

/* =========================================================
   ADD-ON: TWEETERS + BIGGER SPEAKERS + CENTER EQUALIZER
   Paste at BOTTOM of radio.css
========================================================= */

/* Give side columns more room (bigger speakers) */
.bb-body-boombox{
  grid-template-columns: 1.25fr 1.8fr 1.25fr;
  gap:18px;
}

/* Make speaker tiles larger and more “hardware” */
.bb-speaker{
  padding:22px;
  min-height: 320px;
}
.bb-speaker::before{
  inset:14px; /* tighter LED ring = thicker look */
}

/* Tweeters (appear above each main speaker) */
.bb-tweeters{
  display:flex;
  gap:12px;
  width:100%;
  padding:6px 4px 0;
  margin-bottom:12px;
}
.tweeter{
  flex:1;
  height:72px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 56%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.05) 0 2px, transparent 2px 10px),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.32));
  box-shadow: 0 14px 30px rgba(0,0,0,.40);
}

/* Center equalizer block (below deck) */
.bb-eq{
  height:78px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(640px 140px at 50% 0%, rgba(0,220,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.33));
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  padding:12px 14px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}

.eq-bar{
  flex:1;
  max-width:10px;
  height:100%;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  position:relative;
  overflow:hidden;
  --level: 12;
}
.eq-bar::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: calc(var(--level) * 1%);
  background: linear-gradient(180deg, rgba(255,70,200,1), rgba(0,220,255,1));
  box-shadow: 0 0 18px rgba(0,220,255,.18);
  transition: height 90ms linear;
}

/* Hide old right-side VU if it still exists anywhere */
.bb-vu{ display:none !important; }

/* Responsive */
@media (max-width: 980px){
  .bb-body-boombox{ grid-template-columns: 1fr; }
  .bb-tweeters{ margin-bottom:10px; }
  .bb-speaker{ min-height: 280px; }
}

/* =========================================================
   6-CELL LAYOUT ADD-ON (Top row unchanged, Up Next in bottom-middle)
========================================================= */
.ph-bottom-row{
  display:grid;
  grid-template-columns: 1fr 1.8fr 1fr;
  gap:16px;
  padding:0 22px 22px;
  align-items:stretch;
}
.ph-cell{ min-width:0; }

/* Fix UP NEXT height so page doesn't resize; list scrolls inside */
.ph-upnext-fixed{
  height: clamp(220px, 28vh, 360px);
  display:flex;
  flex-direction:column;
}
.ph-upnext-fixed{ overflow:hidden; }
.ph-upnext-fixed .queue-list{
  max-height:none;
  overflow:auto;
  flex:1;
  min-height:0;
}

/* Make queue panel itself flex so header stays pinned */
.bb-queue{
  display:flex;
  flex-direction:column;
}
.bb-queue .queue-head{ flex: 0 0 auto; }
.bb-queue .queue-list{ flex: 1 1 auto; min-height:0; }

/* Responsive: bottom row collapses to single column */
@media (max-width: 980px){
  .ph-bottom-row{
    grid-template-columns: 1fr;
    padding:0 18px 18px;
  }
}