/* MakerLand – Fenster „Server wählen“ (js/server.js) im Look der Konzeptzeichnung „Spielstand wählen“:
   links die Liste mit Nummern, rechts Startbild, Name und Status des gewählten Servers. */

.ico[data-ico="server"] { background-image: url(menue/icons/welt.png); }

#server-wahl { background: rgba(7, 16, 31, .55); z-index: 63; }
.sw-karte { box-sizing: border-box; width: min(900px, 100%); max-height: calc(100dvh - 70px); margin-top: 40px; display: flex; flex-direction: column; }
.sw-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; min-height: 0; overflow-y: auto; padding: 4px; }

.sw-zeile { min-height: 64px; }
.sw-nr {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 2px solid var(--ml-rand); border-radius: 4px; background: var(--ml-tief); color: var(--ml-text);
  font: 700 24px/1 var(--ml-pixel);
}
.sw-zeile[aria-selected="true"] .sw-nr { background: var(--ml-gelb); color: var(--ml-tief); border-color: var(--ml-tief); }
.sw-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sw-text b, .sw-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-text small { font-size: 18px; font-weight: 400; opacity: .85; }

.sw-neu { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 10px; border-top: 2px solid rgba(91, 143, 214, .35); }
.sw-neu-titel { margin: 0; font: 700 21px/1 var(--ml-pixel); color: var(--ml-gelb); }
.sw-neu input {
  background: var(--ml-tief); color: var(--ml-text); border: 2px solid var(--ml-rand); border-radius: 4px;
  font: 500 20px/1.2 var(--ml-pixel); padding: 8px 10px;
}
.sw-neu input:focus { outline: none; border-color: var(--ml-gelb); }
.sw-neu-fehler { margin: 0; min-height: 1em; color: #ff9b8a; font: 500 18px/1.2 var(--ml-pixel); }

.sw-vorschau { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 2px solid var(--ml-rand); border-radius: 4px; background: rgba(7, 16, 31, .45); }
.sw-vorschau img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 2px solid var(--ml-tief); border-radius: 3px; background: #1d3a6b; }
.sw-vorschau p { margin: 0; }
.sw-name { font: 700 26px/1.1 var(--ml-pixel); color: var(--ml-text); overflow-wrap: anywhere; }
.sw-adresse { font: 500 19px/1.2 var(--ml-pixel); color: var(--ml-leise); overflow-wrap: anywhere; }
.sw-status { font: 500 20px/1.2 var(--ml-pixel); color: var(--ml-leise); }
.sw-status[data-status="laeuft"] { color: #8fe28f; }
.sw-status[data-status="aus"], .sw-status[data-status="fremd"] { color: #ff9b8a; }
.sw-status::before { content: "● "; }
.sw-vorschau .ml-leiste { justify-content: center; }


@media (max-width: 700px) {
  #server-wahl { padding: 8px; align-items: stretch; }
  .sw-karte { width: 100%; max-height: none; height: calc(100% - 48px); margin-top: 48px; }
  .sw-spalten { grid-template-columns: minmax(0, 1fr); }
  .sw-vorschau { order: -1; }
  .sw-vorschau img { aspect-ratio: 21 / 9; }
}