/* =========================================================
   NOOBTUBE — MOBILE
   =========================================================

   IMPORTANT:
   Mobile uses its OWN panel artwork and layout.

   Do not shrink desktop image panels for mobile.
   ========================================================= */


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

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


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

.site-header {
    height: 82px;
}

.site-header::after {
    width: 90%;
}


/* =========================================================
   MOBILE NAV LAYOUT
   ========================================================= */

.nav-inner {
    display: grid;

    grid-template-columns:
        1fr
        auto;

    gap: 12px;

    align-items: center;
}


/* =========================================================
   MOBILE BRAND
   ========================================================= */

.brand {
    justify-self: start;

    gap: 9px;

    min-width: 0;
}

.brand img {
    width: 62px;
    height: 58px;

    flex: 0 0 auto;
}

.brand span {
    gap: 4px;
}

.brand strong {
    font-size: 14px;

    letter-spacing: 0.20em;
}

.brand small {
    font-size: 7px;

    letter-spacing: 0.22em;
}


/* =========================================================
   MOBILE PRIMARY NAV
   ========================================================= */

.primary-nav {
    display: none;
}


/* =========================================================
   MOBILE DISCORD BUTTON
   ========================================================= */

.discord-btn {
    justify-self: end;

    width: 116px;
    height: 38px;

    font-size: 9px;

    letter-spacing: 0.09em;
}


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

.hero {
    min-height: 0;

    padding:
        30px
        0
        32px;

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

    background-position:
        center -60px;

    background-size:
        cover;
}


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

.eyebrow {
    font-size: 9px;

    letter-spacing: 0.25em;
}


/* =========================================================
   MOBILE NOOBTUBE TITLE
   ========================================================= */

.hero h1 {
    margin:
        9px
        0
        5px;

    font-size:
        clamp(
            48px,
            17vw,
            74px
        );

    line-height: 0.92;

    letter-spacing: 0.005em;
}


/* =========================================================
   MOBILE TAGLINE
   ========================================================= */

.tagline {
    font-size: 9px;

    letter-spacing: 0.27em;
}


/* =========================================================
   MOBILE LIVE NETWORK PANEL
   ========================================================= */

.network-panel {
    position: relative;

    width: 100%;
    height: auto;

    aspect-ratio: 3 / 2;

    margin:
        24px
        auto
        0;

    padding: 0;

    background-color: transparent;

    background-image:
        url("/assets/images/panel-control-background-mobile.webp");

    background-repeat: no-repeat;

    background-position: center;

    background-size: contain;

    border: 0;

    clip-path: none;

    box-shadow: none;


    /* =====================================================
       MOBILE DIAL MANUAL CONTROLS

       X:
       positive = RIGHT
       negative = LEFT

       Y:
       positive = DOWN
       negative = UP

       SIZE:
       controls overall dial size
       ===================================================== */

    --mobile-dial-x: 0px;
    --mobile-dial-y: -11px;
    --mobile-dial-size: 110px;
}


/* =========================================================
   MOBILE DIAL POSITION
   ========================================================= */

.dial-wrap {
    position: absolute;

    left: 50%;
    top: 50%;

    width: var(--mobile-dial-size);
    height: var(--mobile-dial-size);

    display: grid;

    place-items: center;

    transform:
        translate(
            calc(-50% + var(--mobile-dial-x)),
            calc(-50% + var(--mobile-dial-y))
        );
}


/* =========================================================
   MOBILE DIAL SIZE
   ========================================================= */

.dial {
    width: var(--mobile-dial-size);
}


/* =========================================================
   MOBILE DIAL READOUT
   ========================================================= */

.dial-core strong {
    font-size: 18px;
}

.dial-core span {
    font-size: 5px;
}

.dial-core small {
    font-size: 4px;
}


/* =========================================================
   MOBILE PANEL LEDS
   HIDDEN ON MOBILE
   ========================================================= */

.panel-leds {
    display: none;
}

/* =========================================================
   MOBILE LANDSCAPE
   ========================================================= */

@media (orientation: landscape) and (max-height: 500px) {

    .network-panel {
        --mobile-dial-x: 0px;
        --mobile-dial-y: -21px;
        --mobile-dial-size: 230px;
    }

    .dial-core strong {
        font-size: 54px;
    }

    .dial-core span {
        font-size: 11px;
    }

    .dial-core small {
        font-size: 8px;
    }
}

/* =========================================================
   MOBILE — OUR GAME SERVERS
   ========================================================= */

.games {
    padding:
        28px
        0
        42px;
}


/* =========================================================
   MOBILE SECTION HEADING
   ========================================================= */

.section-heading {
    width: 100%;
}

.section-heading h2 {
    font-size: 20px;
    line-height: 1;

    letter-spacing: 0.22em;
}

.section-heading p {
    margin-top: 8px;

    font-size: 8px;

    letter-spacing: 0.16em;
}


/* Shorter red lines either side of title */

.section-heading::before,
.section-heading::after {
    top: 11px;

    width: 42px;
}

.section-heading::before {
    right: calc(50% + 150px);
}

.section-heading::after {
    left: calc(50% + 150px);
}


/* =========================================================
   MOBILE GAME GRID
   ========================================================= */

.game-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 18px;

    margin-top: 24px;

    justify-items: center;
}


/* =========================================================
   MOBILE GAME CARD
   ========================================================= */

.game-card {
    width: 100%;

    /*
       Prevent the artwork becoming enormous
       on wider phones.
    */
    max-width: 390px;

    aspect-ratio: 384 / 390;

    margin-inline: auto;
}


/* =========================================================
   MOBILE GAME ARTWORK
   Same Barely Alive artwork window
   ========================================================= */

.game-art {
    top: 5.4%;

    left: 5.2%;
    right: 5.2%;

    height: 50.8%;
}


/* =========================================================
   MOBILE GAME STATS
   ========================================================= */

.game-stats {
    top: 56.2%;

    left: 6.4%;
    right: 6.4%;

    height: 22.3%;

    grid-template-columns:
        68%
        32%;
}

.game-stats > div {
    transform: translateY(-6px);
}


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

.game-stats strong {
    font-size: 38px;
}

.game-stats span {
    margin-top: 6px;

    font-size: 8px;

    letter-spacing: 0.08em;
}


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

.joining strong {
    font-size: 27px;
}

.joining span {
    font-size: 8px;
}

.joining-lights {
    gap: 4px;

    margin-top: 7px;
}

.joining-lights i {
    width: 5px;
    height: 5px;
}


/* =========================================================
   MOBILE COMING SOON
   ========================================================= */

.coming-soon-state {
    padding-inline: 8% !important;
}

.coming-soon-state strong {
    font-size: 27px;
}

.coming-soon-state span {
    margin-top: 7px;

    font-size: 8px;
}


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

.game-footer {
    left: 6.4%;
    right: 6.4%;

    bottom: 8.8%;

    height: 8.6%;

    font-size: 9px;

    letter-spacing: 0.10em;
}

.game-live-light,
.game-development-light {
    width: 6px;
    height: 6px;

    margin-right: 8px;
}