/* -------------------------
   Imports
------------------------- */

.jersey-10-regular {
  font-family: "Jersey 10", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.silkscreen-regular {
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.silkscreen-bold {
  font-family: "Silkscreen", sans-serif;
  font-weight: 700;
  font-style: normal;
}





/* -------------------------
   Basic
------------------------- */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    min-height: 100%;

    font-family: Arial, Helvetica, sans-serif;

    background: #000;
    color: #fff;
}


/* -------------------------
   Topbar
------------------------- */

.topbar {
    width: 100%;

    margin: 0;
    padding: 0px;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 32px;
    border: 0px;

    background: #055214;
    border-bottom: 2px solid #087a20;

    font-family: "Silkscreen", sans-serif;
    font-size: 30px;
    font-weight: 600;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.topbar h1 {
    margin: 0px;
    border: 0px;
}



/* -------------------------
   Server list
------------------------- */

.server-list {
    width: 100%;

    padding: 30px;

    display: flex;
    flex-direction: column;

    gap: 15px;
}


/* -------------------------
   Server card
------------------------- */

.server-card {
    width: 100%;

    padding: 20px;

    display: grid;
    grid-template-columns: 1fr 120px 160px 110px 170px 160px;
    align-items: center;

    background: #111;

    border: 1px solid #292929;
    border-radius: 6px;
}

.server-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.server-info-ip {
    display: flex;
    align-items: center;
    flex-direction: row;

    gap: 5px;
}

.serer-network-icon {
    width: 16px;
    height: 16px;

    filter: invert(70%);
}

.server-card.online {
    position: relative;
    overflow: hidden;

    background: #111;
    isolation: isolate;
}

.server-card.online {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background: #111;

    animation: ambient-online 3s ease-in-out infinite;
}


/* Haupt-Hintergrund */
.server-card.online::before {
    content: "";

    position: absolute;
    inset: -100px;

    z-index: -1;

    background:
        radial-gradient(
            ellipse at 20% 30%,
            rgba(0, 180, 50, 0.40),
            transparent 55%
        ),
        radial-gradient(
            ellipse at 80% 70%,
            rgba(0, 100, 35, 0.35),
            transparent 55%
        ),
        radial-gradient(
            ellipse at 50% 100%,
            rgba(0, 220, 70, 0.20),
            transparent 60%
        );

    filter: blur(35px);

    animation: ambient-flow 12s ease-in-out infinite alternate;
}


/* Wandernder Lichtfleck */
.server-card.online::after {
    content: "";

    position: absolute;
    inset: -50%;

    z-index: -1;

    background: radial-gradient(
        ellipse,
        rgba(0, 255, 80, 0.18),
        transparent 50%
    );

    background-size: 200% 200%;

    animation: ambient-light 20s ease-in-out infinite;
}


/* Bewegung der grünen Flächen */
@keyframes ambient-flow {
    0% {
        transform: translate(-5%, -5%) scale(1);
    }

    50% {
        transform: translate(10%, 5%) scale(1.15);
    }

    100% {
        transform: translate(-5%, 12%) scale(1.05);
    }
}


/* Licht bewegt sich über die Karte */
@keyframes ambient-light {
    0% {
        background-position: 0% 0%;
    }

    25% {
        background-position: 100% 50%;
    }

    50% {
        background-position: 100% 100%;
    }

    75% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 0% 0%;
    }
}


/* Äußerer Glow */
@keyframes ambient-online {
    0%, 100% {
        box-shadow:
            0 0 8px rgba(0, 200, 60, 0.25);
    }

    50% {
        box-shadow:
            0 0 22px rgba(0, 200, 60, 0.55);
    }
}

.server-card.offline {
    background: linear-gradient(
        90deg,
        rgba(200, 0, 0, 0.25),
        #111 60%
    );
}

.server-card.work {
    background:
        linear-gradient(
            90deg,
            #111 0%,
            rgba(0, 0, 255, 0.35) 50%,
            #111 100%
        );

    background-size: 200% 100%;
    animation: work-animation 8s linear infinite;
}

@keyframes work-animation {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}



.server-info h2 {
    margin: 0 0 5px 0;

    font-size: 20px;
}

.server-info p {
    margin: 0;

    color: #888;
}


/* -------------------------
   Status
------------------------- */

.server-status {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 8px;

    color: #20d34a;
}

.server-status.offline {
    color: rgba(200, 0, 0, 0.9);
}

.server-status.work {
    color: rgba(0, 160, 200, 0.9);
}

.status-dot {
    width: 10px;
    height: 10px;

    display: block;

    background: currentColor;

    border-radius: 50%;
}

/* -------------------------
   Start Button
------------------------- */

.start-button {
    width: 80px;
    height: 40px;

    padding: 0px;
    border-radius: 15px;
    border: 0px;

    background: darkgreen;
    color: #fff;

    font-family: "Silkscreen", sans-serif;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}

.start-button:hover {
    background: green;
}

.start-button:disabled {
    background: #555;
    color: #aaa;

    cursor: not-allowed;
}


/*------------------------
    CPU
------------------------*/

.server-cpu {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 8px;

    color: #00ffff;
}

.cpu-icon {
    width: 28px;
    height: 28px;

    filter:
        brightness(0)
        saturate(100%)
        invert(89%)
        sepia(100%)
        saturate(1000%)
        hue-rotate(130deg)
        brightness(105%)
        contrast(105%);
}


/* -------------------------
   Memory
------------------------- */

.server-memory {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 8px;

    color: #c8ab5a;
}

.memory-icon {
    width: 32px;
    height: 32px;

    filter:
        invert(67%)
        sepia(35%)
        saturate(600%)
        hue-rotate(5deg)
        brightness(180%);
}

/* -------------------------
   Server Timer
------------------------- */

.server-timer {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 8px;

    color: gray;
}