/* ============================================================
     RESET & ZMIENNE
     ============================================================ */
  :root {
    --bg-0: #070b14;
    --bg-1: #0d1322;
    --bg-2: #141b2e;
    --bg-3: #1b2438;
    --border: #1f2a42;
    --border-light: #2b3854;
    --accent: #22d3ee;
    --accent-dim: #0e7490;
    --accent-glow: rgba(34, 211, 238, 0.15);
    --orange: #f59e0b;
    --green: #10b981;
    --red: #ef4444;
    --text-0: #f1f5f9;
    --text-1: #cbd5e1;
    --text-2: #94a3b8;
    --text-3: #64748b;
    --radius: 12px;
    --radius-sm: 7px;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html, body {
    background: var(--bg-0);
    color: var(--text-0);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
  }

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(circle at 15% 10%, rgba(34,211,238,0.06), transparent 40%),
      radial-gradient(circle at 85% 90%, rgba(14,116,144,0.05), transparent 40%);
    pointer-events: none;
    z-index: 0;
  }

  button { font-family: inherit; cursor: pointer; }
  input, select { font-family: inherit; }

  /* ============================================================
     TOPBAR
     ============================================================ */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(7,11,20,0.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
  }

  .topbar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 30px;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-0);
    white-space: nowrap;
  }
  .logo-mark {
    width: 28px; height: 28px;
    display: grid;
    place-items: center;
    border: 2px solid var(--accent);
    border-radius: 7px;
    color: var(--accent);
    font-size: 16px;
    box-shadow: 0 0 14px var(--accent-glow);
  }
  .logo span { color: var(--accent); }

  .nav-links { display: flex; gap: 26px; }
  .nav-links a {
    color: var(--text-2);
    text-decoration: none;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
  }
  .nav-links a:hover { color: var(--text-0); }
  .nav-links a.active { color: var(--accent); border-color: var(--accent); }

  .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

  .search-global {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    width: 240px;
    transition: border-color .15s;
  }
  .search-global:focus-within { border-color: var(--accent-dim); }
  .search-global input {
    background: transparent; border: none; outline: none;
    color: var(--text-0); font-size: 13px; width: 100%;
  }
  .search-global input::placeholder { color: var(--text-3); }
  .search-global svg { color: var(--text-3); flex-shrink: 0; }

  .btn {
    border: none;
    border-radius: var(--radius-sm);
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    transition: transform .1s, background .15s, box-shadow .15s;
  }
  .btn:active { transform: scale(0.97); }

  .btn-primary {
    background: var(--accent);
    color: var(--bg-0);
  }
  .btn-primary:hover { background: #67e8f9; box-shadow: 0 0 18px var(--accent-glow); }

  .btn-ghost {
    background: var(--bg-2);
    color: var(--text-1);
    border: 1px solid var(--border);
  }
  .btn-ghost:hover { border-color: var(--border-light); color: var(--text-0); }

  .user-chip {
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 12px 4px 4px;
    cursor: pointer;
  }
  .user-chip.visible { display: flex; }
  .user-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-dim));
    display: grid; place-items: center;
    font-weight: 800; font-size: 12px; color: var(--bg-0);
  }
  .user-name { font-size: 12px; font-weight: 700; color: var(--text-1); letter-spacing: 0.3px; }

  /* ============================================================
     LAYOUT GŁÓWNY
     ============================================================ */
  .app {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 26px 24px 70px;
  }

  .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }
  .section-title.centered { justify-content: center; }
  .section-title.centered h2 {
    text-align: center;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-0);
  }
  .section-title h2 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--text-1);
  }
  .section-title .link {
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-decoration: none;
    background: none;
    border: none;
  }
  .section-title .link:hover { text-decoration: underline; }

  /* ============================================================
     KARUZELA GIER + GRAFIKA TŁA (POZIOMY SCROLL)
     ============================================================ */
  .games-section {
    position: relative;
    margin-bottom: 40px;
    padding: 24px 24px 20px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-1);
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .games-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(135deg, #101b30, #073448);
    background-size: cover;
    background-position: center;
    opacity: 0.35;
    filter: saturate(0.8) contrast(1.1) brightness(0.8);
    z-index: 0;
  }

  .games-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to bottom, var(--bg-0) 0%, transparent 15%, transparent 85%, var(--bg-0) 100%),
      linear-gradient(to right, var(--bg-0) 0%, transparent 10%, transparent 90%, var(--bg-0) 100%),
      radial-gradient(circle at 50% 50%, rgba(34,211,238,0.05), transparent 70%);
    z-index: 1;
    pointer-events: none;
  }

  .games-content {
    position: relative;
    z-index: 2;
    width: 100%;
  }

  /* Główna siatka 4 kolumn: 3 przewijane + 1 stały */
  .games-carousel-wrap {
    display: grid;
    grid-template-columns: 3fr 1fr; /* 3 przewijane, 1 stały */
    gap: 16px;
    position: relative;
  }

  /* Kontener na 3 przewijane kafelki (ukrywa nadmiar) */
  .scroll-container {
    overflow: hidden; /* Ukrywamy to, co poza ramką */
    position: relative;
    height: 200px; /* Wysokość jednego kafelka */
    border-radius: var(--radius);
    /* Opcjonalnie cień do wewnątrz, by ukryć "ucięte" krawędzie kafelków */
  }

  /* Wewnętrzny pasek, który faktycznie się przewija */
  .scroll-track {
    display: flex;
    gap: 16px;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
  }

  /* Stały kafelek "Więcej gier" */
  .static-card-wrapper {
    position: relative;
    height: 200px;
  }

  /* Kafelki gier */
  .game-card {
    position: relative;
    width: calc((100% - 32px) / 3); /* Dokładnie 3 kafelki w rzędzie (minus gap) */
    flex-shrink: 0;
    height: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-2);
    border: 1px solid var(--border-light);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 10px 24px rgba(0,0,0,0.55),
      0 2px 6px rgba(0,0,0,0.4);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .game-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(7,11,20,0.95) 100%);
    z-index: 1;
  }
  .game-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
    pointer-events: none;
    z-index: 3;
  }
  .game-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-dim);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.06) inset,
      0 18px 40px rgba(0,0,0,0.7),
      0 0 0 1px var(--accent-dim),
      0 0 24px var(--accent-glow);
  }
  .game-card.active {
    border-color: var(--accent);
    box-shadow:
      0 0 0 1px var(--accent),
      0 0 24px var(--accent-glow),
      0 14px 32px rgba(0,0,0,0.6);
  }

  .game-card img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.72;
    transition: opacity .2s, transform .35s;
    z-index: 0;
  }
  .game-card:hover img { opacity: 0.9; transform: scale(1.06); }

  .game-card-info {
    position: absolute; left: 14px; right: 14px; bottom: 12px;
    z-index: 2;
  }
  .game-card-name {
    font-size: 15px; font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-0);
    text-shadow: 0 2px 8px rgba(0,0,0,0.9);
  }
  .game-card-players {
    font-size: 10.5px; color: var(--text-2); margin-top: 3px;
    letter-spacing: 0.4px;
  }

  /* Kafelek "Więcej gier" - wypełnia cały swój kontener */
  .game-card.more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background:
      linear-gradient(135deg, var(--bg-2), var(--bg-3)),
      radial-gradient(circle at 30% 30%, rgba(34,211,238,0.08), transparent 60%);
    border-style: dashed;
  }
  .game-card.more::before, .game-card.more::after { display: none; }
  .game-card.more:hover { border-color: var(--accent); border-style: solid; }
  .game-card.more .more-inner { text-align: center; }
  .game-card.more .more-icon {
    font-size: 32px; color: var(--accent); margin-bottom: 8px;
  }
  .game-card.more .more-text {
    font-size: 13px; font-weight: 800;
    letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--text-1);
  }

  /* Pasek przewijania pod karuzelą */
  .scroll-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
    color: var(--text-3);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  
  .scroll-dots {
    display: flex;
    gap: 6px;
  }
  
  .scroll-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bg-3);
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
  }
  
  .scroll-dot.active {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
  }
  
  .scroll-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.7;
  }

  /* ============================================================
     RESZTA STYLÓW (VIP, LAYOUT, STATYSTYKI, MODALE)
     ============================================================ */
  .vip-row { display: flex; gap: 14px; margin-bottom: 24px; }
  .vip-card { flex: 1; background: linear-gradient(135deg, rgba(245,158,11,0.08), var(--bg-2)); border: 1px solid rgba(245,158,11,0.35); border-radius: var(--radius); padding: 13px 16px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
  .vip-card:hover { transform: translateY(-2px); border-color: var(--orange); box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
  .vip-badge { background: var(--orange); color: var(--bg-0); font-size: 10px; font-weight: 900; padding: 3px 8px; border-radius: 4px; letter-spacing: 1px; }
  .vip-name { font-weight: 800; font-size: 13.5px; letter-spacing: 0.3px; }
  .vip-meta { font-size: 11px; color: var(--text-2); margin-top: 2px; }
  .vip-players { margin-left: auto; font-size: 12px; color: var(--green); font-weight: 800; white-space: nowrap; }

  .main-grid { display: grid; grid-template-columns: 220px 1fr 320px; gap: 18px; align-items: start; }

  .filters-panel { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; position: sticky; top: 80px; }
  .filters-header { font-size: 10.5px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--text-3); margin-bottom: 15px; }
  .filter-group { margin-bottom: 16px; }
  .filter-group label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-2); margin-bottom: 7px; }
  .filter-group select, .filter-group input[type="text"] { width: 100%; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; color: var(--text-0); font-size: 12.5px; outline: none; transition: border-color .15s; }
  .filter-group select:focus, .filter-group input[type="text"]:focus { border-color: var(--accent-dim); }
  .checkbox-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12.5px; color: var(--text-1); cursor: pointer; }
  .checkbox-row input { accent-color: var(--accent); cursor: pointer; }
  .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 12.5px; color: var(--text-1); }
  .switch { position: relative; width: 38px; height: 20px; background: var(--bg-3); border-radius: 999px; border: 1px solid var(--border-light); cursor: pointer; transition: background .15s; }
  .switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--text-2); border-radius: 50%; transition: transform .15s, background .15s; }
  .switch.on { background: var(--accent-dim); border-color: var(--accent); }
  .switch.on::after { transform: translateX(18px); background: var(--accent); }
  .filters-reset { width: 100%; margin-top: 6px; background: transparent; border: 1px solid var(--border); color: var(--text-2); border-radius: var(--radius-sm); padding: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; transition: border-color .15s, color .15s; }
  .filters-reset:hover { border-color: var(--accent-dim); color: var(--accent); }

  .servers-panel { min-width: 0; }
  .servers-list-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .servers-list-header h3 { font-size: 11.5px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-2); }
  .results-count { font-size: 11.5px; color: var(--text-3); letter-spacing: 0.4px; }
  .server-item { display: flex; align-items: center; gap: 14px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
  .server-item:hover { border-color: var(--border-light); background: var(--bg-2); }
  .server-item.selected { border-color: var(--accent); background: linear-gradient(90deg, var(--accent-glow), var(--bg-1)); box-shadow: 0 0 0 1px var(--accent-dim); }
  .server-thumb { width: 54px; height: 54px; border-radius: var(--radius-sm); background: var(--bg-3); flex-shrink: 0; display: grid; place-items: center; font-weight: 900; font-size: 18px; color: var(--accent); border: 1px solid var(--border-light); overflow: hidden; }
  .server-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .server-main { flex: 1; min-width: 0; }
  .server-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
  .server-name { font-size: 14px; font-weight: 800; color: var(--text-0); letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .badge-version { font-size: 9.5px; font-weight: 800; background: var(--bg-3); color: var(--accent); border: 1px solid var(--accent-dim); padding: 1px 6px; border-radius: 3px; white-space: nowrap; letter-spacing: 0.5px; }
  .badge-promoted { font-size: 9px; font-weight: 900; background: var(--orange); color: var(--bg-0); padding: 1px 5px; border-radius: 3px; letter-spacing: 0.8px; }
  .server-meta { font-size: 11px; color: var(--text-2); display: flex; gap: 10px; flex-wrap: wrap; }
  .server-meta span { white-space: nowrap; }
  .server-meta .dot { color: var(--text-3); }
  .server-side { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
  .players-online { font-size: 13px; font-weight: 800; color: var(--green); white-space: nowrap; }
  .players-online.offline { color: var(--text-3); }
  .players-online small { font-size: 10px; font-weight: 500; color: var(--text-3); }
  .stars { color: var(--orange); font-size: 11px; letter-spacing: 1px; }
  .stars small { color: var(--text-3); font-size: 10.5px; margin-left: 3px; letter-spacing: 0; }

  .right-panel { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 80px; }
  .panel-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
  .panel-card h4 { font-size: 10.5px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
  .panel-card h4 .mini-link { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--accent); font-weight: 800; background: none; border: none; }
  .panel-card h4 .mini-link:hover { text-decoration: underline; }
  .stats-empty { text-align: center; padding: 26px 8px; color: var(--text-3); font-size: 12.5px; }
  .stats-header-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .stats-server-name { font-size: 14px; font-weight: 800; letter-spacing: 0.3px; }
  .stats-server-sub { font-size: 11px; color: var(--text-2); }
  .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
  .stat-box { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
  .stat-box-label { font-size: 9.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
  .stat-box-value { font-size: 16px; font-weight: 900; color: var(--text-0); margin-top: 2px; }
  .stat-box-value.accent { color: var(--accent); }
  .stat-box-value.green { color: var(--green); }
  .chart-wrap { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 14px; }
  .chart-label { font-size: 9.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 8px; }
  .chart-svg { width: 100%; height: 64px; display: block; }
  .stats-actions { display: flex; gap: 8px; }
  .stats-actions .btn { flex: 1; font-size: 10.5px; padding: 9px 8px; }
  .launch-mini { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
  .launch-mini:last-child { border-bottom: none; }
  .launch-date { width: 38px; height: 38px; background: var(--bg-2); border: 1px solid var(--border-light); border-radius: var(--radius-sm); display: grid; place-items: center; flex-shrink: 0; line-height: 1; }
  .launch-date .d { font-size: 14px; font-weight: 900; color: var(--accent); }
  .launch-date .m { font-size: 8.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; }
  .launch-info { flex: 1; min-width: 0; }
  .launch-name { font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .launch-tag { font-size: 10px; color: var(--text-3); margin-top: 1px; }
  .launch-tag.promoted { color: var(--orange); font-weight: 700; }

  .upcoming-section { margin-top: 34px; }
  .countdown-card { background: linear-gradient(135deg, rgba(245,158,11,0.07), var(--bg-1)); border: 1px solid rgba(245,158,11,0.4); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 12px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
  .countdown-badge { background: var(--orange); color: var(--bg-0); font-size: 9.5px; font-weight: 900; padding: 5px 10px; border-radius: 4px; letter-spacing: 1.2px; white-space: nowrap; }
  .countdown-name { font-size: 16px; font-weight: 900; letter-spacing: 0.3px; }
  .countdown-sub { font-size: 11px; color: var(--text-2); margin-top: 2px; }
  .countdown-timer { margin-left: auto; display: flex; gap: 16px; }
  .timer-unit { text-align: center; min-width: 46px; }
  .timer-value { font-size: 22px; font-weight: 900; color: var(--orange); font-variant-numeric: tabular-nums; }
  .timer-label { font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
  .countdown-actions { display: flex; gap: 8px; width: 100%; margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(245,158,11,0.2); }
  .countdown-actions .btn { font-size: 10.5px; padding: 8px 14px; }
  .upcoming-mini-list { display: flex; flex-direction: column; gap: 8px; }
  .upcoming-row { display: flex; align-items: center; gap: 12px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; cursor: pointer; transition: border-color .15s, background .15s; }
  .upcoming-row:hover { border-color: var(--border-light); background: var(--bg-2); }
  .upcoming-row .u-info { flex: 1; min-width: 0; }
  .upcoming-row .u-name { font-size: 13px; font-weight: 800; letter-spacing: 0.3px; }
  .upcoming-row .u-time { font-size: 11px; color: var(--text-3); margin-top: 1px; }
  .upcoming-row .u-tag { font-size: 10.5px; font-weight: 800; color: var(--accent); background: var(--accent-glow); border: 1px solid var(--accent-dim); padding: 4px 10px; border-radius: 4px; white-space: nowrap; letter-spacing: 0.6px; text-transform: uppercase; }
  .upcoming-row .u-actions { display: flex; gap: 6px; flex-shrink: 0; }
  .upcoming-row .u-actions .btn { font-size: 10px; padding: 6px 11px; letter-spacing: 0.8px; }

  .stats-section { margin-top: 36px; }
  .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .stats-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
  .stats-card h4 { font-size: 10.5px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-2); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
  .stats-card h4 .mini-link { font-size: 10px; letter-spacing: 0.8px; color: var(--accent); font-weight: 800; background: none; border: none; text-transform: uppercase; }
  .voter-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
  .voter-row:last-child { border-bottom: none; }
  .voter-rank { width: 24px; font-size: 11px; font-weight: 900; color: var(--text-3); }
  .voter-rank.top { color: var(--orange); }
  .voter-name { color: var(--text-1); font-weight: 700; letter-spacing: 0.2px; }
  .voter-name.me { color: var(--accent); }
  .voter-value { margin-left: auto; font-weight: 800; color: var(--accent); font-size: 12px; }
  .top-player-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
  .top-player-row:last-child { border-bottom: none; }
  .tp-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-dim), var(--bg-3)); display: grid; place-items: center; font-weight: 900; font-size: 11px; color: var(--accent); flex-shrink: 0; border: 1px solid var(--border-light); }
  .tp-name { font-weight: 800; color: var(--text-0); font-size: 12.5px; }
  .tp-server { font-size: 10.5px; color: var(--text-3); margin-top: 1px; }
  .tp-lvl { margin-left: auto; font-weight: 900; color: var(--orange); font-size: 12px; }
  .sample-stat-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
  .sample-stat-row:last-child { border-bottom: none; }
  .ss-icon { width: 28px; height: 28px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--border-light); display: grid; place-items: center; font-size: 13px; flex-shrink: 0; }
  .ss-label { color: var(--text-2); font-size: 12px; font-weight: 600; }
  .ss-value { margin-left: auto; font-weight: 900; color: var(--accent); font-size: 13px; }
  .ss-bar { width: 100%; height: 3px; background: var(--bg-3); border-radius: 2px; margin-top: 4px; overflow: hidden; }
  .ss-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); border-radius: 2px; }

  .modal-backdrop { position: fixed; inset: 0; background: rgba(4,7,14,0.8); backdrop-filter: blur(4px); z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; }
  .modal-backdrop.open { display: flex; }
  .modal { background: var(--bg-1); border: 1px solid var(--border-light); border-radius: 14px; width: 100%; max-width: 640px; max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0,0,0,0.7); animation: modalIn .18s ease-out; }
  @keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
  .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
  .modal-header h3 { font-size: 12px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; }
  .modal-close { background: none; border: none; color: var(--text-3); font-size: 22px; line-height: 1; padding: 0 4px; transition: color .15s; }
  .modal-close:hover { color: var(--red); }
  .modal-body { padding: 20px; overflow-y: auto; }
  .modal-search { display: flex; align-items: center; gap: 10px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 16px; }
  .modal-search input { background: transparent; border: none; outline: none; color: var(--text-0); font-size: 14px; width: 100%; }
  .modal-search input::placeholder { color: var(--text-3); }
  .games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .games-grid .game-card { width: 100%; height: 120px; }
  .games-grid .game-card-name { font-size: 12px; letter-spacing: 1px; }
  .games-grid-empty { color: var(--text-3); font-size: 13px; text-align: center; padding: 20px; }
  .calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .calendar-nav .cal-month { font-size: 13px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; }
  .cal-arrow { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--border); color: var(--text-1); display: grid; place-items: center; }
  .cal-arrow:hover { background: var(--accent); color: var(--bg-0); }
  .cal-launches { display: flex; flex-direction: column; gap: 10px; }
  .cal-launch-item { display: flex; align-items: center; gap: 14px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
  .cal-launch-item.promoted { border-color: rgba(245,158,11,0.5); background: linear-gradient(90deg, rgba(245,158,11,0.06), var(--bg-2)); }
  .cal-date-big { width: 46px; height: 46px; background: var(--bg-3); border-radius: var(--radius-sm); display: grid; place-items: center; flex-shrink: 0; line-height: 1; }
  .cal-date-big .d { font-size: 17px; font-weight: 900; color: var(--accent); }
  .cal-date-big .m { font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.6px; }
  .cal-info { flex: 1; min-width: 0; }
  .cal-info .cn { font-size: 13.5px; font-weight: 800; }
  .cal-info .ct { font-size: 11px; color: var(--text-3); margin-top: 1px; }
  .cal-tag { font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 4px; background: var(--bg-3); color: var(--text-2); white-space: nowrap; letter-spacing: 0.8px; text-transform: uppercase; }
  .cal-tag.promoted { background: var(--orange); color: var(--bg-0); }
  .auth-tabs { display: flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; margin-bottom: 18px; }
  .auth-tab { flex: 1; background: transparent; border: none; color: var(--text-2); font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; padding: 10px; border-radius: 4px; transition: background .15s, color .15s; }
  .auth-tab.active { background: var(--accent); color: var(--bg-0); }
  .form-field { margin-bottom: 14px; }
  .form-field label { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-2); margin-bottom: 6px; }
  .form-field input { width: 100%; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; color: var(--text-0); font-size: 13.5px; outline: none; transition: border-color .15s; }
  .form-field input:focus { border-color: var(--accent); }
  .form-error { color: var(--red); font-size: 11.5px; margin-top: 4px; display: none; }
  .form-error.visible { display: block; }
  .form-hint { font-size: 11px; color: var(--text-3); margin-top: 8px; text-align: center; }
  .auth-submit { width: 100%; padding: 12px; font-size: 12px; margin-top: 4px; }
  .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--bg-3); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 12px 20px; font-size: 13px; color: var(--text-0); box-shadow: 0 10px 30px rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 200; max-width: 90vw; }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  .toast.success { border-color: var(--green); }
  .toast.info { border-color: var(--accent); }

  /* ============================================================
     RESPONSYWNOŚĆ
     ============================================================ */
  @media (max-width: 1150px) {
    .main-grid { grid-template-columns: 200px 1fr; }
    .right-panel { grid-column: 1 / -1; position: static; flex-direction: row; flex-wrap: wrap; }
    .right-panel .panel-card { flex: 1; min-width: 280px; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 860px) {
    .topbar-inner { flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 12px; }
    .nav-links { order: 3; width: 100%; overflow-x: auto; gap: 18px; }
    .search-global { width: 160px; }
    
    /* Reset nowego mechanizmu na tablety/mobile */
    .games-section { min-height: auto; padding: 20px 16px 30px; }
    .games-carousel-wrap { 
      display: grid; 
      grid-template-columns: repeat(2, 1fr); 
      gap: 16px; 
    }
    .scroll-container { 
      grid-column: span 2; 
      display: contents; /* Pozwala kafelkom wpasować się w siatkę */
      height: auto;
      overflow: visible;
    }
    .scroll-track {
      display: contents; /* Kafelki zachowują się jak elementy siatki */
      transform: none !important; /* Wyłączamy transformacje */
    }
    .static-card-wrapper { 
      grid-column: span 2; 
      display: contents;
    }
    .game-card { 
      width: 100%;
      height: 160px; 
    }
    .game-card.more { height: 160px; }
    .scroll-controls { display: none; } /* Ukrywamy kontrolki na mobile */

    .main-grid { grid-template-columns: 1fr; }
    .filters-panel { position: static; }
    .right-panel { flex-direction: column; }
    .countdown-timer { margin-left: 0; }
    .vip-row { flex-direction: column; }
    .stats-grid { grid-template-columns: 1fr; }
    .upcoming-row .u-actions { display: none; }
  }

  @media (max-width: 520px) {
    .games-section { padding: 16px 12px; }
    .games-carousel-wrap { grid-template-columns: 1fr; }
    .scroll-container, .static-card-wrapper { grid-column: span 1; }
    .game-card { height: 120px; }
    .game-card.more { height: 120px; }
    .app { padding: 16px 14px 50px; }
    .modal { max-height: 92vh; }
  }

/* FGS 0.2.1 — czytelne statystyki OTS */
.server-item .server-main { min-width: 0; flex: 1 1 180px; }
.server-item .server-side { min-width: 305px; gap: 7px; }
.fgs-server-metrics { display: flex; align-items: stretch; justify-content: flex-end; gap: 10px; width: 100%; }
.fgs-metric { text-align: left; min-width: 0; }
.fgs-server-metrics .fgs-metric { padding: 9px 12px; background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: 9px; min-width: 158px; }
.fgs-server-metrics .fgs-uptime-metric { min-width: 130px; }
.fgs-metric-title { color: var(--text-2); font-size: 9px; font-weight: 800; letter-spacing: .85px; line-height: 1.4; white-space: nowrap; }
.fgs-player-figures { font-size: 15px; font-weight: 750; color: var(--text-1); white-space: nowrap; margin: 4px 0 2px; }
.fgs-player-figures strong { color: var(--green); font-weight: 900; }
.fgs-player-figures.fgs-muted strong { color: var(--text-2); }
.fgs-peak { color: var(--text-2); font-size: 12px; }
.fgs-divider { color: var(--text-3); margin: 0 3px; }
.fgs-metric-caption { color: var(--text-3); font-size: 10px; line-height: 1.4; }
.fgs-uptime-value { font-size: 17px; font-weight: 900; color: var(--accent); margin: 2px 0; }
.fgs-uptime-window { color: var(--text-3); }
.fgs-stale { color: #e4ad61; font-size: 8px; letter-spacing: .15px; }
.fgs-status { font-size: 9px; font-weight: 800; letter-spacing: .7px; color: var(--text-2); }
.fgs-status.online { color: var(--green); }
.fgs-status.offline { color: #ec8b8b; }
.fgs-status-dot { display: inline-block; width: 6px; height: 6px; background: currentColor; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.fgs-detail-status { font-size: 11px; color: var(--text-2); margin-bottom: 10px; }
.fgs-detail-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.fgs-detail-metrics .fgs-metric { background: var(--bg-2); border: 1px solid var(--border); padding: 11px; border-radius: 9px; }
.fgs-check-note { color: var(--text-3); font-size: 10px; line-height: 1.5; margin: 0 0 9px; }
@media(max-width: 900px) {
  .server-item { flex-wrap: wrap; }
  .server-item .server-side { width: 100%; min-width: 0; align-items: stretch; }
  .fgs-server-metrics { justify-content: stretch; }
  .fgs-server-metrics .fgs-metric { flex: 1; min-width: 0; }
}
@media(max-width: 430px) {
  .fgs-server-metrics { gap: 6px; }
  .fgs-server-metrics .fgs-metric { padding: 8px; }
  .fgs-player-figures { font-size: 13px; }
  .fgs-peak { font-size: 11px; }
  .fgs-metric-caption { font-size: 9px; }
  .fgs-detail-metrics { grid-template-columns: 1fr; }
}

/* FGS 0.2.2 — countries and server descriptions */
.server-thumb .fgs-country-flag,.stats-header-row .fgs-country-flag{font-size:26px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.fgs-no-flag{font-size:23px}
.fgs-detail-actions{display:flex;gap:10px;flex-wrap:wrap}
.fgs-desc-btn{border:1px solid rgba(65,205,196,.45);background:rgba(65,205,196,.09);color:#c9f9f4}
.fgs-desc-btn:hover{background:rgba(65,205,196,.2)}
.fgs-description-modal{width:min(780px,calc(100vw - 28px));max-height:85vh;display:flex;flex-direction:column}
.fgs-description-modal .modal-body{overflow:auto;min-height:0}
.fgs-description-content{line-height:1.75;overflow-wrap:anywhere;color:#dbe5ed}
.fgs-description-content h1,.fgs-description-content h2,.fgs-description-content h3{color:#f3fbff;line-height:1.3;margin:1.2em 0 .5em}
.fgs-description-content p{margin:.8em 0}
.fgs-description-content img{max-width:100%;height:auto;border-radius:10px}
.fgs-description-content a{color:#56d6cd;text-decoration:underline}
.fgs-description-content table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
.fgs-description-content td,.fgs-description-content th{border:1px solid #3b4a58;padding:8px 12px}
.fgs-description-content ul,.fgs-description-content ol{padding-left:1.5rem}

/* v0.4.0 account panel full-width container */
body:has(.fgsa-dashboard) .fgsa-dashboard{max-width:1600px}
body:has(.fgsa-dashboard) main:has(.fgsa-dashboard),body:has(.fgsa-dashboard) .container:has(.fgsa-dashboard){max-width:1700px;width:calc(100% - 24px)}

/* 0.4.1 shared site navigation and dashboard return link */
.topbar .logo{display:flex;align-items:center;text-decoration:none;color:inherit;cursor:pointer}
.topbar .logo:hover{opacity:.85}
.topbar .user-chip{text-decoration:none;color:inherit;cursor:pointer}
.fgsa-back-wrap{max-width:1600px;width:calc(100% - 32px);margin:-45px auto 60px}
@media(max-width:950px){.topbar .nav-links{display:none}}
@media(max-width:620px){.topbar .search-global{display:none}.topbar-inner{gap:12px}.topbar .logo{white-space:nowrap;font-size:17px}}

/* FGS 0.5.0: kategorie, kafelki i strony gier */
.fgs-category-nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.fgs-more-toggle{background:transparent;border:0;color:inherit;font:inherit;cursor:pointer;padding:8px 4px;white-space:nowrap}
.fgs-more-toggle:hover{color:#57e1d6}
.fgs-more-panel{background:#101b2b;border-bottom:1px solid #26374b;position:relative;z-index:25}
.fgs-more-panel[hidden]{display:none!important}
.fgs-more-inner{max-width:1500px;margin:auto;padding:25px 24px;color:#e9f3fa}
.fgs-more-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin-top:16px}
.fgs-more-grid a{padding:15px;border:1px solid #293e51;border-radius:12px;color:#d7e9f1;text-decoration:none;background:#17263a}
.fgs-more-grid a:hover{border-color:#50d8cc;color:#50d8cc}
.fgs-category-page{max-width:1450px;margin:45px auto;padding:0 25px;min-height:60vh;color:#eaf4f9}
.fgs-category-page h1{font-size:38px;margin:25px 0 12px}
.fgs-category-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-top:30px}
.fgs-category-game{display:block;overflow:hidden;border:1px solid #2b4053;border-radius:16px;background:#152336;color:#fff;text-decoration:none}
.fgs-category-game img,.fgs-category-game .fgs-game-placeholder{width:100%;height:155px;object-fit:cover;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#123b4b,#232847);color:#8ce3d9;font-weight:700;padding:15px}
.fgs-category-game strong{display:block;padding:15px}.fgs-back{color:#66ded4}
.game-card .fgs-game-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:18px;text-align:center;background:linear-gradient(135deg,#123b4b,#232847);color:#8ce3d9;font-weight:700}

/* v0.5.1 — spójna typografia i wybór kategorii bez przeładowania */
.topbar .fgs-category-nav .fgs-more-toggle{font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit;color:#65ded5;appearance:none;-webkit-appearance:none}
.topbar .fgs-category-nav .fgs-more-toggle:hover{color:#a1fff3}
.fgs-category-nav a.fgs-category-active,.fgs-more-grid a.fgs-category-active{color:#6ce7da!important}
#popularne-gry{scroll-margin-top:85px}

/* v0.5.6: inteligentny nagłówek i jednorzędowy slider kategorii */
.topbar{position:sticky;top:0;z-index:100;transition:transform .24s ease;will-change:transform}
.topbar.fgs-header-hidden{transform:translateY(-105%)}
.topbar .fgs-category-nav .fgs-more-toggle{
  display:inline-flex;align-items:center;align-self:center;
  font-family:inherit;font-size:11.5px;font-weight:800;letter-spacing:1.4px;
  line-height:normal;text-transform:uppercase;padding:6px 0;
  border:0;border-bottom:2px solid transparent;border-radius:0;
  color:#60ded4;background:none;white-space:nowrap;
}
.topbar .fgs-category-nav .fgs-more-toggle:hover{color:#a4fff5}
.fgs-category-slider{display:flex;align-items:center;gap:10px;margin-top:16px;min-width:0}
.fgs-category-viewport{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;scroll-snap-type:x mandatory}
.fgs-category-viewport::-webkit-scrollbar{display:none}
.fgs-more-grid{display:flex;flex-wrap:nowrap;gap:12px;margin-top:0;min-width:100%}
.fgs-more-grid a{flex:0 0 calc((100% - 84px)/8);box-sizing:border-box;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;scroll-snap-align:start}
.fgs-category-arrow{flex:0 0 32px;width:32px;height:42px;border:1px solid #2d455a;border-radius:9px;background:#17263a;color:#70e7df;font-size:28px;cursor:pointer}
.fgs-category-arrow:hover:not(:disabled){border-color:#70e7df;background:#20334b}
.fgs-category-arrow:disabled{opacity:.25;cursor:default}
#popularne-gry{scroll-margin-top:85px}
@media(max-width:1100px){.fgs-more-grid a{flex-basis:calc((100% - 36px)/4)}}
@media(max-width:650px){.fgs-more-grid a{flex-basis:calc((100% - 12px)/2)}}

/* v0.5.7: menu, paginacja gier, siatka kalendarza */
.fgs-brand-image{display:block;max-width:245px;max-height:48px;width:auto;height:auto;object-fit:contain}
.fgs-brand-fallback{align-items:center;gap:7px}
.fgs-popular-link{white-space:nowrap}
.fgs-more-panel{position:fixed;top:var(--fgs-header-height,70px);left:0;right:0;z-index:99;box-shadow:0 15px 35px #0008;max-height:calc(100vh - var(--fgs-header-height,70px));overflow-y:auto}
.fgs-games-pager{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:18px;color:#b7cbdc;font-size:13px}
.fgs-games-pager[hidden]{display:none}
.fgs-games-pager button{border:1px solid #2d455a;background:#17263a;color:#75e7e0;border-radius:9px;padding:9px 18px;cursor:pointer}
.fgs-games-pager button:disabled{opacity:.3;cursor:default}
#gamesGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.fgs-calendar-modal{max-width:940px;width:min(940px,96vw)}
.fgs-calendar-weekdays,.fgs-calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.fgs-calendar-weekdays{margin:8px 0 10px;color:#8fa5b9;font-size:12px;text-align:center;font-weight:800}
.fgs-calendar-days{margin-bottom:18px}
.fgs-cal-blank{min-height:72px}
.fgs-cal-day{min-height:72px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:11px;background:#142137;color:#e8f2f8;border:1px solid #2b3c51;border-radius:9px;text-align:left;cursor:default}
.fgs-cal-day.is-today{border-color:#55e3dd;color:#76eee9}
.fgs-cal-day.has-events{cursor:pointer;background:#173447;border-color:#3ba6ac}
.fgs-cal-day small{font-size:10px;color:#71e5df}
.fgs-cal-event{display:flex;justify-content:space-between;gap:15px;width:100%;padding:13px 16px;margin:7px 0;border:1px solid #2b3c51;border-radius:8px;background:#142137;color:#e9f3fa;text-align:left;cursor:pointer}
.fgs-cal-event span{color:#9cb3c6;font-size:12px}
.fgs-calendar-detail{position:relative;margin-top:18px;padding:18px;background:#172b3e;border:1px solid #42aeb2;border-radius:12px}
.fgs-calendar-detail[hidden]{display:none}
.fgs-calendar-detail p{color:#9db4c5;margin:8px 0}
.fgs-detail-close{position:absolute;right:12px;top:8px;color:#fff;background:transparent;border:0;font-size:24px;cursor:pointer}
@media(max-width:650px){#gamesGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.fgs-cal-day{min-height:48px;padding:6px;font-size:12px}.fgs-calendar-weekdays,.fgs-calendar-days{gap:3px}}


/* v0.5.8 — grafika tła bez ramki i bez przycinania hover */
.games-section {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  padding: 30px 24px 25px;
  isolation: isolate;
}
.games-section::before {
  background-image: var(--fgs-games-background, url('../images/populars.webp'));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  opacity: 1;
  filter: none;
  z-index: -2;
  pointer-events: none;
}
.games-section::after {
  background: linear-gradient(to bottom, var(--bg-0), transparent 22%, transparent 78%, var(--bg-0)),
              linear-gradient(to right, var(--bg-0), transparent 15%, transparent 85%, var(--bg-0));
  z-index: -1;
}
/* Przestrzeń na uniesienie kafelków, bez zmiany wysokości samych kart. */
.games-section .scroll-container {
  height: 210px;
  padding-top: 7px;
  padding-bottom: 3px;
  border-radius: 0;
  overflow: hidden;
}
.games-section .scroll-track { height: 200px; }
.games-section .game-card:hover { transform: translateY(-3px); }
/* Logo: plik graficzny zastępuje całkowicie dawny napis, jeśli jest dostępny. */
.topbar .logo .fgs-brand-image { display: block; width: auto; height: auto; max-width: 255px; max-height: 54px; object-fit: contain; }

/* v0.6.0 — mobile navigation, compact games, filters, dialog */
.fgs-mobile-menu-toggle,.fgs-mobile-menu,.fgs-filters-toggle{display:none}
.fgs-server-stats-modal{width:min(560px,calc(100vw - 24px))}
.fgs-server-stats-modal #statsContent{padding:4px 0 12px}
#serverDescriptionModal{z-index:110}
#serverStatsModal{z-index:100}
@media(max-width:950px){
 .topbar-inner{flex-wrap:nowrap;min-height:62px;padding:8px 12px;gap:10px}
 .topbar .logo{min-width:0;flex:1 1 auto;overflow:hidden}
 .topbar .logo .fgs-brand-image{max-width:min(100%,210px);max-height:42px}
 .topbar .topbar-right{flex:0 0 auto}
 .topbar .user-chip{max-width:112px;min-width:0;padding:5px 7px}
 .topbar .user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65px}
 .fgs-mobile-menu-toggle{display:flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;width:45px;height:40px;border:1px solid #275467;border-radius:10px;background:#102432;color:#38e0ee}
 .fgs-menu-pad{font-size:18px;font-weight:900}
 .fgs-menu-bars{display:grid;gap:3px}.fgs-menu-bars i{display:block;width:12px;height:2px;border-radius:2px;background:currentColor}
 .fgs-mobile-menu[hidden]{display:none!important}
 .fgs-mobile-menu{display:grid;position:fixed;z-index:85;top:var(--fgs-header-height,62px);left:10px;right:10px;max-height:calc(100dvh - var(--fgs-header-height,62px) - 12px);overflow-y:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:14px;background:#0c1626;border:1px solid #275467;border-radius:14px;box-shadow:0 25px 65px #000b}
 .fgs-mobile-menu-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;font-weight:800;color:#e7fbff;padding:3px 2px 8px}
 .fgs-mobile-menu-head button{background:transparent;border:0;color:white;font-size:26px}
 .fgs-mobile-menu>a{display:flex;align-items:center;min-height:44px;padding:10px;border:1px solid #20364a;border-radius:9px;background:#121f31;color:#d9f6fb;text-decoration:none;font-weight:700;overflow-wrap:anywhere}
 .fgs-mobile-menu>a:active{background:#174052}
 .fgs-more-panel{display:none!important}
 .fgs-filters-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;padding:12px 15px;border:1px solid #28526a;border-radius:10px;background:#102739;color:#d9faff;font-size:14px;font-weight:800}
 .fgs-filters-body{display:none}
 .fgs-filters-expanded .fgs-filters-body{display:block;padding-top:14px}
 .fgs-filters-expanded .fgs-filter-chevron{transform:rotate(180deg)}
 .filters-panel{padding:0!important;border:0!important;background:transparent!important;margin:0!important}
 .filters-panel>.filters-header{display:none}
 .main-grid{gap:12px}
 .right-panel{grid-column:auto}
 .right-panel .panel-card{min-width:0;width:100%}
}
@media(max-width:600px){
 .app{padding:8px 12px 45px}
 .games-section{padding:10px 0 12px;min-height:0}
 .games-section .section-title{margin-bottom:8px}
 .games-section .section-title h2{font-size:18px}
 .games-carousel-wrap{display:flex;gap:8px;align-items:stretch;min-width:0}
 .games-section .scroll-container{display:block;flex:1 1 auto;min-width:0;height:122px;padding:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none}
 .games-section .scroll-track{display:flex;width:max-content;height:122px;transform:none!important;gap:8px}
 .games-section .scroll-track .game-card{flex:0 0 165px;width:165px;min-width:0;height:116px;scroll-snap-align:start}
 .games-section .static-card-wrapper{display:block;flex:0 0 100px;width:100px}
 .games-section .game-card.more{width:100%;height:116px}
 .games-section .scroll-controls{display:none}
 .games-section .scroll-hint{display:none}
 .games-section .scroll-dots{display:flex}
 .games-section .games-content{min-width:0}
 .main-grid{display:flex;flex-direction:column}
 .servers-panel,.right-panel{min-width:0;width:100%}
 .servers-list-header{gap:8px;flex-wrap:wrap}
 .server-item{gap:9px;min-width:0;flex-wrap:wrap;padding:12px}
 .server-item .server-main{flex:1 1 calc(100% - 65px);min-width:0}
 .server-item .server-side{min-width:0;width:100%;flex-wrap:wrap;justify-content:space-between}
 .server-item .fgs-server-metrics{width:100%;flex-wrap:wrap;justify-content:flex-start}
 .fgs-server-metrics .fgs-metric{min-width:0;flex:1 1 120px}
 .modal-backdrop{padding:10px}
 .modal{width:100%;max-width:100%;max-height:calc(100dvh - 20px);overflow:auto}
 .modal .modal-body{overflow:auto}
 .fgs-server-stats-modal{width:100%}
}

/* v0.6.1 — uporządkowane kafelki i logo na małych ekranach */
@media(max-width:600px){
 .games-section .games-carousel-wrap{display:grid!important;grid-template-columns:minmax(0,1fr) 104px!important;gap:8px!important;align-items:start}
 .games-section .scroll-container{grid-column:1!important;display:block!important;width:100%!important;min-width:0!important;height:126px!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory}
 .games-section .scroll-track{display:flex!important;width:max-content!important;min-width:0!important;height:120px!important;gap:8px!important;transform:none!important;align-items:stretch}
 .games-section .scroll-track>.game-card{display:block!important;flex:0 0 154px!important;width:154px!important;min-width:154px!important;max-width:154px!important;height:118px!important;scroll-snap-align:start;margin:0!important}
 .games-section .static-card-wrapper{grid-column:2!important;display:block!important;width:104px!important;min-width:0!important;height:118px!important}
 .games-section .static-card-wrapper>.game-card.more{display:flex!important;width:100%!important;height:118px!important;min-width:0!important}
 .games-section .game-card-name{font-size:12px;line-height:1.25;overflow-wrap:break-word}
 .games-section .game-card.more .more-text{font-size:11px;line-height:1.2;white-space:normal}
 .topbar-inner{gap:7px!important;padding-left:9px!important;padding-right:9px!important}
 .topbar .logo{flex:1 1 0!important;width:0!important;min-width:0!important;overflow:hidden!important}
 .topbar .logo .fgs-brand-image{display:block;max-width:100%!important;max-height:38px!important;width:auto!important;object-fit:contain;object-position:left center}
 .topbar .fgs-mobile-menu-toggle{width:40px;min-width:40px}
 .topbar .user-chip{max-width:90px!important}
 .topbar .user-name{max-width:45px!important}
}

/* v0.6.2: mobile — jeden pełny kafelek zamiast przyciętych */
@media(max-width:600px){
.games-section{margin-bottom:8px!important;padding:12px 0 14px!important;min-height:0!important}
.games-section .games-carousel-wrap{display:grid!important;grid-template-columns:minmax(0,1fr) 104px!important;gap:8px!important;width:100%!important;min-width:0!important}
.games-section .scroll-container{grid-column:1!important;width:100%!important;min-width:0!important;height:124px!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:11px}
.games-section .scroll-container::-webkit-scrollbar{display:none}
.games-section .scroll-track{display:flex!important;width:100%!important;min-width:0!important;height:120px!important;gap:8px!important;transform:none!important}
.games-section .scroll-track>.game-card{box-sizing:border-box!important;flex:0 0 100%!important;width:100%!important;min-width:100%!important;max-width:100%!important;height:118px!important;scroll-snap-align:start;scroll-snap-stop:always}
.games-section .static-card-wrapper{grid-column:2!important;width:104px!important;height:118px!important}
.games-section .static-card-wrapper>.game-card.more{width:100%!important;height:118px!important}
.games-section .scroll-dots{display:none!important}
.games-section .game-card:hover{transform:none!important}
}

/* v0.6.3: Na mobile bez tla sekcji gier niezaleznie od kategorii. */
@media (max-width: 600px) {
  .games-section::before,
  .games-section::after {
    content: none !important;
    background: none !important;
    background-image: none !important;
  }
  .games-section {
    background: transparent !important;
  }
}

/* v0.6.4 — mobilny gamingowy wskaźnik postępu karuzeli */
.fgs-mobile-slider-status { display: none; }
@media (max-width: 600px) {
  .games-section .fgs-mobile-slider-status:not([hidden]) {
    display: flex; align-items: center; gap: 9px; width: min(100%, 270px);
    margin: 7px auto 0; height: 18px; color: #7292a8;
    user-select: none; pointer-events: none;
  }
  .fgs-slider-pad { color: #25d9eb; font-size: 13px; line-height: 1; text-shadow: 0 0 8px rgba(37,217,235,.3); }
  .fgs-slider-rail { position: relative; display: block; flex: 1 1 auto; height: 4px; background: #213349; border-radius: 999px; overflow: hidden; }
  .fgs-slider-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 33%; border-radius: 999px; background: linear-gradient(90deg, #10b9d2, #4ff0f5); box-shadow: 0 0 7px rgba(37,217,235,.55); }
  .fgs-slider-count { min-width: 30px; text-align: right; font-size: 10px; font-weight: 800; letter-spacing: .03em; color: #93a8bd; font-variant-numeric: tabular-nums; }
  .fgs-slider-swipe { font-size: 20px; line-height: 1; color: #25d9eb; }
}

/* v0.7.0 — osobne karty Metin2, wspólne głosy i komentarze */
.fgs-metin-card{display:grid!important;grid-template-columns:minmax(155px,1fr) minmax(0,468px) 110px;gap:16px;align-items:center;padding:12px!important;cursor:pointer;min-height:210px}
.fgs-metin-info{display:flex;flex-direction:column;gap:7px;min-width:0;color:#a7b7cb;font-size:12px}
.fgs-metin-info strong{color:#f3f6fb;font-size:16px;overflow-wrap:anywhere}
.fgs-metin-banner{width:100%;aspect-ratio:468/190;overflow:hidden;border-radius:8px;background:#101a2b}
.fgs-metin-media{width:100%;height:100%;object-fit:contain;display:block}
.fgs-metin-placeholder{display:grid;place-items:center;height:100%;font-weight:800;color:#23c9df}
.fgs-metin-actions,.fgs-social-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fgs-metin-actions{flex-direction:column}
.fgs-metin-actions button,.fgs-social-inline button{background:#172638;border:1px solid #2b4359;border-radius:8px;color:#e8f5ff;padding:9px;cursor:pointer}
.fgs-metin-actions button.liked,.fgs-social-inline button.liked{color:#23e0db;border-color:#23e0db}
.fgs-social-inline{margin-top:8px}
.fgs-comments-list{max-height:46vh;overflow:auto;margin:12px 0}
.fgs-comment{padding:12px;border-bottom:1px solid #24364c;overflow-wrap:anywhere}
.fgs-comment small{display:block;color:#8ba0b5}.fgs-comment p{margin:7px 0}
#fgsCommentForm textarea{display:block;width:100%;box-sizing:border-box;background:#101b29;color:#fff;border:1px solid #365068;border-radius:8px;padding:10px;margin:10px 0}
@media(max-width:650px){.fgs-metin-card{grid-template-columns:minmax(0,1fr) auto;gap:6px;min-height:0;padding:8px!important}.fgs-metin-info{display:none}.fgs-metin-banner{grid-column:1/-1}.fgs-metin-actions{grid-column:1/-1;flex-direction:row;justify-content:flex-end}.fgs-metin-actions button{padding:5px 9px;font-size:12px}}

.fgs-metin-filter[hidden],.filter-group[hidden]{display:none!important}

/* v0.7.1: Metin2 — tytuł nad banerem, wyśrodkowany baner, równe reakcje */
.fgs-metin-card{grid-template-columns:minmax(0,1fr) 64px!important;gap:14px!important;align-items:center!important;min-height:0!important}
.fgs-metin-content{min-width:0;display:flex;flex-direction:column;align-items:center;gap:9px;width:100%}
.fgs-metin-title{margin:0;text-align:center;font-size:17px;line-height:1.3;overflow-wrap:anywhere;color:#f4f8ff}
.fgs-metin-banner{width:min(100%,728px)!important;aspect-ratio:728/180!important;max-width:728px;margin-inline:auto;position:relative}
.fgs-metin-banner::before,.fgs-metin-banner::after{display:none!important}
.fgs-metin-banner .fgs-metin-media{width:100%;height:100%;object-fit:contain;transform:none!important;filter:none!important}
.fgs-metin-banner:hover .fgs-metin-media{transform:none!important}
.fgs-metin-details{display:flex;align-items:center;justify-content:center;gap:8px 14px;flex-wrap:wrap;font-size:12px;color:#a7b7cb;text-align:center}
.fgs-worldwide{font-size:20px;line-height:1;display:inline-flex;vertical-align:middle}
.fgs-metin-actions{width:52px;display:flex;flex-direction:column;align-items:stretch;gap:8px!important}
.fgs-metin-actions button{box-sizing:border-box;width:46px!important;height:40px!important;min-width:46px;min-height:40px;padding:0!important;display:flex;justify-content:center;align-items:center;gap:4px;font-size:13px;line-height:1;border-radius:8px}
.fgs-metin-actions button b{font-size:12px;font-weight:700}
.fgs-reaction-symbol{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;font-size:15px;line-height:1}
.fgs-reaction-symbol img{width:17px;height:17px;object-fit:contain}
.servers-list-header h2{margin:0;font-size:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;font-weight:inherit;text-transform:inherit}
@media(max-width:650px){
 .fgs-metin-card{grid-template-columns:minmax(0,1fr)!important;gap:10px!important;padding:10px!important}
 .fgs-metin-content{grid-column:1!important;gap:8px}
 .fgs-metin-title{font-size:15px}
 .fgs-metin-banner{grid-column:auto!important;width:100%!important}
 .fgs-metin-actions{grid-column:1!important;flex-direction:row!important;width:100%!important;justify-content:center!important}
 .fgs-metin-actions button{width:46px!important;height:40px!important;padding:0!important}
 .fgs-metin-details{font-size:11px;gap:6px 10px}
}

/* v0.7.2: przywrócony nagłówek H2 i jednolita typografia Metin2 */
.servers-list-header h2 {
  margin:0; font-family:inherit; font-size:11.5px; font-weight:900;
  letter-spacing:1.8px; line-height:1.5; text-transform:uppercase; color:var(--text-2);
}
.fgs-metin-details, .fgs-metin-details > span, .fgs-metin-details .fgs-status {
  font-family:inherit; font-size:12px; line-height:1.5; font-weight:600;
  letter-spacing:0; text-transform:none;
}
.fgs-metin-details .fgs-status {font-weight:700;}
.fgs-metin-details .fgs-country-flag {font-size:17px;line-height:1;}
.fgs-metin-details > span:first-child {display:inline-flex;align-items:center;gap:6px;}
#fgsOnlyOnlineRow[hidden]{display:none!important;}
@media(max-width:650px){.fgs-metin-details,.fgs-metin-details > span,.fgs-metin-details .fgs-status{font-size:11px;}}

/* v0.7.3 — ranking Metin2 i jednolite okna szczegółów */
.fgs-metin-ranking[hidden]{display:none!important}.fgs-ranking-caption{font-size:11px;color:#8297ad;margin:5px 0 13px}.fgs-ranking-row{display:flex;align-items:center;gap:10px;width:100%;padding:11px 8px;border:0;border-bottom:1px solid #233046;background:transparent;color:#eaf3fb;text-align:left;cursor:pointer;font:inherit}.fgs-ranking-row:hover,.fgs-ranking-row:focus-visible{background:#18243a}.fgs-ranking-place{flex:0 0 22px;font-weight:900;color:#26d5e8}.fgs-ranking-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:12px}.fgs-ranking-likes{font-size:12px;white-space:nowrap}.fgs-ranking-empty{color:#8297ad;font-size:12px}.fgs-detail-server-name{font-size:20px;margin:0 0 16px}.fgs-detail-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 14px}.fgs-detail-tile{min-width:0;padding:12px;border:1px solid #273851;background:#121d2f;border-radius:10px;display:flex;flex-direction:column;gap:7px}.fgs-detail-tile-label{color:#91a9c3;font-size:11px;font-weight:800;letter-spacing:.03em}.fgs-detail-tile strong{font-size:14px;overflow-wrap:anywhere}.fgs-detail-state-unknown{color:#a7b6c8}.fgs-detail-state-online{color:#26d99c}.fgs-detail-state-offline{color:#fa7381}.fgs-detail-reactions{margin:12px 0;color:#c9d9eb}.fgs-comments-list,#fgsCommentForm{padding:18px 22px!important;box-sizing:border-box}#fgsCommentForm textarea{display:block;width:100%;box-sizing:border-box;margin:12px 0}#fgsCommentsModal .modal{max-height:calc(100dvh - 32px);overflow-y:auto}#fgsCommentsModal .fgs-comment{padding:10px 0;border-bottom:1px solid #263348}.fgs-server-stats-modal .modal-body{max-height:calc(100dvh - 130px);overflow-y:auto}.fgs-description-modal .modal-body{max-height:calc(100dvh - 130px);overflow-y:auto}@media(max-width:600px){.fgs-detail-tiles{gap:8px}.fgs-detail-tile{padding:10px}.fgs-comments-list,#fgsCommentForm{padding:16px!important}.fgs-server-stats-modal .stats-actions{display:grid;grid-template-columns:1fr;gap:8px}.fgs-server-stats-modal .stats-actions .btn{width:100%}}

/* TOP SERWERY VIP — premium, responsywny slider */
.fgs-top-section{max-width:1400px;margin:12px auto 28px;padding:12px 24px 24px;text-align:center;position:relative;isolation:isolate}
.fgs-top-section[hidden]{display:none!important}
.fgs-top-section:before{content:"";position:absolute;inset:26px 20px 0;border:2px solid #29d5e9;border-radius:16px;box-shadow:0 0 18px #15c7e966,inset 0 0 18px #15c7e91f;pointer-events:none;z-index:-1}
.fgs-top-heading{margin-bottom:14px}.fgs-top-title-row{display:flex;justify-content:center;align-items:center;gap:8px}.fgs-top-title-row h2{font-size:clamp(18px,2.5vw,25px);font-weight:950;color:#38e4ef;letter-spacing:.07em;text-shadow:0 0 14px #20bfe977}
.fgs-sponsored-help{width:24px;height:24px;border-radius:50%;border:1px solid #4a7285;background:#142437;color:#c2eefa;font-size:14px}
.fgs-top-caption{font-size:11px;text-transform:uppercase;color:#a2b3c6;letter-spacing:.08em}.fgs-sponsored-label{display:inline-block;color:#f7ce7c;margin-left:8px;font-weight:800}.fgs-sponsored-explain{margin:7px auto;max-width:550px;padding:8px 12px;border:1px solid #42546a;background:#101b2c;border-radius:8px;color:#d1dce9;font-size:12px}
.fgs-top-carousel{display:flex;align-items:center;gap:7px;max-width:1180px;margin:auto}.fgs-top-track{--fgs-top-cols:4;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;min-width:0;flex:1;justify-content:safe center;padding:12px 4px 16px}.fgs-top-track::-webkit-scrollbar{display:none}
.fgs-top-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;flex:0 0 calc((100% - (var(--fgs-top-cols) - 1)*14px)/var(--fgs-top-cols));min-width:0;aspect-ratio:1.34;max-height:230px;overflow:hidden;border:2px solid #a8833f;border-radius:12px;background:radial-gradient(circle at 50% 30%,#30304b,#101521 75%);box-shadow:0 0 0 3px #70501e44,0 0 18px #ffc45a42;color:#fff;scroll-snap-align:start;transition:transform .2s,border-color .2s}
.fgs-top-card:hover{transform:translateY(-4px);border-color:#ffe29b}.fgs-top-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.fgs-top-card:after{content:"";position:absolute;inset:30% 0 0;background:linear-gradient(transparent,#070b14e8);pointer-events:none}.fgs-top-badge{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2;padding:3px 16px;background:linear-gradient(120deg,#4e3210,#9e732c,#3c2912);border:1px solid #d5a64e;border-radius:0 0 9px 9px;color:#ffe4a1;font-size:11px;font-weight:900;white-space:nowrap;letter-spacing:.1em}
.fgs-top-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#d1a958;font-size:54px;opacity:.55}.fgs-top-card-name{position:relative;z-index:2;font-size:clamp(13px,1.4vw,18px);font-weight:900;overflow-wrap:anywhere;padding:0 8px;text-shadow:0 2px 5px #000}.fgs-top-card-cta{position:relative;z-index:2;margin:9px 0 13px;padding:5px 12px;border:1px solid #caa45d;border-radius:5px;background:#191824e0;color:#f9d894;font-weight:900;font-size:10px;letter-spacing:.05em}
.fgs-top-nav{flex:0 0 30px;border:1px solid #2ccfe1;border-radius:8px;background:#112f3b;color:#46eaf5;font-size:34px;line-height:36px;box-shadow:0 0 12px #22d3ee55}.fgs-top-nav[hidden]{visibility:hidden}.fgs-top-nav:disabled{opacity:.25;cursor:default}
.fgs-top-progress{height:4px;max-width:210px;margin:0 auto;background:linear-gradient(to right,#24d7e6 var(--fgs-progress,0%),#23334b var(--fgs-progress,0%));border-radius:10px}.fgs-top-progress[hidden]{display:none}
@media(max-width:800px){.fgs-top-section{padding:8px 10px 17px;margin:8px auto 14px}.fgs-top-section:before{inset:25px 4px 0}.fgs-top-track{--fgs-top-cols:2!important;justify-content:flex-start;gap:9px}.fgs-top-card{flex-basis:calc((100% - 9px)/2);aspect-ratio:1.18}.fgs-top-nav{flex-basis:22px;font-size:24px}.fgs-top-title-row h2{font-size:18px}}
@media(max-width:450px){.fgs-top-track{--fgs-top-cols:1!important}.fgs-top-card{flex-basis:100%;max-height:200px;aspect-ratio:1.65}.fgs-top-section{margin-top:6px}.fgs-top-card-name{font-size:16px}}

@media(max-width:800px){.main-grid>.fgs-top-section{width:100%;max-width:100%;align-self:stretch;order:0}.main-grid>.filters-panel{order:0}.main-grid>.servers-panel{order:1}.main-grid>.right-panel{order:2}}

/* v0.7.5: stały wymiar kart VIP — od 1 do 4 wyśrodkowane, 5+ karuzela */
@media (min-width:801px) {
  .fgs-top-track { --fgs-top-cols:4 !important; justify-content:safe center; }
  .fgs-top-card { flex:0 0 calc((100% - 42px)/4) !important; width:calc((100% - 42px)/4) !important; max-width:calc((100% - 42px)/4) !important; }
}

/* v0.7.6 — nagłówek TOP SERWERY wewnątrz ramki; dyskretna informacja o sponsorowaniu */
.fgs-top-section { padding-top: 29px; }
.fgs-top-section::before { inset: 0 20px 0; }
.fgs-top-heading { position: relative; z-index: 1; margin-bottom: 18px; }
.fgs-top-title-row { margin-bottom: 4px; }
.fgs-top-title-row h2 { margin: 0; line-height: 1.25; }
.fgs-top-caption-row { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.fgs-top-caption-row .fgs-top-caption { margin:0; color:#f7ce7c; font-weight:800; font-size:11px; line-height:1.5; }
.fgs-top-caption-row .fgs-sponsored-label { margin-left:6px; color:#f7ce7c; opacity:.8; font-size:10px; }
.fgs-top-caption-row .fgs-sponsored-help { display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; padding:0; border-radius:50%; border:1px solid #f7ce7c; background:transparent; color:#f7ce7c; font-family:Georgia,serif; font-style:italic; font-size:11px; font-weight:700; line-height:1; cursor:pointer; transition:background .2s,box-shadow .2s; }
.fgs-top-caption-row .fgs-sponsored-help:hover,.fgs-top-caption-row .fgs-sponsored-help:focus-visible { background:#f7ce7c22; box-shadow:0 0 8px #f7ce7c55; outline-offset:3px; }
@media(max-width:800px) { .fgs-top-section { padding-top:24px; } .fgs-top-section::before { inset:0 4px 0; } }

/* v0.7.7 — subtelna ikonka informacji przy VIP */
.fgs-top-caption-row .fgs-sponsored-help {
  width:11px !important; height:11px !important; min-width:11px !important;
  min-height:11px !important; flex:0 0 11px;
  font-size:8px !important; font-style:normal; font-family:Arial,sans-serif;
  font-weight:700; line-height:1; padding:0 !important;
}
.fgs-top-caption-row {gap:5px;}

/* Counter-Strike 1.6 — game-specific server rows */
.fgs-cs16-card{display:grid!important;grid-template-columns:4px minmax(150px,1.15fr) 145px minmax(120px,.75fr) minmax(170px,1fr) auto;gap:15px;align-items:center;min-height:106px;padding:12px 16px!important;background:linear-gradient(100deg,#111a2b,#101624)!important;cursor:pointer}
.fgs-cs16-status{width:4px;height:56px;border-radius:5px;background:#718196}.fgs-cs16-online{background:#2acb85}.fgs-cs16-offline{background:#e75b67}
.fgs-cs16-name{display:grid;gap:7px;min-width:0}.fgs-cs16-name strong{font-size:14px;color:#f3f6fc;overflow-wrap:anywhere}.fgs-cs16-name span{font-size:10px;color:#53cddd;font-weight:700;letter-spacing:.07em}
.fgs-cs16-players{display:flex;gap:10px;align-items:center}.fgs-cs16-players b{font-size:13px;color:#fff;white-space:nowrap}.fgs-cs16-players small{display:block;font-size:10px;color:#92a0b7;margin-top:5px}
.fgs-cs16-ring{height:46px;width:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--cs-fill) var(--cs-percent),#2b3448 0);position:relative}.fgs-cs16-ring:before{content:'';position:absolute;inset:5px;border-radius:50%;background:#121a29}.fgs-cs16-ring span{position:relative;font-size:12px;font-weight:800;color:#fff}
.fgs-cs16-map{display:grid;gap:6px;min-width:0}.fgs-cs16-map small{font-size:9px;color:#8595ac;letter-spacing:.1em}.fgs-cs16-map strong{color:#1bd7ec;font-size:13px;overflow-wrap:anywhere}
.fgs-cs16-address{min-width:0}.fgs-cs16-address strong{font-size:12px;color:#f4f6fa;overflow-wrap:anywhere}.fgs-cs16-address a{font-size:11px;color:#20c9e8;text-decoration:none}
.fgs-cs16-buttons{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;max-width:235px}.fgs-cs16-buttons button,.fgs-cs16-buttons a{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:32px;height:32px;padding:0 7px;border:1px solid #293951;border-radius:6px;background:#152237;color:#e8effb;text-decoration:none;font-size:11px;cursor:pointer}.fgs-cs16-buttons .fgs-cs16-join{color:#041b24;background:#25d4eb;border-color:#25d4eb;font-weight:800}.fgs-cs16-buttons .liked{color:#f4be63}
@media(max-width:1100px){.fgs-cs16-card{grid-template-columns:4px minmax(120px,1fr) 125px minmax(95px,.7fr);}.fgs-cs16-address,.fgs-cs16-buttons{grid-column:2 / -1}.fgs-cs16-buttons{max-width:none;justify-content:flex-start}}
@media(max-width:650px){.fgs-cs16-card{grid-template-columns:4px minmax(0,1fr) auto;gap:9px;padding:13px!important}.fgs-cs16-status{grid-row:1 / 5;height:100%}.fgs-cs16-name{grid-column:2}.fgs-cs16-players{grid-column:3;grid-row:1 / 3}.fgs-cs16-map{grid-column:2}.fgs-cs16-address{grid-column:2 / 4}.fgs-cs16-buttons{grid-column:2 / 4;justify-content:flex-start;gap:6px}.fgs-cs16-buttons button,.fgs-cs16-buttons a{min-height:35px}.fgs-cs16-players small{font-size:9px}.fgs-cs16-ring{height:40px;width:40px;flex-basis:40px}}

/* v0.8.1 — reklamy i szersze okno opisu */
.fgs-ad-slot[hidden],.fgs-ad-desc-bottom[hidden]{display:none!important}.fgs-ad-slot{min-width:0;overflow:hidden;border-radius:11px}.fgs-ad-slot:empty{display:none}
.fgs-ad-link{display:block;position:relative;background:#0e1727;border:1px solid #334455;border-radius:11px;overflow:hidden;text-decoration:none;aspect-ratio:3/2}
.fgs-ad-link img,.fgs-ad-link video{display:block;width:100%;height:100%;object-fit:cover}.fgs-ad-label{position:absolute;z-index:2;top:5px;left:6px;padding:3px 7px;border-radius:5px;background:#08101dbd;color:#d5e5f0;font-size:10px;letter-spacing:.04em}
.fgs-ad-filter{margin:22px 12px 8px}.fgs-ad-sidebar{margin:0 0 14px}.fgs-ad-stats-top{margin:0 auto 18px;max-width:100%}.fgs-ad-stats-top .fgs-ad-link{aspect-ratio:728/90}.fgs-ad-stats-bottom{margin:18px auto 0}.fgs-ad-stats-bottom .fgs-ad-link{aspect-ratio:728/180}
.fgs-description-modal{width:min(1420px,calc(100vw - 24px));max-width:none}.fgs-description-layout{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr) minmax(0,230px);gap:16px;align-items:start}.fgs-description-content{min-width:0;padding:8px 10px}.fgs-ad-desc-side{position:sticky;top:10px}.fgs-ad-desc-bottom{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:24px}
.fgs-metin-media::-webkit-media-controls,.fgs-metin-media::-webkit-media-controls-panel,.fgs-metin-media::-webkit-media-controls-enclosure{display:none!important}
@media(max-width:1050px){.fgs-description-layout{grid-template-columns:minmax(0,165px) minmax(0,1fr) minmax(0,165px)}.fgs-ad-desc-bottom{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.fgs-description-layout{display:block}.fgs-ad-desc-side{display:none!important}.fgs-ad-desc-bottom{grid-template-columns:repeat(2,minmax(0,1fr))}.fgs-ad-stats-top .fgs-ad-link{aspect-ratio:5/1}.fgs-ad-stats-bottom .fgs-ad-link{aspect-ratio:3/1}}

/* 0.8.2: preserve author HTML proportions and keep ad inventory outside its layout */
.fgs-description-modal{width:min(1480px,calc(100vw - 28px))!important;max-width:none!important}
.fgs-description-modal .modal-body{padding:22px!important;overflow-y:auto;overflow-x:hidden}
.fgs-description-layout{display:grid;grid-template-columns: minmax(0,180px) minmax(0,1fr) minmax(0,180px);gap:22px;align-items:start}
.fgs-description-content{min-width:0;width:100%;max-width:100%;padding:0!important;box-sizing:border-box;overflow-wrap:break-word}
.fgs-description-content > *{max-width:100%;box-sizing:border-box}
.fgs-description-content img,.fgs-description-content video,.fgs-description-content iframe{max-width:100%;height:auto}
.fgs-description-content table{width:100%;max-width:100%;table-layout:auto;display:table;overflow-wrap:normal}
.fgs-description-content td,.fgs-description-content th{overflow-wrap:break-word;word-break:normal}
.fgs-description-content [style*="width"]{max-width:100%!important}
.fgs-ad-desc-side{position:sticky;top:8px;align-self:start}
.fgs-ad-stats-top,.fgs-ad-stats-bottom{width:min(728px,100%);margin-left:auto;margin-right:auto}
.fgs-ad-stats-top .fgs-ad-link{aspect-ratio:728/90}.fgs-ad-stats-bottom .fgs-ad-link{aspect-ratio:728/180}
.fgs-ad-stats-top img,.fgs-ad-stats-bottom img{object-fit:contain;background:#0b1424}
@media(max-width:1150px){.fgs-description-layout{grid-template-columns:minmax(0,140px) minmax(0,1fr) minmax(0,140px);gap:12px}}
@media(max-width:850px){.fgs-description-layout{display:block}.fgs-ad-desc-side{display:none!important}.fgs-description-modal .modal-body{padding:14px!important}}
/* Keep the description in the CENTER column even when either ad slot is empty/hidden. */
.fgs-description-layout > #serverDescriptionContent{grid-column:2;grid-row:1}
.fgs-description-layout > #fgsAdDescLeft{grid-column:1;grid-row:1}
.fgs-description-layout > #fgsAdDescRight{grid-column:3;grid-row:1}
@media(max-width:850px){.fgs-description-layout > #serverDescriptionContent{grid-column:auto;grid-row:auto}}

/* v0.8.3 — VIP/Promowane oraz niezależne miejsca reklamowe w opisie */
.server-item.fgs-vip-listing{position:relative;border-color:#d6a528!important;box-shadow:0 0 0 1px rgba(250,193,43,.55),0 0 18px rgba(245,178,19,.36)!important}
.server-item.fgs-promoted-listing:not(.fgs-vip-listing){border-color:#35b9ba!important;box-shadow:0 0 0 1px rgba(53,185,186,.24)}
.fgs-vip-pill,.fgs-vip-ribbon{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(100deg,#ffe28b,#d99a0b);color:#281a00;font-size:11px;font-weight:900;letter-spacing:.08em;padding:5px 12px;border-radius:0 0 8px 0;box-shadow:0 2px 10px rgba(255,184,35,.25)}
.fgs-promoted-pill,.fgs-promoted-ribbon{display:inline-flex;align-items:center;background:#124b52;color:#8ef5ef;font-size:10px;font-weight:800;padding:4px 9px;border-radius:5px}
.fgs-metin-card{position:relative}.fgs-metin-card .fgs-vip-ribbon,.fgs-metin-card .fgs-promoted-ribbon{position:absolute;left:0;top:0;z-index:4;min-width:125px;pointer-events:none}
.fgs-metin-card .fgs-metin-content{position:relative}
.fgs-description-modal .modal-body{position:relative;overscroll-behavior:contain}
.fgs-description-layout{display:grid!important;grid-template-columns:minmax(0,180px) minmax(0,1fr) minmax(0,180px)!important;align-items:stretch!important;gap:18px!important}
.fgs-description-layout > #serverDescriptionContent{grid-column:2!important;grid-row:1!important;min-width:0!important;isolation:isolate}
.fgs-description-layout > #fgsAdDescLeft{grid-column:1!important;grid-row:1!important}
.fgs-description-layout > #fgsAdDescRight{grid-column:3!important;grid-row:1!important}
.fgs-description-layout > .fgs-ad-desc-side{position:sticky!important;top:12px!important;align-self:start!important;overflow:visible!important;z-index:2}
.fgs-description-layout > .fgs-ad-desc-side:empty{display:block!important}
.fgs-ad-desc-bottom{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;margin-top:20px!important;clear:both}
.fgs-ad-desc-bottom .fgs-ad-slot{min-width:0}
.fgs-description-content{min-width:0!important;overflow-wrap:anywhere!important}
.fgs-description-content img{max-width:100%!important}
@media(max-width:1150px){.fgs-description-layout{grid-template-columns:minmax(0,130px) minmax(0,1fr) minmax(0,130px)!important;gap:10px!important}}
@media(max-width:850px){.fgs-description-layout{display:block!important}.fgs-description-layout > .fgs-ad-desc-side{display:none!important}.fgs-ad-desc-bottom{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* v0.8.4: unified VIP ribbons on all game cards */
.server-item.fgs-vip-listing,.server-item.fgs-promoted-listing{position:relative}
.server-item .fgs-vip-ribbon,.server-item .fgs-promoted-ribbon{position:absolute;top:0;left:0;z-index:6;width:130px;min-width:0;max-width:130px;height:28px;padding:0 10px;display:flex;align-items:center;justify-content:center;border-radius:0 0 9px 0;font-size:11px;line-height:1;letter-spacing:.08em;pointer-events:none;box-sizing:border-box}
.server-item .fgs-vip-ribbon{background:linear-gradient(110deg,#ffe38a,#e2a900);color:#241900;box-shadow:0 2px 10px #e4ae2840}
.server-item .fgs-promoted-ribbon{background:#124b52;color:#8ef5ef}
.server-item .fgs-vip-pill,.server-item .fgs-promoted-pill{display:none}
/* Keep native video controls/overlay out of Metin2 server banners. */
.fgs-metin-banner video.fgs-metin-media{pointer-events:none!important;user-select:none!important;-webkit-user-select:none!important}
.fgs-metin-banner video::-webkit-media-controls,.fgs-metin-banner video::-webkit-media-controls-enclosure,.fgs-metin-banner video::-webkit-media-controls-panel,.fgs-metin-banner video::-webkit-media-controls-overlay-play-button,.fgs-metin-banner video::-webkit-media-controls-start-playback-button{display:none!important;opacity:0!important;visibility:hidden!important}
@media(max-width:767px){
 .server-item .fgs-vip-ribbon,.server-item .fgs-promoted-ribbon{display:none!important}
 .server-item .fgs-vip-pill,.server-item .fgs-promoted-pill{display:inline-flex!important;position:static!important;min-width:0;max-width:none;width:auto;height:auto;padding:3px 7px;border-radius:4px;font-size:9px;line-height:1.2;letter-spacing:.02em;white-space:nowrap}
 .fgs-metin-card .fgs-metin-title{display:flex;justify-content:center;align-items:center;gap:7px}
}

/* v0.8.6: optional CS map artwork supplied from uploads */
.fgs-cs16-map{background-position:center;background-size:cover;border-radius:7px;padding:8px;min-height:57px}

/* v0.8.7 — CS 1.6: full-card map artwork, CSS-only edge fades */
.fgs-cs16-card{position:relative;isolation:isolate;overflow:hidden;min-height:142px!important;padding:20px 18px!important;grid-template-columns:4px minmax(135px,1.1fr) minmax(135px,1fr) minmax(130px,.85fr) minmax(140px,.95fr) auto!important;gap:15px!important;background:#0c1524!important;border-color:#1a3754!important}
.fgs-cs16-card .fgs-cs16-art{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(90deg,#0c1524 0%,rgba(12,21,36,.95) 12%,rgba(12,21,36,.56) 33%,rgba(12,21,36,.20) 52%,rgba(12,21,36,.65) 76%,#0c1524 100%),linear-gradient(0deg,rgba(9,16,29,.48),transparent 45%,rgba(9,16,29,.28)),var(--fgs-cs-map-image);background-size:cover;background-position:center center;opacity:.94;transition:transform .35s ease}
.fgs-cs16-card:hover .fgs-cs16-art{transform:scale(1.018)}
.fgs-cs16-card .fgs-cs16-map{background:rgba(8,18,33,.79)!important;backdrop-filter:blur(5px);border:1px solid rgba(125,162,200,.14);border-radius:9px;padding:12px 14px;min-height:66px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.fgs-cs16-card .fgs-cs16-map small{font-size:10px;font-weight:700}
.fgs-cs16-card .fgs-cs16-map strong{font-size:15px}
.fgs-cs16-card .fgs-cs16-name strong{font-size:16px}
.fgs-cs16-card .fgs-cs16-name span:last-child{font-size:11px}
.fgs-cs16-card .fgs-cs16-status{height:62px;width:5px}
.fgs-cs16-card.fgs-vip-listing{border-color:#e5b83c!important;box-shadow:0 0 0 1px #e5b83c,0 0 18px rgba(235,183,44,.23)!important}
.fgs-cs16-card.fgs-promoted-listing{border-color:#29bfc5!important}
@media(max-width:1150px){.fgs-cs16-card{grid-template-columns:4px minmax(130px,1fr) minmax(125px,1fr) minmax(120px,.8fr)!important}.fgs-cs16-address,.fgs-cs16-buttons{grid-column:2 / -1}.fgs-cs16-buttons{max-width:none;justify-content:flex-start}}
@media(max-width:650px){.fgs-cs16-card{grid-template-columns:4px minmax(0,1fr) auto!important;gap:10px!important;min-height:220px!important;padding:14px!important}.fgs-cs16-card .fgs-cs16-art{background-image:linear-gradient(90deg,rgba(12,21,36,.93),rgba(12,21,36,.40),rgba(12,21,36,.80)),linear-gradient(0deg,#0c1524,transparent 65%),var(--fgs-cs-map-image);background-position:center}.fgs-cs16-status{grid-row:1 / 5;height:100%!important}.fgs-cs16-name{grid-column:2}.fgs-cs16-players{grid-column:3;grid-row:1 / 3}.fgs-cs16-map{grid-column:2 / 4;max-width:260px}.fgs-cs16-address{grid-column:2 / 4}.fgs-cs16-buttons{grid-column:2 / 4;justify-content:flex-start;gap:6px}.fgs-cs16-card .fgs-cs16-name strong{font-size:14px}}

/* v0.8.8 — CS 1.6: uporządkowane przyciski, mapa i adres */
.fgs-cs16-card{grid-template-columns:5px minmax(135px,1.05fr) minmax(125px,.92fr) minmax(145px,.95fr) minmax(145px,1.05fr) 126px!important;gap:14px!important}
.fgs-cs16-card .fgs-cs16-map{align-items:center;text-align:center;justify-self:stretch}
.fgs-cs16-card .fgs-cs16-address{display:flex;align-items:center;justify-content:center;text-align:center;min-width:0}
.fgs-cs16-card .fgs-cs16-address strong{font-size:15px;line-height:1.4;overflow-wrap:anywhere;text-shadow:0 1px 6px rgba(0,0,0,.65)}
.fgs-cs16-card .fgs-cs16-buttons{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;width:126px;max-width:none!important;justify-self:end;align-content:center}
.fgs-cs16-card .fgs-cs16-buttons button,.fgs-cs16-card .fgs-cs16-buttons a,.fgs-cs16-card .fgs-cs16-buttons .fgs-cs16-www,.fgs-cs16-card .fgs-cs16-buttons .fgs-cs16-join-disabled{box-sizing:border-box;min-width:0;width:100%;height:44px;border-radius:9px;font-size:14px;display:flex;align-items:center;justify-content:center;gap:4px;text-decoration:none}
.fgs-cs16-card .fgs-cs16-buttons .fgs-cs16-join,.fgs-cs16-card .fgs-cs16-buttons .fgs-cs16-join-disabled{grid-column:1/-1;height:44px;font-size:13px;font-weight:800;letter-spacing:.02em}
.fgs-cs16-card .fgs-cs16-buttons .fgs-cs16-www{flex-direction:column;gap:0;color:#d8e8fc;border:1px solid #293951;background:#152237;font-size:22px;font-weight:700}
.fgs-cs16-card .fgs-cs16-buttons .fgs-cs16-www small{font-size:10px;line-height:1;font-weight:700}
.fgs-cs16-card .fgs-cs16-buttons .fgs-cs16-www-disabled,.fgs-cs16-card .fgs-cs16-buttons .fgs-cs16-join-disabled{opacity:.45;cursor:not-allowed}
.fgs-cs16-card .fgs-cs16-buttons button b{font-size:12px}
@media(max-width:1150px) and (min-width:651px){.fgs-cs16-card{grid-template-columns:5px minmax(110px,1fr) minmax(120px,.9fr) minmax(125px,1fr) 126px!important}.fgs-cs16-card .fgs-cs16-address{grid-column:2/4;grid-row:2;justify-content:flex-start;text-align:left}.fgs-cs16-card .fgs-cs16-buttons{grid-column:5;grid-row:1/3;justify-self:end}.fgs-cs16-card .fgs-cs16-map{grid-column:4;grid-row:1/3}}
@media(max-width:650px){.fgs-cs16-card{grid-template-columns:5px minmax(0,1fr) auto!important;gap:10px!important}.fgs-cs16-card .fgs-cs16-map{grid-column:2/4;max-width:none;width:100%;box-sizing:border-box}.fgs-cs16-card .fgs-cs16-address{grid-column:2/4;justify-content:center;text-align:center}.fgs-cs16-card .fgs-cs16-address strong{font-size:15px}.fgs-cs16-card .fgs-cs16-buttons{grid-column:2/4;grid-row:auto;width:100%;grid-template-columns:repeat(4,minmax(0,1fr));justify-self:stretch}.fgs-cs16-card .fgs-cs16-buttons .fgs-cs16-join,.fgs-cs16-card .fgs-cs16-buttons .fgs-cs16-join-disabled{grid-column:1/-1}.fgs-cs16-card .fgs-cs16-buttons button,.fgs-cs16-card .fgs-cs16-buttons a,.fgs-cs16-card .fgs-cs16-buttons .fgs-cs16-www{height:43px;font-size:13px}.fgs-cs16-card .fgs-cs16-buttons .fgs-cs16-www{font-size:20px}.fgs-cs16-card .fgs-cs16-buttons .fgs-cs16-www small{font-size:9px}}