/* ==========================================================================
   SERVER TITLE — MANUAL CONTROLS
   EDIT THESE VALUES ONLY
   ========================================================================== */

:root {
    --server-title-left: 14%;
    --server-title-top: 50%;
    --server-title-width: 72%;
    --server-title-height: 30%;

    /* Chunky title text size */
    --server-title-font-size: 5.15cqw;

    /* Thin crisp black edge around the title */
    --server-title-outline: 4px;

    /* Optional fine movement */
    --server-title-offset-x: 0px;
    --server-title-offset-y: 0px;


    /* ==============================================================
       SERVER STATUS — MANUAL CONTROLS
       These are relative to server-status-panel.webp
       ============================================================== */

    /* STATUS screen */
    --status-live-left: 46.5%;
    --status-live-top: 33.2%;
    --status-live-width: 37.2%;
    --status-live-height: 8.8%;
    --status-live-font-size: 5.55cqw;

    /* PLAYERS ONLINE screen */
    --status-players-left: 46.5%;
    --status-players-top: 47.0%;
    --status-players-width: 37.2%;
    --status-players-height: 8.8%;
    --status-players-font-size: 6.05cqw;

    /* JOINING screen */
    --status-joining-left: 46.5%;
    --status-joining-top: 59.8%;
    --status-joining-width: 37.2%;
    --status-joining-height: 8.8%;
    --status-joining-font-size: 6.05cqw;

    /* Fine movement for ALL 3 values */
    --status-offset-x: 0px;
    --status-offset-y: 0px;


    /* ==============================================================
       NEXT WIPE — MANUAL CONTROLS
       These are relative to server-wipe-panel.webp
       ============================================================== */

    /* Countdown box vertical position / height */
    --wipe-countdown-top: 36.2%;
    --wipe-countdown-height: 9.5%;
    --wipe-countdown-font-size: 6.2cqw;

    /* Individual countdown windows */
    --wipe-days-left: 11.0%;
    --wipe-days-width: 15.5%;

    --wipe-hours-left: 32.0%;
    --wipe-hours-width: 15.5%;

    --wipe-minutes-left: 52.2%;
    --wipe-minutes-width: 15.5%;

    --wipe-seconds-left: 73.0%;
    --wipe-seconds-width: 15.5%;


    /* Fine movement for all wipe overlays */
    --wipe-offset-x: 0px;
    --wipe-offset-y: 0px;


    /* ==============================================================
       PLAYERS ONLINE — MANUAL CONTROLS
       ============================================================== */

    /* Player name windows */
    --players-name-left-column: 13.6%;
    --players-name-right-column: 59.7%;
    --players-name-width: 31.6%;

    --players-name-top: 31.33%;
    --players-name-height: 7.83%;
    --players-name-row-step: 10.39%;

    --players-name-font-size: 2.45cqw;

    /* Fine movement for ALL player names */
    --players-name-offset-x: 0px;
    --players-name-offset-y: 0px;

    /* Invisible click areas over the artwork arrows */
    --players-prev-left: 13.8%;
    --players-next-left: 66.2%;
    --players-page-button-top: 86.8%;
    --players-page-button-width: 20.0%;
    --players-page-button-height: 9.5%;


    /* ==============================================================
       PLAYERS ONLINE MOBILE — MANUAL CONTROLS
       These are relative to players-online-panel-mobile.webp
       ============================================================== */

    /* Whole mobile panel */
    --mobile-players-panel-width: 560px;

    /* Five square avatar windows */
    --mobile-player-avatar-left: 10.35%;
    --mobile-player-avatar-top: 19.53%;
    --mobile-player-avatar-width: 14.06%;
    --mobile-player-avatar-height: 9.31%;
    --mobile-player-avatar-row-step: 13.15%;

    /* Five player-name windows */
    --mobile-player-name-left: 28.4%;
    --mobile-player-name-top: 18.55%;
    --mobile-player-name-width: 54.5%;
    --mobile-player-name-height: 10.75%;
    --mobile-player-name-row-step: 13.15%;
    --mobile-player-name-font-size: 5.0cqw;

    /* Fine movement for all mobile names */
    --mobile-player-name-offset-x: 0px;
    --mobile-player-name-offset-y: 0px;

    /* BACK / NEXT overlays */
    --mobile-player-prev-left: 11.5%;
    --mobile-player-next-left: 71.0%;
    --mobile-player-button-top: 86.7%;
    --mobile-player-button-width: 18.0%;
    --mobile-player-button-height: 7.6%;
    --mobile-player-button-font-size: 4.1cqw;

    /* Dynamic page number */
    --mobile-player-page-left: 42.5%;
    --mobile-player-page-top: 83.8%;
    --mobile-player-page-width: 15.0%;
    --mobile-player-page-height: 2.8%;
    --mobile-player-page-font-size: 3.0cqw;
}


/* ==========================================================================
   NOOBTUBE RUST — SERVER PAGE
   IMAGE BUILD — STAGE 1
   ==========================================================================

   Images only.
   No live text overlays yet.

   ========================================================================== */

.rust-server-body {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    background: #000;
}

.rust-server-page {
    position: relative;

    flex:
        1
        0
        auto;

    width: 100%;

    min-height:
        calc(
            100vh
            - var(--header-height)
            - 86px
        );

    padding:
        28px
        24px
        46px;

    background: #000;
}


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

.rust-server-title-art {
    position: relative;

    width:
        min(
            1180px,
            100%
        );

    margin:
        0
        auto;

    container-type: inline-size;
}

.rust-server-title-art img {
    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}

.rust-server-title-text {
    position: absolute;
    z-index: 2;

    left: var(--server-title-left);
    top: var(--server-title-top);

    width: var(--server-title-width);
    height: var(--server-title-height);

    transform:
        translate(
            var(--server-title-offset-x),
            var(--server-title-offset-y)
        );

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

    overflow: hidden;

    color: #f1eee8;

    font-family:
        Impact,
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        var(--server-title-font-size);

    line-height: 0.95;
    font-weight: 900;
    font-style: normal;

    letter-spacing: 0.025em;

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

    /* Crisp edge — no soft glow/blur. */
    -webkit-text-stroke:
        var(--server-title-outline)
        #050505;

    paint-order: stroke fill;
    text-rendering: geometricPrecision;

    text-shadow:
        0 2px 0 #000;

    pointer-events: none;
}



/* ==========================================================================
   SERVER STATUS — LIVE HTML OVERLAYS
   ========================================================================== */

.rust-server-status-art {
    position: relative;
    container-type: inline-size;
}

.rust-server-status-art > img {
    position: relative;
    z-index: 1;
}

.server-status-live-value,
.server-status-players-value,
.server-status-joining-value {
    position: absolute;
    z-index: 2;

    transform:
        translate(
            var(--status-offset-x),
            var(--status-offset-y)
        );

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

    overflow: hidden;

    font-family:
        Impact,
        "Arial Black",
        Arial,
        sans-serif;

    font-weight: 900;
    font-style: normal;
    line-height: 1;

    letter-spacing: 0.02em;
    white-space: nowrap;
    text-align: center;

    -webkit-text-stroke:
        0.6px
        rgba(0, 0, 0, 0.95);

    paint-order: stroke fill;
    text-rendering: geometricPrecision;

    text-shadow:
        0 1px 0 #000;

    pointer-events: none;
}

.server-status-live-value {
    left: var(--status-live-left);
    top: var(--status-live-top);
    width: var(--status-live-width);
    height: var(--status-live-height);

    color: #d8d3ca;
    font-size: var(--status-live-font-size);
}

.server-status-live-value.is-online {
    color: #55f27a;
}

.server-status-live-value.is-offline {
    color: #ef4635;
}

.server-status-live-value.is-connecting {
    color: #e2b950;
}

.server-status-players-value {
    left: var(--status-players-left);
    top: var(--status-players-top);
    width: var(--status-players-width);
    height: var(--status-players-height);

    gap: 0.18em;

    color: #eeeae3;
    font-size: var(--status-players-font-size);
}

.server-status-players-value strong:first-child {
    color: #55f27a;
}

.server-status-players-value span {
    color: #9e9991;
}

.server-status-players-value strong:last-child {
    color: #eeeae3;
}

.server-status-joining-value {
    left: var(--status-joining-left);
    top: var(--status-joining-top);
    width: var(--status-joining-width);
    height: var(--status-joining-height);

    color: #55f27a;
    font-size: var(--status-joining-font-size);
}




/* ==========================================================================
   NEXT WIPE — LIVE COUNTDOWN ONLY
   ========================================================================== */

.rust-server-wipe-art {
    position: relative;
    container-type: inline-size;
}

.rust-server-wipe-art > img {
    position: relative;
    z-index: 1;
}

.server-wipe-value {
    position: absolute;
    z-index: 3;

    top: var(--wipe-countdown-top);
    height: var(--wipe-countdown-height);

    transform:
        translate(
            var(--wipe-offset-x),
            var(--wipe-offset-y)
        );

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

    overflow: hidden;

    color: #ff3b2f;

    font-family:
        Impact,
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        var(--wipe-countdown-font-size);

    font-weight: 900;
    font-style: normal;
    line-height: 1;

    letter-spacing: 0.04em;
    white-space: nowrap;
    text-align: center;

    -webkit-text-stroke:
        0.7px
        #140000;

    paint-order: stroke fill;
    text-rendering: geometricPrecision;

    text-shadow:
        0 1px 0 #000,
        0 0 4px rgba(255, 44, 28, 0.32);

    pointer-events: none;
}

.server-wipe-days {
    left: var(--wipe-days-left);
    width: var(--wipe-days-width);
}

.server-wipe-hours {
    left: var(--wipe-hours-left);
    width: var(--wipe-hours-width);
}

.server-wipe-minutes {
    left: var(--wipe-minutes-left);
    width: var(--wipe-minutes-width);
}

.server-wipe-seconds {
    left: var(--wipe-seconds-left);
    width: var(--wipe-seconds-width);
}




/* ==========================================================================
   SECTION 2
   DESKTOP ROW:
   SERVER STATUS | TOP PLAYER OF THE WIPE | WIPE INFORMATION

   All three image panels are now wired in.
   ========================================================================== */

.rust-server-section-two {
    width:
        min(
            1180px,
            100%
        );

    margin:
        26px
        auto
        0;

    display: grid;

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

    align-items: start;

    gap: 22px;
}

.rust-server-section-two-slot {
    min-width: 0;
}

.rust-server-section-two-slot img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}



/* ==========================================================================
   SECTION 3 — PLAYERS ONLINE
   Desktop artwork only for now.
   Mobile gets a separate dedicated artwork later.
   ========================================================================== */

.rust-players-online-desktop {
    width:
        min(
            1180px,
            100%
        );

    margin:
        30px
        auto
        0;

    display: block;
}

.rust-players-online-desktop img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* ==========================================================================
   TABLET / MOBILE
   ========================================================================== */

@media (max-width: 980px) {

    .rust-players-online-desktop {
        display: none;
    }

    .rust-players-online-mobile {
        display: block;
    }

    .rust-server-section-two {
        grid-template-columns:
            1fr;

        gap: 18px;

        margin-top: 20px;
    }

    .rust-server-page {
        min-height:
            calc(
                100vh
                - var(--header-height)
                - 72px
            );

        padding:
            20px
            14px
            34px;
    }

}


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

@media (max-width: 520px) {

    .rust-server-page {
        padding:
            16px
            10px
            28px;
    }

}


/* ==========================================================================
   PLAYERS ONLINE — AVATARS BEHIND PANEL
   --------------------------------------------------------------------------
   IMPORTANT:
   - Avatar images sit BELOW the Players Online artwork.
   - The panel artwork is the foreground mask/frame.
   - No player names are wired yet.
   ========================================================================== */

.rust-players-online-desktop {
    position: relative;
    container-type: inline-size;
}

/* All 10 avatar images live underneath the panel artwork. */
.rust-player-avatar-layer {
    position: absolute;
    z-index: 1;

    inset: 0;

    pointer-events: none;
}

/* The actual metal panel sits ABOVE the avatars. */
.rust-players-online-panel-image {
    position: relative;
    z-index: 2;
}

/* Common avatar window styling. */
.rust-player-avatar-slot {
    position: absolute;

    width: 5.4%;
    height: 8.8%;

    overflow: hidden;

    background: #080808;

    pointer-events: none;
}

.rust-player-avatar-slot img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 34%;
}


/* LEFT COLUMN */

.rust-player-avatar-slot--1 {
    left: 6.53%;
    top: 31.33%;
}

.rust-player-avatar-slot--2 {
    left: 6.53%;
    top: 41.72%;
}

.rust-player-avatar-slot--3 {
    left: 6.53%;
    top: 52.11%;
}

.rust-player-avatar-slot--4 {
    left: 6.53%;
    top: 62.50%;
}

.rust-player-avatar-slot--5 {
    left: 6.53%;
    top: 72.89%;
}


/* RIGHT COLUMN */

.rust-player-avatar-slot--6 {
    left: 52.2%;
    top: 31.33%;
}

.rust-player-avatar-slot--7 {
    left: 52.2%;
    top: 41.72%;
}

.rust-player-avatar-slot--8 {
    left: 52.2%;
    top: 52.11%;
}

.rust-player-avatar-slot--9 {
    left: 52.2%;
    top: 62.50%;
}

.rust-player-avatar-slot--10 {
    left: 52.2%;
    top: 72.89%;
}


/* ==========================================================================
   PLAYERS ONLINE — LIVE PLAYER NAMES + PAGINATION
   --------------------------------------------------------------------------
   LAYER ORDER:
   z-index 1 = Steam avatars
   z-index 2 = metal artwork / frame
   z-index 3 = live player names
   z-index 4 = invisible paging buttons over artwork arrows
   ========================================================================== */

.rust-player-name-layer {
    position: absolute;
    z-index: 3;

    inset: 0;

    pointer-events: none;
}

.rust-player-name-slot {
    position: absolute;

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

    transform:
        translate(
            var(--players-name-offset-x),
            var(--players-name-offset-y)
        );

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

    box-sizing: border-box;

    padding:
        0
        1.15cqw;

    overflow: hidden;

    color: #eeeae3;

    font-family:
        Impact,
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        var(--players-name-font-size);

    font-weight: 900;
    font-style: normal;

    line-height: 1;

    letter-spacing: 0.02em;

    white-space: nowrap;
    text-align: left;

    -webkit-text-stroke:
        0.6px
        rgba(0, 0, 0, 0.98);

    paint-order: stroke fill;

    text-shadow:
        0 2px 0 #000;

    text-rendering:
        geometricPrecision;
}


/* LEFT COLUMN — PLAYERS 1–5 */

.rust-player-name-slot--1 {
    left: var(--players-name-left-column);
    top: var(--players-name-top);
}

.rust-player-name-slot--2 {
    left: var(--players-name-left-column);
    top:
        calc(
            var(--players-name-top)
            + var(--players-name-row-step)
        );
}

.rust-player-name-slot--3 {
    left: var(--players-name-left-column);
    top:
        calc(
            var(--players-name-top)
            + (var(--players-name-row-step) * 2)
        );
}

.rust-player-name-slot--4 {
    left: var(--players-name-left-column);
    top:
        calc(
            var(--players-name-top)
            + (var(--players-name-row-step) * 3)
        );
}

.rust-player-name-slot--5 {
    left: var(--players-name-left-column);
    top:
        calc(
            var(--players-name-top)
            + (var(--players-name-row-step) * 4)
        );
}


/* RIGHT COLUMN — PLAYERS 6–10 */

.rust-player-name-slot--6 {
    left: var(--players-name-right-column);
    top: var(--players-name-top);
}

.rust-player-name-slot--7 {
    left: var(--players-name-right-column);
    top:
        calc(
            var(--players-name-top)
            + var(--players-name-row-step)
        );
}

.rust-player-name-slot--8 {
    left: var(--players-name-right-column);
    top:
        calc(
            var(--players-name-top)
            + (var(--players-name-row-step) * 2)
        );
}

.rust-player-name-slot--9 {
    left: var(--players-name-right-column);
    top:
        calc(
            var(--players-name-top)
            + (var(--players-name-row-step) * 3)
        );
}

.rust-player-name-slot--10 {
    left: var(--players-name-right-column);
    top:
        calc(
            var(--players-name-top)
            + (var(--players-name-row-step) * 4)
        );
}


/* Artwork already contains the arrows.
   These are only transparent click targets. */

.rust-player-page-button {
    position: absolute;
    z-index: 4;

    top: var(--players-page-button-top);

    width: var(--players-page-button-width);
    height: var(--players-page-button-height);

    margin: 0;
    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

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

    color: #f2eee8;

    font-family:
        Impact,
        "Arial Black",
        Arial,
        sans-serif;

    font-size: 2.1cqw;
    font-weight: 900;
    font-style: normal;

    letter-spacing: 0.06em;

    -webkit-text-stroke:
        0.7px
        #050505;

    paint-order: stroke fill;

    text-shadow:
        0 2px 0 #000,
        0 0 6px rgba(255, 45, 30, 0.4);

    cursor: pointer;
}

.rust-player-page-button--prev {
    left:
        var(--players-prev-left);
}

.rust-player-page-button--next {
    left:
        var(--players-next-left);
}

.rust-player-page-button:disabled {
    color: #68635d;

    text-shadow:
        0 2px 0 #000;

    opacity: 0.65;

    cursor: default;
    pointer-events: none;
}


/* ==========================================================================
   SECTION 3 — PLAYERS ONLINE MOBILE
   --------------------------------------------------------------------------
   Desktop panel above is untouched.

   Layer order:
   1 = Steam avatars
   2 = mobile metal artwork
   3 = player names / page number
   4 = BACK / NEXT buttons
   ========================================================================== */

.rust-players-online-mobile {
    position: relative;

    width:
        min(
            var(--mobile-players-panel-width),
            100%
        );

    margin:
        30px
        auto
        0;

    display: none;

    container-type: inline-size;
}


/* Approved mobile artwork */
.rust-players-online-mobile-panel-image {
    position: relative;
    z-index: 2;

    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    pointer-events: none;
}


/* --------------------------------------------------------------------------
   MOBILE AVATARS — BEHIND THE ARTWORK
   -------------------------------------------------------------------------- */

.rust-mobile-player-avatar-layer {
    position: absolute;
    z-index: 1;

    inset: 0;

    pointer-events: none;
}

.rust-mobile-player-avatar-slot {
    position: absolute;

    left:
        var(--mobile-player-avatar-left);

    width:
        var(--mobile-player-avatar-width);

    height:
        var(--mobile-player-avatar-height);

    overflow: hidden;

    background: #080808;

    pointer-events: none;
}

.rust-mobile-player-avatar-slot img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.rust-mobile-player-avatar-slot--1 {
    top:
        var(--mobile-player-avatar-top);
}

.rust-mobile-player-avatar-slot--2 {
    top:
        calc(
            var(--mobile-player-avatar-top)
            + var(--mobile-player-avatar-row-step)
        );
}

.rust-mobile-player-avatar-slot--3 {
    top:
        calc(
            var(--mobile-player-avatar-top)
            + (var(--mobile-player-avatar-row-step) * 2)
        );
}

.rust-mobile-player-avatar-slot--4 {
    top:
        calc(
            var(--mobile-player-avatar-top)
            + (var(--mobile-player-avatar-row-step) * 3)
        );
}

.rust-mobile-player-avatar-slot--5 {
    top:
        calc(
            var(--mobile-player-avatar-top)
            + (var(--mobile-player-avatar-row-step) * 4)
        );
}


/* --------------------------------------------------------------------------
   MOBILE PLAYER NAMES
   -------------------------------------------------------------------------- */

.rust-mobile-player-name-layer {
    position: absolute;
    z-index: 3;

    inset: 0;

    pointer-events: none;
}

.rust-mobile-player-name-slot {
    position: absolute;

    left:
        var(--mobile-player-name-left);

    width:
        var(--mobile-player-name-width);

    height:
        var(--mobile-player-name-height);

    transform:
        translate(
            var(--mobile-player-name-offset-x),
            var(--mobile-player-name-offset-y)
        );

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

    box-sizing: border-box;

    padding:
        0
        1.2cqw;

    overflow: hidden;

    color: #eeeae3;

    font-family:
        Impact,
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        var(--mobile-player-name-font-size);

    font-weight: 900;
    font-style: normal;

    line-height: 1;

    letter-spacing: 0.02em;

    white-space: nowrap;
    text-align: left;

    -webkit-text-stroke:
        0.7px
        rgba(0, 0, 0, 0.98);

    paint-order: stroke fill;

    text-shadow:
        0 2px 0 #000;

    text-rendering:
        geometricPrecision;

    pointer-events: none;
}

.rust-mobile-player-name-slot--1 {
    top:
        var(--mobile-player-name-top);
}

.rust-mobile-player-name-slot--2 {
    top:
        calc(
            var(--mobile-player-name-top)
            + var(--mobile-player-name-row-step)
        );
}

.rust-mobile-player-name-slot--3 {
    top:
        calc(
            var(--mobile-player-name-top)
            + (var(--mobile-player-name-row-step) * 2)
        );
}

.rust-mobile-player-name-slot--4 {
    top:
        calc(
            var(--mobile-player-name-top)
            + (var(--mobile-player-name-row-step) * 3)
        );
}

.rust-mobile-player-name-slot--5 {
    top:
        calc(
            var(--mobile-player-name-top)
            + (var(--mobile-player-name-row-step) * 4)
        );
}


/* --------------------------------------------------------------------------
   MOBILE PAGINATION — WEBSITE DATA, NOT BAKED INTO ARTWORK
   -------------------------------------------------------------------------- */

.rust-mobile-player-page-button {
    position: absolute;
    z-index: 4;

    top:
        var(--mobile-player-button-top);

    width:
        var(--mobile-player-button-width);

    height:
        var(--mobile-player-button-height);

    margin: 0;
    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

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

    color: #f2eee8;

    font-family:
        Impact,
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        var(--mobile-player-button-font-size);

    font-weight: 900;
    font-style: normal;

    line-height: 1;

    letter-spacing: 0.045em;

    -webkit-text-stroke:
        0.7px
        #050505;

    paint-order: stroke fill;

    text-shadow:
        0 2px 0 #000,
        0 0 6px rgba(255, 45, 30, 0.38);

    cursor: pointer;
}

.rust-mobile-player-page-button--prev {
    left:
        var(--mobile-player-prev-left);
}

.rust-mobile-player-page-button--next {
    left:
        var(--mobile-player-next-left);
}

.rust-mobile-player-page-button:disabled {
    color: #68635d;

    text-shadow:
        0 2px 0 #000;

    opacity: 0.65;

    cursor: default;
    pointer-events: none;
}


/* Page number stays live HTML as requested. */
.rust-mobile-player-page-indicator {
    position: absolute;
    z-index: 3;

    left:
        var(--mobile-player-page-left);

    top:
        var(--mobile-player-page-top);

    width:
        var(--mobile-player-page-width);

    height:
        var(--mobile-player-page-height);

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

    overflow: hidden;

    color: #eeeae3;

    font-family:
        Impact,
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        var(--mobile-player-page-font-size);

    font-weight: 900;
    font-style: normal;

    line-height: 1;

    white-space: nowrap;

    -webkit-text-stroke:
        0.6px
        #050505;

    paint-order: stroke fill;

    text-shadow:
        0 2px 0 #000;

    pointer-events: none;
}


/* ==========================================================================
   MOBILE PLAYERS ONLINE — FINAL DISPLAY OVERRIDE
   Must remain after the base .rust-players-online-mobile { display:none; }
   so the mobile panel is actually shown at <= 980px.
   ========================================================================== */

@media (max-width: 980px) {

    .rust-players-online-desktop {
        display: none;
    }

    .rust-players-online-mobile {
        display: block;
    }

}


/* ==========================================================================
   DESKTOP SERVER OVERVIEW — ONE UNIFIED PANEL
   --------------------------------------------------------------------------
   IMPORTANT:
   This entire block controls DESKTOP ONLY.

   The original 3-card section is still kept for mobile at <= 980px.
   No mobile positioning values above this block are changed.
   ========================================================================== */

:root {
    /* Whole desktop overview */
    --overview-desktop-width: 1180px;


    /* ==============================================================
       SERVER STATUS — LIVE VALUE WINDOWS
       ============================================================== */

    --overview-status-left: 16.75%;
    --overview-status-top: 35.6%;
    --overview-status-width: 13.35%;
    --overview-status-height: 9.0%;
    --overview-status-font-size: 2.65cqw;

    --overview-players-left: 16.75%;
    --overview-players-top: 49.4%;
    --overview-players-width: 13.35%;
    --overview-players-height: 9.0%;
    --overview-players-font-size: 2.65cqw;

    --overview-joining-left: 16.75%;
    --overview-joining-top: 62.7%;
    --overview-joining-width: 13.35%;
    --overview-joining-height: 9.0%;
    --overview-joining-font-size: 2.65cqw;


    /* ==============================================================
       JOIN SERVER — CLICK AREA ONLY
       Text and arrows are already in the artwork.
       ============================================================== */

    --overview-join-left: 3.85%;
    --overview-join-top: 76.0%;
    --overview-join-width: 27.0%;
    --overview-join-height: 12.0%;


    /* ==============================================================
       TOP PLAYER — FUTURE LEADERBOARD DATA
       ============================================================== */

    /* Steam avatar sits BEHIND the transparent circle in the artwork. */
    --overview-avatar-left: 44.35%;
    --overview-avatar-top: 36.5%;
    --overview-avatar-width: 10.35%;
    --overview-avatar-height: 23.6%;

    /* Dynamic PLAYER NAME value */
    --overview-top-name-left: 47.0%;
    --overview-top-name-top: 63.5%;
    --overview-top-name-width: 15.5%;
    --overview-top-name-height: 6.0%;
    --overview-top-name-font-size: 2.15cqw;

    /* Dynamic POINTS value */
    --overview-top-points-left: 46.8%;
    --overview-top-points-top: 72.0%;
    --overview-top-points-width: 15.7%;
    --overview-top-points-height: 6.0%;
    --overview-top-points-font-size: 2.15cqw;


    /* ==============================================================
       VIEW LEADERBOARD — CLICK AREA ONLY
       ============================================================== */

    --overview-leaderboard-left: 36.7%;
    --overview-leaderboard-top: 81.0%;
    --overview-leaderboard-width: 26.5%;
    --overview-leaderboard-height: 8.5%;


    /* ==============================================================
       NEXT WIPE — LIVE DIGITS
       ============================================================== */

    --overview-wipe-top: 40.6%;
    --overview-wipe-height: 12.5%;
    --overview-wipe-width: 5.95%;
    --overview-wipe-font-size: 3.55cqw;

    --overview-wipe-days-left: 68.8%;
    --overview-wipe-hours-left: 75.8%;
    --overview-wipe-minutes-left: 82.8%;
    --overview-wipe-seconds-left: 89.7%;
}


/* Hide original three individual cards on desktop only. */
.rust-server-section-two {
    display: none;
}


.rust-server-overview-desktop {
    position: relative;

    width:
        min(
            var(--overview-desktop-width),
            100%
        );

    margin:
        20px
        auto
        0;

    display: block;

    container-type: inline-size;
}


/* ==========================================================================
   TOP PLAYER AVATAR — BELOW THE METAL ARTWORK
   ========================================================================== */

.rust-server-overview-top-avatar {
    position: absolute;
    z-index: 1;

    left:
        var(--overview-avatar-left);

    top:
        var(--overview-avatar-top);

    width:
        var(--overview-avatar-width);

    height:
        var(--overview-avatar-height);

    overflow: hidden;

    border-radius: 50%;

    background: #050505;

    pointer-events: none;
}


/*
 * CRITICAL:
 * The markup intentionally keeps the Top Player image hidden until
 * leaderboard data exists. This rule prevents the normal img display
 * rule below from overriding HTML's hidden state and showing a broken
 * image mark/white line inside the alpha circle.
 */
.rust-server-overview-top-avatar img[hidden] {
    display: none !important;
}


.rust-server-overview-top-avatar img:not([hidden]) {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border-radius: 50%;
}


/* Metal artwork is the foreground mask/frame. */
.rust-server-overview-panel-image {
    position: relative;
    z-index: 2;

    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    pointer-events: none;
}


/* ==========================================================================
   DESKTOP LIVE VALUE TYPOGRAPHY
   ========================================================================== */

.rust-server-overview-status-value,
.rust-server-overview-players-value,
.rust-server-overview-joining-value,
.rust-server-overview-top-name,
.rust-server-overview-top-points,
.rust-server-overview-wipe-value {
    position: absolute;
    z-index: 3;

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

    overflow: hidden;

    font-family:
        Impact,
        "Arial Black",
        Arial,
        sans-serif;

    font-weight: 900;
    font-style: normal;

    line-height: 1;

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

    -webkit-text-stroke:
        0.65px
        rgba(0, 0, 0, 0.98);

    paint-order: stroke fill;
    text-rendering: geometricPrecision;

    text-shadow:
        0 2px 0 #000;

    pointer-events: none;
}


/* SERVER STATUS */
.rust-server-overview-status-value {
    left: var(--overview-status-left);
    top: var(--overview-status-top);

    width: var(--overview-status-width);
    height: var(--overview-status-height);

    color: #d8d3ca;

    font-size:
        var(--overview-status-font-size);
}

.rust-server-overview-status-value.is-online {
    color: #55f27a;
}

.rust-server-overview-status-value.is-offline {
    color: #ef4635;
}

.rust-server-overview-status-value.is-connecting {
    color: #e2b950;
}


/* PLAYERS ONLINE */
.rust-server-overview-players-value {
    left: var(--overview-players-left);
    top: var(--overview-players-top);

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

    gap: 0.16em;

    color: #eeeae3;

    font-size:
        var(--overview-players-font-size);
}

.rust-server-overview-players-value strong:first-child {
    color: #55f27a;
}

.rust-server-overview-players-value span {
    color: #9e9991;
}

.rust-server-overview-players-value strong:last-child {
    color: #eeeae3;
}


/* JOINING */
.rust-server-overview-joining-value {
    left: var(--overview-joining-left);
    top: var(--overview-joining-top);

    width: var(--overview-joining-width);
    height: var(--overview-joining-height);

    color: #55f27a;

    font-size:
        var(--overview-joining-font-size);
}


/* TOP PLAYER — remains blank until leaderboard backend exists. */
.rust-server-overview-top-name {
    left: var(--overview-top-name-left);
    top: var(--overview-top-name-top);

    width: var(--overview-top-name-width);
    height: var(--overview-top-name-height);

    justify-content: flex-start;

    color: #eeeae3;

    font-size:
        var(--overview-top-name-font-size);
}

.rust-server-overview-top-points {
    left: var(--overview-top-points-left);
    top: var(--overview-top-points-top);

    width: var(--overview-top-points-width);
    height: var(--overview-top-points-height);

    justify-content: flex-start;

    color: #e9b743;

    font-size:
        var(--overview-top-points-font-size);
}


/* NEXT WIPE */
.rust-server-overview-wipe-value {
    top:
        var(--overview-wipe-top);

    width:
        var(--overview-wipe-width);

    height:
        var(--overview-wipe-height);

    color: #ff3b2f;

    font-size:
        var(--overview-wipe-font-size);

    letter-spacing: 0.04em;

    text-shadow:
        0 2px 0 #000,
        0 0 4px rgba(255, 44, 28, 0.35);
}

.rust-server-overview-wipe-days {
    left:
        var(--overview-wipe-days-left);
}

.rust-server-overview-wipe-hours {
    left:
        var(--overview-wipe-hours-left);
}

.rust-server-overview-wipe-minutes {
    left:
        var(--overview-wipe-minutes-left);
}

.rust-server-overview-wipe-seconds {
    left:
        var(--overview-wipe-seconds-left);
}


/* ==========================================================================
   DESKTOP ACTION HIT AREAS
   Artwork already contains JOIN SERVER / VIEW LEADERBOARD text + arrows.
   These are transparent links over those exact artwork areas.
   ========================================================================== */

.rust-server-overview-action {
    position: absolute;
    z-index: 4;

    display: block;

    background: transparent;

    text-decoration: none;

    cursor: pointer;
}

.rust-server-overview-action--join {
    left:
        var(--overview-join-left);

    top:
        var(--overview-join-top);

    width:
        var(--overview-join-width);

    height:
        var(--overview-join-height);
}

.rust-server-overview-action--leaderboard {
    left:
        var(--overview-leaderboard-left);

    top:
        var(--overview-leaderboard-top);

    width:
        var(--overview-leaderboard-width);

    height:
        var(--overview-leaderboard-height);
}

.rust-server-overview-action:not(.is-disabled):focus-visible {
    outline:
        2px
        solid
        #ef4635;

    outline-offset: -4px;
}

.rust-server-overview-action.is-disabled {
    cursor: default;
    pointer-events: none;
}


/* ==========================================================================
   MOBILE — KEEP EXISTING THREE ORIGINAL CARDS
   ========================================================================== */

@media (max-width: 980px) {

    .rust-server-overview-desktop {
        display: none;
    }

    .rust-server-section-two {
        display: grid;
    }

}