/* Przeglądarka serwerów: ciemne drewno, mosiężne okucia i stała przewijana lista. */
.server-browser {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  width: min(1200px, 100%); height: min(760px, calc(100vh - 64px)); min-height: 300px;
  padding: 25px 28px 23px; color: #eadbc0;
  border: 3px solid #a9844d; border-radius: 8px;
  background: linear-gradient(90deg, #1c110c45, transparent 12%, transparent 88%, #130d0a55),
    repeating-linear-gradient(90deg, #ffffff04 0 2px, transparent 2px 132px, #10090625 135px 139px),
    linear-gradient(160deg, #493020f7, #281a14f9 65%, #1c1712fa);
  box-shadow: 0 0 0 2px #17110b, 0 12px 0 #090e0bd9, 0 22px 45px #000a, inset 0 0 0 2px #e7ca7c24;
}
.server-browser::before, .server-browser::after {
  content: '◆'; position: absolute; top: 7px; color: #d4b675; font-size: 10px; text-shadow: 0 1px #17110b;
}
.server-browser::before { left: 10px; }
.server-browser::after { right: 10px; }
.server-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 0 20px; border-bottom: 1px solid #977440; }
.server-heading { display: flex; align-items: center; gap: 14px; min-width: 0; }
.server-emblem { display: grid; place-items: center; flex: none; width: 38px; height: 38px; color: #f4d483; border: 2px solid #b69658; background: #261c15; transform: rotate(45deg); box-shadow: inset 0 0 0 2px #755735, 0 2px 5px #0008; }
.server-title { margin: 0; color: #f8e6b9; font: bold clamp(22px, 2.5vw, 32px)/1.1 Georgia, serif; text-shadow: 0 2px #110c09; }
.server-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.server-back, .server-refresh { flex: none; }
.server-refresh { width: 46px; padding: 0; font: bold 28px/1 Georgia, serif; }
.server-toolbar { display: flex; align-items: center; padding: 14px 0; }
.server-count { color: #c4b18a; font-size: 13px; font-weight: 700; white-space: nowrap; flex: 1; }
.server-list-frame { display: flex; flex-direction: column; flex: 1; min-height: 0; border: 2px solid #735433; border-radius: 5px; overflow: hidden; background: #141710db; box-shadow: inset 0 2px 12px #0009, 0 1px #d3af6725; }
.server-columns, .server-room { display: grid; grid-template-columns: minmax(150px, 1.35fr) minmax(130px, 1fr) minmax(145px, 1.15fr) 72px 75px 98px; align-items: center; gap: 14px; }
.server-columns { flex: none; padding: 11px 18px; color: #cdb48a; background: linear-gradient(#493323, #302318); border-bottom: 2px solid #80613c; font: bold 12px Georgia, serif; letter-spacing: .6px; }
.server-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; scrollbar-color: #987342 #241a13; scrollbar-width: thin; }
.server-list::-webkit-scrollbar { width: 13px; }
.server-list::-webkit-scrollbar-track { background: #241a13; border-left: 1px solid #60462e; }
.server-list::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #725331, #b18a4e, #755531); border: 2px solid #241a13; border-radius: 7px; }
.server-list::-webkit-scrollbar-thumb:hover { background: #d0ac68; }
.server-list:focus-visible { outline: 2px solid #e8c679; outline-offset: -3px; }
.server-room { min-height: 76px; padding: 10px 18px; border-bottom: 1px solid #6d54304f; background: linear-gradient(90deg, #3c2c1b88, #201e17a8); }
.server-room:nth-child(even) { background: linear-gradient(90deg, #34271999, #1a1d16b8); }
.server-room:hover { background: linear-gradient(90deg, #6a4b2bb8, #303122c7); }
.server-name { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.server-name b { color: #f7e9c8; font: bold 16px Georgia, serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-name .server-members { color: #bca987; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-stage { color: #dfcdae; font-size: 13px; }
.server-stage::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #9b8e73; }
.server-stage.in-lobby::before { background: #7cda96; box-shadow: 0 0 7px #7cda96a0; }
.server-stage.in-game::before { background: #edb25e; box-shadow: 0 0 7px #edb25e80; }
.server-map, .server-players, .server-ping { font-size: 13px; color: #d5c6ab; }
.server-players, .server-ping { font-variant-numeric: tabular-nums; white-space: nowrap; }
.server-enter { width: 100%; }
.server-enter:disabled { opacity: 1; color: #82796c; border-color: #51483b; background: #292720; box-shadow: none; }
.server-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; height: 100%; color: #b6a88d; }
.server-empty-mark { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 9px; color: #b99b62; border: 1px solid #79623e; transform: rotate(45deg); }
.server-empty p { margin: 10px; }
.server-error { margin: 8px 0 0; min-height: 0; }
.server-error:empty { display: none; }
@media (max-width: 850px) {
  .server-browser { height: calc(100vh - 32px); padding: 18px; }
  .server-columns { display: none; }
  .server-room { grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px 12px; }
  .server-name { grid-column: 1; grid-row: 1 / 3; }
  .server-stage { grid-column: 2; grid-row: 1; }
  .server-map { grid-column: 1; grid-row: 3; }
  .server-players { grid-column: 2; grid-row: 2; }
  .server-ping { grid-column: 2; grid-row: 3; justify-self: end; }
  .server-enter { grid-column: 3; grid-row: 1 / 4; width: auto; }
}
@media (max-width: 460px) {
  .server-browser { padding: 13px; }
  .server-header { gap: 8px; padding-bottom: 13px; }
  .server-heading { gap: 10px; }
  .server-emblem { width: 28px; height: 28px; font-size: 11px; }
  .server-actions { gap: 6px; }
  .server-toolbar { padding: 12px 0; }
  .server-room { padding: 10px; gap: 6px; }
  .server-stage, .server-map, .server-players, .server-ping { font-size: 12px; }
}