:root {
    --red: #d93628;
    --red-bright: #ef4635;
    --green: #39e56d;

    --page: #080808;
    --text: #f2f0eb;
    --muted: #aaa69f;

    --shell: 1440px;
    --header-height: 86px;

    --ui-font:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --display-font:
        Impact,
        Haettenschweiler,
        "Arial Narrow Bold",
        "Arial Black",
        sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--page);
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    margin: 0;
    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(122, 45, 26, 0.07),
            transparent 38rem
        ),
        var(--page);

    color: var(--text);
    font-family: var(--ui-font);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/*
|--------------------------------------------------------------------------
| HOMEPAGE CONTINUOUS BACKGROUND
|--------------------------------------------------------------------------
|
| One shared surface behind the server, feature and lower status sections.
| This keeps the diagonal texture running continuously down the homepage.
|
*/

body > main {
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.012) 0,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px,
            transparent 14px
        ),
        radial-gradient(
            circle at 50% 18%,
            rgba(217, 54, 40, 0.055),
            transparent 38rem
        ),
        radial-gradient(
            circle at 10% 40%,
            rgba(217, 54, 40, 0.035),
            transparent 24rem
        ),
        radial-gradient(
            circle at 90% 72%,
            rgba(217, 54, 40, 0.032),
            transparent 26rem
        ),
        linear-gradient(
            180deg,
            #080808 0%,
            #070707 58%,
            #050505 100%
        );
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    color: inherit;
    font: inherit;
}

.shell {
    width: min(calc(100% - 48px), var(--shell));
    margin-inline: auto;
}

:focus-visible {
    outline: 2px solid var(--red-bright);
    outline-offset: 4px;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
    position: relative;
    z-index: 40;

    min-height: var(--header-height);

    background: rgba(4, 4, 4, 0.99);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header-inner {
    min-height: var(--header-height);

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 42px;
}

.rust-brand {
    min-width: max-content;

    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.rust-brand-logo {
    width: 92px;
    height: 58px;
    flex: 0 0 auto;

    display: block;
    object-fit: contain;
}

.rust-brand-name {
    display: grid;
    gap: 2px;
}

.rust-brand-name strong {
    color: #f5f3ef;
    font-size: 0.96rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    line-height: 1;
}

.rust-brand-name small {
    color: var(--red-bright);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.34em;
    line-height: 1;
}

.primary-nav {
    justify-self: center;

    display: flex;
    align-items: center;
    gap: clamp(20px, 2vw, 40px);
}

.primary-nav a {
    position: relative;

    padding: 34px 0 29px;

    color: #b8b4ae;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    white-space: nowrap;
}

.primary-nav a::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 17px;

    width: 0;
    height: 2px;

    background: var(--red);
    transform: translateX(-50%);
    transition: width 160ms ease;
}

.primary-nav a:hover,
.primary-nav a.is-active {
    color: #fff;
}

.primary-nav a:hover::after,
.primary-nav a.is-active::after {
    width: 100%;
}

.nav-toggle {
    display: none;
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.button {
    min-height: 50px;
    padding: 0 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid transparent;
    border-radius: 2px;

    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-align: center;
    white-space: nowrap;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
}

.button--header {
    min-height: 46px;
    padding-inline: 24px;

    background: rgba(8, 8, 8, 0.7);
    border-color: rgba(217, 54, 40, 0.85);
    color: #ff5c49;
}

.button--primary {
    min-width: 188px;

    background: linear-gradient(180deg, #db3a2b, #a82219);
    border-color: rgba(255, 100, 80, 0.55);
    color: #fff;
}

.button--secondary {
    min-width: 188px;

    background: rgba(5, 5, 5, 0.7);
    border-color: rgba(255, 255, 255, 0.42);
    color: #f4f2ee;
}

.button--header:hover,
.button--secondary:hover {
    background: rgba(217, 54, 40, 0.12);
    border-color: var(--red);
}


/* ==========================================================================
   HERO
   ========================================================================== */

.rust-hero {
    min-height: 610px;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: flex;
    align-items: center;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.rust-hero-background {
    position: absolute;
    inset: 0;
    z-index: -3;

    background:
        url("../images/rust-hero.webp")
        center 48% / cover
        no-repeat;
}

.rust-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.34) 0%,
            rgba(0, 0, 0, 0.13) 30%,
            rgba(0, 0, 0, 0.08) 50%,
            rgba(0, 0, 0, 0.16) 72%,
            rgba(0, 0, 0, 0.36) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.14) 0%,
            rgba(0, 0, 0, 0.05) 48%,
            rgba(0, 0, 0, 0.86) 100%
        );
}

.rust-hero::after {
    content: "";

    position: absolute;
    inset: auto 0 0;
    z-index: -1;

    height: 130px;

    background: linear-gradient(to bottom, transparent, var(--page));
}

.rust-hero-inner {
    padding-block: 74px 88px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.rust-hero-content {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;

    text-align: center;
}

.rust-hero h1 {
    margin: 0;

    display: grid;
    justify-items: center;

    font-family: var(--display-font);
    line-height: 0.84;
    text-transform: uppercase;
}

.rust-hero h1 span {
    color: #f1efea;
    font-size: clamp(4.8rem, 7vw, 8rem);
    letter-spacing: 0.02em;
    white-space: nowrap;

    text-shadow:
        0 3px 0 rgba(0, 0, 0, 0.75),
        0 18px 46px rgba(0, 0, 0, 0.6);
}

.rust-hero h1 strong {
    margin-top: 16px;

    color: var(--red);
    font-size: clamp(5.9rem, 8.7vw, 9.7rem);
    font-weight: 900;
    letter-spacing: 0.02em;

    text-shadow:
        0 3px 0 #69140f,
        0 18px 48px rgba(0, 0, 0, 0.65);
}

.rust-hero-content > p {
    margin: 30px 0 0;

    color: rgba(242, 240, 235, 0.84);
    font-size: clamp(0.72rem, 1vw, 0.94rem);
    font-weight: 900;
    letter-spacing: 0.27em;
}

.rust-hero-actions {
    margin-top: 32px;

    display: flex;
    justify-content: center;
    gap: 16px;
}


/* ==========================================================================
   SERVER SECTION
   ========================================================================== */

.rust-servers {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 72px 0 112px;

    background: transparent;
}

.rust-servers::before {
    content: none;
    display: none;
}

.section-heading {
    margin-bottom: 38px;
    text-align: center;
}

/* OUR MAIN RUST SERVER */
.section-heading-kicker {
    margin: 0 0 11px !important;

    color: var(--red-bright) !important;
    font-size: 0.68rem !important;
    font-weight: 900;
    letter-spacing: 0.24em !important;
    line-height: 1.2;
    text-transform: uppercase;
}

/* BARELY ALIVE MAIN SERVER */
.section-heading h2 {
    margin: 0;

    color: #f0eee9;
    font-family: var(--display-font);
    font-size: clamp(2.8rem, 4.5vw, 4.5rem);
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;

    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.9),
        0 18px 40px rgba(0, 0, 0, 0.62);
}

.section-heading h2::before,
.section-heading h2::after {
    content: "";

    width: clamp(50px, 5vw, 88px);
    height: 2px;
    margin: 0 24px 0.25em;

    display: inline-block;

    background: linear-gradient(
        90deg,
        transparent,
        var(--red)
    );
}

.section-heading h2::after {
    background: linear-gradient(
        90deg,
        var(--red),
        transparent
    );
}

.server-empty-state {
    min-height: 220px;
    padding: 38px;

    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;

    background: linear-gradient(145deg, #151412, #090909);
    border: 1px solid rgba(217, 54, 40, 0.38);

    text-align: center;
}

.server-empty-state strong {
    letter-spacing: 0.14em;
}

.server-empty-state span {
    color: var(--muted);
}

.rust-server-list {
    width: 100%;
    max-width: 1450px;
    margin-inline: auto;

    display: block;
}


/* ==========================================================================
   SERVER CARD POSITION CONTROLS
   --------------------------------------------------------------------------
   Change only these values to move or resize each item.

   LEFT / TOP = position.
   WIDTH / HEIGHT = size.

   Percentages are based on the full server-card image.
   ========================================================================== */

.rust-server-card {
    /* Card shell */
    --card-ratio-width: 1450;
    --card-ratio-height: 369;

    /* Dynamic server artwork */
    --image-left: 2.85%;
    --image-top: 6.80%;
    --image-width: 31.75%;
    --image-height: 86.30%;

    /* Online badge, relative to the server artwork */
    --status-left: 8.25%;
    --status-top: 4.50%;

    /* Server title block */
    --title-left: 37.20%;
    --title-top: 7.40%;
    --title-width: 33.60%;
    --title-height: 45.00%;

    /* Players online */
    --players-left: 34.55%;
    --players-top: 63.00%;
    --players-width: 11.50%;
    --players-height: 25.00%;

    /* Joining dial content */
    --joining-left: 46.00%;
    --joining-top: 58.50%;
    --joining-width: 12.60%;
    --joining-height: 34.00%;

    /* Maximum players */
    --max-left: 59.50%;
    --max-top: 63.00%;
    --max-width: 10.75%;
    --max-height: 25.00%;

    /* Right rail: next wipe */
    --wipe-left: 74.55%;
    --wipe-top: 9.00%;
    --wipe-width: 21.70%;
    --wipe-height: 18.80%;

    /* Right rail: wipe schedule */
    --schedule-left: 74.55%;
    --schedule-top: 27.40%;
    --schedule-width: 21.70%;
    --schedule-height: 18.80%;

    /* Right rail: server type */
    --type-left: 74.55%;
    --type-top: 44.80%;
    --type-width: 21.70%;
    --type-height: 18.80%;


    /* View server button */
    --button-left: 73.55%;
    --button-top: 71.50%;
    --button-width: 21.70%;
    --button-height: 15.60%;

    width: 100%;
    min-width: 0;
    aspect-ratio: var(--card-ratio-width) / var(--card-ratio-height);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    container-type: inline-size;

    background: transparent;
    box-shadow: none;
    filter: none;
    text-shadow: none;
    transform: none;
    transition: none;
    animation: none;
    will-change: auto;
}


/* Panel shell image */
.rust-server-card::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background:
        url("../images/server-panel-background.webp")
        center / 100% 100%
        no-repeat;
}

.rust-server-card::after {
    content: none;
}

.rust-server-edge {
    display: none;
}

/* The card itself never lifts, glows, scales, or animates on interaction. */
.rust-server-card:hover,
.rust-server-card:focus,
.rust-server-card:focus-visible,
.rust-server-card:focus-within,
.rust-server-card:active {
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
}

/* Protect the positioned card layers from inherited hover movement or glow. */
.rust-server-card:hover .rust-server-image,
.rust-server-card:hover .rust-server-body,
.rust-server-card:hover .rust-server-heading,
.rust-server-card:hover .rust-server-live-grid,
.rust-server-card:hover .rust-server-joining,
.rust-server-card:hover .rust-server-rail {
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}


/* ==========================================================================
   DYNAMIC SERVER IMAGE
   ========================================================================== */

.rust-server-image {
    position: absolute;
    left: var(--image-left);
    top: var(--image-top);
    z-index: 1;

    width: var(--image-width);
    height: var(--image-height);
    min-width: 0;
    min-height: 0;
    overflow: hidden;

    background-image: var(--server-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    filter: none;
}

.rust-server-image::before {
    content: none;
}

.rust-server-image::after {
    content: none;
}

.rust-server-card.is-offline .rust-server-image::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 2;

    background: rgba(0, 0, 0, 0.48);
    pointer-events: none;
}

.rust-server-image-shade {
    display: none;
}

.server-live-badge {
    position: absolute;
    left: var(--status-left);
    top: var(--status-top);
    z-index: 5;

    min-height: clamp(24px, 2.35cqw, 35px);
    padding: 0 clamp(9px, 0.95cqw, 15px);

    display: inline-flex;
    align-items: center;
    gap: clamp(6px, 0.55cqw, 9px);

    background: rgba(3, 3, 3, 0.90);
    border: 1px solid rgba(255, 255, 255, 0.15);

    color: #bab7b1;
    font-size: clamp(0.48rem, 0.62cqw, 0.62rem);
    font-weight: 900;
    letter-spacing: 0.11em;
    line-height: 1;
}

.server-live-badge i {
    width: clamp(6px, 0.55cqw, 8px);
    height: clamp(6px, 0.55cqw, 8px);
    flex: 0 0 auto;

    border-radius: 50%;
    background: #777;
}

.rust-server-card.is-online .server-live-badge {
    color: var(--green);
    border-color: rgba(57, 229, 109, 0.36);
}

.rust-server-card.is-online .server-live-badge i {
    background: var(--green);
}

.rust-server-card.is-offline .server-live-badge {
    color: #ff6a57;
    border-color: rgba(217, 54, 40, 0.40);
}

.rust-server-card.is-offline .server-live-badge i {
    background: var(--red);
}


/* ==========================================================================
   SERVER TITLE
   ========================================================================== */

.rust-server-body {
    position: absolute;
    inset: 0;
    z-index: 4;

    min-width: 0;
    min-height: 0;

    background: transparent;
}

.rust-server-heading {
    position: absolute;
    left: var(--title-left);
    top: var(--title-top);

    width: var(--title-width);
    height: var(--title-height);
    min-width: 0;
    min-height: 0;
    padding: 0;

    display: grid;
    align-content: center;

    border: 0;
}

.rust-server-title {
    min-width: 0;
    margin: 0;

    font-family: var(--display-font);
    line-height: 0.96;
    text-transform: uppercase;
}

.rust-server-title > span {
    display: block;

    color: #f1efea;
    font-size: clamp(1.55rem, 2.90cqw, 2.75rem);
    letter-spacing: 0.045em;
}

.rust-server-title > strong {
    margin-top: clamp(3px, 0.45cqw, 7px);

    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: clamp(4px, 0.55cqw, 8px);

    color: #f1efea;
    font-size: clamp(1.85rem, 3.45cqw, 3.25rem);
    font-weight: 900;
    letter-spacing: 0.015em;
}

.rust-server-title b {
    color: inherit;
    font-weight: 900;
}

.rust-server-title b.is-accent {
    color: var(--red-bright);
}

.rust-server-title i {
    color: rgba(242, 240, 235, 0.48);
    font-style: normal;
    font-weight: 400;
}

/* Tags are deliberately removed from the layout. */
.server-tags {
    display: none !important;
}

.rust-server-description {
    max-width: 100%;
    margin: clamp(7px, 0.75cqw, 12px) 0 0;

    color: #96918a;
    font-size: clamp(0.48rem, 0.62cqw, 0.68rem);
    font-weight: 800;
    letter-spacing: 0.15em;
    line-height: 1.35;
    text-transform: uppercase;
}


/* ==========================================================================
   LIVE SERVER VALUES
   ========================================================================== */

.rust-server-live-grid {
    position: absolute;
    inset: 0;

    min-width: 0;
    min-height: 0;

    background: transparent;
}

.rust-server-stat {
    min-width: 0;
    min-height: 0;
    padding: 0;

    display: grid;
    place-items: center;
    align-content: center;
    gap: clamp(4px, 0.55cqw, 8px);

    text-align: center;
}

.rust-server-stat:first-child {
    position: absolute;
    left: var(--players-left);
    top: var(--players-top);

    width: var(--players-width);
    height: var(--players-height);
}

.rust-server-stat:last-child {
    position: absolute;
    left: var(--max-left);
    top: var(--max-top);

    width: var(--max-width);
    height: var(--max-height);
}

.rust-server-stat > span,
.rust-server-joining > span {
    color: #918d87;
    font-size: clamp(0.42rem, 0.53cqw, 0.59rem);
    font-weight: 900;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}

.rust-server-stat > strong {
    color: #f2f0eb;
    font-family: var(--display-font);
    font-size: clamp(2.35rem, 4.55cqw, 4.9rem);
    letter-spacing: 0.02em;
    line-height: 0.82;
}


/* ==========================================================================
   JOINING DIAL CONTENT
   ========================================================================== */

.rust-server-joining {
    position: absolute;
    left: var(--joining-left);
    top: var(--joining-top);

    width: var(--joining-width);
    height: var(--joining-height);
    min-width: 0;
    min-height: 0;
    margin: 0;

    display: grid;
    place-items: center;
    align-content: center;
    gap: clamp(2px, 0.30cqw, 4px);

    border: 0;
    border-radius: 0;
    background: transparent;
}

.rust-server-joining::before,
.rust-server-joining::after {
    content: none;
}

.rust-server-joining > strong {
    max-width: 100%;

    color: #f4f2ed;
    font-family: var(--display-font);
    font-size: clamp(1.30rem, 2.05cqw, 2.55rem);
    letter-spacing: 0.025em;
    line-height: 0.9;
    text-align: center;
    white-space: nowrap;
}

.rust-server-joining-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(3px, 0.40cqw, 6px);
}

.rust-server-joining-dots i {
    width: clamp(4px, 0.45cqw, 7px);
    height: clamp(4px, 0.45cqw, 7px);

    border-radius: 50%;
    background: rgba(217, 54, 40, 0.42);
    opacity: 1;
    transform: scale(1);
    animation: none;
}

.rust-server-card [data-server-joining].is-active {
    color: var(--green);
}

@keyframes rustJoiningDot {
    0% {
        opacity: 0.35;
        transform: scale(0.78);
    }

    100% {
        opacity: 1;
        transform: scale(1.18);
    }
}

.rust-server-card [data-server-joining].is-active + .rust-server-joining-dots i {
    background: var(--green);
    animation: rustJoiningDot 620ms ease-in-out infinite alternate;
}

.rust-server-card [data-server-joining].is-active + .rust-server-joining-dots i:nth-child(2) {
    animation-delay: 140ms;
}

.rust-server-card [data-server-joining].is-active + .rust-server-joining-dots i:nth-child(3) {
    animation-delay: 280ms;
}


/* ==========================================================================
   RIGHT INFORMATION RAIL — TEXT ONLY
   ========================================================================== */

.rust-server-rail {
    position: absolute;
    inset: 0;
    z-index: 4;

    min-width: 0;
    min-height: 0;
    padding: 0;

    background: transparent;
}

.rust-server-rail-item {
    min-width: 0;
    min-height: 0;

    padding:
        clamp(4px, 0.50cqw, 8px)
        clamp(14px, 1.10cqw, 18px);

    display: grid;
    align-content: center;
    gap: clamp(2px, 0.28cqw, 4px);

    border: 0;
    text-align: left;
}

.rust-server-rail-item:nth-child(1) {
    position: absolute;
    left: var(--wipe-left);
    top: var(--wipe-top);

    width: var(--wipe-width);
    height: var(--wipe-height);
}

.rust-server-rail-item:nth-child(2) {
    position: absolute;
    left: var(--schedule-left);
    top: var(--schedule-top);

    width: var(--schedule-width);
    height: var(--schedule-height);
}

.rust-server-rail-item:nth-child(3) {
    position: absolute;
    left: var(--type-left);
    top: var(--type-top);

    width: var(--type-width);
    height: var(--type-height);
}

.rust-server-rail-item::before,
.rust-server-rail-item::after {
    content: none !important;
    display: none !important;
}

.rust-server-rail-item > i,
.rust-server-rail-item > svg,
.rust-server-rail-item > img,
.rust-server-rail-item > picture,
.rust-server-rail-item > [aria-hidden="true"],
.rust-server-rail-item > .icon,
.rust-server-rail-item > .rail-icon,
.rust-server-rail-item > .server-rail-icon,
.rust-server-rail-item > .rust-server-rail-icon {
    display: none !important;
}

.rust-server-rail-item > span {
    color: #8f8b85;
    font-size: clamp(0.40rem, 0.50cqw, 0.58rem);
    font-weight: 900;
    letter-spacing: 0.15em;
    line-height: 1.2;
    text-transform: uppercase;
}

.rust-server-rail-item > strong {
    color: var(--red-bright);
    font-family: var(--display-font);

    /* Increase this to make the orange information larger */
    font-size: clamp(1rem, 1.65cqw, 1.8rem);

    letter-spacing: 0.04em;
    line-height: 1.05;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}


/* ==========================================================================
   VIEW SERVER LINK — TEXT OVER THE BUTTON BUILT INTO THE PANEL IMAGE
   ========================================================================== */

.button--server {
    position: absolute;
    left: var(--button-left);
    top: var(--button-top);
    z-index: 5;

    width: var(--button-width);
    height: var(--button-height);
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: 0;
    border-radius: 0;
    clip-path: none;
    box-shadow: none;
    filter: none;

    color: #fff;
    cursor: pointer;
    font-family: var(--display-font);
    font-size: clamp(1rem, 1.55cqw, 1.65rem);
    font-weight: 900;
    letter-spacing: 0.10em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    text-shadow: none;

    transform: none;
    transition: none;
    animation: none;
}

.button--server::before,
.button--server::after {
    content: none;
    display: none;
}

.button--server:hover,
.button--server:focus,
.button--server:focus-visible,
.button--server:active {
    background: transparent;
    border: 0;
    box-shadow: none;
    filter: none;
    color: #fff;
    transform: none;
    transition: none;
    animation: none;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
    background: #050505;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.site-footer-inner {
    min-height: 126px;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 34px;
}

.rust-brand--footer .rust-brand-logo {
    width: 74px;
    height: 46px;
}

.site-footer p {
    justify-self: center;
    margin: 0;

    color: #74716c;
    font-size: 0.70rem;
}

.site-footer-inner > a:last-child {
    color: #aaa69f;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

/* ==========================================================================
   WHY PLAY ON BARELY ALIVE — IMAGE PANEL CARDS
   ========================================================================== */

.rust-features {
    position: relative;
    isolation: isolate;
    overflow: visible;

    padding: 74px 0 82px;

    background: transparent;
    border: 0;
}

.rust-features::before {
    content: none;
    display: none;
}

.rust-features-heading {
    width: 100%;
    margin: 0 0 40px;

    text-align: center;
}

.rust-features-heading > span {
    display: block;

    margin: 0 0 10px;

    color: var(--red-bright);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.25em;
    line-height: 1;

    text-transform: uppercase;
}

.rust-features-heading h2 {
    margin: 0;

    color: #f2f0eb;
    font-family: var(--display-font);
    font-size: clamp(2.7rem, 4.1vw, 4.2rem);
    font-weight: 900;
    letter-spacing: 0.075em;
    line-height: 1;

    text-align: center;
    text-transform: uppercase;

    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.95),
        0 18px 42px rgba(0, 0, 0, 0.65);
}

.rust-features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}


/* ==========================================================================
   FEATURE PANEL IMAGE
   ========================================================================== */

.rust-feature-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
    aspect-ratio: 1651 / 497;

    min-width: 0;
    min-height: 0;
    padding: 0;

    display: block;

    background:
        url("../images/rust-feature-panel.webp")
        center / 100% 100%
        no-repeat;

    border: 0;
    box-shadow: none;
}


/* The panel artwork already contains all the frame,
   metal, red lights and mechanical details. */

.rust-feature-card::before,
.rust-feature-card::after {
    content: none;
    display: none;
}


/* ==========================================================================
   ICON POSITION
   ========================================================================== */

.rust-feature-icon {
    position: absolute;

    left: 6.0%;
    top: 17%;

    width: 20%;
    height: 66%;

    display: grid;
    place-items: center;

    background: transparent;
    border: 0;
    box-shadow: none;
}


.rust-feature-icon::before,
.rust-feature-icon::after {
    content: none;
    display: none;
}


.rust-feature-icon img {
    width: 88%;
    height: 88%;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 7px
            rgba(239, 70, 53, 0.30)
        );
}


/* ==========================================================================
   FEATURE TEXT POSITION
   ========================================================================== */

.rust-feature-content {
    position: absolute;

    left: 35%;
    top: 19%;

    width: 62%;
    height: 62%;

    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.rust-feature-content h3 {
    margin: 0;

    color: #f2f0eb;

    font-family: var(--display-font);

    font-size:
        clamp(
            1.05rem,
            1.55cqw,
            1.55rem
        );

    font-weight: 900;

    letter-spacing: 0.045em;
    line-height: 0.95;

    text-transform: uppercase;

    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.90);
}


.rust-feature-content p {
    max-width: 94%;

    margin: 8px 0 0;

    color: #9b9690;

    font-size:
        clamp(
            0.42rem,
            0.53cqw,
            0.58rem
        );

    font-weight: 800;

    letter-spacing: 0.105em;
    line-height: 1.45;

    text-transform: uppercase;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1000px) {

    .rust-features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 620px) {

    .rust-features-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

}

/* ==========================================================================
   CURRENT WIPE LEADER + NEXT WIPE
   ========================================================================== */

.rust-home-status {
    position: relative;
    isolation: isolate;

    padding: 0 0 104px;

    background: transparent;
}


.rust-home-status-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(0, 0.88fr);

    gap: 20px;
}


/* ==========================================================================
   SHARED PANEL
   ========================================================================== */

.rust-home-leader,
.rust-home-wipe {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height: 320px;
    padding: 34px 38px;

    background:
        radial-gradient(
            circle at 18% 10%,
            rgba(217, 54, 40, 0.09),
            transparent 17rem
        ),
        linear-gradient(
            145deg,
            #171717 0%,
            #0b0b0b 48%,
            #060606 100%
        );

    border: 1px solid rgba(255, 255, 255, 0.085);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 24px 48px rgba(0, 0, 0, 0.26);
}


.rust-home-leader::before,
.rust-home-wipe::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.009) 0,
            rgba(255, 255, 255, 0.009) 1px,
            transparent 1px,
            transparent 15px
        );
}


.rust-home-panel-accent {
    position: absolute;

    top: 0;
    left: 38px;

    width: 130px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--red-bright),
            transparent
        );

    box-shadow:
        0 0 14px rgba(217, 54, 40, 0.38);
}


/* ==========================================================================
   TITLES
   ========================================================================== */

.rust-home-leader-heading > span,
.rust-home-wipe-heading > span {
    display: block;

    color: var(--red-bright);

    font-size: 0.61rem;
    font-weight: 900;
    letter-spacing: 0.22em;

    text-transform: uppercase;
}


.rust-home-leader-heading h2,
.rust-home-wipe-heading h2 {
    margin: 8px 0 0;

    color: #f2f0eb;

    font-family: var(--display-font);
    font-size: clamp(2rem, 3vw, 3.25rem);
    font-weight: 900;

    letter-spacing: 0.065em;
    line-height: 1;

    text-transform: uppercase;
}


/* ==========================================================================
   CURRENT LEADER
   ========================================================================== */

/*
 * CURRENT WIPE LEADER ONLY
 * Artwork: /rust/assets/images/current-wipe-leader-panel.webp
 *
 * Manual controls below move ONLY the live leader content.
 */

.rust-home-leader {
    --leader-avatar-left: 9.5%;
    --leader-avatar-top: 36.5%;
    --leader-avatar-width: 24.0%;
    --leader-avatar-height: 36.0%;

    --leader-name-left: 43.5%;
    --leader-name-top: 31.0%;
    --leader-name-width: 47.0%;
    --leader-name-height: 16.0%;

    --leader-points-left: 43.5%;
    --leader-points-top: 55.5%;
    --leader-points-width: 46.0%;
    --leader-points-height: 19.0%;

    --leader-button-left: 38.0%;
    --leader-button-top: 80.5%;
    --leader-button-width: 55.5%;
    --leader-button-height: 11.0%;

    min-height: 0;
    padding: 0;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    aspect-ratio: 1536 / 1024;

    background: transparent;

    border: 0;
    box-shadow: none;
}


/* Mechanical leader panel sits OVER the avatar */
.rust-home-leader::before {
    content: "" !important;

    position: absolute;
    inset: 0;
    z-index: 2;

    display: block !important;

    background:
        url("../images/current-wipe-leader-panel.webp")
        center / 100% 100%
        no-repeat;

    pointer-events: none;
}

.rust-home-leader::after {
    content: none !important;
    display: none !important;
}

.rust-home-leader > .rust-home-panel-accent,
.rust-home-leader > .rust-home-leader-heading {
    display: none !important;
}


/* Existing PHP player row becomes a transparent positioning layer. */
.rust-home-leader > .rust-home-leader-player {
    position: absolute;
    inset: 0;
    z-index: auto;

    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;

    display: block;

    background: transparent;
    border: 0;
}


/* Hide the old #1 because the new artwork is the leader panel. */
.rust-home-leader .rust-home-leader-rank {
    display: none !important;
}


/* Avatar */
.rust-home-leader .rust-home-leader-avatar {
    position: absolute;
    left: var(--leader-avatar-left);
    top: var(--leader-avatar-top);
    z-index: 1;

    width: var(--leader-avatar-width);
    height: var(--leader-avatar-height);

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    display: grid;
    place-items: center;

    background: #080808;
    border: 0;
    border-radius: 50%;
}

.rust-home-leader .rust-home-leader-avatar img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;
    border-radius: 50%;
}


/* Name */
   .rust-home-leader .rust-home-leader-details {
    position: absolute;
    left: var(--leader-name-left);
    top: var(--leader-name-top);
    z-index: 3;

    width: var(--leader-name-width);
    height: var(--leader-name-height);

    min-width: 0;
    min-height: 0;
    padding: 0 3%;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0;

    text-align: center;
    overflow: hidden;
}

.rust-home-leader .rust-home-leader-details > span {
    display: none;
}

.rust-home-leader .rust-home-leader-details > strong {
    min-width: 0;
    max-width: 100%;

    color: #f2f0eb;

    font-family: var(--display-font);
    font-size: clamp(1.2rem, 3.25cqw, 3.1rem);
    font-weight: 900;

    letter-spacing: 0.035em;
    line-height: 0.95;

    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;
}


/* Points */
.rust-home-leader .rust-home-leader-points {
    position: absolute;
    left: var(--leader-points-left);
    top: var(--leader-points-top);
    z-index: 3;

    width: var(--leader-points-width);
    height: var(--leader-points-height);

    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0;

    text-align: center;
    border: 0;
}

.rust-home-leader .rust-home-leader-points > strong {
    color: var(--red-bright);

    font-family: var(--display-font);
    font-size: clamp(2rem, 6.2cqw, 5.8rem);
    font-weight: 900;

    letter-spacing: 0.03em;
    line-height: 0.9;

    white-space: nowrap;
}

.rust-home-leader .rust-home-leader-points > span {
    display: none;
}


/* Existing leaderboard button text over the image button area. */
.rust-home-leader > .rust-home-panel-button {
    position: absolute;
    left: var(--leader-button-left);
    top: var(--leader-button-top);
    z-index: 5;

    width: var(--leader-button-width);
    height: var(--leader-button-height);

    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0 4%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: 0;
    box-shadow: none;

    color: #f2f0eb;

    font-family: var(--display-font);
    font-size: clamp(0.8rem, 2.05cqw, 1.95rem);
    font-weight: 900;

    letter-spacing: 0.075em;
    line-height: 1;

    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}


/* Empty leader state */
.rust-home-leader > .rust-home-leader-empty {
    position: absolute;
    left: var(--leader-name-left);
    top: var(--leader-name-top);
    z-index: 4;

    width: var(--leader-name-width);
    height: 42%;

    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0 3%;

    display: grid;
    place-items: center;
    align-content: center;
    gap: 0;

    background: transparent;
    border: 0;

    text-align: center;
}

.rust-home-leader > .rust-home-leader-empty span {
    display: none;
}


/* ==========================================================================
   PANEL BUTTON
   ========================================================================== */

.rust-home-panel-button {
    min-height: 46px;
    margin-top: 22px;
    padding: 0 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            180deg,
            #d93b2c,
            #a7241b
        );

    border: 1px solid rgba(255, 95, 75, 0.50);

    color: #fff;

    font-size: 0.64rem;
    font-weight: 900;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


/* ==========================================================================
   NEXT WIPE
   ========================================================================== */

.rust-home-wipe {
    display: flex;
    flex-direction: column;
}


.rust-home-wipe-countdown {
    margin-top: 32px;

    color: #f2f0eb;

    font-family: var(--display-font);
    font-size: clamp(2.8rem, 4.4vw, 4.8rem);

    font-weight: 900;

    letter-spacing: 0.055em;
    line-height: 1;

    white-space: nowrap;

    text-shadow:
        0 0 22px rgba(217, 54, 40, 0.13);
}


.rust-home-wipe-details {
    margin-top: 19px;

    display: grid;
    gap: 4px;
}


.rust-home-wipe-details span {
    color: #77736e;

    font-size: 0.54rem;
    font-weight: 900;
    letter-spacing: 0.17em;
}


.rust-home-wipe-details strong {
    color: var(--red-bright);

    font-family: var(--display-font);
    font-size: 1.5rem;

    letter-spacing: 0.055em;
    line-height: 1.1;

    text-transform: uppercase;
}


.rust-home-wipe-footer {
    margin-top: auto;
    padding-top: 20px;

    display: flex;
    align-items: center;
    gap: 11px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.07);

    color: #98948e;

    font-size: 0.55rem;
    font-weight: 900;

    letter-spacing: 0.13em;
}


.rust-home-wipe-footer i {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--red-bright);
}


.rust-home-wipe-footer strong {
    margin-left: auto;

    color: #f2f0eb;

    font-family: var(--display-font);
    font-size: 1.15rem;

    letter-spacing: 0.07em;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {

    .rust-home-status-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .rust-home-status {
        padding-bottom: 74px;
    }


    .rust-home-leader,
    .rust-home-wipe {
        min-height: 0;
        padding: 27px 22px;
    }


    .rust-home-leader-player {
        grid-template-columns:
            48px
            60px
            minmax(0, 1fr);

        gap: 12px;
        padding: 14px;
    }


    .rust-home-leader-avatar {
        width: 58px;
        height: 58px;
    }


    .rust-home-leader-rank {
        height: 56px;
    }


    .rust-home-leader-rank strong {
        font-size: 3rem;
    }


    .rust-home-leader-points {
        grid-column: 2 / -1;

        width: 100%;
        min-width: 0;

        padding-top: 12px;

        display: flex;
        align-items: baseline;
        justify-content: space-between;

        border-top:
            1px solid
            rgba(255, 255, 255, 0.06);
    }


    .rust-home-wipe-countdown {
        white-space: normal;
    }

}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1200px) {
    .site-header-inner {
        gap: 24px;
    }

    .primary-nav {
        gap: 19px;
    }

    .primary-nav a {
        font-size: 0.63rem;
    }

    .button--header {
        padding-inline: 17px;
        font-size: 0.63rem;
    }

    .rust-brand-name {
        display: none;
    }

    .rust-hero {
        min-height: 590px;
    }

    /*
     * Keep the mechanical panel at a usable width.
     * The positions remain exact and the row scrolls horizontally when needed.
     */
    .rust-server-list {
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 12px;

        scrollbar-width: thin;
        scrollbar-color:
            rgba(217, 54, 40, 0.70)
            rgba(255, 255, 255, 0.06);
    }

    .rust-server-card {
        min-width: 1050px;
    }
}

@media (max-width: 980px) {
    .shell {
        width: min(calc(100% - 34px), var(--shell));
    }

    .site-header-inner {
        grid-template-columns: auto auto;
        justify-content: space-between;
    }

    .rust-brand-name {
        display: grid;
    }

    .nav-toggle {
        width: 46px;
        height: 42px;
        padding: 10px;

        display: grid;
        align-content: center;
        gap: 5px;

        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.18);

        cursor: pointer;
    }

    .nav-toggle span {
        height: 2px;
        background: #f1efea;
    }

    .primary-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;

        padding: 15px 18px 22px;

        display: none;
        grid-template-columns: 1fr 1fr;
        gap: 0;

        background: rgba(5, 5, 5, 0.99);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .primary-nav.is-open {
        display: grid;
    }

    .primary-nav a {
        padding: 14px 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .primary-nav a::after {
        display: none;
    }

    .button--header {
        display: none;
    }

    .rust-hero {
        min-height: 560px;
    }

    .site-footer-inner {
        grid-template-columns: 1fr;
        justify-items: center;

        padding-block: 28px;
        gap: 17px;

        text-align: center;
    }
}

@media (max-width: 720px) {
    .shell {
        width: min(calc(100% - 24px), var(--shell));
    }

    .site-header-inner {
        min-height: 72px;
    }

    .rust-brand-logo {
        width: 72px;
        height: 46px;
    }

    .rust-brand-name strong {
        font-size: 0.76rem;
        letter-spacing: 0.17em;
    }

    .rust-brand-name small {
        font-size: 0.67rem;
    }

    .rust-hero {
        min-height: 520px;
        align-items: flex-end;
    }

    .rust-hero-background {
        background-position: 54% center;
    }

    .rust-hero-overlay {
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.22) 0%,
            rgba(0, 0, 0, 0.44) 46%,
            rgba(0, 0, 0, 0.92) 100%
        );
    }

    .rust-hero-inner {
        padding: 78px 0 66px;
    }

    .rust-hero h1 span {
        font-size: clamp(3rem, 14.5vw, 5rem);
        white-space: normal;
    }

    .rust-hero h1 strong {
        margin-top: 10px;
        font-size: clamp(4rem, 19vw, 6.4rem);
    }

    .rust-hero-content > p {
        margin-top: 23px;
        font-size: 0.63rem;
        letter-spacing: 0.17em;
    }

    .rust-hero-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .rust-hero-actions .button {
        min-width: 0;
        padding-inline: 13px;
        font-size: 0.63rem;
    }

    .rust-servers {
        padding: 52px 0 74px;
    }

    .section-heading h2 {
        font-size: clamp(2rem, 10vw, 3.1rem);
        letter-spacing: 0.07em;
    }

    .section-heading h2::before,
    .section-heading h2::after {
        display: none;
    }

    .section-heading p {
        font-size: 0.59rem;
        letter-spacing: 0.14em;
    }

    .rust-server-list {
        gap: 20px;
    }
}

@media (max-width: 440px) {
    .rust-brand-name {
        display: none;
    }

    .primary-nav {
        grid-template-columns: 1fr;
    }

    .rust-hero-actions {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   REDUCED MOTION — FINAL OVERRIDE
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* ==========================================================================
   INDIVIDUAL SERVER PAGE
   ========================================================================== */

.rust-server-page {
    min-height: calc(100vh - var(--header-height));
    background:
        radial-gradient(
            circle at 50% 0,
            rgba(217, 54, 40, 0.09),
            transparent 34rem
        ),
        linear-gradient(
            180deg,
            #090909 0%,
            #070707 52%,
            #050505 100%
        );
}

.rust-server-detail {
    padding: 46px 0 38px;
}

/* ==========================================================================
   ALL RUST SERVERS IMAGE BUTTON
   ========================================================================== */

.rust-server-back {
    /* Change this value to resize the whole button */
    --rust-back-button-width: 250px;

    width: var(--rust-back-button-width);
    aspect-ratio: 1200 / 325;
    margin-bottom: 18px;

    display: block;

    background:
        url("../images/rust-all-servers-button.webp")
        center / 100% 100%
        no-repeat;

    border: 0;
    box-shadow: none;

    /* Hide the old HTML arrow and writing */
    color: transparent;
    font-size: 0;
    line-height: 0;

    transform: none;
    transition: none;
}

.rust-server-back span {
    display: none;
}

.rust-server-back:hover,
.rust-server-back:focus,
.rust-server-back:active {
    filter: none;
    box-shadow: none;
    transform: none;
}

.rust-server-detail-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(217, 54, 40, 0.70)
        rgba(255, 255, 255, 0.06);
}

.button--server.is-disabled {
    cursor: not-allowed;
    opacity: 0.48;
}


/* ==========================================================================
   LIVE PLAYERS
   ========================================================================== */

.rust-live-players {
    padding: 12px 0 110px;
}

.rust-live-players-panel {
    width: 100%;
    aspect-ratio: 1536 / 1024;
    padding: clamp(24px, 3vw, 44px);

    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        url("../images/rust-live-players-panel.webp")
        center / 100% 100%
        no-repeat;

    border: 0;
    box-shadow: none;
}

.rust-live-players-panel::before {
    content: none;
    display: none;
}

.rust-live-players-header {
    padding-bottom: 26px;

    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.rust-live-players-kicker {
    display: block;

    color: var(--red-bright);
    font-size: 0.63rem;
    font-weight: 900;
    letter-spacing: 0.18em;
}

.rust-live-players-header h1 {
    margin: 7px 0 0;

    color: #f2f0eb;
    font-family: var(--display-font);
    font-size: clamp(2.5rem, 4vw, 4.4rem);
    letter-spacing: 0.08em;
    line-height: 0.95;
    text-transform: uppercase;
}

.rust-live-players-header p {
    margin: 10px 0 0;

    color: #8f8b85;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.rust-live-player-total {
    min-width: 174px;
    min-height: 86px;
    padding: 12px 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    background: rgba(3, 3, 3, 0.64);
    border: 1px solid rgba(255, 255, 255, 0.10);

    font-family: var(--display-font);
    line-height: 1;
}

.rust-live-player-total strong:first-child {
    color: var(--red-bright);
}

.rust-live-player-total strong {
    color: #f2f0eb;
    font-size: clamp(2.2rem, 3.4vw, 3.6rem);
    letter-spacing: 0.03em;
}

.rust-live-player-total span {
    color: #67645f;
    font-size: 1.45rem;
}

.rust-live-player-grid {
    margin-top: 28px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.rust-live-player {
    min-width: 0;
    min-height: 82px;
    padding: 13px 15px;

    display: flex;
    align-items: center;
    gap: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(23, 22, 20, 0.98),
            rgba(10, 10, 10, 0.98)
        );

    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: none;
    filter: none;
    transform: none;
    transition: none;
}

.rust-live-player-avatar {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;

    position: relative;
    overflow: hidden;

    display: grid;
    place-items: center;

    background: #111;
    border: 1px solid rgba(217, 54, 40, 0.54);

    color: #7f7a73;
    font-family: var(--display-font);
    font-size: 1.55rem;
}

.rust-live-player-avatar img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
}

.rust-live-player-name {
    min-width: 0;

    color: #f2f0eb;
    font-size: 0.86rem;
    font-weight: 900;
    letter-spacing: 0.035em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.rust-live-player-empty {
    min-height: 220px;
    padding: 36px;

    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;

    text-align: center;
}

.rust-live-player-empty[hidden] {
    display: none;
}

.rust-live-player-empty strong {
    color: #f1efea;
    font-family: var(--display-font);
    font-size: clamp(1.55rem, 2.8vw, 2.5rem);
    letter-spacing: 0.08em;
}

.rust-live-player-empty span {
    color: #85817b;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.10em;
}


/* ==========================================================================
   SERVER PAGE RESPONSIVE
   ========================================================================== */

@media (max-width: 1180px) {
    .rust-live-player-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .rust-live-players-header {
        align-items: stretch;
        flex-direction: column;
    }

    .rust-live-player-total {
        min-width: 0;
        width: 100%;
    }

    .rust-live-player-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .rust-server-detail {
        padding-top: 28px;
    }

    .rust-live-players {
        padding-bottom: 72px;
    }

    .rust-live-player-grid {
        grid-template-columns: 1fr;
    }

    .rust-live-player {
        min-height: 76px;
    }
}

.rust-server-not-found {
    padding: 90px 0 120px;
}
/* ==========================================================================
   FIXED 20-PLAYER PAGE
   --------------------------------------------------------------------------
   Desktop layout:
   - 4 players across
   - 5 fixed rows
   - 20 players maximum per page
   - additional players use PREVIOUS / NEXT
   - the player area never grows vertically
   ========================================================================== */

.rust-live-player-stage {
    height: 466px;
    min-height: 466px;
    margin-top: 28px;

    position: relative;
    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(217, 54, 40, 0.70)
        rgba(255, 255, 255, 0.06);
}

.rust-live-player-stage::-webkit-scrollbar {
    height: 8px;
}

.rust-live-player-stage::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
}

.rust-live-player-stage::-webkit-scrollbar-thumb {
    background: rgba(217, 54, 40, 0.70);
}

.rust-live-player-grid {
    width: 100%;
    min-width: 1040px;
    height: 466px;
    margin-top: 0;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(5, 82px);
    grid-auto-rows: 82px;
    align-content: start;
    gap: 14px;
}

.rust-live-player-grid[hidden] {
    display: none;
}

.rust-live-player {
    height: 82px;
    min-height: 82px;
    max-height: 82px;
}

.rust-live-player-empty {
    width: 100%;
    height: 466px;
    min-height: 466px;
    padding: 36px;
}

.rust-live-player-pagination {
    min-height: 58px;
    margin-top: 18px;
    padding-top: 16px;

    display: grid;
    grid-template-columns: 150px 1fr 150px;
    align-items: center;
    gap: 18px;

    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/*
 * Keep the pagination row's space reserved when there is only one page.
 * This prevents the outer panel changing height as players join or leave.
 */
.rust-live-player-pagination[hidden] {
    display: grid;
    visibility: visible;
    pointer-events: auto;
}

.rust-live-player-page-button {
    min-height: 42px;
    padding: 0 18px;

    background: rgba(7, 7, 7, 0.88);
    border: 1px solid rgba(217, 54, 40, 0.52);

    color: #f2f0eb;
    cursor: pointer;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.rust-live-player-page-button:disabled {
    cursor: default;
    opacity: 0.65;
}

.rust-live-player-page-status {
    justify-self: center;

    color: #9a9690;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
}


/* ==========================================================================
   FIXED PLAYER AREA RESPONSIVE
   --------------------------------------------------------------------------
   The 4 x 5 player layout stays intact.
   Smaller screens scroll horizontally instead of stretching the panel.
   ========================================================================== */

@media (max-width: 860px) {
    .rust-live-player-pagination {
        grid-template-columns: 112px 1fr 112px;
        gap: 10px;
    }

    .rust-live-player-page-button {
        padding-inline: 10px;
        font-size: 0.59rem;
    }

    .rust-live-player-page-status {
        font-size: 0.59rem;
        letter-spacing: 0.10em;
    }
}

@media (max-width: 560px) {
    .rust-live-player-pagination {
        grid-template-columns: 1fr 1fr;
    }

    .rust-live-player-page-status {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .rust-live-player-page-button {
        grid-row: 2;
    }
}

/* ==========================================================================
   POSITION CONTROLS
   ========================================================================== */

.rust-live-players-panel {

    /* Panel image */
    --live-panel-ratio-width: 1536;
    --live-panel-ratio-height: 1024;

    /* Kicker: CURRENT SERVER POPULATION */
    --live-kicker-left: 9.45%;
    --live-kicker-top: 8.20%;
    --live-kicker-width: 55%;
    --live-kicker-height: 3.00%;
    --live-kicker-font-size: 0.72cqw;
    --live-kicker-letter-spacing: 0.16em;

    /* Main title: LIVE PLAYERS */
    --live-title-left: 9.45%;
    --live-title-top: 11.10%;
    --live-title-width: 58%;
    --live-title-height: 10.50%;
    --live-title-font-size: 4.15cqw;
    --live-title-letter-spacing: 0.045em;

    /* Current / max player total box */
    --live-total-left: 72.50%;
    --live-total-top: 8.90%;
    --live-total-width: 18.80%;
    --live-total-height: 14.20%;
    --live-total-gap: 0.70cqw;

    --live-current-count-size: 4.05cqw;
    --live-total-slash-size: 1.70cqw;
    --live-max-count-size: 3.45cqw;

    /* Main 20-player content window */
    --live-stage-left: 8.45%;
    --live-stage-top: 30.00%;
    --live-stage-width: 83.05%;
    --live-stage-height: 48.30%;

    /* Player grid */
    --live-grid-columns: 4;
    --live-grid-rows: 5;
    --live-grid-column-gap: 0.72cqw;
    --live-grid-row-gap: 0.62cqw;

    /* Player-card panel image */
--live-card-image:
    url("../images/rust-player-card-panel.webp");


/* Individual player card */
--live-card-padding-y: 0;
--live-card-padding-x: 0;
--live-card-content-gap: 0;

--live-card-background: transparent;
--live-card-border: transparent;


/* Avatar position inside each player card */
--live-card-avatar-left: 5.20%;
--live-card-avatar-top: 19%;
--live-card-avatar-width: 18%;
--live-card-avatar-height: 62%;

--live-avatar-font-size: 1.15cqw;


/* Player-name position inside each player card */
--live-card-name-left: 34.50%;
--live-card-name-top: 0%;
--live-card-name-width: 62%;
--live-card-name-height: 100%;

--live-name-font-size: 0.92cqw;
--live-name-letter-spacing: 0.02em;

    /* Empty / connecting message area */
    --live-empty-left: 0%;
    --live-empty-top: 0%;
    --live-empty-width: 100%;
    --live-empty-height: 100%;

    /* PREVIOUS button text area */
    --live-previous-left: 7.45%;
    --live-previous-top: 84.00%;
    --live-previous-width: 22.40%;
    --live-previous-height: 8.10%;

    /* PAGE 1 OF 1 text area */
    --live-page-status-left: 34.20%;
    --live-page-status-top: 84.00%;
    --live-page-status-width: 31.60%;
    --live-page-status-height: 8.10%;

    /* NEXT button text area */
    --live-next-left: 69.15%;
    --live-next-top: 84.00%;
    --live-next-width: 22.40%;
    --live-next-height: 8.10%;

    /* Bottom navigation typography */
    --live-navigation-font-size: 1.65cqw;
--live-navigation-letter-spacing: 0.10em;


    width: 100%;
    aspect-ratio:
        var(--live-panel-ratio-width)
        /
        var(--live-panel-ratio-height);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    container-type: inline-size;

    padding: 0;

    background:
        url("../images/rust-live-players-panel.webp")
        center / 100% 100%
        no-repeat;

    border: 0;
    box-shadow: none;
}


/* ==========================================================================
   REMOVE THE OLD CSS PANEL LAYERS
   ========================================================================== */

.rust-live-players-panel::before,
.rust-live-players-panel::after {
    content: none;
    display: none;
}


/* ==========================================================================
   HEADER OVERLAY
   ========================================================================== */

.rust-live-players-header {
    position: absolute;
    inset: 0;
    z-index: 4;

    display: block;
    padding: 0;

    border: 0;
    background: transparent;
}


/* CURRENT SERVER POPULATION */

.rust-live-players-kicker {
    position: absolute;
    left: var(--live-kicker-left);
    top: var(--live-kicker-top);

    width: var(--live-kicker-width);
    height: var(--live-kicker-height);

    display: flex;
    align-items: center;

    color: var(--red-bright);
    font-size: var(--live-kicker-font-size);
    font-weight: 900;
    letter-spacing: var(--live-kicker-letter-spacing);
    line-height: 1;
    white-space: nowrap;
}


/* LIVE PLAYERS */

.rust-live-players-header h1 {
    position: absolute;
    left: var(--live-title-left);
    top: var(--live-title-top);

    width: var(--live-title-width);
    height: var(--live-title-height);
    margin: 0;

    display: flex;
    align-items: center;

    color: #f2f0eb;
    font-family: var(--display-font);
    font-size: var(--live-title-font-size);
    letter-spacing: var(--live-title-letter-spacing);
    line-height: 0.9;
    text-transform: uppercase;
    white-space: nowrap;
}


/* Remove the old description line */

.rust-live-players-header p {
    display: none;
}


/* ==========================================================================
   CURRENT / MAX PLAYER TOTAL
   ========================================================================== */

.rust-live-player-total {
    position: absolute;
    left: var(--live-total-left);
    top: var(--live-total-top);

    width: var(--live-total-width);
    height: var(--live-total-height);
    min-width: 0;
    min-height: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--live-total-gap);

    background: transparent;
    border: 0;

    font-family: var(--display-font);
    line-height: 1;
}

.rust-live-player-total strong:first-child {
    color: var(--red-bright);
    font-size: var(--live-current-count-size);
}

.rust-live-player-total span {
    color: #6f6b65;
    font-size: var(--live-total-slash-size);
}

.rust-live-player-total strong:last-child {
    color: #f2f0eb;
    font-size: var(--live-max-count-size);
}


/* ==========================================================================
   FIXED 20-PLAYER STAGE
   ========================================================================== */

.rust-live-player-stage {
    position: absolute;
    left: var(--live-stage-left);
    top: var(--live-stage-top);
    z-index: 5;

    width: var(--live-stage-width);
    height: var(--live-stage-height);
    min-height: 0;
    margin: 0;

    overflow: hidden;
}


/* ==========================================================================
   4 COLUMNS x 5 ROWS
   ========================================================================== */

.rust-live-player-grid {
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;

    display: grid;

    grid-template-columns:
        repeat(
            var(--live-grid-columns),
            minmax(0, 1fr)
        );

    grid-template-rows:
        repeat(
            var(--live-grid-rows),
            minmax(0, 1fr)
        );

    grid-auto-rows: minmax(0, 1fr);

    column-gap: var(--live-grid-column-gap);
    row-gap: var(--live-grid-row-gap);

    align-content: stretch;
}

.rust-live-player-grid[hidden] {
    display: none;
}


/* ==========================================================================
   INDIVIDUAL PLAYER CARD
   ========================================================================== */

.rust-live-player {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;

    padding:
        var(--live-card-padding-y)
        var(--live-card-padding-x);

    display: flex;
    align-items: center;
    gap: var(--live-card-content-gap);

    background: var(--live-card-background);
    border: 1px solid var(--live-card-border);

    box-shadow: none;
    filter: none;
    transform: none;
    transition: none;
}


/* ==========================================================================
   PLAYER AVATAR
   ========================================================================== */

.rust-live-player-avatar {
    width: var(--live-avatar-size);
    height: var(--live-avatar-size);
    flex:
        0 0
        var(--live-avatar-size);

    position: relative;
    overflow: hidden;

    display: grid;
    place-items: center;

    background: #111;
    border: 1px solid rgba(217, 54, 40, 0.54);

    color: #7f7a73;
    font-family: var(--display-font);
    font-size: var(--live-avatar-font-size);
}

.rust-live-player-avatar img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
}


/* ==========================================================================
   PLAYER NAME
   ========================================================================== */

.rust-live-player-name {
    min-width: 0;

    color: #f2f0eb;
    font-size: var(--live-name-font-size);
    font-weight: 900;
    letter-spacing: var(--live-name-letter-spacing);
    line-height: 1.15;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================================
   EMPTY / CONNECTING MESSAGE
   ========================================================================== */

.rust-live-player-empty {
    position: absolute;
    left: var(--live-empty-left);
    top: var(--live-empty-top);

    width: var(--live-empty-width);
    height: var(--live-empty-height);
    min-height: 0;
    padding: 20px;

    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;

    text-align: center;
}

.rust-live-player-empty[hidden] {
    display: none;
}


/* ==========================================================================
   PAGINATION OVERLAY
   --------------------------------------------------------------------------
   The nav itself covers the full panel.
   PREVIOUS, PAGE STATUS and NEXT are positioned independently.
   ========================================================================== */

.rust-live-player-pagination,
.rust-live-player-pagination[hidden] {
    position: absolute;
    inset: 0;
    z-index: 6;

    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;

    display: block;
    visibility: visible;
    pointer-events: none;

    border: 0;
    background: transparent;
}


/* PREVIOUS */

.rust-live-player-page-button[data-live-player-previous] {
    position: absolute;
    left: var(--live-previous-left);
    top: var(--live-previous-top);

    width: var(--live-previous-width);
    height: var(--live-previous-height);
}


/* PAGE 1 OF 1 */

.rust-live-player-page-status {
    position: absolute;
    left: var(--live-page-status-left);
    top: var(--live-page-status-top);

    width: var(--live-page-status-width);
    height: var(--live-page-status-height);

    display: flex;
    align-items: center;
    justify-content: center;

    color: #d5d1ca;
    font-size: var(--live-navigation-font-size);
    font-weight: 900;
    letter-spacing: var(--live-navigation-letter-spacing);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}


/* NEXT */

.rust-live-player-page-button[data-live-player-next] {
    position: absolute;
    left: var(--live-next-left);
    top: var(--live-next-top);

    width: var(--live-next-width);
    height: var(--live-next-height);
}


/* PREVIOUS + NEXT shared styling */

.rust-live-player-page-button {
    min-height: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: 0;

    color: #d5d1ca;
    cursor: pointer;
    font-size: var(--live-navigation-font-size);
    font-weight: 900;
    letter-spacing: var(--live-navigation-letter-spacing);
    line-height: 1;
    text-transform: uppercase;

    pointer-events: auto;
}

.rust-live-player-page-button:disabled {
    cursor: default;
    opacity: 0.58;
}


/* ==========================================================================
   MOBILE SAFETY
   --------------------------------------------------------------------------
   Keep the panel image and exact positions intact.
   Small screens scroll horizontally instead of crushing the layout.
   ========================================================================== */

@media (max-width: 980px) {
    .rust-live-players .shell {
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 10px;
    }

    .rust-live-players-panel {
        min-width: 980px;
    }
}

/* ==========================================================================
   PLAYER CARD IMAGE — REQUIRED FINAL OVERRIDE
   ========================================================================== */

.rust-live-player {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    padding: 0 !important;

    position: relative;
    overflow: hidden;

    display: block !important;

    background-image:
        url("../images/rust-player-card-panel.webp") !important;

    background-position: center !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* Avatar inside the image opening */

.rust-live-player-avatar {
    position: absolute !important;
    left: var(--live-card-avatar-left) !important;
    top: var(--live-card-avatar-top) !important;
    z-index: 2;

    width: var(--live-card-avatar-width) !important;
    height: var(--live-card-avatar-height) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: none !important;

    overflow: hidden;

    display: grid;
    place-items: center;

    background: #080808;
    border: 0 !important;

    font-size: var(--live-avatar-font-size);
}


/* Steam avatar image */

.rust-live-player-avatar img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;
}


/* Player name inside the long right section */

.rust-live-player-name {
    position: absolute !important;
    left: var(--live-card-name-left) !important;
    top: var(--live-card-name-top) !important;
    z-index: 2;

    width: var(--live-card-name-width) !important;
    height: var(--live-card-name-height) !important;
    min-width: 0;

    display: flex !important;
    align-items: center;

    color: #f2f0eb;
    font-size: var(--live-name-font-size);
    font-weight: 900;
    letter-spacing: var(--live-name-letter-spacing);
    line-height: 1;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   PLAYER CARD HOVER ZOOM
   ========================================================================== */

@media (hover: hover) {

    .rust-live-player {
        position: relative;
        z-index: 1;

        transform: scale(1) !important;
        transform-origin: center;

        transition: transform 140ms ease !important;
    }

    .rust-live-player:hover {
        z-index: 10;

        transform: scale(1.04) !important;
    }
}
/* ==========================================================================
   RUST NETWORK SUMMARY PANEL
   --------------------------------------------------------------------------
   This block only adds and positions the new network-summary panel.
   It does not change the server-card width or server-card gaps.

   Change only the variables inside .rust-network-summary to move or resize
   the HTML data within the four image compartments.
   ========================================================================== */

.rust-network-summary {
    /* Approved cropped panel image dimensions */
    --network-summary-ratio-width: 1910;
    --network-summary-ratio-height: 323;

    /* Space below the panel before the first server card */
    --network-summary-margin-bottom: 28px;

    /* SERVERS ONLINE data */
    --network-servers-left: 14.40%;
    --network-servers-top: 32%;
    --network-servers-width: 10.80%;
    --network-servers-height: 50%;

    /* PLAYERS ONLINE data */
    --network-players-left: 38.30%;
    --network-players-top: 32%;
    --network-players-width: 10.80%;
    --network-players-height: 50%;

    /* TOTAL SLOTS data */
    --network-slots-left: 60.15%;
    --network-slots-top: 32%;
    --network-slots-width: 10.80%;
    --network-slots-height: 50%;

    /* NETWORK STATUS data */
    --network-status-left: 80.30%;
    --network-status-top: 32%;
    --network-status-width: 10.50%;
    --network-status-height: 50%;

    /* Shared data typography */
    --network-value-size: 4.45cqw;
    --network-label-size: 0.66cqw;
    --network-status-size: 3.30cqw;
    --network-value-letter-spacing: 0.03em;
    --network-label-letter-spacing: 0.13em;

    width: 100%;
    aspect-ratio:
        var(--network-summary-ratio-width)
        /
        var(--network-summary-ratio-height);

    margin: 0 0 var(--network-summary-margin-bottom);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    container-type: inline-size;

    background:
        url("../images/rust-network-summary-panel.webp")
        center / 100% 100%
        no-repeat;

    border: 0;
    box-shadow: none;
}


/* ==========================================================================
   NETWORK SUMMARY DATA AREAS
   ========================================================================== */

.rust-network-summary-item {
    position: absolute;
    z-index: 2;

    min-width: 0;
    min-height: 0;
    padding: 0;

    display: grid;
    align-content: center;
    justify-items: start;
    gap: 0.25cqw;

    text-align: left;
}

.rust-network-summary-item--servers {
    left: var(--network-servers-left);
    top: var(--network-servers-top);

    width: var(--network-servers-width);
    height: var(--network-servers-height);
}

.rust-network-summary-item--players {
    left: var(--network-players-left);
    top: var(--network-players-top);

    width: var(--network-players-width);
    height: var(--network-players-height);
}

.rust-network-summary-item--slots {
    left: var(--network-slots-left);
    top: var(--network-slots-top);

    width: var(--network-slots-width);
    height: var(--network-slots-height);
}

.rust-network-summary-item--status {
    left: var(--network-status-left);
    top: var(--network-status-top);

    width: var(--network-status-width);
    height: var(--network-status-height);
}


/* Large live value */

.rust-network-summary-item > strong {
    max-width: 100%;

    color: var(--red-bright);
    font-family: var(--display-font);
    font-size: var(--network-value-size);
    font-weight: 900;
    letter-spacing: var(--network-value-letter-spacing);
    line-height: 0.92;
    text-transform: uppercase;
    white-space: nowrap;
}


/* Small label below the value */

.rust-network-summary-item > span {
    max-width: 100%;

    color: #f2f0eb;
    font-size: var(--network-label-size);
    font-weight: 900;
    letter-spacing: var(--network-label-letter-spacing);
    line-height: 1.15;
    text-transform: uppercase;
}


/* Network status needs a slightly smaller value for longer words */

.rust-network-summary-item--status > strong {
    font-size: var(--network-status-size);
}


/* JavaScript will add this class when at least one Rust server is online */

.rust-network-summary.is-online
.rust-network-summary-item--status > strong {
    color: var(--green);
}


/* ==========================================================================
   NETWORK SUMMARY RESPONSIVE SAFETY
   ========================================================================== */

@media (max-width: 720px) {
    .rust-network-summary {
        --network-value-size: 2.70cqw;
        --network-label-size: 0.72cqw;
        --network-status-size: 1.42cqw;
    }
}

/* ==========================================================================
   HOMEPAGE SERVER CARDS — MASTER CONFIG
   --------------------------------------------------------------------------
   THIS IS THE ONLY HOMEPAGE SERVER-CARD CONFIG YOU NEED TO EDIT.

   LEFT / TOP    = move a section
   WIDTH / HEIGHT = resize its area
   FONT          = change text size

   Desktop/tablet homepage only. rust-mobile.css takes over at 760px and below.
   ========================================================================== */

@media (min-width: 761px) {

    .rust-server-list .rust-server-card {

        /* ==============================================================
           CARD / SERVER IMAGE
           ============================================================== */

        --home-card-ratio-width: 1024;
        --home-card-ratio-height: 1536;

        --home-image-left: 6.35%;
        --home-image-top: 15.05%;
        --home-image-width: 87.30%;
        --home-image-height: 42.55%;


        /* ==============================================================
           ONLINE / OFFLINE BADGE
           Position is relative to the server image window.
           ============================================================== */

        --home-status-left: 4.20%;
        --home-status-top: 3.80%;
        --home-status-font: 8px;


        /* ==============================================================
           TITLE
           BARELY ALIVE
           SOLO | WEEKLY / MAX 4 | WEEKLY / MAIN | MONTHLY
           ============================================================== */

        --home-title-left: 8.50%;
        --home-title-top: 3.75%;
        --home-title-width: 83.00%;
        --home-title-height: 9.15%;

        --home-title-brand-font: 18px;
        --home-title-mode-font: 22px;


        /* ==============================================================
           PLAYERS ONLINE
           ============================================================== */

        --home-players-left: 6.0%;
        --home-players-top: 59.15%;
        --home-players-width: 28.45%;
        --home-players-height: 11.30%;

        --home-players-label-font: 10px;
        --home-players-value-font: 34px;


        /* ==============================================================
           JOINING
           ============================================================== */

        --home-joining-left: 34.5%;
        --home-joining-top: 57.55%;
        --home-joining-width: 29.90%;
        --home-joining-height: 14.15%;

        --home-joining-label-font: 10px;
        --home-joining-value-font: 29px;


        /* ==============================================================
           MAX PLAYERS
           ============================================================== */

        --home-max-left: 65.20%;
        --home-max-top: 59.15%;
        --home-max-width: 28.45%;
        --home-max-height: 11.30%;

        --home-max-label-font: 10px;
        --home-max-value-font: 34px;


        /* ==============================================================
           NEXT WIPE COUNTDOWN — LEFT LOWER PANEL
           ============================================================== */

        --home-wipe-left: 6.35%;
        --home-wipe-top: 74.5%;
        --home-wipe-width: 42.55%;
        --home-wipe-height: 9.25%;

        --home-wipe-heading-font: 10px;
        --home-wipe-number-font: 24px;
        --home-wipe-unit-font: 7px;
        --home-wipe-separator-font: 25px;


        /* ==============================================================
           SERVER TYPE — RIGHT LOWER PANEL
           ============================================================== */

        --home-type-left: 53.00%;
        --home-type-top: 74.5%;
        --home-type-width: 42.55%;
        --home-type-height: 9.25%;

        --home-type-label-font: 10px;
        --home-type-value-font: 34px;


        /* ==============================================================
           VIEW SERVER BUTTON TEXT
           ============================================================== */

        --home-button-left: 16.80%;
        --home-button-top: 86.8%;
        --home-button-width: 66.40%;
        --home-button-height: 8.35%;

        --home-button-font: 34px;
    }


    /* ======================================================================
       THREE CARDS ACROSS
       ====================================================================== */

    .rust-server-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
        gap: clamp(14px, 1.35vw, 22px);

        overflow: visible;
        padding-bottom: 0;
    }


    /* ======================================================================
       CARD SHELL
       ====================================================================== */

    .rust-server-list .rust-server-card {
        width: 100%;
        min-width: 0;
        max-width: none;

        aspect-ratio:
            var(--home-card-ratio-width)
            /
            var(--home-card-ratio-height);

        position: relative;
        isolation: isolate;
        overflow: hidden;
        container-type: inline-size;

        background: transparent;
        box-shadow: none;
        filter: none !important;
        transform: none;
    }

    /* Mechanical servercard.webp sits ABOVE the dynamic animal image. */
    .rust-server-list .rust-server-card::before {
        content: "";
        display: block;

        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;

        background:
            url("../images/servercard.webp")
            center / 100% 100%
            no-repeat;

        filter: none !important;
    }

    .rust-server-list .rust-server-card::after {
        content: none;
    }


    /* ======================================================================
       DYNAMIC SERVER IMAGE — BEHIND THE PANEL
       ====================================================================== */

    .rust-server-list .rust-server-image {
        position: absolute;
        left: var(--home-image-left);
        top: var(--home-image-top);
        z-index: 1;

        width: var(--home-image-width);
        height: var(--home-image-height);
        min-width: 0;
        min-height: 0;
        overflow: hidden;

        background-image: var(--server-image);
        background-position: center 45%;
        background-size: cover;
        background-repeat: no-repeat;

        filter: none !important;

        clip-path: polygon(
            2.2% 0,
            97.8% 0,
            100% 3.2%,
            100% 96.8%,
            97.8% 100%,
            2.2% 100%,
            0 96.8%,
            0 3.2%
        );
    }

    .rust-server-list .rust-server-image-shade {
        display: block;

        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;

        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.16) 0%,
                transparent 28%,
                transparent 62%,
                rgba(0, 0, 0, 0.42) 100%
            ),
            radial-gradient(
                circle at 50% 55%,
                transparent 40%,
                rgba(0, 0, 0, 0.28) 100%
            );
    }

    .rust-server-list .rust-server-card.is-offline .rust-server-image::after {
        z-index: 3;
    }


    /* ======================================================================
       CRISP TEXT — NO GLOW / NO DOUBLED FONT EFFECT
       ====================================================================== */

    .rust-server-list,
    .rust-server-list * {
        text-shadow: none !important;
        -webkit-text-stroke: 0 !important;
        font-synthesis: none;
    }

    .rust-server-list .server-live-badge,
    .rust-server-list .rust-server-title,
    .rust-server-list .rust-server-stat,
    .rust-server-list .rust-server-joining,
    .rust-server-list .rust-server-rail-item,
    .rust-server-list .button--server {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }


    /* ======================================================================
       ONLINE / OFFLINE BADGE
       ====================================================================== */

    .rust-server-list .server-live-badge {
        left: var(--home-status-left);
        top: var(--home-status-top);

        min-height: 24px;
        padding: 0 8px;

        gap: 6px;

        background: rgba(2, 3, 3, 0.90);
        border: 1px solid rgba(255, 255, 255, 0.16);

        font-size: var(--home-status-font) !important;
        letter-spacing: 0.08em;
    }

    .rust-server-list .server-live-badge i {
        width: 6px;
        height: 6px;
    }


    /* ======================================================================
       BODY / TITLE
       ====================================================================== */

    .rust-server-list .rust-server-body {
        position: absolute;
        inset: 0;
        z-index: 4;

        min-width: 0;
        min-height: 0;

        background: transparent;
        pointer-events: none;
    }

    .rust-server-list .rust-server-heading {
        position: absolute;
        left: var(--home-title-left) !important;
        top: var(--home-title-top) !important;

        width: var(--home-title-width) !important;
        height: var(--home-title-height) !important;
        padding: 0 2%;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        text-align: center;
    }

    .rust-server-list .rust-server-title {
        width: 100%;
        margin: 0;

        display: grid;
        justify-items: center;
        gap: 2px !important;

        line-height: 1;
        text-align: center;
    }

    .rust-server-list .rust-server-title > span {
        display: block;

        color: #f4f1eb;
        font-size: var(--home-title-brand-font) !important;
        letter-spacing: 0.025em;
        line-height: 0.96;
    }

    .rust-server-list .rust-server-title > strong {
        width: 100%;
        margin: 0;

        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: center;
        gap: 5px !important;

        color: #f4f1eb;
        font-size: var(--home-title-mode-font) !important;
        letter-spacing: 0.005em;
        line-height: 0.94;
    }

    .rust-server-list .rust-server-description {
        display: none !important;
    }


    /* ======================================================================
       PLAYERS / JOINING / MAX
       ====================================================================== */

    .rust-server-list .rust-server-live-grid {
        position: absolute;
        inset: 0;
        z-index: 5;

        min-width: 0;
        min-height: 0;
    }

    .rust-server-list .rust-server-stat:first-child {
        position: absolute;
        left: var(--home-players-left) !important;
        top: var(--home-players-top) !important;

        width: var(--home-players-width) !important;
        height: var(--home-players-height) !important;

        padding: 0 4%;
        gap: 3px !important;
    }

    .rust-server-list .rust-server-stat:first-child > span {
        font-size: var(--home-players-label-font) !important;
    }

    .rust-server-list .rust-server-stat:first-child > strong {
        font-size: var(--home-players-value-font) !important;
    }


    .rust-server-list .rust-server-joining {
        position: absolute;
        left: var(--home-joining-left) !important;
        top: var(--home-joining-top) !important;

        width: var(--home-joining-width) !important;
        height: var(--home-joining-height) !important;

        gap: 3px !important;
    }

    .rust-server-list .rust-server-joining > span {
        font-size: var(--home-joining-label-font) !important;
    }

    .rust-server-list .rust-server-joining > strong {
        color: var(--red-bright);
        font-size: var(--home-joining-value-font) !important;
        line-height: 0.84;
    }


    .rust-server-list .rust-server-stat:last-child {
        position: absolute;
        left: var(--home-max-left) !important;
        top: var(--home-max-top) !important;

        width: var(--home-max-width) !important;
        height: var(--home-max-height) !important;

        padding: 0 4%;
        gap: 3px !important;
    }

    .rust-server-list .rust-server-stat:last-child > span {
        font-size: var(--home-max-label-font) !important;
    }

    .rust-server-list .rust-server-stat:last-child > strong {
        font-size: var(--home-max-value-font) !important;
    }


    .rust-server-list .rust-server-stat > span,
    .rust-server-list .rust-server-joining > span {
        color: #a29d96;
        letter-spacing: 0.07em;
        line-height: 1.10;
        text-align: center;
    }

    .rust-server-list .rust-server-stat > strong {
        color: #f6f3ed;
        line-height: 0.84;
    }

    .rust-server-list .rust-server-joining-dots {
        gap: 3px;
    }

    .rust-server-list .rust-server-joining-dots i {
        width: 4px;
        height: 4px;
    }


    /* ======================================================================
       LOWER ROW
       ====================================================================== */

    .rust-server-list .rust-server-rail {
        position: absolute;
        inset: 0;
        z-index: 6;

        min-width: 0;
        min-height: 0;
        padding: 0;

        pointer-events: none;
    }

    /* NEXT WIPE — LEFT LOWER PANEL */
    .rust-server-list .rust-server-rail-item:nth-child(1) {
        position: absolute;
        left: var(--home-wipe-left) !important;
        top: var(--home-wipe-top) !important;

        width: var(--home-wipe-width) !important;
        height: var(--home-wipe-height) !important;
        min-width: 0;
        min-height: 0;
        padding: 0 5%;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 3px;

        text-align: center;
    }

    /* Static wipe-schedule row is not used on homepage. */
    .rust-server-list .rust-server-rail-item:nth-child(2) {
        display: none !important;
    }

    /* SERVER TYPE — RIGHT LOWER PANEL */
    .rust-server-list .rust-server-rail-item:nth-child(3) {
        position: absolute;
        left: var(--home-type-left) !important;
        top: var(--home-type-top) !important;

        width: var(--home-type-width) !important;
        height: var(--home-type-height) !important;
        min-width: 0;
        min-height: 0;
        padding: 0 7%;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 3px;

        text-align: left;
    }

    .rust-server-list .rust-server-rail-item:nth-child(1) > span {
        width: 100%;

        color: var(--red-bright);
        font-size: var(--home-wipe-heading-font) !important;
        letter-spacing: 0.08em;
        line-height: 1;
        text-align: center;
    }

    .rust-server-list .rust-server-rail-item:nth-child(3) > span {
        color: var(--red-bright);
        font-size: var(--home-type-label-font) !important;
        letter-spacing: 0.08em;
        line-height: 1;
    }

    .rust-server-list .rust-server-rail-item:nth-child(3) > strong {
        color: #f0ede7;
        font-size: var(--home-type-value-font) !important;
        letter-spacing: 0.01em;
        line-height: 1;
    }


    /* ======================================================================
       WIPE COUNTDOWN
       ====================================================================== */

    .rust-server-list [data-server-wipe-countdown] {
        width: 100%;
        margin: 0;

        display: block;

        font-family: var(--display-font);
    }

    .rust-server-list .rust-wipe-countdown-grid {
        width: 100%;

        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            auto
            minmax(0, 1fr)
            auto
            minmax(0, 1fr)
            auto
            minmax(0, 1fr);

        align-items: start;
        justify-content: stretch;
        column-gap: 2px;
    }

    .rust-server-list .rust-wipe-countdown-part {
        min-width: 0;

        display: grid;
        justify-items: center;
        align-content: start;
        gap: 2px;
    }

    .rust-server-list .rust-wipe-countdown-number {
        color: #f4f1eb;
        font-family: var(--display-font);
        font-size: var(--home-wipe-number-font) !important;
        font-weight: 900;
        letter-spacing: 0;
        line-height: 1;
        white-space: nowrap;
    }

    .rust-server-list .rust-wipe-countdown-label {
        color: #8f8a83;
        font-family: var(--ui-font);
        font-size: var(--home-wipe-unit-font) !important;
        font-weight: 900;
        letter-spacing: 0.02em;
        line-height: 1;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .rust-server-list .rust-wipe-countdown-separator {
        padding-top: 0;

        color: var(--red-bright);
        font-family: var(--display-font);
        font-size: var(--home-wipe-separator-font) !important;
        font-style: normal;
        font-weight: 900;
        line-height: 1;
    }


    /* ======================================================================
       VIEW SERVER
       ====================================================================== */

    .rust-server-list .button--server,
    .rust-server-list .button--server:hover,
    .rust-server-list .button--server:focus-visible {
        position: absolute;
        left: var(--home-button-left) !important;
        top: var(--home-button-top) !important;
        z-index: 8;

        width: var(--home-button-width) !important;
        height: var(--home-button-height) !important;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 0 5%;

        display: flex;
        align-items: center;
        justify-content: center;

        background: transparent;
        border: 0;

        color: #f7f3ed;
        pointer-events: auto;

        font-size: var(--home-button-font) !important;
        letter-spacing: 0.06em;
        line-height: 1;

        text-shadow: none !important;
        filter: none !important;
        transform: none !important;
    }
}


/* ==========================================================================
   TABLET — TWO CARDS ACROSS
   ========================================================================== */

@media (min-width: 761px) and (max-width: 1080px) {
    .rust-server-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 900px;
        margin-inline: auto;
        gap: 18px;
    }

    .rust-server-list .rust-server-card {
        min-width: 0;
    }
}

@media (min-width: 1081px) and (max-width: 1200px) {
    .rust-server-list .rust-server-card {
        min-width: 0;
    }
}