/* ============================================================
   BOXXHEAD GAMING — LIGHT PUBLICATION THEME
   White + Black + Red
   Desktop + Tablet + Phone

   IMPORTANT:
   Promotional banner is intentionally NOT targeted.
   ============================================================ */

:root {
    --bx-page: #f4f5f7;
    --bx-white: #ffffff;
    --bx-soft: #f8f8f9;
    --bx-gray: #eceef1;

    --bx-black: #0d0e10;
    --bx-black-2: #15171a;
    --bx-text: #151515;
    --bx-muted: #62666d;

    --bx-red: #e51d2a;
    --bx-red-bright: #ff303c;
    --bx-red-soft: #fff0f1;

    --bx-border: #dfe2e6;
    --bx-border-dark: rgba(0,0,0,.12);

    --bx-shadow:
        0 10px 28px rgba(15,20,30,.09);
}


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

html,
body.bx-homepage {
    background: var(--bx-page) !important;
}

body.bx-homepage {
    color: var(--bx-text) !important;
}


/* ============================================================
   HEADER — KEEP STRONG BLACK BRAND BAR
   ============================================================ */

body.bx-homepage header {
    background:
        linear-gradient(
            180deg,
            #111317,
            #090a0c
        ) !important;

    border-bottom:
        3px solid var(--bx-red) !important;

    box-shadow:
        0 6px 20px rgba(0,0,0,.22) !important;
}

body.bx-homepage header a {
    color: rgba(255,255,255,.88) !important;
}

body.bx-homepage header a:hover {
    color: #fff !important;
}


/* ============================================================
   MAIN CANVAS
   ============================================================ */

body.bx-homepage .v7-main {
    background: transparent !important;
}


/* ============================================================
   TOP STORIES
   ============================================================ */

body.bx-homepage .bxhome-top {
    color: var(--bx-text) !important;
}

body.bx-homepage .bxhome-top-heading {
    border-bottom:
        3px solid var(--bx-red) !important;
}

body.bx-homepage .bxhome-top-heading h1 {
    color: var(--bx-black) !important;
}

body.bx-homepage .bxhome-eyebrow,
body.bx-homepage .bxhome-story-category {
    color: var(--bx-red) !important;
}

body.bx-homepage .bxhome-all-news {
    color: var(--bx-red) !important;
}


/* Keep lead cinematic */

body.bx-homepage .bxhome-lead {
    background: var(--bx-black) !important;

    border:
        1px solid rgba(0,0,0,.20) !important;

    box-shadow:
        0 14px 32px rgba(0,0,0,.18) !important;
}

body.bx-homepage .bxhome-lead h2,
body.bx-homepage .bxhome-lead p {
    color: #fff !important;
}


/* Secondary stories become white publication cards */

body.bx-homepage .bxhome-secondary-card {
    background: var(--bx-white) !important;

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

    box-shadow: var(--bx-shadow) !important;
}

body.bx-homepage .bxhome-secondary-copy h3 {
    color: var(--bx-black) !important;
}

body.bx-homepage .bxhome-secondary-copy p {
    color: var(--bx-muted) !important;
}

body.bx-homepage .bxhome-secondary-card:hover {
    border-color: var(--bx-red) !important;
}


/* ============================================================
   FEATURED + LATEST
   ============================================================ */

body.bx-homepage .v7-lead-layout {
    background: var(--bx-white) !important;

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

    box-shadow: var(--bx-shadow) !important;
}

body.bx-homepage .v7-lead-story {
    background: var(--bx-white) !important;

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

    box-shadow: none !important;
}

body.bx-homepage .v7-lead-story h1,
body.bx-homepage .v7-lead-story h2,
body.bx-homepage .v7-lead-story h3 {
    color: var(--bx-black) !important;
}

body.bx-homepage .v7-lead-story p {
    color: var(--bx-muted) !important;
}


/* Latest sidebar */

body.bx-homepage .v7-latest-column {
    background: var(--bx-soft) !important;

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

    color: var(--bx-text) !important;
}

body.bx-homepage .v7-latest-column h2,
body.bx-homepage .v7-latest-column h3,
body.bx-homepage .v7-latest-column a {
    color: var(--bx-black) !important;
}

body.bx-homepage .v7-latest-column a:hover {
    color: var(--bx-red) !important;
}


/* ============================================================
   ALL MAJOR SECTIONS
   ============================================================ */

body.bx-homepage .v7-main > .v7-section {
    background: var(--bx-white) !important;

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

    box-shadow: var(--bx-shadow) !important;
}


/* Remove dark alternating section backgrounds */

body.bx-homepage .v7-main > .v7-section:nth-of-type(even),
body.bx-homepage .v7-main > .v7-section:nth-of-type(odd) {
    background: var(--bx-white) !important;
}


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

body.bx-homepage .v7-section h1,
body.bx-homepage .v7-section h2,
body.bx-homepage .v7-section h3,
body.bx-homepage .v7-section h4 {
    color: var(--bx-black) !important;
}

body.bx-homepage .v7-section > h2::after,
body.bx-homepage .v7-section-title::after {
    background: var(--bx-red) !important;
}


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

body.bx-homepage .v7-video-story {
    background: var(--bx-white) !important;

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

    box-shadow:
        0 7px 18px rgba(0,0,0,.08) !important;
}

body.bx-homepage .v7-video-story h1,
body.bx-homepage .v7-video-story h2,
body.bx-homepage .v7-video-story h3,
body.bx-homepage .v7-video-story a {
    color: var(--bx-black) !important;
}

body.bx-homepage .v7-video-story p {
    color: var(--bx-muted) !important;
}

body.bx-homepage .v7-video-story:hover {
    border-color: var(--bx-red) !important;

    box-shadow:
        0 12px 26px rgba(0,0,0,.13) !important;
}


/* ============================================================
   FEATURED GAMES
   Keep some BLACK in the design.
   ============================================================ */

body.bx-homepage .v7-game-card {
    background:
        linear-gradient(
            135deg,
            #181b20,
            #090a0c
        ) !important;

    border:
        1px solid #26292e !important;

    box-shadow:
        0 9px 22px rgba(0,0,0,.15) !important;
}

body.bx-homepage .v7-game-card h1,
body.bx-homepage .v7-game-card h2,
body.bx-homepage .v7-game-card h3,
body.bx-homepage .v7-game-card p,
body.bx-homepage .v7-game-card a {
    color: #fff !important;
}

body.bx-homepage .v7-game-card:hover {
    border-color: var(--bx-red) !important;
}


/* ============================================================
   STORY / NEWS CARDS
   ============================================================ */

body.bx-homepage .v7-news-card,
body.bx-homepage .v7-story-card {
    background: var(--bx-soft) !important;

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

    box-shadow:
        0 6px 16px rgba(0,0,0,.06) !important;
}

body.bx-homepage .v7-news-card h1,
body.bx-homepage .v7-news-card h2,
body.bx-homepage .v7-news-card h3,
body.bx-homepage .v7-story-card h1,
body.bx-homepage .v7-story-card h2,
body.bx-homepage .v7-story-card h3 {
    color: var(--bx-black) !important;
}

body.bx-homepage .v7-news-card p,
body.bx-homepage .v7-story-card p {
    color: var(--bx-muted) !important;
}


/* ============================================================
   CATEGORY LABELS
   ============================================================ */

body.bx-homepage .v7-label,
body.bx-homepage .v7-category,
body.bx-homepage .v7-kicker {
    color: var(--bx-red) !important;
}


/* ============================================================
   GENERIC HOMEPAGE TEXT
   ============================================================ */

body.bx-homepage .v7-main p {
    color: var(--bx-muted);
}

body.bx-homepage .v7-main a {
    color: var(--bx-black);
}

body.bx-homepage .v7-main a:hover {
    color: var(--bx-red);
}


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

body.bx-homepage .v7-main button,
body.bx-homepage .v7-main .btn,
body.bx-homepage .v7-main .button {
    background:
        linear-gradient(
            135deg,
            var(--bx-red-bright),
            var(--bx-red)
        ) !important;

    color: #fff !important;

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

    box-shadow:
        0 7px 16px rgba(229,29,42,.20) !important;
}


/* ============================================================
   COMMUNITY / WHAT'S NEXT
   ============================================================ */

body.bx-homepage .v7-bottom-grid {
    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}

body.bx-homepage .v7-bottom-grid > * {
    background: var(--bx-white) !important;

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

    border-top:
        4px solid var(--bx-red) !important;

    box-shadow: var(--bx-shadow) !important;
}

body.bx-homepage .v7-bottom-grid h1,
body.bx-homepage .v7-bottom-grid h2,
body.bx-homepage .v7-bottom-grid h3 {
    color: var(--bx-black) !important;
}

body.bx-homepage .v7-bottom-grid p {
    color: var(--bx-muted) !important;
}


/* ============================================================
   TRENDING & POPULAR
   ============================================================ */

body.bx-homepage .bxtrend {
    color: var(--bx-text) !important;
}

body.bx-homepage .bxtrend-head h2,
body.bx-homepage .bxtrend h2,
body.bx-homepage .bxtrend h3 {
    color: var(--bx-black) !important;
}

body.bx-homepage .bxtrend-card {
    background: var(--bx-white) !important;

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

    box-shadow:
        0 8px 20px rgba(0,0,0,.08) !important;
}

body.bx-homepage .bxtrend-card h1,
body.bx-homepage .bxtrend-card h2,
body.bx-homepage .bxtrend-card h3,
body.bx-homepage .bxtrend-card a {
    color: var(--bx-black) !important;
}

body.bx-homepage .bxtrend-card p {
    color: var(--bx-muted) !important;
}

body.bx-homepage .bxtrend-card:hover {
    border-color: var(--bx-red) !important;
}


/* Popular ranking rows */

body.bx-homepage .bxtrend table,
body.bx-homepage .bxtrend tbody,
body.bx-homepage .bxtrend tr {
    color: var(--bx-text) !important;
}

body.bx-homepage .bxtrend tr {
    border-color: var(--bx-border) !important;
}


/* ============================================================
   RED ACCENT STRIP BETWEEN SOME SECTIONS
   ============================================================ */

body.bx-homepage .v7-main > .v7-section {
    position: relative;
}

body.bx-homepage .v7-main > .v7-section::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 28px;

    width: 68px;
    height: 3px;

    background: var(--bx-red);

    border-radius:
        0 0 4px 4px;
}


/* ============================================================
   FOOTER — BLACK ANCHOR
   ============================================================ */

body.bx-homepage footer {
    background:
        linear-gradient(
            180deg,
            #111317,
            #08090b
        ) !important;

    color: rgba(255,255,255,.74) !important;

    border-top:
        4px solid var(--bx-red) !important;
}

body.bx-homepage footer h1,
body.bx-homepage footer h2,
body.bx-homepage footer h3,
body.bx-homepage footer strong {
    color: #fff !important;
}

body.bx-homepage footer a {
    color: rgba(255,255,255,.76) !important;
}

body.bx-homepage footer a:hover {
    color: #fff !important;
}


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

@media (max-width: 1000px) {

    body.bx-homepage .v7-main > .v7-section {
        background: #fff !important;
    }
}


/* ============================================================
   PHONE
   White theme follows desktop automatically.
   ============================================================ */

@media (max-width: 700px) {

    html,
    body.bx-homepage {
        background: #f4f5f7 !important;
    }

    body.bx-homepage .v7-main {
        background: transparent !important;
    }

    body.bx-homepage .v7-main > .v7-section {
        background: #fff !important;

        border:
            1px solid #dde0e4 !important;

        box-shadow:
            0 7px 20px rgba(0,0,0,.08) !important;
    }

    body.bx-homepage .v7-lead-layout {
        background: #fff !important;

        border:
            1px solid #dde0e4 !important;
    }

    body.bx-homepage .v7-latest-column {
        background: #f7f7f8 !important;
    }

    body.bx-homepage .bxhome-secondary-card {
        background: #fff !important;
    }

    body.bx-homepage .v7-bottom-grid > * {
        background: #fff !important;
    }

    body.bx-homepage .bxtrend-card {
        background: #fff !important;
    }
}


/* ============================================================
   BOXXHEAD — RED BACKGROUND FINAL OVERRIDE
   Red canvas + black publication cards + white text
   Banner intentionally untouched
   ============================================================ */

html,
body.bx-homepage {
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(255,90,90,.24),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 35%,
            rgba(100,0,0,.24),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #d91f2b 0%,
            #b81420 42%,
            #8e0d17 100%
        ) fixed !important;

    color: #fff !important;
}


/* MAIN CANVAS */

body.bx-homepage .v7-main {
    background: transparent !important;
}


/* ============================================================
   TOP STORIES
   ============================================================ */

body.bx-homepage .bxhome-top-heading h1 {
    color: #fff !important;
}

body.bx-homepage .bxhome-eyebrow {
    color: #ffd1d4 !important;
}

body.bx-homepage .bxhome-all-news {
    color: #fff !important;
}

body.bx-homepage .bxhome-top-heading {
    border-bottom-color: #fff !important;
}


/* Lead remains cinematic black */

body.bx-homepage .bxhome-lead {
    background: #0d0e10 !important;

    border:
        1px solid rgba(255,255,255,.24) !important;

    box-shadow:
        0 18px 42px rgba(50,0,0,.28) !important;
}


/* Secondary cards */

body.bx-homepage .bxhome-secondary-card {
    background:
        linear-gradient(
            145deg,
            #202226,
            #101113
        ) !important;

    border:
        1px solid rgba(255,255,255,.18) !important;

    box-shadow:
        0 10px 24px rgba(50,0,0,.20) !important;
}

body.bx-homepage .bxhome-secondary-copy h3 {
    color: #fff !important;
}

body.bx-homepage .bxhome-secondary-copy p {
    color: #c7c9cd !important;
}


/* ============================================================
   FEATURED + LATEST
   ============================================================ */

body.bx-homepage .v7-lead-layout {
    background:
        linear-gradient(
            145deg,
            #202226,
            #111214
        ) !important;

    border:
        1px solid rgba(255,255,255,.20) !important;

    box-shadow:
        0 18px 40px rgba(60,0,0,.24) !important;
}

body.bx-homepage .v7-lead-story {
    background: #111214 !important;

    border:
        1px solid rgba(255,255,255,.15) !important;
}

body.bx-homepage .v7-lead-story h1,
body.bx-homepage .v7-lead-story h2,
body.bx-homepage .v7-lead-story h3 {
    color: #fff !important;
}

body.bx-homepage .v7-lead-story p {
    color: #c5c7cb !important;
}


body.bx-homepage .v7-latest-column {
    background: #202226 !important;

    border:
        1px solid rgba(255,255,255,.14) !important;
}

body.bx-homepage .v7-latest-column h2,
body.bx-homepage .v7-latest-column h3,
body.bx-homepage .v7-latest-column a {
    color: #fff !important;
}

body.bx-homepage .v7-latest-column p {
    color: #c5c7cb !important;
}


/* ============================================================
   MAJOR HOMEPAGE SECTIONS
   ============================================================ */

body.bx-homepage .v7-main > .v7-section {
    background:
        linear-gradient(
            145deg,
            #222428,
            #121315
        ) !important;

    border:
        1px solid rgba(255,255,255,.20) !important;

    box-shadow:
        0 16px 38px rgba(55,0,0,.23) !important;
}

body.bx-homepage .v7-main > .v7-section:nth-of-type(even),
body.bx-homepage .v7-main > .v7-section:nth-of-type(odd) {
    background:
        linear-gradient(
            145deg,
            #222428,
            #121315
        ) !important;
}


/* HEADINGS */

body.bx-homepage .v7-section h1,
body.bx-homepage .v7-section h2,
body.bx-homepage .v7-section h3,
body.bx-homepage .v7-section h4 {
    color: #fff !important;
}

body.bx-homepage .v7-section > h2::after,
body.bx-homepage .v7-section-title::after {
    background: #ff3542 !important;
}


/* ============================================================
   VIDEOS
   ============================================================ */

body.bx-homepage .v7-video-story {
    background: #090a0c !important;

    border:
        1px solid rgba(255,255,255,.16) !important;
}

body.bx-homepage .v7-video-story h1,
body.bx-homepage .v7-video-story h2,
body.bx-homepage .v7-video-story h3,
body.bx-homepage .v7-video-story a {
    color: #fff !important;
}

body.bx-homepage .v7-video-story p {
    color: #bfc2c7 !important;
}


/* ============================================================
   GAMES
   ============================================================ */

body.bx-homepage .v7-game-card {
    background:
        linear-gradient(
            145deg,
            #17191d,
            #050607
        ) !important;

    border:
        1px solid rgba(255,255,255,.18) !important;
}

body.bx-homepage .v7-game-card h1,
body.bx-homepage .v7-game-card h2,
body.bx-homepage .v7-game-card h3,
body.bx-homepage .v7-game-card p,
body.bx-homepage .v7-game-card a {
    color: #fff !important;
}


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

body.bx-homepage .v7-news-card,
body.bx-homepage .v7-story-card {
    background: #101113 !important;

    border:
        1px solid rgba(255,255,255,.15) !important;
}

body.bx-homepage .v7-news-card h1,
body.bx-homepage .v7-news-card h2,
body.bx-homepage .v7-news-card h3,
body.bx-homepage .v7-story-card h1,
body.bx-homepage .v7-story-card h2,
body.bx-homepage .v7-story-card h3 {
    color: #fff !important;
}

body.bx-homepage .v7-news-card p,
body.bx-homepage .v7-story-card p {
    color: #bfc2c7 !important;
}


/* ============================================================
   COMMUNITY
   ============================================================ */

body.bx-homepage .v7-bottom-grid {
    background: transparent !important;
}

body.bx-homepage .v7-bottom-grid > * {
    background:
        linear-gradient(
            145deg,
            #222428,
            #111214
        ) !important;

    border:
        1px solid rgba(255,255,255,.18) !important;

    border-top:
        4px solid #ff3542 !important;

    box-shadow:
        0 14px 32px rgba(60,0,0,.20) !important;
}

body.bx-homepage .v7-bottom-grid h1,
body.bx-homepage .v7-bottom-grid h2,
body.bx-homepage .v7-bottom-grid h3 {
    color: #fff !important;
}

body.bx-homepage .v7-bottom-grid p {
    color: #c3c5c9 !important;
}


/* ============================================================
   TRENDING
   ============================================================ */

body.bx-homepage .bxtrend-head h2,
body.bx-homepage .bxtrend h2,
body.bx-homepage .bxtrend h3 {
    color: #fff !important;
}

body.bx-homepage .bxtrend-card {
    background:
        linear-gradient(
            180deg,
            #202226,
            #101113
        ) !important;

    border:
        1px solid rgba(255,255,255,.18) !important;

    box-shadow:
        0 12px 28px rgba(55,0,0,.20) !important;
}

body.bx-homepage .bxtrend-card h1,
body.bx-homepage .bxtrend-card h2,
body.bx-homepage .bxtrend-card h3,
body.bx-homepage .bxtrend-card a {
    color: #fff !important;
}

body.bx-homepage .bxtrend-card p {
    color: #c0c3c8 !important;
}

body.bx-homepage .bxtrend table,
body.bx-homepage .bxtrend tbody,
body.bx-homepage .bxtrend tr,
body.bx-homepage .bxtrend td {
    color: #fff !important;
}

body.bx-homepage .bxtrend tr {
    border-color:
        rgba(255,255,255,.18) !important;
}


/* ============================================================
   GENERIC TEXT
   ============================================================ */

body.bx-homepage .v7-main p {
    color: #c4c7cc;
}

body.bx-homepage .v7-main a {
    color: #fff;
}

body.bx-homepage .v7-main a:hover {
    color: #ff6a72;
}


/* ============================================================
   PHONE — SAME RED / BLACK DESIGN
   ============================================================ */

@media (max-width: 700px) {

    html,
    body.bx-homepage {
        background:
            linear-gradient(
                160deg,
                #d91f2b,
                #a9101b 55%,
                #850b14
            ) fixed !important;
    }

    body.bx-homepage .v7-main {
        background: transparent !important;
    }

    body.bx-homepage .v7-main > .v7-section {
        background:
            linear-gradient(
                145deg,
                #222428,
                #111214
            ) !important;

        border:
            1px solid rgba(255,255,255,.20) !important;
    }

    body.bx-homepage .v7-lead-layout {
        background:
            linear-gradient(
                145deg,
                #222428,
                #111214
            ) !important;
    }

    body.bx-homepage .bxhome-secondary-card,
    body.bx-homepage .v7-latest-column,
    body.bx-homepage .bxtrend-card {
        background: #15171a !important;
    }

    body.bx-homepage .v7-bottom-grid > * {
        background: #15171a !important;
    }
}


/* ============================================================
   BOXXHEAD — MUTED CRIMSON BACKGROUND
   ============================================================ */

html,
body.bx-homepage {
    background:
        radial-gradient(
            circle at 15% 12%,
            rgba(173,54,62,.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 40%,
            rgba(45,10,14,.20),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #7d252d 0%,
            #681c23 45%,
            #4b151a 100%
        ) fixed !important;
}


/* Softer red accents */

body.bx-homepage .v7-section > h2::after,
body.bx-homepage .v7-section-title::after {
    background: #c63c46 !important;
}

body.bx-homepage .v7-bottom-grid > * {
    border-top-color: #c63c46 !important;
}

body.bx-homepage .bxhome-top-heading {
    border-bottom-color: #d04a53 !important;
}


/* Buttons — still red, but not glowing */

body.bx-homepage .v7-main button,
body.bx-homepage .v7-main .btn,
body.bx-homepage .v7-main .button {
    background:
        linear-gradient(
            135deg,
            #c63c46,
            #a72c36
        ) !important;

    border-color: #b9343e !important;

    box-shadow:
        0 6px 14px rgba(100,15,22,.20) !important;
}


/* PHONE */

@media (max-width: 700px) {

    html,
    body.bx-homepage {
        background:
            linear-gradient(
                160deg,
                #7d252d 0%,
                #651b22 55%,
                #491419 100%
            ) fixed !important;
    }
}