/* ==========================================================
   MINECRFTMODS V26
   ========================================================== */

:root{
    --v26-purple:#9e6cff;
    --v26-blue:#48a6ff;
    --v26-bg:#05080d;
    --v26-card:rgba(9,14,21,.82);
}


/* ==========================================================
   GLOBAL SMOOTHNESS
   ========================================================== */

html{
    scroll-behavior:smooth !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    background:#05080d !important;
}

body{
    overflow-x:hidden !important;
    overflow-y:visible !important;

    min-height:100% !important;

    overscroll-behavior-y:none;

    -webkit-font-smoothing:antialiased;
}


/* prevent old reveal systems hiding content */

body.v26-runtime .reveal,
body.v26-runtime .v12-reveal,
body.v26-runtime .v13-reveal{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
}


/* ==========================================================
   REMOVE ALL OLD MOBILE DRAWERS
   ========================================================== */

.mobileDrawer,
#mobileDrawer,
.navDrawer,
.mobileDrawerBackdrop,
.drawerBackdrop{
    display:none !important;
}


/* ==========================================================
   V26 DRAWER BACKDROP
   ========================================================== */

#v26DrawerBackdrop{
    position:fixed;

    inset:0;

    z-index:999970;

    background:
        rgba(0,4,8,.67);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .28s ease,
        visibility .28s ease;
}


#v26DrawerBackdrop.v26-open{
    opacity:1;

    visibility:visible;

    pointer-events:auto;
}


/* ==========================================================
   NEW DRAWER
   ========================================================== */

#v26Drawer{
    position:fixed;

    top:0;
    right:0;

    z-index:999980;

    width:min(82vw,420px);

    height:100dvh;

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

    overscroll-behavior:contain;

    -webkit-overflow-scrolling:touch;

    padding:
        34px 24px 26px;

    box-sizing:border-box;

    background:
        linear-gradient(
            180deg,
            rgba(20,27,34,.97),
            rgba(7,11,16,.985)
        );

    border-left:
        1px solid rgba(255,255,255,.10);

    box-shadow:
        -40px 0 100px
        rgba(0,0,0,.55);

    transform:
        translate3d(105%,0,0);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    will-change:transform,opacity;

    transition:
        transform .38s
        cubic-bezier(.16,1,.3,1),
        opacity .24s ease,
        visibility .38s;
}


#v26Drawer.v26-open{
    transform:
        translate3d(0,0,0);

    opacity:1;

    visibility:visible;

    pointer-events:auto;
}


.v26-drawer-top{
    display:flex;

    align-items:center;

    justify-content:
        space-between;

    gap:20px;

    padding:
        8px 2px 28px;

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


.v26-drawer-brand{
    width:68px;
    height:68px;

    object-fit:cover;

    border-radius:20px;

    filter:
        drop-shadow(
            0 10px 24px
            rgba(121,81,255,.26)
        );
}


.v26-drawer-close{
    width:58px;
    height:58px;

    border:0;

    border-radius:18px;

    background:
        rgba(255,255,255,.055);

    color:#dfe6ef;

    font-size:36px;

    line-height:1;

    cursor:pointer;

    transition:
        transform .18s ease,
        background .18s ease;
}


.v26-drawer-close:active{
    transform:scale(.93);
}


.v26-drawer-nav{
    display:flex;

    flex-direction:column;

    gap:12px;

    padding:
        32px 0 20px;
}


.v26-drawer-item{
    --delay:0ms;

    display:grid;

    grid-template-columns:
        62px 1fr 24px;

    align-items:center;

    gap:16px;

    min-height:78px;

    padding:
        10px 14px;

    border-radius:18px;

    text-decoration:none;

    color:#b5bdc8;

    border:
        1px solid transparent;

    background:
        transparent;

    transform:
        translateX(36px);

    opacity:0;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease;
}


#v26Drawer.v26-open
.v26-drawer-item{
    animation:
        v26ItemIn .42s
        cubic-bezier(.16,1,.3,1)
        both;

    animation-delay:
        var(--delay);
}


@keyframes v26ItemIn{

    from{
        opacity:0;
        transform:
            translateX(38px);
    }

    to{
        opacity:1;
        transform:
            translateX(0);
    }

}


.v26-drawer-item:hover,
.v26-drawer-item:active{
    background:
        linear-gradient(
            100deg,
            rgba(143,97,255,.15),
            rgba(62,158,255,.08)
        );

    border-color:
        rgba(147,109,255,.20);

    color:#fff;
}


.v26-drawer-item.home{
    background:
        linear-gradient(
            100deg,
            rgba(139,91,255,.23),
            rgba(55,142,214,.10)
        );

    border-color:
        rgba(139,104,255,.24);

    color:#fff;
}


.v26-drawer-icon{
    width:56px;
    height:56px;

    display:grid;

    place-items:center;

    overflow:hidden;

    border-radius:15px;

    background:
        rgba(255,255,255,.055);

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

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


.v26-drawer-icon img{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    display:block !important;

    opacity:1 !important;

    visibility:visible !important;
}


.v26-drawer-name{
    font-size:
        20px;

    font-weight:600;
}


.v26-drawer-arrow{
    text-align:center;

    font-size:25px;

    opacity:.62;
}


.v26-drawer-guest{
    margin-top:28px;

    display:flex;

    align-items:center;

    gap:16px;

    padding:20px;

    border-radius:22px;

    background:
        rgba(255,255,255,.035);

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


.v26-guest-icon{
    width:54px;
    height:54px;

    display:grid;

    place-items:center;

    border-radius:16px;

    color:#c3aaff;

    background:
        rgba(132,84,255,.12);

    font-size:22px;
}


.v26-drawer-guest strong{
    display:block;
    color:#fff;
}


.v26-drawer-guest small{
    display:block;

    margin-top:4px;

    color:#717b88;
}


/* ==========================================================
   HEADER GLASS
   ========================================================== */

header,
.topbar,
.siteHeader{
    transition:
        background .28s ease,
        backdrop-filter .28s ease,
        box-shadow .28s ease,
        border-color .28s ease !important;
}


body.v26-scrolled header,
body.v26-scrolled .topbar,
body.v26-scrolled .siteHeader{
    background:
        rgba(5,9,13,.76) !important;

    backdrop-filter:
        blur(20px)
        saturate(155%) !important;

    -webkit-backdrop-filter:
        blur(20px)
        saturate(155%) !important;

    box-shadow:
        0 12px 42px
        rgba(0,0,0,.30) !important;

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


/* ==========================================================
   HOME REAL WORLD BACKGROUND
   ========================================================== */

body.v26-home{
    position:relative;

    background:
        #05080d !important;
}


body.v26-home::before{
    content:"";

    position:fixed;

    inset:0;

    z-index:-5;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(5,8,13,.40),
            rgba(5,8,13,.67) 54%,
            rgba(5,8,13,.90)
        ),
        url('/assets/backgrounds/minecraft-world-home.webp');

    background-position:
        center center;

    background-size:
        cover;

    background-repeat:
        no-repeat;

    transform:
        translateZ(0);
}


/* ==========================================================
   HOME HERO — NO GIANT BLANK GAP
   ========================================================== */

body.v26-home .hero{
    position:relative !important;

    display:block !important;

    width:
        min(
            1450px,
            calc(100% - 72px)
        ) !important;

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

    margin:
        28px auto 32px !important;

    padding:
        0 !important;

    overflow:hidden !important;

    border-radius:
        30px !important;

    border:
        1px solid
        rgba(180,160,255,.13) !important;

    background:
        linear-gradient(
            100deg,
            rgba(7,13,20,.91),
            rgba(8,12,19,.82) 62%,
            rgba(12,18,25,.72)
        ),
        url('/assets/backgrounds/minecraft-world-home.webp')
        center center / cover
        no-repeat !important;

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.36) !important;
}


body.v26-home .hero::before{
    content:"";

    position:absolute;

    inset:0;

    z-index:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 16% 28%,
            rgba(64,219,154,.08),
            transparent 34%
        ),
        radial-gradient(
            circle at 86% 20%,
            rgba(153,103,255,.15),
            transparent 32%
        );
}


body.v26-home .hero::after{
    display:none !important;
}


/* kill old hero scenes only */

body.v26-home .v10-blocks,
body.v26-home .v12-home-scene,
body.v26-home .v13-scene,
body.v26-home .v14-hero-scene,
body.v26-home .mc-home-block-scene,
body.v26-home .heroVisual,
body.v26-home .heroArtwork,
body.v26-home .heroArt,
body.v26-home .heroDecoration,
body.v26-home .heroDecor{
    display:none !important;
}


.v26-hero-content{
    position:relative !important;

    z-index:2 !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:flex-start !important;

    justify-content:center !important;

    width:min(880px,70%) !important;

    min-height:560px !important;

    box-sizing:border-box !important;

    padding:
        64px 24px 68px 76px !important;

    margin:0 !important;

    transform:none !important;
}


.v26-hero-content .heroLabel{
    position:static !important;

    display:inline-flex !important;

    width:auto !important;

    margin:
        0 0 26px !important;

    transform:none !important;
}


.v26-hero-content h1{
    position:static !important;

    width:auto !important;

    max-width:880px !important;

    margin:0 !important;

    padding:0 !important;

    transform:none !important;

    font-size:
        clamp(66px,6.1vw,102px) !important;

    line-height:
        .92 !important;

    letter-spacing:
        -4.5px !important;
}


.v26-hero-content > p{
    position:static !important;

    max-width:
        760px !important;

    margin:
        28px 0 0 !important;

    transform:none !important;

    font-size:
        18px !important;

    line-height:
        1.65 !important;
}


.v26-hero-content .heroActions{
    position:static !important;

    margin:
        32px 0 0 !important;

    transform:none !important;
}


/* old wrappers must not add dimensions */

body.v26-home .heroContent,
body.v26-home .heroInner,
body.v26-home .heroText,
body.v26-home .heroLeft,
body.v26-home .heroRight{
    min-height:0 !important;

    height:auto !important;

    max-height:none !important;

    top:auto !important;
    bottom:auto !important;

    transform:none !important;
}


/* ==========================================================
   HOME CATEGORY / SEARCH SPACING
   ========================================================== */

body.v26-home .categoryTabs,
body.v26-home .filterTabs,
body.v26-home .filters{
    margin-top:
        26px !important;
}


body.v26-home .searchBox,
body.v26-home .searchWrap,
body.v26-home .searchBar{
    margin-top:
        22px !important;

    margin-bottom:
        48px !important;
}


/* ==========================================================
   DETAIL PAGE BACKGROUNDS
   ========================================================== */

body.v26-detail{
    --v26-bg:
        url('/assets/backgrounds/minecraft-world.webp');

    position:relative;

    min-height:0 !important;

    height:auto !important;

    background:
        #05080d !important;
}


body.v26-detail::before{
    content:"";

    position:fixed;

    inset:0;

    z-index:-20;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(3,8,11,.39),
            rgba(4,9,13,.66) 50%,
            rgba(4,8,12,.88)
        ),
        var(--v26-bg);

    background-position:
        center;

    background-size:
        cover;

    background-repeat:
        no-repeat;
}


/* old fake backgrounds cannot create scroll */

body.v26-detail .v10-world,
body.v26-detail .v11-world,
body.v26-detail .v12-world,
body.v26-detail .v13-world,
body.v26-detail .v14-world,
body.v26-detail .mc-detail-world{
    position:fixed !important;

    inset:0 !important;

    width:100vw !important;
    height:100vh !important;

    min-height:0 !important;
    max-height:100vh !important;

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

    overflow:hidden !important;

    pointer-events:none !important;

    z-index:-10 !important;
}


body.v26-detail main,
body.v26-detail .detailPage{
    min-height:0 !important;

    height:auto !important;

    max-height:none !important;

    overflow:visible !important;

    margin-bottom:0 !important;

    padding-bottom:0 !important;
}


/* ==========================================================
   RELATED RESOURCES SLIDER
   ========================================================== */

body.v26-detail .fp-related{
    min-height:0 !important;

    height:auto !important;

    margin-bottom:
        10px !important;

    padding-bottom:
        2px !important;
}


body.v26-detail .fp-related-grid{
    display:flex !important;

    grid-template-columns:
        none !important;

    gap:14px !important;

    width:100% !important;

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

    scroll-snap-type:
        x proximity !important;

    -webkit-overflow-scrolling:
        touch !important;

    overscroll-behavior-x:
        contain !important;

    scrollbar-width:
        none !important;

    padding:
        4px 3px 12px !important;
}


body.v26-detail
.fp-related-grid::-webkit-scrollbar{
    display:none;
}


body.v26-detail
.fp-related-grid > *{
    flex:
        0 0 315px !important;

    width:
        315px !important;

    min-width:
        315px !important;

    max-width:
        315px !important;

    scroll-snap-align:
        start !important;
}


/* ==========================================================
   RELATED MUST BE END
   ========================================================== */

body.v26-detail footer,
body.v26-detail .fp-footer,
body.v26-detail .detailFooter,
body.v26-detail .resourceFooter,
body.v26-detail .pageEnd,
body.v26-detail .page-end,
body.v26-detail .bottomScene,
body.v26-detail .bottom-scene,
body.v26-detail .worldSpacer,
body.v26-detail .world-spacer,
body.v26-detail .detailSpacer,
body.v26-detail .detail-spacer{
    display:none !important;

    height:0 !important;

    min-height:0 !important;

    margin:0 !important;

    padding:0 !important;
}


/* old extra Home controls */

body.v26-detail .premiumPageHome,
body.v26-detail .floatingHome,
body.v26-detail .premiumHomeButton{
    display:none !important;
}


/* ==========================================================
   SCROLL TOP BUTTON
   ========================================================== */

.v12-scrolltop,
.scrollTop,
.scrollTopBtn{
    opacity:0 !important;

    visibility:hidden !important;

    pointer-events:none !important;

    transform:
        translateY(14px) !important;

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease !important;
}


body.v26-show-scrolltop
.v12-scrolltop,
body.v26-show-scrolltop
.scrollTop,
body.v26-show-scrolltop
.scrollTopBtn{
    opacity:1 !important;

    visibility:visible !important;

    pointer-events:auto !important;

    transform:
        translateY(0) !important;
}


/* ==========================================================
   DOWNLOAD MODAL
   ========================================================== */

.v26-download{
    position:fixed;

    inset:0;

    z-index:1000000;

    display:grid;

    place-items:center;

    padding:20px;

    background:
        rgba(1,4,8,.82);

    backdrop-filter:
        blur(17px);

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


.v26-download-box{
    width:
        min(470px,100%);

    padding:30px;

    border-radius:23px;

    box-sizing:border-box;

    background:
        radial-gradient(
            circle at 95% 0,
            rgba(151,96,255,.17),
            transparent 42%
        ),
        #090d13;

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

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.62);
}


.v26-download-box h3{
    color:white;

    margin:
        0 0 8px;

    font-size:25px;
}


.v26-download-status{
    color:#969fac;

    margin-bottom:24px;
}


.v26-progress-head{
    display:flex;

    justify-content:
        space-between;

    color:#fff;

    font-weight:800;

    margin-bottom:10px;
}


.v26-percent{
    color:#a66eff;
}


.v26-track{
    width:100%;

    height:12px;

    overflow:hidden;

    border-radius:999px;

    background:
        rgba(255,255,255,.09);
}


.v26-bar{
    width:0;

    height:100%;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #a468ff,
            #42a8ff
        );
}


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

body.v26-leave{
    animation:
        v26Leave .14s ease forwards;
}


@keyframes v26Leave{

    to{
        opacity:0;
        transform:
            translateY(3px);
    }

}


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

@media(max-width:700px){

    body.v26-home .hero{
        width:auto !important;

        margin:
            22px 18px 30px !important;

        border-radius:
            24px !important;
    }


    .v26-hero-content{
        width:100% !important;

        min-height:0 !important;

        padding:
            40px 22px 42px !important;

        justify-content:
            flex-start !important;
    }


    .v26-hero-content .heroLabel{
        margin-bottom:
            22px !important;
    }


    .v26-hero-content h1{
        font-size:
            clamp(
                43px,
                12vw,
                58px
            ) !important;

        line-height:
            .95 !important;

        letter-spacing:
            -2.2px !important;
    }


    .v26-hero-content > p{
        margin-top:
            24px !important;

        font-size:
            16px !important;

        line-height:
            1.62 !important;
    }


    .v26-hero-content
    .heroActions{
        width:100% !important;

        display:grid !important;

        gap:12px !important;

        margin-top:
            28px !important;
    }


    .v26-hero-content
    .heroActions > *{
        width:100% !important;

        box-sizing:border-box !important;
    }


    body.v26-home .categoryTabs,
    body.v26-home .filterTabs,
    body.v26-home .filters{
        display:flex !important;

        overflow-x:auto !important;

        flex-wrap:nowrap !important;

        gap:10px !important;

        padding:
            0 18px 10px !important;

        scrollbar-width:none;
    }


    body.v26-home
    .categoryTabs::-webkit-scrollbar,
    body.v26-home
    .filterTabs::-webkit-scrollbar{
        display:none;
    }


    body.v26-detail
    .fp-related-grid > *{
        flex-basis:
            270px !important;

        min-width:
            270px !important;

        width:
            270px !important;
    }


    #v26Drawer{
        width:
            min(86vw,390px);

        padding:
            30px 20px 24px;
    }

}


/* desktop: no custom drawer */

@media(min-width:901px){

    #v26Drawer,
    #v26DrawerBackdrop{
        display:none !important;
    }

}