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

:root {
    --rust-red: #d93827;
    --rust-green: #62ff53;
    --rust-amber: #efc25e;
    --page: #040302;
    --shell: 1480px;
    --rust-chrome-shell: 1180px;
    --header-height: 108px;
}

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

html {
    min-width: 320px;
    background: var(--page);
}

body {
    margin: 0;
    min-width: 320px;

    background:
        radial-gradient(
            circle at 50% 20%,
            #17100b 0,
            #080604 34rem,
            #020202 72rem
        );

    color: #f3f0eb;

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

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

button {
    color: inherit;
    font: inherit;
}


/* ==========================================================================
   RUST-ONLY NAV
   ========================================================================== */

.rust-site-header {
    position: relative;
    z-index: 100;

    height: var(--header-height);

    background:
        linear-gradient(
            180deg,
            #080706,
            #020202
        );

    border-bottom:
        1px solid
        rgba(150, 65, 38, 0.28);
}

.rust-nav-shell {
    width: min(
        var(--rust-chrome-shell),
        calc(100% - 48px)
    );

    height: 100%;
    margin-inline: auto;

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

    align-items: center;
}

.rust-nav-brand {
    justify-self: start;
    min-width: 0;
    height: 100%;

    display: flex;
    align-items: center;

    line-height: 0;
}

.rust-nav-brand img {
    display: block;

    width: 112px;
    height: 72px;

    object-fit: contain;
    object-position: left center;

    filter:
        drop-shadow(0 0 12px rgba(255, 25, 35, 0.22));
}

.rust-primary-nav {
    justify-self: center;

    height: 100%;

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

    gap: 32px;
}

.rust-primary-nav a {
    height: 100%;

    display: grid;
    place-items: center;

    position: relative;

    padding: 0;

    color: #aaaab0;

    font-size: 12px;
    line-height: 1;

    font-weight: 900;
    letter-spacing: 0.08em;

    white-space: nowrap;
}

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

.rust-primary-nav a.is-active::after {
    content: "";

    position: absolute;

    bottom: 28px;
    left: 0;
    right: 0;

    height: 2px;

    background: var(--rust-red);

    box-shadow:
        0 0 9px
        var(--rust-red);
}

.rust-steam-login {
    justify-self: end;

    width: 162px;
    height: 44px;
    padding: 0 17px;

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

    border: 1px solid rgba(131, 111, 96, 0.52);

    background:
        linear-gradient(
            180deg,
            rgba(38, 32, 27, 0.7),
            rgba(9, 8, 7, 0.9)
        );

    color: #ece8e2;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.rust-steam-mark {
    width: 23px;
    height: 23px;

    display: grid;
    place-items: center;

    border:
        2px solid
        #d8d3cb;

    border-radius: 50%;

    font-size: 7px;
}

.rust-nav-toggle {
    display: none;
}


/* ==========================================================================
   PAGE
   ========================================================================== */

.rust-stage {
    min-height:
        calc(100vh - var(--header-height));

    padding:
        18px
        24px
        50px;

    /*
     * Rust base interior.
     * Required file:
     * /rust/assets/images/rustbackground.webp
     */
    background-color: #020202;

    background-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.08) 0%,
            rgba(0, 0, 0, 0.02) 48%,
            rgba(0, 0, 0, 0.30) 100%
        ),
        url("../images/rustbackground.webp");

    background-repeat:
        no-repeat,
        no-repeat;

    background-position:
        center center,
        center center;

    background-size:
        cover,
        cover;
}

.rust-stage-inner {
    width: min(100%, 1420px);
    margin-inline: auto;

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

.rust-stage-copy {
    margin-top: 120px;
}

.rust-stage-kicker {
    color: #c9c3bc;

    font-size: 11px;

    font-weight: 900;
    letter-spacing: 0.17em;
}

.rust-stage-copy h1 {
    margin:
        8px
        0
        7px;

    color: #f2eee8;

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

    font-size:
        clamp(
            78px,
            7.5vw,
            122px
        );

    line-height: 0.85;

    font-weight: 900;
    letter-spacing: -0.035em;
}

.rust-stage-copy p {
    margin: 0;

    color: #d7d0c8;

    font-size: 14px;
    line-height: 1.55;

    font-weight: 900;
    letter-spacing: 0.08em;
}

.rust-stage-copy p strong {
    color: #eb4633;
}


/* ==========================================================================
   TOOL CUPBOARD IMAGE
   ========================================================================== */

.rust-tc {
    position: relative;
    isolation: isolate;

    width: var(--tc-desktop-width);
    max-width: 100%;

    /*
     * The cropped physical cupboard asset is 970 × 1435.
     */
    aspect-ratio:
        970 / 1435;

    container-type:
        inline-size;

    background-image:
        url("../images/tc-network-shell.webp");

    background-position:
        center;

    background-size:
        100% 100%;

    background-repeat:
        no-repeat;

    filter:
        drop-shadow(
            0
            24px
            34px
            rgba(0, 0, 0, 0.62)
        );
}


/* ==========================================================================
   GENERIC LIVE OVERLAY
   ========================================================================== */

.tc-overlay {
    position: absolute;
    z-index: 10;

    padding: 0;

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

    /*
     * CRITICAL:
     * NO background, NO border, NO box-shadow.
     * The image underneath supplies all physical styling.
     */
    background: transparent;
    border: 0;
    box-shadow: none;

    text-align: center;
    pointer-events: none;
}


/* ==========================================================================
   MAIN CRT
   ========================================================================== */

.tc-players {
    left: var(--tc-players-left);
    top: var(--tc-players-top);

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

.tc-players strong {
    transform:
        translateY(
            var(--tc-players-number-y)
        );

    color:
        var(--rust-green);

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

    font-size:
        var(--tc-players-number-size);

    line-height: 0.82;

    font-weight: 900;

    font-variant-numeric:
        tabular-nums;

    text-shadow:
        0 0 0.55cqw
        rgba(98, 255, 83, 0.76),
        0 0 1.25cqw
        rgba(98, 255, 83, 0.32);
}

.tc-players span {
    transform:
        translateY(
            var(--tc-players-label-y)
        );

    color:
        var(--rust-green);

    font-size:
        var(--tc-players-label-size);

    line-height: 1;

    font-weight: 900;
    letter-spacing: 0.04em;

    text-shadow:
        0 0 0.45cqw
        rgba(98, 255, 83, 0.58);
}


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

.tc-joining {
    left: var(--tc-joining-left);
    top: var(--tc-joining-top);

    width: var(--tc-joining-width);
    height: var(--tc-joining-height);
}

.tc-joining strong {
    transform:
        translateY(
            var(--tc-joining-number-y)
        );

    color:
        var(--rust-green);

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

    font-size:
        var(--tc-joining-number-size);

    line-height: 0.84;

    font-weight: 900;

    font-variant-numeric:
        tabular-nums;

    text-shadow:
        0 0 0.40cqw
        rgba(98, 255, 83, 0.75);
}

.tc-joining span {
    transform:
        translateY(
            var(--tc-joining-label-y)
        );

    color:
        var(--rust-green);

    font-size:
        var(--tc-joining-label-size);

    line-height: 1;

    font-weight: 900;
    letter-spacing: 0.04em;

    text-shadow:
        0 0 0.34cqw
        rgba(98, 255, 83, 0.55);
}


/* ==========================================================================
   SERVERS ONLINE COUNTER
   ========================================================================== */

.tc-online-counter {
    left: var(--tc-online-left);
    top: var(--tc-online-top);

    width: var(--tc-online-width);
    height: var(--tc-online-height);

    color: #dbc5a1;

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

    font-size:
        var(--tc-online-size);

    line-height: 1;

    font-weight: 900;

    letter-spacing: var(--tc-online-spacing);

    font-variant-numeric:
        tabular-nums;

    text-shadow:
        0 2px 0 #000,
        0 0 0.35cqw rgba(203, 170, 122, 0.12);
}


/* ==========================================================================
   RUST SERVER ROWS
   ========================================================================== */

.tc-server-overlays {
    position: absolute;
    z-index: 10;

    left: var(--tc-rows-left);
    top: var(--tc-rows-top);

    width: var(--tc-rows-width);
    height: var(--tc-rows-height);

    display: grid;

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

    overflow: hidden;

    pointer-events: none;
}

.tc-server-overlay {
    position: relative;

    min-height: 0;

    /*
     * Absolutely NO row background.
     * The black metal slots are already in the image.
     */
    background: transparent;
    border: 0;
}

.tc-server-overlay > strong {
    position: absolute;

    left: var(--tc-row-name-left);
    top: 50%;

    max-width: 52%;

    transform:
        translateY(-50%);

    overflow: hidden;

    color:
        var(--rust-amber);

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

    font-size:
        var(--tc-row-name-size);

    line-height: 1;

    font-weight: 900;
    letter-spacing: 0.02em;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    text-shadow:
        0 1px 0 #000;
}

.tc-server-overlay > span {
    position: absolute;

    left: var(--tc-row-count-left);
    top: 50%;

    transform:
        translateY(-50%);

    color:
        #82ef6e;

    font-size:
        var(--tc-row-count-size);

    line-height: 1;

    font-weight: 900;

    font-variant-numeric:
        tabular-nums;

    white-space:
        nowrap;

    text-shadow:
        0 0 0.30cqw
        rgba(98, 255, 83, 0.22);
}


/* ==========================================================================
   DYNAMIC STATUS LAMP
   Sits over the physical BLACK knob.
   ========================================================================== */

.tc-live-lamp {
    position: absolute;

    left: var(--tc-row-lamp-left);
    top: 50%;

    width:
        var(--tc-row-lamp-size);

    height:
        var(--tc-row-lamp-size);

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius: 50%;

    /*
     * OFFLINE = invisible.
     * The physical black knob in the artwork remains visible.
     */
    background: transparent;
    box-shadow: none;
    opacity: 0;
}

.tc-server-overlay.is-online
.tc-live-lamp {
    opacity: 1;

    background:
        radial-gradient(
            circle at 35% 30%,
            #d8ffc6,
            #64ff56 36%,
            rgba(29, 158, 33, 0.82) 66%,
            rgba(17, 78, 19, 0.30) 100%
        );

    box-shadow:
        0 0 0.40cqw
        rgba(98, 255, 83, 0.90),
        0 0 0.95cqw
        rgba(98, 255, 83, 0.55);
}


/* ==========================================================================
   NETWORK LOAD NEEDLE
   The gauge face is 100% baked into the image.
   ========================================================================== */

.tc-gauge-needle {
    --gauge-angle: -72deg;

    position: absolute;
    z-index: 12;

    left:
        var(--tc-gauge-left);

    top:
        var(--tc-gauge-top);

    width:
        var(--tc-gauge-needle-width);

    height:
        var(--tc-gauge-needle-length);

    transform:
        translate(
            -50%,
            -100%
        )
        rotate(
            var(--gauge-angle)
        );

    transform-origin:
        50%
        100%;

    border-radius:
        999px
        999px
        0
        0;

    background:
        linear-gradient(
            90deg,
            #5a130f,
            #cf3828 46%,
            #711a13
        );

    box-shadow:
        0 0 0.25cqw
        rgba(91, 17, 12, 0.42);

    transition:
        transform
        850ms
        cubic-bezier(
            .19,
            .74,
            .22,
            1
        );

    pointer-events: none;
}


/* ==========================================================================
   CAPACITY WINDOW
   ========================================================================== */

.tc-capacity {
    left: var(--tc-capacity-left);
    top: var(--tc-capacity-top);

    width: var(--tc-capacity-width);
    height: var(--tc-capacity-height);
}

.tc-capacity strong {
    transform:
        translateY(
            var(--tc-capacity-value-y)
        );

    color:
        #ebc259;

    font-size:
        var(--tc-capacity-value-size);

    line-height: 1;

    font-weight: 900;

    font-variant-numeric:
        tabular-nums;

    text-shadow:
        0 0 0.28cqw
        rgba(235, 194, 89, 0.28);
}

.tc-capacity span {
    transform:
        translateY(
            var(--tc-capacity-label-y)
        );

    color:
        #b79a63;

    font-size:
        var(--tc-capacity-label-size);

    line-height: 1;

    font-weight: 900;
    letter-spacing: 0.04em;
}


/* ==========================================================================
   OFFLINE STATE
   ========================================================================== */

.rust-tc.is-network-offline
.tc-players strong,
.rust-tc.is-network-offline
.tc-players span,
.rust-tc.is-network-offline
.tc-joining strong,
.rust-tc.is-network-offline
.tc-joining span {
    color: #698266;
    text-shadow: none;
}


/* ==========================================================================
   FOOTER
   SAME 1180PX ALIGNMENT SHELL AS THE RUST NAV
   ========================================================================== */

.rust-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: #020202;
}

.rust-footer-inner {
    width: min(
        var(--rust-chrome-shell),
        calc(100% - 48px)
    );

    min-height: 86px;
    margin-inline: auto;

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

    align-items: center;
}

.rust-footer-brand {
    justify-self: start;

    display: flex;
    align-items: center;

    line-height: 0;
}

.rust-footer-brand img {
    display: block;

    width: 78px;
    height: 56px;

    object-fit: contain;
    object-position: left center;

    filter:
        drop-shadow(0 0 9px rgba(255, 25, 35, 0.18));
}

.rust-footer p {
    grid-column: 3;
    justify-self: end;

    margin: 0;

    color: #66615c;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
    white-space: nowrap;
}


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

@media (max-width: 1100px) {

    .rust-stage-inner {
        grid-template-columns:
            190px
            auto;
    }

    .rust-tc {
        width: var(--tc-tablet-width);
        max-width: 100%;
    }

    .rust-stage-copy {
        margin-top: 90px;
    }

    .rust-stage-copy h1 {
        font-size: 72px;
    }

}


/* ==========================================================================
   MOBILE / TABLET NAV
   Matches the main NoobTube behaviour:
   logo left, burger right, full-width dropdown.
   ========================================================================== */

@media (max-width: 980px) {

    :root {
        --header-height: 72px;
    }

    .rust-site-header {
        height: var(--header-height);
    }

    .rust-nav-shell {
        position: relative;

        width: min(
            calc(100% - 24px),
            var(--rust-chrome-shell)
        );

        height: 100%;
        margin-inline: auto;

        display: grid;
        grid-template-columns:
            1fr
            auto;

        align-items: center;
    }

    .rust-nav-brand {
        justify-self: start;
    }

    .rust-nav-brand img {
        width: 88px;
        height: 54px;
    }

    .rust-steam-login {
        display: none;
    }

    .rust-nav-toggle {
        justify-self: end;

        width: 46px;
        height: 42px;

        padding: 10px;

        display: grid;
        align-content: center;

        gap: 5px;

        background:
            linear-gradient(
                180deg,
                rgba(39, 31, 26, 0.92),
                rgba(12, 9, 8, 0.98)
            );

        border:
            1px solid
            rgba(135, 104, 83, 0.62);

        border-radius: 2px;

        cursor: pointer;
    }

    .rust-nav-toggle span {
        display: block;

        width: 100%;
        height: 2px;

        background: #eee9e2;

        transform-origin: center;

        transition:
            transform 160ms ease,
            opacity 160ms ease;
    }

    .rust-nav-toggle.is-open span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }

    .rust-nav-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .rust-nav-toggle.is-open span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }

    .rust-primary-nav {
        position: absolute;
        z-index: 120;

        top: 100%;
        left: 50%;

        width: 100vw;
        height: auto;

        transform:
            translateX(-50%);

        padding:
            10px
            14px
            16px;

        display: none;

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

        gap: 0;

        background:
            linear-gradient(
                180deg,
                rgba(7, 5, 4, 0.995),
                rgba(2, 2, 2, 0.995)
            );

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

        border-bottom:
            1px solid
            rgba(151, 62, 38, 0.35);

        box-shadow:
            0 18px 30px
            rgba(0, 0, 0, 0.55);
    }

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

    .rust-primary-nav a {
        min-height: 52px;
        height: auto;

        display: grid;
        place-items: center;

        padding:
            0
            12px;

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

        color: #aaa49d;

        font-size: 12px;
        line-height: 1;

        font-weight: 900;
        letter-spacing: 0.08em;
    }

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

        background:
            rgba(217, 56, 39, 0.08);
    }

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


    /* ----------------------------------------------------------
       PAGE / TOOL CUPBOARD
       ---------------------------------------------------------- */

    .rust-stage {
        padding:
            14px
            14px
            34px;

        background-position:
            center top,
            center top;
    }

    .rust-stage-inner {
        width: 100%;

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

    .rust-tc {
        width: var(--tc-mobile-width);
        max-width: 100%;

        margin-inline: auto;
    }

}


/* ==========================================================================
   MOBILE FOOTER
   Main-site style: centred stacked footer.
   ========================================================================== */

@media (max-width: 700px) {

    .rust-footer-inner {
        width:
            calc(100% - 24px);

        min-height: 0;

        padding:
            22px
            0
            20px;

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

        gap: 10px;

        text-align: center;
    }

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

    .rust-footer-brand img {
        width: 70px;
        height: 50px;

        object-position: center;
    }

    .rust-footer p {
        grid-column: auto;
        justify-self: auto;

        margin: 0;

        font-size: 9px;
        line-height: 1.4;

        text-align: center;
        white-space: normal;
    }

}


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

@media (max-width: 420px) {

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

    .rust-nav-brand img {
        width: 76px;
        height: 48px;
    }

    .rust-nav-toggle {
        width: 42px;
        height: 40px;

        padding: 9px;
    }

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

    .rust-primary-nav a {
        min-height: 48px;

        font-size: 11px;
    }

    .rust-stage {
        padding:
            10px
            10px
            28px;
    }

    .rust-footer-inner {
        width:
            calc(100% - 20px);
    }

}