.public-rank-card,.start-jukebox{
  width:min(280px,100%);
  flex:0 1 260px;
  min-width:0;
  max-height:none;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  padding:.85rem .9rem .95rem;
  border:1px solid rgba(0,245,255,.28);
  border-radius:18px;
  background:rgba(4,6,16,.72);
  box-sizing:border-box;
}
.public-rank-kicker,.jb-kicker{
  font-size:.58rem;
  letter-spacing:.18em;
  color:#ff4de3;
}
.public-rank-card h2,.start-jukebox h2{
  margin:0;
  font-size:.92rem;
  letter-spacing:.12em;
  color:#00f5ff;
}
.public-rank-cols{
  display:grid;
  grid-template-columns:1.4rem minmax(0,1fr) auto;
  gap:.4rem;
  font-size:.58rem;
  letter-spacing:.14em;
  color:rgba(255,255,255,.45);
}
.public-rank-card{
  max-height:none;
  align-self:stretch;
  height:auto;
}
.public-rank-list{
  list-style:none;
  margin:0;
  padding:0;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:.35rem;
  flex:1;
  min-height:0;
}
.public-rank-list li{
  display:grid;
  grid-template-columns:1.4rem minmax(0,1fr) auto;
  gap:.4rem;
  align-items:center;
  font-size:.72rem;
}
.public-rank-list .rank-pts{
  color:#ffe14a;
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  white-space:nowrap;
}
.public-rank-empty{opacity:.55}
.jb-now{
  min-height:1.2em;
  color:#fff;
  font-size:.78rem;
}
.jb-controls{
  display:flex;
  gap:.4rem;
}
.jb-controls button,.start-jukebox button[data-i]{
  appearance:none;
  border:1px solid rgba(0,245,255,.35);
  background:rgba(0,245,255,.08);
  color:#e8fbff;
  border-radius:999px;
  padding:.35rem .7rem;
  cursor:pointer;
  font:inherit;
  letter-spacing:.08em;
}
#jukebox-list{
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:.28rem;
  min-height:0;
  flex:1;
}
#jukebox-list button{
  display:grid;
  grid-template-columns:1.8rem minmax(0,1fr);
  gap:.35rem;
  text-align:left;
  border-radius:10px;
  width:100%;
}
#jukebox-list button.on{
  border-color:#ffe14a;
  color:#ffe14a;
}
.jb-n{opacity:.55}
.start-layout{
  display:grid;
  grid-template-columns:minmax(240px,320px) minmax(280px,420px) minmax(240px,300px);
  align-items:stretch;
  justify-content:center;
}
.public-rank-card,
.start-jukebox{
  height:0;
  min-height:100%;
  overflow:hidden;
}
@media (max-width:820px){
  .start-layout{display:flex;flex-direction:column;align-items:center}
  .public-rank-card,.start-jukebox{height:auto;min-height:0;max-height:42dvh;width:100%;flex:1 1 100%}
}