:root{
    --bg:#07080d;
    --bg2:#0b0c13;
    --surface:#11121a;
    --surface2:#151620;
    --text:#f6f7fb;
    --muted:#9297a8;
    --violet:#8c5cff;
    --violet2:#6543df;
    --blue:#39a5ff;
    --cyan:#52d7e8;
    --border:rgba(255,255,255,.075);
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:
        radial-gradient(
            900px circle at 8% 5%,
            rgba(107,67,225,.15),
            transparent 60%
        ),
        radial-gradient(
            800px circle at 95% 30%,
            rgba(50,119,255,.08),
            transparent 62%
        ),
        var(--bg);

    color:var(--text);

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

    overflow-x:hidden;
}

body.drawerOpen{
    overflow:hidden;
}

a{
    color:inherit;
}

img{
    user-select:none;
    -webkit-user-drag:none;
}

::selection{
    background:rgba(140,92,255,.28);
    color:#fff;
}


/* ==================================
   AMBIENT BACKGROUND
================================== */

.ambient{
    position:fixed;
    z-index:-5;
    border-radius:50%;
    pointer-events:none;
    filter:blur(90px);
}

.ambientOne{
    width:520px;
    height:520px;
    left:-230px;
    top:240px;
    background:rgba(118,68,255,.09);
    animation:ambientOne 12s ease-in-out infinite alternate;
}

.ambientTwo{
    width:600px;
    height:600px;
    right:-300px;
    top:900px;
    background:rgba(45,125,255,.06);
    animation:ambientTwo 15s ease-in-out infinite alternate;
}

@keyframes ambientOne{
    to{
        transform:
            translate(80px,90px)
            scale(1.2);
    }
}

@keyframes ambientTwo{
    to{
        transform:
            translate(-90px,-100px)
            scale(1.15);
    }
}


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

.topbar{
    position:sticky;
    top:0;
    z-index:80;

    height:82px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:
        0 max(28px,calc((100vw - 1420px)/2));

    background:
        rgba(7,8,13,.78);

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

    backdrop-filter:
        blur(24px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(140%);
}

.brand{
    display:flex;
    align-items:center;

    gap:12px;

    text-decoration:none;

    font-size:18px;
    font-weight:950;

    letter-spacing:.5px;
}

.brandMark{
    display:grid;
    place-items:center;

    width:39px;
    height:39px;

    border-radius:13px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--violet),
            #566dff
        );

    box-shadow:
        0 12px 32px rgba(112,71,230,.25);
}

.brandMark.small{
    width:34px;
    height:34px;
}

.desktopNav{
    display:flex;
    gap:8px;
}

.desktopNav a{
    padding:
        10px 15px;

    color:#aaaebe;

    border-radius:13px;

    text-decoration:none;

    font-size:14px;
    font-weight:750;

    transition:
        .22s ease;
}

.desktopNav a:hover,
.desktopNav a.active{
    color:#fff;

    background:
        rgba(139,92,246,.095);
}

.menuButton{
    display:none;

    width:52px;
    height:52px;

    border-radius:17px;

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

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

    cursor:pointer;
}

.menuButton span{
    display:block;

    width:21px;
    height:2px;

    margin:5px auto;

    background:#fff;

    border-radius:999px;
}


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

main{
    width:min(1420px,calc(100% - 44px));
    margin:auto;
}

.hero{
    position:relative;

    overflow:hidden;

    margin-top:42px;

    min-height:520px;

    padding:
        78px 70px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    border-radius:34px;

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

    background:
        radial-gradient(
            700px circle at 100% 0%,
            rgba(75,132,255,.12),
            transparent 60%
        ),
        radial-gradient(
            650px circle at 0% 100%,
            rgba(139,92,246,.16),
            transparent 62%
        ),
        linear-gradient(
            145deg,
            rgba(20,20,31,.95),
            rgba(10,11,17,.98)
        );

    box-shadow:
        0 38px 120px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.045);
}

.heroGlow{
    position:absolute;

    width:420px;
    height:420px;

    top:-200px;
    right:-100px;

    border-radius:50%;

    background:
        rgba(139,92,246,.11);

    filter:blur(50px);

    animation:
        heroGlow 7s ease-in-out infinite alternate;
}

@keyframes heroGlow{
    to{
        transform:
            translate(-80px,100px)
            scale(1.25);
    }
}

.heroLabel,
.miniLabel{
    color:#b59cff;

    font-size:11px;
    font-weight:950;

    letter-spacing:1.8px;
}

.heroLabel{
    width:max-content;

    padding:
        9px 14px;

    border:
        1px solid rgba(139,92,246,.19);

    border-radius:999px;

    background:
        rgba(139,92,246,.065);
}

.hero h1{
    max-width:900px;

    margin:
        24px 0 18px;

    font-size:
        clamp(55px,7vw,94px);

    letter-spacing:
        -4px;

    line-height:.95;
}

.hero h1 span{
    display:block;

    background:
        linear-gradient(
            90deg,
            #9f78ff,
            #5caeff,
            #6ee2e7
        );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;
}

.hero p{
    max-width:720px;

    margin:0;

    color:#9da3b3;

    font-size:18px;
    line-height:1.8;
}

.heroActions{
    display:flex;

    gap:12px;

    margin-top:34px;
}

.primaryButton,
.secondaryButton{
    display:inline-flex;

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

    min-height:56px;

    padding:
        0 24px;

    border-radius:17px;

    text-decoration:none;

    font-weight:850;

    transition:
        .25s ease;
}

.primaryButton{
    color:#fff;

    background:
        linear-gradient(
            100deg,
            #7048e8,
            #895df6 48%,
            #367fd9
        );

    box-shadow:
        0 17px 38px rgba(104,67,218,.28);
}

.secondaryButton{
    background:
        rgba(255,255,255,.025);

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

.primaryButton:hover,
.secondaryButton:hover{
    transform:
        translateY(-3px);
}


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

.searchWrap{
    padding:
        26px 0 8px;
}

.searchBox{
    display:flex;
    align-items:center;

    gap:14px;

    min-height:68px;

    padding:
        0 21px;

    border-radius:21px;

    background:
        rgba(16,17,25,.76);

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

    backdrop-filter:
        blur(18px);
}

.searchIcon{
    width:18px;
    height:18px;

    border:
        2px solid #697083;

    border-radius:50%;

    position:relative;
}

.searchIcon::after{
    content:"";

    position:absolute;

    width:7px;
    height:2px;

    right:-6px;
    bottom:-3px;

    transform:
        rotate(45deg);

    background:#697083;
}

.searchBox input{
    width:100%;

    border:0;
    outline:0;

    background:transparent;

    color:#fff;

    font-size:16px;
}


/* ==================================
   SECTIONS
================================== */

.section{
    padding:
        74px 0 10px;
}

.sectionHead{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:30px;

    margin-bottom:26px;
}

.sectionHead h2{
    margin:
        7px 0 5px;

    font-size:
        clamp(35px,4vw,50px);

    letter-spacing:
        -2px;
}

.sectionHead p{
    color:var(--muted);
    margin:0;
}

.sectionCount{
    color:#8d93a2;

    padding:
        9px 13px;

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

    border-radius:
        999px;

    font-size:12px;
}


/* ==================================
   MAIN RESOURCE CARDS
================================== */

.resourceGrid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:18px;
}

.resourceCard{
    position:relative;

    overflow:hidden;

    min-width:0;

    border-radius:26px;

    text-decoration:none;

    background:
        linear-gradient(
            145deg,
            rgba(17,18,27,.96),
            rgba(9,10,16,.98)
        );

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

    box-shadow:
        0 17px 50px rgba(0,0,0,.2);

    transition:
        transform .3s cubic-bezier(.2,.8,.2,1),
        border-color .3s ease,
        box-shadow .3s ease;
}

.resourceCard::before{
    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:0;

    background:
        radial-gradient(
            500px circle at 50% 0%,
            rgba(139,92,246,.14),
            transparent 60%
        );

    transition:
        opacity .3s ease;
}

.resourceCard:hover{
    transform:
        translateY(-7px);

    border-color:
        rgba(139,92,246,.26);

    box-shadow:
        0 30px 70px rgba(0,0,0,.38);
}

.resourceCard:hover::before{
    opacity:1;
}

.imageArea{
    min-height:220px;

    display:grid;
    place-items:center;

    background:
        radial-gradient(
            260px circle,
            rgba(139,92,246,.07),
            transparent 70%
        );
}

.imageArea img{
    width:112px;
    height:112px;

    object-fit:cover;

    border-radius:25px;

    box-shadow:
        0 20px 42px rgba(0,0,0,.36);
}

.cardBody{
    padding:
        23px;
}

.cardType{
    color:#a98aff;

    font-size:10px;
    font-weight:950;

    letter-spacing:1.3px;
}

.cardBody h3{
    margin:
        9px 0 10px;

    font-size:23px;

    letter-spacing:
        -.7px;
}

.cardBody p{
    min-height:78px;

    color:#9298a8;

    line-height:1.65;

    margin:0;
}

.cardFooter{
    margin-top:21px;

    padding-top:17px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-top:
        1px solid rgba(255,255,255,.06);

    font-size:13px;
}

.cardFooter span{
    color:#aab0bd;
}

.cardFooter b{
    color:#beaaff;
}

.featuredCard{
    border-color:
        rgba(139,92,246,.19);
}

.premiumResource .imageArea{
    background:
        radial-gradient(
            280px circle,
            rgba(61,135,255,.09),
            transparent 68%
        );
}


/* ==================================
   RECOMMENDED
================================== */

.recommendGrid{
    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:13px;
}

.recommendCard{
    display:grid;

    grid-template-columns:
        68px 1fr auto;

    align-items:center;

    gap:16px;

    padding:15px;

    border-radius:21px;

    text-decoration:none;

    background:
        linear-gradient(
            145deg,
            rgba(20,21,31,.96),
            rgba(12,13,20,.97)
        );

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

    transition:
        transform .25s ease,
        border-color .25s ease;
}

.recommendCard:hover{
    transform:
        translateY(-4px);

    border-color:
        rgba(139,92,246,.24);
}

.recommendCard img{
    width:68px;
    height:68px;

    object-fit:cover;

    border-radius:17px;
}

.recommendCard div{
    display:flex;
    flex-direction:column;

    gap:3px;
}

.recommendCard small{
    color:#a98aff;

    font-size:9px;

    font-weight:900;

    letter-spacing:1px;
}

.recommendCard strong{
    font-size:16px;
}

.recommendCard span{
    color:#848a9a;

    font-size:12px;
}

.recommendCard b{
    color:#bcaaff;

    font-size:12px;
}


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

.aboutSection{
    margin:
        88px 0 70px;

    padding:
        55px;

    border-radius:30px;

    background:
        linear-gradient(
            135deg,
            rgba(139,92,246,.08),
            rgba(56,103,255,.035)
        );

    border:
        1px solid rgba(139,92,246,.13);
}

.aboutSection > span{
    color:#b39cff;

    font-size:10px;

    font-weight:900;

    letter-spacing:1.6px;
}

.aboutSection h2{
    max-width:760px;

    margin:
        10px 0 14px;

    font-size:
        clamp(35px,5vw,58px);

    letter-spacing:
        -2px;
}

.aboutSection p{
    max-width:800px;

    color:#9399a9;

    line-height:1.8;
}

footer{
    display:flex;

    justify-content:space-between;

    gap:30px;

    padding:
        35px max(28px,calc((100vw - 1420px)/2));

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

    color:#767b88;

    font-size:12px;
}

.floatingHome{
    position:fixed;

    right:22px;
    bottom:22px;

    z-index:50;

    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    border-radius:16px;

    text-decoration:none;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #7049e8,
            #326fd1
        );

    box-shadow:
        0 15px 45px rgba(91,61,200,.3);
}


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

.drawerBackdrop{
    position:fixed;

    inset:0;

    z-index:110;

    opacity:0;
    visibility:hidden;

    background:
        rgba(3,4,8,.62);

    backdrop-filter:
        blur(13px);

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

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

.mobileDrawer{
    position:fixed;

    right:0;
    top:0;
    bottom:0;

    z-index:120;

    width:min(86vw,430px);

    padding:
        24px;

    transform:
        translateX(105%);

    background:
        linear-gradient(
            155deg,
            rgba(18,18,28,.97),
            rgba(7,8,14,.985)
        );

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

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

    backdrop-filter:
        blur(30px);

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

    transition:
        transform .42s
        cubic-bezier(.16,.8,.2,1);

    display:flex;
    flex-direction:column;
}

body.drawerOpen .mobileDrawer{
    transform:
        translateX(0);
}

body.drawerOpen .drawerBackdrop{
    opacity:1;
    visibility:visible;
}

.drawerHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.drawerBrand{
    display:flex;
    align-items:center;

    gap:12px;

    letter-spacing:3px;
}

.drawerClose{
    width:52px;
    height:52px;

    border:0;

    border-radius:17px;

    color:#c8ccda;

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

    font-size:31px;

    cursor:pointer;
}

.drawerDivider{
    height:1px;

    margin:
        24px 0;

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

.drawerNav{
    display:flex;
    flex-direction:column;

    gap:10px;
}

.drawerLink{
    min-height:72px;

    display:grid;

    grid-template-columns:
        48px 1fr auto;

    align-items:center;

    gap:13px;

    padding:
        10px 14px;

    color:#a8adbd;

    border-radius:20px;

    text-decoration:none;

    font-size:16px;

    transition:
        transform .22s ease,
        color .22s ease,
        background .22s ease;
}

.drawerLink:hover,
.drawerLink.active{
    color:#fff;

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

    transform:
        translateX(4px);
}

.drawerIcon{
    height:44px;
    width:44px;

    display:grid;
    place-items:center;

    border-radius:13px;

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

    font-size:11px;

    font-weight:900;
}

.drawerDot{
    width:8px;
    height:8px;

    border-radius:50%;

    background:#9665ff;

    box-shadow:
        0 0 16px rgba(150,101,255,.6);
}

.drawerFooter{
    margin-top:auto;

    display:flex;

    align-items:center;

    gap:13px;

    min-height:82px;

    padding:
        15px;

    border-radius:20px;

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

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

.guestAvatar{
    width:46px;
    height:46px;

    display:grid;
    place-items:center;

    border-radius:14px;

    background:
        rgba(139,92,246,.11);

    color:#baa5ff;
}

.drawerFooter div:last-child{
    display:flex;

    flex-direction:column;

    gap:4px;
}

.drawerFooter span{
    color:#707687;

    font-size:11px;
}


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

@media(max-width:900px){

    .desktopNav{
        display:none;
    }

    .menuButton{
        display:block;
    }

    main{
        width:
            min(100% - 28px,1420px);
    }

    .topbar{
        height:78px;

        padding:
            0 16px;
    }

    .resourceGrid{
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media(max-width:620px){

    body{
        background:
            radial-gradient(
                520px circle at 50% -100px,
                rgba(118,67,230,.16),
                transparent 68%
            ),
            #07080d;
    }

    .brand{
        font-size:15px;
    }

    .brandMark{
        width:35px;
        height:35px;

        border-radius:11px;
    }

    .hero{
        margin-top:20px;

        min-height:auto;

        padding:
            39px 25px;

        border-radius:27px;
    }

    .hero h1{
        margin-top:20px;

        font-size:
            51px;

        letter-spacing:
            -2.7px;
    }

    .hero p{
        font-size:15px;
        line-height:1.7;
    }

    .heroActions{
        display:grid;

        grid-template-columns:
            1fr;
    }

    .primaryButton,
    .secondaryButton{
        width:100%;
    }

    .searchBox{
        min-height:61px;
    }

    .section{
        padding-top:54px;
    }

    .sectionHead{
        display:block;
    }

    .sectionHead h2{
        font-size:36px;
    }

    .sectionCount{
        display:inline-block;

        margin-top:15px;
    }

    .resourceGrid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:10px;
    }

    .resourceCard{
        border-radius:21px;
    }

    .imageArea{
        min-height:150px;
    }

    .imageArea img{
        width:82px;
        height:82px;

        border-radius:20px;
    }

    .cardBody{
        padding:16px;
    }

    .cardBody h3{
        font-size:18px;
    }

    .cardBody p{
        min-height:100px;

        font-size:13px;
    }

    .cardFooter{
        display:block;
    }

    .cardFooter b{
        display:block;

        margin-top:7px;
    }

    .recommendGrid{
        grid-template-columns:1fr;
    }

    .recommendCard{
        grid-template-columns:
            62px 1fr auto;
    }

    .aboutSection{
        padding:
            34px 24px;

        border-radius:25px;
    }

    footer{
        display:block;

        padding:
            28px 20px;

        text-align:center;
    }

    footer span{
        display:block;

        margin-top:9px;

        line-height:1.6;
    }

}


@media(max-width:380px){

    .resourceGrid{
        grid-template-columns:1fr;
    }

    .imageArea{
        min-height:185px;
    }

}


/* remove ugly mobile tap blue highlight */

a,
button,
input,
.resourceCard,
.recommendCard{
    -webkit-tap-highlight-color:
        transparent;
}

button,
a{
    touch-action:manipulation;
}


/* =========================================================
   MINECRFTMODS — BLOCK WORLD PREMIUM V6
   ========================================================= */

:root{
    --mc-bg:#070907;
    --mc-deep:#0d110d;

    --mc-grass:#72b94d;
    --mc-grass-light:#91d166;

    --mc-dirt:#694930;
    --mc-dirt-dark:#3d2a1d;

    --mc-stone:#626862;
    --mc-stone-dark:#343934;

    --mc-emerald:#42db86;
    --mc-gold:#e2c76c;

    --mc-white:#f4f7f3;
    --mc-muted:#9da79e;
}


/* ---------------------------------------------------------
   FULL BLOCK-WORLD BACKGROUND
--------------------------------------------------------- */

body{
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        radial-gradient(
            800px circle at 10% 0%,
            rgba(77,180,89,.09),
            transparent 62%
        ),
        #080b08 !important;

    background-size:
        32px 32px,
        32px 32px,
        auto,
        auto !important;
}


/* chunk-grid overlay */

body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-5;
    pointer-events:none;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 127px,
            rgba(125,185,91,.03) 127px 128px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0 127px,
            rgba(125,185,91,.025) 127px 128px
        );
}


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

.topbar{
    background:
        linear-gradient(
            180deg,
            rgba(19,25,19,.96),
            rgba(8,11,8,.97)
        ) !important;

    border-bottom:
        3px solid #2f3a2f !important;

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


/* website logo block frame */

.brandMark{
    border-radius:8px !important;

    background:
        linear-gradient(
            180deg,
            #83c859,
            #5b963d
        ) !important;

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.18),
        0 4px 0 #3c682c,
        0 10px 25px rgba(0,0,0,.25) !important;
}


/* ---------------------------------------------------------
   HERO — GRASS / DIRT / STONE BIOME
--------------------------------------------------------- */

.hero{
    position:relative !important;

    border-radius:20px !important;

    border:
        2px solid #344034 !important;

    background:
        linear-gradient(
            180deg,

            /* grass top */
            #79bd50 0%,
            #79bd50 7%,

            #5d9e40 7%,
            #5d9e40 10%,

            /* dirt layer */
            #6b4c32 10%,
            #59402b 34%,

            /* stone cave */
            #252c27 34%,
            #101510 100%
        ) !important;

    box-shadow:
        0 30px 90px rgba(0,0,0,.5),
        inset 0 2px 0 rgba(255,255,255,.06) !important;
}


/* pixel noise blocks */

.hero::before{
    content:"" !important;

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

    opacity:.20 !important;

    pointer-events:none !important;

    background:
        linear-gradient(
            90deg,
            transparent 0 15px,
            rgba(0,0,0,.16) 15px 17px,
            transparent 17px 32px
        ),
        linear-gradient(
            transparent 0 15px,
            rgba(0,0,0,.12) 15px 17px,
            transparent 17px 32px
        ) !important;

    background-size:
        32px 32px !important;
}


.heroGlow{
    background:
        rgba(129,220,99,.13) !important;

    filter:
        blur(80px) !important;
}


.heroLabel{
    color:#d4f3bd !important;

    background:
        rgba(14,23,14,.78) !important;

    border:
        1px solid #6b9560 !important;

    border-radius:7px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06);
}


.hero h1{
    color:#fff !important;

    text-shadow:
        0 3px 0 #172018,
        0 6px 18px rgba(0,0,0,.4) !important;
}


.hero h1 span{
    background:none !important;

    color:#9ddd73 !important;

    -webkit-text-fill-color:#9ddd73 !important;

    text-shadow:
        0 3px 0 #40672e,
        0 6px 22px rgba(0,0,0,.3) !important;
}


.hero p{
    color:#d0d8d0 !important;
}


/* ---------------------------------------------------------
   BUTTONS — BLOCK BUTTONS
--------------------------------------------------------- */

.primaryButton{
    border-radius:7px !important;

    color:#081008 !important;

    background:
        linear-gradient(
            180deg,
            #91d76b,
            #65a944
        ) !important;

    border:
        2px solid #a6e67f !important;

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.22),
        0 6px 0 #3d7130,
        0 14px 28px rgba(0,0,0,.28) !important;
}


.primaryButton:hover{
    transform:
        translateY(-2px) !important;
}


.primaryButton:active{
    transform:
        translateY(4px) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 2px 0 #3d7130 !important;
}


.secondaryButton{
    border-radius:7px !important;

    background:
        linear-gradient(
            180deg,
            #343b35,
            #202521
        ) !important;

    border:
        2px solid #4e584f !important;

    color:#eef3ee !important;

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.05),
        0 5px 0 #111511 !important;
}


/* ---------------------------------------------------------
   SEARCH — CRAFTING TABLE INPUT FEEL
--------------------------------------------------------- */

.searchBox{
    border-radius:9px !important;

    border:
        2px solid #3c493d !important;

    background:
        linear-gradient(
            180deg,
            #151c16,
            #0c110d
        ) !important;

    box-shadow:
        inset 0 4px 12px rgba(0,0,0,.45),
        0 8px 25px rgba(0,0,0,.23) !important;
}


.searchBox input{
    color:#f1f5f1 !important;
}


.searchBox input::placeholder{
    color:#768078 !important;
}


/* ---------------------------------------------------------
   SECTION TITLES
--------------------------------------------------------- */

.sectionHead h2{
    color:#fff !important;

    text-shadow:
        0 3px 0 #111,
        0 7px 16px rgba(0,0,0,.3);
}


.miniLabel{
    color:#9bd876 !important;
}


.sectionCount{
    color:#cbd4cb !important;

    background:#131913 !important;

    border:
        1px solid #394439 !important;

    border-radius:7px !important;
}


/* ---------------------------------------------------------
   RESOURCE CARDS — INVENTORY BLOCK STYLE
--------------------------------------------------------- */

.resourceCard{
    border-radius:12px !important;

    border:
        2px solid #333c34 !important;

    background:
        linear-gradient(
            180deg,
            #171e18,
            #0e130f
        ) !important;

    box-shadow:
        0 7px 0 #080b08,
        0 18px 35px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}


.resourceCard::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:8px;

    background:
        repeating-linear-gradient(
            90deg,
            #6fac49 0 18px,
            #87ca5e 18px 36px,
            #5d943e 36px 54px
        );

    opacity:.92;
}


.resourceCard:hover{
    transform:
        translateY(-6px)
        scale(1.01) !important;

    border-color:#597357 !important;

    box-shadow:
        0 9px 0 #080b08,
        0 27px 55px rgba(0,0,0,.42) !important;
}


/* ---------------------------------------------------------
   MOD LOGO AREA — GRASS BLOCK SLOT
--------------------------------------------------------- */

.imageArea{
    min-height:220px !important;

    background:
        linear-gradient(
            180deg,

            #79b951 0%,
            #79b951 9%,

            #5d9142 9%,
            #5d9142 12%,

            #63452f 12%,
            #483323 45%,

            #292e2a 45%,
            #171b18 100%
        ) !important;

    border-bottom:
        2px solid #313a31 !important;
}


.imageArea::before{
    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.18;

    background:
        linear-gradient(
            90deg,
            transparent 0 15px,
            rgba(0,0,0,.24) 15px 17px,
            transparent 17px 32px
        ),
        linear-gradient(
            transparent 0 15px,
            rgba(0,0,0,.19) 15px 17px,
            transparent 17px 32px
        );

    background-size:
        32px 32px;
}


.imageArea img{
    position:relative;

    z-index:2;

    width:105px !important;
    height:105px !important;

    border-radius:8px !important;

    box-shadow:
        0 0 0 3px #111,
        0 0 0 6px #555d55,
        0 8px 0 #202520,
        0 18px 35px rgba(0,0,0,.42) !important;
}


/* ---------------------------------------------------------
   CARD BODY
--------------------------------------------------------- */

.cardType{
    color:#a6df83 !important;
}


.cardBody h3{
    color:white !important;

    text-shadow:
        0 2px 0 #000 !important;
}


.cardBody p{
    color:#9fa89f !important;
}


.cardFooter{
    border-top:
        1px solid #303730 !important;
}


.cardFooter b{
    color:#9ede76 !important;
}


/* ---------------------------------------------------------
   RECOMMENDED — HOTBAR / INVENTORY SLOTS
--------------------------------------------------------- */

.recommendCard{
    border-radius:10px !important;

    border:
        2px solid #343c34 !important;

    background:
        linear-gradient(
            180deg,
            #171d18,
            #0d110e
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 5px 0 #090c09 !important;
}


.recommendCard img{
    border-radius:6px !important;

    box-shadow:
        0 0 0 3px #111,
        0 0 0 5px #505750 !important;
}


.recommendCard small,
.recommendCard b{
    color:#a8df85 !important;
}


/* ---------------------------------------------------------
   ABOUT SECTION — CAVE / STONE
--------------------------------------------------------- */

.aboutSection{
    border-radius:14px !important;

    border:
        2px solid #3b423c !important;

    background:
        linear-gradient(
            180deg,
            #313733,
            #1c211d
        ) !important;

    box-shadow:
        0 10px 0 #101310,
        0 25px 60px rgba(0,0,0,.35) !important;
}


.aboutSection > span{
    color:#b7e49c !important;
}


/* ---------------------------------------------------------
   MOBILE DRAWER — INVENTORY SCREEN
--------------------------------------------------------- */

.mobileDrawer{
    background:
        linear-gradient(
            180deg,
            #171d18,
            #090d0a
        ) !important;

    border-left:
        3px solid #384638 !important;

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


.drawerLink{
    border-radius:8px !important;

    border:
        1px solid transparent;
}


.drawerLink:hover,
.drawerLink.active{
    background:
        #202820 !important;

    border-color:
        #435443 !important;
}


.drawerIcon{
    border-radius:5px !important;

    background:
        #2c342d !important;

    border:
        1px solid #434c44 !important;
}


.drawerDot{
    background:
        #80d65a !important;

    box-shadow:
        0 0 13px rgba(128,214,90,.55) !important;
}


/* ---------------------------------------------------------
   FLOATING HOME
--------------------------------------------------------- */

.floatingHome{
    border-radius:7px !important;

    color:#071006 !important;

    background:
        linear-gradient(
            180deg,
            #87d15f,
            #5d9d3f
        ) !important;

    border:
        2px solid #9ce178 !important;

    box-shadow:
        0 5px 0 #3c6a2c,
        0 15px 30px rgba(0,0,0,.28) !important;
}


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

@media(max-width:620px){

    body{
        background-size:
            24px 24px,
            24px 24px,
            auto,
            auto !important;
    }


    .hero{
        border-radius:14px !important;

        padding:
            42px 24px !important;
    }


    .hero h1{
        font-size:
            47px !important;

        letter-spacing:
            -2px !important;
    }


    .resourceCard{
        border-radius:9px !important;
    }


    .imageArea{
        min-height:
            142px !important;
    }


    .imageArea img{
        width:75px !important;
        height:75px !important;

        box-shadow:
            0 0 0 2px #111,
            0 0 0 4px #555d55,
            0 6px 0 #202520,
            0 13px 25px rgba(0,0,0,.4) !important;
    }


    .cardBody{
        padding:
            14px !important;
    }


    .cardBody h3{
        font-size:
            16px !important;
    }

}


/* NO BLUE TAP BOX */

*{
    -webkit-tap-highlight-color:
        transparent !important;
}


/* =========================================================
   BLOCKWORLD PREMIUM V7
   Minecraft-inspired, NOT grass-everywhere
   ========================================================= */

:root{
  --bw-bg:#07090b;
  --bw-panel:#101318;
  --bw-panel2:#161a20;
  --bw-stone:#5c6268;
  --bw-deepslate:#252a31;
  --bw-deepslate2:#171b20;
  --bw-amethyst:#8a5cf6;
  --bw-diamond:#38d9ff;
  --bw-lapis:#3e70ff;
  --bw-copper:#d17849;
  --bw-moss:#6eaa55;
  --bw-gold:#e0b94f;
  --bw-redstone:#e95757;
  --bw-quartz:#e8e5dc;
}

/* =========================
   PAGE / CAVE BACKGROUND
   ========================= */

html,body{
  background:
    radial-gradient(circle at 14% 4%,rgba(138,92,246,.09),transparent 25%),
    radial-gradient(circle at 84% 14%,rgba(56,217,255,.06),transparent 24%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.017) 0 1px,
      transparent 1px 32px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.014) 0 1px,
      transparent 1px 32px
    ),
    #07090b !important;
}

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

.topbar{
  background:
    linear-gradient(180deg,#0f1316,#080a0c) !important;
  border-bottom:1px solid #2c3238 !important;
  box-shadow:
    0 12px 40px rgba(0,0,0,.42) !important;
}

/* =========================
   HERO - DEEPSLATE / ORE
   ========================= */

.hero{
  position:relative !important;
  overflow:hidden !important;
  border-radius:24px !important;

  background:
    radial-gradient(circle at 78% 40%,rgba(138,92,246,.18),transparent 28%),
    radial-gradient(circle at 62% 16%,rgba(56,217,255,.08),transparent 24%),
    linear-gradient(135deg,#1a1f26,#0b0e12 68%) !important;

  border:1px solid #343b43 !important;

  box-shadow:
    0 35px 100px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

/* Pixel cave texture */
.hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  opacity:.34 !important;

  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255,255,255,.025) 0 25%,
      rgba(0,0,0,.08) 0 50%
    ) 0 0 / 48px 48px !important;
}

/* Ore blocks on hero */
.hero::after{
  content:"";
  position:absolute;
  width:64px;
  height:64px;
  right:8%;
  top:16%;
  pointer-events:none;

  background:
    linear-gradient(135deg,#303640 0 45%,#8562ed 45% 58%,#242a31 58% 100%);

  box-shadow:
    -82px 72px 0 #242a30,
    -82px 72px 0 1px #343b43,
    76px 82px 0 #1d2228,
    76px 82px 0 1px #333941,
    -160px 8px 0 #242a31,
    -160px 8px 0 1px #353c44,
    18px 155px 0 #272d34;

  opacity:.72;
  transform:rotate(3deg);
}

/* Hero green removed */
.hero h1 span{
  color:#a77bff !important;
  -webkit-text-fill-color:#a77bff !important;
  text-shadow:
    0 0 26px rgba(138,92,246,.2),
    0 3px 0 rgba(0,0,0,.55) !important;
}

.heroLabel{
  color:#cab8ff !important;
  background:rgba(92,62,154,.13) !important;
  border:1px solid rgba(164,124,255,.28) !important;
}

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

.primaryButton{
  border-radius:9px !important;
  color:white !important;

  background:
    linear-gradient(135deg,#7b58e7,#3b9ee8) !important;

  border:1px solid rgba(180,164,255,.4) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 5px 0 #32276d,
    0 14px 30px rgba(64,79,200,.2) !important;
}

.secondaryButton{
  border-radius:9px !important;
  background:linear-gradient(180deg,#292f36,#171b20) !important;
  border:1px solid #434a53 !important;
  color:#f4f5f7 !important;
}

/* =========================
   RESOURCE CARDS
   ========================= */

.resourceCard{
  --ore:#8a5cf6;
  --block:#282e35;
  --block2:#171b20;

  position:relative !important;

  background:
    linear-gradient(180deg,var(--block),var(--block2)) !important;

  border:1px solid #363d45 !important;
  border-radius:16px !important;

  box-shadow:
    0 7px 0 #080a0c,
    0 22px 48px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

/* Different block types */
.resourceCard:nth-child(6n+1){
  --ore:#8a5cf6;
  --block:#2b2935;
  --block2:#17151d;
}

.resourceCard:nth-child(6n+2){
  --ore:#38d9ff;
  --block:#242d33;
  --block2:#12181c;
}

.resourceCard:nth-child(6n+3){
  --ore:#d17849;
  --block:#332923;
  --block2:#1d1714;
}

.resourceCard:nth-child(6n+4){
  --ore:#6eaa55;
  --block:#273125;
  --block2:#151b14;
}

.resourceCard:nth-child(6n+5){
  --ore:#3e70ff;
  --block:#222837;
  --block2:#131722;
}

.resourceCard:nth-child(6n+6){
  --ore:#e0b94f;
  --block:#312d22;
  --block2:#1b1811;
}

/* ore strip */
.resourceCard::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:7px;

  background:
    repeating-linear-gradient(
      90deg,
      var(--block) 0 18px,
      var(--ore) 18px 22px,
      var(--block) 22px 42px
    );

  opacity:.9;
}

/* =========================
   IMAGE AREA = REAL BLOCK LAYERS
   ========================= */

.imageArea{
  position:relative !important;
  overflow:hidden !important;

  background:
    linear-gradient(
      180deg,
      #3d444c 0 24%,
      #2a3037 24% 48%,
      #1b2026 48% 72%,
      #111519 72% 100%
    ) !important;

  border-bottom:1px solid #353c44 !important;
}

/* Pixel block pattern */
.imageArea::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.31;

  background:
    repeating-conic-gradient(
      rgba(255,255,255,.035) 0 25%,
      transparent 0 50%
    ) 0 0 / 34px 34px;
}

/* Ore particles */
.imageArea::after{
  content:"";
  position:absolute;
  width:12px;
  height:12px;
  right:18%;
  top:28%;

  background:var(--ore);

  box-shadow:
    28px 31px 0 color-mix(in srgb,var(--ore) 70%,#fff),
    -26px 47px 0 color-mix(in srgb,var(--ore) 65%,#111),
    44px 82px 0 color-mix(in srgb,var(--ore) 58%,#fff);

  opacity:.7;
}

.imageArea img{
  position:relative;
  z-index:3;

  border-radius:10px !important;

  box-shadow:
    0 0 0 3px #0e1114,
    0 0 0 5px #505861,
    0 10px 0 #0c0e11,
    0 22px 40px rgba(0,0,0,.46) !important;
}

/* =========================
   SECTION BLOCK THEMES
   ========================= */

section:nth-of-type(2){
  --section-accent:#38d9ff;
}

section:nth-of-type(3){
  --section-accent:#8a5cf6;
}

section:nth-of-type(4){
  --section-accent:#d17849;
}

section:nth-of-type(5){
  --section-accent:#6eaa55;
}

.sectionHead h2::after{
  background:var(--section-accent,#8a5cf6) !important;
  box-shadow:0 0 18px color-mix(in srgb,var(--section-accent,#8a5cf6) 45%,transparent);
}

/* =========================
   RECOMMENDED = HOTBAR
   ========================= */

.recommendCard{
  background:
    linear-gradient(180deg,#242a30,#12161a) !important;

  border:1px solid #3e464f !important;
  border-radius:12px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 6px 0 #080a0c !important;
}

.recommendCard:nth-child(4n+1){
  border-top:3px solid #8a5cf6 !important;
}

.recommendCard:nth-child(4n+2){
  border-top:3px solid #38d9ff !important;
}

.recommendCard:nth-child(4n+3){
  border-top:3px solid #d17849 !important;
}

.recommendCard:nth-child(4n+4){
  border-top:3px solid #6eaa55 !important;
}

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

.mobileDrawer{
  background:
    linear-gradient(180deg,#171c21,#090c0f) !important;

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

.drawerLink.active{
  background:
    linear-gradient(90deg,rgba(138,92,246,.18),rgba(56,217,255,.06)) !important;

  border:1px solid rgba(138,92,246,.25) !important;
}

/* Remove old giant green */
.floatingHome{
  background:
    linear-gradient(135deg,#7857da,#338cd1) !important;

  color:white !important;

  border:1px solid rgba(174,160,255,.35) !important;

  box-shadow:
    0 5px 0 #30235f,
    0 14px 30px rgba(0,0,0,.3) !important;
}