/* =========================================================
   BOXXHEAD GAMING
   FINAL BRAND / EDITORIAL POLISH
   ========================================================= */

:root {
    --boxx-bg: #05080b;
    --boxx-bg-soft: #091017;
    --boxx-panel: #0c151c;
    --boxx-panel-2: #101c24;
    --boxx-line: #26343d;

    --boxx-red: #ef1735;
    --boxx-red-hot: #ff2443;
    --boxx-red-dark: #a90c24;

    --boxx-text: #f4f7f9;
    --boxx-copy: #ccd4da;
    --boxx-muted: #82909a;

    --boxx-max: 1240px;

    --boxx-radius: 7px;

    --boxx-shadow:
        0 24px 70px rgba(0,0,0,.28);
}


/* ---------------------------------------------------------
   GLOBAL
   --------------------------------------------------------- */

html {
    scroll-behavior: smooth;
    background: var(--boxx-bg);
}

body {
    background:
        radial-gradient(
            circle at 75% -10%,
            rgba(239,23,53,.06),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #060a0d 0%,
            #05080b 60%,
            #040608 100%
        );

    color: var(--boxx-text);

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

a {
    transition:
        color .16s ease,
        background .16s ease,
        border-color .16s ease,
        opacity .16s ease,
        transform .16s ease;
}

button,
input,
textarea,
select {
    font: inherit;
}


/* ---------------------------------------------------------
   ACCESSIBILITY / KEYBOARD
   --------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--boxx-red-hot) !important;
    outline-offset: 3px;
}

::selection {
    background: var(--boxx-red);
    color: white;
}


/* ---------------------------------------------------------
   PUBLIC HEADER
   --------------------------------------------------------- */

.v7-header,
.bx-public-header,
.site-header {
    background:
        rgba(5,8,11,.96) !important;

    border-bottom:
        1px solid rgba(255,255,255,.08) !important;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}

.v7-header a,
.bx-public-header a,
.site-header a {
    font-weight: 800;
}

.v7-header a:hover,
.bx-public-header a:hover,
.site-header a:hover {
    color: var(--boxx-red-hot) !important;
}


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

.v7-brand img,
.bx-brand img,
.site-brand img {
    filter:
        drop-shadow(
            0 5px 18px rgba(239,23,53,.08)
        );
}


/* ---------------------------------------------------------
   PAGE SHELLS
   --------------------------------------------------------- */

.v7-shell,
.bx-shell,
main {
    position: relative;
}

.bx-page,
.bx6-page,
.bx-inner-page {
    color: var(--boxx-copy);
}


/* ---------------------------------------------------------
   HEADLINES
   --------------------------------------------------------- */

h1,
h2,
h3,
h4 {
    color: #fff;
}

h1 {
    letter-spacing: -.04em;
}

h2 {
    letter-spacing: -.025em;
}

h3 {
    letter-spacing: -.015em;
}


/* ---------------------------------------------------------
   SECTION HEADINGS
   --------------------------------------------------------- */

.bx-section-title,
.v7-section-title,
.section-title {
    position: relative;
}

.bx-section-title::before,
.v7-section-title::before,
.section-title::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 1em;
    margin-right: 10px;
    vertical-align: -.08em;
    background: var(--boxx-red);
}


/* ---------------------------------------------------------
   CARDS
   --------------------------------------------------------- */

.v7-card,
.bx-card,
.game-card,
.news-card,
.video-card,
.review-card,
.content-card {
    border:
        1px solid rgba(255,255,255,.08) !important;

    background:
        linear-gradient(
            180deg,
            rgba(16,27,35,.97),
            rgba(8,14,19,.98)
        ) !important;

    box-shadow:
        0 10px 34px rgba(0,0,0,.15);

    overflow: hidden;
}

.v7-card:hover,
.bx-card:hover,
.game-card:hover,
.news-card:hover,
.video-card:hover,
.review-card:hover,
.content-card:hover {
    border-color:
        rgba(239,23,53,.5) !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 18px 48px rgba(0,0,0,.28);
}


/* ---------------------------------------------------------
   CARD IMAGES
   --------------------------------------------------------- */

.v7-card img,
.bx-card img,
.news-card img,
.game-card img,
.video-card img,
.review-card img {
    transition:
        transform .28s ease,
        filter .28s ease;
}

.v7-card:hover img,
.bx-card:hover img,
.news-card:hover img,
.game-card:hover img,
.video-card:hover img,
.review-card:hover img {
    transform: scale(1.018);
}


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

.red-button,
.bx-button-primary,
.v7-button-primary {
    background:
        linear-gradient(
            180deg,
            var(--boxx-red-hot),
            var(--boxx-red)
        ) !important;

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

    color:
        #fff !important;

    font-weight:
        900 !important;

    box-shadow:
        0 9px 28px rgba(239,23,53,.18);

    text-decoration:
        none;
}

.red-button:hover,
.bx-button-primary:hover,
.v7-button-primary:hover {
    background:
        #ff2847 !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 13px 34px rgba(239,23,53,.25);
}


/* ---------------------------------------------------------
   PUBLIC ARTICLE / NEWS STORY
   --------------------------------------------------------- */

article {
    position: relative;
}

article p {
    color:
        var(--boxx-copy);
}

article a {
    color:
        #ff4962;

    text-decoration:
        underline;

    text-decoration-color:
        rgba(255,73,98,.42);

    text-underline-offset:
        3px;
}

article a:hover {
    color:
        #ff7488;
}

article blockquote {
    border-left:
        4px solid var(--boxx-red);

    background:
        linear-gradient(
            90deg,
            rgba(239,23,53,.08),
            rgba(255,255,255,.02)
        );

    padding:
        18px 22px;

    margin:
        32px 0;

    color:
        #fff;
}


/* ---------------------------------------------------------
   INLINE ARTICLE IMAGES
   --------------------------------------------------------- */

.bx-article-inline-image,
.bx-inline-article-image {
    width: 100%;
    margin: 38px 0 42px !important;
}

.bx-article-inline-image img,
.bx-inline-article-image img {
    display: block;

    width: 100%;

    height: auto;

    max-height: 780px;

    object-fit: contain;

    background: #020405;

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

    border-radius:
        3px;

    box-shadow:
        0 22px 65px rgba(0,0,0,.28);
}

.bx-article-inline-image figcaption,
.bx-inline-article-image figcaption {
    margin-top: 9px;

    padding-left: 10px;

    border-left:
        3px solid var(--boxx-red);

    color:
        var(--boxx-muted) !important;

    font-size:
        12px;

    line-height:
        1.55;
}


/* ---------------------------------------------------------
   TABLES
   --------------------------------------------------------- */

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border-bottom:
        1px solid var(--boxx-line);

    padding:
        12px;
}

th {
    color: white;
}


/* ---------------------------------------------------------
   FORMS
   --------------------------------------------------------- */

input,
textarea,
select {
    border:
        1px solid #31414b;

    background:
        #0d1921;

    color:
        white;
}

input::placeholder,
textarea::placeholder {
    color:
        #66747e;
}


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

.v7-footer {
    position: relative;

    margin-top: 70px;

    border-top:
        1px solid rgba(255,255,255,.085) !important;

    background:
        linear-gradient(
            180deg,
            #070c10,
            #030506
        ) !important;
}

.v7-footer::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 0;

    width:
        min(300px, 45vw);

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--boxx-red),
            transparent
        );
}

.v7-footer a:hover {
    color:
        var(--boxx-red-hot) !important;
}


/* ---------------------------------------------------------
   LEGAL LINKS
   --------------------------------------------------------- */

.bx-legal-links a {
    opacity: .8;
}

.bx-legal-links a:hover {
    opacity: 1;
}


/* ---------------------------------------------------------
   ADMIN POLISH
   --------------------------------------------------------- */

.admin-form,
.content-table,
.admin-panel {
    border:
        1px solid #283b46 !important;

    box-shadow:
        var(--boxx-shadow);
}

.admin-form input,
.admin-form textarea,
.admin-form select {
    border:
        1px solid #324751 !important;

    background:
        #0d1b24 !important;

    color:
        white !important;
}

.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus {
    border-color:
        var(--boxx-red) !important;

    box-shadow:
        0 0 0 3px rgba(239,23,53,.12) !important;
}


/* ---------------------------------------------------------
   ADMIN ARTICLE EDITOR
   --------------------------------------------------------- */

.bx-editor-wrap {
    border-color:
        #30434e !important;

    box-shadow:
        0 18px 50px rgba(0,0,0,.18);
}

.bx-editor-toolbar {
    border-bottom:
        1px solid #30434e !important;
}


/* ---------------------------------------------------------
   SCROLLBAR
   --------------------------------------------------------- */

::-webkit-scrollbar {
    width: 11px;
}

::-webkit-scrollbar-track {
    background:
        #060a0d;
}

::-webkit-scrollbar-thumb {
    background:
        #263740;

    border:
        3px solid #060a0d;

    border-radius:
        10px;
}

::-webkit-scrollbar-thumb:hover {
    background:
        #3b4d58;
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (
    prefers-reduced-motion:
    reduce
) {

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (
    max-width:
    760px
) {

    body {
        overflow-x:
            hidden;
    }

    h1 {
        line-height:
            1.03;
    }

    .v7-card:hover,
    .bx-card:hover,
    .game-card:hover,
    .news-card:hover,
    .video-card:hover,
    .review-card:hover {
        transform:
            none;
    }

    .bx-article-inline-image,
    .bx-inline-article-image {
        margin:
            28px 0 32px !important;
    }

}