/* ======================================================
   BOXXHEAD GAMING V6 — PUBLIC SITE SYSTEM
   ====================================================== */

:root {

    --bx6-bg:
        #020711;

    --bx6-bg2:
        #06101d;

    --bx6-panel:
        #081320;

    --bx6-panel2:
        #0b1726;

    --bx6-line:
        rgba(106, 163, 224, .20);

    --bx6-text:
        #f7fbff;

    --bx6-muted:
        #8d9cab;

    --bx6-red:
        #ff174f;

    --bx6-pink:
        #f51b72;

    --bx6-purple:
        #9b2cff;

    --bx6-cyan:
        #00dfff;

}


html {

    background:
        var(--bx6-bg);

}


body {

    margin:
        0;

    min-height:
        100vh;

    background:

        radial-gradient(
            circle at 50% 0,
            #15294d 0,
            #07111f 27%,
            #020711 66%
        ) !important;

    color:
        var(--bx6-text) !important;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

}


* {

    box-sizing:
        border-box;

}


img {

    max-width:
        100%;

}


a {

    transition:
        color .18s ease,
        border-color .18s ease,
        opacity .18s ease;

}



/* ======================================================
   PUBLIC HEADERS
   ====================================================== */

header:not(.admin-header),
.site-header,
.public-header,
.bx-header,
.bx-mobile-header {

    background:
        rgba(2,7,17,.95) !important;

    border-bottom:
        1px solid
        var(--bx6-line) !important;

    color:
        white !important;

    backdrop-filter:
        blur(18px);

}


header:not(.admin-header) a,
.site-header a,
.public-header a,
.bx-header a {

    color:
        #dae5ef;

}


header:not(.admin-header) a:hover,
.site-header a:hover,
.public-header a:hover,
.bx-header a:hover {

    color:
        var(--bx6-red);

}



/* ======================================================
   PUBLIC PAGE WIDTH
   ====================================================== */

main:not(.admin-main),
.page-shell,
.site-shell,
.content-shell,
.bx-shell {

    width:
        min(
            1500px,
            calc(100% - 46px)
        );

    margin-left:
        auto;

    margin-right:
        auto;

}



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

main:not(.admin-main) h1,
main:not(.admin-main) h2,
main:not(.admin-main) h3,
main:not(.admin-main) h4 {

    color:
        white;

}


main:not(.admin-main) p {

    color:
        var(--bx6-muted);

    line-height:
        1.6;

}



/* ======================================================
   CARDS / CONTENT AREAS
   ====================================================== */

main:not(.admin-main) .card,
main:not(.admin-main) .panel,
main:not(.admin-main) .content-card,
main:not(.admin-main) .video-card,
main:not(.admin-main) .game-card,
main:not(.admin-main) .news-card,
main:not(.admin-main) .review-card,
main:not(.admin-main) .watch-card,
main:not(.admin-main) article {

    border-color:
        var(--bx6-line) !important;

}


main:not(.admin-main) .card,
main:not(.admin-main) .panel,
main:not(.admin-main) .content-card {

    background:

        linear-gradient(
            145deg,
            rgba(9,21,37,.97),
            rgba(3,10,20,.98)
        ) !important;

    border:
        1px solid
        var(--bx6-line);

    border-radius:
        10px;

}



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

main:not(.admin-main) .btn-primary,
main:not(.admin-main) .primary-button,
main:not(.admin-main) .button-primary,
main:not(.admin-main) button[type="submit"] {

    border:
        0 !important;

    border-radius:
        5px !important;

    background:

        linear-gradient(
            135deg,
            var(--bx6-red),
            var(--bx6-pink)
        ) !important;

    color:
        white !important;

}



/* ======================================================
   FORMS
   ====================================================== */

main:not(.admin-main) input,
main:not(.admin-main) textarea,
main:not(.admin-main) select {

    border:
        1px solid
        #273949 !important;

    border-radius:
        5px !important;

    background:
        #07111f !important;

    color:
        white !important;

}



/* ======================================================
   ARTICLE / NEWS READING
   ====================================================== */

.article-page,
.news-page,
.review-page,
.watch-page {

    color:
        var(--bx6-text);

}


.article-page p,
.news-page p,
.review-page p {

    max-width:
        850px;

    font-size:
        16px;

    line-height:
        1.75;

}



/* ======================================================
   MEDIA
   ====================================================== */

video,
iframe {

    max-width:
        100%;

    border-radius:
        8px;

}


iframe {

    border:
        0;

}



/* ======================================================
   V6 STANDALONE PAGES
   ====================================================== */

.bx6-page {

    min-height:
        calc(100vh - 250px);

    padding:
        54px 0 70px;

}


.bx6-page-inner {

    width:
        min(
            1200px,
            calc(100% - 46px)
        );

    margin:
        auto;

}


.bx6-eyebrow {

    color:
        var(--bx6-red);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;

}


.bx6-title {

    margin:
        8px 0 13px;

    font-size:
        clamp(
            34px,
            6vw,
            64px
        );

    line-height:
        1;

}


.bx6-lead {

    max-width:
        700px;

    margin:
        0;

    color:
        var(--bx6-muted);

    font-size:
        16px;

    line-height:
        1.65;

}


.bx6-grid {

    display:
        grid;

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

    gap:
        16px;

    margin-top:
        38px;

}


.bx6-feature {

    padding:
        25px;

    border:
        1px solid
        var(--bx6-line);

    border-radius:
        10px;

    background:

        linear-gradient(
            145deg,
            rgba(10,24,41,.96),
            rgba(4,12,22,.98)
        );

}


.bx6-feature span {

    color:
        var(--bx6-red);

    font-size:
        11px;

    font-weight:
        900;

}


.bx6-feature h3 {

    margin:
        8px 0;

    font-size:
        20px;

}


.bx6-feature p {

    margin:
        0;

    color:
        var(--bx6-muted);

    font-size:
        13px;

}



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

.bx6-footer {

    margin-top:
        60px;

    border-top:
        1px solid
        var(--bx6-line);

    background:
        #01050b;

}


.bx6-footer-inner {

    width:
        min(
            1500px,
            calc(100% - 46px)
        );

    margin:
        auto;

    padding:
        36px 0 24px;

}


.bx6-footer-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

}


.bx6-footer-brand img {

    width:
        90px;

    max-height:
        76px;

    object-fit:
        contain;

}


.bx6-footer-brand strong {

    display:
        block;

    color:
        white;

    font-size:
        14px;

}


.bx6-footer-brand span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--bx6-muted);

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;

}


.bx6-footer-links {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        18px;

    margin:
        28px 0;

}


.bx6-footer-links a {

    color:
        #8d9cab;

    font-size:
        9px;

    font-weight:
        900;

    text-decoration:
        none;

    text-transform:
        uppercase;

}


.bx6-footer-links a:hover {

    color:
        var(--bx6-red);

}


.bx6-footer-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding-top:
        18px;

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

    color:
        #586675;

    font-size:
        9px;

}


.bx6-clarkworks {

    color:
        #718090;

}


.bx6-clarkworks strong {

    color:
        var(--bx6-red);

    font-weight:
        900;

}



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

@media
(max-width: 820px) {

    main:not(.admin-main),
    .page-shell,
    .site-shell,
    .content-shell,
    .bx-shell {

        width:
            calc(100% - 24px);

    }


    .bx6-page-inner,
    .bx6-footer-inner {

        width:
            calc(100% - 24px);

    }


    .bx6-grid {

        grid-template-columns:
            1fr;

    }


    .bx6-footer-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}



/* ======================================================
   V6.1 HEADER
   ====================================================== */

.bx6-site-header {

    position: sticky;

    top: 0;

    z-index: 999;

    min-height: 72px;

    background:
        rgba(2,7,17,.96);

    border-bottom:
        1px solid
        rgba(106,163,224,.20);

    backdrop-filter:
        blur(18px);

}


.bx6-header-shell {

    width:
        min(
            1500px,
            calc(100% - 46px)
        );

    min-height: 72px;

    margin:
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        30px;

}


.bx6-site-logo {

    width:
        125px;

    display:
        block;

}


.bx6-site-logo img {

    width: 100%;

    display: block;

}


.bx6-site-nav {

    flex: 1;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        25px;

}


.bx6-site-nav a {

    color:
        #dce6ef;

    font-size:
        10px;

    font-weight:
        900;

    text-decoration:
        none;

    text-transform:
        uppercase;

}


.bx6-site-nav a:hover {

    color:
        var(--bx6-red);

}


.bx6-menu-toggle {

    display:
        none;

}


/* ======================================================
   V6.1 PAGE HERO
   ====================================================== */

.bx6-page-hero {

    padding:
        65px 0 45px;

    border-bottom:
        1px solid
        rgba(106,163,224,.14);

    background:

        radial-gradient(
            circle at 50% 0,
            rgba(93,42,196,.24),
            transparent 42%
        );

}


.bx6-page-hero-inner {

    width:
        min(
            1350px,
            calc(100% - 46px)
        );

    margin:
        auto;

}


.bx6-page-hero h1 {

    margin:
        7px 0 12px;

    color:
        white;

    font-size:
        clamp(
            38px,
            5vw,
            65px
        );

    line-height:
        1;

}


.bx6-page-hero p {

    max-width:
        700px;

    margin: 0;

    color:
        var(--bx6-muted);

    font-size:
        15px;

    line-height:
        1.6;

}


/* ======================================================
   PUBLIC CONTENT GRID
   ====================================================== */

.bx6-content {

    width:
        min(
            1350px,
            calc(100% - 46px)
        );

    margin:
        auto;

    padding:
        38px 0 65px;

}


.bx6-card-grid {

    display:
        grid;

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

    gap:
        16px;

}


.bx6-content-card {

    overflow:
        hidden;

    border:
        1px solid
        var(--bx6-line);

    border-radius:
        9px;

    background:

        linear-gradient(
            145deg,
            #091625,
            #050c17
        );

}


.bx6-content-card-image {

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    background:
        #07101b;

}


.bx6-content-card-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.bx6-content-card-body {

    padding:
        15px;

}


.bx6-content-card-body h2,
.bx6-content-card-body h3 {

    margin:
        5px 0;

    color:
        white;

}


.bx6-content-card-body a {

    color:
        white;

    text-decoration:
        none;

}


.bx6-content-card-body p {

    color:
        var(--bx6-muted);

    font-size:
        11px;

}


.bx6-label {

    color:
        var(--bx6-red);

    font-size:
        8px;

    font-weight:
        950;

    text-transform:
        uppercase;

}


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

@media
(max-width: 820px) {

    .bx6-header-shell {

        width:
            calc(100% - 24px);

        min-height:
            64px;

    }


    .bx6-site-logo {

        width:
            105px;

    }


    .bx6-menu-toggle {

        width:
            42px;

        height:
            42px;

        margin-left:
            auto;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            5px;

        border:
            1px solid
            rgba(255,255,255,.13);

        border-radius:
            6px;

        background:
            transparent;

    }


    .bx6-menu-toggle span {

        width:
            20px;

        height:
            2px;

        background:
            white;

    }


    .bx6-site-nav {

        position:
            fixed;

        left:
            12px;

        right:
            12px;

        top:
            70px;

        display:
            none;

        padding:
            8px;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

        border:
            1px solid
            var(--bx6-line);

        border-radius:
            9px;

        background:
            #040c17;

    }


    .bx6-site-nav.open {

        display:
            flex;

    }


    .bx6-site-nav a {

        padding:
            14px;

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

    }


    .bx6-page-hero-inner,
    .bx6-content {

        width:
            calc(100% - 24px);

    }


    .bx6-card-grid {

        grid-template-columns:
            1fr;

    }

}