*{box-sizing:border-box}body{margin:0;background:#1b120b;color:#f2dfaa;font-family:Arial,sans-serif;background-image:radial-gradient(#3b2819 1px,transparent 1px);background-size:8px 8px}.jukebox-shell{width:min(820px,100%);margin:auto;min-height:100vh;padding:18px;background:repeating-linear-gradient(92deg,#4b2111 0,#7d3b1d 4px,#4a1e0e 9px,#8c4927 13px,#38150a 18px);box-shadow:0 0 50px #000}.wood-top{height:20px;border:4px ridge #9b6745;border-radius:16px 16px 0 0}.juke-head{position:relative;text-align:center;background:#171717;border:7px ridge #9b6745;padding:18px 12px 13px;overflow:hidden}.grille,.diamond-grille{position:absolute;inset:0;pointer-events:none;opacity:.25;background:linear-gradient(60deg,transparent 46%,#ddd 47%,#ddd 49%,transparent 50%),linear-gradient(-60deg,transparent 46%,#ddd 47%,#ddd 49%,transparent 50%);background-size:70px 110px}.juke-badge{display:inline-block;padding:3px 13px;border:1px solid #b99a52;border-radius:20px;color:#d8bd6e;font:700 12px Georgia;letter-spacing:.16em}.juke-head h1{position:relative;margin:7px 0 0;color:#e9ca73;font:900 clamp(34px,8vw,60px) Georgia;text-shadow:0 3px #4a1a08}.juke-head p{position:relative;margin:4px}.control-panel{background:#191713;border:5px ridge #8b6842;padding:15px;margin-top:10px}.control-panel label{display:block;color:#d7b65c;font:900 12px Arial;letter-spacing:.12em;margin-bottom:7px}.search-row{display:grid;grid-template-columns:1fr 44px;gap:7px}.search-row input{min-width:0;background:#070707;color:#ff3b2e;border:2px inset #7c6b50;padding:13px;font:700 18px "Courier New";box-shadow:inset 0 0 12px #a00}.search-row button{border-radius:50%;background:#c8201b;color:#fff;border:4px outset #c98f6b;font-weight:900}.filter-row{display:grid;grid-template-columns:1fr 1fr auto;gap:7px;margin-top:10px}.filter-row select{background:#e6cf91;border:3px outset #c5a766;padding:8px;font-weight:800}.green-button{background:#008b61;color:#fff;border:4px outset #75d3b4;border-radius:22px;padding:7px 13px;font-weight:900;cursor:pointer}.result-status{text-align:center;background:#090909;color:#ff392d;font:700 13px "Courier New";padding:8px;border:2px inset #655}.title-window{position:relative;background:#0c0c0c;border:8px ridge #82583b;margin-top:10px;padding:22px 18px;min-height:360px}.diamond-grille{z-index:3;opacity:.12}.juke-results{position:relative;z-index:2;display:grid;gap:12px}.title-strip{position:relative;background:linear-gradient(#fff7d7,#ead9a7);color:#17120c;border:2px solid #aa8d54;box-shadow:0 3px 8px #0009,inset 0 0 16px #b9974b44;padding:10px 15px 9px 105px;min-height:84px;transform:rotate(var(--tilt));font-family:Georgia,serif}.title-strip:before,.title-strip:after{content:"";position:absolute;left:0;right:0;border-top:1px solid #c6aa6b}.title-strip:before{top:25px}.title-strip:after{bottom:23px}.selection-code{position:absolute;left:9px;top:13px;width:84px;text-align:center;white-space:nowrap;overflow:hidden;background:#b42119;color:#fff;border:2px solid #71100b;padding:8px 3px;font:900 17px "Courier New";letter-spacing:-.04em;box-shadow:2px 2px #d8bd7d}.selection-code.long-code{font-size:14px;letter-spacing:-.08em}.song-artist{font:900 13px Arial;letter-spacing:.06em;text-transform:uppercase;color:#9b1d16}.song-title{font:900 18px Georgia;margin:4px 0}.song-tags{font:700 10px Arial;color:#625233}.tag{display:inline-block;border:1px solid #9d885b;padding:2px 5px;margin:2px 3px 0 0;cursor:pointer}.more-artist{float:right;border:0;background:none;color:#8c1914;text-decoration:underline;font-weight:800;cursor:pointer}.empty{text-align:center;color:#ddd;padding:50px 10px;font:700 18px "Courier New"}.juke-instruction{text-align:center;background:#16130f;border:2px solid #aa864c;padding:10px;font-weight:900}.juke-small{text-align:center;font-size:11px;color:#bda97b}@media(max-width:600px){.jukebox-shell{padding:8px}.filter-row{grid-template-columns:1fr 1fr}.green-button{grid-column:1/-1}.title-window{padding:14px 9px}.title-strip{padding-left:96px}.selection-code{width:76px;font-size:15px}.selection-code.long-code{font-size:12px}.song-title{font-size:16px}}
/* === Mobile selection-code readability fix === */
.selection-code{
  width:92px;
  min-width:92px;
  padding:8px 4px;
  font-size:16px;
  line-height:1.05;
  letter-spacing:0;
  overflow:visible;
  box-sizing:border-box;
}
.selection-code.long-code{
  font-size:15px;
  letter-spacing:0;
}
.title-strip{
  padding-left:116px;
}
@media(max-width:600px){
  .title-strip{
    padding-left:112px;
    min-height:88px;
  }
  .selection-code,
  .selection-code.long-code{
    left:9px;
    width:90px;
    min-width:90px;
    padding:9px 3px;
    font-size:15px;
    line-height:1;
    letter-spacing:-0.02em;
    overflow:hidden;
    text-overflow:clip;
  }
  .song-artist{
    padding-right:0;
    overflow:hidden;
  }
  .more-artist{
    float:none;
    display:block;
    margin-top:3px;
    text-align:left;
    white-space:nowrap;
  }
}

.az-label{margin:12px 0 5px;color:#d7b65c;font:900 11px Arial;letter-spacing:.12em}.artist-az{display:flex;flex-wrap:wrap;gap:4px}.artist-az button{min-width:26px;background:#e6cf91;color:#17120c;border:2px outset #c5a766;padding:4px 5px;font-weight:900;cursor:pointer}.artist-az button.active{background:#b42119;color:#fff}.filter-row{grid-template-columns:1fr 1fr 1fr auto}.deep-link{float:right;border:1px solid #9d885b;background:#f4e6bd;color:#8c1914;font:800 9px Arial;padding:2px 5px;cursor:pointer}@media(max-width:700px){.filter-row{grid-template-columns:1fr 1fr}.filter-row .green-button{grid-column:1/-1}.artist-az button{min-width:29px}}
.accuracy-policy{margin:22px auto 8px;max-width:720px;padding:13px 16px;border:2px solid #b99a4b;background:#15110b;color:#e9d99d;text-align:center;font:700 12px/1.55 Arial;letter-spacing:.02em}.accuracy-policy strong{color:#fff;font-size:13px}.accuracy-policy b{color:#ffdf67}.accuracy-policy span{font-size:10px;color:#bfae7a}

/* FINAL JUKEBOX CONTROL-ROW FIX
   Keep PLAY SOMETHING inside the cabinet at desktop/tablet widths,
   while allowing the controls to wrap cleanly on smaller screens. */
.jb-filters,
.jukebox-filters,
.filter-row,
.filters-row {
  min-width: 0;
}

.jb-filters > *,
.jukebox-filters > *,
.filter-row > *,
.filters-row > * {
  min-width: 0;
}

#randomBtn,
.random-btn,
.play-something,
[data-action="random"] {
  flex: 0 0 auto !important;
  max-width: 190px;
  white-space: normal;
  box-sizing: border-box;
}

@media (min-width: 760px) {
  .jb-filters,
  .jukebox-filters,
  .filter-row,
  .filters-row {
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 10px;
    align-items: stretch;
    box-sizing: border-box;
    flex-wrap: nowrap;
  }

  .jb-filters select,
  .jukebox-filters select,
  .filter-row select,
  .filters-row select {
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .jb-filters select:nth-of-type(1),
  .jukebox-filters select:nth-of-type(1),
  .filter-row select:nth-of-type(1),
  .filters-row select:nth-of-type(1) {
    flex: 0 1 175px;
  }

  .jb-filters select:nth-of-type(2),
  .jukebox-filters select:nth-of-type(2),
  .filter-row select:nth-of-type(2),
  .filters-row select:nth-of-type(2) {
    flex: 0 1 205px;
  }

  .jb-filters select:nth-of-type(3),
  .jukebox-filters select:nth-of-type(3),
  .filter-row select:nth-of-type(3),
  .filters-row select:nth-of-type(3) {
    flex: 1 1 260px;
    width: auto !important;
  }
}

@media (max-width: 759px) {
  .jb-filters,
  .jukebox-filters,
  .filter-row,
  .filters-row {
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
  }

  #randomBtn,
  .random-btn,
  .play-something,
  [data-action="random"] {
    max-width: 100%;
  }
}


/* Live random button selector */
#random-track {
  flex: 0 0 180px !important;
  width: 180px !important;
  max-width: 180px !important;
  white-space: normal;
  box-sizing: border-box;
}

@media (max-width: 759px) {
  #random-track {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
