/* assets/servers-list.css — servers.php (server list). Builds on servers.css (.gt variables), scoped to .sl. */

.sl { --gold: #f5c84c; --gold-2: #ffd968; --gold-edge: rgba(245, 180, 40, .45); --card: rgba(15, 23, 42, .72); --edge: rgba(51, 65, 85, .55); }

/* hero */
.sl-hero {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    margin-bottom: 18px; padding: 26px 28px;
    border: 1px solid var(--edge); border-radius: 22px;
    background:
        radial-gradient(40rem 14rem at 0% 0%, rgba(16, 185, 129, .16), transparent 70%),
        radial-gradient(30rem 12rem at 100% 100%, rgba(59, 130, 246, .10), transparent 70%),
        rgba(15, 23, 42, .6);
}
.sl-hero h1 { margin: 0 0 6px; font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: #f8fafc; }
.sl-hero p { margin: 0 0 14px; color: #94a3b8; font-size: 14px; }
.sl-verified {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
    background: rgba(16, 185, 129, .1); border: 1px solid rgba(52, 211, 153, .3); color: #6ee7b7; font-size: 12px; font-weight: 500;
}
.sl-verified svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.sl-stats { display: flex; gap: 10px; }
.sl-stats div {
    min-width: 96px; padding: 12px 16px; border-radius: 16px; text-align: center;
    background: rgba(2, 6, 23, .55); border: 1px solid var(--edge);
}
.sl-stats b { display: block; font-size: 24px; font-weight: 700; color: #f8fafc; font-variant-numeric: tabular-nums; line-height: 1.2; }
.sl-stats b.on { color: #34d399; }
.sl-stats span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #64748b; }

/* toolbar */
.sl-toolbar { display: flex; gap: 10px; margin-bottom: 12px; }
.sl-search {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 14px; height: 46px;
    background: rgba(15, 23, 42, .8); border: 1px solid var(--edge); border-radius: 14px; transition: border-color .15s, box-shadow .15s;
}
.sl-search:focus-within { border-color: rgba(52, 211, 153, .6); box-shadow: 0 0 0 3px rgba(52, 211, 153, .12); }
.sl-search svg { width: 18px; height: 18px; fill: #64748b; flex: none; }
.sl-search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: #f1f5f9; font-size: 14px; }
.sl-search input::placeholder { color: #64748b; }
.sl-search button {
    height: 34px; padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer;
    background: rgba(51, 65, 85, .7); color: #e2e8f0; font-weight: 600; font-size: 13px;
}
.sl-search button:hover { background: rgba(71, 85, 105, .9); }
.gt .sl-add, .sl-add {
    display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 18px; border-radius: 14px; white-space: nowrap;
    background: linear-gradient(135deg, #10b981, #059669); color: #ecfdf5; font-weight: 700; font-size: 14px;
    box-shadow: 0 8px 24px rgba(16, 185, 129, .25);
}
.gt .sl-add:hover { color: #fff; filter: brightness(1.08); }
.sl-add.block { display: flex; width: 100%; height: 42px; }

/* game chips */
.sl-chips { display: flex; gap: 8px; margin-bottom: 18px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.sl-chips::-webkit-scrollbar { display: none; }
.gt .sl-chips a {
    display: inline-flex; align-items: center; gap: 7px; flex: none; height: 34px; padding: 0 12px; border-radius: 999px;
    border: 1px solid var(--edge); background: rgba(15, 23, 42, .6); color: #cbd5e1; font-weight: 600; font-size: 12.5px;
}
.sl-chips a i { width: 8px; height: 8px; border-radius: 50%; background: var(--g, #34d399); }
.sl-chips a span { color: #64748b; font-weight: 500; }
.gt .sl-chips a:hover { border-color: #475569; color: #f8fafc; }
.gt .sl-chips a.on { background: rgba(16, 185, 129, .14); border-color: rgba(52, 211, 153, .55); color: #a7f3d0; }
.sl-chips a.on span { color: #6ee7b7; }

/* layout */
.sl-cols { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 18px; align-items: start; }
@media (max-width: 999px) { .sl-cols { grid-template-columns: minmax(0, 1fr); } }

/* sections */
.sl-section { margin-bottom: 18px; border: 1px solid var(--edge); border-radius: 20px; background: var(--card); overflow: hidden; }
.sl-section > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid rgba(30, 41, 59, .9); }
.sl-section h2 { margin: 0; font-size: 15px; font-weight: 700; color: #f1f5f9; display: flex; align-items: center; gap: 8px; }
.sl-section h2 small { padding: 2px 8px; border-radius: 999px; background: rgba(51, 65, 85, .6); color: #94a3b8; font-size: 11.5px; font-weight: 600; }
.sl-sort { display: flex; padding: 3px; gap: 2px; border-radius: 11px; background: rgba(2, 6, 23, .6); border: 1px solid rgba(30, 41, 59, .9); }
.gt .sl-sort a { padding: 5px 11px; border-radius: 8px; color: #94a3b8; font-size: 12.5px; font-weight: 600; }
.gt .sl-sort a:hover { color: #f1f5f9; }
.gt .sl-sort a.on { background: rgba(51, 65, 85, .8); color: #f8fafc; }

/* gold PRO section */
.sl-section.gold { border-color: var(--gold-edge); background: linear-gradient(180deg, rgba(245, 180, 40, .10), rgba(15, 23, 42, .75) 70%); box-shadow: 0 0 0 1px rgba(245, 180, 40, .08), 0 18px 50px rgba(245, 180, 40, .07); }
.sl-section.gold > header { border-bottom-color: rgba(245, 180, 40, .22); }
.sl-section.gold h2 { color: var(--gold-2); }
.gt .sl-section.gold > header a { color: var(--gold); font-size: 12.5px; }
.sl-star { color: var(--gold); text-shadow: 0 0 10px rgba(245, 180, 40, .6); }

/* rows */
.sl-head, .sl-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 92px 246px; align-items: center; gap: 12px; padding: 0 18px; }
.sl-head { height: 34px; color: #64748b; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid rgba(30, 41, 59, .9); }
.sl-row { min-height: 62px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(30, 41, 59, .7); transition: background .15s; }
.sl-rows > .sl-row:last-child { border-bottom: 0; }
.sl-row:hover { background: rgba(30, 41, 59, .45); }
.sl-rank { font-weight: 700; color: #94a3b8; font-variant-numeric: tabular-nums; font-size: 13px; }
.sl-rows .sl-row:nth-child(-n+3):not(.gold) .sl-rank { color: #34d399; }
.sl-main { min-width: 0; }
.sl-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sl-game {
    flex: none; padding: 2px 6px; border-radius: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
    color: var(--g); background: color-mix(in srgb, var(--g) 14%, transparent); border: 1px solid color-mix(in srgb, var(--g) 35%, transparent);
}
.sl-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #475569; }
.sl-dot.on { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .18); }
.sl-flag { flex: none; font-size: 14px; line-height: 1; }
.gt .sl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f1f5f9; font-weight: 600; font-size: 13.5px; }
.gt .sl-name:hover { color: #6ee7b7; }
.sl-sub { display: flex; gap: 8px; min-width: 0; margin-top: 4px; font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; }
.sl-sub .sl-map { flex: none; color: #94a3b8; }
.sl-tagline { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sl-tagline::before { content: "·"; margin-right: 8px; color: #475569; }
.sl-pro {
    flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px;
    background: linear-gradient(90deg, #fcd34d, #f59e0b); color: #451a03; font-size: 9.5px; font-weight: 800; line-height: 1.3;
}
.sl-pro svg { width: 10px; height: 10px; fill: currentColor; }
.sl-tag.test { flex: none; padding: 1px 6px; border-radius: 6px; font-size: 9.5px; font-weight: 700; background: rgba(139, 92, 246, .18); color: #c4b5fd; }

.sl-players { min-width: 0; }
.sl-pnum { font-variant-numeric: tabular-nums; font-size: 13px; }
.sl-pnum b { color: #f8fafc; font-weight: 700; }
.sl-pnum span { color: #64748b; }
.sl-bar { margin-top: 5px; height: 5px; border-radius: 999px; background: rgba(51, 65, 85, .7); overflow: hidden; }
.sl-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #059669, #34d399); }
.sl-bar.mid span { background: linear-gradient(90deg, #d97706, #fbbf24); }
.sl-bar.full span { background: linear-gradient(90deg, #dc2626, #f87171); }

.sl-addr { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sl-addr .mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #cbd5e1; font-size: 12px; }
.sl-copy, .gt .sl-play {
    flex: none; height: 26px; padding: 0 9px; border-radius: 8px; font-size: 11.5px; font-weight: 700; cursor: pointer; line-height: 26px;
}
.sl-copy { width: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--edge); background: rgba(2, 6, 23, .5); color: #94a3b8; font-size: 0; }
.sl-copy svg { width: 13px; height: 13px; fill: currentColor; }
.sl-copy.done { color: #34d399; border-color: rgba(52, 211, 153, .5); }
.sl-copy:hover { color: #f1f5f9; border-color: #64748b; }
.gt .sl-play { background: rgba(16, 185, 129, .16); border: 1px solid rgba(52, 211, 153, .4); color: #6ee7b7; }
.gt .sl-play:hover { background: rgba(16, 185, 129, .28); color: #d1fae5; }

/* gold rows */
.sl-row.gold { background: linear-gradient(90deg, rgba(245, 180, 40, .12), rgba(245, 180, 40, .02)); border-bottom-color: rgba(245, 180, 40, .16); }
.sl-row.gold:hover { background: linear-gradient(90deg, rgba(245, 180, 40, .2), rgba(245, 180, 40, .05)); }
.gt .sl-row.gold .sl-name { color: var(--gold-2); text-shadow: 0 0 10px rgba(245, 180, 40, .25); }
.sl-row.gold .sl-rank { font-size: 17px; }
.sl-row.gold .sl-bar span { background: linear-gradient(90deg, #b8860b, #ffd968); }
.sl-row.gold .sl-pnum b, .sl-row.gold .sl-sub .sl-map, .sl-row.gold .sl-addr .mono { color: var(--gold); }
.gt .sl-row.gold .sl-play { background: rgba(245, 180, 40, .18); border-color: var(--gold-edge); color: var(--gold-2); }

.sl-row.spam { opacity: .45; }
.sl-row.spam .sl-pnum { text-decoration: line-through; }
.sl-row.off .sl-name { color: #94a3b8; }

/* empty / pages / banner */
.sl-empty { padding: 36px 18px; text-align: center; color: #94a3b8; }
.sl-empty p { margin: 0 0 14px; }
.sl-pages { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 16px; border-top: 1px solid rgba(30, 41, 59, .9); }
.gt .sl-pages a, .sl-pages .gap { min-width: 36px; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: 600; font-size: 13px; }
.gt .sl-pages a { border: 1px solid var(--edge); background: rgba(2, 6, 23, .5); color: #cbd5e1; }
.gt .sl-pages a:hover { border-color: #64748b; color: #fff; }
.gt .sl-pages a.on { background: #10b981; border-color: #10b981; color: #022c22; }
.sl-pages .gap { color: #64748b; }
.sl-banner { margin-bottom: 18px; display: flex; justify-content: center; }
.sl-banner > * { max-width: 728px; width: 100%; }

/* sidebar */
.sl-card { margin-bottom: 16px; padding: 18px; border: 1px solid var(--edge); border-radius: 20px; background: var(--card); }
.sl-card h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #f1f5f9; }
.sl-card p { margin: 0 0 14px; color: #94a3b8; font-size: 13px; }
.sl-card.cta { background: radial-gradient(18rem 9rem at 100% 0%, rgba(16, 185, 129, .16), transparent 70%), var(--card); }
.gt .sl-link { display: block; margin-top: 10px; text-align: center; font-size: 12.5px; }
.sl-newest { list-style: none; margin: 0; padding: 0; }
.sl-newest li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 0; border-top: 1px solid rgba(30, 41, 59, .8); }
.sl-newest li:first-child { border-top: 0; }
.gt .sl-newest a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #cbd5e1; font-size: 12.5px; }
.gt .sl-newest a:hover { color: #6ee7b7; }


/* phone: rows become cards */
@media (max-width: 720px) {
    .sl-hero { padding: 20px; }
    .sl-hero h1 { font-size: 24px; }
    .sl-stats { width: 100%; }
    .sl-stats div { flex: 1; min-width: 0; padding: 10px 6px; }
    .sl-stats b { font-size: 19px; }
    .sl-toolbar { flex-direction: column; }
    .sl-add { width: 100%; }
    .sl-head { display: none; }
    .sl-row {
        grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "rank main main" "pl pl addr";
        gap: 8px 10px; padding: 12px 14px;
    }
    .sl-rank { grid-area: rank; }
    .sl-main { grid-area: main; }
    .sl-players { grid-area: pl; }
    .sl-addr { grid-area: addr; justify-content: flex-end; }
    .sl-players { display: flex; align-items: center; gap: 10px; }
    .sl-players .sl-bar { flex: 1; margin-top: 0; max-width: 140px; }
    .sl-addr .mono { display: none; }
    .sl-section > header { padding: 12px 14px; }
}