/* ==================================================
   BOXXHEADGAMING
   FINAL PUBLIC PAGE OVERRIDE
   This file intentionally loads LAST.
================================================== */

:root{
    --bx-red:#ef3340;
    --bx-red2:#ff4653;
    --bx-bg:#0b0b0c;
    --bx-panel:#141518;
    --bx-panel2:#191a1e;
    --bx-text:#f3f3f1;
    --bx-muted:#9a9aa0;
    --bx-line:#303136;
    --bx-line2:#44454a;
    --bx-width:1500px;
}

html,
body{
    margin:0 !important;
    padding:0 !important;
    background:#0b0b0c !important;
    color:#f3f3f1 !important;
    font-family:Arial,Helvetica,sans-serif !important;
}

body{
    background:
        radial-gradient(
            circle at 30% -5%,
            rgba(255,255,255,.05),
            transparent 30%
        ),
        #0b0b0c !important;
}

/* ==================================================
   REMOVE LEGACY SITE CHROME
================================================== */

body > header:not(.bx-universal-header):not(.bx-header),
body > footer:not(.bx-universal-footer):not(.bx-footer),
body > nav,
.site-header,
.site-footer,
.main-header,
.old-header,
.old-nav,
.legacy-header,
.legacy-footer{
    display:none !important;
}

/* ==================================================
   NEW HEADER ALWAYS VISIBLE
================================================== */

.bx-inner-topline{
    display:flex !important;
    min-height:44px !important;
    align-items:center !important;
    border-bottom:1px solid var(--bx-line) !important;
    background:#0b0b0c !important;
    color:#96969b !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;
}

.bx-inner-shell{
    width:min(var(--bx-width),calc(100% - 56px)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

.bx-inner-topline .bx-inner-shell{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:20px !important;
}

.bx-inner-topline .bx-inner-shell > div{
    display:flex !important;
    gap:18px !important;
}

.bx-inner-topline a{
    color:#aaa !important;
    text-decoration:none !important;
}

.bx-universal-header{
    display:block !important;
    width:100% !important;
    background:#0b0b0c !important;
    border-bottom:1px solid var(--bx-line) !important;
}

.bx-inner-header-row{
    min-height:112px !important;
    display:grid !important;
    grid-template-columns:minmax(300px,380px) 1fr 64px !important;
    align-items:center !important;
    gap:25px !important;
}

.bx-inner-brand{
    display:block !important;
}

.bx-inner-brand img{
    display:block;
    width:360px !important;
    max-width:100% !important;
    max-height:74px !important;
    object-fit:contain !important;
    object-position:left center !important;
}

.bx-inner-wordmark{
    display:inline-flex;
    align-items:center;
    color:white !important;
    text-decoration:none !important;
    font-family:Impact,"Arial Narrow",sans-serif !important;
    font-size:48px !important;
    line-height:.9 !important;
    letter-spacing:-.035em !important;
    transform:skew(-6deg);
    text-transform:uppercase !important;
}

.bx-inner-wordmark span{
    color:var(--bx-red) !important;
}

.bx-inner-tagline{
    margin-top:7px !important;
    color:#939398 !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:.23em !important;
}

/* ==================================================
   NAV
================================================== */

.bx-inner-nav{
    display:flex !important;
    align-self:stretch !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    background:transparent !important;
}

.bx-inner-nav a{
    min-height:112px !important;
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    padding:0 12px !important;
    color:#d5d5d7 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    text-decoration:none !important;
    text-transform:uppercase !important;
    font-size:12px !important;
    font-weight:900 !important;
}

.bx-inner-nav a::after{
    content:"";
    position:absolute;
    height:3px;
    left:12px;
    right:12px;
    bottom:24px;
    background:transparent;
}

.bx-inner-nav a:hover{
    color:white !important;
}

.bx-inner-nav a:hover::after{
    background:var(--bx-red);
}

/* ==================================================
   SEARCH BUTTON
================================================== */

.bx-inner-search-button{
    width:64px !important;
    height:64px !important;
    display:grid !important;
    place-items:center !important;
    border:0 !important;
    border-left:1px solid var(--bx-line) !important;
    border-radius:0 !important;
    background:transparent !important;
    color:white !important;
}

.bx-inner-search-button span{
    width:22px;
    height:22px;
    display:block;
    position:relative;
    border:2px solid white;
    border-radius:50%;
}

.bx-inner-search-button span::after{
    content:"";
    position:absolute;
    width:9px;
    height:2px;
    background:white;
    right:-7px;
    bottom:-4px;
    transform:rotate(45deg);
}

.bx-inner-search-panel{
    display:none !important;
    padding:16px 0 !important;
    border-top:1px solid var(--bx-line) !important;
}

.bx-inner-search-panel.open{
    display:block !important;
}

.bx-inner-search-form{
    display:flex !important;
    gap:10px !important;
}

.bx-inner-search-form input{
    flex:1 !important;
    min-width:0 !important;
    min-height:48px !important;
    background:#151619 !important;
    color:white !important;
    border:1px solid var(--bx-line2) !important;
    border-radius:0 !important;
    padding:0 15px !important;
}

.bx-inner-search-form button{
    min-height:48px !important;
    padding:0 24px !important;
    background:var(--bx-red) !important;
    color:white !important;
    border:0 !important;
    border-radius:0 !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
}

.bx-inner-page-rule{
    width:min(var(--bx-width),calc(100% - 56px)) !important;
    height:4px !important;
    margin:20px auto 0 !important;
    background:
        linear-gradient(
            90deg,
            var(--bx-red) 0 70px,
            var(--bx-line) 70px 100%
        ) !important;
}

/* ==================================================
   MAIN PAGE BODY
================================================== */

body > main,
main{
    width:min(1180px,calc(100% - 56px)) !important;
    max-width:1180px !important;
    margin:0 auto !important;
    padding:36px 0 65px !important;
    background:transparent !important;
    color:white !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

main > *{
    max-width:100%;
}

.container,
.wrapper,
.page,
.page-content,
.content,
.content-wrapper,
.page-container,
.article-container,
.main-content{
    max-width:1180px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    background:transparent !important;
    box-shadow:none !important;
}

/* ==================================================
   BIG GAME INFORMER STYLE HEADLINES
================================================== */

main h1,
.page-title,
.category-title,
.article-title,
.video-title,
.game-title,
.review-title{
    margin-top:0 !important;
    margin-bottom:22px !important;
    color:white !important;
    background:transparent !important;
    font-family:Impact,"Arial Narrow",sans-serif !important;
    font-size:clamp(42px,5vw,72px) !important;
    font-weight:900 !important;
    line-height:.95 !important;
    letter-spacing:-.015em !important;
    text-transform:uppercase !important;
}

main h1::after,
.page-title::after,
.category-title::after{
    content:"";
    display:block;
    width:68px;
    height:6px;
    margin-top:15px;
    background:var(--bx-red);
}

main h2{
    color:white !important;
    font-family:Impact,"Arial Narrow",sans-serif !important;
    text-transform:uppercase !important;
    letter-spacing:.01em !important;
}

main h3,
main h4{
    color:white !important;
}

/* ==================================================
   ARTICLE TEXT
================================================== */

main p,
main li{
    color:#d4d4d6 !important;
    line-height:1.72 !important;
}

article{
    max-width:980px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

article p{
    font-size:17px !important;
}

.meta,
.metadata,
.date,
.timestamp,
.byline,
small{
    color:#8d8d92 !important;
}

/* ==================================================
   IMAGES
================================================== */

main img{
    max-width:100% !important;
    height:auto;
}

article > img,
.article-image,
.hero-image,
.feature-image{
    width:100% !important;
    margin:18px 0 27px !important;
    border:1px solid var(--bx-line) !important;
    border-radius:0 !important;
}

/* ==================================================
   CARDS — REMOVE AI LOOK
================================================== */

.card,
.news-card,
.game-card,
.video-card,
.review-card,
.clip-card,
.story-card,
.item-card,
.search-result,
.result,
.post-card{
    border:1px solid var(--bx-line) !important;
    border-radius:0 !important;
    background:#151619 !important;
    box-shadow:none !important;
    overflow:hidden !important;
}

.card:hover,
.news-card:hover,
.game-card:hover,
.video-card:hover,
.review-card:hover,
.clip-card:hover,
.story-card:hover,
.search-result:hover{
    border-color:#57585d !important;
}

.grid,
.cards,
.card-grid,
.news-grid,
.game-grid,
.video-grid,
.review-grid,
.clip-grid,
.results-grid{
    gap:18px !important;
}

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

.category,
.category-label,
.kicker,
.eyebrow,
.tag,
.badge{
    color:var(--bx-red) !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    font-size:11px !important;
    font-weight:900 !important;
    letter-spacing:.07em !important;
    text-transform:uppercase !important;
}

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

main button,
main .btn,
main .button,
main input[type="submit"],
main a.btn,
main a.button{
    min-height:45px !important;
    padding:0 19px !important;
    background:var(--bx-red) !important;
    color:white !important;
    border:1px solid var(--bx-red) !important;
    border-radius:0 !important;
    box-shadow:none !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
}

main button:hover,
main .btn:hover,
main .button:hover{
    background:var(--bx-red2) !important;
}

/* ==================================================
   INPUTS
================================================== */

main input,
main textarea,
main select{
    background:#151619 !important;
    color:white !important;
    border:1px solid var(--bx-line2) !important;
    border-radius:0 !important;
    box-shadow:none !important;
    padding:12px 14px !important;
}

/* ==================================================
   VIDEO PLAYER
================================================== */

iframe{
    max-width:100% !important;
}

.video-container,
.video-wrapper,
.embed-container,
.player,
.video-player,
.youtube-player{
    width:100% !important;
    max-width:1180px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    background:#000 !important;
    border:1px solid var(--bx-line) !important;
    border-radius:0 !important;
}

.video-container iframe,
.video-wrapper iframe,
.embed-container iframe,
.player iframe,
.video-player iframe,
.youtube-player iframe{
    width:100% !important;
    aspect-ratio:16/9 !important;
    height:auto !important;
    border:0 !important;
}

/* ==================================================
   BLOCKQUOTE / STORY QUOTES
================================================== */

blockquote{
    margin:35px 0 !important;
    padding:9px 0 9px 23px !important;
    border-left:5px solid var(--bx-red) !important;
    color:white !important;
    font-size:20px !important;
    line-height:1.55 !important;
}

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

.bx-universal-footer{
    display:block !important;
    width:100% !important;
    margin-top:35px !important;
    background:#0b0b0c !important;
    border-top:1px solid var(--bx-line) !important;
}

.bx-inner-footer-main{
    min-height:112px !important;
    display:grid !important;
    grid-template-columns:285px 1fr auto !important;
    gap:30px !important;
    align-items:center !important;
}

.bx-inner-footer-logo{
    color:white !important;
    font-family:Impact,"Arial Narrow",sans-serif !important;
    font-size:28px !important;
    text-transform:uppercase !important;
    transform:skew(-6deg);
}

.bx-inner-footer-logo span{
    color:var(--bx-red) !important;
}

.bx-inner-footer-tag{
    margin-top:5px;
    color:#77777c !important;
    font-size:9px !important;
    font-weight:900;
    letter-spacing:.17em;
}

.bx-inner-footer-nav{
    display:flex !important;
    justify-content:center !important;
    gap:23px !important;
    flex-wrap:wrap !important;
}

.bx-inner-footer-nav a{
    color:#bdbdc0 !important;
    text-decoration:none !important;
    font-size:12px !important;
}

.bx-inner-admin{
    min-height:47px !important;
    display:inline-flex !important;
    align-items:center !important;
    padding:0 20px !important;
    color:white !important;
    border:2px solid var(--bx-red) !important;
    text-decoration:none !important;
    font-size:12px !important;
    font-weight:900 !important;
}

.bx-inner-admin:hover{
    background:var(--bx-red) !important;
}

.bx-inner-footer-bottom{
    min-height:60px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    border-top:1px solid var(--bx-line) !important;
    color:#77777c !important;
    font-size:10px !important;
}

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

@media(max-width:900px){

    .bx-inner-shell{
        width:calc(100% - 30px) !important;
    }

    .bx-inner-header-row{
        padding-top:18px !important;
        grid-template-columns:1fr 52px !important;
    }

    .bx-inner-brand{
        grid-column:1 !important;
    }

    .bx-inner-search-button{
        grid-column:2 !important;
        grid-row:1 !important;
        width:52px !important;
        height:52px !important;
    }

    .bx-inner-nav{
        grid-column:1/-1 !important;
        grid-row:2 !important;
        justify-content:flex-start !important;
        overflow-x:auto !important;
        border-top:1px solid var(--bx-line) !important;
        margin-top:15px !important;
    }

    .bx-inner-nav a{
        min-height:55px !important;
        white-space:nowrap !important;
        font-size:11px !important;
    }

    .bx-inner-nav a::after{
        bottom:7px !important;
    }

    body > main,
    main{
        width:calc(100% - 30px) !important;
    }

    .bx-inner-footer-main{
        grid-template-columns:1fr auto !important;
        padding:25px 0 !important;
    }

    .bx-inner-footer-nav{
        grid-row:2 !important;
        grid-column:1/-1 !important;
        justify-content:flex-start !important;
    }
}

@media(max-width:620px){

    .bx-inner-shell{
        width:calc(100% - 22px) !important;
    }

    .bx-inner-topline .bx-inner-shell > span{
        display:none !important;
    }

    .bx-inner-topline .bx-inner-shell{
        justify-content:flex-end !important;
    }

    body > main,
    main{
        width:calc(100% - 22px) !important;
    }

    main h1,
    .page-title,
    .article-title,
    .category-title{
        font-size:41px !important;
    }

    .bx-inner-footer-main{
        grid-template-columns:1fr !important;
    }

    .bx-inner-footer-nav{
        grid-row:auto !important;
        grid-column:auto !important;
        justify-content:flex-start !important;
    }

    .bx-inner-admin{
        justify-self:start !important;
    }

    .bx-inner-footer-bottom{
        min-height:75px !important;
        flex-direction:column !important;
        justify-content:center !important;
        align-items:flex-start !important;
        gap:5px !important;
    }
}

/* ==================================================
   BOXXHEAD PUBLIC SITE — MOBILE FINAL PASS
================================================== */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
iframe {
    max-width: 100%;
}

/* ------------------------------
   TABLET
------------------------------ */

@media (max-width: 900px) {

    .bx-shell {
        width: calc(100% - 28px) !important;
    }

    .bx-header-row {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .bx-brand img {
        width: 270px !important;
        max-width: 80vw !important;
        height: auto !important;
    }

    .bx-mainnav {
        grid-column: 1 / -1 !important;
        display: flex !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 8px 0 !important;
    }

    .bx-mainnav::-webkit-scrollbar {
        display: none !important;
    }

    .bx-mainnav a {
        flex: 0 0 auto !important;
        padding: 10px 11px !important;
    }

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

    .bx-latest {
        border-left: 0 !important;
        padding-left: 0 !important;
        margin-top: 26px !important;
    }

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

}


/* ------------------------------
   PHONE
------------------------------ */

@media (max-width: 650px) {

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

    .bx-shell {
        width: calc(100% - 20px) !important;
    }

    /* HEADER */

    .bx-header-row {
        grid-template-columns: 1fr auto !important;
        padding-top: 10px !important;
        padding-bottom: 6px !important;
    }

    .bx-brand img {
        width: 220px !important;
        max-width: 72vw !important;
    }

    .bx-mainnav {
        margin-left: -2px !important;
        margin-right: -2px !important;
        gap: 0 !important;
    }

    .bx-mainnav a {
        font-size: 11px !important;
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* HERO */

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

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

    .bx-hero-content {
        left: 18px !important;
        right: 18px !important;
        bottom: 20px !important;
    }

    .bx-hero h1 {
        font-size: clamp(34px, 11vw, 52px) !important;
        line-height: .98 !important;
        margin-bottom: 12px !important;
    }

    .bx-hero p {
        font-size: 15px !important;
        line-height: 1.45 !important;
        max-width: 100% !important;
    }

    /* LATEST */

    .bx-section-heading {
        min-height: unset !important;
        margin-bottom: 12px !important;
    }

    .bx-latest-item {
        grid-template-columns: 104px minmax(0,1fr) !important;
        gap: 12px !important;
        padding: 13px 0 !important;
    }

    .bx-latest-thumb {
        width: 104px !important;
        height: 78px !important;
    }

    .bx-latest-title {
        font-size: 15px !important;
        line-height: 1.2 !important;
    }

    /* STORY CARDS */

    .bx-story-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

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

    .bx-story-title {
        font-size: 24px !important;
        line-height: 1.05 !important;
    }

    /* ABOUT */

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

    .bx-about-art {
        min-height: 220px !important;
    }

    .bx-about-copy {
        min-height: unset !important;
        padding: 26px 18px !important;
    }

    .bx-about-side {
        display: none !important;
    }

    /* FOOTER */

    .bx-footer-main {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .bx-footer-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 8px 14px !important;
    }

    .bx-admin {
        justify-self: start !important;
    }

    /* INNER PAGE GENERIC FIX */

    main,
    .content,
    .container,
    .page-shell,
    .article-shell {
        max-width: 100% !important;
    }

    iframe {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
    }

}


/* ------------------------------
   VERY SMALL PHONES
------------------------------ */

@media (max-width: 390px) {

    .bx-shell {
        width: calc(100% - 16px) !important;
    }

    .bx-brand img {
        width: 195px !important;
    }

    .bx-mainnav a {
        padding-left: 9px !important;
        padding-right: 9px !important;
        font-size: 10px !important;
    }

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

    .bx-hero h1 {
        font-size: 35px !important;
    }

}


/* =========================================================
   BOXXHEADGAMING — MOBILE HEADER / NAV FINAL OVERRIDE
   ========================================================= */

@media (max-width: 700px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        background: #090909 !important;
    }


    /* -----------------------------------------
       MAIN HEADER
       ----------------------------------------- */

    .bx-header,
    .bx-site-header,
    header.bx-header,
    .site-header {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        background: #090909 !important;
        overflow: visible !important;
    }


    /* -----------------------------------------
       TOP UTILITY LINKS
       ----------------------------------------- */

    .bx-topbar,
    .bx-utility,
    .bx-utility-bar,
    .bx-header-top {
        width: 100% !important;
        min-height: 38px !important;
        height: auto !important;
        padding: 8px 14px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 22px !important;

        background: #090909 !important;
        border-bottom: 1px solid #282828 !important;
    }

    .bx-topbar a,
    .bx-utility a,
    .bx-utility-bar a,
    .bx-header-top a {
        color: #bdbdbd !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: .18em !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }


    /* -----------------------------------------
       LOGO + SEARCH ROW
       ----------------------------------------- */

    .bx-header-row,
    .bx-brand-row,
    .bx-logo-row {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;

        display: flex !important;
        grid-template-columns: none !important;

        align-items: center !important;
        justify-content: space-between !important;

        gap: 12px !important;

        padding: 14px 14px 8px !important;

        background: #090909 !important;
    }


    .bx-brand,
    .bx-logo,
    .site-logo {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: auto !important;
        max-width: calc(100% - 65px) !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .bx-brand img,
    .bx-logo img,
    .site-logo img {
        display: block !important;

        width: 135px !important;
        max-width: 42vw !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;
    }


    /* SEARCH */

    .bx-search,
    .bx-search-wrap,
    .header-search {
        flex: 0 0 48px !important;

        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;

        height: 48px !important;

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

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border-left: 1px solid #333 !important;
    }

    .bx-search button,
    .bx-search a,
    .bx-search-wrap button,
    .bx-search-wrap a {
        min-width: 44px !important;
        width: 44px !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

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

        background: transparent !important;
        color: white !important;
        border: 0 !important;
    }


    /* -----------------------------------------
       TAGLINE
       ----------------------------------------- */

    .bx-tagline,
    .bx-tag-line,
    .site-tagline {
        width: 100% !important;

        margin: 0 !important;
        padding: 6px 14px !important;

        background: #090909 !important;
        color: #aaa !important;

        border-top: 1px solid #292929 !important;
        border-bottom: 1px solid #292929 !important;

        font-size: 10px !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;

        letter-spacing: .22em !important;
        white-space: nowrap !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }


    /* =================================================
       CRITICAL FIX:
       NO WHITE GIANT MOBILE MENU
       ================================================= */

    .bx-mainnav,
    nav.bx-mainnav,
    .bx-nav,
    .main-nav,
    .public-nav {

        width: 100% !important;
        max-width: 100% !important;

        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;

        margin: 0 !important;
        padding: 0 10px !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 0 !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        white-space: nowrap !important;

        background: #090909 !important;
        background-color: #090909 !important;

        border-top: 0 !important;
        border-bottom: 2px solid #d71920 !important;

        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }


    .bx-mainnav::-webkit-scrollbar,
    .bx-nav::-webkit-scrollbar,
    .main-nav::-webkit-scrollbar {
        display: none !important;
    }


    /* -----------------------------------------
       NAV LINKS
       ----------------------------------------- */

    .bx-mainnav a,
    .bx-nav a,
    .main-nav a,
    .public-nav a {

        flex: 0 0 auto !important;

        width: auto !important;
        min-width: 0 !important;

        height: 46px !important;
        min-height: 46px !important;

        margin: 0 !important;

        padding: 0 13px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: transparent !important;
        background-color: transparent !important;

        color: #d0d0d0 !important;

        border: 0 !important;

        font-size: 11px !important;
        line-height: 1 !important;
        font-weight: 800 !important;

        letter-spacing: .05em !important;

        text-decoration: none !important;
        white-space: nowrap !important;
    }


    .bx-mainnav a:hover,
    .bx-mainnav a:focus,
    .bx-mainnav a.active,
    .bx-nav a:hover,
    .main-nav a:hover {

        color: #ffffff !important;
        background: #181818 !important;
    }


    /* -----------------------------------------
       KILL ANY OLD WHITE MOBILE DROPDOWN LAYOUT
       ----------------------------------------- */

    .bx-mainnav ul,
    .bx-nav ul,
    .main-nav ul {

        width: auto !important;
        height: 48px !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;

        gap: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        list-style: none !important;
    }


    .bx-mainnav li,
    .bx-nav li,
    .main-nav li {

        flex: 0 0 auto !important;

        width: auto !important;
        height: 48px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        list-style: none !important;
    }


    /* -----------------------------------------
       PAGE START
       ----------------------------------------- */

    .bx-main,
    main {
        margin-top: 0 !important;
    }


    /* -----------------------------------------
       ARTICLE MOBILE ALIGNMENT
       ----------------------------------------- */

    .bx-article-page {
        width: calc(100% - 24px) !important;
        max-width: none !important;

        margin: 0 auto !important;
        padding-top: 22px !important;
    }


    .bx-article-header {
        width: 100% !important;
        max-width: none !important;

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


    .bx-article-header h1 {
        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        font-size: clamp(32px, 9vw, 44px) !important;
        line-height: 1 !important;

        text-align: left !important;
    }


    .bx-article-hero {
        width: calc(100% + 24px) !important;

        margin-left: -12px !important;
        margin-right: -12px !important;

        border-radius: 0 !important;
    }


    .bx-article-hero img {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;

        object-fit: cover !important;
    }


    .bx-article-layout {
        width: 100% !important;

        display: block !important;

        margin: 0 !important;
    }


    .bx-article-body {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

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


    /* -----------------------------------------
       SHARE BUTTONS
       ----------------------------------------- */

    .bx-share-buttons {
        width: 100% !important;

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

        gap: 8px !important;
    }


    .bx-share-btn {
        width: 100% !important;
        min-width: 0 !important;

        height: 46px !important;

        padding: 0 8px !important;

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

        font-size: 10px !important;

        text-align: center !important;
    }


    /* -----------------------------------------
       FOOTER
       ----------------------------------------- */

    .bx-footer-main,
    .bx-footer-inner {
        width: 100% !important;

        display: block !important;

        padding-left: 14px !important;
        padding-right: 14px !important;
    }

}



/* =========================================================
   EXTRA SMALL IPHONES
   ========================================================= */

@media (max-width: 390px) {

    .bx-brand img,
    .bx-logo img,
    .site-logo img {
        width: 120px !important;
    }

    .bx-mainnav a,
    .bx-nav a,
    .main-nav a {
        padding-left: 11px !important;
        padding-right: 11px !important;

        font-size: 10px !important;
    }

    .bx-article-header h1 {
        font-size: 32px !important;
    }

}


/* ==========================================================
   REAL MOBILE FIX — SHARED INNER PAGE HEADER
   Targets: news articles, category pages, game pages, etc.
   ========================================================== */

@media (max-width: 700px) {

    /* ------------------------------------------
       TOP UTILITY BAR
       ------------------------------------------ */

    .bx-inner-topline {
        width: 100% !important;
        height: auto !important;
        min-height: 36px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #090909 !important;
        border-bottom: 1px solid #262626 !important;
    }

    .bx-inner-topline .bx-inner-shell {
        width: 100% !important;
        max-width: none !important;

        min-height: 36px !important;

        margin: 0 !important;
        padding: 7px 14px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        gap: 18px !important;
    }

    /* Hide long slogan from very top on phone */
    .bx-inner-topline .bx-inner-shell > span {
        display: none !important;
    }

    .bx-inner-topline .bx-inner-shell > div {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 20px !important;
    }

    .bx-inner-topline a {
        margin: 0 !important;
        padding: 0 !important;

        color: #aaa !important;

        font-size: 11px !important;
        font-weight: 800 !important;

        letter-spacing: .18em !important;

        text-decoration: none !important;
        white-space: nowrap !important;
    }


    /* ------------------------------------------
       MAIN HEADER
       ------------------------------------------ */

    .bx-universal-header {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #090909 !important;

        overflow: visible !important;
    }


    .bx-universal-header > .bx-inner-shell,
    .bx-inner-header-row {
        width: 100% !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;

        padding: 12px 14px 8px !important;

        display: grid !important;

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

        grid-template-rows:
            auto
            auto !important;

        column-gap: 10px !important;
        row-gap: 8px !important;

        align-items: center !important;

        background: #090909 !important;
    }


    /* ------------------------------------------
       BRAND / LOGO
       ------------------------------------------ */

    .bx-inner-brand {
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: auto !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: flex-start !important;
        justify-content: center !important;

        gap: 5px !important;
    }


    .bx-inner-brand img {
        display: block !important;

        width: 135px !important;
        max-width: 42vw !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;
    }


    .bx-inner-wordmark {
        font-size: 24px !important;
        line-height: 1 !important;

        margin: 0 !important;
    }


    .bx-inner-tagline {
        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #999 !important;

        font-size: 9px !important;
        line-height: 1 !important;

        font-weight: 800 !important;

        letter-spacing: .20em !important;

        white-space: nowrap !important;
    }


    /* ------------------------------------------
       SEARCH BUTTON
       ------------------------------------------ */

    .bx-inner-search-button {
        grid-column: 2 !important;
        grid-row: 1 !important;

        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;

        height: 46px !important;
        min-height: 46px !important;

        margin: 0 !important;
        padding: 0 !important;

        justify-self: end !important;

        background: transparent !important;

        border: 0 !important;
        border-left: 1px solid #303030 !important;

        border-radius: 0 !important;
    }


    /* ------------------------------------------
       ACTUAL BROKEN NAV — FIXED HERE
       ------------------------------------------ */

    .bx-inner-nav {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;

        margin: 0 !important;

        padding: 0 !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 0 !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        white-space: nowrap !important;

        background: #090909 !important;
        background-color: #090909 !important;

        border: 0 !important;

        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }


    .bx-inner-nav::-webkit-scrollbar {
        display: none !important;
    }


    .bx-inner-nav a {
        flex: 0 0 auto !important;

        width: auto !important;
        min-width: 0 !important;

        height: 46px !important;
        min-height: 46px !important;

        margin: 0 !important;

        padding: 0 13px !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        background: transparent !important;
        background-color: transparent !important;

        color: #c9c9c9 !important;

        border: 0 !important;

        font-size: 11px !important;
        line-height: 1 !important;

        font-weight: 800 !important;

        letter-spacing: .04em !important;

        text-decoration: none !important;

        white-space: nowrap !important;
    }


    .bx-inner-nav a::after {
        display: none !important;
        content: none !important;
    }


    .bx-inner-nav a:hover,
    .bx-inner-nav a:focus {
        color: #fff !important;
        background: #171717 !important;
    }


    /* ------------------------------------------
       RED LINE UNDER NAV
       ------------------------------------------ */

    .bx-inner-page-rule {
        display: block !important;

        width: 100% !important;

        height: 2px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #df1f26 !important;

        border: 0 !important;
    }


    /* ------------------------------------------
       SEARCH PANEL
       ------------------------------------------ */

    .bx-inner-search-panel {
        width: 100% !important;

        background: #111 !important;
    }

    .bx-inner-search-panel .bx-inner-shell {
        width: 100% !important;
        max-width: none !important;

        padding: 12px !important;

        background: #111 !important;
    }

    .bx-inner-search-form {
        width: 100% !important;

        display: grid !important;

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

        gap: 7px !important;
    }

    .bx-inner-search-form input {
        width: 100% !important;
        min-width: 0 !important;

        height: 44px !important;

        background: #181818 !important;
        color: white !important;

        border: 1px solid #444 !important;

        border-radius: 0 !important;
    }

    .bx-inner-search-form button {
        height: 44px !important;

        padding: 0 15px !important;

        background: #df1f26 !important;
        color: white !important;

        border: 0 !important;

        border-radius: 0 !important;
    }


    /* ------------------------------------------
       ARTICLE STARTS DIRECTLY AFTER HEADER
       ------------------------------------------ */

    .article-shell,
    .bx-article-page,
    main {
        margin-top: 0 !important;
    }


    .bx-article-page {
        width: calc(100% - 24px) !important;
        max-width: none !important;

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

        padding-top: 20px !important;
    }

}



/* ==========================================================
   SMALL IPHONE
   ========================================================== */

@media (max-width: 390px) {

    .bx-inner-brand img {
        width: 120px !important;
    }

    .bx-inner-nav a {
        padding-left: 11px !important;
        padding-right: 11px !important;

        font-size: 10px !important;
    }

}