/* ==== Server-Karten (Startseite + Server-Seite) ==== */

/* Akzentfarbe je Spielmodus (überschreibt die nth-child-Farben aus style.css) */
.server-card[data-mode=deathmatch]{--a:var(--c1)}
.server-card[data-mode=only]{--a:var(--c2)}
.server-card[data-mode=gungame]{--a:var(--c3)}
.server-card[data-mode=minigames]{--a:var(--c4)}
.server-card[data-mode=deathrun]{--a:var(--c5)}
.server-card[data-mode=zombie]{--a:var(--c6)}
.server-card[data-mode=other]{--a:var(--muted)}

/* Halbtransparentes Map-Foto als Kartenhintergrund */
.server-card>.sc-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.sc-bg img{width:100%;height:100%;object-fit:cover;opacity:.3;transform:scale(1.03);transition:opacity .35s,transform .6s}
.sc-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 25%,transparent) 0%,color-mix(in srgb,var(--bg) 78%,transparent) 100%)}
.server-card:hover .sc-bg img{opacity:.5;transform:scale(1.08)}

.server-mode{color:var(--a);background:color-mix(in srgb,var(--a) 14%,transparent);border-color:color-mix(in srgb,var(--a) 38%,transparent);white-space:nowrap}
.server-map{overflow-wrap:anywhere;line-height:1.2}
.sc-name{color:var(--muted);font-size:.86rem;margin-top:-6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.server-ip{display:block;width:100%;text-align:left;cursor:copy;font-family:inherit;transition:border-color .2s,color .2s}
button.server-ip.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
button.server-ip:hover{border-color:var(--a);color:var(--text)}
button.server-ip.copied{border-color:var(--c4);color:var(--t4)}
.server-card.is-full .bar i{background:repeating-linear-gradient(90deg,var(--c1) 0 6px,transparent 6px 9px)}
.server-card .server-bottom{min-height:36px}
.server-card .server-bottom>span{font-weight:500;color:var(--text)}

/* Offline */
.server-card.is-offline{filter:grayscale(.85);opacity:.6}
.server-card.is-offline:hover{transform:none;box-shadow:var(--shadow)}
.server-card.is-offline::before{box-shadow:none;opacity:.4}
.sc-off{color:var(--muted);font-weight:600}
.sc-off::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--muted)}

/* ==== Server-Seite ==== */
.srv-page{padding-top:56px;padding-bottom:120px}
.srv-summary{display:flex;gap:14px;flex-wrap:wrap}
.srv-pill{display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:12px;font-size:.9rem;color:var(--muted)}
.srv-pill b{font:700 1.5rem/1 'Chakra Petch',sans-serif;color:var(--text)}

.srv-toolbar{padding:16px 18px;margin-bottom:26px;display:flex;flex-direction:column;gap:14px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 68px);z-index:5}
.srv-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.srv-search{flex:1 1 220px;min-width:0;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:light-dark(rgba(255,255,255,.7),rgba(0,0,0,.25));color:var(--text);font:500 .92rem Inter,sans-serif}
.srv-search:focus,.srv-select:focus{outline:2px solid var(--c5);outline-offset:1px}
.srv-select{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:light-dark(rgba(255,255,255,.7),rgba(0,0,0,.25));color:var(--text);font:500 .9rem Inter,sans-serif}
.srv-check{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muted);cursor:pointer;user-select:none}
.srv-check input{accent-color:var(--c6);width:16px;height:16px}

.srv-chips{display:flex;gap:8px;flex-wrap:wrap}
.srv-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:600 .84rem Inter,sans-serif;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.srv-chip i{font-style:normal;font-size:.74rem;color:var(--muted);font-weight:600}
.srv-chip:hover{border-color:var(--a,var(--c6));transform:translateY(-1px)}
.srv-chip[aria-pressed=true]{border-color:var(--a,var(--c6));background:color-mix(in srgb,var(--a,var(--c6)) 18%,transparent)}
.srv-chip[data-mode=deathmatch]{--a:var(--c1)}.srv-chip[data-mode=only]{--a:var(--c2)}.srv-chip[data-mode=gungame]{--a:var(--c3)}
.srv-chip[data-mode=minigames]{--a:var(--c4)}.srv-chip[data-mode=deathrun]{--a:var(--c5)}.srv-chip[data-mode=zombie]{--a:var(--c6)}
.srv-chip[data-mode=other]{--a:var(--muted)}

/* Raster: skaliert von 1 Spalte (Handy) bis 4 Spalten (30 Server übersichtlich) */
.srv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.srv-grid .server-card{padding:18px;gap:11px}
.srv-grid .server-map{font-size:1.12rem}
.srv-empty{grid-column:1/-1;color:var(--muted);text-align:center;padding:40px 0}
.srv-empty[hidden]{display:none}
.server-card[hidden]{display:none}

/* Startseite: Hinweis, falls keine Daten */
.server-grid .srv-empty{padding:24px 0}

@media(max-width:900px){
  .srv-page{padding-top:36px}
  .srv-toolbar{position:static}
  .srv-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}
@media(max-width:560px){.srv-grid{grid-template-columns:1fr}.srv-select{flex:1}}
@media(prefers-reduced-motion:reduce){.sc-bg img{transition:none}}