/*
|--------------------------------------------------------------------------
| BARELY ALIVE RUST — MOBILE HOMEPAGE
|--------------------------------------------------------------------------
|
| Load this file AFTER /rust/assets/css/rust.css.
| Applies only to screens 760px wide and below.
|
| Mobile does not use the desktop image panels:
| - rust-network-summary-panel.webp
| - server-panel-background.webp
|
| The Rust hero and each server's own artwork remain.
|
*/

@media (max-width: 760px) {

    /* ======================================================================
       GLOBAL
       ====================================================================== */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        min-width: 320px;
    }

    .shell {
        width: calc(100% - 24px);
        max-width: 560px;
        margin-inline: auto;
    }


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

    .site-header {
        min-height: 74px;
    }

    .site-header-inner {
        position: relative;

        min-height: 74px;

        display: grid;
        grid-template-columns: 46px minmax(0, 1fr) 46px;
        align-items: center;
        gap: 8px;
    }

    .rust-brand {
        grid-column: 2;
        justify-self: center;

        min-width: 0;

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

        text-align: left;
    }

    .rust-brand-logo {
        width: 62px;
        height: 42px;
    }

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

    .rust-brand-name strong {
        font-size: 0.72rem;
        letter-spacing: 0.15em;
        white-space: nowrap;
    }

    .rust-brand-name small {
        font-size: 0.58rem;
        letter-spacing: 0.24em;
    }

    .nav-toggle {
        grid-column: 3;
        justify-self: end;

        width: 42px;
        height: 40px;
        padding: 9px;

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

        background: rgba(8, 8, 8, 0.82);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 3px;
    }

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

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

        width: 100%;
        padding: 10px 14px 15px;

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

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

        text-align: center;
    }

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

    .primary-nav a {
        width: 100%;
        padding: 13px 10px;

        display: block;

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

        font-size: 0.66rem;
        letter-spacing: 0.11em;
        text-align: center;
    }

    .primary-nav a:last-child {
        border-bottom: 0;
    }

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

    .button--header {
        display: none;
    }


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

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

        display: flex;
        align-items: flex-end;

        text-align: center;
    }

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

    .rust-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.16) 0%,
                rgba(0, 0, 0, 0.38) 42%,
                rgba(0, 0, 0, 0.94) 100%
            );
    }

    .rust-hero-inner {
        width: 100%;
        padding: 78px 0 56px;

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

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

        text-align: center;
    }

    .rust-hero h1 {
        width: 100%;

        display: grid;
        justify-items: center;

        text-align: center;
    }

    .rust-hero h1 span {
        font-size: clamp(2.9rem, 14vw, 4.8rem);
        line-height: 0.88;
        letter-spacing: 0.01em;
        white-space: normal;
        text-align: center;
    }

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

        font-size: clamp(4rem, 19vw, 6rem);
        line-height: 0.82;
        text-align: center;
    }

    .rust-hero-content > p {
        max-width: 320px;
        margin: 23px auto 0;

        font-size: 0.60rem;
        line-height: 1.6;
        letter-spacing: 0.15em;
        text-align: center;
    }

    .rust-hero-actions {
        width: min(100%, 330px);
        margin: 25px auto 0;

        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .rust-hero-actions .button {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding-inline: 14px;

        font-size: 0.66rem;
        text-align: center;
    }


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

    .rust-servers {
        padding: 46px 0 70px;
    }

    .section-heading {
        width: 100%;
        margin-bottom: 25px;
        padding-inline: 5px;

        text-align: center;
    }

    .section-heading h2 {
        margin-inline: auto;

        font-size: clamp(2rem, 10vw, 3rem);
        line-height: 1;
        letter-spacing: 0.065em;
        text-align: center;
    }

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

    .section-heading p {
        max-width: 320px;
        margin: 11px auto 0;

        font-size: 0.57rem;
        line-height: 1.5;
        letter-spacing: 0.13em;
        text-align: center;
    }

    .server-empty-state {
        min-height: 180px;
        padding: 28px 18px;

        border-radius: 14px;

        text-align: center;
    }

    .server-empty-state strong,
    .server-empty-state span {
        text-align: center;
    }


    /* ======================================================================
       MOBILE NETWORK SUMMARY
       CSS grid — no rust-network-summary-panel.webp
       ====================================================================== */

    .rust-network-summary {
        width: 100%;
        min-width: 0;
        min-height: 0;
        aspect-ratio: auto;

        margin: 0 0 20px;
        padding: 12px;

        position: relative;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;

        overflow: hidden;
        container-type: normal;

        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.028),
                rgba(255, 255, 255, 0.007)
            ),
            #0a0a0a !important;
        background-image: none !important;

        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 16px;

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.035),
            0 16px 30px rgba(0, 0, 0, 0.32);
    }

    .rust-network-summary::before {
        content: "";

        position: absolute;
        top: -1px;
        left: 14%;
        right: 14%;

        height: 1px;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(217, 54, 40, 0.88),
                transparent
            );

        box-shadow: 0 0 10px rgba(217, 54, 40, 0.20);
        pointer-events: none;
    }

    .rust-network-summary-item,
    .rust-network-summary-item--servers,
    .rust-network-summary-item--players,
    .rust-network-summary-item--slots,
    .rust-network-summary-item--status {
        position: relative;
        left: auto;
        top: auto;

        width: 100%;
        height: auto;
        min-width: 0;
        min-height: 102px;
        padding: 14px 8px;

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

        background: rgba(255, 255, 255, 0.018);
        border: 1px solid rgba(255, 255, 255, 0.075);
        border-radius: 11px;

        text-align: center;
    }

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

        font-size: clamp(2rem, 10vw, 3rem);
        line-height: 0.88;
        letter-spacing: 0.025em;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .rust-network-summary-item--status > strong {
        font-size: clamp(1.25rem, 6vw, 1.85rem);
    }

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

        font-size: 0.55rem;
        line-height: 1.3;
        letter-spacing: 0.11em;
        text-align: center;
    }


    /* ======================================================================
       MOBILE SERVER LIST
       ====================================================================== */

    .rust-server-list {
        width: 100%;
        min-width: 0;
        padding: 0;

        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;

        overflow: visible !important;
    }


    /* ======================================================================
       MOBILE SERVER CARD
       CSS card — no server-panel-background.webp
       ====================================================================== */

    .rust-server-card {
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        min-height: 0;
        aspect-ratio: auto;

        position: relative;

        display: flex;
        flex-direction: column;

        overflow: hidden;
        container-type: normal;

        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.026),
                rgba(255, 255, 255, 0.006)
            ),
            #0a0a0a;

        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 16px;

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.035),
            0 18px 34px rgba(0, 0, 0, 0.34);
    }

    .rust-server-card::before,
    .rust-server-card::after {
        content: none !important;
        display: none !important;
        background: none !important;
        background-image: none !important;
    }

    .rust-server-card:hover,
    .rust-server-card:focus,
    .rust-server-card:focus-visible,
    .rust-server-card:focus-within,
    .rust-server-card:active {
        transform: none !important;
        filter: none !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.035),
            0 18px 34px rgba(0, 0, 0, 0.34) !important;
    }


    /* Server artwork */

    .rust-server-image {
        position: relative;
        left: auto;
        top: auto;
        z-index: 1;

        order: 1;

        width: 100%;
        height: auto;
        min-width: 0;
        min-height: 190px;
        aspect-ratio: 16 / 9;

        overflow: hidden;

        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;

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

    .rust-server-card.is-offline .rust-server-image::after {
        background: rgba(0, 0, 0, 0.50);
    }

    .server-live-badge {
        position: absolute;
        left: 12px;
        top: 12px;
        z-index: 5;

        min-height: 30px;
        padding: 0 11px;

        gap: 7px;

        border-radius: 4px;

        font-size: 0.56rem;
        letter-spacing: 0.10em;
    }

    .server-live-badge i {
        width: 7px;
        height: 7px;
    }


    /* Server body */

    .rust-server-body {
        position: relative;
        inset: auto;
        z-index: 4;

        order: 2;

        width: 100%;
        min-width: 0;
        min-height: 0;
        padding: 19px 14px 14px;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;

        background: transparent;

        text-align: center;
    }

    .rust-server-heading {
        position: relative;
        left: auto;
        top: auto;

        order: 1;

        width: 100%;
        height: auto;
        min-width: 0;
        min-height: 0;
        padding: 0 4px 5px;

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

        text-align: center;
    }

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

        text-align: center;
    }

    .rust-server-title > span {
        font-size: clamp(1.6rem, 8vw, 2.35rem);
        line-height: 0.95;
        letter-spacing: 0.035em;
        text-align: center;
    }

    .rust-server-title > strong {
        margin-top: 6px;

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

        font-size: clamp(1.9rem, 9.5vw, 2.75rem);
        line-height: 0.95;
        text-align: center;
    }

    .rust-server-description {
        max-width: 340px;
        margin: 9px auto 0;

        font-size: 0.55rem;
        line-height: 1.5;
        letter-spacing: 0.11em;
        text-align: center;
    }


    /* Player statistics */

    .rust-server-live-grid {
        position: relative;
        inset: auto;

        order: 2;

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

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

    .rust-server-stat,
    .rust-server-stat:first-child,
    .rust-server-stat:last-child {
        position: relative;
        left: auto;
        top: auto;

        width: 100%;
        height: auto;
        min-width: 0;
        min-height: 98px;
        padding: 12px 6px;

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

        background: rgba(255, 255, 255, 0.018);
        border: 1px solid rgba(255, 255, 255, 0.075);
        border-radius: 10px;

        text-align: center;
    }

    .rust-server-stat > strong {
        font-size: clamp(2.5rem, 13vw, 3.7rem);
        line-height: 0.82;
        text-align: center;
    }

    .rust-server-stat > span,
    .rust-server-joining > span {
        font-size: 0.52rem;
        line-height: 1.25;
        letter-spacing: 0.11em;
        text-align: center;
    }


    /* Joining */

    .rust-server-joining {
        position: relative;
        left: auto;
        top: auto;

        order: 3;

        width: 100%;
        height: auto;
        min-width: 0;
        min-height: 80px;
        margin: 0;
        padding: 12px 8px;

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

        background: rgba(255, 255, 255, 0.018);
        border: 1px solid rgba(255, 255, 255, 0.075);
        border-radius: 10px;

        text-align: center;
    }

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

        font-size: clamp(1.5rem, 7.5vw, 2.15rem);
        line-height: 0.9;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
    }

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

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


    /* Right information rail */

    .rust-server-rail {
        position: relative;
        inset: auto;
        z-index: 4;

        order: 3;

        width: 100%;
        min-width: 0;
        min-height: 0;
        padding: 0 14px 14px;

        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;

        background: transparent;
    }

    .rust-server-rail-item,
    .rust-server-rail-item:nth-child(1),
    .rust-server-rail-item:nth-child(2),
    .rust-server-rail-item:nth-child(3) {
        position: relative;
        left: auto;
        top: auto;

        width: 100%;
        height: auto;
        min-width: 0;
        min-height: 70px;
        padding: 11px 13px;

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

        background: rgba(255, 255, 255, 0.018);
        border: 1px solid rgba(255, 255, 255, 0.075);
        border-radius: 9px;

        text-align: center;
    }

    .rust-server-rail-item > span {
        font-size: 0.50rem;
        line-height: 1.25;
        letter-spacing: 0.11em;
        text-align: center;
    }

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

        font-size: clamp(1.15rem, 6vw, 1.65rem);
        line-height: 1;
        letter-spacing: 0.035em;
        text-align: center;
        overflow-wrap: anywhere;
    }


    /* View server button */

    .button--server {
        position: relative;
        left: auto;
        top: auto;
        z-index: 5;

        order: 4;

        width: calc(100% - 28px);
        height: auto;
        min-width: 0;
        min-height: 50px;
        margin: 0 14px 15px;
        padding: 0 16px;

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

        background:
            linear-gradient(
                180deg,
                #db3a2b,
                #a82219
            );
        border: 1px solid rgba(255, 100, 80, 0.55);
        border-radius: 4px;

        color: #fff;
        font-size: 1rem;
        line-height: 1;
        letter-spacing: 0.09em;
        text-align: center;

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            0 8px 18px rgba(0, 0, 0, 0.24);
    }

    .button--server:hover,
    .button--server:focus,
    .button--server:focus-visible,
    .button--server:active {
        background:
            linear-gradient(
                180deg,
                #e04434,
                #b3271c
            );
        border: 1px solid rgba(255, 100, 80, 0.72);
        border-radius: 4px;
        color: #fff;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.10),
            0 8px 18px rgba(0, 0, 0, 0.26);
    }


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

    .site-footer-inner {
        min-height: 0;
        padding: 26px 0;

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

        text-align: center;
    }

    .rust-brand--footer {
        justify-content: center;
    }

    .rust-brand--footer .rust-brand-logo {
        width: 66px;
        height: 44px;
    }

    .site-footer p,
    .site-footer-inner > a:last-child {
        justify-self: auto;
        margin: 0;

        text-align: center;
    }
}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 420px) {

    .shell {
        width: calc(100% - 20px);
    }

    .site-header-inner {
        grid-template-columns: 42px minmax(0, 1fr) 42px;
    }

    .rust-brand-logo {
        width: 58px;
        height: 39px;
    }

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

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

    .nav-toggle {
        width: 40px;
        height: 38px;
    }

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

    .rust-hero-inner {
        padding-bottom: 48px;
    }

    .rust-hero h1 span {
        font-size: 2.8rem;
    }

    .rust-hero h1 strong {
        font-size: 4rem;
    }

    .rust-hero-content > p {
        max-width: 280px;
        font-size: 0.55rem;
    }

    .rust-network-summary {
        padding: 9px;
        gap: 8px;
        border-radius: 14px;
    }

    .rust-network-summary-item,
    .rust-network-summary-item--servers,
    .rust-network-summary-item--players,
    .rust-network-summary-item--slots,
    .rust-network-summary-item--status {
        min-height: 94px;
        padding: 12px 5px;
    }

    .rust-network-summary-item > strong {
        font-size: 2.2rem;
    }

    .rust-network-summary-item--status > strong {
        font-size: 1.2rem;
    }

    .rust-network-summary-item > span {
        font-size: 0.49rem;
    }

    .rust-server-image {
        min-height: 165px;
    }

    .rust-server-body {
        padding-inline: 10px;
    }

    .rust-server-title > span {
        font-size: 1.55rem;
    }

    .rust-server-title > strong {
        font-size: 1.9rem;
    }

    .rust-server-description {
        font-size: 0.50rem;
    }

    .rust-server-stat,
    .rust-server-stat:first-child,
    .rust-server-stat:last-child {
        min-height: 91px;
    }

    .rust-server-stat > strong {
        font-size: 2.55rem;
    }

    .rust-server-joining {
        min-height: 74px;
    }

    .rust-server-joining > strong {
        font-size: 1.55rem;
    }

    .rust-server-rail {
        padding-inline: 10px;
    }

    .rust-server-rail-item,
    .rust-server-rail-item:nth-child(1),
    .rust-server-rail-item:nth-child(2),
    .rust-server-rail-item:nth-child(3) {
        min-height: 65px;
    }

    .button--server {
        width: calc(100% - 20px);
        margin-inline: 10px;
        font-size: 0.92rem;
    }
}

/* ==========================================================================
   VIEW SERVER PAGE — MOBILE FIX
   Removes all desktop panel artwork from the individual server page.
   ========================================================================== */

@media (max-width: 760px) {

    /* Stop the desktop View Server page from scrolling sideways. */
    .rust-server-detail .shell,
    .rust-live-players .shell {
        width: calc(100% - 24px);
        max-width: 560px;
        margin-inline: auto;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    .rust-server-detail {
        padding: 24px 0 18px;
    }

    .rust-server-detail-scroll {
        width: 100%;
        min-width: 0;
        padding: 0;
        overflow: visible !important;
    }

    .rust-server-detail-scroll .rust-server-card {
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
    }


    /* --------------------------------------------------------------
       ALL RUST SERVERS BUTTON
       Remove rust-all-servers-button.webp
       -------------------------------------------------------------- */

    .rust-server-back {
        width: min(100%, 280px);
        min-height: 46px;
        aspect-ratio: auto;
        margin: 0 auto 16px;
        padding: 0 16px;

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

        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.035),
                rgba(255, 255, 255, 0.012)
            ),
            #0a0a0a !important;

        background-image: none !important;

        border: 1px solid rgba(217, 54, 40, 0.58);
        border-radius: 4px;

        color: #f2f0eb !important;
        font-size: 0.67rem !important;
        line-height: 1 !important;
        font-weight: 900;
        letter-spacing: 0.11em;
        text-align: center;

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.035),
            0 10px 22px rgba(0, 0, 0, 0.28);
    }

    .rust-server-back span {
        display: inline !important;
        color: var(--red-bright);
        font-size: 1rem;
    }


    /* --------------------------------------------------------------
       LIVE PLAYERS OUTER PANEL
       Remove rust-live-players-panel.webp
       -------------------------------------------------------------- */

    .rust-live-players {
        padding: 10px 0 70px;
    }

    .rust-live-players-panel {
        position: relative !important;
        inset: auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;

        margin: 0 auto !important;
        padding: 18px 12px 12px !important;

        display: block !important;
        overflow: hidden !important;
        container-type: normal !important;

        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.03),
                rgba(255, 255, 255, 0.008)
            ),
            #090a0a !important;

        background-image: none !important;
        background-position: initial !important;
        background-size: initial !important;
        background-repeat: initial !important;

        border: 1px solid rgba(255, 255, 255, 0.13) !important;
        border-radius: 16px !important;

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.035),
            0 18px 34px rgba(0, 0, 0, 0.36) !important;
    }

    .rust-live-players-panel::before {
        content: "" !important;
        display: block !important;

        position: absolute;
        top: -1px;
        left: 14%;
        right: 14%;
        z-index: 1;

        height: 1px;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(217, 54, 40, 0.88),
                transparent
            ) !important;

        box-shadow: 0 0 10px rgba(217, 54, 40, 0.22);
        pointer-events: none;
    }

    .rust-live-players-panel::after {
        content: none !important;
        display: none !important;
    }


    /* --------------------------------------------------------------
       LIVE PLAYERS HEADER
       -------------------------------------------------------------- */

    .rust-live-players-header {
        position: relative !important;
        inset: auto !important;
        z-index: 2;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 2px 0 15px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 13px !important;

        border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
        background: transparent !important;

        text-align: center;
    }

    .rust-live-players-header > div:first-child {
        width: 100%;
        text-align: center;
    }

    .rust-live-players-kicker {
        position: relative !important;
        left: auto !important;
        top: auto !important;

        width: 100% !important;
        height: auto !important;

        display: block !important;

        font-size: 0.56rem !important;
        line-height: 1.4 !important;
        letter-spacing: 0.14em !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .rust-live-players-header h1 {
        position: relative !important;
        left: auto !important;
        top: auto !important;

        width: 100% !important;
        height: auto !important;
        margin: 6px 0 0 !important;

        display: block !important;

        font-size: clamp(2.25rem, 12vw, 3.4rem) !important;
        line-height: 0.9 !important;
        letter-spacing: 0.06em !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .rust-live-player-total {
        position: relative !important;
        left: auto !important;
        top: auto !important;

        width: min(100%, 230px) !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 74px !important;
        padding: 10px 15px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;

        background:
            linear-gradient(
                180deg,
                rgba(217, 54, 40, 0.10),
                rgba(255, 255, 255, 0.018)
            ) !important;

        border: 1px solid rgba(217, 54, 40, 0.30) !important;
        border-radius: 10px !important;
    }

    .rust-live-player-total strong:first-child,
    .rust-live-player-total strong:last-child {
        font-size: clamp(2rem, 11vw, 2.8rem) !important;
        line-height: 1 !important;
    }

    .rust-live-player-total span {
        font-size: 1.2rem !important;
    }


    /* --------------------------------------------------------------
       PLAYER LIST
       Remove fixed desktop positioning and horizontal scrolling
       -------------------------------------------------------------- */

    .rust-live-player-stage {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        z-index: 2;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 12px 0 0 !important;

        overflow: visible !important;
    }

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

        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;
        grid-auto-rows: auto !important;
        gap: 8px !important;
    }

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


    /* --------------------------------------------------------------
       PLAYER ROWS
       Remove rust-player-card-panel.webp
       -------------------------------------------------------------- */

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

        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 62px !important;
        max-height: none !important;
        padding: 8px 10px !important;

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

        overflow: hidden !important;

        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.028),
                rgba(255, 255, 255, 0.008)
            ),
            #0d0d0d !important;

        background-image: none !important;
        background-position: initial !important;
        background-size: initial !important;
        background-repeat: initial !important;

        border: 1px solid rgba(255, 255, 255, 0.085) !important;
        border-radius: 9px !important;

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

    .rust-live-player:hover {
        transform: none !important;
    }

    .rust-live-player-avatar {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        z-index: 2;

        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        flex: 0 0 44px !important;

        overflow: hidden;

        display: grid !important;
        place-items: center;

        background: #080808 !important;
        border: 1px solid rgba(217, 54, 40, 0.52) !important;
        border-radius: 0 !important;

        font-size: 1rem !important;
    }

    .rust-live-player-name {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        z-index: 2;

        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 54px);

        display: block !important;

        overflow: hidden;

        font-size: 0.76rem !important;
        line-height: 1.25 !important;
        letter-spacing: 0.025em !important;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    /* --------------------------------------------------------------
       CONNECTING / EMPTY STATE
       -------------------------------------------------------------- */

    .rust-live-player-empty {
        position: relative !important;
        left: auto !important;
        top: auto !important;

        width: 100% !important;
        height: auto !important;
        min-height: 180px !important;
        padding: 24px 14px !important;

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

        background: rgba(255, 255, 255, 0.014);
        border: 1px solid rgba(255, 255, 255, 0.065);
        border-radius: 10px;

        text-align: center;
    }

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

    .rust-live-player-empty strong {
        font-size: clamp(1.35rem, 7vw, 1.9rem) !important;
        line-height: 1 !important;
        letter-spacing: 0.06em !important;
        text-align: center;
    }

    .rust-live-player-empty span {
        max-width: 280px;

        font-size: 0.66rem !important;
        line-height: 1.5 !important;
        letter-spacing: 0.07em !important;
        text-align: center;
    }


    /* --------------------------------------------------------------
       PAGINATION
       -------------------------------------------------------------- */

    .rust-live-player-pagination,
    .rust-live-player-pagination[hidden] {
        position: relative !important;
        inset: auto !important;
        z-index: 2;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 12px 0 0 !important;
        padding: 12px 0 0 !important;

        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        align-items: stretch;
        gap: 8px !important;

        visibility: visible !important;
        pointer-events: auto !important;

        border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
        background: transparent !important;
    }

    .rust-live-player-page-status {
        position: relative !important;
        left: auto !important;
        top: auto !important;

        grid-column: 1 / -1;
        grid-row: 1;

        width: 100% !important;
        height: auto !important;
        min-height: 38px;

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

        font-size: 0.60rem !important;
        line-height: 1.2 !important;
        letter-spacing: 0.10em !important;
        text-align: center;
        white-space: normal !important;
    }

    .rust-live-player-page-button,
    .rust-live-player-page-button[data-live-player-previous],
    .rust-live-player-page-button[data-live-player-next] {
        position: relative !important;
        left: auto !important;
        top: auto !important;

        grid-row: 2;

        width: 100% !important;
        height: auto !important;
        min-height: 46px !important;
        padding: 0 10px !important;

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

        background: rgba(7, 7, 7, 0.88) !important;
        border: 1px solid rgba(217, 54, 40, 0.48) !important;
        border-radius: 4px !important;

        font-size: 0.62rem !important;
        letter-spacing: 0.10em !important;

        pointer-events: auto !important;
    }

    .rust-live-player-page-button[data-live-player-previous] {
        grid-column: 1;
    }

    .rust-live-player-page-button[data-live-player-next] {
        grid-column: 2;
    }

    .rust-live-player-page-button:disabled {
        opacity: 0.42 !important;
    }
}


@media (max-width: 420px) {

    .rust-server-detail .shell,
    .rust-live-players .shell {
        width: calc(100% - 20px);
    }

    .rust-server-back {
        width: 100%;
    }

    .rust-live-players-panel {
        padding: 16px 9px 10px !important;
        border-radius: 14px !important;
    }

    .rust-live-players-header h1 {
        font-size: 2.35rem !important;
    }

    .rust-live-player-avatar {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        flex-basis: 40px !important;
    }

    .rust-live-player-name {
        max-width: calc(100% - 50px);
        font-size: 0.69rem !important;
    }
}



/* ==========================================================================
   MOBILE HOMEPAGE SERVER CARD — WIPE COUNTDOWN FIX
   --------------------------------------------------------------------------
   Homepage only:
   - NEXT WIPE shows the live 4-part countdown
   - static WIPE SCHEDULE row is hidden
   - SERVER TYPE remains visible
   - individual View Server pages keep their normal compact countdown text
   ========================================================================== */

@media (max-width: 760px) {

    /* Homepage server cards only */
    .rust-server-list .rust-server-rail {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* NEXT WIPE */
    .rust-server-list .rust-server-rail-item:nth-child(1) {
        display: flex !important;
        min-height: 82px;
        padding: 10px 8px;

        align-items: center;
        justify-content: center;
        gap: 7px;

        text-align: center;
    }

    /* Remove the old fixed schedule such as THURSDAY AT 19:00 */
    .rust-server-list .rust-server-rail-item:nth-child(2) {
        display: none !important;
    }

    /* Keep SERVER TYPE */
    .rust-server-list .rust-server-rail-item:nth-child(3) {
        display: flex !important;
    }

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

        color: var(--red-bright);
        font-size: 0.52rem !important;
        line-height: 1;
        letter-spacing: 0.10em;
        text-align: center;
    }

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

        display: block;

        font-family: var(--display-font);
        text-align: center;
        white-space: normal;
    }

    .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: 3px;
    }

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

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

    .rust-server-list .rust-wipe-countdown-number {
        color: #f4f1eb;
        font-family: var(--display-font);
        font-size: clamp(1rem, 5.6vw, 1.45rem) !important;
        font-weight: 900;
        letter-spacing: 0;
        line-height: 0.95;
        white-space: nowrap;

        text-shadow: none !important;
    }

    .rust-server-list .rust-wipe-countdown-label {
        color: #8f8a83;
        font-family: var(--ui-font);
        font-size: clamp(0.36rem, 1.8vw, 0.48rem) !important;
        font-weight: 900;
        letter-spacing: 0.04em;
        line-height: 1;
        text-transform: uppercase;
        white-space: nowrap;

        text-shadow: none !important;
    }

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

        color: var(--red-bright);
        font-family: var(--display-font);
        font-size: clamp(0.9rem, 4.8vw, 1.25rem) !important;
        font-style: normal;
        font-weight: 900;
        line-height: 0.95;

        text-shadow: none !important;
    }

    .rust-server-list [data-server-wipe-countdown].is-wipe-due,
    .rust-server-list [data-server-wipe-countdown].is-wipe-unset {
        color: var(--red-bright);
        font-size: 1.1rem !important;
        text-align: center;
    }
}


@media (max-width: 420px) {

    .rust-server-list .rust-server-rail-item:nth-child(1) {
        min-height: 76px;
        padding-inline: 6px;
    }

    .rust-server-list .rust-wipe-countdown-grid {
        column-gap: 2px;
    }

    .rust-server-list .rust-wipe-countdown-number {
        font-size: 1rem !important;
    }

    .rust-server-list .rust-wipe-countdown-label {
        font-size: 0.34rem !important;
        letter-spacing: 0.025em;
    }

    .rust-server-list .rust-wipe-countdown-separator {
        font-size: 0.85rem !important;
    }
}



/* ==========================================================================
   MOBILE SERVER STATS — 3 ACROSS
   --------------------------------------------------------------------------
   Keep PLAYERS ONLINE, JOINING and MAX PLAYERS on one row so the third
   statistic does not leave an empty gap on mobile.
   ========================================================================== */

@media (max-width: 760px) {

    .rust-server-list .rust-server-live-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch;
        gap: 7px !important;
    }

    .rust-server-list .rust-server-stat,
    .rust-server-list .rust-server-stat:first-child,
    .rust-server-list .rust-server-stat:last-child,
    .rust-server-list .rust-server-joining {
        position: relative !important;
        left: auto !important;
        top: auto !important;

        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 88px !important;
        margin: 0 !important;
        padding: 10px 4px !important;

        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px !important;

        background: rgba(255, 255, 255, 0.018);
        border: 1px solid rgba(255, 255, 255, 0.075);
        border-radius: 9px;

        text-align: center;
    }

    .rust-server-list .rust-server-stat:first-child {
        order: 1;
    }

    .rust-server-list .rust-server-joining {
        order: 2;
    }

    .rust-server-list .rust-server-stat:last-child {
        order: 3;
    }

    .rust-server-list .rust-server-stat > span,
    .rust-server-list .rust-server-joining > span {
        font-size: 0.46rem !important;
        line-height: 1.15;
        letter-spacing: 0.07em;
        text-align: center;
    }

    .rust-server-list .rust-server-stat > strong {
        font-size: clamp(1.9rem, 9vw, 2.7rem) !important;
        line-height: 0.86;
    }

    .rust-server-list .rust-server-joining > strong {
        font-size: clamp(1.7rem, 8vw, 2.35rem) !important;
        line-height: 0.86;
    }
}


@media (max-width: 420px) {

    .rust-server-list .rust-server-live-grid {
        gap: 5px !important;
    }

    .rust-server-list .rust-server-stat,
    .rust-server-list .rust-server-stat:first-child,
    .rust-server-list .rust-server-stat:last-child,
    .rust-server-list .rust-server-joining {
        min-height: 82px !important;
        padding-inline: 2px !important;
    }

    .rust-server-list .rust-server-stat > span,
    .rust-server-list .rust-server-joining > span {
        font-size: 0.42rem !important;
        letter-spacing: 0.045em;
    }

    .rust-server-list .rust-server-stat > strong {
        font-size: 2rem !important;
    }

    .rust-server-list .rust-server-joining > strong {
        font-size: 1.8rem !important;
    }
}