:root{
  --bg:#0b0d12;
  --text:#e9eefc;
  --muted:#a9b3cc;
  --accent:#22e6c3;
  --line:rgba(255,255,255,.12);
  --panel: rgba(0,0,0,.48);
}

html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.jukebox{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.jukebox-frame{
  width:min(1100px, 96vw);
  aspect-ratio: 16/9;
  background: url("../assets/jukebox.png") center / contain no-repeat;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.55));
}

/* UI overlay inside the frame */
.ui{
  position:absolute;
  width:min(1100px, 96vw);
  aspect-ratio: 16/9;
  box-sizing:border-box;

  /* Ajusta esto si quieres más grande/pequeño el “panel” */
  padding: 120px 240px 140px 240px;

  display:flex;
  flex-direction:column;
  gap:10px;
}

.ui::before{
  content:"";
  position:absolute;
  left:240px; right:240px; top:120px; bottom:140px;
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  z-index:0;
}
.ui > *{ position:relative; z-index:1; }

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
}
.chip-label{
  font-size:12px;
  letter-spacing:.12em;
  opacity:.8;
}

select{
  height:34px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: var(--text);
  padding: 0 10px;
}

.btn{
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 14px;
  height:40px;
  padding:0 12px;
  cursor:pointer;
}
.btn:hover{ background: rgba(255,255,255,.09); }

.btn.icon{
  width:48px;
  padding:0;
  display:grid;
  place-items:center;
}
.btn.icon svg{
  width:22px; height:22px;
}
.btn.primary{
  border-color: color-mix(in oklab, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 2px rgba(34,230,195,.12) inset;
}

.btn.random{
  font-weight:800;
  letter-spacing:.08em;
}

.now{
  margin-top:2px;
}
.now-title{
  font-size:18px;
  font-weight:800;
  line-height:1.2;
}
.now-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.muted{ color: var(--muted); }
.dot{ opacity:.6; }

.controls{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  margin:6px 0 2px;
}

.list{
  margin:0;
  padding:0;
  list-style:none;
  overflow:auto;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  flex:1;
}
.list li{
  display:grid;
  grid-template-columns: 1.2fr 1fr 70px;
  gap:10px;
  padding:10px 8px;
  border-bottom:1px solid rgba(255,255,255,.06);
  cursor:pointer;
}
.list li:hover{ background: rgba(255,255,255,.05); }
.list .k{ text-align:right; opacity:.9; }

.status{
  font-size:12px;
  margin-top:6px;
  opacity:.9;
}

audio{ width:100%; height:0; opacity:0; }

/* Mobile tweaks */
@media (max-width: 900px){
  .ui{ padding: 90px 110px 100px 110px; }
  .ui::before{ left:110px; right:110px; top:90px; bottom:100px; }
  .list li{ grid-template-columns: 1fr; }
  .list .k{ text-align:left; }
}
:root{
  --gold: #d8b35a;
  --cream:#f4e7c7;
  --vintage-panel: rgba(22, 14, 6, .60);
}

/* panel más cálido */
.ui::before{
  background: var(--vintage-panel);
  border-color: rgba(216,179,90,.45);
  box-shadow:
    0 0 0 2px rgba(216,179,90,.12) inset,
    0 18px 40px rgba(0,0,0,.45);
}

/* tipografías/tono más retro */
.now-title{
  letter-spacing:.04em;
  text-transform: uppercase;
}
.chip{
  border-color: rgba(216,179,90,.35);
}
.btn.primary{
  border-color: rgba(216,179,90,.55);
  box-shadow: 0 0 0 2px rgba(216,179,90,.12) inset;
}
.btn.random{
  color: var(--cream);
  border-color: rgba(216,179,90,.55);
}
/* --- Retrofonic Jukebox: panel sizing + inner padding (drop-in) --- */

/* Make the visible panel smaller inside the jukebox frame */
.ui{
  /* Adjust these 4 numbers to resize the panel:
     top | right | bottom | left */
  padding: 150px 290px 190px 290px;
}

/* The translucent “screen” background */
.ui::before{
  left:290px; right:290px; top:150px; bottom:190px;
  border-radius: 16px;
}

/* Real inner padding so text isn't glued to the border */
.ui-inner{
  height: 100%;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding: 14px 16px 12px;
  box-sizing:border-box;
}

/* Give the playlist breathing room */
.list{
  border-radius: 12px;
  padding: 6px 0;
}
.list li{
  padding: 12px 14px;
}

/* Mobile tuning */
@media (max-width: 900px){
  .ui{ padding: 115px 155px 135px 155px; }
  .ui::before{ left:155px; right:155px; top:115px; bottom:135px; }
  .ui-inner{ padding: 12px 12px 10px; }
}