/* ======================================================
   BOXXHEAD GAMING — CLEAN PUBLIC UI
   ====================================================== */

:root {
    --bg: #030812;
    --bg-soft: #07111d;
    --panel: #0a1420;
    --panel-soft: #0d1825;

    --line: rgba(119, 160, 202, .16);

    --text: #f5f7fa;
    --muted: #a5b0bb;

    --accent: #ff174f;
    --accent-soft: #d81444;

    --max: 1440px;
}


/* ======================================================
   BASE
   ====================================================== */

html {
    background: var(--bg);
}

body {
    margin: 0;

    background:
        linear-gradient(
            180deg,
            #07101c 0,
            #030812 34%,
            #02060d 100%
        ) !important;

    color: var(--text) !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 17px !important;

    line-height: 1.6 !important;
}

* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
}


/* ======================================================
   SITE WIDTH
   ====================================================== */

.bx-shell,
.bx6-header-shell,
.bx6-page-hero-inner,
.bx6-content,
.bx6-footer-inner,
main:not(.admin-main) {
    width:
        min(
            var(--max),
            calc(100% - 56px)
        ) !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


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

.bx-header,
.bx6-site-header {
    min-height: 82px !important;

    background:
        rgba(3, 8, 18, .97) !important;

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

    backdrop-filter:
        blur(14px);
}

.bx-header-inner,
.bx6-header-shell {
    min-height: 82px !important;
}

.bx-logo,
.bx6-site-logo {
    width: 150px !important;
}

.bx-nav,
.bx6-site-nav {
    gap: 30px !important;
}

.bx-nav a,
.bx6-site-nav a {
    color: #e4e9ee !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    text-transform: none !important;

    letter-spacing: 0 !important;

    text-decoration: none !important;
}

.bx-nav a:hover,
.bx6-site-nav a:hover,
.bx-nav a.active {
    color: var(--accent) !important;
}


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

.bx-hero {
    min-height: 560px !important;
}

.bx-hero::before {
    opacity: .65;
}


/* ======================================================
   SECTION HEADINGS
   ====================================================== */

.bx-panel-title,
.bx-section-heading {
    min-height: 68px !important;

    padding:
        0 22px !important;

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

    font-size: 15px !important;
    font-weight: 700 !important;

    text-transform: none !important;
}

.bx-section-heading h2 {
    font-size: 24px !important;
    text-transform: none !important;
}

.bx-panel-title > a,
.bx-section-heading > a {
    color: var(--accent) !important;

    font-size: 13px !important;
    font-weight: 700 !important;
}


/* ======================================================
   REMOVE DECORATIVE ICON FEEL
   ====================================================== */

.bx-red-icon {
    display: none !important;
}

.bx-kicker,
.bx6-label,
.bx6-eyebrow {
    color: var(--accent) !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    letter-spacing: .03em !important;

    text-transform: none !important;
}


/* ======================================================
   CARDS
   ====================================================== */

.bx-panel,
.bx6-content-card,
.bx6-feature {
    background:
        var(--panel) !important;

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

    border-radius:
        8px !important;

    box-shadow:
        none !important;
}

.bx-featured-body,
.bx-review-list,
.bx-news-list,
.bx-video-grid,
.bx-latest-list {
    padding: 20px !important;
}


/* ======================================================
   FEATURED VIDEO
   ====================================================== */

.bx-feature-info h1 {
    margin-top: 10px !important;

    font-size: 30px !important;
    line-height: 1.2 !important;
}

.bx-feature-info p {
    font-size: 16px !important;
    line-height: 1.6 !important;
}


/* ======================================================
   VIDEO CARDS
   ====================================================== */

.bx-video-grid {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        ) !important;

    gap: 22px !important;
}

.bx-video-meta {
    padding-top: 12px !important;
}

.bx-video-meta h3 {
    margin-top: 6px !important;

    font-size: 17px !important;
    line-height: 1.35 !important;
}

.bx-play-small,
.bx-play-big {
    font-size: 13px !important;
}


/* ======================================================
   LATEST / NEWS
   ====================================================== */

.bx-latest-item {
    padding:
        17px 0 !important;
}

.bx-latest-item strong {
    margin-top: 5px !important;

    font-size: 16px !important;
    line-height: 1.4 !important;
}

.bx-news-item {
    min-height: 96px !important;

    grid-template-columns:
        120px minmax(0, 1fr) !important;

    gap: 16px !important;

    padding:
        14px 0 !important;
}

.bx-news-image {
    width: 120px !important;
    height: 78px !important;
}

.bx-news-item strong {
    font-size: 16px !important;
    line-height: 1.4 !important;
}


/* ======================================================
   GAME HUBS
   ====================================================== */

.bx-games-grid {
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        ) !important;

    gap: 18px !important;
}

.bx-game-card {
    min-height: 260px !important;

    border-radius: 8px !important;
}

.bx-game-gradient {
    padding:
        65px 18px 18px !important;
}

.bx-game-gradient span {
    font-size: 12px !important;
}

.bx-game-gradient strong {
    margin-top: 4px !important;

    font-size: 19px !important;
}


/* ======================================================
   LOWER GRID
   ====================================================== */

.bx-three-column {
    gap: 22px !important;
}


/* ======================================================
   REVIEWS
   ====================================================== */

.bx-review-card h3 {
    font-size: 21px !important;
}

.bx-boxx-rating span {
    width: 38px !important;
    height: 38px !important;
}

.bx-read-review {
    min-height: 44px !important;

    padding:
        0 18px !important;

    font-size: 14px !important;
}


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

.bx-community-mini a,
.bx-youtube-box a,
.bx-read-review,
.bx6-content-card a.button,
button[type="submit"],
.btn-primary,
.primary-button {
    min-height: 46px !important;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 18px !important;

    border-radius:
        6px !important;

    background:
        var(--accent) !important;

    color:
        white !important;

    font-size:
        14px !important;
    font-weight:
        700 !important;

    text-decoration:
        none !important;

    box-shadow:
        none !important;
}


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

.bx6-page-hero {
    padding:
        78px 0 58px !important;
}

.bx6-page-hero h1 {
    margin:
        10px 0 16px !important;

    font-size:
        clamp(
            48px,
            6vw,
            78px
        ) !important;

    line-height:
        1 !important;
}

.bx6-page-hero p {
    max-width:
        780px !important;

    font-size:
        18px !important;

    line-height:
        1.65 !important;
}


/* ======================================================
   GENERIC CONTENT
   ====================================================== */

.bx6-content {
    padding:
        50px 0 80px !important;
}

.bx6-card-grid {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        ) !important;

    gap:
        22px !important;
}

.bx6-content-card-body {
    padding:
        20px !important;
}

.bx6-content-card-body h2,
.bx6-content-card-body h3 {
    margin:
        7px 0 !important;

    font-size:
        20px !important;
    line-height:
        1.35 !important;
}

.bx6-content-card-body p {
    font-size:
        15px !important;

    line-height:
        1.6 !important;
}


/* ======================================================
   SIMPLE FEATURE SECTIONS
   ====================================================== */

.bx6-grid {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        ) !important;

    gap:
        22px !important;

    margin-top:
        45px !important;
}

.bx6-feature {
    padding:
        28px !important;
}

.bx6-feature h3 {
    margin:
        10px 0 !important;

    font-size:
        23px !important;
}

.bx6-feature p {
    font-size:
        16px !important;

    line-height:
        1.6 !important;
}


/* ======================================================
   ARTICLES
   ====================================================== */

.article-page,
.news-page,
.review-page,
.watch-page {
    max-width:
        1000px !important;

    margin:
        auto !important;
}

.article-page p,
.news-page p,
.review-page p {
    font-size:
        18px !important;

    line-height:
        1.8 !important;
}


/* ======================================================
   ABOUT
   ====================================================== */

.bx-about {
    padding:
        55px !important;

    border-radius:
        8px !important;
}

.bx-about h2 {
    font-size:
        38px !important;
}

.bx-about p {
    font-size:
        17px !important;

    line-height:
        1.7 !important;
}

.bx-about-message {
    font-size:
        clamp(
            42px,
            5vw,
            70px
        ) !important;
}


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

.bx6-footer,
.bx-footer {
    margin-top:
        70px !important;

    background:
        #02060c !important;

    border-top:
        1px solid
        var(--line) !important;
}

.bx6-footer-inner {
    padding:
        42px 0 28px !important;
}

.bx6-footer-brand img {
    width:
        110px !important;
}

.bx6-footer-brand strong {
    font-size:
        17px !important;
}

.bx6-footer-brand span {
    font-size:
        12px !important;
}

.bx6-footer-links {
    gap:
        24px !important;
}

.bx6-footer-links a {
    font-size:
        13px !important;

    text-transform:
        none !important;
}

.bx6-footer-bottom {
    font-size:
        13px !important;
}

.bx6-clarkworks {
    color:
        var(--accent) !important;
}


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

@media
(max-width: 1100px) {

    .bx-games-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

    .bx6-card-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

    .bx6-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

}


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

@media
(max-width: 820px) {

    body {
        font-size:
            16px !important;
    }


    .bx-shell,
    .bx6-header-shell,
    .bx6-page-hero-inner,
    .bx6-content,
    .bx6-footer-inner,
    main:not(.admin-main) {
        width:
            calc(100% - 28px) !important;
    }


    .bx-header,
    .bx6-site-header,
    .bx-header-inner,
    .bx6-header-shell {
        min-height:
            68px !important;
    }


    .bx-logo,
    .bx6-site-logo {
        width:
            118px !important;
    }


    .bx-menu-button,
    .bx6-menu-toggle {
        min-width:
            48px !important;

        min-height:
            48px !important;
    }


    .bx-nav a,
    .bx6-site-nav a {
        min-height:
            48px !important;

        display:
            flex !important;

        align-items:
            center !important;

        padding:
            0 16px !important;

        font-size:
            16px !important;
    }


    .bx-hero {
        min-height:
            360px !important;
    }


    .bx-panel-title,
    .bx-section-heading {
        min-height:
            62px !important;

        padding:
            0 16px !important;

        font-size:
            16px !important;
    }


    .bx-top-layout {
        display:
            block !important;
    }


    .bx-top-layout > * {
        margin-bottom:
            18px !important;
    }


    .bx-video-grid {
        grid-template-columns:
            1fr !important;

        gap:
            20px !important;
    }


    .bx-video-meta h3 {
        font-size:
            18px !important;
    }


    .bx-feature-info h1 {
        font-size:
            26px !important;
    }


    .bx-feature-info p {
        font-size:
            16px !important;
    }


    .bx-games-grid {
        grid-template-columns:
            1fr !important;

        gap:
            16px !important;
    }


    .bx-game-card {
        min-height:
            260px !important;
    }


    .bx-three-column {
        display:
            block !important;
    }


    .bx-three-column > * {
        margin-bottom:
            18px !important;
    }


    .bx-news-item {
        grid-template-columns:
            110px minmax(0,1fr) !important;
    }


    .bx6-page-hero {
        padding:
            52px 0 40px !important;
    }


    .bx6-page-hero h1 {
        font-size:
            44px !important;
    }


    .bx6-page-hero p {
        font-size:
            17px !important;
    }


    .bx6-card-grid,
    .bx6-grid {
        grid-template-columns:
            1fr !important;

        gap:
            18px !important;
    }


    .bx6-feature {
        padding:
            24px !important;
    }


    .bx6-feature h3 {
        font-size:
            22px !important;
    }


    .bx6-feature p,
    .bx6-content-card-body p {
        font-size:
            16px !important;
    }


    .bx-about {
        padding:
            32px 22px !important;
    }


    .bx-about h2 {
        font-size:
            30px !important;
    }


    .bx-about p {
        font-size:
            16px !important;
    }


    .bx6-footer-links {
        display:
            grid !important;

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

        gap:
            14px 20px !important;
    }


    .bx6-footer-links a {
        min-height:
            42px !important;

        display:
            flex !important;

        align-items:
            center !important;

        font-size:
            15px !important;
    }


    .bx6-footer-bottom {
        gap:
            8px !important;

        font-size:
            13px !important;
    }

}


/* ======================================================
   SMALL PHONES
   ====================================================== */

@media
(max-width: 480px) {

    .bx-hero {
        min-height:
            300px !important;
    }


    .bx6-page-hero h1 {
        font-size:
            38px !important;
    }


    .bx-game-card {
        min-height:
            230px !important;
    }


    .bx-news-item {
        grid-template-columns:
            95px minmax(0,1fr) !important;
    }


    .bx-news-image {
        width:
            95px !important;

        height:
            68px !important;
    }

}



/* ======================================================
   V6.3 GAMES + REVIEWS
   ====================================================== */

.bx6-open-link {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        46px;

    margin-top:
        14px;

    padding:
        0 18px;

    border-radius:
        6px;

    background:
        #ff174f;

    color:
        white !important;

    font-size:
        15px;

    font-weight:
        700;

    text-decoration:
        none;

}


.bx6-open-link:hover {

    background:
        #d81444;

}


.bx6-fallback-logo {

    width:
        100% !important;

    height:
        100% !important;

    padding:
        35px;

    object-fit:
        contain !important;

    background:
        #08111d;

}


.bx6-review-score {

    margin:
        16px 0;

}


.bx6-head-row {

    display:
        flex;

    gap:
        7px;

    margin-bottom:
        9px;

}


.bx6-head-row span {

    width:
        42px;

    height:
        42px;

    overflow:
        hidden;

    border:
        1px solid
        #2a3948;

    border-radius:
        6px;

    opacity:
        .20;

    filter:
        grayscale(1);

}


.bx6-head-row span.active {

    opacity:
        1;

    filter:
        none;

    border-color:
        #ff174f;

}


.bx6-head-row img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.bx6-review-score strong {

    color:
        white;

    font-size:
        16px;

}


.bx6-empty-state {

    grid-column:
        1 / -1;

    padding:
        50px;

    border:
        1px solid
        rgba(119,160,202,.16);

    border-radius:
        8px;

    background:
        #0a1420;

}


.bx6-empty-state h2 {

    margin:
        0 0 8px;

    font-size:
        26px;

}


.bx6-empty-state p {

    margin:
        0;

    color:
        #a5b0bb;

    font-size:
        16px;

}


@media
(max-width: 820px) {

    .bx6-head-row span {

        width:
            38px;

        height:
            38px;

    }


    .bx6-open-link {

        width:
            100%;

        min-height:
            50px;

        font-size:
            16px;

    }


    .bx6-empty-state {

        padding:
            30px 22px;

    }

}