/* =============================================================================
   Kafle serwerów - "kaseta z kadrem"
   -----------------------------------------------------------------------------
   Kompozycja: pionowa kolumna z kadrem z gry po lewej stronie kafla (ok. 26%
   szerokości), treść po prawej na czystym tle karty. Grafika NIE jest tłem pod
   tekstem, więc adres serwera, status i liczba graczy trzymają pełny kontrast.
   Kolor gry został jako wąska krawędź przy kadrze - kadr niesie rozpoznanie,
   kolor niesie porządek.

   Arkusz ładuje się po redesign.css i celowo nadpisuje część reguł .gb-scard.
   ========================================================================== */

/* Slot jest kontenerem zapytań CSS: układ kafla liczy się od jego realnej
   szerokości, więc ten sam komponent działa w siatce 2- i 3-kolumnowej. */
.gb-scard-slot {
  display: flex;
  min-width: 0;
  container-type: inline-size;
  container-name: scard;
}
/* min-width: 0 jest konieczne: bez niego adres pisany bez zawijania rozpycha
   kafel ponad szerokość kolumny siatki i sekcja wychodzi poza ekran. */
.gb-scard-slot > .gb-scard { width: 100%; min-width: 0; }

/* ------------------------------------------------------------------ szkielet */
.gb-scard.has-art {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  /* z kontenerem: kolumna skaluje się z szerokością kafla */
  grid-template-columns: clamp(88px, 26cqi, 132px) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  min-height: 188px;
  overflow: hidden;
  border-left: 3px solid var(--srv, var(--gb-line2));
}

/* Poświata w rogu była substytutem grafiki. Kadr ją zastępuje, więc znika:
   dwa sygnały tożsamości naraz robiły z kafla bałagan. */
.gb-scard.has-art::before { content: none; }

/* -------------------------------------------------------------- kolumna z grą */
.gb-scard-art {
  position: relative;
  overflow: hidden;
  background: var(--gb-bg);
  /* delikatna krawędź oddzielająca kadr od treści, bez ostrej linii */
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .10);
}
.gb-scard-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  /* Ten sam czas i krzywa co wszystkie okładki w serwisie. */
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.gb-scard:hover .gb-scard-art img { transform: scale(1.06); }

/* Dwie funkcjonalne warstwy przyciemnienia:
   - od dołu, żeby nazwa gry miała mierzalny kontrast niezależnie od kadru,
   - przy krawędziach, żeby kadr wsiąkał w kafel zamiast być naklejką. */
.gb-scard-art::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(9, 10, 14, .94) 0%, rgba(9, 10, 14, .90) 14%, rgba(9, 10, 14, .55) 34%, rgba(9, 10, 14, 0) 62%),
    linear-gradient(to right, rgba(9, 10, 14, .40) 0%, rgba(9, 10, 14, 0) 30%, rgba(9, 10, 14, 0) 72%, rgba(9, 10, 14, .55) 100%);
}

/* Nazwa gry siedzi w najciemniejszym pasie kadru. */
.gb-scard-tag {
  position: absolute;
  left: 10px;
  right: 8px;
  bottom: 9px;
  z-index: 1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Kreska w kolorze gry nad nazwą: jedyny akcent kolorystyczny na kadrze. */
.gb-scard-tag::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  margin-bottom: 6px;
  border-radius: 1px;
  background: var(--srv, var(--gb-line2));
}

/* ----------------------------------------------------------------- treść kafla */
.gb-scard-main {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.gb-scard.has-art .gb-scard-main { padding: 15px 16px 16px; }

/* Adres zawsze na dole kafla, niezależnie od długości opisu: rząd kafli
   ma wtedy pola adresu w jednej linii. */
.gb-scard.has-art .gb-copy { margin-top: auto; }

.gb-scard.has-art .gb-scard-name { font-size: 16.5px; line-height: 1.25; }

/* Status jako plakietka: łatwiej go złapać wzrokiem niż sam tekst. */
.gb-scard.has-art .gb-scard-status {
  padding: 3px 8px 3px 7px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .06em;
  background: rgba(61, 220, 132, .10);
  border: 1px solid rgba(61, 220, 132, .34);
}
.gb-scard.has-art .gb-scard-status.is-off {
  color: var(--gb-muted);
  background: rgba(255, 255, 255, .05);
  border-color: var(--gb-line2);
}

.gb-scard.has-art .gb-scard-desc { line-height: 1.45; }
.gb-scard.has-art .gb-scard-map { letter-spacing: .01em; }

/* Adres skaluje się z szerokością kafla, ale nigdy nie schodzi poniżej 11,5 px
   ani nie przekracza 14 px - ma się mieścić w całości, bez wielokropka. */
.gb-scard.has-art .gb-copy .addr { font-size: 13px; }
@supports (width: 1cqi) {
  .gb-scard.has-art .gb-copy .addr { font-size: clamp(11.5px, 2.9cqi, 14px); }
}

/* --------------------------------------------------------------- wąskie kafle */
/* Poniżej ~420 px szerokości kafla adres dostaje własny wiersz, żeby zmieścił się
   w całości razem z przyciskiem kopiowania. */
@container scard (max-width: 420px) {
  .gb-scard.has-art .gb-copy { flex-wrap: wrap; row-gap: 2px; }
  .gb-scard.has-art .gb-copy .addr { flex: 1 0 100%; }
  .gb-scard.has-art .gb-copy .ic { margin-left: auto; }
  .gb-scard.has-art .gb-scard-name { font-size: 15.5px; }
  .gb-scard.has-art .gb-scard-main { padding: 13px 13px 14px; gap: 8px; }
  /* wąska kolumna: nazwa gry musi zmieścić się w całości, bez wielokropka */
  .gb-scard-tag { left: 8px; right: 6px; font-size: 10px; letter-spacing: .04em; }
  .gb-scard-tag::before { width: 16px; margin-bottom: 5px; }
}

/* Szeroki kafel (jedna kolumna na mobile albo pojedynczy kafel w rzędzie):
   kadr nie rozlewa się na pół karty, treść dostaje więcej powietrza. */
@container scard (min-width: 560px) {
  .gb-scard.has-art { grid-template-columns: 150px minmax(0, 1fr); min-height: 200px; }
  .gb-scard.has-art .gb-scard-main { padding: 17px 18px 18px; }
}

/* Kafel na całą szerokość kolumny (jedna kolumna kafli na stronie głównej):
   pionowa lista pól kończyła się w jednej trzeciej szerokości i reszta karty
   stała pusta. Powyżej 760 px treść rozkłada się na trzy strefy:
   opis serwera - frekwencja - adres. */
@container scard (min-width: 760px) {
  .gb-scard.has-art { grid-template-columns: 190px minmax(0, 1fr); min-height: 0; }

  .gb-scard.has-art .gb-scard-main {
    display: grid;
    /* Elastyczne strefy: przy kontenerze ~680 px sztywne 220+300 zostawiały opisowi
       67 px i tekst łamał się na sześć linii. */
    grid-template-columns: minmax(210px, 1fr) minmax(140px, 200px) minmax(190px, 280px);
    grid-template-areas:
      "top  bar  copy"
      "desc bar  copy"
      "map  bar  copy";
    align-content: center;
    column-gap: 28px;
    row-gap: 4px;
    padding: 16px 20px;
  }

  .gb-scard.has-art .gb-scard-top  { grid-area: top; }
  .gb-scard.has-art .gb-scard-desc { grid-area: desc; }
  .gb-scard.has-art .gb-scard-map  { grid-area: map; }

  /* Frekwencja pionowo: liczba nad paskiem czyta się lepiej niż obok niego. */
  .gb-scard.has-art .gb-bar {
    grid-area: bar;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 7px;
    margin-top: 0;
    align-self: center;
  }
  /* Tor paska musi dostać jawną wysokość: w kolumnie flex:1 rozwiązuje się do zera
     (to ten sam błąd, który już raz wygasił paski frekwencji). */
  .gb-scard.has-art .gb-bar-track { flex: none; height: 8px; }
  .gb-scard.has-art .gb-bar-num { text-align: right; }

  .gb-scard.has-art .gb-copy { grid-area: copy; align-self: center; margin-top: 0; }
  .gb-scard.has-art .gb-copy .addr { font-size: 13px; }

  /* Nazwa serwera i status trzymają się lewej krawędzi swojej strefy. */
  .gb-scard.has-art .gb-scard-top { justify-content: flex-start; gap: 10px; }
}

/* Awaryjnie, gdyby przeglądarka nie znała zapytań kontenerowych: przy wąskim
   oknie i tak zwężamy kolumnę z kadrem. */
@media (max-width: 700px) {
  .gb-scard.has-art { min-height: 176px; }
}

@media (prefers-reduced-motion: reduce) {
  .gb-scard-art img,
  .gb-scard:hover .gb-scard-art img { transform: none; transition: none; }
}