/* ==========================================================
   MINECRFTMODS — MOD PREMIUM THEMES V8
   FINAL DETAIL PAGE OVERRIDE
   ========================================================== */

body[data-mod-theme]{
    --accent:#9b6cff;
    --accent2:#6740d7;
    --accent-soft:rgba(155,108,255,.20);

    --block-1:#292432;
    --block-2:#211c29;
    --block-3:#17141d;
    --block-line:#453b54;

    --ore:#b58cff;
    --ore-soft:rgba(181,140,255,.24);

    --page-bg:#08090c;
}


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

body[data-mod-theme]{
    background:
        radial-gradient(
            700px circle at 10% 5%,
            var(--accent-soft),
            transparent 55%
        ),
        radial-gradient(
            600px circle at 92% 28%,
            rgba(255,255,255,.025),
            transparent 60%
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.012) 0 1px,
            transparent 1px 32px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.012) 0 1px,
            transparent 1px 32px
        ),
        var(--page-bg) !important;
}


/* ==========================================================
   PAGE ENTER ANIMATION
   ========================================================== */

body[data-mod-theme] main,
body[data-mod-theme] .detailPage{
    animation:
        mcPageEnter .55s cubic-bezier(.2,.75,.2,1) both;
}

@keyframes mcPageEnter{
    from{
        opacity:0;
        transform:
            translateY(18px)
            scale(.985);
        filter:blur(7px);
    }

    to{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
        filter:blur(0);
    }
}


/* ==========================================================
   PREMIUM HERO BLOCK
   ========================================================== */

body[data-mod-theme] .detailHero{
    position:relative !important;
    overflow:hidden !important;

    border-radius:24px !important;

    border:
        1px solid var(--block-line) !important;

    background:
        radial-gradient(
            circle at 82% 18%,
            var(--accent-soft),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            var(--block-1),
            var(--block-2) 48%,
            var(--block-3) 100%
        ) !important;

    box-shadow:
        0 1px 0 rgba(255,255,255,.035) inset,
        0 28px 80px rgba(0,0,0,.48),
        0 0 0 1px rgba(255,255,255,.012) !important;
}


/* BLOCK TEXTURE */

body[data-mod-theme] .detailHero::before{
    content:"" !important;

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

    pointer-events:none !important;

    opacity:.24 !important;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(255,255,255,.028) 1px,
            transparent 1px
        ),
        repeating-conic-gradient(
            from 45deg,
            rgba(255,255,255,.018) 0 25%,
            rgba(0,0,0,.045) 0 50%
        ) !important;

    background-size:
        48px 48px,
        48px 48px,
        96px 96px !important;
}


/* DECORATIVE MINERAL BLOCKS */

body[data-mod-theme] .detailHero::after{
    content:"";

    position:absolute;

    width:52px;
    height:52px;

    right:7%;
    top:13%;

    pointer-events:none;

    opacity:.72;

    background:
        linear-gradient(
            135deg,
            var(--block-1) 0 38%,
            var(--ore) 38% 57%,
            var(--block-2) 57% 100%
        );

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

    box-shadow:
        -70px 76px 0 var(--block-2),
        -70px 76px 0 1px var(--block-line),

        -142px 12px 0 var(--block-1),
        -142px 12px 0 1px var(--block-line),

        14px 138px 0 var(--block-3),
        14px 138px 0 1px var(--block-line),

        -184px 118px 0 var(--block-2),
        -184px 118px 0 1px var(--block-line);

    transform:
        rotate(4deg);
}


/* ==========================================================
   MOD LOGO SLOT
   ========================================================== */

body[data-mod-theme] .detailLogo{
    position:relative !important;
    z-index:5 !important;

    border-radius:16px !important;

    background:
        var(--block-3) !important;

    box-shadow:
        0 0 0 3px #0a0b0e,
        0 0 0 6px var(--block-line),
        0 0 34px var(--accent-soft),
        0 12px 28px rgba(0,0,0,.5) !important;

    transition:
        transform .28s ease,
        box-shadow .28s ease !important;
}


body[data-mod-theme] .detailLogo:hover{
    transform:
        translateY(-4px)
        scale(1.035);

    box-shadow:
        0 0 0 3px #0a0b0e,
        0 0 0 6px var(--accent),
        0 0 42px var(--accent-soft),
        0 18px 34px rgba(0,0,0,.55) !important;
}


/* ==========================================================
   TITLE / TEXT
   ========================================================== */

body[data-mod-theme] .detailTitle h1,
body[data-mod-theme] h1{
    color:#fff !important;

    text-shadow:
        0 2px 0 rgba(0,0,0,.45),
        0 0 26px var(--accent-soft) !important;
}


body[data-mod-theme] .detailTitle p{
    color:#aeb3bd !important;
}


/* ==========================================================
   CATEGORY / BADGES
   ========================================================== */

body[data-mod-theme] .eyebrow,
body[data-mod-theme] .badge,
body[data-mod-theme] .tag,
body[data-mod-theme] .kicker{

    color:
        color-mix(in srgb,var(--accent) 70%,white) !important;

    background:
        color-mix(in srgb,var(--accent) 8%,#11151a) !important;

    border:
        1px solid
        color-mix(in srgb,var(--accent) 34%,transparent) !important;

    border-radius:
        8px !important;

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


/* ==========================================================
   INFO BLOCKS
   ========================================================== */

body[data-mod-theme] .detailStat,
body[data-mod-theme] .stat,
body[data-mod-theme] .infoCard,
body[data-mod-theme] .metaBox{

    background:
        linear-gradient(
            150deg,
            color-mix(in srgb,var(--block-1) 72%,#111419),
            color-mix(in srgb,var(--block-3) 86%,#07090b)
        ) !important;

    border:
        1px solid
        color-mix(in srgb,var(--accent) 16%,#3c424a) !important;

    border-radius:
        13px !important;

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


/* ==========================================================
   DOWNLOAD BUTTON
   ========================================================== */

body[data-mod-theme] .downloadBtn{

    background:
        linear-gradient(
            135deg,
            color-mix(in srgb,var(--accent) 90%,white),
            var(--accent2)
        ) !important;

    color:#fff !important;

    border:
        1px solid
        color-mix(in srgb,var(--accent) 65%,white) !important;

    border-radius:
        12px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 6px 0
        color-mix(in srgb,var(--accent2) 70%,#101218),
        0 16px 36px var(--accent-soft) !important;

    transition:
        transform .2s ease,
        filter .2s ease,
        box-shadow .2s ease !important;
}


body[data-mod-theme] .downloadBtn:hover{
    transform:
        translateY(-3px);

    filter:
        brightness(1.07);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        0 8px 0
        color-mix(in srgb,var(--accent2) 72%,#101218),
        0 22px 42px var(--accent-soft) !important;
}


body[data-mod-theme] .downloadBtn:active{
    transform:
        translateY(4px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 2px 0
        color-mix(in srgb,var(--accent2) 72%,#101218) !important;
}


/* ==========================================================
   COPY / SHARE
   ========================================================== */

body[data-mod-theme] .actionButton,
body[data-mod-theme] .action,
body[data-mod-theme] .copyButton,
body[data-mod-theme] .shareButton{

    background:
        linear-gradient(
            145deg,
            var(--block-1),
            var(--block-3)
        ) !important;

    color:#fff !important;

    border:
        1px solid var(--block-line) !important;

    border-radius:
        11px !important;

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


body[data-mod-theme] .actionButton:hover,
body[data-mod-theme] .action:hover{

    border-color:
        color-mix(in srgb,var(--accent) 45%,var(--block-line)) !important;

    background:
        color-mix(in srgb,var(--accent) 7%,var(--block-1)) !important;
}


/* ==========================================================
   ABOUT / LOWER PANELS
   ========================================================== */

body[data-mod-theme] .panel{

    position:relative !important;
    overflow:hidden !important;

    background:
        linear-gradient(
            150deg,
            var(--block-1),
            var(--block-3)
        ) !important;

    border:
        1px solid var(--block-line) !important;

    border-radius:
        18px !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.36),
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}


body[data-mod-theme] .panel::before{

    content:"";

    position:absolute;

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

    height:5px;

    background:
        repeating-linear-gradient(
            90deg,
            var(--block-1) 0 24px,
            var(--ore) 24px 30px,
            var(--block-1) 30px 54px
        );

    opacity:.85;
}


/* ==========================================================
   BACK BUTTON
   ========================================================== */

body[data-mod-theme] .backButton,
body[data-mod-theme] a[data-premium-back]{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            var(--block-1),
            var(--block-3)
        ) !important;

    color:#fff !important;

    border:
        1px solid var(--block-line) !important;

    border-radius:
        12px !important;

    box-shadow:
        0 8px 25px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.025) !important;

    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease !important;
}


body[data-mod-theme] .backButton:hover,
body[data-mod-theme] a[data-premium-back]:hover{

    transform:
        translateX(-4px);

    border-color:
        var(--accent) !important;

    background:
        color-mix(in srgb,var(--accent) 8%,var(--block-1)) !important;
}


/* ==========================================================
   EXIT / BACK ANIMATION
   ========================================================== */

body.mc-leaving main,
body.mc-leaving .detailPage{

    animation:
        mcPageLeave .38s
        cubic-bezier(.4,0,.25,1)
        forwards !important;
}


@keyframes mcPageLeave{

    to{
        opacity:0;

        transform:
            translateX(38px)
            scale(.985);

        filter:
            blur(7px);
    }

}


/* Back button click ripple */

.mc-back-ripple{

    position:absolute;

    width:12px;
    height:12px;

    left:50%;
    top:50%;

    border-radius:50%;

    background:
        var(--accent);

    pointer-events:none;

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

    opacity:.32;

    animation:
        mcBackRipple .38s ease-out forwards;
}


@keyframes mcBackRipple{

    to{
        transform:
            translate(-50%,-50%)
            scale(12);

        opacity:0;
    }

}


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

@media(max-width:700px){

    body[data-mod-theme] .detailHero{
        border-radius:18px !important;
    }


    body[data-mod-theme] .detailHero::after{

        width:32px;
        height:32px;

        right:4%;
        top:12%;

        opacity:.46;

        box-shadow:
            -44px 48px 0 var(--block-2),
            -44px 48px 0 1px var(--block-line),

            -87px 8px 0 var(--block-1),
            -87px 8px 0 1px var(--block-line),

            10px 92px 0 var(--block-3);
    }


    body[data-mod-theme] .detailLogo{

        border-radius:
            13px !important;
    }


    body[data-mod-theme] .downloadBtn{

        min-height:
            66px !important;

        border-radius:
            12px !important;
    }


    body[data-mod-theme] .panel{

        border-radius:
            16px !important;
    }

}


/* NO MOBILE BLUE TAP */

body[data-mod-theme] *,
body[data-mod-theme] *::before,
body[data-mod-theme] *::after{

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