/* =========================================================
   POPFUSE
   Modern Cinema / Entertainment Forum Theme
   ========================================================= */


/* =========================================================
   DESIGN TOKENS
   ========================================================= */

body.b2,
body.b2.dark {

    color-scheme: dark;

    /* ---------- Brand ---------- */

    --pf-red: #f12d38;
    --pf-red-dark: #c91f2b;
    --pf-red-light: #ff4650;
    --pf-red-soft: #35171b;


    /* ---------- Backgrounds ---------- */

    --pf-black: #08090b;
    --pf-bg: #0d1014;

    --pf-surface: #14181d;
    --pf-surface-2: #1a1f25;
    --pf-surface-3: #20252b;


    /* ---------- Borders ---------- */

    --pf-border: #292f36;
    --pf-border-light: #373e46;


    /* ---------- Text ---------- */

    --pf-white: #f4f5f6;
    --pf-text: #e7e9eb;
    --pf-text-secondary: #c3c7cc;
    --pf-text-muted: #858b92;
    --pf-text-faint: #626870;


    /* ---------- Layout ---------- */

    --pf-container: var(--fs-container-max-width);
    --pf-sidebar: 300px;
    --pf-gap: 24px;


    /* ---------- Radius ---------- */

    --pf-radius-sm: 4px;
    --pf-radius: 7px;
    --pf-radius-lg: 10px;
    --pf-radius-pill: 999px;


    /* ---------- Shadows ---------- */

    --pf-shadow-sm:
        0 2px 8px rgb(0 0 0 / 20%);

    --pf-shadow:
        0 8px 25px rgb(0 0 0 / 25%);

    --pf-shadow-lg:
        0 18px 50px rgb(0 0 0 / 35%);


    /* ---------- Typography ---------- */

    --pf-font:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --pf-display:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;


    /* ---------- ForumSpark ---------- */

    --fs-text-primary:
        var(--pf-text);

    --fs-text-secondary:
        var(--pf-text-secondary);

    --fs-text-muted:
        var(--pf-text-muted);

    --fs-text-faint:
        var(--pf-text-faint);

    --fs-card-bg:
        var(--pf-surface);

    --fs-card-border:
        var(--pf-border);

    --fs-input-bg:
        #0d1014;

    --fs-input-color:
        var(--pf-text);

    --fs-input-border:
        #30363d;

    --fs-divider:
        var(--pf-border);

    --fs-cta-bg:
        var(--pf-red);

    --fs-cta-bg-hover:
        var(--pf-red-light);

    --fs-cta-border:
        var(--pf-red);

    --fs-cta-color:
        #ffffff;


    background:
        var(--pf-black);

    color:
        var(--pf-text);
}


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

html {

    background:
        var(--pf-black);
}

body.b2 {

    margin:
        0;

    background:
        var(--pf-black);

    color:
        var(--pf-text);

    font-family:
        var(--pf-font);
}

body.b2 ::selection {

    background:
        var(--pf-red);

    color:
        #ffffff;
}

body.b2 :focus-visible {

    outline:
        2px solid var(--pf-red);

    outline-offset:
        3px;
}


/* =========================================================
   MAIN SHELL
   ========================================================= */

.popfuse-shell {

    min-height:
        100vh;

    background:
        var(--pf-black);
}

.popfuse-wrap {

    min-height:
        100vh;

    background:
        var(--pf-black);
}

.popfuse-container {

    width:
        min(
            var(--pf-container),
            calc(100% - 48px)
        );

    margin-inline:
        auto;
}


/* =========================================================
   LOGO
   ========================================================= */

.popfuse-logo {

    display:
        inline-flex;

    align-items:
        baseline;

    gap:
        0;

    color:
        #ffffff;

    font-family:
        var(--pf-display);

    font-weight:
        800;

    letter-spacing:
        -0.065em;

    line-height:
        1;

    text-decoration:
        none;
}

.popfuse-logo span {

    color:
        #ffffff;
}

.popfuse-logo strong {

    color:
        var(--pf-red);

    font-weight:
        800;
}

.popfuse-logo:hover {

    color:
        #ffffff;
}


/* =========================================================
   TOP NAVIGATION
   ========================================================= */

.popfuse-shell .sub-menu {

    position:
        relative;

    z-index:
        100;

    margin:
        0;

    background:
        rgb(8 9 11 / 97%);

    border-bottom:
        1px solid var(--pf-border);

    box-shadow:
        0 4px 20px rgb(0 0 0 / 30%);

    backdrop-filter:
        blur(12px);
}

body.b2 .popfuse-shell
.sub-menu .container {

    max-width:
        var(--pf-container);

    width:
        calc(100% - 48px);

    min-height:
        64px;

    gap:
        24px;
}

body.b2 .popfuse-shell
.b2-subnav__logo {

    display:
        inline-flex;

    align-items:
        center;

    flex-shrink:
        0;
}

body.b2 .popfuse-shell
.b2-subnav__logo img {

    width:
        145px;

    height:
        auto;

    max-height:
        40px;
}

body.b2 .popfuse-shell
.nav-links {

    margin:
        0;

    gap:
        2px;
}

body.b2 .popfuse-shell
.nav-links >
.fs-menu__item >
.nav-link {

    position:
        relative;

    margin:
        0;

    padding:
        23px 14px;

    border-radius:
        0;

    background:
        transparent;

    color:
        var(--pf-text-muted);

    font-family:
        var(--pf-font);

    font-size:
        13px;

    font-weight:
        600;

    transition:
        color 180ms ease,
        background 180ms ease;
}

body.b2 .popfuse-shell
.nav-links >
.fs-menu__item >
.nav-link:hover {

    color:
        #ffffff;

    background:
        rgb(255 255 255 / 3%);
}

body.b2 .popfuse-shell
.nav-link-active {

    color:
        #ffffff;

    background:
        transparent;
}

.popfuse-shell
.nav-links >
.fs-menu__item >
.nav-link-active::after {

    content:
        "";

    position:
        absolute;

    left:
        12px;

    right:
        12px;

    bottom:
        0;

    height:
        2px;

    background:
        var(--pf-red);
}


/* =========================================================
   USER MENU
   ========================================================= */

body.b2 .popfuse-shell
.user-menu {

    background:
        #060709;

    border-bottom:
        1px solid #1d2126;
}

body.b2 .popfuse-shell
.user-menu .container {

    max-width:
        var(--pf-container);

    width:
        calc(100% - 48px);

    min-height:
        38px;

    padding:
        0;
}

.popfuse-shell
.user-menu .b2-topbar__logo {

    display:
        none;
}

.popfuse-shell
.user-menu__links {

    margin-left:
        auto;
}

.popfuse-shell
.user-menu__guest {

    gap:
        16px;

    font-size:
        12px;
}

.popfuse-shell
.user-menu__guest >
a:not(.b2-cta) {

    color:
        var(--pf-text-muted);
}

.popfuse-shell
.user-menu__guest >
a:not(.b2-cta):hover {

    color:
        #ffffff;
}

.popfuse-shell
.b2-cta {

    padding:
        7px 13px;

    border:
        1px solid var(--pf-red);

    border-radius:
        var(--pf-radius-sm);

    background:
        var(--pf-red);

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.06em;

    transition:
        background 180ms ease,
        border-color 180ms ease;
}

.popfuse-shell
.b2-cta:hover {

    background:
        var(--pf-red-light);

    border-color:
        var(--pf-red-light);
}


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

.popfuse-hero {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    min-height:
        clamp(
            340px,
            32vw,
            440px
        );

    background:
        #08090b
        url('https://files.forumspark.net/boards/aac684d4-65d9-4d65-9c83-87aaeaca2e79/qyBfHWj2PSmvNrbw1yFYj5pipdIrijnOkVDfn9Fj.png')
        center center / cover
        no-repeat;

    border-bottom:
        1px solid var(--pf-border);

    box-shadow:
        inset 0 -80px 90px rgb(0 0 0 / 65%);
}


/* Main hero overlay */

.popfuse-hero__overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    background:
        linear-gradient(
            90deg,
            rgb(5 7 9 / 97%) 0%,
            rgb(5 7 9 / 87%) 34%,
            rgb(5 7 9 / 55%) 65%,
            rgb(5 7 9 / 72%) 100%
        );

    pointer-events:
        none;
}


/* Cinematic vignette */

.popfuse-hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    background:
        radial-gradient(
            ellipse at 55% 40%,
            transparent 10%,
            rgb(0 0 0 / 25%) 60%,
            rgb(0 0 0 / 72%) 100%
        );

    pointer-events:
        none;
}


/* Red cinematic accent */

.popfuse-hero::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        2px;

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

    opacity:
        0.8;

    pointer-events:
        none;
}


/* Hero inner */

.popfuse-hero__inner {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    min-height:
        clamp(
            340px,
            32vw,
            440px
        );
}


/* Hero content */

.popfuse-hero__content {

    max-width:
        700px;
}


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

.popfuse-eyebrow {

    margin:
        0 0 14px;

    color:
        #c7cbd0;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.25em;

    line-height:
        1.5;

    text-transform:
        uppercase;
}

.popfuse-logo--hero {

    font-size:
        clamp(
            64px,
            9vw,
            112px
        );

    text-shadow:
        0 8px 35px rgb(0 0 0 / 70%);
}

.popfuse-tagline {

    margin:
        20px 0 0;

    color:
        #d0d3d6;

    font-size:
        clamp(
            16px,
            1.8vw,
            21px
        );

    font-weight:
        400;

    line-height:
        1.5;
}


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

.popfuse-genres {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        25px;

    color:
        #9ca2a8;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}

.popfuse-genres i {

    display:
        block;

    width:
        3px;

    height:
        3px;

    flex:
        0 0 3px;

    border-radius:
        50%;

    background:
        var(--pf-red);
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.popfuse-content {

    position:
        relative;

    min-height:
        400px;

    padding:
        0 0 40px;

    background:
        radial-gradient(
            ellipse at 50% 0,
            #171c22 0,
            transparent 62%
        ),
        var(--pf-bg);
}

body.b2 .popfuse-wrap
> .popfuse-content
> .breadcrumbs,
body.b2 .popfuse-wrap
> .popfuse-content
> main,
body.b2 .popfuse-wrap
> .popfuse-content
> .container {

    max-width:
        var(--pf-container);

    width:
        calc(100% - 48px);

    margin-inline:
        auto;
}

body.b2 .popfuse-wrap
.breadcrumbs {

    margin:
        0;

    padding:
        18px 0;

    border:
        0;

    border-radius:
        0;

    background:
        transparent;

    box-shadow:
        none;

    color:
        var(--pf-text-muted);

    font-size:
        12px;
}

body.b2 .popfuse-wrap
main {

    padding-top:
        0;
}

body.b2 .popfuse-wrap
.board-layout {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        var(--pf-gap);
}


/* =========================================================
   DESKTOP SIDEBAR
   ========================================================= */

@media (min-width: 1000px) {

    body.b2 .popfuse-wrap
    .board-layout__sidebar {

        width:
            var(--pf-sidebar);

        flex:
            0 0 var(--pf-sidebar);
    }

    html:not(.sidebar-closed)
    body.b2 .popfuse-wrap
    .board-layout >
    .board-layout__main {

        flex:
            1 1 auto;

        min-width:
            0;
    }
}


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

body.b2 .popfuse-wrap
.b2-cat {

    position:
        relative;

    overflow:
        hidden;

    padding:
        5px;

    margin-bottom:
        18px;

    background:
        var(--pf-surface);

    border:
        1px solid var(--pf-border);

    border-radius:
        var(--pf-radius);

    box-shadow:
        var(--pf-shadow-sm);
}


/* Category header */

body.b2 .popfuse-wrap
.b2-cat__head {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    min-height:
        58px;

    padding:
        0 18px 0 20px;

    background:
        linear-gradient(
            180deg,
            #1b2026,
            #15191e
        );

    border:
        1px solid #30363d;

    border-radius:
        5px;

    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 4%);
}


/* Category red accent */

body.b2 .popfuse-wrap
.b2-cat__head::before {

    content:
        "";

    position:
        absolute;

    left:
        -1px;

    top:
        -1px;

    bottom:
        -1px;

    width:
        4px;

    background:
        var(--pf-red);

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

body.b2 .popfuse-wrap
.b2-cat__title {

    color:
        var(--pf-text);

    font-family:
        var(--pf-display);

    font-size:
        19px;

    font-weight:
        700;

    letter-spacing:
        -0.02em;
}

body.b2 .popfuse-wrap
.b2-cat__toggle {

    width:
        30px;

    height:
        30px;

    margin-left:
        auto;

    border:
        1px solid var(--pf-border-light);

    border-radius:
        50%;

    background:
        #101317;

    color:
        var(--pf-text-secondary);
}


/* =========================================================
   FORUM ROWS
   ========================================================= */

body.b2 .popfuse-wrap
.b2-forum {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    min-height:
        82px;

    gap:
        15px;

    padding:
        15px 12px;

    border-bottom:
        1px solid #252a30;

    transition:
        background 180ms ease;
}

body.b2 .popfuse-wrap
.b2-forum:last-child {

    border-bottom:
        0;
}

body.b2 .popfuse-wrap
.b2-forum:not(.b2-forum--redirect):hover {

    background:
        rgb(255 255 255 / 2.5%);
}


/* =========================================================
   FORUM MARKERS
   ========================================================= */

body.b2 .popfuse-wrap
.b2-forum__marker {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    flex:
        0 0 42px;
}

.popfuse-wrap
.b2-forum__marker img {

    width:
        38px;

    height:
        38px;

    object-fit:
        contain;
}

.popfuse-wrap
.forum__marker--no-new {

    opacity:
        0.42;

    filter:
        grayscale(1);
}


/* Default forum marker */

body.b2 .popfuse-wrap
.b2-forum:not(.b2-forum--redirect)
.forum__marker-badge {

    position:
        relative;

    width:
        38px;

    height:
        38px;

    border:
        1px solid #414850;

    border-radius:
        50%;

    background:
        #1b2025;

    box-shadow:
        inset 0 0 0 5px #14181d;
}

body.b2 .popfuse-wrap
.b2-forum:not(.b2-forum--redirect)
.forum__marker-badge::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        7px;

    height:
        7px;

    transform:
        translate(-50%, -50%);

    border-radius:
        50%;

    background:
        #626a73;
}

.popfuse-wrap
.b2-forum:not(.b2-forum--redirect)
.forum__marker-badge i {

    display:
        none;
}

.popfuse-wrap
.b2-forum:not(.b2-forum--redirect)
.forum__marker-badge--read {

    opacity:
        0.35;
}


/* =========================================================
   FORUM INFORMATION
   ========================================================= */

body.b2 .popfuse-wrap
.b2-forum__name {

    margin-bottom:
        3px;
}

body.b2 .popfuse-wrap
.b2-forum__name a {

    color:
        var(--pf-text);

    font-size:
        15px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        color 180ms ease;
}

body.b2 .popfuse-wrap
.b2-forum__name a:hover {

    color:
        #ffffff;
}

body.b2 .popfuse-wrap
.b2-forum__desc {

    margin-top:
        4px;

    color:
        var(--pf-text-muted);

    font-size:
        12px;

    line-height:
        1.55;
}


/* =========================================================
   FORUM STATISTICS
   ========================================================= */

.popfuse-wrap
.b2-forum__stat {

    min-width:
        58px;
}

.popfuse-wrap
.b2-forum__stat-num {

    color:
        var(--pf-text-secondary);

    font-size:
        13px;

    font-weight:
        700;
}

.popfuse-wrap
.b2-forum__stat-label {

    margin-top:
        2px;

    color:
        var(--pf-text-faint);

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}


/* =========================================================
   LAST POST
   ========================================================= */

.popfuse-wrap
.b2-forum__last {

    min-width:
        180px;

    color:
        var(--pf-text-muted);

    font-size:
        11px;
}

.popfuse-wrap
.b2-forum__last .avatar {

    box-shadow:
        0 0 0 2px #272c32;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

body.b2 .popfuse-wrap
.board-layout__sidebar .panel {

    padding:
        5px;

    margin-bottom:
        18px;

    background:
        var(--pf-surface);

    border:
        1px solid var(--pf-border);

    border-radius:
        var(--pf-radius);

    box-shadow:
        var(--pf-shadow-sm);
}

body.b2 .popfuse-wrap
.board-layout__sidebar
.panel__title {

    position:
        relative;

    padding:
        13px 14px 12px;

    background:
        #191e23;

    border:
        1px solid #30363d;

    border-radius:
        5px;

    color:
        var(--pf-text);

    font-size:
        14px;

    font-weight:
        700;
}

body.b2 .popfuse-wrap
.board-layout__sidebar
.panel__title::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -1px;

    width:
        32px;

    height:
        2px;

    background:
        var(--pf-red);
}

body.b2 .popfuse-wrap
.board-layout__sidebar
.panel__title h2 {

    margin:
        0;

    color:
        inherit;

    font:
        inherit;
}

body.b2 .popfuse-wrap
.board-layout__sidebar
.panel__content {

    padding:
        14px;
}

body.b2 .popfuse-wrap
.board-layout__sidebar
.panel__content--flush {

    padding:
        0;
}

.popfuse-wrap
.board-layout__sidebar
.widget {

    margin-bottom:
        18px;
}


/* =========================================================
   PANELS / BULLETINS
   ========================================================= */

body.b2 .popfuse-wrap
.bulletin {

    background:
        var(--pf-surface);

    border:
        1px solid var(--pf-border);

    border-radius:
        var(--pf-radius);

    color:
        var(--pf-text);

    box-shadow:
        var(--pf-shadow-sm);
}

.popfuse-wrap
.bulletin a {

    color:
        #ffffff;
}

.popfuse-wrap
.panel {

    box-shadow:
        var(--pf-shadow-sm);
}


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

.popfuse-wrap
.btn {

    min-height:
        40px;

    padding:
        9px 16px;

    border:
        1px solid var(--pf-border-light);

    border-radius:
        5px;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        background 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.popfuse-wrap
.btn:hover {

    transform:
        translateY(-1px);
}

.popfuse-wrap
.btn-primary {

    background:
        var(--pf-red);

    border-color:
        var(--pf-red);

    color:
        #ffffff;

    box-shadow:
        0 4px 14px
        rgb(241 45 56 / 20%);
}

.popfuse-wrap
.btn-primary:hover {

    background:
        var(--pf-red-light);

    border-color:
        var(--pf-red-light);

    color:
        #ffffff;
}


/* =========================================================
   REPLIES
   ========================================================= */

.popfuse-wrap
.reply {

    border-color:
        var(--pf-border);
}

.popfuse-wrap
.reply__content a {

    color:
        #ffffff;

    text-decoration:
        underline;

    text-underline-offset:
        3px;
}

.popfuse-wrap
.reply__content blockquote {

    margin:
        16px 0;

    padding:
        12px 16px;

    background:
        #0d1014;

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

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


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

.popfuse-wrap
input,
.popfuse-wrap
textarea,
.popfuse-wrap
select {

    background:
        #0d1014;

    border:
        1px solid #30363d;

    border-radius:
        5px;

    color:
        var(--pf-text);

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.popfuse-wrap
input::placeholder,
.popfuse-wrap
textarea::placeholder {

    color:
        #626870;
}

.popfuse-wrap
input:focus,
.popfuse-wrap
textarea:focus,
.popfuse-wrap
select:focus {

    border-color:
        var(--pf-red);

    box-shadow:
        0 0 0 2px
        rgb(241 45 56 / 12%);

    outline:
        none;
}


/* =========================================================
   LINKS
   ========================================================= */

.popfuse-wrap a {

    transition:
        color 180ms ease;
}

.popfuse-wrap a:hover {

    color:
        #ffffff;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.popfuse-wrap
.pagination {

    display:
        flex;

    gap:
        5px;
}

.popfuse-wrap
.pagination a,
.popfuse-wrap
.pagination span {

    min-width:
        34px;

    height:
        34px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid var(--pf-border);

    border-radius:
        4px;

    background:
        var(--pf-surface);

    color:
        var(--pf-text-muted);

    font-size:
        12px;
}

.popfuse-wrap
.pagination a:hover {

    background:
        var(--pf-surface-2);

    border-color:
        var(--pf-border-light);

    color:
        #ffffff;
}


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

.popfuse-footer {

    position:
        relative;

    background:
        #08090b;

    border-top:
        1px solid var(--pf-border);
}


/* Cinematic red accent */

.popfuse-footer::before {

    content:
        "";

    display:
        block;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            var(--pf-red) 50%,
            transparent 100%
        );

    opacity:
        0.8;
}


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

.popfuse-footer__main {

    display:
        grid;

    grid-template-columns:
        1.7fr
        1fr
        1fr
        1fr;

    gap:
        48px;

    padding:
        52px 0;

    border-bottom:
        1px solid #20252a;
}


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

.popfuse-footer__brand {

    max-width:
        380px;
}

.popfuse-footer__brand
.popfuse-logo {

    font-size:
        30px;
}

.popfuse-footer__tagline {

    margin:
        9px 0 12px;

    color:
        var(--pf-text-secondary);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    line-height:
        1.5;

    text-transform:
        uppercase;
}

.popfuse-footer__description {

    max-width:
        340px;

    margin:
        0;

    color:
        var(--pf-text-muted);

    font-size:
        12px;

    line-height:
        1.7;
}


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

.popfuse-footer__column {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}

.popfuse-footer__column h3 {

    position:
        relative;

    margin:
        0 0 18px;

    padding-bottom:
        9px;

    color:
        var(--pf-text);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    line-height:
        1.4;

    text-transform:
        uppercase;
}


/* Red heading accent */

.popfuse-footer__column h3::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        24px;

    height:
        2px;

    background:
        var(--pf-red);
}


/* Footer links */

.popfuse-footer__column a {

    position:
        relative;

    display:
        inline-block;

    margin-bottom:
        10px;

    color:
        var(--pf-text-muted);

    font-size:
        12px;

    line-height:
        1.5;

    text-decoration:
        none;

    transition:
        color 180ms ease,
        padding-left 180ms ease;
}

.popfuse-footer__column a::before {

    content:
        "";

    position:
        absolute;

    left:
        -10px;

    top:
        50%;

    width:
        4px;

    height:
        4px;

    transform:
        translateY(-50%);

    border-radius:
        50%;

    background:
        var(--pf-red);

    opacity:
        0;

    transition:
        opacity 180ms ease,
        left 180ms ease;
}

.popfuse-footer__column a:hover {

    padding-left:
        10px;

    color:
        #ffffff;
}

.popfuse-footer__column a:hover::before {

    left:
        0;

    opacity:
        1;
}


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

.popfuse-footer__bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    min-height:
        62px;
}

.popfuse-footer__copyright {

    color:
        #5f666d;

    font-size:
        10px;
}

.popfuse-footer__copyright a {

    color:
        #858b92;

    text-decoration:
        none;
}

.popfuse-footer__credit {

    color:
        #5f666d;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        11px;

    font-style:
        italic;
}


/* =========================================================
   EXPLICITLY REMOVE OLD FOOTER ELEMENTS
   ========================================================= */

.popfuse-socials,
.popfuse-footer__newsletter,
.popfuse-newsletter {

    display:
        none !important;
}


/* =========================================================
   AUTHENTICATION PAGES
   ========================================================= */

body.b2 .popfuse-shell
.guest-layout.b2-auth {

    background:
        var(--pf-bg);

    min-height:
        auto;

    padding-block:
        40px;
}

body.b2 .popfuse-shell
.b2-auth__card {

    background:
        var(--pf-surface);

    border:
        1px solid var(--pf-border);

    border-radius:
        var(--pf-radius);

    box-shadow:
        var(--pf-shadow-lg);
}

body.b2 .popfuse-shell
.b2-auth__brand img {

    width:
        150px;

    height:
        auto;

    border-radius:
        0;
}


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

@media
(min-width: 769px)
and
(max-width: 999px) {

    body.b2 .popfuse-wrap
    .board-layout {

        flex-direction:
            column;

        align-items:
            stretch;
    }

    html:not(.sidebar-closed)
    body.b2 .popfuse-wrap
    .board-layout >
    .board-layout__main {

        width:
            100%;

        flex:
            1 1 auto;
    }

    body.b2 .popfuse-wrap
    .board-layout__sidebar {

        width:
            100%;

        margin:
            0;

        order:
            2;
    }


    /* Footer */

    .popfuse-footer__main {

        grid-template-columns:
            1.5fr
            1fr
            1fr;

        gap:
            32px;
    }

    .popfuse-footer__brand {

        grid-column:
            span 3;

        max-width:
            600px;
    }
}


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

@media (max-width: 768px) {

    .popfuse-container {

        width:
            calc(100% - 30px);
    }


    /* ---------- Navigation ---------- */

    body.b2 .popfuse-shell
    .sub-menu .container {

        width:
            calc(100% - 30px);

        min-height:
            58px;
    }

    body.b2 .popfuse-shell
    .user-menu .container {

        width:
            calc(100% - 30px);
    }

    body.b2 .popfuse-shell
    .user-menu .user-alerts {

        display:
            none;
    }


    /* ---------- Hero ---------- */

    .popfuse-hero {

        min-height:
            310px;

        background-position:
            62% center;
    }

    .popfuse-hero__overlay {

        background:
            linear-gradient(
                90deg,
                rgb(5 7 9 / 96%) 0%,
                rgb(5 7 9 / 78%) 52%,
                rgb(5 7 9 / 65%) 100%
            );
    }

    .popfuse-hero__inner {

        min-height:
            310px;

        align-items:
            flex-start;
    }

    .popfuse-hero__content {

        max-width:
            100%;
    }

    .popfuse-eyebrow {

        max-width:
            280px;

        margin-bottom:
            12px;

        font-size:
            9px;

        letter-spacing:
            0.18em;
    }

    .popfuse-logo--hero {

        font-size:
            clamp(
                48px,
                14vw,
                72px
            );
    }

    .popfuse-tagline {

        max-width:
            300px;

        margin-top:
            14px;

        font-size:
            14px;
    }

    .popfuse-genres {

        max-width:
            320px;

        margin-top:
            18px;

        gap:
            7px;

        font-size:
            8px;

        line-height:
            1.8;
    }


    /* ---------- Main content ---------- */

    body.b2 .popfuse-wrap
    > .popfuse-content
    > .breadcrumbs,
    body.b2 .popfuse-wrap
    > .popfuse-content
    > main,
    body.b2 .popfuse-wrap
    > .popfuse-content
    > .container {

        width:
            calc(100% - 20px);
    }


    /* ---------- Categories ---------- */

    body.b2 .popfuse-wrap
    .b2-cat {

        margin-bottom:
            12px;

        border-radius:
            5px;
    }

    body.b2 .popfuse-wrap
    .b2-cat__head {

        min-height:
            54px;

        padding:
            0 13px 0 17px;
    }

    body.b2 .popfuse-wrap
    .b2-cat__title {

        font-size:
            17px;
    }


    /* ---------- Forums ---------- */

    body.b2 .popfuse-wrap
    .b2-forum {

        align-items:
            flex-start;

        min-height:
            auto;

        padding:
            14px 9px;

        gap:
            11px;

        flex-wrap:
            wrap;
    }

    body.b2 .popfuse-wrap
    .b2-forum__marker {

        width:
            34px;

        flex:
            0 0 34px;
    }

    .popfuse-wrap
    .b2-forum__marker img {

        width:
            32px;

        height:
            32px;
    }

    body.b2 .popfuse-wrap
    .b2-forum:not(.b2-forum--redirect)
    .forum__marker-badge {

        width:
            32px;

        height:
            32px;
    }

    body.b2 .popfuse-wrap
    .b2-forum__name a {

        font-size:
            14px;
    }

    body.b2 .popfuse-wrap
    .b2-forum__desc {

        font-size:
            11px;
    }

    .popfuse-wrap
    .b2-forum__stat {

        min-width:
            auto;

        margin-left:
            45px;
    }

    .popfuse-wrap
    .b2-forum__last {

        width:
            100%;

        min-width:
            0;

        margin-left:
            45px;

        font-size:
            10px;
    }


    /* ---------- Sidebar ---------- */

    body.b2 .popfuse-wrap
    .board-layout__sidebar
    .panel {

        margin-bottom:
            12px;
    }


    /* ---------- Footer ---------- */

    .popfuse-footer__main {

        grid-template-columns:
            1fr
            1fr;

        gap:
            34px 24px;

        padding:
            38px 0;
    }

    .popfuse-footer__brand {

        grid-column:
            span 2;

        max-width:
            none;
    }

    .popfuse-footer__description {

        max-width:
            500px;
    }

    .popfuse-footer__bottom {

        align-items:
            flex-start;

        flex-direction:
            column;

        justify-content:
            center;

        gap:
            7px;

        min-height:
            auto;

        padding:
            18px 0;
    }
}


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

@media (max-width: 480px) {

    .popfuse-container {

        width:
            calc(100% - 24px);
    }


    /* Hero */

    .popfuse-hero {

        min-height:
            290px;

        background-position:
            64% center;
    }

    .popfuse-hero__inner {

        min-height:
            290px;
    }

    .popfuse-logo--hero {

        font-size:
            48px;
    }

    .popfuse-genres {

        max-width:
            290px;
    }

    .popfuse-genres span:nth-of-type(n + 5),
    .popfuse-genres i:nth-of-type(n + 5) {

        display:
            none;
    }


    /* Forum statistics */

    .popfuse-wrap
    .b2-forum__stat {

        display:
            none;
    }

    .popfuse-wrap
    .b2-forum__last {

        margin-left:
            45px;
    }


    /* Footer */

    .popfuse-footer__main {

        grid-template-columns:
            1fr;

        gap:
            28px;

        padding:
            34px 0;
    }

    .popfuse-footer__brand {

        grid-column:
            auto;
    }

    .popfuse-footer__column {

        width:
            100%;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

    .popfuse-shell *,
    .popfuse-shell *::before,
    .popfuse-shell *::after {

        scroll-behavior:
            auto;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }
}


/* =========================================================
   END POPFUSE
   ========================================================= */


/* =========================================================
   POPFUSE FINAL OVERRIDE
   FORUMSPARK PANEL HEADER COLOUR FIX
   ========================================================= */

/*
   IMPORTANT:
   ForumSpark's global stylesheet and the older PopFuse
   redesign both style .board-layout__sidebar .panel__title.
   These rules intentionally use the GLOBAL selectors rather
   than relying on .popfuse-wrap, so they still work if the
   widget is rendered outside the PopFuse wrapper.
*/

/* Board Statistics and Users Online / all sidebar widget headers */
.board-layout__sidebar .panel__title,
.board-layout__sidebar .widget .panel__title,
.widget-board-stats__title {
    --fs-panel-title-from: #0b0c0f !important;
    --fs-panel-title-to: #20252b !important;
    --fs-panel-title-color: #e7e9eb !important;
    --fs-panel-title-border: #292f36 !important;

    background: #15181d !important;
    background-color: #15181d !important;
    background-image:
        linear-gradient(
            110deg,
            #0b0c0f 0%,
            #15181d 50%,
            #20252b 100%
        ) !important;

    border-color: #292f36 !important;
    color: #e7e9eb !important;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 4%) !important;
}

/* ForumSpark dark-mode helper classes */
.dark .board-layout__sidebar .panel .panel__title,
.dark .board-layout__sidebar .panel .panel__title .bg-primary-50,
.dark .board-layout__sidebar .grid .bg-primary-50.panel .panel__title,
.dark .board-layout__sidebar .flex .bg-primary-50.panel .panel__title,
.dark .widget-board-stats__title {
    background: #15181d !important;
    background-color: #15181d !important;
    background-image:
        linear-gradient(
            110deg,
            #0b0c0f 0%,
            #15181d 50%,
            #20252b 100%
        ) !important;
    color: #e7e9eb !important;
}

/* If ForumSpark puts the coloured helper directly inside the title,
   kill its background as well. */
.dark .board-layout__sidebar .panel__title .bg-primary-50.shadow-highlight {
    background: #15181d !important;
    background-color: #15181d !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Remove any purple title pseudo-element/background decoration. */
.board-layout__sidebar .panel__title::before,
.board-layout__sidebar .panel__title::after,
.widget-board-stats__title::before,
.widget-board-stats__title::after {
    background-image: none !important;
}

/* Keep PopFuse's red accent only where we explicitly want it. */
.board-layout__sidebar .panel__title::after {
    background: var(--pf-red) !important;
}

/* Top navigation logo and menu */
body.b2 .popfuse-shell .b2-subnav__logo,
body.b2 .popfuse-shell .b2-subnav__logo img {
    display: none !important;
}

body.b2 .popfuse-shell .sub-menu .container {
    justify-content: flex-start !important;
}

body.b2 .popfuse-shell .nav-links {
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: flex-start !important;
}

/* =========================================================
   END POPFUSE FINAL OVERRIDE
   ========================================================= */

/* =========================================================
   POPFUSE WIDGET HEADERS — RED CATEGORY ACCENT
   ========================================================= */

/* Users Online */
html body.b2 #wrap
.panel.panel--users-online
.panel__title {
    position: relative !important;

    background: #15181d !important;
    background-image: none !important;
    background-color: #15181d !important;

    border: 1px solid #30363d !important;
    border-radius: 5px !important;
    color: #e7e9eb !important;

    overflow: hidden !important;
}

/* Red vertical accent */
html body.b2 #wrap
.panel.panel--users-online
.panel__title::before {
    content: "" !important;

    position: absolute !important;
    left: -1px !important;
    top: -1px !important;
    bottom: -1px !important;

    width: 4px !important;

    background: #f12d38 !important;
    border-radius: 4px 0 0 4px !important;

    box-shadow: none !important;
}

/* Remove old right/bottom decoration */
html body.b2 #wrap
.panel.panel--users-online
.panel__title::after {
    content: none !important;
}


/* =========================================================
   BOARD STATISTICS
   ========================================================= */

html body.b2 #wrap
.widget.widget--board_statistics
.widget-board-stats
.b2-statp
.b2-statp__head {
    position: relative !important;

    background: #15181d !important;
    background-image: none !important;
    background-color: #15181d !important;

    border: 1px solid #30363d !important;
    border-radius: 5px !important;
    color: #e7e9eb !important;

    overflow: hidden !important;
}

/* Red vertical accent */
html body.b2 #wrap
.widget.widget--board_statistics
.widget-board-stats
.b2-statp
.b2-statp__head::before {
    content: "" !important;

    position: absolute !important;
    left: -1px !important;
    top: -1px !important;
    bottom: -1px !important;

    width: 4px !important;

    background: #f12d38 !important;
    border-radius: 4px 0 0 4px !important;

    box-shadow: none !important;
}

/* Remove any old decoration */
html body.b2 #wrap
.widget.widget--board_statistics
.widget-board-stats
.b2-statp
.b2-statp__head::after {
    content: none !important;
}

/* =========================================================
   POPFUSE MOBILE HERO OVERRIDE
   ========================================================= */

@media (max-width: 768px) {

    .popfuse-hero__inner {
        align-items: center !important;
    }

    .popfuse-hero__content {
        width: 100%;
    }

    .popfuse-genres {
        max-width: 320px !important;
        flex-wrap: wrap !important;
        line-height: 1.8 !important;
        overflow: visible !important;
    }
}


@media (max-width: 480px) {

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

    .popfuse-hero__inner {
        min-height: 360px !important;
        align-items: center !important;
    }

    .popfuse-genres {
        max-width: 320px !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 7px !important;
        line-height: 1.8 !important;
    }

    /* Force all six genres to remain visible */
    .popfuse-genres span,
    .popfuse-genres i {
        display: block !important;
    }
}
:root {
    --boo-highlight: #ffad43;
    --boo-title-color: #fff0d9;
}