/* =====================================================
   BIFF3EN HUB - HOME BRAND V2
   Full collage / sticker direction
   ===================================================== */

body.b3-home-brand-v2 {
    --b3-bg: #06020b;
    --b3-panel: #110818;
    --b3-panel2: #180c22;
    --b3-purple: #a93cff;
    --b3-purple2: #d66cff;
    --b3-pink: #ff56c8;
    --b3-cyan: #53e7ff;
    --b3-yellow: #ffe45d;
    --b3-white: #ffffff;

    overflow-x: hidden;

    background:
        radial-gradient(circle at 6% 12%, rgba(168,55,255,.18), transparent 420px),
        radial-gradient(circle at 94% 32%, rgba(255,72,201,.12), transparent 420px),
        radial-gradient(circle at 10% 63%, rgba(92,65,255,.13), transparent 400px),
        radial-gradient(circle at 93% 84%, rgba(201,57,255,.11), transparent 430px),
        #06020b !important;
}

/* =====================================================
   GLOBAL FOLLOWING STICKER RAILS
   ===================================================== */

.b3-scroll-rail {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 95px;
    z-index: 8;
    pointer-events: none;
    opacity: .72;
}

.b3-scroll-rail.left {
    left: 8px;
}

.b3-scroll-rail.right {
    right: 8px;
}

.b3-rail-item {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .08em;
    filter: drop-shadow(0 10px 16px rgba(0,0,0,.45));
}

.b3-scroll-rail.left .r1 {
    top: 15%;
    left: 9px;
    font-size: 34px;
    color: var(--b3-purple2);
    transform: rotate(-12deg);
}

.b3-scroll-rail.left .r2 {
    top: 46%;
    left: 4px;
    width: 82px;
    min-height: 42px;
    padding: 7px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    background: rgba(18,8,27,.82);
    color: var(--b3-cyan);
    font-size: 9px;
    transform: rotate(7deg);
}

.b3-scroll-rail.left .r3 {
    top: 77%;
    left: 18px;
    font-size: 46px;
    color: var(--b3-pink);
    transform: rotate(14deg);
}

.b3-scroll-rail.right .r1 {
    top: 25%;
    right: 15px;
    font-size: 48px;
    color: var(--b3-yellow);
    transform: rotate(10deg);
}

.b3-scroll-rail.right .r2 {
    top: 58%;
    right: 2px;
    width: 88px;
    min-height: 45px;
    padding: 7px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 11px;
    background: rgba(18,8,27,.82);
    color: #f8a3ff;
    font-size: 9px;
    transform: rotate(-8deg);
}

.b3-scroll-rail.right .r3 {
    top: 84%;
    right: 22px;
    font-size: 40px;
    color: var(--b3-purple2);
    transform: rotate(-14deg);
}

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

body.b3-home-brand-v2 #home {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;

    min-height: 650px !important;

    margin: 24px auto 50px !important;
    padding: 76px 58px !important;

    border: 1px solid rgba(199,95,255,.28) !important;
    border-radius: 30px !important;

    background:
        linear-gradient(
            90deg,
            rgba(5,2,10,.94) 0%,
            rgba(6,2,12,.83) 31%,
            rgba(7,2,13,.38) 62%,
            rgba(7,2,13,.13) 100%
        ),
        url("/assets/biff3en-home-banner.png")
        center center / cover
        no-repeat !important;

    box-shadow:
        0 35px 90px rgba(0,0,0,.48),
        0 0 80px rgba(177,56,255,.14);
}

body.b3-home-brand-v2 #home::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent 72%,
            rgba(7,2,12,.35)
        );
}

body.b3-home-brand-v2 #home > * {
    position: relative;
    z-index: 3;
}

body.b3-home-brand-v2 #home h1 {
    max-width: 720px !important;
    margin-bottom: 20px !important;

    font-size: clamp(4.4rem, 7vw, 7.6rem) !important;
    line-height: .88 !important;
    letter-spacing: -.065em !important;

    text-shadow:
        0 8px 32px rgba(0,0,0,.72);
}

body.b3-home-brand-v2 #home > p,
body.b3-home-brand-v2 #home .b3-brand-hero-copy {
    max-width: 560px !important;
    color: rgba(255,255,255,.80) !important;
    line-height: 1.58 !important;
}

body.b3-home-brand-v2 #home .hero-badge {
    border: 1px solid rgba(216,124,255,.38) !important;
    background: rgba(88,17,136,.30) !important;
    color: #e3b8ff !important;
}

.b3-hero-v2-decor {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.b3-hero-v2-decor .sticker {
    position: absolute;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 11px;
    background: rgba(10,5,17,.77);
    backdrop-filter: blur(8px);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
    box-shadow: 0 15px 35px rgba(0,0,0,.32);
}

.b3-hero-v2-decor .s1 {
    right: 5%;
    top: 8%;
    color: var(--b3-yellow);
    transform: rotate(6deg);
}

.b3-hero-v2-decor .s2 {
    right: 4%;
    bottom: 9%;
    color: var(--b3-cyan);
    transform: rotate(-6deg);
}

.b3-hero-v2-decor .s3 {
    left: 46%;
    bottom: 5%;
    color: var(--b3-pink);
    transform: rotate(4deg);
}

.b3-hero-v2-decor .shape {
    position: absolute;
    font-weight: 950;
    filter: drop-shadow(0 0 18px currentColor);
}

.b3-hero-v2-decor .star {
    right: 30%;
    top: 7%;
    color: var(--b3-purple2);
    font-size: 46px;
    transform: rotate(12deg);
}

.b3-hero-v2-decor .bolt {
    right: 6%;
    top: 40%;
    color: var(--b3-yellow);
    font-size: 54px;
    transform: rotate(7deg);
}

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

body.b3-home-brand-v2 main > section,
body.b3-home-brand-v2 #homeCompetitions {
    position: relative;
    isolation: isolate;
}

.b3-decor-zone {
    position: absolute;
    inset: -55px -90px;
    pointer-events: none;
    z-index: -1;
    overflow: visible;
}

.b3-decor-zone .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
}

.b3-decor-zone .blob.purple {
    width: 300px;
    height: 300px;
    background:
        radial-gradient(
            circle,
            rgba(170,58,255,.20),
            transparent 70%
        );
}

.b3-decor-zone .blob.pink {
    width: 260px;
    height: 260px;
    background:
        radial-gradient(
            circle,
            rgba(255,79,199,.15),
            transparent 70%
        );
}

.b3-decor-zone .mark {
    position: absolute;
    z-index: 2;
    font-weight: 950;
    line-height: 1;
    opacity: .78;
    filter: drop-shadow(0 0 12px currentColor);
}

.b3-decor-zone .sticker {
    position: absolute;
    z-index: 2;
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 10px;
    background: rgba(13,6,20,.84);
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 30px rgba(0,0,0,.30);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .07em;
    text-transform: uppercase;
}

/* =====================================================
   LIVE
   ===================================================== */

body.b3-home-brand-v2 #live {
    padding-top: 80px !important;
    padding-bottom: 90px !important;
}

body.b3-home-brand-v2 #live .live-card {
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(191,80,255,.28) !important;
    border-radius: 24px !important;

    background:
        radial-gradient(circle at 82% 25%, rgba(168,63,255,.19), transparent 300px),
        radial-gradient(circle at 8% 90%, rgba(255,75,195,.10), transparent 260px),
        linear-gradient(145deg, #160c20, #0d0812) !important;

    box-shadow:
        0 25px 65px rgba(0,0,0,.35),
        0 0 55px rgba(154,50,255,.08);
}

body.b3-home-brand-v2 #live .live-card::after {
    content: "LIVE";
    position: absolute;
    right: 32px;
    bottom: -12px;

    font-size: clamp(5rem, 11vw, 10rem);
    font-weight: 950;
    letter-spacing: -.08em;

    color: rgba(181,68,255,.055);
    pointer-events: none;
}

#live .b3-decor-zone .m1 {
    right: 4%;
    top: 1%;
    color: var(--b3-yellow);
    font-size: 58px;
    transform: rotate(12deg);
}

#live .b3-decor-zone .m2 {
    left: 2%;
    bottom: 8%;
    color: var(--b3-pink);
    font-size: 48px;
    transform: rotate(-12deg);
}

#live .b3-decor-zone .s1 {
    right: 10%;
    bottom: 3%;
    color: var(--b3-cyan);
    transform: rotate(6deg);
}

/* =====================================================
   EXPLORE HUB / CARDS
   ===================================================== */

body.b3-home-brand-v2 .b3-hub-card,
body.b3-home-brand-v2 .game-card,
body.b3-home-brand-v2 .feature-card {
    border: 1px solid rgba(190,85,255,.16) !important;
    background:
        radial-gradient(circle at 88% 10%, rgba(161,50,255,.11), transparent 190px),
        linear-gradient(145deg, rgba(23,12,32,.98), rgba(10,6,15,.98)) !important;
}

.b3-explore-decor {
    position: relative;
}

.b3-explore-decor::before {
    content: "✦";
    position: absolute;
    left: -45px;
    top: 14px;
    color: var(--b3-purple2);
    font-size: 45px;
    transform: rotate(-10deg);
    filter: drop-shadow(0 0 14px rgba(201,93,255,.55));
}

.b3-explore-decor::after {
    content: "⚡";
    position: absolute;
    right: -40px;
    bottom: 8px;
    color: var(--b3-yellow);
    font-size: 46px;
    transform: rotate(9deg);
    filter: drop-shadow(0 0 14px rgba(255,226,83,.35));
}

/* =====================================================
   COMPETITIONS
   ===================================================== */

#homeCompetitions {
    margin-top: 40px;
    padding: 80px 0;
}

.b3-home-competition-card {
    position: relative;
    overflow: hidden;

    padding: 38px;

    border: 1px solid rgba(205,94,255,.25);
    border-radius: 24px;

    background:
        radial-gradient(circle at 87% 26%, rgba(250,73,209,.17), transparent 310px),
        radial-gradient(circle at 8% 90%, rgba(120,59,255,.13), transparent 260px),
        linear-gradient(145deg, #180d23, #0b0710);

    box-shadow:
        0 28px 70px rgba(0,0,0,.34);
}

.b3-home-competition-card::before {
    content: "★";
    position: absolute;
    right: 4%;
    top: 50%;
    transform: translateY(-50%) rotate(9deg);

    color: rgba(216,90,255,.11);
    font-size: clamp(8rem, 18vw, 15rem);
    font-weight: 950;
}

#homeCompetitions .b3-decor-zone .m1 {
    left: 2%;
    top: 5%;
    color: var(--b3-cyan);
    font-size: 48px;
    transform: rotate(-13deg);
}

#homeCompetitions .b3-decor-zone .s1 {
    right: 6%;
    bottom: 3%;
    color: var(--b3-yellow);
    transform: rotate(7deg);
}

/* =====================================================
   SOCIALS
   ===================================================== */

body.b3-home-brand-v2 #socials {
    padding-top: 85px !important;
    padding-bottom: 95px !important;
}

body.b3-home-brand-v2 #socials .social-grid {
    position: relative;
    gap: 16px !important;
}

body.b3-home-brand-v2 #socials .social-card {
    position: relative;
    overflow: hidden;

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

    background:
        radial-gradient(circle at 88% 12%, rgba(167,59,255,.13), transparent 150px),
        linear-gradient(145deg, #150d1c, #0c0910) !important;

    box-shadow:
        0 18px 40px rgba(0,0,0,.23);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

body.b3-home-brand-v2 #socials .social-card:nth-child(2n) {
    transform: translateY(16px) rotate(.5deg);
}

body.b3-home-brand-v2 #socials .social-card:nth-child(3n) {
    transform: translateY(-8px) rotate(-.5deg);
}

body.b3-home-brand-v2 #socials .social-card:hover {
    transform: translateY(-5px) scale(1.015);
    border-color: rgba(208,104,255,.35) !important;
    box-shadow: 0 24px 50px rgba(0,0,0,.30);
}

#socials .b3-decor-zone .m1 {
    right: 3%;
    top: 2%;
    color: var(--b3-pink);
    font-size: 54px;
    transform: rotate(9deg);
}

#socials .b3-decor-zone .m2 {
    left: 1%;
    bottom: 2%;
    color: var(--b3-purple2);
    font-size: 42px;
    transform: rotate(-14deg);
}

#socials .b3-decor-zone .s1 {
    left: 9%;
    top: 4%;
    color: var(--b3-cyan);
    transform: rotate(-5deg);
}

/* =====================================================
   SHOP
   ===================================================== */

body.b3-home-brand-v2 #shop {
    padding-top: 90px !important;
    padding-bottom: 100px !important;
}

body.b3-home-brand-v2 #shop .shop-card {
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(255,218,68,.16) !important;
    border-radius: 24px !important;

    background:
        radial-gradient(circle at 83% 35%, rgba(255,218,75,.09), transparent 300px),
        radial-gradient(circle at 10% 90%, rgba(175,57,255,.13), transparent 240px),
        linear-gradient(145deg, #17121a, #0d0910) !important;

    box-shadow:
        0 25px 60px rgba(0,0,0,.28);
}

body.b3-home-brand-v2 #shop .shop-card::after {
    content: "COMING SOON";
    position: absolute;
    right: 25px;
    bottom: 8px;

    color: rgba(255,226,84,.055);
    font-size: clamp(3rem, 7vw, 7rem);
    font-weight: 950;
    letter-spacing: -.05em;
    white-space: nowrap;
}

#shop .b3-decor-zone .m1 {
    right: 3%;
    top: 8%;
    color: var(--b3-yellow);
    font-size: 50px;
    transform: rotate(10deg);
}

#shop .b3-decor-zone .s1 {
    left: 5%;
    bottom: 3%;
    color: var(--b3-pink);
    transform: rotate(-6deg);
}

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

body.b3-home-brand-v2 footer {
    position: relative;
    margin-top: 25px !important;
}

body.b3-home-brand-v2 footer::before {
    content: "BIFF3EN FOREVER ✦";
    position: absolute;
    right: 0;
    top: -30px;

    color: rgba(202,90,255,.32);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .16em;
}

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

@media (max-width: 1050px) {
    .b3-scroll-rail {
        opacity: .45;
        width: 55px;
    }

    .b3-scroll-rail .r2 {
        display: none;
    }
}

@media (max-width: 850px) {

    .b3-scroll-rail {
        display: none;
    }

    body.b3-home-brand-v2 #home {
        min-height: 600px !important;
        padding: 50px 24px !important;
        background-position: 64% center !important;
    }

    body.b3-home-brand-v2 #home h1 {
        font-size: clamp(3.2rem, 15vw, 5.3rem) !important;
    }

    .b3-hero-v2-decor .s1,
    .b3-hero-v2-decor .s3,
    .b3-hero-v2-decor .star {
        display: none;
    }

    .b3-decor-zone {
        inset: -30px -20px;
        opacity: .65;
    }

    body.b3-home-brand-v2 #socials .social-card:nth-child(n) {
        transform: none;
    }
}

@media (max-width: 540px) {

    body.b3-home-brand-v2 #home {
        min-height: 550px !important;
        padding: 38px 19px !important;
        border-radius: 20px !important;
        background-position: 68% center !important;
    }

    .b3-hero-v2-decor .s2,
    .b3-hero-v2-decor .bolt {
        display: none;
    }

    .b3-decor-zone .sticker {
        display: none;
    }
}
/* =====================================================
   HERO BACK-LAYER FIX
   Banner -> overlay -> content
   ===================================================== */

body.b3-home-brand-v2 #home {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    background:
        linear-gradient(
            145deg,
            #12071d,
            #08040d
        ) !important;
}

/* ACTUAL BANNER - BACKMOST LAYER */
body.b3-home-brand-v2 #home::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: -2 !important;

    background-image:
        url("/assets/biff3en-home-banner.png") !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    opacity:
        1 !important;

    transform:
        scale(1.015);

    pointer-events:
        none !important;
}

/* DARK PURPLE LAYER ABOVE BANNER */
body.b3-home-brand-v2 #home::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: -1 !important;

    background:
        linear-gradient(
            90deg,
            rgba(5, 2, 10, .91) 0%,
            rgba(7, 2, 13, .77) 28%,
            rgba(8, 2, 15, .46) 52%,
            rgba(7, 2, 13, .20) 78%,
            rgba(6, 2, 11, .12) 100%
        ),
        linear-gradient(
            0deg,
            rgba(6, 2, 11, .28),
            transparent 42%
        ) !important;

    pointer-events:
        none !important;
}

/* EVERYTHING ELSE ABOVE IMAGE */
body.b3-home-brand-v2 #home > * {
    position: relative !important;
    z-index: 2 !important;
}

/* DECOR IS ABOVE IMAGE BUT BELOW MAIN CONTENT */
body.b3-home-brand-v2 #home > .b3-hero-v2-decor {
    position: absolute !important;
    z-index: 1 !important;
}

/* MORE READABILITY BEHIND HERO COPY */
body.b3-home-brand-v2 #home h1 {
    text-shadow:
        0 5px 20px rgba(0,0,0,.88),
        0 12px 42px rgba(0,0,0,.55) !important;
}

body.b3-home-brand-v2 #home .b3-brand-hero-copy,
body.b3-home-brand-v2 #home > p {
    color:
        rgba(255,255,255,.88) !important;

    text-shadow:
        0 2px 12px rgba(0,0,0,.95);
}

/* MOBILE */
@media (max-width: 850px) {

    body.b3-home-brand-v2 #home::before {
        background-position:
            62% center !important;
    }

    body.b3-home-brand-v2 #home::after {
        background:
            linear-gradient(
                90deg,
                rgba(5,2,10,.90),
                rgba(6,2,12,.60)
            ) !important;
    }
}


/* =====================================================
   BIFF3EN HERO - REAL BACKGROUND LAYER FIX V2
   0 = banner
   1 = dark overlay
   2 = decorative stickers
   3 = actual hero content
   ===================================================== */

body.b3-home-brand-v2 #home {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    /* Parent must NOT cover ::before */
    background: #08040d !important;
}

/* -----------------------------------------------------
   BANNER IMAGE - ACTUAL BACK LAYER
   ----------------------------------------------------- */

body.b3-home-brand-v2 #home::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    z-index: 0 !important;

    display: block !important;

    background:
        url("/assets/biff3en-home-banner.png")
        center center / cover
        no-repeat !important;

    opacity: 1 !important;

    pointer-events: none !important;

    transform: none !important;
}

/* -----------------------------------------------------
   DARK OVERLAY
   ----------------------------------------------------- */

body.b3-home-brand-v2 #home::after {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    z-index: 1 !important;

    display: block !important;

    background:
        linear-gradient(
            90deg,
            rgba(5,2,10,.88) 0%,
            rgba(6,2,12,.72) 28%,
            rgba(7,2,13,.40) 52%,
            rgba(7,2,13,.17) 78%,
            rgba(6,2,11,.08) 100%
        ),
        linear-gradient(
            0deg,
            rgba(5,2,10,.23) 0%,
            transparent 45%
        ) !important;

    pointer-events: none !important;
}

/* -----------------------------------------------------
   ACTUAL HERO CONTENT
   ----------------------------------------------------- */

body.b3-home-brand-v2 #home > * {
    position: relative !important;
    z-index: 3 !important;
}

/* -----------------------------------------------------
   DECORATION
   ----------------------------------------------------- */

body.b3-home-brand-v2 #home > .b3-hero-v2-decor {
    position: absolute !important;
    inset: 0 !important;

    z-index: 2 !important;

    pointer-events: none !important;
}

/* -----------------------------------------------------
   TEXT READABILITY
   ----------------------------------------------------- */

body.b3-home-brand-v2 #home h1 {
    position: relative !important;
    z-index: 3 !important;

    text-shadow:
        0 6px 18px rgba(0,0,0,.92),
        0 14px 45px rgba(0,0,0,.55) !important;
}

body.b3-home-brand-v2 #home .hero-badge,
body.b3-home-brand-v2 #home .hero-buttons,
body.b3-home-brand-v2 #home .hero-tags,
body.b3-home-brand-v2 #home .b3-brand-hero-copy,
body.b3-home-brand-v2 #home > p {
    position: relative !important;
    z-index: 3 !important;
}

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

@media (max-width: 850px) {

    body.b3-home-brand-v2 #home::before {
        background-position:
            64% center !important;
    }

    body.b3-home-brand-v2 #home::after {
        background:
            linear-gradient(
                90deg,
                rgba(5,2,10,.89) 0%,
                rgba(6,2,12,.62) 55%,
                rgba(6,2,12,.25) 100%
            ) !important;
    }
}

/* BIFF3EN SAFE FAR-BACK START */

/*
   ONE SIMPLE STRUCTURE:

   main::before = banner, farthest back
   #home        = dark transparent content layer
   text/buttons = normal content above it

   No extra JS.
   No wrapper.
   No second banner inside hero.
*/

body.b3-home-brand-v2 main {
    position: relative !important;
    isolation: isolate !important;
}

/* Banner is now behind the hero itself */
body.b3-home-brand-v2 main::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 50% !important;

    width: min(1500px, calc(100vw - 40px)) !important;
    height: 760px !important;

    transform: translateX(-50%) !important;

    z-index: 0 !important;

    background-image:
        linear-gradient(
            180deg,
            rgba(4, 1, 8, .08) 0%,
            rgba(5, 2, 10, .12) 70%,
            rgba(6, 2, 11, .72) 100%
        ),
        url("/assets/biff3en-home-banner.png") !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    border-radius:
        32px !important;

    box-shadow:
        0 35px 100px rgba(0, 0, 0, .48),
        0 0 95px rgba(164, 52, 255, .15)
        !important;

    pointer-events:
        none !important;
}

/* Everything on the page sits above the banner */
body.b3-home-brand-v2 main > * {
    position: relative !important;
    z-index: 1 !important;
}

/*
   Hero must NOT contain the banner anymore.
   It is now only a transparent dark content layer.
*/
body.b3-home-brand-v2 #home {
    background-image:
        none !important;

    background:
        linear-gradient(
            100deg,
            rgba(7, 3, 12, .82) 0%,
            rgba(9, 4, 15, .67) 38%,
            rgba(10, 4, 17, .43) 68%,
            rgba(10, 4, 17, .18) 100%
        ) !important;

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

    box-shadow:
        none !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;
}

/* Kill every old pseudo-image attempt */
body.b3-home-brand-v2 #home::before,
body.b3-home-brand-v2 #home::after {
    content:
        none !important;

    display:
        none !important;

    background:
        none !important;

    background-image:
        none !important;
}

/* Hero content remains above the dark layer */
body.b3-home-brand-v2 #home > * {
    position:
        relative !important;

    z-index:
        2 !important;
}

/* Decorative stickers stay visible */
body.b3-home-brand-v2 #home > .b3-hero-v2-decor {
    position:
        absolute !important;

    inset:
        0 !important;

    z-index:
        1 !important;

    pointer-events:
        none !important;
}

/* Let more of the actual banner breathe around the hero */
body.b3-home-brand-v2 #home {
    width:
        min(1180px, calc(100% - 150px))
        !important;

    min-height:
        500px !important;

    margin:
        82px auto 120px !important;

    padding:
        58px 52px !important;

    border-radius:
        25px !important;
}


/* TABLET */
@media (max-width: 1000px) {

    body.b3-home-brand-v2 main::before {
        width:
            calc(100vw - 24px) !important;

        height:
            690px !important;
    }

    body.b3-home-brand-v2 #home {
        width:
            calc(100% - 70px) !important;

        margin:
            60px auto 90px !important;
    }
}


/* MOBILE */
@media (max-width: 700px) {

    body.b3-home-brand-v2 main::before {
        width:
            calc(100vw - 12px) !important;

        height:
            650px !important;

        background-position:
            62% center !important;

        border-radius:
            22px !important;
    }

    body.b3-home-brand-v2 #home {
        width:
            calc(100% - 28px) !important;

        min-height:
            510px !important;

        margin:
            35px auto 70px !important;

        padding:
            40px 22px !important;

        background:
            rgba(7, 3, 12, .72)
            !important;
    }
}

/* BIFF3EN SAFE FAR-BACK END */

/* BIFF3EN FULL BANNER START */

/*
   Banner original: 2172 x 724
   Ratio: ca. 3:1

   Hele bildet skal vises.
   Ingen cropping.
*/

body.b3-home-brand-v2 main::before {

    width:
        min(1500px, calc(100vw - 40px))
        !important;

    height:
        clamp(240px, 33.333vw, 500px)
        !important;

    background-image:
        url("/assets/biff3en-home-banner.png")
        !important;

    background-size:
        contain !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    background-color:
        #08030e !important;

    border-radius:
        28px !important;
}


/*
   Hero-panelet ligger fortsatt foran,
   men banneret bak blir ikke zooma/croppa.
*/

body.b3-home-brand-v2 #home {

    width:
        min(1080px, calc(100% - 220px))
        !important;

    min-height:
        390px !important;

    margin:
        55px auto 105px !important;

    padding:
        46px 48px !important;
}


/* TABLET */

@media (max-width: 1000px) {

    body.b3-home-brand-v2 main::before {

        width:
            calc(100vw - 24px)
            !important;

        height:
            32vw !important;

        min-height:
            280px !important;
    }

    body.b3-home-brand-v2 #home {

        width:
            calc(100% - 90px)
            !important;

        margin:
            38px auto 75px !important;
    }
}


/* MOBILE */

@media (max-width: 700px) {

    body.b3-home-brand-v2 main::before {

        width:
            calc(100vw - 12px)
            !important;

        height:
            33vw !important;

        min-height:
            190px !important;

        background-size:
            contain !important;
    }

    body.b3-home-brand-v2 #home {

        width:
            calc(100% - 26px)
            !important;

        min-height:
            470px !important;

        margin:
            24px auto 55px !important;

        padding:
            36px 20px !important;
    }
}

/* BIFF3EN FULL BANNER END */

/* BIFF3EN REMOVE FRONT PANEL START */

/*
  Målet:
  - behold banneret
  - behold tekst/knapper
  - fjern glass/mørk boks foran banneret
*/

body.b3-home-brand-v2 #home {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

body.b3-home-brand-v2 #home::before {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

body.b3-home-brand-v2 #home::after {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

body.b3-home-brand-v2 #home > * {
    position: relative !important;
    z-index: 3 !important;
}

body.b3-home-brand-v2 #home h1,
body.b3-home-brand-v2 #home p,
body.b3-home-brand-v2 #home .b3-brand-hero-copy,
body.b3-home-brand-v2 #home .hero-badge,
body.b3-home-brand-v2 #home .hero-buttons,
body.b3-home-brand-v2 #home .hero-tags {
    text-shadow:
        0 3px 10px rgba(0,0,0,.85),
        0 8px 22px rgba(0,0,0,.55) !important;
}

/* hvis hero-decor fortsatt prøver å lage panel-look */
body.b3-home-brand-v2 #home > .b3-hero-v2-decor {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* BIFF3EN REMOVE FRONT PANEL END */

/* B3 SAFE HERO CLEANUP START */

/* Mindre og ryddigere hero-tekst */
body.b3-home-brand-v2 #home h1 {
    max-width: 560px !important;
    font-size: clamp(2.8rem, 4.6vw, 4.8rem) !important;
    line-height: .92 !important;
    letter-spacing: -.05em !important;
    margin-bottom: 16px !important;
}

/* Mindre badge */
body.b3-home-brand-v2 #home .hero-badge {
    font-size: .72rem !important;
    padding: 8px 14px !important;
    margin-bottom: 14px !important;
}

/* Gjør beskrivelsen lesbar uten stor bakgrunnsboks */
body.b3-home-brand-v2 #home .b3-brand-hero-copy,
body.b3-home-brand-v2 #home > p {
    max-width: 520px !important;
    color: rgba(255,255,255,.96) !important;
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
    text-shadow:
        0 2px 7px rgba(0,0,0,.95),
        0 4px 16px rgba(0,0,0,.75) !important;
}

/* Fjern de fire små TWITCH / COMMUNITY / ARCADE / KONKURRANSER-taggene */
body.b3-home-brand-v2 #home .hero-tags {
    display: none !important;
}

/* Fjern ekstra nettside-genererte stickers fra hero */
body.b3-home-brand-v2 #home .b3-hero-v2-decor,
body.b3-home-brand-v2 #home > .b3-hero-v2-decor {
    display: none !important;
}

/* Litt bedre avstand mellom knappene */
body.b3-home-brand-v2 #home .hero-buttons {
    gap: 14px !important;
    margin-top: 18px !important;
}

/* Twitch-knapp */
body.b3-home-brand-v2 #home .hero-buttons a:first-child {
    min-height: 52px !important;
    padding: 0 24px !important;
    border-radius: 14px !important;
}

/* Arcade-knapp mye tydeligere */
body.b3-home-brand-v2 #home .hero-buttons a:nth-child(2) {
    min-height: 52px !important;
    padding: 0 24px !important;
    border-radius: 14px !important;

    color: #ffffff !important;
    background: rgba(14,7,22,.88) !important;
    border: 1px solid rgba(211,123,255,.52) !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,.28),
        inset 0 1px rgba(255,255,255,.05) !important;
}

/* Ikke legg tilbake mørkt lag foran hele banneret */
body.b3-home-brand-v2 #home,
body.b3-home-brand-v2 #home::before,
body.b3-home-brand-v2 #home::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Mobile */
@media (max-width: 800px) {
    body.b3-home-brand-v2 #home h1 {
        font-size: clamp(2.6rem, 11vw, 4rem) !important;
        max-width: 100% !important;
    }

    body.b3-home-brand-v2 #home .b3-brand-hero-copy,
    body.b3-home-brand-v2 #home > p {
        max-width: 100% !important;
        font-size: 1rem !important;
    }
}

/* B3 SAFE HERO CLEANUP END */

/* B3 REMOVE HERO TITLE START */

/* Remove the redundant headline */
body.b3-home-brand-v2 #home h1 {
    display: none !important;
}

/* Move the remaining hero content down and slightly left */
body.b3-home-brand-v2 #home {
    padding-top: 115px !important;
    padding-left: 30px !important;
}

/* Keep badge compact */
body.b3-home-brand-v2 #home .hero-badge {
    margin-bottom: 16px !important;
}

/* Description */
body.b3-home-brand-v2 #home .b3-brand-hero-copy,
body.b3-home-brand-v2 #home > p {
    max-width: 500px !important;
    margin-top: 0 !important;
    margin-bottom: 22px !important;

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

    text-shadow:
        0 2px 8px rgba(0,0,0,.95),
        0 5px 18px rgba(0,0,0,.65) !important;
}

/* Buttons */
body.b3-home-brand-v2 #home .hero-buttons {
    margin-top: 12px !important;
}

/* Mobile */
@media (max-width: 800px) {
    body.b3-home-brand-v2 #home {
        padding-top: 85px !important;
        padding-left: 20px !important;
    }
}

/* B3 REMOVE HERO TITLE END */

/* B3 SAFE CLEANUP V2 START */

/* Hide random text stickers, keep stars/bolts/glow */
body.b3-home-brand-v2 .b3-decor-zone .sticker { display: none !important; }
body.b3-home-brand-v2 .b3-section-sticker { display: none !important; }
body.b3-home-brand-v2 .b3-scroll-rail .r2 { display: none !important; }

/* Tighten spacing */
body.b3-home-brand-v2 #home { margin-bottom: 35px !important; }
body.b3-home-brand-v2 #live { padding-top: 30px !important; padding-bottom: 45px !important; }
body.b3-home-brand-v2 #homeCompetitions { margin-top: 10px !important; padding-top: 40px !important; padding-bottom: 45px !important; }
body.b3-home-brand-v2 #socials { padding-top: 45px !important; padding-bottom: 50px !important; }
body.b3-home-brand-v2 #shop { padding-top: 45px !important; padding-bottom: 55px !important; }

/* Decorative elements never block content */
body.b3-home-brand-v2 .b3-decor-zone,
body.b3-home-brand-v2 .b3-scroll-rail { pointer-events: none !important; }

body.b3-home-brand-v2 .b3-decor-zone .mark { opacity: .55 !important; }

/* Do NOT change hero banner setup */

/* B3 SAFE CLEANUP V2 END */