/* aoslist.css — the Ace of Spades servers tab (js/aoslist.js). The rows are
   Browse games' rows (.room in lobby.css) with the total ping where the score
   was. */

.sec .relaytag {
  font: 600 10px/1 system-ui; letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-3); white-space: nowrap; cursor: help;
}
.sec .relaytag b { color: var(--txt-2); font-weight: 700; }

.rowhead.aos [data-asort] { cursor: pointer; }
.rowhead.aos [data-asort]:hover { color: var(--txt-2); }
.rowhead.aos [data-asort].on { color: var(--brass); }
.rowhead.aos [data-asort].on::after { content: ' ▾'; }

div.room.aos { cursor: default; }
.room.aos.quiet .nm { color: var(--txt-2); }
.room.aos .thumb.blank {
  display: block; background:
    repeating-linear-gradient(135deg, #0d1216 0 6px, #111920 6px 12px);
}
.room.aos .split .o { background: var(--brass); }
.room.aos .ping { font: italic 600 15px/1 'DIN'; color: var(--txt-2); white-space: nowrap; }
.room.aos .ping small { font-size: 10px; color: var(--txt-3); font-style: normal; }
.room.aos .ping.near { color: var(--green); }
.room.aos .ping.mid { color: var(--brass); }
.room.aos .ping.far { color: var(--danger); }
.room.aos .ping.none { color: var(--txt-3); }
.room.aos .go.soon { color: var(--txt-3); background: none; border-style: dashed; }
.room.aos:hover .go.soon { background: none; color: var(--txt-3); border-color: var(--line-2); }

@media (max-width: 760px) {
  .room.aos { grid-template-columns: 1fr auto; grid-template-areas: 'who go' 'pl ping'; }
  .room.aos .ping { grid-area: ping; justify-self: end; }
  /* The search and Refresh go under the heading rather than off the screen. */
  #view-aos .sec { flex-wrap: wrap; row-gap: 10px; }
  #view-aos .sec .act { flex: 1 1 100%; }
  #view-aos .sec .searchbox { flex: 1; min-width: 0; }
}