/* ==========================================================================
   LoiNetwork – Serverübersicht im Look der Minecraft-Seiten
   Ergänzt style.css (bleibt unverändert, identisch mit der Minecraft-Seite):
   Pixel-Horizont unter dem Kopfbereich, aufsteigende Pixel-Funken, Block-Raster und
   langsam wandernde Farbschleier im Hintergrund. Nur Optik – keine Funktion ändert sich.
   ========================================================================== */

.page-public {
    --theme-glow-a: rgba(4, 0, 180, .11);
    --theme-glow-b: rgba(63, 163, 77, .10);
    --theme-glow-c: rgba(0, 170, 255, .09);
    --theme-grid: rgba(4, 0, 180, .045);
    --theme-block: rgba(4, 0, 180, .05);
    overflow-x: clip; /* Raster & Schleier sind bildschirmbreit – nie seitlich scrollen */
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .page-public {
        --theme-glow-a: rgba(80, 100, 255, .17);
        --theme-glow-b: rgba(61, 214, 140, .08);
        --theme-glow-c: rgba(0, 170, 255, .08);
        --theme-grid: rgba(150, 170, 255, .045);
        --theme-block: rgba(130, 150, 255, .06);
    }
}
:root[data-theme="dark"] .page-public {
    --theme-glow-a: rgba(80, 100, 255, .17);
    --theme-glow-b: rgba(61, 214, 140, .08);
    --theme-glow-c: rgba(0, 170, 255, .08);
    --theme-grid: rgba(150, 170, 255, .045);
    --theme-block: rgba(130, 150, 255, .06);
}

/* 1) Weiche Farbschleier (Blau, Grün, Cyan), die ganz langsam wandern – fest hinter der ganzen Seite */
.page-public::before {
    content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
    background:
        radial-gradient(38% 32% at 14% 34%, var(--theme-glow-a), transparent 70%),
        radial-gradient(34% 30% at 86% 52%, var(--theme-glow-b), transparent 70%),
        radial-gradient(46% 34% at 50% 96%, var(--theme-glow-c), transparent 70%),
        radial-gradient(30% 26% at 70% 18%, var(--theme-glow-a), transparent 70%);
    animation: theme-aurora 46s ease-in-out infinite alternate;
}
@keyframes theme-aurora {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(3%, -2.5%, 0) scale(1.06); }
    100% { transform: translate3d(-3%, 2%, 0) scale(1.02); }
}

/* 2) Kopfbereich endet in einem Pixel-Horizont (32-px-Blöcke, bis zu 3 Blöcke tief) */
.page-public .hero { padding-bottom: 112px; }
.page-public .hero .hero-bg {
    -webkit-mask:
        linear-gradient(#000 0 0) top / 100% calc(100% - 95px) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 3' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Cpath d='M0 0H20V2H19V1H16V2H14V3H12V2H11V1H8V2H5V1H3V2H0Z'/%3E%3C/svg%3E") calc(50% - 16px) bottom / 640px 96px repeat-x;
    mask:
        linear-gradient(#000 0 0) top / 100% calc(100% - 95px) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 3' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Cpath d='M0 0H20V2H19V1H16V2H14V3H12V2H11V1H8V2H5V1H3V2H0Z'/%3E%3C/svg%3E") calc(50% - 16px) bottom / 640px 96px repeat-x;
}

/* 3) Kleine Pixel-Funken im Kopfbereich, die langsam aufsteigen */
.page-public .hero .hero-bg::before {
    content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 4px; pointer-events: none;
    box-shadow:
        6vw 220px 0 rgba(255, 255, 255, .55), 14vw 120px 0 rgba(110, 231, 168, .7), 22vw 300px 0 0 rgba(255, 255, 255, .4),
        31vw 80px 0 rgba(140, 200, 255, .65), 38vw 260px 0 rgba(255, 255, 255, .5), 47vw 160px 0 rgba(110, 231, 168, .55),
        55vw 340px 0 rgba(255, 255, 255, .35), 63vw 60px 0 rgba(140, 200, 255, .6), 71vw 230px 0 rgba(255, 255, 255, .5),
        79vw 130px 0 rgba(110, 231, 168, .6), 86vw 290px 0 rgba(255, 255, 255, .4), 93vw 90px 0 rgba(140, 200, 255, .55),
        10vw 380px 0 rgba(140, 200, 255, .45), 43vw 30px 0 rgba(255, 255, 255, .45), 67vw 400px 0 rgba(110, 231, 168, .45),
        89vw 380px 0 rgba(255, 255, 255, .35), 26vw 190px 0 -1px rgba(255, 255, 255, .6), 58vw 210px 0 -1px rgba(255, 255, 255, .6);
    animation: theme-sparks 14s ease-in-out infinite alternate;
}
@keyframes theme-sparks {
    0% { transform: translateY(0); opacity: .9; }
    50% { opacity: .45; }
    100% { transform: translateY(-46px); opacity: 1; }
}

/* 4) Block-Raster (32-px-Blöcke) mit vereinzelt „gefüllten“ Blöcken – beginnt genau an der Oberkante des
      Pixel-Horizonts (Serverbereich liegt 64 px im Kopfbereich → Raster 32 px darüber) und passt zu dessen Kanten. */
.servers-section::before, .servers-section::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    top: -32px; left: 50%; width: 100vw; height: 1800px; transform: translateX(-50%);
}
.servers-section::before {
    background-image:
        linear-gradient(var(--theme-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--theme-grid) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: center top;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 600px, transparent 1700px);
    mask-image: linear-gradient(180deg, #000 0, #000 600px, transparent 1700px);
}
.servers-section::after {
    background: var(--theme-block);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cg fill='%23000'%3E%3Crect x='32' y='32' width='64' height='32'/%3E%3Crect x='160' y='96' width='32' height='32'/%3E%3Crect x='64' y='160' width='32' height='64'/%3E%3Crect x='224' y='192' width='32' height='32'/%3E%3Crect x='0' y='224' width='32' height='32'/%3E%3Crect x='128' y='0' width='32' height='32'/%3E%3Crect x='192' y='0' width='32' height='32'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(180deg, #000 0, #000 600px, transparent 1700px);
    -webkit-mask-size: 256px 256px, 100% 100%;
    -webkit-mask-position: calc(50% - 16px) top, 0 0;
    -webkit-mask-repeat: repeat, no-repeat;
    -webkit-mask-composite: source-in;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cg fill='%23000'%3E%3Crect x='32' y='32' width='64' height='32'/%3E%3Crect x='160' y='96' width='32' height='32'/%3E%3Crect x='64' y='160' width='32' height='64'/%3E%3Crect x='224' y='192' width='32' height='32'/%3E%3Crect x='0' y='224' width='32' height='32'/%3E%3Crect x='128' y='0' width='32' height='32'/%3E%3Crect x='192' y='0' width='32' height='32'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(180deg, #000 0, #000 600px, transparent 1700px);
    mask-size: 256px 256px, 100% 100%;
    mask-position: calc(50% - 16px) top, 0 0;
    mask-repeat: repeat, no-repeat;
    mask-composite: intersect;
}

/* 5) Leiste mit Filtern & Suche als Glasfläche über dem Horizont */
.page-public .toolbar {
    background: color-mix(in srgb, var(--card) 88%, transparent);
    backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
}

/* 6) Karten: dezenter Farbschein der Spielfarbe beim Darüberfahren (wie auf der Minecraft-Seite) */
.page-public .server-card { position: relative; }
.page-public .server-card:hover {
    box-shadow: 0 2px 4px rgba(10, 14, 60, .05), 0 22px 44px -22px color-mix(in srgb, var(--game) 55%, transparent);
}

/* 7) Kopfzeile wie auf der Minecraft-Seite (dort hub.css): angemeldet = Name + Abmelden */
.member-chip { display: inline-flex; align-items: center; gap: 2px; padding: 3px 3px 3px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); }
.member-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .88rem; color: var(--ink-2); border-radius: 999px; transition: color .15s, background .15s; }
.site-header .main-nav a.member-name { padding: 4px 8px; border-radius: 999px; }
.member-name:hover { color: var(--brand-text); background: var(--brand-soft); }
.site-header .main-nav a.member-logout {
    width: 30px; height: 30px; padding: 0; border-radius: 50%; display: grid; place-items: center; color: var(--muted);
    transition: background .15s, color .15s;
}
.site-header .main-nav a.member-logout:hover { background: var(--bad-soft); color: var(--bad); }

@media (max-width: 720px) {
    .page-public .hero { padding-bottom: 104px; }
    .main-nav a.hide-sm { display: none; }
    .site-header:not(.admin-header) .header-inner { gap: 10px; }
    .site-header:not(.admin-header) .brand { flex-shrink: 1; min-width: 0; }
    .site-header:not(.admin-header) .brand img { height: auto; max-height: 22px; max-width: 100%; }
    .site-header:not(.admin-header) .main-nav { flex-shrink: 0; gap: 6px; }
    .site-header:not(.admin-header) .main-nav a { padding: 8px 10px; font-size: .9rem; }
    .site-header:not(.admin-header) .nav-admin { padding: 8px 9px; }
    .site-header:not(.admin-header) .theme-toggle { width: 34px; height: 34px; }
    /* Handy: nur das Personen-Symbol als Link zu "Mein Konto" (Abmelden liegt dort) */
    .member-chip { padding: 2px; gap: 0; }
    .member-label, .site-header .main-nav a.member-logout { display: none; }
    .site-header .main-nav a.member-name { width: 30px; height: 30px; padding: 0; justify-content: center; }
}
@media (max-width: 360px) {
    .site-header:not(.admin-header) .main-nav a:not(.nav-admin) { padding: 7px 8px; }
}
/* Handy: Status & Whitelist unter den Namen statt daneben – der Name bekommt die Breite und wird nicht zerhackt */
@media (max-width: 560px) {
    .page-public .card-head { flex-wrap: wrap; row-gap: 10px; }
    .page-public .card-head .card-title { flex: 1 1 0; }
    .page-public .card-head-badges { flex-direction: row; flex-wrap: wrap; align-items: center; flex-basis: 100%; margin-top: 0; padding-left: 66px; }
    .page-public .card-title h2 { overflow-wrap: break-word; }
}
@media (prefers-reduced-motion: reduce) {
    .page-public::before, .page-public .hero .hero-bg::before { animation: none; }
}