/* RuffRush V21.22 — Compact arena + three always-visible mode buttons.
   Loaded after orientation and agent-trophy styles to prevent regressions. */
#lobby main>.map-select{
  display:grid!important;
  grid-template-columns:minmax(125px,180px) minmax(0,1fr)!important;
  grid-template-rows:auto!important;
  grid-template-areas:none!important;
  align-items:center;
  column-gap:10px;
  row-gap:4px;
  min-width:0;
  min-height:61px;
  padding:6px 11px;
}
#lobby main>.map-select>div:first-child{min-width:0;max-width:180px;grid-area:auto!important}
#lobby .map-select label[for="mapChoice"]{
  display:block;margin:0 0 3px;font-size:9px;line-height:1.15;letter-spacing:.45px;
}
#lobby .map-select #mapChoice{
  display:block;width:100%;min-width:0;min-height:33px;
  padding:5px 7px;font-size:11px;
}
/* The square map thumbnail was using up a game-mode button's space. */
#lobby main>.map-select>#mapPreview{display:none!important}
#lobby main>.map-select>.mode-select{
  min-width:0;min-height:0;grid-area:auto!important;
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  overflow:visible!important;
  margin:0!important;
  padding:0!important;
}
#lobby .map-select .mode-select>small{
  display:block;margin:0 0 3px;line-height:1.05;
  font-size:9px;letter-spacing:.5px;color:#ffe790;
}
#lobby .map-select .mode-buttons{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:6px!important;
  margin:0!important;
  min-width:0;
  overflow:visible!important;
}
#lobby .map-select .mode-buttons button{
  display:flex!important;justify-content:center;align-items:center;
  min-width:0;width:100%;min-height:38px!important;
  margin:0;padding:5px 5px!important;gap:5px;
  text-align:center;font-size:14px!important;line-height:1;
  border-radius:10px;
}
#lobby .map-select .mode-buttons button span{
  display:block;min-width:0;max-width:100%;
  font-size:clamp(9px,1vw,12px)!important;
  font-weight:900;line-height:1.12;
  white-space:normal;overflow-wrap:normal;
}
#lobby .map-select .mode-buttons button span>small{display:none!important}
#lobby .map-select #botDifficultyLabel{
  flex:0 0 auto;margin:3px 0 0!important;
  font-size:8px;line-height:1.3;
}
#lobby .map-select #botDifficulty{
  display:inline-block;width:auto;max-width:55%;min-height:26px;
  margin:0 0 0 6px;padding:2px 6px;
  border:1px solid #aa9dff;border-radius:8px;
  background:#241c72;color:white;font-size:10px;
}
/* Right panel now contains Agenten + Start; no mode scroll there. */
#lobby .playdeck>.launch{z-index:1}
@media (min-width:801px) and (max-height:570px){
  #lobby main>.map-select{padding:4px 8px;min-height:52px;gap:6px}
  #lobby .map-select #mapChoice{min-height:29px;padding:3px 6px}
  #lobby .map-select .mode-buttons button{min-height:32px!important;padding:4px!important}
  #lobby .map-select .mode-select>small{font-size:8px;margin-bottom:2px}
}
@media (max-width:800px){
  #lobby main>.map-select{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    row-gap:6px;
    padding:7px;
  }
  #lobby main>.map-select>div:first-child{max-width:none}
  #lobby .map-select label[for="mapChoice"]{font-size:8px}
  #lobby .map-select #mapChoice{min-height:29px}
  #lobby .map-select .mode-select>small{font-size:8px}
  #lobby .map-select .mode-buttons button{
    min-height:35px!important;padding:4px 2px!important;
    gap:2px;font-size:11px!important;
  }
  #lobby .map-select .mode-buttons button span{font-size:9px!important}
}
@media(max-width:450px){
  #lobby .map-select .mode-buttons{gap:4px!important}
  #lobby .map-select .mode-buttons button span{font-size:8px!important}
}